/* ============================================================
   BAMAX — sistema visual
   Criterio: sobriedad. El teal profundo manda, el hueso da aire,
   el lima aparece en dosis chicas. La confianza en B2B se
   construye con orden y espacio, no con estridencia.
   ============================================================ */
:root{
  --ink:      #0F1516;
  --ink-2:    #46565A;
  --ink-3:    #7A8B8E;
  --teal:     #003E3F;
  --teal-700: #01514F;
  --teal-800: #012F2E;
  --teal-900: #021E1F;
  --bone:     #F6F5F1;
  --bone-2:   #EEEDE7;
  --white:    #FFFFFF;
  --lime:     #6FDD3C;
  --lime-ink: #2F6B18;
  --line:      rgba(15,21,22,.12);
  --line-soft: rgba(15,21,22,.07);
  --line-dark: rgba(255,255,255,.16);

  --pad:      clamp(72px, 9vw, 124px);
  --radius:   12px;
  --radius-lg:18px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:16.5px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,.display{
  font-family:'Big Shoulders','Work Sans',sans-serif;
  font-weight:700;
  letter-spacing:-0.005em;
  line-height:1.06;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px);}
.wrap-narrow{max-width:820px;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
p{max-width:64ch;}

.eyebrow{
  font-family:'Work Sans',sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);
  display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{
  content:"";width:16px;height:2px;background:var(--lime);border-radius:2px;
  flex:none;   /* es un item flex: sin esto se comprime cuando el texto no cabe */
}
.on-dark .eyebrow,.eyebrow.light{color:var(--lime);}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--lime);color:var(--ink);
  padding:12px 20px;z-index:300;font-weight:600;
}
.skip-link:focus{left:0;}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:70px;display:flex;align-items:center;
  color:var(--white);
  transition:background .4s ease, box-shadow .4s ease, color .4s ease, backdrop-filter .4s ease;
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px);width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav .logo{
  font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:23px;
  letter-spacing:.04em;display:flex;align-items:baseline;gap:2px;
}
.nav .logo span{color:var(--lime);}
.nav-links{display:flex;gap:30px;font-size:14px;font-weight:500;letter-spacing:.005em;}
.nav-links a{position:relative;padding:6px 0;opacity:.82;transition:opacity .2s ease;}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1;}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime);
}
.nav .btn{padding:10px 22px;font-size:13.5px;}

/* ---------------- BOTON DE MENU ----------------
   Bajo 860px la fila de enlaces no cabe. Antes simplemente se ocultaba y el
   visitante quedaba sin navegacion: solo el logo y el boton de cotizar. Este
   boton despliega los mismos enlaces en un panel. */
.nav-toggle{
  display:none;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;padding:0;cursor:pointer;
  background:none;border:1px solid currentColor;border-radius:50%;color:inherit;
}
.nav-toggle i{display:block;width:16px;height:1.5px;background:currentColor;position:relative;}
.nav-toggle i::before,.nav-toggle i::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;
  transition:transform .25s cubic-bezier(.22,.8,.3,1);
}
.nav-toggle i::before{top:-5px;}
.nav-toggle i::after{top:5px;}
.nav-toggle[aria-expanded="true"] i{background:transparent;}
.nav-toggle[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg);}
.nav.nav-light{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--line-soft);
  color:var(--ink);
}
.nav.nav-solid{background:var(--white);color:var(--ink);box-shadow:0 1px 0 var(--line-soft);}
.nav.nav-light .btn-ghost,.nav.nav-solid .btn-ghost{border-color:var(--line);color:var(--ink);}

/* ---------------- BOTONES ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:100px;
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.005em;cursor:pointer;border:1px solid transparent;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.btn-primary{background:var(--lime);color:#12310A;}
.btn-primary:hover{background:#7FE84F;}
.btn-solid{background:var(--teal);color:var(--white);}
.btn-solid:hover{background:var(--teal-700);}
.btn-ghost{border-color:rgba(255,255,255,.34);color:var(--white);}
.btn-ghost:hover{border-color:rgba(255,255,255,.7);}
.btn-ghost-light{border-color:var(--line);color:var(--ink);}
.btn-ghost-light:hover{border-color:var(--ink);}
.btn-ghost-cookie{border-color:rgba(255,255,255,.32);color:var(--white);}

/* ---------------- HERO FIJO ---------------- */
.pin-wrap{position:relative;height:200vh;background:var(--teal-900);}
.pin-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(1,81,79,.55) 0%, rgba(2,30,31,0) 62%),
    linear-gradient(180deg, var(--teal-800) 0%, var(--teal-900) 100%);
}
.pin-layer{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:0 24px;color:var(--white);will-change:transform,opacity;
}
.pin-layer .eyebrow{color:var(--lime);margin-bottom:26px;}

