/* ===========================================================================
   CEA Quirigua S.A.S. — «EL PATIO DE LAS 6 A. M.»
   Campo azul marino con piezas reales flotando y datos exactos en tiza.
   CSS a mano, sin framework. Solo transform/opacity en todo el motion.
   Firma de motion: ★ LA MANIOBRA (parqueo en paralelo atado al scroll).
   Ornamento: la barra segmentada naranja del propio logo — ESTÁTICA
   (animarla en bucle es la firma de lottus-express y está prohibida aquí).
   =========================================================================== */

/* -------------------- Tipografía self-hosted (subset latin) -------------- */
@font-face{
  font-family:'Geologica'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url(fonts/geologica-latin.woff2?v=20260824c) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(fonts/lora-latin.woff2?v=20260824c) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lora'; font-style:italic; font-weight:400 500; font-display:swap;
  src:url(fonts/lora-latin-italic.woff2?v=20260824c) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ------------------------------ Tokens ---------------------------------- */
:root{
  --navy:#0A2A5E;
  --navy-d:#061A3C;
  --navy-m:#153F7F;
  --naranja:#F26C1B;
  --naranja-l:#FF8A3D;
  /* naranja de TEXTO sobre superficie clara: 5,2:1 sobre --tiza y 4,7:1
     sobre --tiza-2 (el --naranja pelado da 2,8:1 y no pasa AA) */
  --naranja-t:#B0450A;
  --tiza:#F2F5FA;
  --tiza-2:#E2E9F3;
  --blanco:#FBFCFE;
  --tinta:#141A24;
  --tinta-2:#4A5568;

  --disp:'Geologica','Segoe UI',system-ui,-apple-system,sans-serif;
  --txt:'Lora',Georgia,'Times New Roman',serif;

  --maxw:min(92vw,1240px);
  --nav-h:66px;
  --r:8px;                       /* esquinas: máx 8 px */
  --sp:clamp(3.4rem,7vw,6.2rem); /* ritmo vertical entre secciones */
}

/* --maxw escalonado para pantalla ancha + ritmo tipográfico desde html */
html{font-size:16px}
@media (min-width:1500px){ html{font-size:17.5px} :root{--maxw:min(90vw,1400px)} }
@media (min-width:1800px){ html{font-size:18.5px} :root{--maxw:min(88vw,1560px)} }
@media (min-width:2200px){ html{font-size:19.5px} :root{--maxw:1700px} }
@media (min-width:3000px){ html{font-size:20px}   :root{--maxw:1820px} }

/* ------------------------------ Reset ----------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--tiza); color:var(--tinta);
  font-family:var(--txt); font-size:clamp(1.02rem,.35vw + .96rem,1.14rem);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.06;letter-spacing:-.018em;margin:0}
p{margin:0 0 1em}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
iframe{border:0;display:block}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--naranja);
  color:var(--navy-d);padding:.7rem 1.1rem;font-family:var(--disp);font-weight:700}
.skip:focus{left:.6rem;top:.6rem}
.wrap{width:var(--maxw);margin-inline:auto}

/* Nada de línea más larga de ~78 caracteres */
.lede,.cat__linea,.curso__pie,.voces__hecho,.qa__c p{max-width:66ch}
.answer__frase{max-width:26ch}

/* --------------------------- Tipos comunes ------------------------------ */
.kicker{
  font-family:var(--disp);font-weight:700;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--naranja-l);margin:0 0 .85rem;
}
.kicker--tinta{color:var(--naranja-t)}
.lede{font-size:1.06rem;color:rgba(242,245,250,.82);margin-bottom:2.2rem}
.lede--tinta{color:var(--tinta-2)}
h2{font-size:clamp(1.95rem,3.6vw,3.15rem)}
h3{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:700}

.lnk{
  color:var(--navy);text-decoration:none;font-family:var(--disp);font-weight:600;
  font-size:.95rem;border-bottom:2px solid rgba(242,108,27,.55);padding-bottom:2px;
  transition:border-color .18s ease,color .18s ease;
}
.lnk:hover{border-bottom-color:var(--naranja);color:var(--naranja)}
.lnk--claro{color:var(--tiza)}
.lnk--claro:hover{color:var(--naranja-l);border-bottom-color:var(--naranja-l)}

