/* ==========================================================================
   Lottus Express S.A.S. — styles.css
   Paradigma: «CARRILES · señalización institucional clara».
   Claro dominante (#F7F7FA), violeta de loto de marca, UNA sola banda violeta
   tinta (el patio). Cero azul en la UI. El amarillo #F2C230 es demarcación
   vial: solo en el eje de carril y en el mapa — nunca CTA, tile ni badge.
   ========================================================================== */

/* ---------------- TOKENS ---------------- */
:root {
  --violet:      #6B3FA0;   /* marca · CTA · números de línea */
  --violet-deep: #4A2775;   /* hover de CTA · texto pequeño sobre claro */
  --violet-ink:  #2E1848;   /* fondo de UNA sola sección (el patio) */
  --magenta:     #B0479B;   /* acento firma · pétalo · subrayados */
  --magenta-lt:  #D06FBC;   /* glow suave · focus */
  --surface:     #F7F7FA;   /* superficie carrocería */
  --grey:        #E8E8EE;   /* bandas alternas */
  --hairline:    #D5D5DE;   /* demarcación 1px */
  --ink:         #1C1D22;   /* tinta grafito asfalto */
  --ink-2:       #5B5D68;   /* texto secundario */
  --cream:       #F4F1F8;   /* texto sobre violeta tinta */
  --demarc:      #F2C230;   /* amarillo de demarcación (uso restringido) */
  --panel-soft:  #F1EEF7;   /* panel del aviso */

  --ease:  cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.16,1,.3,1);
  --nav-h: 68px;
  --gut:   clamp(1.15rem, 4.2vw, 3.4rem);
  /* Escalón de pantalla ancha: el tope sube con el viewport (ver el bloque
     PANTALLA ANCHA al final). En un monitor de 2560 el contenedor pasa de
     1240px (48% del ancho) a 1700px (66%), con la tipografía y el ritmo
     escalados desde `html{font-size}` para que las medidas de línea en `ch`
     se mantengan por debajo de ~78 caracteres. */
  --maxw:  min(92vw, 1240px);

  /* Escala de las 5 regiones naturales del mapa (7.6). Es el violeta de marca
     graduado: la Andina (donde está su patio) es el tono pleno y las demás
     bajan por valor. Los vecinos nunca comparten tono. */
  --reg-andina:    #6B3FA0;
  --reg-caribe:    #9E80C2;
  --reg-orinoquia: #B096D0;
  --reg-pacifica:  #C4B0DC;
  --reg-amazonia:  #DACDEA;
}

/* ---------------- RESET ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.02rem; line-height: 1.62; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* height:auto es OBLIGATORIO: sin él un <img width=".." height=".."> con
   width:100% usa la altura fija del atributo y la imagen se ESTIRA. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--violet-deep); text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: 'Overpass', 'Arial Black', system-ui, sans-serif;
  margin: 0; line-height: 1.04; letter-spacing: .012em;
}
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 2px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ---------------- PÉTALO (ornamento del loto) ---------------- */
/* ⚠ El fill va en el propio .petal, NO en «.petal path»: el pétalo se pinta
   con <use href="#petal">, y un selector CSS no entra en el shadow tree del
   <use>. Sí se hereda `fill` → así el pétalo sale magenta y no negro. */
.petal { width: .78em; height: .78em; flex: 0 0 auto; color: var(--magenta); fill: currentColor; }

/* ---------------- KICKER / TÍTULOS DE SECCIÓN ---------------- */
.kicker {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .74rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--violet);
  margin: 0 0 1.1rem;
}
.sec-h {
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.75rem, 4.1vw, 3rem); margin: 0 0 1.1rem;
  color: var(--ink);
}
.lede { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-2); max-width: 62ch; }

/* ---------------- BOTONES ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .93rem;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .88rem 1.5rem; border: 2px solid transparent; border-radius: 3px;
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease),
    border-color .2s var(--ease), transform .2s var(--ease);
}
/* microinteracción: el pétalo del loto gira 12° al hover del CTA */
.btn .petal { transition: transform .2s var(--ease); }
.btn:hover .petal { transform: rotate(12deg); }
/* el magenta no contrasta sobre el violeta sólido → pétalo claro ahí */
.btn--solid .petal, .btn--ghost .petal { color: rgba(255,255,255,.9); }
.btn--solid { background: var(--violet); color: #fff; border-color: var(--violet); }
.btn--solid:hover { background: var(--violet-deep); border-color: var(--magenta); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.62); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn--line { background: transparent; color: var(--violet-deep); border-color: var(--hairline); }
.btn--line:hover { border-color: var(--magenta); color: var(--violet-deep); }
.btn--cream { background: var(--cream); color: var(--violet-ink); border-color: var(--cream); }
.btn--cream:hover { background: #fff; border-color: var(--magenta-lt); }

/* ==========================================================================
   NAV
   ========================================================================== */
/* Sobre el hero la nav es transparente (la foto llega al borde superior);
   al hacer scroll pasa a superficie clara. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled { background: rgba(247,247,250,.97); border-bottom-color: var(--hairline); }
.nav:not(.scrolled) .brand b { color: #fff; }
.nav:not(.scrolled) .brand i { color: var(--magenta-lt); }
.nav:not(.scrolled) .brand svg { color: var(--magenta-lt) !important; }
.nav:not(.scrolled) .nav__links a { color: rgba(255,255,255,.88); }
.nav:not(.scrolled) .nav__links a:hover { color: #fff; }
.nav:not(.scrolled) .hamb { border-color: rgba(255,255,255,.5); }
.nav:not(.scrolled) .hamb span { background: #fff; }
.nav__in { display: flex; align-items: center; gap: 1.4rem; width: 100%; }
.brand { display: flex; align-items: center; gap: .62rem; margin-right: auto; }
.brand svg { width: 30px; height: 30px; }
.brand b {
  font-family: 'Overpass', sans-serif; font-weight: 900; font-size: 1.12rem;
  letter-spacing: .045em; color: var(--ink); line-height: 1;
}
.brand i {
  display: block; font-style: normal; font-weight: 700; font-size: .55rem;
  letter-spacing: .21em; color: var(--violet); line-height: 1.5;
}
.nav__links { display: flex; align-items: center; gap: 1.35rem; }
.nav__links a {
  font-size: .87rem; font-weight: 600; color: var(--ink-2);
  position: relative; padding: .3rem 0;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--magenta); transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav .btn { padding: .6rem 1.05rem; font-size: .8rem; }
.hamb {
  display: none; background: none; border: 1px solid var(--hairline);
  border-radius: 3px; width: 42px; height: 38px; cursor: pointer;
  align-items: center; justify-content: center; gap: 4px; flex-direction: column;
}
.hamb span { display: block; width: 18px; height: 2px; background: var(--ink); }

/* MENÚ MÓVIL — patrón A PRUEBA DE FALLOS: oculto por defecto, visible solo
   cuando NO tiene el atributo [hidden]. Jamás a pantalla completa por error. */
.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 70;
  background: rgba(28,29,34,.97);
  flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  padding: 2rem;
}
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu a {
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--cream);
}
.mobile-menu a:hover { color: var(--magenta-lt); }
.mm-close {
  position: absolute; top: 1rem; right: 1.2rem; background: none; border: 0;
  font-size: 2.2rem; line-height: 1; color: var(--cream); cursor: pointer;
}