/* Hero a dos columnas: el titular manda desde la izquierda y la flota
   esta presente en el primer pantallazo, no treinta vistas mas abajo. */
.pin-hero-1{padding:0;}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;gap:clamp(28px,4vw,56px);width:100%;text-align:left;
}
/* La regleta lima ya viene incluida en .eyebrow. Aqui solo se alarga,
   para que el acento pese mas en las aperturas de seccion. */
.hero-copy .eyebrow{margin-bottom:18px;}
.pin-hero-1 .eyebrow::before,
.page-hero .eyebrow::before,
.fleet-note .eyebrow::before{width:34px;}
.pin-hero-1 h1{
  font-size:clamp(34px,4.9vw,68px);max-width:19ch;
  letter-spacing:-0.015em;line-height:1.04;
}
.pin-hero-1 p{
  font-size:clamp(16px,1.35vw,18.5px);color:rgba(236,244,244,.78);
  max-width:46ch;margin-top:22px;font-weight:400;line-height:1.7;
}
.pin-hero-1 .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}
.hero-art img{width:100%;height:auto;}

/* En celular todo el hero debe caber en una pantalla: la capa fija recorta
   lo que sobresale, asi que aqui se aprieta hasta que los botones entren. */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:16px;}
  .pin-hero-1 h1{max-width:none;font-size:clamp(28px,7.2vw,42px);}
  .pin-hero-1 p{margin-top:14px;font-size:15px;line-height:1.6;}
  .pin-hero-1 .hero-ctas{margin-top:20px;}
  .hero-art{order:-1;}                 /* en celular la flota va arriba */
  .hero-art img{max-width:300px;margin:0 auto;}
  .hero-copy .eyebrow{margin-bottom:12px;}
}
.pin-claim-2 h2{
  font-size:clamp(28px,4.4vw,58px);max-width:18ch;color:var(--white);
  letter-spacing:-0.012em;
}
.pin-progress-track{
  position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
  width:96px;height:2px;background:rgba(255,255,255,.16);overflow:hidden;
}
.pin-progress-fill{height:100%;background:var(--lime);width:0%;}

/* ---------------- BANDA DE ACCIÓN ---------------- */
.cta-band{
  background:var(--teal-900);padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,80px);
  text-align:center;border-bottom:1px solid rgba(255,255,255,.08);
}
.cta-band .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(48px,6vw,68px);}
.cta-band .stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);
}
.cta-band .stat-row div{background:var(--teal-900);padding:26px 16px;position:relative;}
/* Marca lima sobre cada cifra: el acento aparece mas seguido, en dosis chica. */
.cta-band .stat-row div::before{
  content:"";position:absolute;top:0;left:0;width:28px;height:2px;background:var(--lime);
}
.cta-band .stat-row div strong{
  display:block;font-family:'Big Shoulders',sans-serif;font-size:30px;
  color:var(--white);letter-spacing:.01em;
}
.cta-band .stat-row div span{
  font-size:11.5px;color:rgba(220,238,240,.62);letter-spacing:.11em;
  text-transform:uppercase;margin-top:4px;display:block;
}

/* ---------------- BARRA DE SECTORES ---------------- */
.sectors{background:var(--bone);padding:22px 0;border-bottom:1px solid var(--line-soft);}
.sectors .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 28px;}
.sectors span{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.sectors span:first-child{color:var(--teal);}

/* ---------------- CLIENTES ---------------- */
.clients{background:var(--white);padding:clamp(48px,6vw,78px) 0;border-bottom:1px solid var(--line-soft);}
.clients-head{text-align:center;margin-bottom:clamp(26px,3.4vw,42px);}
.clients-head .eyebrow{color:var(--teal);}
.clients-head h2{font-size:clamp(24px,3.2vw,38px);margin-top:10px;}
.clients-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
}
.client-logo{
  background:var(--white);display:flex;align-items:center;justify-content:center;
  min-height:96px;padding:20px;
}
/* Los logos van en gris y toman color al pasar el mouse: ninguna marca
   ajena compite con el teal de BAMAX, pero siguen siendo reconocibles. */