/* ------------------------------ Botones --------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--disp);font-weight:700;font-size:.95rem;letter-spacing:.005em;
  padding:.82rem 1.35rem;border-radius:var(--r);border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),background-color .18s ease,box-shadow .18s ease;
}
/* Regla dura: el naranja NUNCA lleva texto blanco (3,0:1). Tinta navy = 6,6:1 */
.btn--cta{background:var(--naranja);color:var(--navy-d)}
.btn--cta:hover{background:var(--naranja-l);transform:translateY(-2px)}
.btn--cta:active{transform:translateY(0)}
.btn--lg{padding:1.02rem 1.7rem;font-size:1.02rem}
.btn--line{background:transparent;color:var(--navy);border-color:rgba(10,42,94,.28)}
.btn--line:hover{border-color:var(--navy);background:rgba(10,42,94,.05)}
.ico-wa{width:1.15em;height:1.15em;fill:currentColor;flex:none}

/* ------------------ Ornamento: la barra segmentada del logo -------------- */
/* Se usa ESTÁTICA. Entrada: los 5 segmentos llegan con leve overshoot y
   asientan (one-shot). Nunca un gradiente que viaja en bucle.               */
.barra{display:flex;gap:5px;height:9px;margin:2.4rem 0 0}
.barra i{background:var(--naranja);border-radius:2px;display:block}
.barra i:nth-child(1){flex:2.4}
.barra i:nth-child(2){flex:1}
.barra i:nth-child(3){flex:4.6}
.barra i:nth-child(4){flex:1.6}
.barra i:nth-child(5){flex:3}
.barra--horizonte{position:absolute;left:0;right:0;bottom:0;margin:0;height:11px;gap:6px;z-index:3}
.barra--pie{margin:2.6rem 0 0;height:8px}
.is-anim .barra i{transform:translateX(-14px);opacity:0}
.is-anim .barra.in i{
  transform:none;opacity:1;
  transition:transform .32s cubic-bezier(.18,1.2,.4,1),opacity .26s ease;
}
.is-anim .barra.in i:nth-child(2){transition-delay:.06s}
.is-anim .barra.in i:nth-child(3){transition-delay:.12s}
.is-anim .barra.in i:nth-child(4){transition-delay:.18s}
.is-anim .barra.in i:nth-child(5){transition-delay:.24s}

/* ------------------------------- Reveal --------------------------------- */
/* Gated por .is-anim en <html>: sin JS, todo visible.                      */
.is-anim [data-r]{opacity:0;transform:translateY(16px)}
.is-anim [data-r].in{opacity:1;transform:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
/* Los vehículos entran desde el borde por el que están: da la sensación de que
   circulan hacia su sitio a medida que uno baja. Solo transform/opacity. */
.is-anim [data-r="izq"]{transform:translate3d(-64px,0,0)}
.is-anim [data-r="der"]{transform:translate3d(64px,0,0)}
.is-anim [data-r="izq"].in,.is-anim [data-r="der"].in{
  transform:none;transition:opacity .55s ease,transform .72s cubic-bezier(.16,.72,.24,1);
}

/* ------------------- Capa 1: deriva ambiente (CSS puro) ------------------ */
.flota{will-change:transform}
.is-anim .flota{
  animation:deriva var(--dur,9s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.7s);
}
@keyframes deriva{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0,calc(var(--amp,10px) * -1),0) rotate(var(--rot,.4deg))}
}
/* Capa 3: «El arranque» — las capas del hero entran desde su profundidad y,
   al terminar, JS les pasa la deriva (.drift). Sin JS no hay animación y las
   piezas quedan visibles y quietas. */
.is-anim .hero .flota{
  animation:arranque .38s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 90ms + 120ms);
}
.is-anim .hero .flota.drift{
  animation:deriva var(--dur,9s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.7s);
}
@keyframes arranque{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to  {opacity:1;transform:translate3d(0,0,0)}
}
.par{will-change:transform}