/* ==========================================================================
   ★ FIRMA 1 — «MARCAS DE CARRIL QUE VIAJAN»
   Eje fijo en el canal izquierdo. Solo transform, un rAF compartido.
   ========================================================================== */
.rail {
  position: fixed; left: 26px; top: 0; width: 3px; height: 100vh;
  overflow: hidden; z-index: 40; pointer-events: none; display: none;
  background: rgba(107,63,160,.1);
}
.rail__strip {
  width: 100%; height: 200vh; will-change: transform;
  background: repeating-linear-gradient(
    to bottom,
    var(--violet) 0 26px,
    transparent 26px 52px,
    var(--demarc) 52px 62px,
    transparent 62px 104px);
  opacity: .55;
}
/* <1100px: el eje se vuelve barra de progreso de 2px bajo el nav (sin dashes) */
.prog {
  position: fixed; top: var(--nav-h); left: 0; right: 0; height: 2px;
  z-index: 59; background: rgba(107,63,160,.12); pointer-events: none;
}
.prog i {
  display: block; height: 100%; width: 100%; background: var(--violet);
  transform: scaleX(0); transform-origin: left; will-change: transform;
}
@media (min-width: 1100px) {
  .rail { display: block; }
  .prog { display: none; }
}

/* ==========================================================================
   CORTINILLA «EL PORTÓN» — dos paneles violetas que se abren en horizontal
   (inyectada por main.js: si el JS falla, no existe)
   ========================================================================== */
.gate { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.gate i {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background: linear-gradient(180deg, var(--violet-ink), var(--violet-deep));
  will-change: transform;
  transition: transform .7s cubic-bezier(.7,0,.2,1);
}
.gate i:first-child { left: 0; }
.gate i:last-child  { right: 0; }
.gate.open i:first-child { transform: translateX(-100%); }
.gate.open i:last-child  { transform: translateX(100%); }

/* ==========================================================================
   7.1 HERO — full-bleed cinematográfico
   ========================================================================== */
.hero {
  position: relative; min-height: min(96vh, 940px); display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 3rem) 0 clamp(2.6rem, 6vw, 5rem);
  overflow: hidden; background: var(--violet-ink);
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
/* .hero__ken = capa de PARALLAX (translate por JS).
   La imagen de dentro lleva el KEN BURNS (scale por CSS). Separadas a
   propósito: si compartieran el transform, la animación pisaría el parallax. */
.hero__ken { position: absolute; inset: 0; will-change: transform; }
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  will-change: transform;
}
/* Ken Burns lento (solo transform) */
html.is-anim .hero__bg img { animation: kb 18s var(--ease) forwards; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.06); } }
/* VELO: apaga las luces azules del chasis y las lleva a violeta-noche,
   para que el sitio no derive a azul-sobre-carbón (territorio lubrifil). */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(46,24,72,.55) 0%, rgba(46,24,72,.2) 42%, rgba(28,29,34,.86) 100%),
    linear-gradient(90deg, rgba(46,24,72,.72) 0%, rgba(46,24,72,.28) 52%, transparent 100%);
}
.hero__tint {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: var(--violet); opacity: .18; mix-blend-mode: color;
}
.hero__in { position: relative; z-index: 2; width: 100%; }
.hero .kicker { color: var(--magenta-lt); }
.hero h1 {
  font-weight: 900; text-transform: uppercase; color: #fff;
  font-size: clamp(2.05rem, 6.4vw, 4.6rem); max-width: 20ch;
  margin: 0 0 1.15rem; text-shadow: 0 2px 26px rgba(20,10,32,.5);
}
.hero__sub {
  color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.75vw, 1.2rem);
  max-width: 52ch; margin: 0 0 1.7rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.35rem; }