.client-logo img{
  max-height:44px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s;
}
.client-logo:hover img{filter:none;opacity:1;}
.client-logo .slot{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;text-align:center;
}

/* ---------------- REVELADO ---------------- */
.reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1);}
.reveal{transform:translateY(18px);}
.reveal-left{transform:translateX(-22px);}
.reveal-right{transform:translateX(22px);}
.reveal.is-visible,.reveal-left.is-visible,.reveal-right.is-visible{opacity:1;transform:none;}

/* ---------------- MOVIMIENTO ----------------
   Tres gestos, no mas: el hero entra en cascada al cargar, las grillas
   revelan sus piezas una detras de otra, y lo que se puede tocar se
   levanta bajo el cursor. El movimiento confirma una accion o guia la
   lectura; si no hace ninguna de las dos, sobra. */

/* Entrada del hero al cargar la portada. */
.pin-hero-1 .hero-copy > *,
.pin-hero-1 .hero-art{
  opacity:0;transform:translateY(18px);
  animation:heroIn .9s cubic-bezier(.22,.8,.3,1) forwards;
}
.pin-hero-1 .hero-copy > *:nth-child(1){animation-delay:.10s;}
.pin-hero-1 .hero-copy > *:nth-child(2){animation-delay:.20s;}
.pin-hero-1 .hero-copy > *:nth-child(3){animation-delay:.30s;}
.pin-hero-1 .hero-copy > *:nth-child(4){animation-delay:.40s;}
.pin-hero-1 .hero-art{animation-delay:.24s;transform:translateY(26px) scale(.975);}
@keyframes heroIn{to{opacity:1;transform:none;}}

/* Lo clicable se levanta: la tarjeta responde antes de que la toques. */
.teaser-card{
  transition:border-color .25s ease, background .25s ease,
             transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease;
}
.teaser-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(2,30,31,.16);}
.teaser-card .goto{transition:gap .25s cubic-bezier(.22,.8,.3,1);}
.teaser-card:hover .goto{gap:13px;}
.trust-item{transition:transform .35s cubic-bezier(.22,.8,.3,1), background .3s ease;}
.trust-item:hover{transform:translateY(-4px);background:var(--bone-2);}
.client-logo{transition:transform .3s cubic-bezier(.22,.8,.3,1);}
.client-logo:hover{transform:translateY(-3px);}

/* Quien pide menos movimiento en su sistema, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .pin-hero-1 .hero-copy > *,
  .pin-hero-1 .hero-art{opacity:1;transform:none;}
  .teaser-card:hover,.trust-item:hover,.client-logo:hover{transform:none;}
}

/* ---------------- FRASE ---------------- */
.statement{padding:var(--pad) 0;text-align:center;background:var(--white);}
.statement h2{
  font-size:clamp(26px,3.8vw,48px);max-width:19ch;margin:0 auto;
  color:var(--ink);letter-spacing:-0.012em;
}
.statement h2 em{font-style:normal;color:var(--teal);}

/* ---------------- COMPROMISOS (confianza) ---------------- */
.trust{background:var(--bone);padding:var(--pad) 0;border-top:1px solid var(--line-soft);}
.trust-head{max-width:640px;margin-bottom:clamp(40px,5vw,58px);}
.trust-head h2{font-size:clamp(26px,3.4vw,42px);margin-top:14px;letter-spacing:-0.012em;}
.trust-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.trust-item{background:var(--bone);padding:32px 26px 34px;}
.trust-item .n{
  font-family:'Big Shoulders',sans-serif;font-size:13px;font-weight:700;
  color:var(--lime-ink);letter-spacing:.12em;
}
.trust-item h3{
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:16.5px;
  margin:14px 0 8px;letter-spacing:-0.005em;line-height:1.35;
}
.trust-item p{font-size:14.5px;color:var(--ink-2);line-height:1.6;}

