/* ═══════════════════════════════════════════════════════════════════════════
   SmartGPS · sistema visual del sitio público (landing y términos).

   ÍNDICE
     1. Fuentes                 6. Tramos: los fondos fijos que acompañan
     2. Tokens                  7. Barra, pie y aviso del prototipo
     3. Base                    8. Secciones, en el orden de la página
     4. Utilidades y contextos  9. Revelado y movimiento reducido
     5. Componentes

   ⚠ TODO el movimiento pasa por `.rev` o por animaciones listadas en §9, y
   muere bajo `prefers-reduced-motion`. No hay animación que no se apague.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · fuentes ────────────────────────────────────────────────────────── */
@font-face{font-family:Poppins;src:url(fuentes/poppins/Poppins-Regular.ttf) format('truetype');
  font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fuentes/poppins/Poppins-SemiBold.ttf) format('truetype');
  font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(fuentes/poppins/Poppins-Bold.ttf) format('truetype');
  font-weight:700;font-display:swap}
@font-face{font-family:Quicksand;src:url(fuentes/quicksand/Quicksand-VF.ttf) format('truetype-variations');
  font-weight:300 700;font-display:swap}


/* ── 2 · tokens ─────────────────────────────────────────────────────────── */
:root{
  /* marca */
  --navy:#000C3F; --marca:#FF2346; --marca-suave:#E00F35; --marca-honda:#C40D2E;
  --marca-tenue:#FFE9ED;
  /* ⚠ El rojo que CARGA TEXTO sobre claro. #FF2346 mide 3,4:1 sobre el papel;
     este mide más de 5:1. Mismo matiz, más hondo: no toca la identidad. */
  --marca-texto:#B00B29;

  /* noche */
  --noche:#060B1C; --noche-2:#0C1330;
  --claro:#F2F4FB; --claro-2:rgba(242,244,251,.72); --claro-3:rgba(242,244,251,.5);
  --linea-n:rgba(255,255,255,.12);

  /* día — ⚠ GRIS ROSADO, NO BLANCO. El blanco puro contra el azul noche era un
     salto de contraste que el dueño rechazó. `--papel` es el promedio de la
     foto diurna velada: es contra ese color que se mide el contraste. */
  --papel:#E5DDE1; --lienzo:#FFFFFF; --tarjeta:rgba(255,255,255,.74);
  --linea:#DBD1D6; --linea-f:#C7BBC1;
  --tinta:#000C3F; --texto:#384062; --suave:#4F5677; --tenue:#545A78;

  --r:12px; --r-lg:18px; --r-xl:26px;
  --env:1180px;
  color-scheme:light;
}


/* ── 3 · base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--texto);
  font:17px/1.65 Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
/* ⚠ La regla BASE del icono: sin ella un <svg> suelto toma 300×150 y revienta
   la caja que lo contiene. */
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.19em}
h1,h2,h3,h4{color:var(--tinta);margin:0;line-height:1.12;letter-spacing:-.022em;font-weight:700}
h1{font-size:clamp(2.4rem,6.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.4vw,3rem)}
h3{font-size:clamp(1.12rem,2vw,1.35rem);letter-spacing:-.012em}
h1,h2,h3{text-wrap:balance}
p{margin:.7rem 0;text-wrap:pretty}         /* sin una palabra sola en la última línea */
a{color:inherit;text-decoration:none}


/* ── 4 · utilidades y contextos ─────────────────────────────────────────── */
.env{max-width:var(--env);margin:0 auto;padding:0 1.4rem;width:100%}
.env-sm{max-width:860px;margin:0 auto;padding:0 1.4rem}
.centro{text-align:center}
.pad{padding:clamp(4rem,9vw,7rem) 0}

.kicker{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--marca-texto);margin-bottom:.9rem}
.bajada{font-size:clamp(1.02rem,1.7vw,1.16rem);color:var(--suave);max-width:56ch}
.acciones{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.9rem}
.acciones-centro{justify-content:center}
.nota-seccion{font-size:.89rem;color:var(--suave);margin-top:1.2rem}

/* Los dos contextos. Se ponen en el TRAMO, y todo lo de adentro los hereda. */
.osc{background:var(--noche);color:var(--claro-2)}
.osc :is(h1,h2,h3){color:#fff}
.osc .kicker{color:var(--marca)}          /* #FF2346 sobre noche: 5,2:1 */
.osc .bajada{color:var(--claro-2)}
.claro{background:var(--papel);color:var(--texto)}

/* Filete: la línea fina que separa dos secciones DENTRO de un mismo tramo. */
.filete::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(calc(var(--env) - 2.8rem),calc(100% - 2.8rem));height:1px;background:var(--linea-f)}
.osc .filete::before{background:var(--linea-n)}


/* ── 5 · componentes ────────────────────────────────────────────────────── */

/* logo — `assets/marca/`, recortado y reducido desde los originales de
   `sustrato-visual/`. Hay dos: `logo-fondo-oscuro` (texto blanco) y
   `logo-fondo-claro` (texto navy). Todo lo que hoy lo lleva va sobre oscuro.
   ⚠ Se dimensiona por ALTO: el satélite sube por encima del texto, así que el
   nombre ocupa sólo el tercio de abajo y a menos alto deja de leerse. */
.logo{display:inline-flex;align-items:center;min-height:44px;flex:none}
.logo img{display:block;height:50px;width:auto}

/* botones
   ⚠ El primario es `--marca-suave` y no `--marca`: blanco sobre #FF2346 mide
   3,76:1; sobre #E00F35, 4,90:1.
   ⚠ El fantasma es OSCURO por omisión y se aclara sólo en contexto `.osc`. Al
   revés, «Cotizar mi flota» era blanco sobre tarjeta blanca y no se veía. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:600;font-size:.97rem;line-height:1.15;padding:.92rem 1.5rem;
  border-radius:99px;border:1px solid transparent;cursor:pointer;min-height:48px;
  background:var(--lienzo);color:var(--navy);white-space:nowrap;
  transition:transform .16s,box-shadow .16s,background .16s}
.btn:hover{transform:translateY(-2px)}
.btn .ic{width:1.15em;height:1.15em;flex:none}
.btn-p{background:var(--marca-suave);color:#fff;box-shadow:0 10px 30px -12px rgba(255,35,70,.85)}
.btn-p:hover{background:var(--marca-honda);box-shadow:0 16px 38px -12px rgba(255,35,70,.95)}
.btn-fant{background:transparent;color:var(--navy);border-color:var(--linea-f)}
.btn-fant:hover{background:rgba(255,255,255,.6)}
.osc .btn-fant{color:#fff;border-color:rgba(255,255,255,.34)}
.osc .btn-fant:hover{background:rgba(255,255,255,.1)}
.btn-lg{padding:1.08rem 1.9rem;font-size:1.04rem;min-height:56px}
.btn-sm{padding:.6rem 1rem;font-size:.88rem;min-height:44px}
.btn-bloque{width:100%}

/* tarjetas y rejillas */
.rej{display:grid;gap:1.1rem}
.rej-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* 300px y no 260: con 260 caben cuatro y seis tarjetas quedan 4+2, con un hueco
   que se lee como «falta algo». */
.rej-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rej-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.tarj{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:1.5rem 1.4rem;transition:transform .2s,box-shadow .2s,border-color .2s}
.tarj:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,12,63,.4);
  border-color:var(--linea-f)}
.tarj b{color:var(--tinta);font-size:1.02rem;display:block;line-height:1.3}
.tarj p{color:var(--suave);font-size:.95rem;margin:.45rem 0 0}

/* el chip de icono */
.ic-chip{width:3rem;height:3rem;border-radius:14px;background:var(--marca-tenue);color:var(--marca-suave);
  display:grid;place-items:center;margin-bottom:1rem;flex:none;transition:background .2s,color .2s}