/* ================================ NAV ==================================== */
/* Navy sólido con alpha alto — SIN backdrop-filter (regla 2 de MOTION) */
.nav{
  /* --aviso-h lo pone main.js SOLO si el aviso del CALE está a la vista; si el
     JS no corre vale 0 y la barra queda donde siempre. */
  position:fixed;left:0;right:0;top:var(--aviso-h,0px);z-index:60;background:rgba(6,26,60,.93);
  border-bottom:1px solid rgba(255,138,61,.16);
  transition:background-color .25s ease,box-shadow .25s ease;
}
.nav.scrolled{background:rgba(6,26,60,.985);box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.nav__in{
  width:var(--maxw);margin-inline:auto;height:var(--nav-h);
  display:flex;align-items:center;gap:1.4rem;
}
.nav__marca{flex:none;display:block;line-height:0}
.nav__marca img{width:auto;height:30px}
.nav__links{display:flex;gap:1.35rem;margin-left:auto}
.nav__links a{
  font-family:var(--disp);font-weight:500;font-size:.87rem;color:rgba(242,245,250,.9);
  text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav__links a:hover{color:var(--naranja-l);border-bottom-color:var(--naranja-l)}
.nav__cta{padding:.6rem 1.05rem;font-size:.87rem;flex:none}
.hamb{display:none;background:none;border:0;padding:.5rem;cursor:pointer;flex:none}
.hamb span{display:block;width:24px;height:2px;background:var(--tiza);margin:5px 0;border-radius:2px}

/* Menú móvil — PATRÓN A PRUEBA DE FALLOS: oculto por defecto */
.mobile-menu{
  display:none;
  position:fixed;inset:0;z-index:70;background:var(--navy-d);
  flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
}
.mobile-menu:not([hidden]){display:flex}
.mobile-menu a{
  font-family:var(--disp);font-weight:700;font-size:1.45rem;color:var(--tiza);text-decoration:none;
}
.mobile-menu a:hover{color:var(--naranja-l)}
.mm-close{
  position:absolute;top:1rem;right:1.2rem;background:none;border:0;color:var(--tiza);
  font-size:2.4rem;line-height:1;cursor:pointer;padding:.2rem .6rem;
}

/* ================= HERO — «EL PATIO DE LAS 6 A. M.» ======================= */
/* Reparto INVERTIDO respecto de las bandas interiores: aquí manda la TIZA
   (hoja de datos) y el navy queda reducido al patio del pie. La barra
   segmentada del logo hace de HORIZONTE y las piezas se apoyan en ella.     */
.hero{
  --patio:clamp(228px,34vh,392px);
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--tiza);color:var(--tinta);
  padding-top:calc(var(--nav-h) + var(--aviso-h,0px) + clamp(2.2rem,5vw,4rem));
  padding-bottom:calc(var(--patio) + clamp(1.2rem,3vw,2.4rem));
  min-height:clamp(560px,84svh,900px);
  display:flex;align-items:center;
}
/* el wordmark del cliente, gigante y casi imperceptible, cortado por la derecha */
.hero__marca{position:absolute;top:12%;right:-18%;width:86%;z-index:0;pointer-events:none}
.hero__marca img{width:100%;opacity:.032}
.hero__in{position:relative;z-index:3;width:var(--maxw);margin-inline:auto}
.hero h1{
  font-size:clamp(2.35rem,6.4vw,5.2rem);margin:0 0 1.1rem;color:var(--navy);
}
/* el énfasis lo hacen el PESO y el TAMAÑO de Geologica, no el color:
   las dos líneas comparten exactamente la misma tinta --navy */
.h1__a{
  display:block;font-weight:400;font-size:.45em;line-height:1.14;
  letter-spacing:-.008em;margin-bottom:.14em;
}
.h1__b{display:block;font-weight:800;letter-spacing:-.036em;line-height:.98}
.hero__sub{
  font-size:clamp(1.04rem,.5vw + .94rem,1.2rem);color:var(--tinta-2);
  max-width:46ch;margin-bottom:1.8rem;
}
.hero__sub b{font-family:var(--disp);font-weight:700;color:var(--navy)}
.glifo{color:var(--naranja-l);margin-right:.3rem}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem}
.hero__sec{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}