/* ---------------- ACCESOS ---------------- */
.teaser{padding:var(--pad) 0;background:var(--white);}
.teaser-head{max-width:640px;margin-bottom:clamp(40px,5vw,56px);}
.teaser-head h2{font-size:clamp(26px,3.4vw,44px);margin-top:14px;letter-spacing:-0.012em;}
.teaser-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.teaser-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px 30px;min-height:212px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:border-color .25s ease, background .25s ease;
}
.teaser-card:hover{border-color:var(--teal);background:var(--bone);}
.teaser-card.on-teal{background:var(--teal);border-color:var(--teal);color:var(--white);}
.teaser-card.on-teal:hover{background:var(--teal-700);border-color:var(--teal-700);}
.teaser-card .icon-badge{
  width:40px;height:40px;border-radius:9px;background:var(--bone);
  display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:20px;
  border:1px solid var(--line-soft);
}
.teaser-card.on-teal .icon-badge{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14);color:var(--lime);}
.teaser-card .icon-badge svg{width:20px;height:20px;}
.teaser-card h3{font-size:24px;margin-bottom:8px;letter-spacing:-0.008em;}
.teaser-card p{font-size:14.5px;color:var(--ink-2);max-width:34ch;}
.teaser-card.on-teal p{color:rgba(220,238,240,.76);}
.teaser-card .goto{
  font-size:13px;font-weight:600;margin-top:22px;color:var(--teal);
  display:inline-flex;align-items:center;gap:7px;letter-spacing:.01em;
}
.teaser-card.on-teal .goto{color:var(--lime);}

/* ---------------- PANELES ---------------- */
.feature{padding:var(--pad) 0;background:var(--white);}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;}
.feature .num{
  font-family:'Work Sans',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
}
.feature h3{font-size:clamp(26px,3.4vw,44px);margin:16px 0 18px;letter-spacing:-0.014em;}
.feature p{font-size:16.5px;color:var(--ink-2);max-width:46ch;}
.feature.on-teal{background:var(--teal);color:var(--white);}
.feature.on-teal .num{color:var(--lime);}
.feature.on-teal p{color:rgba(220,238,240,.78);}
.feature.on-smoke{background:var(--bone);}
.feature-art{
  aspect-ratio:1/.68;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  border:1px solid var(--line-soft);
}
.feature.on-white .feature-art{background:var(--bone);}
.feature.on-smoke .feature-art{background:var(--white);}
.feature.on-teal .feature-art{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);}

/* El panel es un espacio de fotografia. Mientras no haya foto, el icono
   queda como marca de lugar discreta sobre un tinte suave: se lee como
   panel con intencion y no como hueco. Al insertar una imagen desde
   EDITAR.html, esta cubre el panel completo y tapa el icono. */
.feature-art svg{width:34%;opacity:.42;position:relative;z-index:1;}
.feature-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 62% at 50% 44%, rgba(0,62,63,.07) 0%, rgba(0,62,63,0) 72%);
}
.feature.on-teal .feature-art::after{
  background:radial-gradient(62% 62% at 50% 44%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 72%);
}
.feature-art img{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:cover;border-radius:inherit;
}
.feature-reverse .feature-grid{direction:rtl;}
.feature-reverse .feature-grid>*{direction:ltr;}

/* ---------------- PROCESO ---------------- */
.process{padding:var(--pad) 0;background:var(--bone);}
.process-head{max-width:600px;margin-bottom:clamp(40px,5vw,56px);}
.process-head h2{font-size:clamp(26px,3.4vw,42px);margin-top:14px;letter-spacing:-0.012em;}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.process-step{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px 30px;}
.process-step .step-num{
  font-family:'Big Shoulders',sans-serif;font-size:15px;color:var(--teal);
  letter-spacing:.1em;padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.process-step h3{font-family:'Work Sans',sans-serif;font-weight:600;font-size:16px;margin-bottom:7px;}
.process-step p{font-size:14px;color:var(--ink-2);line-height:1.6;}

/* ---------------- CIFRAS ---------------- */
.stats{padding:var(--pad) 0;background:var(--teal-900);color:var(--white);}
.stats h2{font-size:clamp(24px,3.2vw,40px);margin-bottom:clamp(44px,5vw,62px);color:var(--white);max-width:20ch;letter-spacing:-0.012em;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);}
/* La nota de periodo es lo que hace verificables las cifras de arriba:
   un numero sin fecha envejece y deja de ser comprobable. */
