/* =========================================================
   BiciCova — holding page
   Monochrome, architectural, 1px borders, 4–8px radii.
   Tokens follow docs/bicicova-design-guidelines.md §3, with one
   deliberate deviation: the accent is signal terracotta, not the
   doc's #2563EB (Tailwind blue-600). Doc §3 still to be updated.
   ========================================================= */

:root{
  --black:#111111;
  --off:#F4F3EF;
  --white:#FFFFFF;
  /* Accent — signal terracotta. Hue-neutral names: one line to revise. */
  --accent:#B5401B;        /* fills: buttons, signup submit, focus ring */
  --accent-dark:#9A3616;   /* hover */
  --accent-ink:#FFFFFF;    /* text on top of --accent            5.65:1 */
  --accent-text:#B5401B;   /* accent text on --off                5.09:1 */

  --grey:#9CA3AF;

  --line:rgba(17,17,17,.16);          /* thin divider on light */
  --line-inv:rgba(255,255,255,.20);   /* thin divider on dark  */

  --r:4px;                            /* subtle rounding only  */
  --gutter:clamp(20px,5vw,64px);
  --max:1280px;

  --t:.18s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--off);
  color:var(--black);
  font-family:"Inter","Geist","Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.6;
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}

h1,h2,h3{
  margin:0;letter-spacing:-.028em;line-height:1.02;font-weight:800;
  /* a long word ("Infraestructura") must break rather than push the
     page wider, at small widths with enlarged system text */
  overflow-wrap:break-word;
}

p{margin:0}

a{color:inherit;text-decoration:none;transition:color var(--t),opacity var(--t)}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.sr-only,.skip{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip:focus{
  position:fixed;top:12px;left:12px;z-index:100;width:auto;height:auto;
  clip:auto;margin:0;padding:10px 16px;background:var(--black);color:var(--white);
  border-radius:var(--r);
}

/* Focus ring is neutral, never the accent: an accent-colored ring
   disappears against an accent-filled button. */
:where(a,button,input):focus-visible{
  outline:2px solid var(--black);
  outline-offset:3px;
}
.dark :where(a,button,input):focus-visible,
.site-foot :where(a,button,input):focus-visible{
  outline-color:var(--white);
}

/* ---------- Labels (uppercase, tracked) ---------- */
.label{
  margin:0 0 20px;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grey);
}
.label-inv{color:rgba(255,255,255,.55)}

/* ---------- Logo badge: BICI | COVA ---------- */
.logo{
  display:inline-flex;
  align-items:stretch;
  flex:none;                /* never shrink: overflow:hidden would clip COVA */
  border:1.5px solid var(--black);
  border-radius:2px;
  font-weight:800;
  font-size:.9375rem;
  letter-spacing:.02em;
  line-height:1;
  overflow:hidden;
  transition:opacity var(--t);
}
.logo-a,.logo-b{padding:.5em .62em;white-space:nowrap}
.logo-a{background:var(--black);color:var(--white)}
.logo-b{background:var(--white);color:var(--black)}
.logo:hover{opacity:.78}

.logo-inv{border-color:var(--white)}
.logo-inv .logo-a{background:var(--white);color:var(--black)}
.logo-inv .logo-b{background:transparent;color:var(--white)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:16px 26px;
  border:1px solid transparent;
  border-radius:var(--r);
  font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;
  transition:background var(--t),color var(--t),transform var(--t);
}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-accent:hover{background:var(--accent-dark)}
.btn-accent:active{transform:translateY(1px)}
.btn-sm{padding:11px 18px;font-size:.875rem}
.btn span{transition:transform var(--t)}
.btn:hover span{transform:translateX(3px)}

/* ---------- Monoline icons ---------- */
.icon{
  width:30px;height:30px;
  fill:none;stroke:var(--black);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}

/* =========================================================
   Header
   ========================================================= */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(244,243,239,.88);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-inner{
  display:flex;align-items:center;gap:24px;
  min-height:76px;
}
/* If the row can't fit both at large text sizes, the CTA wraps
   to its own line rather than anything being squeezed. */
@media (max-width:860px){
  .head-inner{flex-wrap:wrap;row-gap:12px;padding-block:12px}
}
.nav{
  display:flex;gap:30px;
  margin-left:auto;
  font-size:.9375rem;
}
.nav a{color:var(--black);opacity:.7}
.nav a:hover{opacity:1;color:var(--accent-text)}
.head-inner .btn{flex:none}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  border-bottom:1px solid var(--line);
  padding-block:clamp(56px,7vw,104px) clamp(56px,7vw,104px);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero-copy{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}

.hero h1{
  font-size:clamp(3.1rem,8.4vw,6.4rem);
  line-height:.94;
  letter-spacing:-.04em;
}
.lead{
  margin:clamp(22px,2.4vw,32px) 0 clamp(28px,3vw,40px);
  max-width:34ch;
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  line-height:1.5;
  color:#3a3a38;
}