/* --- el patio: el suelo navy del amanecer --- */
.hero__patio{
  position:absolute;left:0;right:0;bottom:0;height:var(--patio);z-index:2;
  /* el suelo se aclara hacia el espectador: sin eso, una sombra de contacto
     negra sobre --navy-d es invisible y las piezas vuelven a flotar */
  background:linear-gradient(180deg,var(--navy-d) 0%,#0B2C60 52%,#123A75 100%);
}
/* ruido finísimo ≤2 %, sin resplandor radial */
.hero__patio::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
/* la barra segmentada es el borde superior del patio = el horizonte */
.hero .barra--horizonte{position:absolute;left:0;right:0;top:0;bottom:auto;margin:0;height:10px;gap:6px;z-index:4}
.hero__escena{position:absolute;inset:0;z-index:3}
.hero__pieza{margin:0;position:absolute}
/* tres profundidades apoyadas en el mismo suelo: la moto al fondo, la SUV
   adelante y cortada por el borde inferior, y el cono a ras de suelo */
/* Escala del patio: el cono (0,75 m real) fija la regla, ≈200 px por metro.
   Con esa regla la moto con su instructor mide ≈1,9 m y la SUV ≈1,7 m de alto.
   Antes la moto iba a 146 px de ancho — menos de la mitad de lo que le
   corresponde— y parecía un juguete al lado de la camioneta. */
/* La moto y el cono se miden contra el ALTO DEL PATIO, no contra el ancho de
   la ventana: así no pueden salirse del suelo azul y meterse en la banda
   blanca de arriba pase lo que pase con el viewport. El 22 % de holgura que
   queda encima de la moto cubre de sobra el tope de parallax (34 px).
   Escala: el patio vale ≈2,3 m → moto+instructor 1,8 m y cono 0,75 m. */
.hero__pieza--suv{right:1.5%;bottom:-21%;width:min(46%,600px);z-index:3}
.hero__pieza--moto{left:19%;bottom:5%;height:78%;width:auto;z-index:2}
.hero__pieza--cono{left:4.5%;bottom:4%;height:33%;width:auto;z-index:4}
.hero__pieza--moto .par,.hero__pieza--moto .flota,
.hero__pieza--cono .par,.hero__pieza--cono .flota{height:100%}
.hero__pieza--moto img,.hero__pieza--cono img{height:100%;width:auto;max-width:none}
/* sombra de contacto elíptica: NINGUNA pieza apoyada puede flotar en el vacío */
.hero__pieza--moto .flota,.hero__pieza--cono .flota{position:relative}
.hero__pieza--moto .flota::after{
  content:"";position:absolute;left:-14%;right:-10%;bottom:-6%;height:26px;z-index:-1;
  background:radial-gradient(50% 50% at 50% 52%,rgba(1,7,20,.9),rgba(1,7,20,0) 70%);
}
.hero__pieza--cono .flota::after{
  content:"";position:absolute;left:-26%;right:-26%;bottom:-7%;height:26px;z-index:-1;
  background:radial-gradient(50% 50% at 50% 52%,rgba(1,7,20,.92),rgba(1,7,20,0) 68%);
}

/* ========================== BANDA ANSWER-FIRST =========================== */
.answer{background:var(--tiza);padding:var(--sp) 0}
.answer__frase{
  font-size:clamp(1.55rem,3.1vw,2.6rem);color:var(--navy);line-height:1.2;
  letter-spacing:-.02em;font-weight:700;max-width:30ch;
}

/* ============================== TRÍPTICO ================================= */
.cat{padding:clamp(3.4rem,6.5vw,6rem) 0;overflow:hidden}
.cat--navy{background:var(--navy-d);color:var(--tiza)}
.cat--tiza{background:var(--tiza-2);color:var(--tinta)}
.cat__in{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:center;
}
.cat__in--rev .cat__texto{order:2}
.cat__in--rev .cat__fig{order:1}
.placa{
  display:inline-block;font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,5.2vw,4rem);
  line-height:1;letter-spacing:-.03em;background:var(--navy);color:var(--blanco);
  padding:.28em .34em .3em;border-radius:var(--r);margin:0 0 1.1rem;
  font-variant-numeric:tabular-nums;
}
.cat--navy .placa{background:var(--navy-m)}
.placa--sm{font-size:1.45rem;padding:.22em .34em .24em;margin:0}
.cat h3{margin:0 0 .9rem}
.cat--navy h3{color:var(--tiza)}
.cat__linea{font-size:1.05rem;margin-bottom:1.7rem}
.cat--navy .cat__linea{color:rgba(242,245,250,.84)}
.cat--tiza .cat__linea{color:var(--tinta-2)}
.cat__cta{margin:0}
.cat__fig{margin:0;padding:18px 0}
.cat__fig img{width:100%;margin-inline:auto}
/* Una moto mide 2 m y un sedán 4,6 m: si las dos imágenes llenan la columna,
   la moto se ve del tamaño de un carro. Cada figura se topa a la proporción
   que le corresponde tomando el carro como 100 %. */
.cat__fig--moto img{max-width:38%}
.cat__fig--carro img{max-width:100%}
.cat__fig--camion img{max-width:100%}
@media (max-width:820px){ .cat__fig--moto img{max-width:48%} }

/* ======================= EL CURSO, CLASE POR CLASE ======================= */
.curso{position:relative;overflow:hidden;background:var(--navy);color:var(--tiza);
  padding:var(--sp) 0;isolation:isolate}