.stats-nota{font-size:13px;color:rgba(220,238,240,.52);margin-top:20px;}
.stats-grid>div{background:var(--teal-900);padding:38px 28px 40px;}
.stat-num{
  font-family:'Big Shoulders',sans-serif;font-weight:700;
  font-size:clamp(42px,5.4vw,68px);color:var(--white);line-height:1;letter-spacing:-0.01em;
}
.stat-label{font-size:12.5px;color:rgba(220,238,240,.6);margin-top:12px;letter-spacing:.09em;text-transform:uppercase;}

/* ---------------- NOSOTROS ---------------- */
.about{padding:var(--pad) 0;background:var(--white);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,76px);align-items:start;}
.about h2{font-size:clamp(26px,3.4vw,44px);margin-top:14px;letter-spacing:-0.014em;}
.about-copy p{font-size:16.5px;color:var(--ink-2);margin-bottom:18px;}
.mv-list{display:flex;flex-direction:column;gap:0;}
.mv-item{border-top:1px solid var(--line);padding:26px 0;}
.mv-item h3{
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--teal);margin-bottom:12px;
}
.mv-item p{font-size:16.5px;color:var(--ink);}

.placeholder-note{
  background:#FBF6E4;border:1px solid #E9DDB2;color:#6B5A18;
  font-size:12.5px;padding:11px 16px;border-radius:8px;margin-top:16px;display:inline-block;
  line-height:1.55;max-width:52ch;
}

/* ---------------- NUESTRA FLOTA ---------------- */
.truck-stage{position:relative;height:190vh;background:var(--teal-900);}
.truck-sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(110% 80% at 50% 76%, rgba(1,81,79,.5) 0%, rgba(2,30,31,0) 64%),
    var(--teal-900);
}
.truck-canvas{position:absolute;inset:0;}
.fleet-photo{
  position:absolute;left:50%;bottom:9%;
  transform:translateX(-50%);transform-origin:50% 78%;
  width:min(1120px,92vw);height:auto;display:block;will-change:transform;
}
.truck-copy{
  position:relative;z-index:2;text-align:center;color:var(--white);
  padding:0 24px;pointer-events:none;align-self:flex-start;margin-top:clamp(96px,13vh,140px);
}
.truck-copy .eyebrow{color:var(--lime);margin-bottom:18px;}
.truck-copy h2{font-size:clamp(26px,3.8vw,48px);max-width:17ch;margin:0 auto;letter-spacing:-0.014em;}
.truck-copy p{font-size:15.5px;color:rgba(220,238,240,.74);max-width:48ch;margin:16px auto 0;}

/* ---------------- COBERTURA ---------------- */
.coverage{padding:var(--pad) 0;background:var(--bone);}
.coverage h2{font-size:clamp(26px,3.4vw,44px);margin-top:14px;letter-spacing:-0.014em;}
.coverage-lead{font-size:16.5px;color:var(--ink-2);margin:16px 0 clamp(36px,4vw,48px);}
.coverage-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(36px,4vw,48px);}
.coverage-tags span{
  background:var(--white);color:var(--teal);font-weight:500;font-size:13.5px;
  padding:8px 15px;border-radius:100px;border:1px solid var(--line-soft);
}
.route{position:relative;height:88px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;}
.route .track{position:absolute;left:6%;right:6%;top:50%;height:2px;background:repeating-linear-gradient(90deg,#D3DBDB 0 12px,transparent 12px 24px);transform:translateY(-50%);}
.route .truck-marker{position:absolute;top:50%;left:0%;width:32px;height:32px;color:var(--teal);transform:translate(0,-58%);}
.route.is-active .truck-marker{animation:routeDrive 2.6s cubic-bezier(.3,.7,.3,1) forwards;}
@keyframes routeDrive{from{left:0%;}to{left:calc(100% - 32px);}}
.route .endpoint{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--lime);transform:translateY(-50%);}
.route .endpoint.start{left:6%;} .route .endpoint.end{right:6%;}

.provincia{margin-top:38px;}
.provincia h3{
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.15em;color:var(--teal);
  margin-bottom:16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.provincia h3 span{
  font-weight:500;font-size:11.5px;letter-spacing:.04em;color:var(--ink-3);text-transform:none;
}
.provincia .coverage-tags{margin-bottom:0;}
.comuna-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px;}
.comuna-card{background:var(--bone);padding:24px 22px;}
.comuna-card h3{font-family:'Work Sans',sans-serif;font-weight:600;font-size:15.5px;color:var(--teal);margin-bottom:6px;}
.comuna-card p{font-size:13.5px;color:var(--ink-2);line-height:1.6;}

/* ---------------- REQUISITOS ---------------- */
.requisitos{padding:var(--pad) 0;background:var(--white);}
.requisitos-head{max-width:620px;margin-bottom:clamp(40px,5vw,56px);}
.requisitos-head h2{font-size:clamp(26px,3.4vw,42px);margin-top:14px;letter-spacing:-0.012em;}
.requisitos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.req-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px 32px;}
.req-card .icon-badge{
  width:40px;height:40px;border-radius:9px;background:var(--bone);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:18px;
}
.req-card .icon-badge svg{width:19px;height:19px;}
.req-card h3{font-size:19px;margin-bottom:10px;letter-spacing:-0.006em;}
.req-card p{font-size:14.5px;color:var(--ink-2);}