.ic-chip > svg{width:1.5rem;height:1.5rem}
.osc .ic-chip{background:rgba(255,35,70,.16);color:var(--marca)}

/* el latido: la señal que llega. Es marca y se usa en todo el sitio. */
.latido{width:.55rem;height:.55rem;border-radius:99px;background:var(--marca);flex:none;
  position:relative;display:inline-block}
.latido::after{content:'';position:absolute;inset:0;border-radius:99px;background:var(--marca);
  animation:latir 2.2s ease-out infinite}
@keyframes latir{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}

/* campo de formulario (lo usan los términos; sus inputs, en documento.css) */
.campo{margin-bottom:1rem}
.campo label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:.4rem}


/* ── 6 · tramos: los fondos fijos que acompañan ─────────────────────────
   La página son TRES tramos —noche, día, cierre— y no siete secciones
   alternando claro y oscuro. Cada tramo lleva UNA foto quieta detrás de todas
   sus secciones: el fondo acompaña la lectura en vez de cortarla.

   Mecánica: `.tramo-fondo` es `sticky`, del alto de la pantalla y con margen
   negativo igual a su alto, así no ocupa lugar y las secciones corren por
   encima. Como es hija del tramo, se queda pegada SÓLO mientras dura su tramo.
   Sin JS y sin `background-attachment:fixed`, que iOS ignora.

   ⚠ El fondo del tramo (`.osc` / `.claro`) es el color promedio de su foto
   velada, y no es cosmético: la foto no es un ANCESTRO del texto, así que
   `auditoria.mjs` mide el contraste contra ese color. */
/* ⚠ `overflow:clip` y no `hidden`: `hidden` crea un contenedor de scroll y el
   `sticky` deja de pegarse. Y sin recortar, un tramo más BAJO que la pantalla
   —el del cierre— deja que su foto desborde por abajo y TAPE EL PIE entero,
   con todos sus enlaces vivos en el DOM: la auditoría no lo ve. */
.tramo{position:relative;isolation:isolate;overflow:clip}
.tramo > section{position:relative}
.tramo-fondo{position:sticky;top:0;z-index:-1;overflow:hidden;pointer-events:none;
  height:100vh;margin-bottom:-100vh;height:100lvh;margin-bottom:-100lvh}
.tramo-foto,.tramo-foto img,.tramo-velo,.tramo-velo::before,.tramo-velo::after,.heroe-trazo{
  position:absolute;inset:0;width:100%;height:100%}
.tramo-foto img{object-fit:cover;object-position:50% 50%;display:block}
.tramo-velo::before,.tramo-velo::after{content:'';transition:opacity .7s ease}

/* noche: sobre el héroe, el velo lateral deja ver la carretera a la derecha;
   al bajar (`.velado`, lo pone sitio.js) se empareja y la huella se apaga */
.osc .tramo-velo::before{background:linear-gradient(100deg,rgba(4,8,26,.95) 0%,
  rgba(4,8,26,.78) 38%,rgba(4,8,26,.28) 68%,rgba(4,8,26,.55) 100%)}
.osc .tramo-velo::after{background:rgba(5,9,24,.8);opacity:0}
.tramo.velado .tramo-velo::after{opacity:1}
/* ⚠ La huella se apaga al llegar al borde de abajo del HÉROE, no de la foto.
   La foto mide una pantalla y el héroe menos: sin este recorte el cometa
   arrancaba como un punto suelto encima de la franja de hechos. El alto del
   héroe lo pone sitio.js en `--fin-heroe`. */