.curso__fondo{
  position:absolute;right:-14%;bottom:-8%;width:62%;z-index:0;pointer-events:none;opacity:.11;
}
.curso__fondo img{width:100%}
.curso__in{position:relative;z-index:2}
.temario{
  margin:2.4rem 0 2.2rem;border-top:1px solid rgba(255,138,61,.3);max-width:44rem;
}
.temario__fila{
  display:grid;grid-template-columns:minmax(0,4.6rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.4rem);align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid rgba(255,138,61,.3);
}
.temario__n{
  font-family:var(--disp);font-weight:800;font-size:clamp(2.1rem,4vw,2.9rem);line-height:1;
  color:var(--naranja-l);text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.temario__q{font-size:1.08rem;color:var(--tiza)}
.temario__q em{font-style:normal;color:rgba(242,245,250,.78)}
.temario__fila--sim .temario__n{color:rgba(255,138,61,.8)}
.temario__tag{
  display:inline-block;font-family:var(--disp);font-style:normal;font-weight:700;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--navy-d);
  background:var(--naranja);border-radius:4px;padding:.24em .55em;margin-left:.6rem;
  vertical-align:2px;
}
/* ⚠ `.temario__q em` (0,1,1) le ganaba a `.temario__tag` (0,1,0) y la etiqueta
   terminaba con tinta clara sobre naranja: 1,95:1. Regla dura de la casa —
   el naranja NUNCA lleva texto claro. Tinta navy plena = 5,7:1. */
.temario__q em.temario__tag{color:var(--navy-d)}
.curso__pie{color:rgba(242,245,250,.8);margin:0}

/* ============================ LAS PRÁCTICAS =============================
   Carrusel con deriva sobre fotos REALES de la flota y del circuito. Es un
   scroller nativo: arrastre, rueda, touch y teclado los pone el navegador;
   main.js sólo le suma velocidad. La pista lleva la lista dos veces para que
   el salto de vuelta no se vea. Sin JS queda una tira arrastrable normal.
   ======================================================================== */
.prac{background:var(--tiza-2);padding:var(--sp) 0;overflow:hidden}
.prac h2{color:var(--navy)}
.carrusel{
  display:flex;overflow-x:auto;overflow-y:hidden;gap:clamp(10px,1.4vw,16px);
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  cursor:grab;padding-bottom:2px;
}
.carrusel::-webkit-scrollbar{display:none}
.carrusel:focus-visible{outline:3px solid var(--naranja);outline-offset:4px}
.carrusel__pista{display:flex;gap:clamp(10px,1.4vw,16px);flex:0 0 auto}
.carrusel__it{
  margin:0;flex:0 0 auto;position:relative;overflow:hidden;border-radius:var(--r);
  width:clamp(230px,27vw,360px);height:clamp(180px,21vw,270px);
  background:var(--navy-d);border:1px solid rgba(10,42,94,.14);
}
.carrusel__it img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.carrusel__it figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem .85rem;
  font-family:var(--disp);font-size:.84rem;color:var(--tiza);
  background:linear-gradient(180deg,rgba(6,26,60,0),rgba(6,26,60,.92));
}
.carrusel__ayuda{margin:.9rem 0 0;font-size:.86rem;color:var(--tinta-2)}

/* ================================ AVISO ================================= */
.aviso{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:var(--navy-d);color:var(--tiza);border-bottom:3px solid var(--naranja);
}
.aviso[hidden]{display:none}
.aviso__in{
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
  padding:.85rem 0 .9rem;position:relative;padding-right:2.6rem;
}
.aviso__txt{margin:0;font-size:.98rem;line-height:1.5;flex:1 1 26rem;color:rgba(242,245,250,.92)}
.aviso__txt b{color:var(--naranja-l);font-family:var(--disp);font-weight:700}
.aviso__norma{color:rgba(242,245,250,.6);font-size:.9em}
.aviso .btn{flex:none}
.aviso__x{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;background:transparent;color:rgba(242,245,250,.7);
  font-size:1.5rem;line-height:1;cursor:pointer;border-radius:var(--r);
}
.aviso__x:hover{color:var(--tiza);background:rgba(255,255,255,.08)}
@media (max-width:640px){
  .aviso__txt{font-size:.92rem}
  .aviso__in{padding-right:2.2rem}
}