/* ---------------- CASO ---------------- */
.case{padding:var(--pad) 0;background:var(--bone);}
.case-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(32px,4.5vw,56px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,52px);align-items:center;
}
.case-card h3{font-size:clamp(24px,3vw,36px);color:var(--teal);margin:14px 0 16px;letter-spacing:-0.012em;}
.case-card p{font-size:15.5px;color:var(--ink-2);}
.case-stats{display:grid;grid-template-columns:1fr;gap:0;}
.case-stats div{border-top:1px solid var(--line);padding:18px 0;}
.case-stats div strong{display:block;font-family:'Big Shoulders',sans-serif;font-size:30px;color:var(--teal);}
.case-stats div span{font-size:12px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;}

/* ---------------- CONTACTO ---------------- */
.contact-grid{padding:var(--pad) 0;background:var(--white);}
.contact-grid .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,3.5vw,44px);}
.contact-card{background:var(--bone);border:1px solid var(--line-soft);border-radius:var(--radius);padding:34px 32px;}
.contact-card.on-teal{background:var(--teal);border-color:var(--teal);color:var(--white);}
.contact-card h3{font-size:22px;margin-bottom:10px;letter-spacing:-0.008em;}
.contact-card p{font-size:14.5px;color:var(--ink-2);margin-bottom:22px;max-width:36ch;}
.contact-card.on-teal p{color:rgba(220,238,240,.76);}
.contact-checklist{padding:var(--pad) 0;background:var(--bone);}
.contact-checklist h2{font-size:clamp(24px,3.2vw,40px);margin-top:14px;max-width:20ch;letter-spacing:-0.012em;}
.contact-checklist ul{list-style:none;margin-top:30px;display:grid;gap:0;max-width:680px;}
.contact-checklist li{
  font-size:16px;color:var(--ink);padding:16px 0 16px 26px;position:relative;
  border-top:1px solid var(--line);
}
.contact-checklist li::before{
  content:"";position:absolute;left:0;top:24px;width:7px;height:7px;background:var(--lime);border-radius:50%;
}