.heroe-trazo{transition:opacity .7s ease;
  -webkit-mask-image:linear-gradient(#000 calc(var(--fin-heroe,100%) - 120px),transparent var(--fin-heroe,100%));
  mask-image:linear-gradient(#000 calc(var(--fin-heroe,100%) - 120px),transparent var(--fin-heroe,100%))}
.tramo.velado .heroe-trazo{opacity:0}
/* en un teléfono el texto ocupa todo el ancho: el velo lateral no alcanza */
@media(max-width:900px){.osc .tramo-velo::before{background:rgba(4,8,26,.74)}}

/* día: la foto aérea ya viene en gris rosado; el velo sólo la calma más */
.claro .tramo-velo::before{background:linear-gradient(180deg,rgba(232,225,229,.5) 0%,
  rgba(232,225,229,.3) 50%,rgba(232,225,229,.55) 100%)}
.claro .tramo-velo::after{display:none}

/* cierre: velo parejo que termina EN el color del pie, para que no haya corte.
   ⚠ Acá la foto NO es fija sino del alto del tramo: el precio mide menos que la
   pantalla, y una capa de pantalla completa se recortaba antes de que el velo
   llegara al color del pie — se veía el borde de la foto. */
.tramo-cierre .tramo-fondo{position:absolute;inset:0;height:auto;margin:0}
.tramo-cierre .tramo-velo::before{background:linear-gradient(180deg,rgba(5,9,24,.8) 0%,
  rgba(5,9,24,.88) 55%,var(--noche) 100%)}
.tramo-cierre .tramo-velo::after{display:none}


/* ── 7 · barra, pie y aviso del prototipo ───────────────────────────────── */
/* `sticky` y no `fixed`: fija, se montaba encima de la franja de aviso.
   ⚠ Fondo OPACO desde el primer píxel: casi transparente, el wordmark blanco
   quedaba sobre papel claro antes de que empezara el héroe. */
.barra{position:sticky;top:0;z-index:60;background:var(--noche);
  border-bottom:1px solid transparent;transition:background .3s,backdrop-filter .3s,border-color .3s}
.barra.pegada{background:rgba(6,11,28,.92);backdrop-filter:blur(14px);border-bottom-color:var(--linea-n)}
.barra-in{display:flex;align-items:center;gap:1.2rem;height:68px}

.barra nav{display:flex;gap:.2rem;margin-left:auto}
.barra nav a{color:var(--claro-2);font-size:.92rem;font-weight:500;padding:.55rem .78rem;
  border-radius:9px;min-height:44px;display:inline-flex;align-items:center;transition:color .15s,background .15s}
.barra nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:880px){.barra nav a[data-opcional]{display:none}}
/* ⚠ Bajo 760px ningún enlace cabe junto al botón: queda el wordmark y la acción. */
@media(max-width:760px){
  .barra nav{display:none}
  .barra-in{height:60px;gap:.8rem}
  .barra .logo img{height:42px}
  .barra .btn{margin-left:auto;padding:.7rem 1.15rem;font-size:.92rem}
}

.pie-sitio{background:var(--noche);color:var(--claro-3);padding:3.4rem 0 2.4rem;font-size:.92rem}
.pie-rej{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;
  padding-bottom:2.2rem;border-bottom:1px solid var(--linea-n)}
.pie-sitio h3{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:.9rem;font-weight:700}
.pie-sitio a{color:var(--claro-2);display:flex;align-items:center;padding:.45rem 0;
  min-height:44px}   /* área táctil: en móvil medían 34px */
.pie-sitio a:hover{color:#fff}
.pie-marca .logo img{height:60px}
.pie-marca p{margin-top:.7rem;max-width:34ch}
.pie-marca .pie-empresa{margin-top:.6rem;font-size:.85rem;color:var(--claro-3)}
.pie-empresa b{color:var(--claro-2)}
.pie-legal{padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.84rem}

.aviso-proto{background:var(--marca-honda);color:#fff;font-size:.84rem;text-align:center;
  padding:.55rem 1rem;font-weight:500;position:relative;z-index:70}
.aviso-proto b{font-weight:700}


/* ── 8 · secciones, en el orden de la página ────────────────────────────── */

/* 8.1 · héroe ──────────────────────────────────────────────────────────── */
/* ⚠ El héroe NO mide una pantalla. Con `min-height:100svh` dejaba 165px arriba
   y abajo a 1440×900 y 255px a 1920×1080: aire que no decía nada y empujaba
   la franja de hechos fuera de la primera vista. Ahora mide su contenido más un
   relleno que sigue al ALTO de la pantalla, y la franja asoma abajo. */
.heroe-rej{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:stretch;padding-block:clamp(2.2rem,7vh,4.5rem)}
/* rótulo en bloque: en línea, su caja de línea lo bajaba 6px y el mapa ya no
   partía a su altura */
.heroe .kicker{display:block}
.heroe h1{margin-bottom:1rem;font-size:clamp(2.4rem,5.2vw,4.4rem)}
.heroe h1 .res{color:var(--marca);display:inline-block}
.heroe .bajada{font-size:clamp(1.05rem,1.9vw,1.24rem);max-width:40ch}
.chip-precio{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.9rem;
  padding:.62rem 1.1rem;border-radius:99px;background:rgba(255,255,255,.07);
  border:1px solid var(--linea-n);font-size:.93rem;color:var(--claro-2)}
.chip-precio b{color:#fff;font-size:1.14rem;font-weight:700;letter-spacing:-.01em}
.chip-det::before{content:'·';margin-right:.5rem}   /* el hueco lo pone el `gap`, no un espacio */
/* entre tableta y escritorio chico la columna de texto necesita más ancho:
   con 1fr/1.08fr, a 1024px el título partía en tres líneas y los botones se
   apilaban */
@media(max-width:1180px){
  .heroe-rej{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
  .heroe .btn-lg{padding-inline:1.45rem}
}
@media(max-width:900px){
  .heroe-rej{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .heroe .bajada{max-width:100%}
}
/* en un teléfono: los dos botones del mismo ancho, y el chip sin partirse feo */
@media(max-width:560px){
  .heroe .acciones .btn{flex:1 1 100%}
  /* dos líneas limpias —precio arriba, qué incluye abajo— en vez de un corte
     a mitad de frase */
  .chip-precio{flex-wrap:wrap;border-radius:16px;padding:.6rem 1rem;gap:.1rem .4rem}
  .chip-det{flex-basis:100%;padding-left:.95rem;font-size:.86rem;color:var(--claro-3)}
  .chip-det::before{content:none}
}

/* LA HUELLA: un cometa, no una línea que se dibuja. La foto YA tiene estelas
   rojas; lo que falta es el vehículo, así que viaja un segmento corto —90 de
   1000, gracias a `pathLength`— con la cabeza blanca, lo único que destaca
   sobre rojo. */
.huella{stroke-dasharray:90 1000;stroke-dashoffset:1000;
  animation:cometa 6.5s cubic-bezier(.55,0,.45,1) infinite}
@keyframes cometa{0%{stroke-dashoffset:1090;opacity:0}8%{opacity:1}88%{opacity:1}
  100%{stroke-dashoffset:0;opacity:0}}
.huella-punto{offset-path:path('M 1490 1300 C 1540 1150, 1760 1060, 1790 930 C 1815 830, 1700 740, 1620 660 C 1590 625, 1596 590, 1600 560');
  offset-rotate:0deg;animation:avanzar 6.5s cubic-bezier(.55,0,.45,1) infinite}
@keyframes avanzar{0%{offset-distance:0%;opacity:0}8%{opacity:1}88%{opacity:1}
  100%{offset-distance:100%;opacity:0}}

/* el mapa vivo (mapa-vivo.js) */
/* ⚠ En dos columnas el mapa toma el ALTO del bloque de texto (la rejilla
   estira y el mapa llena): arriba parte con el rótulo y abajo termina con el
   chip de precio. Con proporción fija quedaba 67px más bajo que el texto. En
   una columna vuelve a su proporción. */
.mapa-vivo{position:relative;height:100%;min-height:380px;width:100%;
  border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.16);
  background:#0C1220;box-shadow:0 40px 90px -35px rgba(0,0,0,.95)}
/* ⚠ Este bloque va DESPUÉS de `.mapa-vivo`: dentro del @media del héroe, más
   arriba en el archivo, la regla de alto de acá le ganaba y en el teléfono el
   mapa salía con 380px fijos. */
@media(max-width:900px){
  .mapa-vivo{height:auto;min-height:0;aspect-ratio:4/3;max-height:460px}
}
.mapa-lienzo{position:absolute;inset:0}
.mapa-tarjeta{position:absolute;top:12px;left:12px;z-index:3;pointer-events:none;
  background:rgba(8,13,30,.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);padding:.5rem .62rem;width:206px;box-shadow:0 16px 40px -16px rgba(0,0,0,.95)}
.mt-cab{display:flex;align-items:center;gap:.35rem;padding-bottom:.35rem;margin-bottom:.4rem;
  border-bottom:1px solid rgba(255,255,255,.13)}
.mt-cab b{color:#fff;font-size:.76rem;font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em}
.mt-vivo{margin-left:auto;font-size:.52rem;letter-spacing:.12em;color:var(--marca);
  border:1px solid rgba(255,35,70,.5);border-radius:99px;padding:.06rem .3rem}
.mt-calle{color:#fff;font-size:.78rem;font-weight:600;line-height:1.25;margin-bottom:.45rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-rej{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .6rem}
.mt-rej > div{display:flex;flex-direction:column;line-height:1.25}
.mt-rej span{color:var(--claro-3);font-size:.6rem;letter-spacing:.04em;text-transform:uppercase}
.mt-rej b{color:#fff;font-size:.76rem;font-variant-numeric:tabular-nums;font-weight:600}
.mt-rej .ok{color:#6EE7A8}
.mt-rej i{font-style:normal}
/* ⚠ El contenedor mide 0×0 y está en el punto exacto del vehículo: el punto se
   centra sobre él y la etiqueta —patente arriba, dato debajo— se ancla a su
   derecha, o a su izquierda con `.al-reves`. Así voltear no mueve el punto. */
.mapa-punto{position:absolute;width:0;height:0;white-space:nowrap}
.mapa-punto .mp-etq{position:absolute;left:14px;top:0;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.mapa-punto.al-reves .mp-etq{left:auto;right:14px;align-items:flex-end}
.mapa-punto i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:99px;
  background:var(--marca);border:3px solid #fff;flex:none;box-shadow:0 2px 10px rgba(0,0,0,.7)}
.mapa-punto i::after{content:'';position:absolute;inset:-3px;border-radius:99px;
  background:var(--marca);animation:latir-punto 1.8s ease-out infinite;z-index:-1}
@keyframes latir-punto{0%{transform:scale(.9);opacity:.6}100%{transform:scale(3.2);opacity:0}}
.mapa-punto b{background:rgba(8,13,30,.92);color:#fff;font-size:.66rem;
  font-family:ui-monospace,Menlo,monospace;letter-spacing:.03em;padding:.15rem .4rem;
  border-radius:5px;border:1px solid rgba(255,255,255,.22);box-shadow:0 4px 12px rgba(0,0,0,.6)}
/* el dato que cambia, pegado al punto: velocidad, y en el corte, el estado */
.mapa-punto .mp-dato{padding:.15rem .45rem;border-radius:5px;white-space:nowrap;
  font-size:.66rem;font-weight:600;font-variant-numeric:tabular-nums;color:#fff;
  background:rgba(8,13,30,.92);border:1px solid rgba(255,255,255,.22);box-shadow:0 4px 12px rgba(0,0,0,.6);
  transition:background .25s,border-color .25s}
.mapa-punto .mp-dato.corte{background:#B42335;border-color:#FF6B80}
.mapa-punto .mp-dato.ok{background:#146C37;border-color:#6EE7A8}
/* motor cortado: el punto se apaga y lo rodea un anillo rojo que late rápido */
.mapa-punto.cortado i{background:#5A6183}
.mapa-punto.cortado i::after{animation-duration:.9s}
.mapa-tarjeta .mt-rej .corte{color:#FF8A9A}
.mt-lugar{display:flex;align-items:center;gap:.25rem;margin:-.1rem 0 .15rem;font-size:.6rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--claro-2)}
.mt-lugar .ic{width:.8rem;height:.8rem;color:var(--marca)}
/* el aviso del evento: sobre la franja legal de Google, sin taparla */
.mapa-evento{position:absolute;left:12px;right:12px;bottom:34px;z-index:3;display:flex;align-items:center;gap:.6rem;
  padding:.55rem .75rem;border-radius:12px;pointer-events:none;color:#fff;font-size:.78rem;line-height:1.3;
  background:rgba(8,13,30,.94);border:1px solid rgba(255,255,255,.2);box-shadow:0 14px 30px -14px rgba(0,0,0,.9);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s,border-color .35s}
.mapa-evento.vis{opacity:1;transform:none}
.mapa-evento .ic{width:1.2rem;height:1.2rem;flex:none}
.mapa-evento b{display:block;font-weight:600}
.mapa-evento span{display:block;color:var(--claro-2)}
.mapa-evento.corte{border-color:rgba(255,35,70,.65)} .mapa-evento.corte .ic{color:var(--marca)}
.mapa-evento.ok{border-color:rgba(110,231,168,.6)} .mapa-evento.ok .ic{color:#6EE7A8}
/* el cambio de ciudad: fundido corto del mapa, la tarjeta se queda */
.mapa-lienzo{transition:opacity .45s ease}
.mapa-vivo.cambiando .mapa-lienzo{opacity:0}
/* ⚠ en el teléfono el mapa medía 345×260 y la tarjeta y el aviso lo tapaban casi
   entero, con el vehículo pasando por detrás de la tarjeta: mapa cuadrado,
   tarjeta con lo esencial (velocidad y motor) y aviso de una línea. El encuadre
   de la ruta deja libre el alto de la tarjeta (mapa-vivo.js). */
@media(max-width:560px){
  .mapa-vivo{aspect-ratio:1/1;max-height:none}
  .mapa-tarjeta{width:164px;padding:.4rem .5rem}
  .mapa-tarjeta .mt-calle,.mapa-tarjeta .mt-rej > div:nth-child(2),.mapa-tarjeta .mt-rej > div:nth-child(4){display:none}
  /* el aviso sube a la esquina de arriba, al lado de la tarjeta: abajo tapaba la
     etiqueta del vehículo, y esquivarlo con margen achicaba el circuito */
  .mapa-evento{left:auto;right:8px;top:12px;bottom:auto;width:calc(100% - 164px - 28px);
    padding:.4rem .55rem;font-size:.72rem;gap:.4rem;transform:translateY(-6px)}
  .mapa-evento .ic{width:1rem;height:1rem}
  .mapa-evento span{display:none}
}
/* ⚠ Sin llave o sin ruta, SE DICE: un mapa que no carga y no avisa es la
   familia de defecto de ADR-009. */
.mapa-falta{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:1.6rem;background:repeating-linear-gradient(45deg,#0E1524 0 10px,#111A2C 10px 20px)}
.mapa-falta b{display:block;color:#fff;font-size:.95rem;margin-bottom:.3rem}
.mapa-falta span{color:var(--claro-3);font-size:.85rem;line-height:1.5;max-width:34ch}

/* 8.2 · hechos: la franja que separa el héroe del resto ───────────────── */
/* .78 y no más transparente: con el héroe más bajo, el cometa de la huella
   cruzaba por detrás de la franja y se leía como una mancha sobre el filete */
.hechos{border-block:1px solid var(--linea-n);background:rgba(4,8,26,.78);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hechos-rej{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:1.7rem}
.hecho{display:flex;gap:.9rem;align-items:flex-start;padding:.2rem 1.3rem}
.hecho:first-child{padding-left:0}
.hecho + .hecho{border-left:1px solid var(--linea-n)}
.hecho-ic{width:2.6rem;height:2.6rem;border-radius:12px;display:grid;place-items:center;flex:none;
  background:rgba(255,35,70,.14);color:var(--marca)}
.hecho-ic .ic{width:1.3rem;height:1.3rem;vertical-align:0}
.hecho-txt{font-size:.88rem;line-height:1.45;color:var(--claro-2)}
.hecho-txt b{display:block;color:#fff;font-size:.98rem;font-weight:600;margin-bottom:.15rem}
/* dos columnas bajo 1100px: a 1024 las cuatro partían «Factura electrónica»
   en dos líneas y el texto en tres */
@media(max-width:1100px){
  .hechos-rej{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.4rem}
  .hecho:nth-child(odd){padding-left:0;border-left:0}
}
@media(max-width:560px){
  .hechos-rej{grid-template-columns:minmax(0,1fr);row-gap:1.1rem}
  .hecho,.hecho + .hecho{padding-left:0;border-left:0}
}

/* 8.2b · experiencia: cifras del dueño y sectores que rotan ────────────── */
.exp-cab{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.8rem,5vw,4rem);
  align-items:end}
@media(max-width:900px){.exp-cab{grid-template-columns:minmax(0,1fr)}}
.cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin:0}
.cifras > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:1.2rem 1.25rem;
  border-radius:var(--r-lg);background:rgba(255,255,255,.045);border:1px solid var(--linea-n)}
.cifras dd{margin:0;font-size:clamp(2.3rem,4.6vw,3.3rem);font-weight:700;color:#fff;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cifras dd span{color:var(--marca);margin-right:.04em}
.cifras dt{margin-top:.55rem;font-size:.86rem;line-height:1.4;color:var(--claro-2)}
@media(max-width:460px){.cifras > div{padding:1rem}.cifras dt{font-size:.8rem}}

.sectores{margin-top:clamp(2rem,4vw,2.8rem);border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--linea-n);background:rgba(4,8,26,.62)}
.sectores-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--linea-n)}
.sectores-tabs button{position:relative;font:inherit;font-size:.92rem;font-weight:600;color:var(--claro-2);
  background:transparent;border:0;min-height:58px;padding:.8rem 1rem;display:flex;align-items:center;
  justify-content:center;gap:.55rem;cursor:pointer;transition:color .2s,background .2s}
.sectores-tabs button + button{border-left:1px solid var(--linea-n)}
.sectores-tabs button:hover{color:#fff;background:rgba(255,255,255,.04)}
.sectores-tabs button[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.07)}
.sectores-tabs button:focus-visible{outline:2.5px solid var(--marca);outline-offset:-4px}
.sectores-tabs .ic{color:var(--marca)}
/* la línea roja bajo la pestaña activa: se completa mientras dura el sector
   (la escala la pone sitio.js) y al llegar al final pasa al siguiente */
.sectores-avance{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--marca);
  transform-origin:left;transform:scaleX(var(--avance,0));box-shadow:0 0 10px rgba(255,35,70,.55)}
.sectores-tabs button[aria-selected="false"] .sectores-avance{opacity:0}
/* en el teléfono, una fila que se desliza —y que sitio.js desplaza sola hasta la
   pestaña activa—; en 2×2 «Transporte escolar» partía en dos líneas */
@media(max-width:760px){
  .sectores-tabs{display:flex;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .sectores-tabs::-webkit-scrollbar{display:none}
  .sectores-tabs button{flex:none;white-space:nowrap;font-size:.88rem;padding:.7rem 1.1rem}
}
/* ⚠ Los cuatro paneles ocupan la MISMA celda de la rejilla: la caja mide lo
   que el más alto, y cambiar de sector no hace saltar la página. */
.sectores-paneles{display:grid}
.sector{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.sector.act{opacity:1;visibility:visible;transition:opacity .6s ease}
.sector-foto{display:block;position:relative;overflow:hidden;min-height:340px}
.sector-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sector.act .sector-foto img{animation:acercar 9s ease-out both}
@keyframes acercar{from{transform:scale(1.07)}to{transform:scale(1)}}
.sector-txt{padding:clamp(1.5rem,4vw,2.6rem);align-self:center}
.sector-txt h3{font-size:clamp(1.4rem,2.6vw,1.95rem)}
.sector-txt p{color:var(--claro-2);margin-top:.7rem}
.sector-txt ul{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.55rem}
.sector-txt li{display:flex;gap:.55rem;align-items:flex-start;font-size:.93rem;line-height:1.45;color:var(--claro-2)}
.sector-txt li svg{width:1.1rem;height:1.1rem;color:var(--marca);flex:none;margin-top:.2em}
@media(max-width:760px){
  .sector{grid-template-columns:minmax(0,1fr);align-content:start}
  .sector-foto{min-height:0;aspect-ratio:16/10}
  /* arriba y no centrado: la celda mide lo que el panel más alto, y centrado
     dejaba un hueco entre la foto y el texto de los paneles cortos */
  .sector-txt{align-self:start}
}

/* 8.3 · cómo se compra: siete pasos que avanzan solos ──────────────────── */
.pasos{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.6rem,4vw,3.6rem);
  align-items:center;margin-top:2.4rem}
@media(max-width:900px){.pasos{grid-template-columns:minmax(0,1fr)} .pasos-pantalla{order:-1}}

/* la lista: los pasos unidos por una ruta que se llena de rojo hasta el actual
   (`--progreso` lo pone sitio.js), y bajo el paso activo su línea de avance */
.pasos-lista{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:.1rem;--progreso:0}
.pasos-lista::before,.pasos-lista::after{content:'';position:absolute;left:calc(.75rem + 1.2rem - 1px);
  top:1.75rem;width:2px;border-radius:2px}
.pasos-lista::before{bottom:1.75rem;background:var(--linea-n)}
.pasos-lista::after{height:calc((100% - 3.5rem) * var(--progreso));background:var(--marca);
  box-shadow:0 0 10px rgba(255,35,70,.5)}
.pasos-lista button{position:relative;width:100%;display:flex;gap:.9rem;align-items:flex-start;text-align:left;
  font:inherit;color:var(--claro-2);background:transparent;border:0;border-radius:14px;padding:.55rem .75rem;
  min-height:48px;cursor:pointer;transition:background .2s}
.pasos-lista button:hover{background:rgba(255,255,255,.04)}
.pasos-lista button[aria-selected="true"]{background:rgba(255,255,255,.06)}
.pasos-lista button:focus-visible{outline:2.5px solid var(--marca);outline-offset:-3px}
.paso-n{position:relative;z-index:1;flex:none;width:2.4rem;height:2.4rem;border-radius:99px;display:grid;
  place-items:center;font-weight:700;font-size:.92rem;color:var(--claro-2);background:var(--noche);
  border:2px solid rgba(255,255,255,.2);transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.pasos-lista button[data-estado="hecho"] .paso-n{border-color:var(--marca);color:#fff}
.pasos-lista button[aria-selected="true"] .paso-n{background:var(--marca-suave);border-color:var(--marca-suave);
  color:#fff;box-shadow:0 0 0 6px rgba(255,35,70,.16)}
.paso-txt{padding-top:.4rem;min-width:0}
.paso-txt b{display:block;color:#fff;font-size:1rem;font-weight:600;line-height:1.3}
/* la descripción sólo se abre en el paso activo: la lista se lee de un vistazo */
.paso-txt > span{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s ease,opacity .35s ease}
.paso-txt > span > span{overflow:hidden;font-size:.88rem;line-height:1.5;color:var(--claro-2)}
.paso-txt > span > span b{display:inline;font-size:inherit;color:#fff}
.pasos-lista button[aria-selected="true"] .paso-txt > span{grid-template-rows:1fr;opacity:1;padding-top:.2rem}
.paso-avance{position:absolute;left:3.9rem;right:.75rem;bottom:0;height:2px;background:var(--marca);
  transform-origin:left;transform:scaleX(var(--avance,0))}
.pasos-lista button[aria-selected="false"] .paso-avance{opacity:0}

/* la pantalla: lo que el cliente ve en cada paso, dibujado y en movimiento */
.pant{background:#fff;border-radius:22px;overflow:hidden;color:var(--texto);
  border:1px solid rgba(255,255,255,.2);box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.pant-cab{display:flex;align-items:center;gap:.7rem;padding:.65rem 1rem;background:#F4F1F3;border-bottom:1px solid #E7E0E4}
.pant-cab .puntos{display:flex;gap:5px}
.pant-cab .puntos i{width:9px;height:9px;border-radius:99px;background:#D9D0D5}
.pant-cab img{display:block;height:26px;width:auto}
.pant-paso{margin-left:auto;font-size:.76rem;font-weight:600;color:var(--suave)}
.pant-paso b{color:var(--navy)}
/* ⚠ `minmax(0,1fr)` en las dos grillas: sin él la columna toma el ancho del
   contenido (las maquetas miden hasta 360 px) y en un teléfono se salían por
   la derecha, con «Calculado» y «Enviar» cortados. */
.pant-cuerpo{display:grid;grid-template-columns:minmax(0,1fr);min-height:370px}
.pant-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:1.4rem;opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s}
.pant-panel.act{opacity:1;visibility:visible;transition:opacity .45s ease}

/* piezas de la maqueta — todas son dibujo (aria-hidden): el texto real está en la lista */
.ui{position:relative;width:min(100%,360px);display:grid;gap:.55rem;font-size:.88rem;color:var(--navy)}
.ui .ic{width:1.1em;height:1.1em}
.ui-tit{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:1rem;margin-bottom:.15rem}
.ui-tit .ic{color:var(--marca-suave)}
.ui-fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .75rem;
  border:1px solid #E7E0E4;border-radius:10px;background:#FBFAFA}
.ui-fila > span:first-child{color:var(--texto)}
.ui-contador{display:flex;align-items:center;gap:.5rem}
.ui-contador i{font-style:normal;width:22px;height:22px;border-radius:6px;border:1px solid #D9D0D5;
  display:grid;place-items:center;color:var(--suave);line-height:1}
.ui-sw{position:relative;flex:none;width:36px;height:20px;border-radius:99px;background:#D9D0D5}
.ui-sw::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:99px;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ui-sw.on{background:var(--marca-suave)} .ui-sw.on::after{left:18px}
.act .ui-sw.anima{animation:ui-sw-fondo 6s ease both} .act .ui-sw.anima::after{animation:ui-sw-bola 6s ease both}
@keyframes ui-sw-fondo{0%,22%{background:#D9D0D5}30%,100%{background:var(--marca-suave)}}
@keyframes ui-sw-bola{0%,22%{left:2px}30%,100%{left:18px}}
.ui-select{font-weight:600;padding:.12rem .5rem;border-radius:6px;background:#fff;border:1px solid #D9D0D5}
.ui-total{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;border-radius:10px;
  background:var(--navy);color:#fff;font-weight:600}
.ui-listo{display:inline-flex;align-items:center;gap:.3rem;color:#fff;opacity:0}
.act .ui-listo{animation:ui-aparecer .35s ease 2s forwards}

.ui-campo{display:grid;gap:.2rem}
.ui-campo span{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--suave)}
.ui-campo i{position:relative;display:block;height:34px;border-radius:8px;border:1px solid #D9D0D5;background:#fff;overflow:hidden}
.ui-campo i::after{content:'';position:absolute;left:.65rem;top:50%;height:8px;margin-top:-4px;width:0;
  border-radius:4px;background:#C4B8BF}
.act .ui-campo i::after{animation:ui-escribir .9s steps(10,end) forwards;animation-delay:var(--d,0s)}
@keyframes ui-escribir{to{width:var(--w,60%)}}
.ui-check{display:flex;align-items:center;gap:.5rem;color:var(--texto)}
.ui-caja{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;border:2px solid #C4B8BF;flex:none}
.ui-caja .ic{width:12px;height:12px;color:#fff;opacity:0}
.act .ui-caja{animation:ui-marcar .25s ease 2.8s forwards} .act .ui-caja .ic{animation:ui-aparecer .2s ease 2.9s forwards}
@keyframes ui-marcar{to{background:var(--marca-suave);border-color:var(--marca-suave)}}
.ui-enviar{justify-self:end;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:99px;
  background:var(--marca-suave);color:#fff;font-weight:600}
.act .ui-enviar{animation:ui-pulso .5s ease 3.4s 2}
@keyframes ui-pulso{50%{transform:scale(1.08)}}

.ui-comprar{gap:.8rem}
.ui-web{border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#0C1330,#060B1C)}
.ui-web-barra{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem}
.ui-web-barra img{display:block;height:24px;width:auto}
.ui-web-barra .links{display:flex;gap:6px;margin-left:auto}
.ui-web-barra .links i{width:20px;height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.ui-web-comprar{position:relative;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;
  border-radius:99px;background:var(--marca-suave);color:#fff;font-weight:600;font-size:.8rem}
.ui-web-comprar::after{content:'';position:absolute;inset:0;border-radius:99px;box-shadow:0 0 0 0 rgba(255,35,70,.6)}
.act .ui-web-comprar{animation:ui-presionar .3s ease 1.6s}
.act .ui-web-comprar::after{animation:ui-onda-btn .9s ease-out 1.7s}
@keyframes ui-presionar{50%{transform:scale(.9)}}
@keyframes ui-onda-btn{to{box-shadow:0 0 0 16px rgba(255,35,70,0)}}
.ui-web-heroe{display:grid;gap:.45rem;padding:1rem .9rem 1.4rem}
.ui-web-heroe i{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.22)}
.ui-cursor{position:absolute;z-index:2;width:26px;height:26px;left:22%;top:62%;fill:#fff;stroke:var(--navy);
  stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.act .ui-cursor{animation:ui-cursor 1.6s cubic-bezier(.5,0,.3,1) .1s forwards}
@keyframes ui-cursor{to{left:calc(100% - 3.1rem);top:1.55rem}}
.ui-llegada{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:12px;
  border:1px solid #E7E0E4;background:#FBFAFA;opacity:0}
.act .ui-llegada{animation:ui-subir .4s ease 2.3s forwards}
.ui-llegada > .ic{width:1.7rem;height:1.7rem;color:var(--marca-suave);flex:none}
.ui-llegada b{display:block} .ui-llegada span{font-size:.8rem;color:var(--suave)}

.ui-llamada{justify-items:center;text-align:center;gap:.3rem;width:min(100%,280px);padding:1.6rem 1.2rem;
  border-radius:22px;color:#fff;background:linear-gradient(180deg,#0C1330,#060B1C)}
.ui-avatar{position:relative;display:grid;place-items:center;width:78px;height:78px;margin-bottom:.5rem;
  border-radius:99px;background:rgba(255,35,70,.18);color:var(--marca)}
.ui-avatar .ic{width:34px;height:34px}
.ui-avatar .onda{position:absolute;inset:0;border-radius:99px;border:2px solid rgba(255,35,70,.5)}
.act .ui-avatar .onda{animation:ui-onda 1.8s ease-out infinite} .act .ui-avatar .o2{animation-delay:.9s}
@keyframes ui-onda{from{transform:scale(1);opacity:.8}to{transform:scale(1.75);opacity:0}}
.ui-llamada b{font-size:1rem}
.ui-llamada .ui-sub{font-size:.85rem;color:var(--claro-2)}
.ui-botones{display:flex;gap:2.6rem;margin-top:1rem}
.ui-botones span{display:grid;place-items:center;width:48px;height:48px;border-radius:99px;color:#fff}
.ui-botones .ic{width:22px;height:22px}
.ui-colgar{background:#B42335} .ui-colgar .ic{transform:rotate(135deg)}
.ui-contestar{background:#15803d}
.act .ui-contestar{animation:ui-vibrar 1.2s ease-in-out infinite}
@keyframes ui-vibrar{0%,55%,100%{transform:rotate(0)}10%,30%{transform:rotate(-12deg)}20%,40%{transform:rotate(12deg)}}

.ui-lin{display:flex;align-items:center;justify-content:space-between;padding:.45rem 0;border-bottom:1px dashed #E1D9DD;color:var(--texto)}
.ui-lin i{width:56px;height:8px;border-radius:4px;background:#E1D9DD}
.act .ui-lin{animation:ui-subir .4s ease both;animation-delay:var(--d,0s)}
.ui-sello{justify-self:start;display:inline-flex;align-items:center;gap:.4rem;margin-top:.45rem;padding:.35rem .8rem;
  border-radius:99px;border:2px solid #15803d;color:#15803d;font-weight:700;opacity:0;transform:scale(1.6) rotate(-8deg)}
.act .ui-sello{animation:ui-sellar .45s cubic-bezier(.3,1.6,.5,1) 1.7s forwards}
@keyframes ui-sellar{to{opacity:1;transform:scale(1) rotate(-4deg)}}
.ui-aviso{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--suave);opacity:0}
.ui-aviso .ic{color:var(--marca-suave)}
.act .ui-aviso{animation:ui-aparecer .4s ease 2.7s forwards}

.ui-pago{justify-items:center}
.ui-tarjeta{display:flex;flex-direction:column;justify-content:space-between;width:min(100%,290px);aspect-ratio:1.6;
  padding:1rem;border-radius:14px;color:#fff;background:linear-gradient(135deg,#1B2A6B,#000C3F);
  box-shadow:0 14px 30px -14px rgba(0,12,63,.6)}
.ui-tarjeta .chip{width:34px;height:24px;border-radius:5px;background:linear-gradient(135deg,#E9C46A,#B8913A)}
.ui-tarjeta .num{font-family:ui-monospace,Menlo,monospace;font-size:.95rem;letter-spacing:.08em}
.ui-tarjeta .tbk{align-self:flex-end;font-size:.72rem;color:rgba(255,255,255,.85)}
.ui-progreso{width:min(100%,290px);height:6px;border-radius:99px;background:#EDE7EA;overflow:hidden}
.ui-progreso i{display:block;width:0;height:100%;background:var(--marca-suave)}
.act .ui-progreso i{animation:ui-llenar 1.8s ease .4s forwards}
@keyframes ui-llenar{to{width:100%}}
.ui-ok{display:flex;align-items:center;gap:.45rem;font-weight:700;color:#15803d;opacity:0}
.act .ui-ok{animation:ui-aparecer .35s ease 2.3s forwards}
.ui-pago .ui-sub{display:flex;align-items:center;gap:.45rem;color:var(--suave);opacity:0}
.act .ui-pago .ui-sub{animation:ui-aparecer .35s ease 2.9s forwards}

.ui-inst{justify-items:center;text-align:center}
.ui-reloj{position:relative;display:grid;place-items:center;width:132px;height:132px}
.ui-reloj svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ui-reloj circle{fill:none;stroke-width:9}
.ui-reloj .fondo{stroke:#EDE7EA}
.ui-reloj .lleno{stroke:var(--marca-suave);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.act .ui-reloj .lleno{animation:ui-reloj 3.2s ease forwards}
@keyframes ui-reloj{to{stroke-dashoffset:0}}
.ui-reloj b{display:block;font-size:1.45rem;line-height:1.05}
.ui-reloj small{display:block;font-size:.7rem;color:var(--suave)}
.ui-ruta{position:relative;width:min(100%,300px);height:40px;margin:.3rem 0}
.ui-ruta .tramo{position:absolute;left:8%;right:10%;top:50%;height:3px;margin-top:-1.5px;
  background:repeating-linear-gradient(90deg,#D9D0D5 0 8px,transparent 8px 14px)}
.ui-ruta .camion{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--navy)}
.act .ui-ruta .camion{animation:ui-llegar 3.2s ease-in-out forwards}
@keyframes ui-llegar{to{left:calc(90% - 1.6rem)}}
.ui-ruta .pin{position:absolute;right:0;top:50%;transform:translateY(-60%);color:var(--marca-suave)}
.ui-ruta .ic{width:1.6rem;height:1.6rem}
.ui-inst .ui-ok{justify-content:center}
.act .ui-inst .ui-ok{animation-delay:3.3s}

@keyframes ui-aparecer{to{opacity:1}}
@keyframes ui-subir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#como .acciones{margin-top:2.2rem}

/* 8.4 · la instalación ───────────────────────────────────────────────────
   ⚠ Dos columnas PAREJAS: a la izquierda título y foto, a la derecha las dos
   vías y las modalidades. Antes todo el texto iba en una columna junto a una
   foto chica, y la columna quedaba el doble de alta que la imagen. */
.instala-rej{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.instala-rej{grid-template-columns:minmax(0,1fr)}}
.instala-foto{margin:1.8rem 0 0}
.instala-foto picture{display:block;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -40px #000}
/* ⚠ `height:auto` no es redundante: sin él manda el atributo height="1050" y
   la foto sale del doble de alto, ignorando el `aspect-ratio`. */
.instala-foto img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}

/* las dos vías: parejas y sin jerarquía — el visitante elige */
.instala-vias{display:grid;gap:.9rem}
.via{display:flex;gap:1rem;align-items:flex-start;background:rgba(255,255,255,.045);
  border:1px solid var(--linea-n);border-radius:var(--r-lg);padding:1.2rem 1.25rem;
  transition:background .16s,border-color .16s}
.via:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2)}
.via .ic-chip{margin:0;width:2.8rem;height:2.8rem}
.via b{color:#fff;font-size:1rem;display:block;line-height:1.3}
.via p{color:var(--claro-2);font-size:.9rem;line-height:1.5;margin:.3rem 0 0}
.via p b{display:inline;font-size:inherit}
.eti-inst{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marca);margin-bottom:.35rem}
.enlace-inst{display:inline-block;margin-top:.55rem;font-size:.83rem;color:var(--marca);
  border-bottom:1px solid rgba(255,35,70,.35);padding-bottom:1px}
.enlace-inst:hover{color:#fff;border-bottom-color:#fff}

.modalidades{padding:1.2rem 1.25rem;border-radius:var(--r-lg);
  background:rgba(255,35,70,.09);border:1px solid rgba(255,35,70,.28)}
.modalidades-tit{color:#fff;display:block;font-size:1rem}
.modalidades-rej{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-top:.8rem}
.modalidades-rej p{color:var(--claro-2);font-size:.88rem;line-height:1.5;margin:0}
.modalidades-rej p b{color:#fff}
.modalidades-pie{font-size:.84rem;color:var(--claro-3);margin:.9rem 0 0;padding-top:.75rem;
  border-top:1px solid rgba(255,35,70,.2)}
@media(max-width:460px){.modalidades-rej{grid-template-columns:minmax(0,1fr)}}

/* 8.5 · el servicio ──────────────────────────────────────────────────── */
.sub-grupo{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--suave);margin:2.4rem 0 1rem}
.sub-grupo:first-of-type{margin-top:2.6rem}

/* incluido: tarjeta con un mapa de verdad arriba (mapas-servicio.js)
   ⚠ Google Maps y no un dibujo: la retícula dibujada que hubo acá el dueño la
   rechazó por genérica — le quitaba seriedad a un producto que ES un mapa. */
.capacidad{padding:0;overflow:hidden;display:flex;flex-direction:column}
.capacidad-cpo{padding:1.15rem 1.4rem 1.4rem}
.vineta{position:relative;height:170px;overflow:hidden;border-bottom:1px solid var(--linea);
  background:#EDE7EA}
/* la ciudad que muestra la tarjeta: rota como en el mapa del héroe (mapas-servicio.js) */
.vineta-ciudad{position:absolute;top:8px;left:8px;z-index:3;padding:.12rem .55rem;border-radius:99px;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;color:var(--navy);background:rgba(255,255,255,.94);
  box-shadow:0 2px 8px rgba(0,12,63,.18);pointer-events:none;transition:opacity .42s ease}
.vineta.cambiando .mapa-lienzo,.vineta.cambiando .vineta-ciudad,.vineta.cambiando .mapa-aviso{opacity:0}
.vineta .mapa-falta{background:repeating-linear-gradient(45deg,#EDE6EA 0 10px,#E6DEE2 10px 20px)}
.vineta .mapa-falta b{color:var(--tinta)}
.vineta .mapa-falta span{color:var(--suave);font-size:.8rem}
/* las paradas del historial: aparecen al alcanzarlas, con su hora */
.marca-parada{position:absolute;display:flex;align-items:center;gap:4px;white-space:nowrap;
  opacity:0;transition:opacity .3s}
.marca-parada.vista{opacity:1}
.marca-parada i{width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:99px;background:#fff;
  border:3px solid var(--navy);flex:none}
.marca-parada i.fin{background:var(--marca);border-color:#fff;box-shadow:0 1px 5px rgba(0,12,63,.4)}
.marca-parada b{margin-top:-6px;font-size:10px;font-weight:600;color:var(--navy);
  background:rgba(255,255,255,.94);padding:1px 5px;border-radius:5px;box-shadow:0 2px 6px rgba(0,12,63,.18)}
/* el aviso de la alerta */
.mapa-aviso{position:absolute;top:10px;right:10px;z-index:3;display:flex;gap:.5rem;align-items:center;
  padding:.42rem .7rem .42rem .6rem;border-radius:11px;background:#fff;border:1px solid var(--linea);
  box-shadow:0 8px 20px -8px rgba(0,12,63,.35);pointer-events:none;
  opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s}
.mapa-aviso.vis{opacity:1;transform:none}
.mapa-aviso i{width:9px;height:9px;border-radius:99px;background:var(--marca);flex:none;
  box-shadow:0 0 0 4px rgba(255,35,70,.18)}
.mapa-aviso b{display:block;font-size:.74rem;color:var(--tinta);line-height:1.2}
.mapa-aviso span{display:block;font-size:.66rem;color:var(--suave);line-height:1.25}

/* se suman aparte: icono de apoyo y la etiqueta que lo dice */
.opcional{position:relative}
.opcional-eti{position:absolute;top:1.2rem;right:1.1rem;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--marca-texto);background:var(--marca-tenue);
  padding:.18rem .55rem;border-radius:99px}
.opcional:hover{border-color:rgba(224,15,53,.45)}
.opcional:hover .ic-chip{background:var(--marca-suave);color:#fff}

/* 8.6 · para quién ───────────────────────────────────────────────────── */

/* 8.7 · cobertura ────────────────────────────────────────────────────── */
.cob-caja{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r-xl);
  padding:1.8rem 2rem;display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:2.2rem}
@media(max-width:760px){
  .cob-caja{grid-template-columns:minmax(0,1fr);padding:1.3rem;gap:1.6rem}
  .cob-mapa svg{height:min(46vh,380px)}
}
/* ⚠ El mapa se dimensiona por ALTO: Chile es 1 de ancho por 4 de alto, y por
   ancho una columna de 240px lo vuelve 920px de alto. */
.cob-mapa svg{height:min(58vh,520px);width:auto;max-width:100%;display:block;margin:0 auto;overflow:visible}
/* ⚠ El clic NO lo recibe ninguna capa: lo resuelve sitio.js por geometría
   (relleno primero, región más cercana después). `.toque` queda sólo para el
   foco del teclado, sin eventos de puntero —su trazo grueso tapaba a la región
   vecina y se llevaba el clic—. `.cerca` es el resaltado de esa misma regla. */
.cob-mapa .reg{fill:#D3C6CC;stroke:#fff;stroke-width:1.5;transition:fill .18s}
.cob-mapa .reg.cerca{fill:#EE93A3}
.cob-mapa .reg.act{fill:var(--marca)}
.cob-mapa svg.apunta{cursor:pointer}
.cob-mapa .toque{fill:transparent;stroke:transparent;stroke-width:26;pointer-events:none}
/* ⚠ EL CUADRO NEGRO: un <path> con tabindex recibe foco al hacer clic y el
   navegador le pinta su contorno sobre la caja envolvente. Se apaga el del
   clic y se conserva el del teclado, que es a quien sirve. */
.cob-mapa .toque:focus,.cob-mapa .reg:focus{outline:none}
.cob-mapa .reg:focus-visible,.cob-mapa .toque:focus-visible{outline:2.5px solid var(--marca);outline-offset:3px}

.cob-region{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;color:var(--tinta);
  letter-spacing:-.02em;line-height:1.1}
.cob-et{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tenue)}
.cob-plazo{display:flex;gap:1rem;align-items:center;margin:1.1rem 0 1.3rem;padding:1.1rem 1.2rem;
  background:var(--papel);border-radius:var(--r-lg);border:1px solid var(--linea)}
.cob-plazo .ic-chip{margin:0}
.cob-plazo .dato{font-size:clamp(1.5rem,3.2vw,2rem);font-weight:700;color:var(--tinta);
  letter-spacing:-.02em;line-height:1.15;margin-top:.15rem}
.cob-plazo .pie{font-size:.88rem;color:var(--suave);margin-top:.15rem}
.cob-ciudades{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.cob-ciudades span{font-size:.79rem;padding:.25rem .6rem;border-radius:99px;
  background:#fff;border:1px solid var(--linea);color:var(--suave)}
.cob-apartada{font-size:.87rem;color:var(--suave);margin:.9rem 0 0}

/* 8.8 · siempre incluido ─────────────────────────────────────────────── */
.rej-incluido{margin-top:2.4rem}

/* 8.9 · preguntas ────────────────────────────────────────────────────── */
.faq{margin-top:1.8rem}
details{border-bottom:1px solid var(--linea-f);padding:.3rem 0}
details summary{cursor:pointer;list-style:none;padding:1.15rem .4rem;font-weight:600;
  color:var(--tinta);display:flex;gap:1rem;align-items:center;font-size:1.02rem;min-height:48px}
details summary::-webkit-details-marker{display:none}
details summary svg{margin-left:auto;flex:none;width:1.3rem;height:1.3rem;color:var(--marca-suave);
  transition:transform .25s}
details[open] summary svg{transform:rotate(45deg)}
details .cpo{padding:0 .4rem 1.25rem;color:var(--suave);max-width:68ch}

/* 8.10 · precio ──────────────────────────────────────────────────────── */
/* retícula técnica de fondo */
.malla::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 40%,transparent 100%)}
.precio-grande{font-size:clamp(3.6rem,13vw,7.5rem);font-weight:700;letter-spacing:-.045em;
  line-height:.94;color:#fff;font-variant-numeric:tabular-nums}
.precio-grande small{font-size:clamp(1rem,2.4vw,1.5rem);font-weight:600;letter-spacing:-.01em;
  color:var(--claro-3);margin-left:.35rem}
.precio-tit{margin-top:.9rem}
.precio-bajada{margin:1.2rem auto 0}
.precio-bajada b{color:#fff}
.precio-nota{font-size:.88rem;color:var(--claro-3);margin-top:1.4rem}
/* topes del plan Personas: condición, no argumento — letra chica y al final */
.precio-topes{font-size:.76rem;color:var(--claro-3);margin-top:.6rem;opacity:.85}


/* ── selector de público: Personas / Empresas ───────────────────────────
   Flota abajo al centro en todas las páginas. Empresas está deshabilitado
   con «Prox.» hasta que exista su vista. */
.publico{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;display:flex;gap:4px;
  padding:5px;border-radius:99px;background:rgba(6,11,28,.92);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.publico-op{font:inherit;font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:.5rem 1.05rem;border-radius:99px;border:0;background:transparent;
  color:var(--claro-2);white-space:nowrap}
.publico-op.act{background:var(--marca-suave);color:#fff}
.publico-op:disabled{cursor:not-allowed}
.publico-op:focus-visible{outline:2.5px solid #fff;outline-offset:2px}
.publico-prox{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.1rem .42rem;border-radius:99px;border:1px solid rgba(255,255,255,.3);color:var(--claro-2)}
@media(max-width:460px){
  .publico{bottom:12px}
  .publico-op{font-size:.84rem;padding:.45rem .85rem}
}
/* que el selector no tape la última línea del pie */
.pie-sitio{padding-bottom:6.5rem}


/* ── 9 · revelado y movimiento reducido ─────────────────────────────────── */
.rev{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),
  transform .7s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0s)}
.rev.vis{opacity:1;transform:none}

/* ⚠ Quien pide menos movimiento lo recibe TODO quieto y TODO visible: apagar la
   animación no puede esconder contenido. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  .huella,.huella-punto,.latido::after,.mapa-punto i::after,
  .sector.act .sector-foto img{animation:none!important}
  .huella{stroke-dashoffset:0!important}
  .sector,.sector.act,.mapa-aviso,.marca-parada{transition:none}
  .mapa-punto i::after{opacity:0}
  .tramo-velo::before,.tramo-velo::after,.heroe-trazo{transition:none}
  .mapa-evento,.mapa-lienzo,.mapa-punto .mp-dato,.vineta-ciudad{transition:none}
  .pasos-lista::after,.paso-txt > span,.pant-panel{transition:none}
  .pant-panel *,.pant-panel *::after{animation:none!important}
  .ui-listo,.ui-llegada,.ui-sello,.ui-aviso,.ui-ok,.ui-pago .ui-sub,.ui-caja .ic{opacity:1;transform:none}
  .ui-sw.anima{background:var(--marca-suave)} .ui-sw.anima::after{left:18px}
  .ui-caja{background:var(--marca-suave);border-color:var(--marca-suave)}
  .ui-campo i::after{width:var(--w,60%)} .ui-progreso i{width:100%}
  .ui-reloj .lleno{stroke-dashoffset:0} .ui-ruta .camion{left:calc(90% - 1.6rem)}
  .ui-cursor{left:calc(100% - 3.1rem);top:1.55rem}
  .btn:hover,.tarj:hover{transform:none}
}


/* ── 10 · modo edición para presentar (?editar) ──────────────────────────
   ⚠ Herramienta del PROTOTIPO, no del sitio: con `?editar` en la URL todo texto
   se escribe en el navegador. Los cambios viven en esa pestaña; el botón copia
   la lista «antes → después» para pasarlos al archivo. Lo carga `editar.js`. */
.editando [contenteditable="true"] :is(h1,h2,h3,p,li,b,span,summary,a,div):hover{
  outline:1.5px dashed rgba(255,35,70,.55);outline-offset:3px;cursor:text}
.editando .tramo-fondo,.editando #mapa-vivo *{outline:none!important}
.aviso-edicion{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;
  width:max-content;max-width:calc(100% - 32px);padding:.6rem .7rem .6rem 1rem;border-radius:16px;
  background:rgba(6,11,28,.94);color:var(--claro);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 50px -20px #000;font-size:.88rem;backdrop-filter:blur(10px)}
.aviso-edicion b{color:#fff}
.aviso-edicion button,.aviso-edicion a{font:inherit;font-weight:600;font-size:.84rem;cursor:pointer;
  min-height:40px;padding:.45rem .9rem;border-radius:99px;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;display:inline-flex;align-items:center}
.aviso-edicion button.principal{background:var(--marca-suave);border-color:transparent}