/* ========================== HORARIOS TEÓRICOS ============================ */
.hor{background:var(--navy-d);color:var(--tiza);padding:var(--sp) 0}
.hor h2{color:var(--tiza)}
.rejilla{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:rgba(255,138,61,.26);border:1px solid rgba(255,138,61,.26);border-radius:var(--r);
  overflow:hidden;margin-top:2rem;
}
.rejilla__col{background:var(--navy-d);padding:1.4rem clamp(.9rem,1.8vw,1.6rem) 1.7rem;
  transition:background-color .3s ease}
.rejilla__col.hoy{background:#0E2C5C}
.rejilla__h{
  font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--naranja-l);margin:0 0 1.05rem;
  padding-bottom:.65rem;border-bottom:1px solid rgba(255,138,61,.28);
}
.rejilla__col.hoy .rejilla__h::after{
  content:"hoy";margin-left:.55rem;background:var(--naranja);color:var(--navy-d);
  border-radius:4px;padding:.12em .45em;letter-spacing:.06em;
}
.rejilla__l li{
  font-family:var(--disp);font-weight:500;font-size:clamp(.98rem,1.2vw,1.1rem);
  font-variant-numeric:tabular-nums;padding:.42rem 0;color:var(--tiza);
}
.rejilla__nota{margin:1.15rem 0 2rem;font-size:.98rem;color:rgba(242,245,250,.72)}
.hor__cta{margin:0}

/* ============================= LOS DOS COMBOS ============================ */
.combos{background:var(--tiza-2);padding:var(--sp) 0}
.combos h2{color:var(--navy)}
.fichas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,2rem);margin-top:2.2rem;
}
.ficha{
  background:var(--blanco);border:1px solid rgba(10,42,94,.14);border-top:3px solid var(--naranja);
  border-radius:var(--r);padding:clamp(1.5rem,3vw,2.4rem);
}
.ficha__placas{display:flex;align-items:center;gap:.55rem;margin:0 0 1.1rem}
.ficha__veh{
  display:flex;align-items:flex-end;justify-content:flex-start;gap:clamp(.6rem,1.6vw,1.1rem);
  margin:0 0 1.2rem;padding:0 0 1.1rem;border-bottom:1px solid rgba(10,42,94,.1);min-height:74px;
}
.ficha__veh img{width:auto;height:auto;max-height:74px;max-width:48%;object-fit:contain}
.ficha__mas{font-family:var(--disp);font-weight:700;font-size:1.2rem;color:var(--tinta-2)}
.ficha__h{font-size:1.12rem;font-weight:700;color:var(--navy);margin:0 0 .5rem;letter-spacing:-.005em}
.ficha__precio{
  font-family:var(--disp);font-weight:800;font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.02;
  letter-spacing:-.035em;color:var(--navy);font-variant-numeric:tabular-nums;margin:0 0 .35rem;
}
.ficha__pago{font-size:.98rem;color:var(--tinta-2);margin:0 0 1.6rem}
.ficha .btn{width:100%}

/* ============================== OPINIONES ================================ */
.voces{background:var(--navy);color:var(--tiza);padding:var(--sp) 0}
.voces h2{color:var(--tiza);max-width:16ch}
.voces__cab{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.5vw,3rem);align-items:end;margin-bottom:clamp(2.4rem,5vw,3.6rem);
}
.voces__linea{
  font-family:var(--disp);font-weight:600;font-size:1.02rem;letter-spacing:.02em;
  color:var(--naranja-l);font-variant-numeric:tabular-nums;margin:1rem 0 0;
}
.voces__hecho{font-size:1rem;color:rgba(242,245,250,.78);margin:0}
/* rejilla regular: mismas cajas, mismo aire — nada de indentaciones sueltas */
.voces__lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1rem,2vw,1.5rem);align-items:stretch;
}
.cita{
  margin:0;display:flex;flex-direction:column;height:100%;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,138,61,.2);
  border-radius:var(--r);padding:clamp(1.3rem,2.4vw,1.8rem);
}
.cita p{
  font-family:var(--txt);font-style:italic;font-weight:400;
  font-size:clamp(1.02rem,1.35vw,1.14rem);line-height:1.5;color:var(--tiza);
  margin:0 0 1.1rem;flex:1 1 auto;
}
.cita p::before{content:"“"}
.cita p::after{content:"”"}
.cita cite{
  font-family:var(--disp);font-style:normal;font-weight:700;font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--naranja-l);
  margin-top:auto;padding-top:.9rem;border-top:1px solid rgba(255,138,61,.2);
}
.cita cite span{color:rgba(242,245,250,.55);font-weight:500}
.voces__fuente{margin:2.2rem 0 0;font-size:.86rem;color:rgba(242,245,250,.55)}