/* Línea de confianza VERIFICABLE — texto corrido, jamás tres tiles */
.hero__trust {
  font-size: .87rem; color: rgba(255,255,255,.82); letter-spacing: .02em; margin: 0;
}
.hero__trust b { font-weight: 600; color: #fff; }

/* ==========================================================================
   7.2 BANDA ANSWER-FIRST + ★ FIRMA 2 «ODÓMETRO DE TAMBORES»
   ========================================================================== */
.answer {
  background: var(--surface); padding: clamp(3.4rem, 7vw, 6rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.answer__grid {
  display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.answer h2 {
  font-weight: 700; text-transform: none; letter-spacing: -.005em;
  font-size: clamp(1.35rem, 2.85vw, 2.35rem); line-height: 1.22; color: var(--ink);
}
.answer h2 b { color: var(--violet-deep); font-weight: 700; }
.answer__side { border-left: 3px solid var(--violet); padding-left: clamp(1.1rem, 2vw, 1.7rem); }
.odo-label {
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .8rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2);
  margin: .2rem 0 1rem;
}
.answer__fine {
  font-size: .92rem; color: var(--ink-2); border-top: 1px solid var(--hairline);
  padding-top: .95rem; margin: 0;
}
.answer__fine strong { color: var(--ink); font-weight: 600; }

/* Tambores de odómetro: cada dígito es una columna 0–9 movida con translateY */
.odo { display: inline-flex; gap: .04em; vertical-align: baseline; }
.odo__d {
  display: block; overflow: hidden; height: 1em; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.odo__col { display: block; will-change: transform; }
.odo__col span { display: block; height: 1em; line-height: 1; text-align: center; }
.odo--big {
  font-family: 'Overpass', sans-serif; font-weight: 900; color: var(--violet);
  font-size: clamp(4.2rem, 10vw, 7rem); letter-spacing: -.02em;
}
.odo--sm {
  font-family: 'Overpass', sans-serif; font-weight: 800; color: var(--violet-deep);
  font-size: 1em; letter-spacing: .01em;
}
/* Sin JS (sin .is-anim): el dígito correcto ya está en su sitio. */
.odo__col { transform: translateY(calc(var(--n) * -1em)); }
/* Con JS: el tambor arranca en 0 … */
html.is-anim .odo:not(.in) .odo__col { transform: translateY(0); }
/* … y rueda hasta encajar en el valor al entrar en viewport (one-shot). */
html.is-anim .odo.in .odo__col {
  transform: translateY(calc(var(--n) * -1em));
  transition: transform .95s var(--spring);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ==========================================================================
   7.3 LAS TRES LÍNEAS — ★ FLIP BOXES
   ========================================================================== */
.lineas { padding: clamp(3.4rem, 7vw, 6rem) 0; background: var(--grey); }
.lineas__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

/* Altura DIRIGIDA POR CONTENIDO, sin numeros magicos: la cara de atras (la mas
   densa) va EN FLUJO y define el alto; la frontal es la absoluta. Antes un
   `min-height: 400px` fijaba el alto al reverso de L2 y aun asi el reverso se
   desbordaba 3px en 1440 y 47px en 1024 (min-height: 290px de la media query).
   `.flip` como grid iguala las 3 tarjetas de la fila. */
.flip { perspective: 1200px; display: grid; }
.flip__inner {
  position: relative; width: 100%;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
}
.flip__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; padding: 1.7rem 1.5rem;
  border: 1px solid var(--hairline); background: var(--surface); border-radius: 3px;
}
/* la cara de atras es la que esta en flujo => es la que marca el alto real */
.flip__back { position: relative; inset: auto; }
/* reserva el renglón inferior para el «Ver detalle» del toggle: si no, el h3
   y el hint se pisan (se veía en 375px) */
.flip__front { padding-bottom: 3.6rem; }
/* Filete que convierte el aire inferior en un pie deliberado (el alto de la
   tarjeta lo manda el reverso, que es mas denso; sin este filete el hueco
   sobre 'Ver detalle' se leia como falta de resolucion). */
.flip__front::after {
  content: ''; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 3.15rem;
  height: 1px; background: var(--hairline);
}
.flip__back {
  transform: rotateY(180deg); background: var(--violet-deep); border-color: var(--violet-deep);
  color: var(--cream);
}
/* Desktop (puntero con hover): voltea al hover. En táctil NO, para que el
   :hover pegajoso del tap no pelee con el toggle de .is-flipped. */
@media (hover: hover) and (pointer: fine) {
  .flip:hover .flip__inner { transform: rotateY(180deg); }
  .flip:hover .flip__front { pointer-events: none; }
}
/* ★ UNA SOLA fuente de verdad del volteo: .is-flipped (teclado, clic y tap).
   NO se usa :focus-within para voltear (ver el comentario de main.js): el foco
   dentro de la tarjeta mantenía el volteo pisando al toggle y la tarjeta se
   quedaba dada la vuelta para siempre. */
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
/* mientras está volteada, la cara frontal no debe recibir clics */
.flip.is-flipped .flip__front { pointer-events: none; }
/* … y mientras está de frente, la trasera tampoco (aunque el hover la muestre) */
.flip:not(.is-flipped) .flip__back { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .flip:hover:not(.is-flipped) .flip__back { pointer-events: auto; }
}
.line-no {
  display: flex; align-items: center; gap: .5rem;
  font-family: 'Overpass', sans-serif; font-weight: 900; font-size: 1.5rem;
  color: var(--violet); letter-spacing: .04em; margin-bottom: 1.2rem;
}
/* El icono NO lleva `margin-bottom:auto`: eso empujaba nombre+titular al borde
   inferior y dejaba ~128px de vacio medido en el centro de la cara frontal.
   Ahora el bloque arranca justo bajo el icono y el aire sobrante queda abajo. */
.flip__icon { width: 76px; height: 76px; color: var(--violet-deep); }
.flip__icon path, .flip__icon circle, .flip__icon rect, .flip__icon line {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.flip__name {
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 1.15rem 0 .5rem;
}
.flip__front h3 {
  font-weight: 800; font-size: clamp(1.3rem, 2.1vw, 1.66rem); line-height: 1.16; color: var(--ink);
}
.flip__toggle {
  position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 1.7rem 1.5rem; text-align: left;
}
.flip__hint {
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--violet);
  display: inline-flex; align-items: center; gap: .4rem;
}
.flip__hint::after {
  content: ''; width: 22px; height: 1px; background: var(--magenta);
  transition: width .22s var(--ease);
}
.flip:hover .flip__hint::after { width: 34px; }
.flip__back dl { margin: 0 0 .9rem; font-size: .9rem; }
.flip__back dt {
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--magenta-lt);
  margin-top: .68rem;
}
.flip__back dt:first-child { margin-top: 0; }
.flip__back dd { margin: .16rem 0 0; color: rgba(244,241,248,.92); line-height: 1.46; }
.flip__back dd strong { color: #fff; font-weight: 600; }
.flip__back .line-no { margin-bottom: .9rem; }
.flip__back .btn { margin-top: auto; align-self: flex-start; }
/* El botón que la DEVUELVE. Vive en la cara trasera porque, volteada, la
   frontal es pointer-events:none y su toggle deja de ser alcanzable con el
   puntero (con el teclado sí: el foco no depende de pointer-events). */
.flip__back-toggle {
  position: absolute; top: .75rem; right: .9rem; z-index: 2;
  background: none; border: 1px solid rgba(244,241,248,.42); border-radius: 2px;
  color: var(--cream); cursor: pointer; padding: .3rem .6rem;
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .66rem;
  letter-spacing: .13em; text-transform: uppercase;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.flip__back-toggle:hover { border-color: var(--magenta-lt); background: rgba(176,71,155,.24); }

/* ==========================================================================
   7.4 LA FLOTA — ★ PANELES QUE SE EXPANDEN Y COMPRIMEN A LOS HERMANOS
   Excepción documentada a «solo transform/opacity»: la transición de
   grid-template-columns ES la interacción de la sección y son 4 elementos;
   los textos van position:absolute (no reflowean) y las imágenes usan
   object-fit:cover → no hay reflow de contenido ni CLS.
   ========================================================================== */
.flota { padding: clamp(3.4rem, 7vw, 6rem) 0 0; background: var(--surface); }
.fleet {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 3px;
  height: min(70vh, 560px); margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  transition: grid-template-columns 420ms cubic-bezier(.22,.61,.36,1);
  background: var(--hairline);
}
.fleet[data-active="0"] { grid-template-columns: 2.2fr .6fr .6fr .6fr; }
.fleet[data-active="1"] { grid-template-columns: .6fr 2.2fr .6fr .6fr; }
.fleet[data-active="2"] { grid-template-columns: .6fr .6fr 2.2fr .6fr; }
.fleet[data-active="3"] { grid-template-columns: .6fr .6fr .6fr 2.2fr; }
.pan {
  position: relative; overflow: hidden; background: var(--violet-ink); text-align: left;
}
/* El <button> es el control (aria-expanded); el encabezado y el link del chip
   viven FUERA de él (un <button> no puede contener h3 ni un <a>). */
.pan__hit {
  position: absolute; inset: 0; z-index: 3; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.pan.is-active .pan__hit { pointer-events: none; }
.pan__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.75); transition: filter .42s var(--ease), transform .42s var(--ease);
  will-change: transform;
}
.pan::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,24,72,.15) 0%, rgba(28,29,34,.86) 100%);
}
.pan__v {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  writing-mode: vertical-rl; z-index: 4;
  font-family: 'Overpass', sans-serif; font-weight: 900; font-size: .95rem;
  letter-spacing: .18em; text-transform: uppercase; color: #fff; white-space: nowrap;
  transition: opacity .28s var(--ease);
}
.pan__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.6rem 1.5rem; opacity: 0; transform: translateY(8px);
  transition: opacity .32s var(--ease) 90ms, transform .32s var(--ease) 90ms;
  pointer-events: none; width: 100%;
}
.pan__body h3 {
  font-weight: 900; text-transform: uppercase; font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  color: #fff; margin: 0 0 .45rem;
}
.pan__body p {
  color: rgba(255,255,255,.88); font-size: .93rem; margin: 0 0 .85rem; max-width: 40ch;
}
.pan__body p strong { font-weight: 600; color: #fff; }
.pan.is-active .pan__img { filter: saturate(1); transform: scale(1.04); }
.pan.is-active .pan__v { opacity: 0; }
.pan.is-active .pan__body { opacity: 1; transform: none; pointer-events: auto; }
/* El chip NO es un placeholder muerto: es un link al formulario. */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  padding: .36rem .8rem; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.chip:hover { border-color: var(--magenta-lt); background: rgba(176,71,155,.28); }
.flota__foot {
  font-size: .9rem; color: var(--ink-2); border-top: 1px solid var(--hairline);
  margin: 0; padding: 1.1rem 0 clamp(3.4rem, 7vw, 6rem);
}

/* ==========================================================================
   7.5 EL PATIO — la sección más importante. ÚNICA banda violeta tinta.
   ========================================================================== */
.patio { background: var(--violet-ink); color: var(--cream); padding: clamp(3.6rem, 7.5vw, 6.5rem) 0; }
.patio .kicker { color: var(--magenta-lt); }
.patio h2 { color: #fff; }
.patio__grid {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.patio__copy p { color: rgba(244,241,248,.9); font-size: clamp(1rem, 1.5vw, 1.13rem); max-width: 54ch; }
.patio__copy strong { color: #fff; font-weight: 600; }
.essay { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 1.1rem; }
.essay__col { display: grid; gap: 1.1rem; align-content: start; }
figure { margin: 0; }
/* Sin filtros ni duotono: la crudeza de la foto es el argumento. */
.shot { position: relative; overflow: hidden; background: #241238; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--tall { aspect-ratio: 4 / 3.4; }
/* el scale base evita que el parallax deje ver el borde del marco */
.shot--tall img { will-change: transform; transform: scale(1.08); }
.shot--sq { aspect-ratio: 4 / 3; }
figcaption {
  font-size: .84rem; color: rgba(244,241,248,.72); padding-top: .6rem; line-height: 1.45;
}

/* ==========================================================================
   7.6 COBERTURA — mapa como SUPERFICIE (no itinerario)
   ========================================================================== */
.cober { background: var(--grey); padding: clamp(3.4rem, 7vw, 6rem) 0; }
/* Reequilibrio foto↔texto: la foto ya no es un sello de 330px flotando en el
   aire, sino una pieza editorial del ancho de su columna, y el mapa gana sitio.
   Las dos columnas quedan de anchos parecidos. */
.cober__grid {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.cober__copy .lede { max-width: 50ch; }
.cober__aside { margin-top: clamp(1.7rem, 3vw, 2.5rem); max-width: 100%; }
.cober__aside .shot { aspect-ratio: 3 / 2; border: 1px solid var(--hairline); }
.cober__aside figcaption { color: var(--ink-2); }

/* Mapa de Colombia por REGIONES (generado con Magnific `images_generate_svg`,
   Recraft v4 — memoria magnific-text-to-svg-for-maps: nunca a mano).
   Los 28 sub-paths del original vienen agrupados en 5 <g class="reg reg--…">
   por su posición real, así que cada región se tinta y se anima como una sola
   pieza y las divisiones internas quedan como filetes blancos del propio dibujo.
   El abanico NO se recorta con máscara: cada carril TERMINA dentro del país
   (así se evita de raíz la trampa del <use> de un <g> dentro de un clipPath). */
.mapbox { position: relative; width: 100%; max-width: 500px; margin: 0 auto; }
.mapbox__ar { position: relative; width: 100%; aspect-ratio: 1572 / 2168; }
.co-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.reg--andina    { fill: var(--reg-andina);    --s: 2; }
.reg--caribe    { fill: var(--reg-caribe);    --s: 0; }
.reg--pacifica  { fill: var(--reg-pacifica);  --s: 1; }
.reg--orinoquia { fill: var(--reg-orinoquia); --s: 3; }
.reg--amazonia  { fill: var(--reg-amazonia);  --s: 4; }
html.is-anim .mapbox:not(.in) .reg { opacity: 0; }
html.is-anim .mapbox.in .reg {
  animation: regIn .6s var(--ease) both;
  animation-delay: calc(var(--s, 0) * 120ms);
}
/* 18 unidades de usuario ≈ 6 px en pantalla (el viewBox mide 2168 de alto). */
@keyframes regIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Abanico de carriles: aparecen, NO se dibujan (nada de stroke-dashoffset:
   eso es pilgrim / Éxito Legal). */
.fan .lane line      { stroke: var(--violet-deep); stroke-width: 9; opacity: .42; }
.fan .lane-dash line { stroke: var(--demarc); stroke-width: 9; stroke-dasharray: 44 62; stroke-linecap: butt; }
html.is-anim .mapbox:not(.in) .fan { opacity: 0; }
html.is-anim .mapbox.in .fan { animation: fanIn .7s var(--ease) .55s both; }
@keyframes fanIn { from { opacity: 0; } to { opacity: 1; } }
.bog-halo { fill: var(--magenta); opacity: .22; }
.bog-petal { fill: var(--magenta); }

/* Rótulos: texto HTML real (accesible y seleccionable), en fichas de
   señalización para que se lean sobre cualquier tono de región. */
.reg-labels { position: absolute; inset: 0; pointer-events: none; }
.reg-labels b {
  position: absolute; transform: translate(-50%, -50%);
  font-family: 'Golos Text', sans-serif; font-weight: 600;
  font-size: .71rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--violet-deep); white-space: nowrap;
  background: rgba(247,247,250,.94); border: 1px solid var(--hairline);
  border-radius: 2px; padding: .14rem .42rem;
}
.reg-labels b.bogota {
  font-family: 'Overpass', sans-serif; font-weight: 900; color: var(--magenta);
  font-size: .7rem; letter-spacing: .1em; border-color: var(--magenta-lt);
}
.mapbox__foot {
  margin: 1rem 0 0; font-size: .82rem; color: var(--ink-2); text-align: center;
}

/* ==========================================================================
   7.7 LA GENTE QUE CONDUCE — editorial
   ========================================================================== */
.gente { background: var(--surface); padding: clamp(3.4rem, 7vw, 6rem) 0; }
.gente__grid {
  display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.gente__fig { border: 1px solid var(--hairline); padding: .6rem; background: #fff; }
.gente__fig img { width: 100%; }
.gente__fig figcaption { color: var(--ink-2); padding: .7rem .3rem 0; }
blockquote {
  margin: 0 0 1.5rem; padding-left: 2.6rem; position: relative;
  font-family: 'Overpass', sans-serif; font-weight: 700; line-height: 1.28;
  font-size: clamp(1.2rem, 2.3vw, 1.85rem); color: var(--ink);
}
blockquote::before {
  content: '\201C'; position: absolute; left: 0; top: -.16em;
  font-family: 'Overpass', sans-serif; font-weight: 900; font-size: 3.4em;
  line-height: 1; color: var(--magenta);
}
blockquote cite {
  display: block; margin-top: .9rem; font-family: 'Golos Text', sans-serif;
  font-style: normal; font-weight: 500; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}
.gente__body p { max-width: 58ch; }
.gente__body strong { font-weight: 600; color: var(--violet-deep); }

/* ==========================================================================
   ---- ACOPIO: inicio ----
   7.8 CENTRO DE ACOPIO — AVISO EMERGENTE con feature flag (ACOPIO_ON /
   ACOPIO_UNTIL). Ya no es una sección: es un aviso discreto de esquina que se
   desvanece solo, se puede cerrar y recuerda el cierre en localStorage.
   Patrón A PRUEBA DE FALLOS: display:none por defecto, solo visible cuando NO
   tiene [hidden]. Nunca puede aparecer a pantalla completa ni tapar el hero.
   Se retira borrando este bloque + el de HTML/JS.
   ========================================================================== */
.acopio-toast {
  display: none;
  position: fixed; z-index: 58;
  left: clamp(.7rem, 2.5vw, 1.6rem); bottom: clamp(.7rem, 2.5vw, 1.6rem);
  width: min(23rem, calc(100vw - 1.4rem));
  background: var(--panel-soft); color: var(--ink);
  border: 1px solid var(--hairline); border-left: 4px solid var(--violet);
  border-radius: 3px; padding: 1.15rem 2.2rem 1.15rem 1.15rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.acopio-toast:not([hidden]) { display: block; }
.acopio-toast.is-in { opacity: 1; transform: none; }
.acopio-toast__x {
  position: absolute; top: .3rem; right: .45rem; background: none; border: 0;
  font-size: 1.6rem; line-height: 1; color: var(--ink-2); cursor: pointer;
  padding: .1rem .35rem;
}
.acopio-toast__x:hover { color: var(--violet); }
.acopio-toast__date {
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .68rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--violet);
  margin: 0 0 .35rem;
}
.acopio-toast__h {
  font-weight: 800; text-transform: none; letter-spacing: 0; line-height: 1.22;
  font-size: 1.02rem; margin: 0 0 .6rem;
}
.acopio-toast__body { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: .85rem; }
.acopio-toast__body img { width: 62px; border: 1px solid var(--hairline); }
.acopio-toast p { font-size: .83rem; line-height: 1.5; margin: 0; color: var(--ink-2); }
.acopio-toast p strong { color: var(--ink); font-weight: 600; }
.acopio-toast p a { font-weight: 600; color: var(--violet-deep); border-bottom: 1px solid var(--hairline); }
/* En móvil sube al hueco bajo el nav: así no pelea con el FAB de «Cotizar»
   (que vive abajo a la derecha) y no tapa el titular del hero, que va anclado
   al pie de la imagen. */
@media (max-width: 760px) {
  .acopio-toast { left: .7rem; right: .7rem; width: auto; }
  /* Compacto, y por encima del FAB de «Cotizar» (que vive abajo a la derecha):
     apilados en vertical no se pisan ni a 360px de ancho. */
  .acopio-toast { padding: .8rem 1.9rem .8rem .8rem; bottom: 4.6rem; }
  .acopio-toast__body { display: block; }
  .acopio-toast__body img { display: none; }
  .acopio-toast__date { font-size: .63rem; margin-bottom: .25rem; }
  .acopio-toast__h { font-size: .93rem; margin-bottom: .4rem; }
  .acopio-toast p { font-size: .765rem; line-height: 1.42; }
}
/* ---- ACOPIO: fin ---- */

/* ==========================================================================
   7.9 COTIZA TU RECORRIDO — formulario sin backend → WhatsApp
   El formulario va ENCUADRADO: banda violeta tinta con el título y la ayuda,
   cuerpo blanco con los campos agrupados en fieldsets, sobre una banda
   violeta clarita. Sin sombra flotante (doctrina): lo que lo encuadra es el
   filete violeta de 3px, el borde hairline y el contraste con la banda.
   ========================================================================== */
.cotiza { position: relative; background: var(--panel-soft); padding: clamp(3.4rem, 7vw, 6rem) 0; overflow: hidden; }
.cotiza__bg { position: absolute; inset: 0; opacity: .1; pointer-events: none; }
.cotiza__bg img { width: 100%; height: 100%; object-fit: cover; }
.cotiza__in { position: relative; z-index: 2; }
.cotiza__head { max-width: 56ch; margin: 0 auto clamp(1.7rem, 3.5vw, 2.4rem); text-align: center; }
.cotiza__head .kicker { justify-content: center; }
.cotiza__head .sec-h { margin-bottom: 0; }

.form {
  max-width: 700px; margin: 0 auto; background: #fff;
  border: 1px solid var(--hairline); border-top: 3px solid var(--violet);
  border-radius: 3px; overflow: hidden;
}
.form__head {
  background: var(--violet-ink); color: var(--cream);
  padding: clamp(1.2rem, 2.6vw, 1.6rem) clamp(1.2rem, 3vw, 2.1rem);
}
.form__eyebrow {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .45rem;
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .72rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--magenta-lt);
}
.form__eyebrow .petal { color: var(--magenta-lt); }
.form__help { margin: 0; font-size: .93rem; line-height: 1.55; color: rgba(244,241,248,.9); max-width: 62ch; }
.form__help .req { color: var(--magenta-lt); font-weight: 700; }
.form__body { padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.2rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 1.8rem); }

.fset { border: 0; margin: 0; padding: 0; }
.fset + .fset { margin-top: .9rem; }
.fset legend {
  display: block; width: 100%; padding: 0 0 .5rem; margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--hairline);
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .69rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--violet-deep);
}

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { position: relative; margin-bottom: 1.15rem; }
.field label {
  position: absolute; left: .82rem; top: .95rem; font-size: 1rem; color: var(--ink-2);
  pointer-events: none; transform-origin: left top;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.field input, .field select, .field textarea {
  width: 100%; background: #FBFBFD; border: 1px solid var(--hairline); border-radius: 3px;
  padding: 1.48rem .78rem .5rem; font: inherit; color: var(--ink);
  appearance: none; -webkit-appearance: none;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 5.4rem; padding-top: .7rem; }
.field select { cursor: pointer; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #BFBFCE; }
.field:focus-within input, .field:focus-within select, .field:focus-within textarea {
  background: #fff; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(107,63,160,.16);
}
/* la firma del spec: filete inferior que se expande desde la izquierda */
.field::after {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 2px;
  background: var(--violet); transform: scaleX(0); transform-origin: left;
  transition: transform .26s var(--ease); border-radius: 0 0 2px 2px;
}
.field--textarea::after { display: none; }
.field:focus-within::after { transform: scaleX(1); }
.field:focus-within label { color: var(--violet-deep); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--magenta-lt); outline-offset: 2px;
}
/* label flotante: sube cuando hay foco o valor */
.field.is-float label, .field:focus-within label, .field.always label {
  transform: translateY(-.58rem) scale(.74); font-weight: 600;
}
.field .req { color: var(--magenta); }
/* el textarea no usa label flotante: no cabe sobre 3 renglones de texto */
.field--textarea label {
  position: static; display: block; margin-bottom: .35rem;
  font-size: .76rem; font-weight: 600; letter-spacing: normal; text-transform: none;
  color: var(--ink-2); transform: none !important;
}
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.form__actions .btn { flex: 1 1 auto; padding-top: 1.02rem; padding-bottom: 1.02rem; }
.form__alt { font-size: .89rem; color: var(--ink-2); margin: 1rem 0 0; text-align: center; }
.form__alt a { font-weight: 600; border-bottom: 1px solid var(--hairline); }
.form__alt a:hover { border-color: var(--magenta); }
.form__status {
  min-height: 1.4rem; font-size: .9rem; font-weight: 600; color: var(--violet-deep);
  margin: .8rem 0 0;
}
.form__status.err { color: #A3123A; }
.field.invalid input, .field.invalid select {
  border-color: #A3123A; background: #FEF7F8;
}

/* ==========================================================================
   7.10 CONTACTO Y UBICACIÓN
   ========================================================================== */
.contacto { background: var(--grey); padding: clamp(3.4rem, 7vw, 6rem) 0; }
.contacto__grid {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.dl { margin: 0 0 1.8rem; }
.dl dt {
  font-family: 'Overpass', sans-serif; font-weight: 800; font-size: .7rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--violet);
  margin-top: 1.15rem;
}
.dl dt:first-child { margin-top: 0; }
.dl dd { margin: .2rem 0 0; font-size: 1.02rem; }
.dl dd a { font-weight: 600; }
.dl dd a:hover { color: var(--magenta); }
.contacto__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.mapembed {
  border: 1px solid var(--hairline); background: var(--surface); overflow: hidden;
  aspect-ratio: 4 / 3.2;
}
.mapembed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   7.11 FAQ — acordeón sobrio
   ========================================================================== */
.faq { background: var(--surface); padding: clamp(3.4rem, 7vw, 6rem) 0; }
.faq__list { max-width: 52rem; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: center; gap: .9rem; cursor: pointer; list-style: none;
  padding: 1.15rem 0; font-family: 'Overpass', sans-serif; font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.13rem); color: var(--ink);
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violet-deep); }
.faq summary .petal { transition: transform .28s var(--ease); }
.faq details[open] summary .petal { transform: rotate(90deg); }
.faq details[open] summary { color: var(--violet-deep); }
.faq .ans { padding: 0 0 1.3rem 1.7rem; max-width: 68ch; }
.faq .ans p { margin: 0; color: var(--ink-2); }

/* ==========================================================================
   7.12 FOOTER
   ========================================================================== */
.foot { background: var(--ink); color: rgba(244,241,248,.72); padding: clamp(2.8rem, 5vw, 4rem) 0 1.8rem; }
.foot__grid {
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(244,241,248,.14);
}
.foot__brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.foot__brand svg { width: 34px; height: 34px; }
.foot__brand b {
  font-family: 'Overpass', sans-serif; font-weight: 900; font-size: 1.2rem;
  letter-spacing: .04em; color: #fff; line-height: 1; display: block;
}
.foot__brand i {
  font-style: normal; font-weight: 700; font-size: .56rem; letter-spacing: .2em;
  color: var(--magenta-lt); display: block; line-height: 1.6;
}
.foot p { font-size: .9rem; margin: 0 0 .5rem; }
.foot h4 {
  font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--magenta-lt); margin: 0 0 .9rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .45rem; font-size: .92rem; }
.foot a { color: rgba(244,241,248,.8); }
.foot a:hover { color: #fff; }
.foot__legal {
  display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; justify-content: space-between;
  padding-top: 1.5rem; font-size: .82rem;
}
.foot__panoramic a { color: var(--magenta-lt); font-weight: 600; }
.foot__panoramic a:hover { color: #fff; }

/* ==========================================================================
   FAB + MODAL WHATSAPP
   ========================================================================== */
.fab {
  position: fixed; right: clamp(.9rem, 2.5vw, 1.6rem); bottom: clamp(.9rem, 2.5vw, 1.6rem);
  z-index: 55; box-shadow: 0 14px 34px -12px rgba(46,24,72,.6);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fab.show { opacity: 1; transform: none; pointer-events: auto; }
.fab.hide { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* Patrón A PRUEBA DE FALLOS: display:none por defecto; solo se muestra
   cuando NO tiene [hidden]. Nunca puede aparecer a pantalla completa al cargar. */
.wa-modal {
  display: none;
  position: fixed; inset: 0; z-index: 100; place-items: center; padding: 1.2rem;
}
.wa-modal:not([hidden]) { display: grid; }
.wa-overlay { position: absolute; inset: 0; background: rgba(28,29,34,.72); backdrop-filter: blur(8px); }
.wa-card {
  position: relative; z-index: 1; width: min(430px, 96vw); max-height: 92vh; overflow: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--hairline);
  border-radius: 4px; padding: 2rem 1.7rem 1.8rem; text-align: center;
  box-shadow: 0 50px 100px -30px rgba(46,24,72,.55);
}
.wa-close {
  position: absolute; top: .5rem; right: .9rem; background: none; border: 0;
  font-size: 1.9rem; line-height: 1; color: var(--ink-2); cursor: pointer;
}
.wa-close:hover { color: var(--violet); }
.wa-card .kicker { justify-content: center; }
.wa-card h3 { font-weight: 900; text-transform: uppercase; font-size: 1.28rem; margin: 0 0 .4rem; }
.wa-card > p { font-size: .93rem; color: var(--ink-2); margin: 0 0 1.1rem; }
.wa-qr {
  display: grid; place-items: center; padding: .9rem; background: #fff;
  border: 1px solid var(--hairline); width: fit-content; margin: 0 auto 1rem;
}
.wa-qr img { width: 190px; height: 190px; image-rendering: pixelated; }
.wa-preview {
  font-size: .8rem; color: var(--ink-2); background: var(--grey); border-left: 3px solid var(--violet);
  padding: .7rem .85rem; text-align: left; white-space: pre-line; margin: 0 0 1rem;
  max-height: 8.5rem; overflow: auto;
}
.wa-actions { display: grid; gap: .6rem; }
.wa-actions .btn { width: 100%; }

/* ==========================================================================
   REVEAL (gated por .is-anim → sin JS todo visible)
   ========================================================================== */
html.is-anim [data-r] { opacity: 0; will-change: opacity, transform; }
html.is-anim [data-r="fade"] { transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.is-anim [data-r="clip"] { transform: translateY(13px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.is-anim [data-r="left"] { transform: translateX(-20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.is-anim [data-r].in { opacity: 1; transform: none; }

/* Salto de ancla nativo (sin JS): el nav es fijo y tapaba el titular.
   74px DEBE coincidir con el offset del handler de anclas de main.js. */
section[id] { scroll-margin-top: 74px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1040px) {
  .answer__grid, .patio__grid, .cober__grid, .gente__grid, .contacto__grid { grid-template-columns: 1fr; }
  .flips { grid-template-columns: 1fr; }
  .cober__aside { max-width: 100%; }
  .mapbox { max-width: 420px; }
}
@media (max-width: 900px) {
  /* Se desarma el mecanismo de la flota: 4 tarjetas-imagen apiladas, siempre abiertas.
     El selector INCLUYE `.fleet[data-active]` a proposito: las media queries NO
     suman especificidad, asi que `.fleet` sola (0,1,0) perdia contra
     `.fleet[data-active="0"]` (0,2,0) del 7.4 y quedaban 3 paneles de 45px con el
     texto cortado a mitad de palabra. Empatando en 0,2,0 gana por orden de aparicion. */
  .fleet, .fleet[data-active] {
    display: grid; grid-template-columns: 1fr; height: auto; gap: 1.1rem; background: none;
    transition: none;
  }
  .pan { height: 300px; }
  .pan__v { display: none; }
  .pan__body { opacity: 1; transform: none; pointer-events: auto; position: absolute; }
  .pan__img { filter: saturate(1); }
  .essay { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav .btn.js-nav-cta { display: none; }
  .hamb { display: flex; }
  .hero { min-height: 88vh; align-items: flex-end; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .row { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  blockquote { padding-left: 0; padding-top: 2.2rem; }
  blockquote::before { top: -.34em; }
}

/* ==========================================================================
   PANTALLA ANCHA — el sitio deja de quedarse clavado en 1240px
   En un monitor de 2560 el contenedor pasaba de 1240px (48% del viewport: más
   de la mitad de la pantalla era margen). Se sube el tope por escalones y se
   escala el ritmo tipográfico desde `html{font-size}`, no selector a selector:
   así los `clamp()` y las medidas de línea en `ch` (50–68ch → nunca más de
   ~78 caracteres) escalan solos y el texto no se queda enano.
   ========================================================================== */
@media (min-width: 1500px) {
  :root { --maxw: min(90vw, 1400px); }
  html { font-size: 17.5px; }
  .mapbox { max-width: 570px; }
  .fleet { height: min(70vh, 620px); }
  .form { max-width: 740px; }
}
@media (min-width: 1800px) {
  :root { --maxw: min(88vw, 1560px); }
  html { font-size: 18.5px; }
  .rail { left: 38px; }
  .mapbox { max-width: 650px; }
  .fleet { height: min(70vh, 660px); }
  .form { max-width: 780px; }
}
@media (min-width: 2200px) {
  :root { --maxw: 1700px; }
  html { font-size: 19.5px; }
  .rail { left: 46px; }
  .mapbox { max-width: 720px; }
  .fleet { height: min(72vh, 700px); }
  .form { max-width: 820px; }
}
@media (min-width: 3000px) {
  /* tope duro: pasado este punto el sitio deja de crecer y el margen vuelve a
     ser margen (las medidas de línea en `ch` ya están en su máximo legible). */
  :root { --maxw: 1820px; }
  html { font-size: 20px; }
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION — todo visible, sin dashes en movimiento,
   sin tambores, sin parallax, sin cortinilla, sin flip.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .gate { display: none !important; }
  .rail__strip { transform: none !important; }
  .hero__bg img { animation: none !important; transform: none !important; }
  .shot--tall img { transform: none !important; }
  .reg { opacity: 1 !important; animation: none !important; transform: none !important; }
  .fan { opacity: 1 !important; animation: none !important; }
  /* el aviso del acopio aparece sin animación */
  .acopio-toast { transition: none !important; opacity: 1 !important; transform: none !important; }
  .odo__col { transform: translateY(calc(var(--n) * -1em)) !important; }

  /* FLIP: sin volteo. Las dos caras se apilan visibles y el botón se oculta. */
  .flip { perspective: none; min-height: 0; }
  .flip__inner { transform: none !important; transform-style: flat; }
  .flip__face {
    position: static; inset: auto; backface-visibility: visible;
    -webkit-backface-visibility: visible; transform: none !important;
  }
  .flip__back { border-top: 0; }
  .flip__toggle, .flip__back-toggle { display: none !important; }
  .flip__front { border-bottom: 0; padding-bottom: 1.7rem; }
  .flip__front::after { display: none; }

  /* FLOTA: sin transición de columnas ni scale; paneles apilados y abiertos */
  .fleet { transition: none !important; grid-template-columns: 1fr !important; height: auto; gap: 1.1rem; background: none; }
  .pan { height: 300px; }
  .pan__img { transform: none !important; filter: saturate(1); }
  .pan__v { display: none; }
  .pan__body { opacity: 1 !important; transform: none !important; pointer-events: auto; }
}