/* ---------------- CTA FINAL ---------------- */
.cta-final{
  background:var(--teal);color:var(--white);text-align:center;
  padding:clamp(88px,11vw,140px) 0;position:relative;overflow:hidden;
}
.cta-final::after{
  content:"";position:absolute;left:50%;top:50%;width:900px;height:900px;
  background:radial-gradient(circle,rgba(111,221,60,.10) 0%,rgba(111,221,60,0) 68%);
  transform:translate(-50%,-50%);
}
.cta-final .inner{position:relative;}
.cta-final h2{font-size:clamp(28px,4.4vw,58px);color:var(--white);margin-bottom:20px;letter-spacing:-0.016em;}
.cta-final p{color:rgba(220,238,240,.76);margin:0 auto 36px;font-size:16.5px;max-width:52ch;}
.cta-final .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------------- PIE ---------------- */
footer{background:var(--white);padding:clamp(56px,6vw,76px) 0 30px;border-top:1px solid var(--line);}
footer .footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:44px;margin-bottom:44px;}
footer .logo{font-family:'Big Shoulders',sans-serif;font-weight:700;font-size:21px;color:var(--teal);letter-spacing:.04em;}
footer .logo span{color:var(--lime);}
footer .footer-cols{display:flex;gap:clamp(36px,5vw,72px);flex-wrap:wrap;}
footer .footer-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3);margin-bottom:16px;}
footer .footer-col a{display:block;font-size:14.5px;color:var(--ink-2);margin-bottom:11px;transition:color .2s ease;}
footer .footer-col a:hover{color:var(--teal);}
footer .footer-bottom{
  border-top:1px solid var(--line);padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;color:var(--ink-3);line-height:1.7;
}
footer .footer-bottom a{color:var(--ink-2);text-decoration:underline;}

/* ---------------- HERO PÁGINAS INTERNAS ---------------- */
.page-hero{
  background:
    radial-gradient(100% 120% at 82% 0%, rgba(1,81,79,.5) 0%, rgba(2,30,31,0) 60%),
    var(--teal-900);
  color:var(--white);padding:clamp(148px,17vw,196px) 0 clamp(72px,9vw,104px);
  position:relative;overflow:hidden;
}
.page-hero .wrap{position:relative;z-index:1;}
/* Mismo acento lima que la portada: las paginas internas se leen como
   parte del mismo sitio y no como plantillas sueltas. */
.page-hero .eyebrow,
.fleet-note .eyebrow{color:var(--lime);margin-bottom:20px;}
.page-hero h1{font-size:clamp(32px,4.8vw,62px);max-width:17ch;letter-spacing:-0.018em;}
.page-hero p{font-size:17.5px;line-height:1.7;color:rgba(220,238,240,.78);max-width:52ch;margin-top:20px;}

/* ---------------- NUESTRA FLOTA ----------------
   Sin foto: la imagen de la flota ya abre la portada y repetirla aqui
   restaba en vez de sumar. Queda la banda oscura con el texto, que
   mantiene el ritmo claro-oscuro de la pagina. */
.fleet-note{
  background:
    radial-gradient(110% 90% at 18% 0%, rgba(1,81,79,.5) 0%, rgba(2,30,31,0) 62%),
    var(--teal-900);
  color:var(--white);padding:var(--pad) 0;
}
.fleet-note h2{font-size:clamp(26px,3.8vw,48px);max-width:17ch;letter-spacing:-0.014em;}
.fleet-note p{
  font-size:17px;line-height:1.7;color:rgba(220,238,240,.78);
  max-width:52ch;margin-top:18px;
}

@media (max-width:900px){
  .page-hero .eyebrow,
  .fleet-note .eyebrow{margin-bottom:14px;}
  .page-hero p,
  .fleet-note p{font-size:15.5px;}
}

/* ---------------- BANNER DE COOKIES ---------------- */
.cookie-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  background:var(--ink);color:var(--white);
  border-radius:var(--radius);padding:20px 24px;
  display:none;gap:22px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;box-shadow:0 18px 50px rgba(0,0,0,.28);
  max-width:1120px;margin:0 auto;
}
.cookie-bar.is-open{display:flex;}
.cookie-bar p{font-size:13.5px;color:rgba(255,255,255,.76);max-width:640px;line-height:1.6;}
.cookie-bar p a{color:var(--lime);text-decoration:underline;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cookie-actions .btn{padding:11px 20px;font-size:13.5px;}

/* ---------------- LEGAL ---------------- */
.legal{padding:clamp(64px,8vw,96px) 0 clamp(80px,9vw,110px);background:var(--white);}
.legal-body{max-width:74ch;}
.legal-body h2{font-size:clamp(20px,2.4vw,27px);margin:46px 0 14px;color:var(--teal);letter-spacing:-0.008em;}
.legal-body h3{font-family:'Work Sans',sans-serif;font-weight:600;font-size:16px;margin:26px 0 8px;}
.legal-body p{font-size:16px;color:var(--ink-2);margin-bottom:15px;}
.legal-body ul{margin:0 0 20px 20px;}
.legal-body li{font-size:16px;color:var(--ink-2);margin-bottom:9px;}
.legal-body a{color:var(--teal);text-decoration:underline;}
.legal-meta{background:var(--bone);border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px 26px;font-size:14px;color:var(--ink-2);margin-bottom:34px;line-height:1.7;}
.legal-toc{background:var(--bone);border:1px solid var(--line-soft);border-radius:var(--radius);padding:26px 30px;margin-bottom:42px;}
.legal-toc h4{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-3);margin-bottom:16px;}
.legal-toc a{display:block;font-size:14.5px;color:var(--teal);margin-bottom:10px;text-decoration:none;}
.legal-toc a:hover{text-decoration:underline;}