/* ============================== DÓNDE QUEDA ============================== */
.visita{background:var(--navy-d);color:var(--tiza);padding:var(--sp) 0}
.visita h2{color:var(--tiza)}
.visita__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
}
.visita__dir{
  font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.16;
  letter-spacing:-.02em;color:var(--tiza);margin:1.3rem 0 1.8rem;
}
.visita__dir span{
  display:block;font-weight:500;font-size:.92rem;letter-spacing:.02em;
  color:rgba(242,245,250,.7);margin-top:.5rem;
}
.dl{display:grid;grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:.55rem 1rem;margin:0 0 2.2rem}
.dl dt{font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(242,245,250,.55);padding-top:.2rem}
.dl dd{margin:0}
.visita__sub{font-size:.8rem;font-family:var(--disp);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--naranja-l);margin:0 0 .9rem}
.aten{border-top:1px solid rgba(255,138,61,.24);margin:0 0 2rem}
.aten li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.68rem 0;border-bottom:1px solid rgba(255,138,61,.24);
}
.aten li span{font-size:.98rem;color:rgba(242,245,250,.78)}
.aten li b{font-family:var(--disp);font-weight:600;font-size:.98rem;
  font-variant-numeric:tabular-nums;color:var(--tiza)}
.aten li.hoy span,.aten li.hoy b{color:var(--naranja-l)}
.aten li.hoy span::after{content:" · hoy";font-family:var(--disp);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase}
.visita__redes{display:flex;gap:1.4rem;margin:0}
.visita__mapa{border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,138,61,.22)}
.visita__mapa iframe{width:100%;height:clamp(340px,44vw,520px);filter:grayscale(.25) contrast(1.03)}

/* ================================= FAQ =================================== */
.faq{background:var(--tiza);padding:var(--sp) 0;text-align:center}
.faq h2{color:var(--navy);margin:0 auto 2rem;max-width:22ch}
.faq .kicker{margin-inline:auto}
.faq__list{border-top:1px solid rgba(10,42,94,.18);max-width:52rem;margin-inline:auto;text-align:left}
.faq__pie{margin-inline:auto}
.qa{border-bottom:1px solid rgba(10,42,94,.18)}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1rem;
  font-family:var(--disp);font-weight:600;font-size:clamp(1.02rem,1.5vw,1.16rem);
  color:var(--navy);padding:1.15rem 0;transition:color .18s ease;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;margin-left:auto;width:12px;height:12px;margin-top:.42em;
  border-right:2.5px solid var(--naranja);border-bottom:2.5px solid var(--naranja);
  transform:rotate(45deg);transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa summary:hover{color:var(--naranja)}
.qa__c{padding:0 0 1.3rem}
.qa__c p{margin:0;color:var(--tinta-2)}

/* ================================ FOOTER ================================= */
.foot{background:var(--navy-d);color:var(--tiza);padding:clamp(3rem,5vw,4.4rem) 0 0}
.foot__in{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.6fr);
  gap:clamp(1.6rem,3.5vw,3rem);align-items:start;
}
.foot__marca img{width:auto;height:44px}
.flota--pie{display:inline-block}
.foot__marca p{margin:1.1rem 0 0;font-size:.94rem;color:rgba(242,245,250,.66);line-height:1.6}
.foot__datos p,.foot__redes p{margin:0 0 .7rem;font-size:.95rem}
.foot__firma{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;
  padding:1.5rem 0 1.7rem;
}
.foot__firma p{margin:0;font-size:.86rem;color:rgba(242,245,250,.6)}
.foot__firma a{color:var(--naranja-l);font-family:var(--disp);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(255,138,61,.5)}
.foot__firma a:hover{border-bottom-color:var(--naranja-l)}

/* ============================== FAB + MODAL ============================== */
.fab{
  position:fixed;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);z-index:55;
  display:inline-flex;align-items:center;gap:.5rem;background:var(--naranja);color:var(--navy-d);
  font-family:var(--disp);font-weight:700;font-size:.92rem;text-decoration:none;
  padding:.8rem 1.2rem;border-radius:var(--r);box-shadow:0 12px 28px -12px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.3,1),visibility .28s;
}
.fab.show{opacity:1;visibility:visible;transform:none}
.fab.hide{opacity:0;visibility:hidden;transform:translateY(10px)}
.fab .ico-wa{width:1.3em;height:1.3em}