/* Photo inside a rectangular frame — the Cova motif */
.hero-frame{
  position:relative;margin:0;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--white);
  overflow:hidden;
  animation:rise .7s .08s cubic-bezier(.2,.7,.2,1) both;
}
.hero-frame img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center;
  /* neutral grading, per guidelines §7 */
  filter:saturate(.9) contrast(1.02);
}

/* =========================================================
   Beneficios — three modules, thin dividers
   ========================================================= */
.benefits{background:var(--white);border-bottom:1px solid var(--line)}
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.benefit{
  padding:clamp(34px,4vw,54px) clamp(22px,3vw,44px);
  border-left:1px solid var(--line);
}
.benefit:first-child{border-left:0;padding-left:0}
.benefit:last-child{padding-right:0}
.benefit h2{margin:18px 0 8px;font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem)}
.benefit p{color:#4a4a47}

/* =========================================================
   Para comunidades / Para ciudades
   ========================================================= */
.audience{padding-block:clamp(64px,7vw,104px)}
.audience-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.2vw,28px);
}
.module{
  padding:clamp(28px,3.2vw,44px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color var(--t),transform var(--t);
}
.module:hover{border-color:rgba(17,17,17,.42);transform:translateY(-2px)}
.module h2{margin:20px 0 12px;font-size:clamp(1.3125rem,1.2rem + .5vw,1.625rem)}
.module p{color:#4a4a47;max-width:46ch}
.module-meta{
  margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--grey);
}

/* =========================================================
   Dark section
   ========================================================= */
.dark{background:var(--black);color:var(--white)}
.dark-left,.dark-right{min-width:0}   /* let grid items shrink below min-content */
.dark-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(40px,6vw,88px);
  padding-block:clamp(72px,9vw,128px);
  align-items:start;
}
.dark h2{font-size:clamp(2.125rem,1.4rem + 3.1vw,3.75rem);line-height:1.04}
.dark-right p{color:rgba(255,255,255,.76);max-width:42ch}
.dark-right>p:first-child{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem)}

.rule{
  margin:clamp(32px,4vw,52px) 0;
  border:0;border-top:1px solid var(--line-inv);
}
.signup-copy{margin-bottom:18px}

.signup{display:flex;gap:10px;max-width:460px}
.signup input{
  flex:1;min-width:0;
  padding:15px 18px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-inv);
  border-radius:var(--r);
  color:var(--white);
  font:inherit;font-size:.9375rem;
  transition:border-color var(--t),background var(--t);
}
.signup input::placeholder{color:rgba(255,255,255,.42)}
.signup input:hover{border-color:rgba(255,255,255,.34)}
.signup input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.09)}
.signup button{
  flex:none;width:54px;
  display:grid;place-items:center;
  background:var(--accent);border:0;border-radius:var(--r);
  color:var(--accent-ink);cursor:pointer;
  transition:background var(--t);
}
.signup button:hover{background:var(--accent-dark)}
.signup button svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.signup-alt{margin-top:16px;font-size:.875rem}
.signup-alt a{color:var(--white);border-bottom:1px solid var(--line-inv);padding-bottom:1px}
.signup-alt a:hover{border-color:var(--white)}

/* =========================================================
   Footer
   ========================================================= */
.site-foot{background:var(--black);color:var(--white);border-top:1px solid var(--line-inv)}
.foot-inner{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(28px,4vw,56px);
  padding-block:clamp(48px,6vw,76px);
}
.foot-claim{
  margin-top:20px;max-width:24ch;
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.8;color:rgba(255,255,255,.55);
}
.foot-nav,.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-nav a,.foot-col a{font-size:.9375rem;color:rgba(255,255,255,.76)}
.foot-nav a:hover,.foot-col a:hover{color:var(--white)}
.foot-col a[aria-current="page"]{color:var(--white)}

.foot-legal{
  display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;
  padding-block:22px;
  border-top:1px solid var(--line-inv);
  font-size:.75rem;color:rgba(255,255,255,.45);
}

/* =========================================================
   Motion — restrained
   ========================================================= */
@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =========================================================
   Responsive — stack rectangular modules vertically
   ========================================================= */
@media (max-width:1040px){
  .nav{gap:22px;font-size:.875rem}
}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(3rem,13vw,5rem)}
  .lead{max-width:40ch}
  .dark-grid,.audience-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr 1fr}
}

@media (max-width:860px){
  /* No JS: drop the inline nav, keep logo + primary action; links live in the footer */
  .nav{display:none}
  .head-inner{justify-content:space-between;min-height:68px}
}

@media (max-width:720px){
  .benefits-grid{grid-template-columns:1fr}
  .benefit{border-left:0;border-top:1px solid var(--line);padding-inline:0}
  .benefit:first-child{border-top:0;padding-top:clamp(30px,6vw,40px)}
  .hero-frame img{aspect-ratio:3/2}
}

@media (max-width:560px){
  .foot-inner{grid-template-columns:1fr;gap:34px}
  .signup{flex-wrap:wrap}
  .signup input{flex:1 1 100%}
  .signup button{width:100%;height:50px}
  .btn{width:100%;justify-content:center}
  .head-inner .btn{width:auto}
}