/* ---------------- FORMULARIO ---------------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,42px);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:8px;color:var(--ink);letter-spacing:.02em;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:9px;
  font-family:'Work Sans',sans-serif;font-size:15.5px;color:var(--ink);background:var(--white);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,62,63,.10);
}
.field textarea{min-height:118px;resize:vertical;line-height:1.6;}
.field .hint{font-size:12px;color:var(--ink-3);margin-top:7px;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#B93B3B;}
.field .error-msg{display:none;font-size:12.5px;color:#B93B3B;margin-top:7px;}
.field.invalid .error-msg{display:block;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.consent{display:flex;gap:11px;align-items:flex-start;margin:10px 0 24px;flex-wrap:wrap;}
.consent input{width:auto;margin-top:4px;flex-shrink:0;}
.consent label{font-size:13px;color:var(--ink-2);font-weight:400;line-height:1.6;}
.consent label a{color:var(--teal);text-decoration:underline;}
.consent .error-msg{flex-basis:100%;margin-left:22px;}
.form-status{display:none;padding:14px 18px;border-radius:9px;font-size:14.5px;margin-bottom:22px;}
.form-status.ok{display:block;background:#EDF8E5;border:1px solid #C4E5AC;color:#2C5D18;}
.form-status.err{display:block;background:#FBEDED;border:1px solid #EFC9C9;color:#8E2323;}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:960px){
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .cta-band .stat-row{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .comuna-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  /* Los enlaces pasan de fila a panel desplegable. */
  .nav-toggle{display:inline-flex;}
  .nav-inner{gap:12px;}
  .nav .btn{margin-left:auto;padding:9px 16px;font-size:13px;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--teal-900);
    border-top:1px solid rgba(255,255,255,.12);
    padding:6px 0 12px;
    box-shadow:0 18px 40px rgba(0,0,0,.3);
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{color:var(--white);opacity:.92;font-size:16px;padding:14px clamp(20px,4vw,40px);}
  .nav-links a.active::after{left:clamp(20px,4vw,40px);right:auto;width:22px;bottom:9px;}

  .feature-grid{grid-template-columns:1fr;gap:32px;}
  .feature-reverse .feature-grid{direction:ltr;}
  .about-grid{grid-template-columns:1fr;gap:36px;}
  .case-card{grid-template-columns:1fr;}
  .teaser-grid{grid-template-columns:1fr;}
  .requisitos-grid{grid-template-columns:1fr;}
  .comuna-grid{grid-template-columns:1fr;}
  .contact-grid .wrap{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .pin-wrap{height:240vh;}
  .truck-stage{height:165vh;}
  /* la composición es muy ancha: en pantalla angosta se amplía y se
     recortan los costados para que los vehículos se lean */
  .fleet-photo{width:146vw;max-width:none;bottom:24%;}
  .pin-truck-layer img{width:146vw;max-width:none;}
  .cookie-bar{padding:18px;}
  footer .footer-top{gap:32px;}
}
@media(max-width:560px){
  .trust-grid{grid-template-columns:1fr;}
  .cta-band .stat-row{grid-template-columns:1fr;}
  .process-grid{grid-template-columns:1fr;}
  /* Las cuatro cifras aguantan dos columnas hasta aqui; en tablet,
     apilarlas de a una desperdiciaba la mitad del ancho. */
  .stats-grid{grid-template-columns:1fr;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-left,.reveal-right{opacity:1;transform:none;transition:none;}
  .route.is-active .truck-marker{animation:none;left:calc(100% - 32px);}
}