/* Modal QR — PATRÓN A PRUEBA DE FALLOS: oculto por defecto */
.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(6,26,60,.72);backdrop-filter:blur(6px)}
.wa-card{
  position:relative;background:var(--blanco);color:var(--tinta);border-radius:var(--r);
  border-top:3px solid var(--naranja);
  padding:clamp(1.5rem,3vw,2.2rem);max-width:26rem;width:100%;text-align:center;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);max-height:92vh;overflow:auto;
}
.wa-card .kicker{margin-bottom:.6rem}
.wa-card h3{font-size:1.3rem;color:var(--navy);margin:0 0 .6rem}
.wa-txt{font-size:.96rem;color:var(--tinta-2);margin:0 0 1.1rem}
.wa-close{position:absolute;top:.35rem;right:.7rem;background:none;border:0;font-size:2rem;
  line-height:1;color:var(--tinta-2);cursor:pointer;padding:.1rem .4rem}
.wa-close:hover{color:var(--navy)}
.wa-qr{display:flex;justify-content:center;margin:0 0 1rem;min-height:140px;align-items:center}
.wa-qr img{width:180px;height:auto;image-rendering:pixelated}
.wa-preview{font-size:.86rem;color:var(--tinta-2);font-style:italic;margin:0 0 1.2rem;
  background:var(--tiza);border-radius:6px;padding:.7rem .9rem}
.wa-actions{display:flex;flex-direction:column;gap:.6rem}

/* ============================= RESPONSIVE ================================ */
@media (max-width:1040px){
  .nav__links{display:none}
  .hamb{display:block;margin-left:auto}
  .nav__cta{margin-left:0}
  .hero{--patio:clamp(210px,30vh,320px)}
  .hero__marca{top:9%;right:-28%;width:96%}
  .hero__marca img{opacity:.026}
  .hero__pieza--suv{right:-4%;bottom:-14%;width:min(58%,500px)}
  .hero__pieza--moto{left:11%;bottom:5%;height:70%}
  .hero__pieza--cono{left:3%;bottom:4%;height:29%}
  .cat__in,.cat__in--rev{grid-template-columns:minmax(0,1fr)}
  .cat__in--rev .cat__texto,.cat__in--rev .cat__fig{order:0}
  .voces__cab{grid-template-columns:minmax(0,1fr)}
  .visita__in{grid-template-columns:minmax(0,1fr)}
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  :root{--sp:clamp(2.8rem,9vw,4rem)}
  .rejilla{grid-template-columns:minmax(0,1fr)}
  .fichas{grid-template-columns:minmax(0,1fr)}
  .foot__in{grid-template-columns:minmax(0,1fr)}
  .cita--b,.cita--c,.cita--d,.cita--e{margin-left:0}
  .temario__fila{grid-template-columns:minmax(0,3.2rem) minmax(0,1fr);gap:1rem}
  .fab span{display:none}
  .fab{padding:.9rem;border-radius:50%}
  .fab .ico-wa{width:1.6em;height:1.6em}
  .dl{grid-template-columns:minmax(0,1fr)}
  .dl dt{padding-top:.5rem}
  .hero{--patio:clamp(178px,26vh,240px);min-height:auto}
  .hero__marca{top:8%;right:-24%;width:104%}
  .hero__pieza--suv{right:-10%;bottom:-13%;width:min(84%,420px)}
  /* a 720 px la moto ya no aporta profundidad y estorba al cono: se va,
     y sigue viva —a tamaño real— en el bloque A2 */
  .hero__pieza--moto{display:none}
  .hero__pieza--cono{left:3%;bottom:5%;width:min(17%,78px)}
}
@media (max-width:400px){
  .nav__marca img{height:25px}
  .nav__cta{padding:.55rem .8rem;font-size:.8rem}
  .hero__sec{flex-direction:column;gap:.7rem}
}

/* ======================== prefers-reduced-motion ========================= */
/* Apaga TODO sin dejar transform residual. El hero queda visible y completo,
   «La maniobra» se lee como lámina de manual (las 4 posiciones a la vez).   */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .flota,[data-flota],.par{animation:none!important;transform:none!important}
  [data-r]{opacity:1!important;transform:none!important}
  .barra i{transform:none!important;opacity:1!important}
  .pasos__p{opacity:1!important;color:var(--tinta)!important}
  /* --naranja pelado da 2,77:1 sobre --tiza y no pasa AA: la ruta apagada usa
     el mismo --naranja-t que la ruta viva (5,26:1) */
  .pasos__p b{opacity:1!important;color:var(--naranja-t)!important}
}