/* ==========================================================================
   CAR HAUS LLC — Landing inmersiva con scroll
   Paleta tomada del logo: azul noche + hielo. Sin librerías.

   ORDEN DEL ARCHIVO
   00 Reset y tokens        05 Giro 360
   01 Tipografía            06 Capacidades (sección invertida)
   02 Navegación            07 Inventario
   03 Hero                  08 Rebuilt / Cómo comprar / Ubicación
   04 Ticker y cifras       09 Footer, responsive, accesibilidad
   ========================================================================== */

/* ============================ 00 · RESET Y TOKENS ========================= */

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

:root {
  /* Superficies */
  --night:      #04060F;
  --night-2:    #080D1E;
  --night-3:    #0E1530;
  --ice:        #EDF1FA;
  --ice-2:      #DCE3F3;
  --ice-3:      #C6D0E8;

  /* Marca — del logo */
  --blue:       #2F44C8;
  --blue-hi:    #4E66F0;
  --blue-glow:  #6D86FF;

  /* Texto */
  --on-night:   #F2F5FD;
  --on-night-2: rgba(242, 245, 253, 0.62);
  --on-night-3: rgba(242, 245, 253, 0.34);
  --on-ice:     #060B1C;
  --on-ice-2:   rgba(6, 11, 28, 0.66);
  --on-ice-3:   rgba(6, 11, 28, 0.38);

  --line-night: rgba(242, 245, 253, 0.13);
  --line-ice:   rgba(6, 11, 28, 0.14);

  /* Tipografía */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "Barlow", system-ui, -apple-system, sans-serif;
  --cond:    "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono:    "Roboto Mono", ui-monospace, monospace;

  /* Ritmo */
  --gutter: clamp(20px, 5vw, 88px);
  --maxw: 1440px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--on-night);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  overflow-x: clip;                /* clip, no hidden: hidden convierte a body en contenedor de scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* El navegador pinta el fondo del documento; sin esto el rebote del scroll
   en iOS enseña blanco debajo del hero. */
html { background: var(--night); }

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--on-night); color: var(--night);
  padding: 12px 20px; font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.skip:focus { top: 16px; }

/* ============================== 01 · TIPOGRAFÍA ========================== */

.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}

/* El gesto que define la referencia: la palabra del medio en itálica.
   Big Shoulders no trae itálica real, así que se inclina y se aligera un
   punto para que el oblicuo no se vea como un error de render. */
.display em {
  font-style: normal;
  font-weight: 600;
  display: inline-block;
  transform: skewX(-11deg);
}

/* Bajadas respecto al primer corte: a 190px el titular se comia la pantalla
   y se metia debajo de la barra. Estos tamanos siguen siendo grandes pero
   dejan respirar la composicion. */
.h-xl { font-size: clamp(44px, 7.4vw, 104px); }
.h-lg { font-size: clamp(38px, 5.8vw, 88px); }
.h-md { font-size: clamp(31px, 4.2vw, 62px); }

/* Etiqueta monoespaciada: el detalle que separa una landing con criterio
   de una plantilla. Se repite en cada sección. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-night-3);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  flex: none;
}
.on-ice .eyebrow { color: var(--on-ice-3); }

.lede {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--on-night-2);
  max-width: 46ch;
  margin: 0;
}
.on-ice .lede { color: var(--on-ice-2); }

/* ============================== 02 · NAVEGACIÓN ========================== */

/* Barra flotante de vidrio esmerilado. El desenfoque de fondo mas un
   borde claro arriba es lo que da la sensacion de cristal: el borde simula
   el canto iluminado de una lamina. */
.nav {
  position: fixed;
  top: 12px; left: var(--gutter); right: var(--gutter);
  z-index: 90;
  display: flex; align-items: center; gap: 28px;
  padding: 11px 12px 11px 18px;
  border-radius: 100px;

  /* ARRIBA DEL TODO NO HAY BARRA, HAY TEXTO SOBRE EL VIDEO.

     El cristal esmerilado estaba tapando justo la parte de la toma donde se
     ve el cartel del negocio, que es lo que esa toma tiene que ensenar. En
     el hero la barra desaparece y solo quedan las letras, sostenidas por su
     propia sombra. El cristal vuelve en cuanto empiezas a bajar, que es
     cuando hace falta separar el menu del contenido que pasa por debajo. */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  border: 1px solid transparent;
  box-shadow: none;

  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease), top 0.4s var(--ease);
  isolation: isolate;
}

/* Al bajar se cierra un poco y se pega mas al borde. */
.nav.is-stuck {
  top: 8px;
  background: rgba(10, 14, 30, 0.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Sobre las secciones claras el cristal se invierte. */
.nav.on-ice {
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(6, 11, 28, 0.10);
  color: var(--on-ice);
  box-shadow:
    0 8px 30px rgba(6, 11, 28, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Borde plateado que recorre la barra.

   Como funciona: un pseudo-elemento un pelo mas grande que la barra lleva
   un degradado conico que gira. Una mascara deja ver solo el grosor del
   borde, asi que lo que se ve es un reflejo dando la vuelta al contorno,
   no un halo. Discreto a proposito: la barra no debe competir con el
   contenido. */
.nav::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--giro, 0deg),
    transparent 0deg,
    rgba(255, 255, 255, 0.10) 40deg,
    rgba(214, 222, 240, 0.85) 78deg,
    rgba(255, 255, 255, 0.35) 104deg,
    transparent 150deg,
    transparent 360deg
  );
  /* La mascara vacia el centro: solo queda el canto. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: recorrerBorde 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Sobre fondo claro el plateado se apaga: ahi el brillo seria invisible y
   solo ensuciaria el borde. */
.nav.on-ice::before {
  background: conic-gradient(
    from var(--giro, 0deg),
    transparent 0deg,
    rgba(6, 11, 28, 0.05) 40deg,
    rgba(6, 11, 28, 0.28) 78deg,
    rgba(6, 11, 28, 0.10) 104deg,
    transparent 150deg,
    transparent 360deg
  );
}

/* --giro se anima como angulo; hace falta declararlo para que el navegador
   lo interpole en vez de saltar de 0 a 360. */
@property --giro {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes recorrerBorde {
  to { --giro: 360deg; }
}

/* Respaldo para navegadores sin @property: gira el elemento entero. En ese
   caso el efecto es mas simple pero sigue leyendose como un reflejo. */
@supports not (background: conic-gradient(from var(--giro, 0deg), red, blue)) {
  .nav::before { animation: none; }
}

/* El contenido de la barra va por encima del borde. */
.nav > * { position: relative; z-index: 2; }

.nav__brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.nav__brand img { width: 40px; height: 40px; object-fit: contain; }
.nav__brand span {
  font-family: var(--display); font-weight: 800; font-size: 21px;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1;
}

/* Direccion con punto latiendo. Oculta en escritorio, donde ese espacio
   lo ocupan los enlaces y el boton de catalogo. */
.nav__here {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  padding: 4px 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: rgba(242, 245, 253, 0.72);
  white-space: nowrap;
}
.nav.on-ice .nav__here { color: rgba(6, 11, 28, 0.66); }

.nav__dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue-glow);
  flex: none;
}
/* El anillo que se expande y se apaga: es el gesto que la gente asocia con
   "ubicacion en vivo". */
.nav__dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--blue-glow);
  animation: latido 2.2s var(--ease-io) infinite;
}
@keyframes latido {
  0%   { transform: scale(1);   opacity: 0.65; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

.nav__links { display: flex; gap: 30px; }
.nav__links a {
  font-family: var(--cond); font-weight: 600; font-size: 15px;
  letter-spacing: 0.11em; text-transform: uppercase;
  opacity: 0.66; transition: opacity 0.25s;
  position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav__toggle span {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  position: relative;
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor;
  transition: transform 0.3s var(--ease);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after  { top: 7px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ================================ BOTONES ================================ */

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px;
  font-family: var(--cond); font-weight: 600; font-size: 15px;
  letter-spacing: 0.13em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
  will-change: transform;
}
.btn svg { flex: none; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(5px); }

.btn--solid { background: var(--on-night); color: var(--night); }
.btn--solid:hover { background: var(--blue-hi); color: #fff; }

.btn--ghost { border-color: var(--line-night); color: var(--on-night); }
.btn--ghost:hover { border-color: var(--on-night); background: rgba(242,245,253,0.06); }

.on-ice .btn--solid { background: var(--on-ice); color: var(--ice); }
.on-ice .btn--solid:hover { background: var(--blue); color: #fff; }
.on-ice .btn--ghost { border-color: var(--line-ice); color: var(--on-ice); }
.on-ice .btn--ghost:hover { border-color: var(--on-ice); background: rgba(6,11,28,0.05); }

.btn--wa { background: #1FA855; color: #fff; }
.nav .btn { border-radius: 100px; padding: 12px 22px; }
.btn--wa:hover { background: #17843F; }

/* ================================= 03 · HERO =============================
   El hero es el recorrido de dron a sangre. El scroll controla la
   reproduccion: bajas y el dron avanza de la carretera al lote al letrero.
   ========================================================================= */

/* Cuatro pantallas de scroll para los 10 segundos de video: menos y el
   recorrido pasa demasiado rapido para leer el titular encima. */
/* 280vh para 10 segundos de recorrido. Antes eran 400: la pagina completa
   medía 19 pantallas y el visitante no llegaba nunca al final. */
.hero { position: relative; height: 280vh; }

.hero__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

.hero__video,
/* EL CARTEL DEL NEGOCIO MANDA EL ENCUADRE.

   La toma es 16:9 y la pantalla suele ser mas ancha o mas baja, asi que al
   llenarla el navegador tiene que recortar. Con el recorte centrado, en una
   ventana baja de portatil se comia justo la franja de arriba, que es donde
   esta el cartel CAR HAUS LLC durante todo el clip.

   object-position al 22% conserva esa franja y sacrifica asfalto de abajo,
   que no aporta nada. */
.hero__still,
.hero__seq img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* Secuencia de telefono: todas apiladas, solo una encendida. Sin
   transicion, el cambio tiene que sentirse como reproduccion. */
.hero__seq { position: absolute; inset: 0; z-index: 1; }
.hero__seq img { opacity: 0; }
.hero__seq img.is-on { opacity: 1; }

/* LA PIXELACION EN VERTICAL, Y POR QUE ESTA BANDA MIDE LO QUE MIDE.
   La toma es horizontal 16:9. Llenarla a pantalla completa en vertical
   obliga a recortar los lados y ampliar unas cuatro veces: de ahi venia el
   pixelado.

   La solucion no es dejarla diminuta en formato buzon, sino darle una banda
   de 3:2. Con ese alto el recorte lateral es minimo: se usa cerca del 85%
   del ancho original, o sea unos 1080 pixeles reales para los 1125 que pide
   una pantalla de 375 puntos a 3x. Practicamente sin ampliar, y la banda
   queda mucho mas alta que un buzon 16:9. */

.hero.is-seq {
  /* Banda 10:9. Es el punto de equilibrio medido: con la fuente a 1600px se
     aprovechan unos 1000 pixeles reales para los 1125 que pide una pantalla
     de 375 puntos a 3x, o sea apenas 1.12x de ampliacion. Mas alta que esto
     y la ampliacion crece rapido y vuelve el pixelado. */
  --band: calc(100vw * 0.9);
}

.hero.is-seq .hero__stage { background: var(--night); }

/* Arranca en el borde superior, por DEBAJO de la barra: asi el cristal del
   menu tiene imagen que desenfocar y se le ve el efecto. */
.hero.is-seq .hero__seq,
.hero.is-seq .hero__still {
  top: 0;
  bottom: auto;
  height: var(--band);
}
.hero.is-seq .hero__seq img,
.hero.is-seq .hero__still {
  object-fit: cover;
  /* En vertical el recorte es lateral, no vertical, asi que el cartel se
     conserva entero: basta con centrar un poco mas alto para dejarlo
     respirar bajo la barra. */
  object-position: center 28%;
  background: var(--night);
}

.hero.is-seq .hero__scrim {
  top: 0;
  height: var(--band);
  /* Oscurece la franja de arriba para que la barra de vidrio se lea sobre
     cielo claro. */
  background: linear-gradient(to bottom, rgba(4,6,15,0.62) 0%, rgba(4,6,15,0.10) 16%, transparent 62%, rgba(4,6,15,0.55) 100%);
}

/* Fila justo debajo de la banda: senal de scroll a la izquierda,
   porcentaje a la derecha. */
.hero.is-seq .hero__cue,
.hero.is-seq .hero__deg {
  top: calc(var(--band) + 22px);
  bottom: auto;
}

.hero.is-seq .hero__cue {
  left: var(--gutter);
  right: auto;
  transform: none;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.hero.is-seq .hero__cue span { max-width: 9ch; line-height: 1.35; }
.hero.is-seq .hero__cue-chev { display: none; }

.hero.is-seq .hero__deg { right: var(--gutter); }
.hero.is-seq .hero__deg b { font-size: 46px; }
/* La foto queda debajo por si el video no carga: nunca un rectangulo negro. */
.hero__still { z-index: 0; }
.hero__video { z-index: 1; }

/* Sin este velo el texto blanco cae sobre cielo azul claro y no se lee.
   Oscurece arriba, abajo y el flanco izquierdo, y respeta el centro. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  /* Sin texto encima el velo solo tiene que asentar los bordes y empatar
     el final de la toma con el fondo de la seccion siguiente. */
  background:
    linear-gradient(to bottom, rgba(4,6,15,0.58) 0%, transparent 22%, transparent 62%, rgba(4,6,15,0.92) 100%);
  pointer-events: none;
}

/* El hero ya no lleva titular ni ficha: la toma se defiende sola y el
   scroll la recorre completa. Solo quedan el velo, la senal de bajar y la
   barra de avance. */

/* --- Indicador de scroll ---
   Raton con la ruedita bajando mas dos flechas. La gente lo reconoce sin
   tener que leer el texto. */
.hero__cue {
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(242,245,253,0.82);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  will-change: opacity;
}
.hero__cue-mouse { color: rgba(242,245,253,0.9); }
.cue-dot { animation: cueDot 1.9s var(--ease-io) infinite; }
@keyframes cueDot {
  0%   { transform: translateY(0);    opacity: 0; }
  22%  { opacity: 1; }
  70%  { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(11px); opacity: 0; }
}

.hero__cue-chev { display: grid; gap: 2px; color: rgba(242,245,253,0.55); }
.hero__cue-chev svg:first-child { animation: cueChev 1.9s var(--ease-io) infinite; }
.hero__cue-chev svg:last-child  { animation: cueChev 1.9s var(--ease-io) 0.18s infinite; }
@keyframes cueChev {
  0%, 100% { opacity: 0.25; transform: translateY(-2px); }
  50%      { opacity: 1;    transform: translateY(2px); }
}

/* Porcentaje del recorrido, arriba a la derecha bajo la barra. */
.hero__deg {
  position: absolute; right: var(--gutter); top: clamp(92px, 14vh, 138px);
  z-index: 5;
  text-align: right;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

/* ============================ 04 · TICKER Y CIFRAS ======================= */

.ticker {
  border-block: 1px solid var(--line-night);
  overflow: hidden;
  padding: 15px 0;
  background: var(--night-2);
  position: relative; z-index: 5;
}
.ticker__track {
  display: flex; width: max-content;
  animation: slide 42s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0 26px; color: var(--on-night-3);
  display: flex; align-items: center; gap: 26px;
  white-space: nowrap;
}
.ticker span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue-hi); flex: none;
}
@keyframes slide { to { transform: translateX(-50%); } }

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line-night);
  background: var(--night-2);
  position: relative; z-index: 5;
  overflow: hidden;
  --paso: 0;
}
/* Un reflejo tenue cruza la franja segun donde este respecto al centro de la
   pantalla. Es scroll, no un bucle que corre solo. */
.stats::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(109, 134, 255, 0.09) 46%,
    rgba(109, 134, 255, 0.16) 50%,
    rgba(109, 134, 255, 0.09) 54%,
    transparent 100%);
  transform: translateX(calc(var(--paso) * 190% - 95%));
}
.stats__item {
  padding: clamp(30px, 4.6vw, 60px) var(--gutter);
  border-left: 1px solid var(--line-night);
  position: relative; z-index: 1;
  min-width: 0;
}
.stats__item:first-child { border-left: 0; }
.stats__num { display: block; }
.stats__item b {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(42px, 5.6vw, 88px); line-height: 0.86;
  display: block; letter-spacing: -0.02em;
}
/* La casilla de palabra no compite en tamano con las cifras: se sostiene
   sola con el corte en diagonal que ya es la firma de la marca. */
.stats__item b.stats__palabra {
  font-size: clamp(26px, 3.4vw, 54px);
  transform: skewX(-11deg);
  transform-origin: left bottom;
  color: var(--blue-glow);
}
/* Hilo que se dibuja de izquierda a derecha al entrar la casilla. */
.stats__linea {
  display: block;
  height: 1px; margin-top: 16px;
  background: linear-gradient(90deg, var(--blue-glow), transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.9s var(--ease) 0.15s;
}
.stats__item.is-in .stats__linea { transform: scaleX(1); }
.stats__item i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-night-3); display: block; margin-top: 12px;
}

/* En telefono tres columnas dejan las cifras en un hilo. Se apilan: la de
   los anos arriba, ancha, y las otras dos debajo repartidas. */
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats__item { padding: 26px var(--gutter); }
  .stats__item:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line-night);
  }
  .stats__item:nth-child(2) { border-left: 0; }
  .stats__item i { font-size: 9.5px; letter-spacing: 0.14em; margin-top: 10px; }
}

html.no-motion .stats::after { display: none; }
html.no-motion .stats__linea { transition: none; transform: scaleX(1); }

/* ================================ 05 · GIRO 360 ========================== */

/* ALTURA Y FLUIDEZ.
   Antes eran 420vh para 12 cuadros: 35vh de scroll por cada cambio de foto.
   Eso se siente atorado — deslizas media pantalla y la camioneta no se
   mueve. A 170vh cada cuadro recibe unos 14vh, que es donde el giro empieza
   a sentirse como rotacion y no como diapositivas.

   La regla practica: mientras menos cuadros haya, MENOS scroll debe cubrir
   la seccion, no mas. */
.spin { position: relative; height: 170vh; background: var(--night); }

.spin__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
}

.spin__glow {
  position: absolute; left: 50%; top: 50%;
  width: 74vmin; height: 74vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(78,102,240,0.20) 0%, transparent 66%);
  filter: blur(40px);
  pointer-events: none;
}

/* Anillo de referencia: comunica que el objeto gira sobre su eje. */
.spin__ring {
  position: absolute; left: 50%; top: 56%;
  width: 62vmin; height: 62vmin;
  transform: translate(-50%, -50%) rotateX(74deg);
  border: 1px solid rgba(120,150,255,0.20);
  border-radius: 50%;
  pointer-events: none;
}
.spin__ring::before {
  content: ""; position: absolute; inset: 13%;
  border: 1px solid rgba(120,150,255,0.10);
  border-radius: 50%;
}

/* La caja sigue la forma REAL del recorte (5:3), no un cuadrado.
   Antes la mitad de la caja era transparencia: la camioneta se dibujaba a
   la mitad de su tamano posible y por eso se veia de baja resolucion. */
.spin__frames {
  position: relative;
  width: min(92vw, 1100px);
  aspect-ratio: 1657 / 995;
  max-height: 62vh;
  display: grid; place-items: center;
}
.spin__frames img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,0.66));
  /* Cruce muy corto: con solo 12 cuadros el salto entre angulos se nota.
     90ms lo suavizan sin llegar a verse dos camionetas encimadas. */
  transition: opacity 0.09s linear;
}
.spin__frames img.is-on { opacity: 1; }

/* Los recortes vienen sin fondo, así que la camioneta queda flotando: sin
   una sombra que la asiente se ve pegada encima, no parada sobre el piso.
   Esta elipse difuminada va debajo del cuadro activo y hace el contacto. */
.spin.is-cutout .spin__frames::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 12%;
  width: 62%; height: 7%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.62) 0%, transparent 72%);
  filter: blur(9px);
  pointer-events: none;
  z-index: -1;
}

/* Sin fondo propio, el recorte necesita su propia caída de luz. */
.spin.is-cutout .spin__frames img {
  filter: drop-shadow(0 26px 34px rgba(0,0,0,0.55));
}

/* Con video la sección cambia de naturaleza: deja de ser un objeto sobre
   fondo negro y pasa a ser una toma a sangre. Por eso el video va a pantalla
   completa y no dentro de una caja centrada. */
.spin__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Sin este velo el texto blanco cae sobre cielo claro y no se lee.
   Oscurece los bordes y respeta el centro de la toma. */
.spin.is-film .spin__stage::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(4,6,15,0.80) 0%, rgba(4,6,15,0.18) 34%, rgba(4,6,15,0.20) 58%, rgba(4,6,15,0.88) 100%),
    linear-gradient(to right, rgba(4,6,15,0.62) 0%, transparent 42%);
  pointer-events: none;
}

/* Con video sobran los adornos de estudio del modo secuencia. */
.spin.is-film .spin__glow,
.spin.is-film .spin__ring { display: none; }

.spin__title {
  position: absolute; left: var(--gutter); top: clamp(84px, 13vh, 130px);
  z-index: 3; pointer-events: none;
}

/* Los cuatro textos que entran por cuarto de vuelta. */
.spin__notes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.spin__note {
  position: absolute;
  width: min(310px, 62vw);
  opacity: 0;
  will-change: transform, opacity;
}
.spin__note b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 0.9;
  text-transform: uppercase; margin-bottom: 10px;
}
.spin__note p { margin: 0; font-size: 14.5px; color: var(--on-night-2); line-height: 1.5; }

.spin__note:nth-child(1) { left: var(--gutter);  top: 34%; }
.spin__note:nth-child(2) { right: var(--gutter); top: 30%; text-align: right; }
.spin__note:nth-child(3) { right: var(--gutter); bottom: 22%; text-align: right; }
.spin__note:nth-child(4) { left: var(--gutter);  bottom: 20%; }

/* Grados girados: refuerza que el scroll controla la rotación. */
.spin__deg {
  position: absolute; right: var(--gutter); top: clamp(84px, 13vh, 130px);
  z-index: 3;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--on-night-3);
  text-align: right;
}
.spin__deg b {
  display: block; font-family: var(--display); font-size: 54px;
  font-weight: 800; color: var(--on-night); line-height: 0.9;
  letter-spacing: -0.01em;
}

.spin__progress {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px;
  height: 1px; background: var(--line-night); z-index: 3;
}
.spin__progress i {
  display: block; height: 100%; width: 0;
  background: var(--blue-glow);
  transform-origin: left;
}

/* ============ 06 · CAPACIDADES — la inversión a fondo claro ============== */

/* El golpe visual de la página: el fondo se invierte y la camioneta viaja
   pegada mientras cambian los paneles. */
.caps {
  position: relative;
  background: var(--ice);
  color: var(--on-ice);
}
.caps__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

.caps__head {
  position: absolute; left: var(--gutter); top: clamp(80px, 12vh, 124px);
  z-index: 3; max-width: 50vw;
}

/* La camioneta que se desplaza con el scroll. */
/* SE DIMENSIONA POR ALTO, NO POR ANCHO.

   Antes iba a min(62vw, 780px) de ancho con caja cuadrada: en una pantalla
   de portatil, con unos 600px utiles de alto, esa caja de 780 se salia de
   la seccion y tapaba el titular y el panel de texto.

   Atarla al alto disponible garantiza que siempre quepa, sea cual sea la
   ventana. Y como se muestra mas chica, el mismo archivo se ve mas nitido:
   menos ampliacion con los mismos bytes. */
.caps__truck {
  position: absolute;
  left: 50%; top: 54%;
  height: min(44vh, 380px);
  width: auto;
  max-width: 58vw;
  aspect-ratio: 1637 / 1000;      /* la forma real del recorte */
  transform: translate(-50%, -50%);
  will-change: transform;
  z-index: 2;
}
.caps__truck img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 42px rgba(6,11,28,0.30));
  transition: opacity 0.35s var(--ease);
}
.caps__truck--single img { opacity: 1; }
.caps__truck--single img.is-out { opacity: 0; }

/* Los recortes no traen piso. Esta elipse los asienta. */
.caps__truck::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 13%;
  width: 58%; height: 6%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(6,11,28,0.30) 0%, transparent 72%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

.caps__panels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.caps__panel {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(60px, 12vh, 130px);
  width: min(390px, 76vw);
  opacity: 0;
  will-change: transform, opacity;
}
.caps__panel .n {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--on-ice-3); display: block; margin-bottom: 14px;
}
.caps__panel b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 4vw, 58px); line-height: 0.88;
  text-transform: uppercase; margin-bottom: 14px;
}
.caps__panel p { margin: 0; color: var(--on-ice-2); font-size: 15.5px; }

/* Puntos de progreso del recorrido */
.caps__dots {
  position: absolute; left: var(--gutter); bottom: clamp(60px, 12vh, 130px);
  z-index: 4; display: flex; flex-direction: column; gap: 13px;
}
.caps__dots i {
  width: 46px; height: 2px; background: var(--line-ice);
  transform: scaleX(0.565); transform-origin: left center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.caps__dots i.is-on { background: var(--blue); transform: scaleX(1); }

/* ========================= BASE DE SECCIONES =============================
   Espaciado y fondos comunes. Estas reglas las usan #giro, #titulo,
   #comprar y #ubicacion; sin ellas las secciones pierden el aire y las
   claras se quedan transparentes, dejando texto oscuro sobre fondo oscuro.
   ========================================================================= */

.section {
  padding: clamp(76px, 11vw, 168px) var(--gutter);
  position: relative;
}

/* Inversion a fondo hielo. El .on-ice que acompania en el HTML cambia los
   colores de texto, borde y botones dentro. */
.section--ice {
  background: var(--ice);
  color: var(--on-ice);
}

.section__inner { max-width: var(--maxw); margin: 0 auto; }

.section__head { margin-bottom: clamp(42px, 6vw, 82px); max-width: 900px; }
.section__head .lede { margin-top: 24px; }

/* ============================== 07 · INVENTARIO ==========================
   "Lo que hay hoy". Seccion fija: al bajar cambia de camioneta con su foto
   real del lote a pantalla completa y la ficha al lado.
   ========================================================================= */

.inv { position: relative; background: var(--night); }

.inv__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

.inv__frame { position: absolute; inset: 0; }

.inv__shot {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.7s var(--ease), transform 1.5s var(--ease);
}
.inv__shot.is-on { opacity: 1; transform: scale(1); }
.inv__shot img { width: 100%; height: 100%; object-fit: cover; }

/* Las fotos son de mediodia: sin velo la ficha blanca no se lee. */
.inv__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(4,6,15,0.76) 0%, rgba(4,6,15,0.10) 30%, rgba(4,6,15,0.30) 58%, rgba(4,6,15,0.94) 100%),
    linear-gradient(to right, transparent 0%, transparent 38%, rgba(4,6,15,0.86) 78%);
  pointer-events: none;
}

.inv__head {
  position: absolute; left: var(--gutter); top: clamp(88px, 13vh, 132px);
  z-index: 3;
}

/* Las fichas se cruzan en el mismo hueco. */
.inv__cards {
  position: absolute;
  right: var(--gutter);
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: min(420px, 78vw);
}
.inv__card {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.inv__cards { display: grid; }
.inv__card.is-on { opacity: 1; transform: none; pointer-events: auto; }

.inv__card-top { display: flex; align-items: baseline; gap: 12px; }
.inv__yr {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--on-night-3); flex: none;
}
.inv__name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 54px); line-height: 0.92;
  text-transform: uppercase; margin: 0;
}

.inv__meta {
  display: flex; flex-wrap: wrap; gap: 7px 16px;
  margin-top: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--on-night-2); text-transform: uppercase;
}

.inv__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.inv__tags span {
  font-family: var(--cond); font-size: 13px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  border: 1px solid var(--line-night);
  background: rgba(4,6,15,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 11px; color: var(--on-night-2);
}
.inv__tags span.is-rebuilt { border-color: rgba(255,190,90,0.42); color: #FFC96B; }

.inv__note { margin: 16px 0 0; font-size: 14px; color: var(--on-night-2); }

.inv__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.inv__num {
  position: absolute; left: var(--gutter); bottom: clamp(52px, 9vh, 92px);
  z-index: 3;
  display: flex; align-items: baseline; gap: 8px;
}
.inv__num b {
  font-family: var(--display); font-size: clamp(44px, 6vw, 76px);
  font-weight: 900; line-height: 0.86; letter-spacing: -0.02em;
}
.inv__num span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--on-night-3); text-transform: uppercase;
}

.inv__dots {
  position: absolute; left: var(--gutter); bottom: clamp(120px, 17vh, 172px);
  z-index: 3; display: flex; gap: 8px;
}
.inv__dots i {
  width: 40px; height: 2px;
  background: rgba(242,245,253,0.28);
  transform: scaleX(0.55); transform-origin: left center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.inv__dots i.is-on { background: var(--blue-glow); transform: scaleX(1); }

@media (max-width: 860px) {
  .inv__cards {
    left: var(--gutter); right: var(--gutter);
    width: auto;
    top: auto; bottom: clamp(96px, 17vh, 150px);
    transform: none;
  }
  .inv__scrim {
    background: linear-gradient(to bottom, rgba(4,6,15,0.72) 0%, rgba(4,6,15,0.12) 26%, rgba(4,6,15,0.62) 58%, rgba(4,6,15,0.96) 100%);
  }
  .inv__num { bottom: clamp(30px, 5vh, 52px); }
  .inv__dots { bottom: clamp(96px, 13vh, 120px); }
  .inv__note { display: none; }
}

/* Sin movimiento: deja de ser fija y se apilan todas las unidades. */
/* Con "reducir movimiento" el inventario NO se desarma.

   Antes se desapilaba en una lista con cinco fotos a tamano completo: se
   perdia el efecto y la seccion se volvia interminable. Pero cambiar de
   unidad al bajar no es movimiento gratuito, lo dirige el scroll del
   visitante. Lo que se apaga es el acercamiento de la foto y el
   desplazamiento de la ficha; el cruce por opacidad se queda. */
html.no-motion .inv__shot {
  transform: none;
  transition: opacity 0.25s linear;
}
html.no-motion .inv__shot.is-on { transform: none; }
html.no-motion .inv__card {
  transform: none;
  transition: opacity 0.22s linear;
}
html.no-motion .inv__card.is-on { transform: none; }


/* ================= 08 · REBUILT / CÓMO COMPRAR / UBICACIÓN ============== */

/* Sección honesta: fondo claro para que se lea como documento, no como venta. */
.rebuilt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.rebuilt__qa { border-top: 1px solid var(--line-ice); }
.rebuilt__qa dt {
  font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 32px);
  text-transform: uppercase; padding-top: 24px; line-height: 1;
}
.rebuilt__qa dd {
  margin: 12px 0 26px; color: var(--on-ice-2);
  border-bottom: 1px solid var(--line-ice); padding-bottom: 26px;
}
.rebuilt__note {
  background: var(--on-ice); color: var(--ice);
  padding: clamp(26px, 3vw, 42px);
}
.rebuilt__note b {
  font-family: var(--display); font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 800; text-transform: uppercase; display: block;
  line-height: 0.92; margin-bottom: 16px;
}
.rebuilt__note p { margin: 0 0 20px; color: rgba(237,241,250,0.72); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-night); }
.steps__item { background: var(--night); padding: clamp(28px, 3.4vw, 50px); }
.steps__item b {
  font-family: var(--display); font-size: 68px; font-weight: 900;
  line-height: 0.8; color: var(--blue-hi); display: block; margin-bottom: 22px;
}
.steps__item h3 {
  font-family: var(--display); font-weight: 800; font-size: 27px;
  text-transform: uppercase; margin: 0 0 12px; line-height: 1;
}
.steps__item p { margin: 0; color: var(--on-night-2); font-size: 15px; }

.place { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.place__map {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-night);
  background: var(--night-2);
  position: relative; overflow: hidden;
}
.place__map iframe {
  width: 100%; height: 100%; border: 0;
  /* El mapa de Google llega en claro y desentona con la pagina. Invertirlo
     y girar el tono lo pasa a oscuro sin pedir una version de pago. */
  filter: invert(0.92) hue-rotate(185deg) saturate(0.75) contrast(0.92);
}
.place__map-link {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(4,6,15,0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-night);
  padding: 10px 16px;
  font-family: var(--cond); font-weight: 600; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.3s;
}
.place__map-link:hover { background: var(--blue); border-color: var(--blue); }
.place__rows { border-top: 1px solid var(--line-night); margin-top: 30px; }
.place__row {
  display: grid; grid-template-columns: 110px 1fr; gap: 18px;
  padding: 17px 0; border-bottom: 1px solid var(--line-night);
  align-items: baseline;
}
.place__row i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-night-3);
}

/* ================================= 09 · FOOTER =========================== */

.foot {
  border-top: 1px solid var(--line-night);
  padding: clamp(56px, 7vw, 96px) var(--gutter) 34px;
  position: relative; overflow: hidden;
}
/* La montaña del logo como marca de agua: cierra el círculo con la identidad. */
.foot__mark {
  position: absolute; right: -6%; bottom: -32%;
  width: min(520px, 56vw); opacity: 0.05; pointer-events: none;
}
.foot__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  position: relative;
}
.foot h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-night-3);
  margin: 0 0 18px; font-weight: 500;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot a:hover { color: var(--blue-glow); }
.foot__legal {
  max-width: var(--maxw); margin: clamp(44px, 6vw, 76px) auto 0;
  padding-top: 24px; border-top: 1px solid var(--line-night);
  display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between;
  font-size: 12.5px; color: var(--on-night-3);
}

/* WhatsApp flotante */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: #1FA855; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(6, 12, 34, 0.48);
  transform: translateY(90px);
  transition: transform 0.45s var(--ease), background 0.25s;
}
.fab.is-on { transform: none; }
.fab:hover { background: #17843F; }

/* ============================ REVELADO AL ENTRAR ========================= */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ================= TACOMA AZUL · ACERCAMIENTO POR SCROLL ================= */

.blue-run {
  position: relative;
  min-height: 380vh;
  background: #031020;
  color: var(--on-night);
}
.blue-run__stage {
  --truck-scale: 1.015;
  --truck-y: 1.5vh;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 56%, rgba(0, 139, 255, 0.22), transparent 42%),
    linear-gradient(180deg, #041326 0%, #020814 100%);
}
.blue-run__stage::after {
  content: "";
  position: absolute;
  inset: auto 5vw 0;
  height: 24vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(1, 6, 15, 0.68));
}
.blue-run__copy {
  position: absolute;
  z-index: 6;
  top: clamp(84px, 11vh, 126px);
  left: var(--gutter);
  width: min(620px, 52vw);
}
.blue-run__copy h2 {
  /* A 6.4vw esto daba 92px en un portatil normal, dos lineas de casi 400px:
     medio alto de pantalla ocupado por el titular, encima de una seccion
     cuyo asunto es la camioneta acercandose. El texto acompana, no compite.
     A 4.4vw sigue siendo un titular grande y deja respirar la toma. */
  max-width: 620px;
  margin: 9px 0 14px;
  font-size: clamp(42px, 4.4vw, 72px);
  line-height: .84;
}
.blue-run__copy > p:last-child {
  max-width: 480px;
  margin: 0;
  color: var(--on-night-2);
  font-size: clamp(14px, 1.2vw, 18px);
}
.blue-run__frames {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translate3d(0, var(--truck-y), 0) scale(var(--truck-scale));
  transform-origin: 52% 62%;
  will-change: transform;
}
.blue-run__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  transition: none;
}
.blue-run__frame.is-on { visibility: visible; }
.blue-run__cards {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.blue-card {
  position: absolute;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 11px;
  width: min(240px, 18vw);
  padding: 9px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 15px;
  background: rgba(3, 12, 26, .67);
  box-shadow: 0 20px 55px rgba(10, 18, 44, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  will-change: transform, opacity;
}
.blue-card--1 { left: var(--gutter); top: 48%; }
.blue-card--2 { left: calc(var(--gutter) + 2.5vw); top: 65%; }
.blue-card--3 { right: var(--gutter); top: 43%; }
.blue-card--4 { right: calc(var(--gutter) + 2.5vw); top: 61%; }
.blue-card img {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
}
.blue-card__num {
  position: absolute;
  top: 7px;
  right: 9px;
  font-family: var(--mono);
  font-size: 8px;
  color: rgba(255,255,255,.45);
}
.blue-card small, .blue-card b { display: block; }
.blue-card small {
  padding-right: 18px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-night-3);
}
.blue-card b {
  margin-top: 4px;
  font-family: var(--display);
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
}
.blue-run__foot {
  position: absolute;
  z-index: 7;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.blue-run__foot > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-night-3);
}
.blue-run__progress {
  position: absolute;
  z-index: 8;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 15px;
  height: 1px;
  background: rgba(255,255,255,.14);
}
.blue-run__progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue-glow);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ================================ RESPONSIVE ============================= */

@media (max-width: 1080px) {
  .inv { grid-template-columns: 1fr; }
  .inv__viewer { position: relative; top: 0; max-height: 52vh; }
  .rebuilt, .place { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav {
    left: 10px; right: 10px;
    padding: 9px 10px 9px 14px;
    gap: 10px;
  }
  .nav__here { display: flex; }
  /* La marca deja de empujar: el hueco libre pasa a la direccion. */
  .nav__brand { margin-right: 0; }
  .nav__brand span { font-size: 18px; }
  .nav__brand img { width: 32px; height: 32px; }
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav > .btn { display: none; }

  /* En pantalla vertical el texto no cabe al lado de la camioneta:
     pasa arriba y la unidad baja. */
  .hero { height: 200vh; }

  .stats { grid-template-columns: 1fr; }
  .stats__item { border-left: 0; border-top: 1px solid var(--line-night); }
  .stats__item:first-child { border-top: 0; }

  .spin { height: 150vh; }
  .spin__note { position: static; width: auto; }
  .spin__notes {
    display: grid; align-content: end;
    padding: 0 var(--gutter) 76px;
  }
  .spin__note { grid-area: 1 / 1; text-align: left !important; }
  .spin__deg { top: auto; bottom: 60px; }

  .caps__head { max-width: none; right: var(--gutter); }
  .caps__truck {
    height: min(30vh, 240px);
    max-width: 92vw;
    top: 40%;
  }
  .caps__panel { left: var(--gutter); right: var(--gutter); width: auto; }
  .caps__dots { flex-direction: row; bottom: 30px; }

  .blue-run { height: 240vh !important; min-height: 240vh; }
  .blue-run__copy { width: auto; right: var(--gutter); }
  .blue-run__copy h2 { font-size: clamp(42px, 15vw, 68px); max-width: 95%; }
  .blue-run__copy > p:last-child { max-width: 88%; font-size: 13px; }
  /* GEOMETRIA, no compresion.

     Los planos son apaisados (1500x844) y la pantalla del telefono es
     vertical. Rellenandola entera con object-fit cover, el navegador tiene
     que estirar la foto 1.3 veces solo para tapar el alto, y con la densidad
     de pantalla eso son 2.6 aumentos reales —3.9 en un iPhone Pro—. De ahi
     venia lo pixelado, y ninguna calidad de archivo lo arregla: es que se
     esta pidiendo mas alto del que la foto tiene.

     Los planos pasan a ocupar una banda ancha en la parte alta. La camioneta
     se ve entera en vez de recortada por los lados, y la ampliacion baja a
     0.9. Las tarjetas ya vivian abajo, asi que la composicion no cambia. */
  /* La banda va de borde a borde y se funde arriba y abajo: se lee como una
     ventana a la escena, no como una foto pegada encima.

     Se probo con contain —el plano entero, con sus margenes— para ganar
     nitidez, y fue peor: al verse los bordes del rectangulo, agrandarlo se
     leia como "la misma foto, mas grande", que es exactamente lo contrario
     de lo que la seccion tiene que contar. El recorte de cover no se nota;
     un marco que crece, si. */
  .blue-run__frames {
    inset: 10vh 0 auto 0;
    height: min(53vh, 430px);
    transform-origin: 50% 52%;
  }
  .blue-run__frame {
    object-fit: cover;
    object-position: 50% 46%;
  }

  /* Los bordes de la banda se funden con el fondo de la escena para que no
     se lea como un recorte pegado encima. */
  .blue-run__frames::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg,
      #041326 0%, rgba(4, 19, 38, 0) 14%,
      rgba(2, 8, 20, 0) 84%, #020814 100%);
  }
  .blue-run__cards {
    top: auto;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 84px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    align-content: end;
  }
  .blue-card,
  .blue-card--1, .blue-card--2, .blue-card--3, .blue-card--4 {
    position: relative;
    inset: auto;
    width: auto;
    grid-template-columns: 52px 1fr;
    gap: 7px;
    padding: 6px;
    border-radius: 11px;
  }
  .blue-card img { width: 52px; height: 42px; border-radius: 7px; }
  .blue-card small { font-size: 6.5px; }
  .blue-card b { font-size: 12px; }
  .blue-run__foot { bottom: 25px; }
  .blue-run__foot > span { display: none; }
  .blue-run__foot .btn { margin-left: auto; padding: 12px 16px; }
}

/* Con "reducir movimiento" esta seccion NO se desarma.

   Antes se aplastaba a una pantalla, se ocultaban tres de los cuatro planos
   y las cuatro tarjetas quedaban visibles desde el principio: el
   acercamiento desaparecia y la seccion se sentia muerta.

   Pero pasar de un plano al siguiente al bajar no es movimiento gratuito:
   lo dirige el scroll de quien mira. Eso se queda. Lo que se apaga es el
   zoom continuo y el desplazamiento vertical, que son lo que marea. */
/* Sin movimiento se congela la deriva vertical, pero NO el acercamiento en
   telefono: ahi el acercamiento es el contenido de la seccion y solo avanza
   si el visitante baja. Apagarlo dejaba la camioneta quieta y la seccion sin
   nada que contar. */
html.no-motion .blue-run__stage { --truck-y: 0vh; }
@media (min-width: 768px) {
  /* El acercamiento tampoco: es lo unico que la seccion ensena, y solo
     avanza si el visitante baja. Lo que si se apaga es la deriva vertical
     de arriba, que esa si es adorno. */
}
/* Cruces mas cortos: el cambio se lee como avance, no como fundido lento. */
/* Con cuarenta planos el cambio entre uno y otro es minimo: un fundido
   deja ver el plano lejano por debajo del cercano y se leen como dos
   camionetas superpuestas. El cambio va seco tambien sin movimiento. */
html.no-motion .blue-run__frame { transition: none; }
html.no-motion .blue-card { transition: opacity 0.15s linear; }

/* Estas dos reglas habian perdido su @media y quedaban sueltas, dejando
   ademas un cierre de mas que hacia al navegador descartar reglas hasta
   recuperarse. Se les devuelve el bloque al que pertenecen. */
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
}

/* ======================= REDUCIR MOVIMIENTO ==============================
   Se maneja con la clase html.no-motion, que pone el JavaScript, en vez de
   una media query combinada con un atributo.

   Por que: la combinacion anterior dependia de que el navegador reevaluara
   una media query al cambiar un atributo del html, y en la practica no
   siempre ganaba la regla correcta. Eso dejaba menus invisibles y fotos
   apiladas a tamano completo sin motivo aparente. Una clase no tiene esa
   ambiguedad: esta o no esta.
   ======================================================================== */

/* ============================== ACCESIBILIDAD ============================ */

:where(a, button):focus-visible {
  outline: 2px solid var(--blue-glow);
  outline-offset: 3px;
}

/* Sin movimiento: las secciones fijas se vuelven bloques normales y todo
   queda legible. La página nunca depende del scroll para tener sentido. */
/* `html:not([data-motion="on"])` deja que ?motion=on muestre los efectos aun
   con la preferencia del sistema activada. Sin ese parámetro manda el sistema. */
/* Preferencia de "reducir movimiento".
   Lo que se apaga: lo que se mueve solo sin que el usuario lo pida — la
   cinta infinita, la flecha que late, el parpadeo del velo.
   Lo que se CONSERVA: el diseno completo. Las secciones siguen fijas, los
   textos en su lugar y el giro sigue cambiando de cuadro con el scroll,
   porque eso lo controla la mano del usuario, no la pagina. Aplanar el
   maquetado aqui no ayudaba a nadie: dejaba la pagina desarmada. */
html.no-motion { scroll-behavior: auto; }

html.no-motion .ticker__track,
html.no-motion :is(.cue-dot, .hero__cue-chev svg) {
  animation: none;
}
html.no-motion .ticker__track { transform: none; }

/* Los cambios de estado se quedan, pero instantaneos. */
html.no-motion :is(.reveal, .inv__viewer img, .caps__truck img, .btn, .nav) {
  transition-duration: 0.08s;
}
html.no-motion .reveal { opacity: 1; transform: none; }



/* ============================== PRECARGA ================================
   La pagina se retiene hasta que el hero esta completo. Sin esto el primer
   scroll cae sobre cuadros que aun no llegaron y el recorrido salta justo
   en el peor momento: la primera impresion.
   ======================================================================== */

/* Mientras carga no se puede hacer scroll: evita que el visitante entre al
   recorrido antes de tiempo. */
html.is-loading, html.is-loading body { overflow: hidden; }

.load {
  position: fixed; inset: 0; z-index: 300;
  background: var(--night);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  transition: opacity 0.6s var(--ease);
}
.load.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.load__logo {
  width: clamp(84px, 15vw, 132px);
  height: auto;
  animation: loadPulse 2.4s var(--ease-io) infinite;
}
@keyframes loadPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50%      { opacity: 1;    transform: scale(1); }
}

.load__bar {
  width: min(240px, 56vw);
  height: 2px;
  background: rgba(242,245,253,0.14);
  overflow: hidden;
}
.load__bar i {
  display: block; height: 100%; width: 100%;
  background: var(--blue-glow);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s linear;
}

.load__pct {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--on-night-3);
}

html.no-motion .load__logo { animation: none; }
/* El punto deja de latir, pero se queda: sigue marcando la ubicacion. */
html.no-motion .nav__dot::after { animation: none; opacity: 0; }
/* El reflejo del borde se detiene, pero se queda puesto en una posicion
   que se lee bien: sigue dando el acabado metalico. */
html.no-motion .nav::before { animation: none; --giro: 300deg; }



/* ========================= SLIDER DE UNIDADES ===========================
   Las camionetas van pasando solas. Los recortes no traen fondo, asi que la
   seccion pone el suyo: resplandor detras y sombra de contacto debajo.
   ======================================================================== */

.spec { background: var(--night-2); border-block: 1px solid var(--line-night); }

.spec__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.spec__label { transition: opacity 0.3s var(--ease); }

.spec__stage { position: relative; }

.spec__viewer {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.spec__viewer::before {
  content: "";
  position: absolute; left: 50%; top: 52%;
  width: 92%; height: 76%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(78,102,240,0.22) 0%, transparent 68%);
  filter: blur(30px);
}
.spec__viewer::after {
  content: "";
  position: absolute; left: 50%; bottom: 9%;
  width: 60%; height: 6%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.62) 0%, transparent 72%);
  filter: blur(11px);
}

/* Cada unidad entra deslizando desde la derecha y sale hacia la izquierda:
   es el gesto que hace que se lea como carrusel y no como parpadeo. */
.spec__slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
  transform: translateX(9%) scale(0.97);
  transition: opacity 0.55s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
}
.spec__slide.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.spec__slide img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,0.55));
}

.spec__arrow {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-night);
  background: rgba(4,6,15,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--on-night);
  opacity: 0;
  transition: opacity 0.3s var(--ease), background 0.3s, border-color 0.3s;
}
.spec__viewer:hover .spec__arrow,
.spec__arrow:focus-visible { opacity: 1; }
.spec__arrow:hover { background: var(--blue); border-color: var(--blue); }
.spec__arrow:first-of-type { left: 0; }
.spec__arrow:last-of-type { right: 0; }

.spec__dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.spec__dot {
  width: 46px; height: 3px;
  background: rgba(242,245,253,0.20);
  padding: 0;
  transform: scaleX(0.565); transform-origin: left center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.spec__dot:hover { background: rgba(242,245,253,0.45); }
.spec__dot.is-on { background: var(--blue-glow); transform: scaleX(1); }

.spec__list { list-style: none; margin: 0; padding: 0; display: grid; }

.spec__item {
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-top: 1px solid var(--line-night);
}
.spec__item:last-child { border-bottom: 1px solid var(--line-night); }
.spec__item b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 38px); line-height: 0.95;
  text-transform: uppercase; margin-bottom: 8px;
}
.spec__item p { margin: 0; color: var(--on-night-2); font-size: 14.5px; }

@media (max-width: 860px) {
  .spec__grid { grid-template-columns: 1fr; }
  .spec__viewer { aspect-ratio: 16 / 11; }
  /* En tactil no hay cursor que revele las flechas: se quedan puestas. */
  .spec__arrow { opacity: 1; width: 40px; height: 40px; }
}

/* Con "reducir movimiento" el carrusel NO se apaga: sigue enseniando el
   inventario, pero cambia por fundido en vez de deslizar. */
html.no-motion .spec__slide {
  transform: none;
  transition: opacity 0.28s linear;
}
html.no-motion .spec__slide.is-on { transform: none; }



/* ========================= MENU DE TELEFONO =============================
   Hoja de vidrio que se despliega DESDE la barra, no desde el borde de la
   pantalla: se lee como que la barra crece, no como una capa que aterriza
   encima. Los renglones entran escalonados.
   ======================================================================== */

.sheet {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  padding: 10px;
  border-radius: 26px;

  background: rgba(12, 17, 36, 0.72);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);

  /* Nace desde el borde superior: crece hacia abajo. */
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scaleY(0.94);
  /* visibility NO va en la transicion. Una transicion que se queda a medias
     (pestana en segundo plano, navegador que no compone) dejaria el menu
     invisible y sin forma de abrirlo. Al conmutarla en seco, el menu
     siempre aparece; lo unico que se pierde es el fundido de salida. */
  transition:
    opacity 0.32s var(--ease),
    transform 0.42s var(--ease);
}
.nav.is-open .sheet {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sheet__list { display: grid; }

.sheet__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 14px;
  border-radius: 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--on-night);

  /* Cada renglon entra desde la izquierda. El retraso lo pone el JS, para
     que el escalonado siga el orden real de la lista. */
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease), background 0.2s;
}
.nav.is-open .sheet__row { opacity: 1; transform: none; }
.sheet__row:active { background: rgba(255, 255, 255, 0.07); }

.sheet__row i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--blue-glow);
  flex: none;
  padding-top: 4px;
}
.sheet__row span { flex: 1; }
.sheet__row em { display: flex; color: var(--on-night-3); }

.sheet__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sheet__foot .btn {
  display: flex;
  justify-content: center;
  border-radius: 100px;
  padding: 14px 20px;
}

.sheet__addr {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 14px 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--on-night-2);
  line-height: 1.4;
}

/* Fondo que apaga la pagina detras. Cerrar tocando fuera es el gesto que
   todo el mundo intenta primero. */
.sheet__back {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(4, 6, 15, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.34s var(--ease);
}
.sheet__back.is-on { opacity: 1; visibility: visible; }

@media (max-width: 860px) {
  .sheet { display: block; }
}

/* Sin movimiento la hoja aparece y desaparece, sin crecer ni deslizarse. */
html.no-motion .sheet { transform: none; }
html.no-motion .sheet__row { opacity: 1; transform: none; }


/* ========================== EL ULTIMO TRAMO =============================
   El pie cierra el viaje que abre la pagina: se entra por la carretera y
   aqui se llega al local. La calle cruza el ancho, la Tacoma la recorre
   con el scroll y al final aparece la direccion.
   ======================================================================== */

.foot { position: relative; }

.foot__viaje {
  max-width: var(--maxw);
  margin: 0 auto clamp(56px, 7vw, 92px);
  position: relative;
}

/* La calle. El degradado de los lados la desvanece en vez de cortarla en
   seco: sugiere que sigue mas alla de la pantalla. */
.foot__road {
  --avance: 0;
  position: relative;
  height: clamp(96px, 13vw, 150px);
  margin: clamp(26px, 4vw, 44px) 0 clamp(18px, 2.5vw, 30px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.foot__road-line {
  position: absolute;
  left: 0; right: 0; bottom: 26%;
  height: 2px;
  background: rgba(242, 245, 253, 0.16);
}
/* La raya discontinua del centro. Se dibuja con un degradado repetido en
   vez de con elementos: una sola capa, cero nodos extra. */
.foot__road-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    to right,
    var(--blue-glow) 0 34px,
    transparent 34px 74px
  );
  opacity: 0.5;
  /* Se ilumina el tramo ya recorrido. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--avance) * 100%), transparent 0);
  mask-image: linear-gradient(to right, #000 calc(var(--avance) * 100%), transparent 0);
}

.foot__truck {
  position: absolute;
  left: 0;
  bottom: 8%;
  width: clamp(150px, 20vw, 260px);
  height: auto;
  will-change: transform;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));
}

/* La direccion se lee SIEMPRE. Antes empezaba al 42% y subia con una
   transicion al llegar la camioneta, pero una transicion que se queda a
   medias dejaria el dato mas importante del pie medio borrado. Lo que
   celebra la llegada es el destello del punto, no la legibilidad. */
.foot__destino {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.foot__destino.is-on .foot__pin {
  box-shadow: 0 0 0 5px rgba(109, 134, 255, 0.20);
}
.foot__destino b {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 34px);
  text-transform: uppercase;
  line-height: 1;
}
.foot__destino > span:last-child {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--on-night-2);
}

/* El punto de destino, con el mismo latido que el de la barra: es el gesto
   que la gente asocia con "aqui estas". */
.foot__pin {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue-glow);
  flex: none;
  align-self: center;
}
.foot__pin::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--blue-glow);
  animation: latido 2.2s var(--ease-io) infinite;
}

@media (max-width: 860px) {
  .foot__truck { width: 46vw; }
  .foot__road { height: 88px; }
}

/* Con "reducir movimiento" el recorrido se conserva: lo dirige el scroll.
   Lo unico que se apaga es el latido del punto, que corre solo. */
html.no-motion .foot__pin::after { animation: none; opacity: 0; }

/* Aviso de foto de referencia. Discreto pero legible: no se esconde, pero
   tampoco compite con el nombre de la unidad. */
.inv__ref {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #FFC96B;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inv__ref::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* =============== BARRA SIN VIDRIO EN TELEFONO ===========================
   El desenfoque de la barra se comia justo la franja donde esta el cartel
   del local, que es lo primero que tiene que leerse al abrir. En una
   pantalla de telefono la barra ocupa una porcion grande del hero, asi que
   ese efecto costaba mucho mas de lo que aportaba.

   Se retira el cristal y queda la barra limpia sobre la imagen. La
   legibilidad la da una sombra de texto, que no tapa nada.
   ======================================================================== */

/* El mismo criterio en escritorio: sobre el hero, la barra no tapa. El
   cartel del local es lo primero que tiene que leerse. */
.nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
.nav::before { display: none; }

.nav__brand span,
.nav__links a,
.nav__here {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.nav__brand img { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65)); }

/* Al bajar si necesita fondo, pero plano: un velo, no un cristal. */
.nav.is-stuck {
  background: rgba(4, 6, 15, 0.88);
  border-color: var(--line-night);
}
.nav.is-stuck.on-ice {
  background: rgba(237, 241, 250, 0.94);
  border-color: var(--line-ice);
}
.nav.is-stuck :is(.nav__brand span, .nav__links a, .nav__here) { text-shadow: none; }
.nav.is-stuck .nav__brand img { filter: none; }

@media (max-width: 860px) {
  .nav,
  .nav.is-stuck {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
  }
  /* Sin el reflejo giratorio: sin cristal no tiene borde que recorrer. */
  .nav::before { display: none; }

  .nav__brand span,
  .nav__here,
  .nav__toggle {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
  }
  .nav__brand img {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
  }
  .nav__toggle span,
  .nav__toggle span::before,
  .nav__toggle span::after {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  }

  /* Al bajar, fuera del hero, la barra si necesita fondo para leerse sobre
     secciones claras y oscuras. Un velo plano, sin desenfoque. */
  .nav.is-stuck { background: rgba(4, 6, 15, 0.86); }
  .nav.is-stuck.on-ice { background: rgba(237, 241, 250, 0.92); }
}

/* ========================== EL MURO DE TACOMAS ==========================
   Dos filas cruzandose. El ojo lee abundancia antes que cualquier texto.
   ======================================================================== */

.muro { position: relative; background: var(--night); }

.muro__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 4vh, 44px);
  overflow: hidden;
}

.muro__cabecera { padding: 0 var(--gutter); flex: none; }
.muro__cabecera .lede { margin-top: 18px; }

.muro__filas {
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  flex: none;
  /* Los bordes se desvanecen: la tira no termina, sigue. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.muro__fila {
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  width: max-content;
  will-change: transform;
}

.muro__pieza {
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line-night);
  background: var(--night-2);
  flex: none;
}
.muro__pieza img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.muro__pieza:hover img { transform: scale(1.06); }

.muro__cta {
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  flex: none;
}
.muro__nota {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--on-night-3);
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .muro { height: 190vh !important; }
  .muro__pieza { width: 58vw; border-radius: 11px; }
  .muro__cabecera .lede { display: none; }
}

/* El cruce de las filas lo dirige el scroll, asi que se conserva con
   "reducir movimiento". Lo unico que se apaga es el zoom al pasar el
   cursor, que no depende de nadie. */
html.no-motion .muro__pieza img { transition: none; }
html.no-motion .muro__pieza:hover img { transform: none; }

/* ======================= HECHAS PARA AGUANTAR ==========================
   Cada capacidad ocupa la pantalla con una fotografia que la demuestra.
   ======================================================================== */





/* Sin este velo el texto blanco se pierde sobre nieve o desierto. */

/* El numero enorme al fondo: da escala y marca en cual vas. */




@media (max-width: 860px) {
}

/* El cambio de bloque lo dirige el scroll: se conserva. Solo se apaga el
   acercamiento continuo de la foto. */

/* ==================== LO QUE TRAE UNA TACOMA ===========================
   Acordeon de cuatro paneles verticales. El activo se abre, los otros se
   comprimen: en una mirada se ve cuantos hay y cual estas viendo.
   ======================================================================== */






/* El parrafo solo aparece en el panel abierto: en los estrechos no cabria. */

@media (max-width: 860px) {
  /* En vertical el acordeon se apila: cuatro tiras horizontales. */
}


/* ================= PREGUNTAS DEL TITULO, NUMERADAS =====================
   La seccion mas delicada de la pagina tiene que leerse como documento, no
   como argumentario de venta. Numeros, reglas finas y aire.
   ======================================================================== */

.rebuilt__qa dt {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 4px 14px;
}
.rebuilt__qa dt i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--blue);
  padding-top: 8px;
}
.rebuilt__qa dd { padding-left: 56px; }

@media (max-width: 620px) {
  .rebuilt__qa dt { grid-template-columns: 30px 1fr; gap: 4px 10px; }
  .rebuilt__qa dd { padding-left: 40px; }
}

/* ===================== TRES PASOS, EN LINEA ============================
   Antes eran tres cajas iguales en fila: legible y sin jerarquia. Ahora es
   una linea de tiempo, con un hilo que une los pasos. El hilo es lo que
   comunica que hay un orden y que es corto.
   ======================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  background: none;
}

.steps__item {
  background: none;
  padding: 0;
  display: grid;
  gap: 18px;
}

.steps__marca {
  display: flex;
  align-items: center;
  gap: 14px;
}
.steps__marca b {
  font-family: var(--display);
  font-size: clamp(40px, 4.4vw, 66px);
  font-weight: 900;
  line-height: 0.8;
  color: var(--blue-hi);
  display: block;
  margin: 0;
  flex: none;
}
/* El hilo que une los pasos. En el ultimo se desvanece: la linea termina
   donde termina el proceso. */
.steps__marca i {
  display: block;
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, var(--line-night), transparent);
}
.steps__item:last-child .steps__marca i { opacity: 0.35; }

.steps__cuerpo h3 {
  font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px);
  text-transform: uppercase; margin: 0 0 10px; line-height: 1;
}
.steps__cuerpo p { margin: 0; color: var(--on-night-2); font-size: 15px; }

.steps__cierre {
  grid-column: 1 / -1;
  margin-top: clamp(28px, 4vw, 52px);
  padding-top: clamp(22px, 3vw, 36px);
  border-top: 1px solid var(--line-night);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.steps__cierre p {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 21px);
  color: var(--on-night);
  max-width: 46ch;
}

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps__marca i { display: none; }
  .steps__cierre { flex-direction: column; align-items: flex-start; }
}

/* ========================= PIE MAS COMPACTO ============================
   Estaba desproporcionado: el recorrido de la calle mas tres columnas mas
   la linea legal ocupaban casi dos pantallas. En una landing cuyo objetivo
   es llevar al catalogo, el pie no debe competir con el contenido.
   ======================================================================== */

.foot { padding-top: clamp(44px, 6vw, 76px); padding-bottom: 26px; }

.foot__viaje { margin-bottom: clamp(34px, 4.5vw, 58px); }
.foot__road { height: clamp(72px, 9vw, 110px); margin: clamp(18px, 2.5vw, 30px) 0 14px; }
.foot__truck { width: clamp(120px, 15vw, 200px); }

/* Los enlaces de navegacion sobran en el pie: la barra los tiene y el menu
   de telefono tambien. Repetirlos solo alargaba la pagina. */
.foot__grid > div:nth-child(2) { display: none; }
.foot__grid {
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 4vw, 56px);
}

.foot__mark { width: min(360px, 42vw); bottom: -26%; opacity: 0.04; }

.foot__legal {
  margin-top: clamp(28px, 3.5vw, 46px);
  padding-top: 18px;
  font-size: 11.5px;
}

@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr; gap: 26px; }
  .foot__viaje h2 { font-size: clamp(28px, 8vw, 44px); }
}

/* ===================== EL EMBUDO: SIEMPRE EL CATALOGO ==================
   El boton flotante aparecia recien pasado el hero y era un circulo mudo.
   Ahora se extiende con texto en cuanto el visitante lleva medio recorrido:
   a esa altura ya sabe que quiere, y el boton deja de ser un icono para
   pasar a ser una invitacion.
   ======================================================================== */

.fab {
  width: auto;
  height: 52px;
  border-radius: 100px;
  padding: 0 16px;
  gap: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(6, 12, 34, 0.5);
}
.fab svg { flex: none; }
.fab__txt {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: max-width 0.55s var(--ease), opacity 0.4s var(--ease), margin-left 0.55s var(--ease);
}
.fab.is-wide .fab__txt {
  max-width: 190px;
  opacity: 1;
  margin-left: 10px;
}

@media (max-width: 480px) {
  .fab.is-wide .fab__txt { max-width: 120px; font-size: 13.5px; }
}

/* ==================== AFINADO PARA TELEFONO ============================
   Las secciones nuevas se disenaron primero en pantalla ancha. Aqui se
   corrigen las tres cosas que en vertical no funcionaban igual.
   ======================================================================== */

@media (max-width: 640px) {
  /* 1. Los titulares gigantes robaban la mitad de la pantalla y dejaban el
        contenido sin aire. */
  .h-lg { font-size: clamp(34px, 10vw, 52px); }
  .h-md { font-size: clamp(28px, 8.5vw, 44px); }

  /* 2. El acordeon cerrado dejaba los titulos apretados contra el borde. */

  /* El muro con piezas mas anchas se lee mejor que con muchas pequenas. */
  .muro__pieza { width: 68vw; }
  .muro__cta { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* La seccion del titulo respira. */
  .rebuilt { gap: 34px; }
  .rebuilt__note { padding: 24px 20px; }
}

/* El boton flotante no puede taparse con el pie ni con el boton de
   WhatsApp del sistema en iOS. */
@media (max-width: 860px) {
  .fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ EL TITULO, EN FRANJA ==================================== */

.banda {
  background: var(--ice);
  color: var(--on-ice);
  padding: clamp(44px, 6vw, 82px) var(--gutter);
}
.banda__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.banda__texto .lede { margin-top: 14px; }
.banda__cta { display: grid; gap: 12px; justify-items: start; }
.banda__cta small {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--on-ice-2);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .banda__inner { grid-template-columns: 1fr; gap: 22px; }
}

/* ============ LA LLEGADA: LA RAYITA DESEMBOCA EN EL MAPA ============== */

.foot__llegada {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(14px, 2vw, 24px);
}

.foot__mapa {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-night);
  background: var(--night-2);
}
.foot__mapa iframe {
  width: 100%; height: 100%; border: 0;
  /* El mapa de Google llega en claro y desentona. Invertirlo y girar el
     tono lo pasa a oscuro sin pedir una version de pago. */
  filter: invert(0.92) hue-rotate(185deg) saturate(0.72) contrast(0.9);
}
/* El punto marca la entrada, y se enciende cuando la camioneta llega. */
.foot__mapa .foot__pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.35;
  transition: opacity 0.5s var(--ease);
}
.foot__mapa.is-on .foot__pin { opacity: 1; }

.foot__mapa-link {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(4,6,15,0.82);
  border: 1px solid var(--line-night);
  padding: 9px 14px;
  border-radius: 100px;
  font-family: var(--cond); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.3s;
}
.foot__mapa-link:hover { background: var(--blue); border-color: var(--blue); }

.foot__datos b {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 36px);
  text-transform: uppercase; line-height: 1;
  margin-bottom: 10px;
}
.foot__datos p { margin: 0; color: var(--on-night-2); font-size: 15px; }
.foot__enlaces {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 16px 0 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
}
.foot__enlaces a { color: var(--on-night-2); }
.foot__enlaces a:hover { color: var(--blue-glow); }

@media (max-width: 860px) {
  .foot__llegada { grid-template-columns: 1fr; gap: 20px; }
}

/* ========= EL ACORDEON PASA A SLIDER EN TELEFONO ======================
   Apilado en vertical, cuatro tiras que se abren y cierran obligaban a
   scrollear dentro de una seccion que ya vive dentro del scroll de la
   pagina. Se pierde el sentido de donde estas.

   En telefono se convierte en una tira horizontal que se desliza con el
   dedo: un gesto que ahi si es natural.
   ======================================================================== */

@media (max-width: 860px) {

  /* Todos abiertos: en una tira que se desliza no hace falta comprimir
     ninguno, y el texto se lee entero en cada uno. */
}

/* La primera toma del hero se queda de fondo: si un cuadro tarda en
   decodificarse, por debajo se ve la imagen y no el negro de la seccion. */
.hero__seq img.is-base { opacity: 1; z-index: 0; }
.hero__seq img.is-on { z-index: 1; }

/* La camioneta del pie recorre toda la calle. */
.foot__truck { left: 0; }

/* ========================= MICRO INTERACCION ===========================
   Tres gestos, y solo tres. Una pagina con animacion en todo cansa antes de
   que el visitante llegue al catalogo.
   ======================================================================== */

/* 1 · TITULARES PALABRA POR PALABRA.
   Cada palabra vive dentro de una mascara y entra desde abajo. Solo se
   anima transform: no toca el layout, asi que no cuesta nada aunque el
   titular sea enorme. */
.titulo-anim { overflow: visible; }
.pal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* AIRE ARRIBA, NO UN PELO DE AIRE.

     A 0.12em la mascara cortaba en horizontal la parte alta de las
     mayusculas en cuanto el titular crecia: en escritorio ancho el titulo
     de "Conoce nuestro catalogo actualizado" salia decapitado. La display
     es condensada y sus mayusculas se salen del cuadro de la tipografia
     bastante mas de lo que 0.12em deja pasar.

     Solo se abre por arriba. Por abajo la mascara tiene que seguir cerrada,
     que es justo lo que esconde la palabra mientras espera para subir. */
  padding: 0.34em 0 0.06em;
  margin: -0.34em 0 -0.06em;
}
.pal > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform 0.85s var(--ease);
}
.titulo-anim.is-in .pal > i { transform: none; }

/* El .reveal general mueve el bloque entero; aqui sobra, porque el
   movimiento ya lo hace cada palabra. */
.titulo-anim.reveal { transform: none; opacity: 1; }

/* 2 · BOTONES MAGNETICOS.
   El desplazamiento lo escribe el JavaScript; aqui solo se define como
   vuelve a su sitio. */
/* El tiron magnetico sigue al raton: 0.4s se sentia como arrastrar algo
   con retraso. A 0.25s el boton va con el cursor, no detras. */
.btn--wa { transition: transform 0.25s var(--ease), background 0.3s; }

/* 3 · LUZ QUE SIGUE AL CURSOR EN LOS PANELES.
   Refuerza cual esta activo sin necesidad de mas texto ni bordes. */

/* Subrayado que se dibuja de izquierda a derecha en los enlaces del pie. */
.foot__enlaces a {
  position: relative;
  padding-bottom: 2px;
}
.foot__enlaces a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.foot__enlaces a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Todo esto se apaga sin movimiento: son adornos que corren solos, no
   informacion que dirija el visitante. */
html.no-motion .pal > i { transform: none; transition: none; }
html.no-motion .foot__enlaces a::after { transition: none; }

/* ===================== VOLVER ARRIBA, CON ANILLO =======================
   El boton tipico es una flecha que aparece. Este ademas dibuja en su
   propio borde cuanto llevas recorrido: el visitante ve donde esta sin que
   la pagina se lo diga con palabras.

   Va a la IZQUIERDA. La derecha es del catalogo, y el catalogo manda: los
   dos nunca compiten por el mismo sitio.
   ======================================================================== */

.subir {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 80;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 13, 30, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--on-night);
  /* Nace hundido y girado: al aparecer se endereza, y ese gesto minusculo
     es lo que lo separa de un boton que simplemente se enciende. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  transition:
    opacity 0.4s var(--ease),
    transform 0.55s var(--ease),
    background 0.3s,
    border-color 0.3s;
}
.subir.is-on { opacity: 1; visibility: visible; transform: none; }
.subir:hover {
  background: rgba(14, 21, 48, 0.88);
  border-color: rgba(109, 134, 255, 0.55);
}
.subir:active { transform: scale(0.94); }

/* Sin ventana ni recorte: la flecha se dibuja entera, siempre. */
.subir__flecha {
  display: grid;
  place-items: center;
  line-height: 0;
}
.subir__flecha svg {
  transition: transform 0.3s var(--ease);
}
.subir:hover .subir__flecha svg,
.subir:focus-visible .subir__flecha svg { transform: translateY(-2px); }

html.no-motion .subir__flecha svg { transition: none; transform: none; }
html.no-motion .subir:hover .subir__flecha svg { transform: none; }

/* El anillo va por encima, girado para que empiece arriba.

   OJO CON EL SELECTOR. Esto era ".subir svg", que alcanzaba tambien al svg
   de la flecha: se la llevaba a position absolute, la estiraba a todo el
   boton y —lo peor— le aplicaba el rotate(-90deg) pensado para el anillo.
   La flecha llevaba semanas apuntando a la izquierda, y mirando el trazado
   del svg parecia correcta. Va por clase, no por etiqueta. */
.subir__anillo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.subir__pista {
  fill: none;
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 1.4;
}
.subir__aro {
  fill: none;
  stroke: var(--blue-glow);
  stroke-width: 1.4;
  stroke-linecap: round;
  /* Sin transicion: el anillo sigue al dedo, no lo persigue con retraso. */
}

@media (max-width: 860px) {
  .subir {
    left: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    /* Dos pixeles mas que en escritorio: con el dedo hace falta algo de
       margen, pero sigue siendo un boton discreto. */
    width: 40px; height: 40px;
  }
}

/* ================= WHATSAPP EN LA BARRA, DISCRETO ======================
   En telefono no cabe el boton completo, pero el catalogo tiene que estar
   siempre a un toque. Un icono basta.
   ======================================================================== */

.nav__wa {
  display: none;
  width: 38px; height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #4BD25F;
  flex: none;
  transition: transform 0.35s var(--ease), color 0.3s;
}
.nav__wa svg { width: 22px; height: 22px; }
.nav__wa:hover { transform: scale(1.1); color: #6BEA7E; }
.nav__wa:active { transform: scale(0.92); }

@media (max-width: 860px) {
  .nav__wa { display: grid; }
  .nav__wa svg { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)); }
}

/* Sin movimiento los dos aparecen sin gesto, pero el anillo se queda: es
   informacion sobre donde estas, no un adorno. */
html.no-motion .subir { transition: opacity 0.15s linear; transform: none; }
html.no-motion .subir.is-on { transform: none; }
html.no-motion .subir__flecha,
html.no-motion .nav__wa { transition: none; }

/* Recorrido de la Tacoma azul: el plano activo se pinta encima del primero,
   que se queda de fondo para que nunca haya un hueco si un cuadro tarda.
   Sin estas dos reglas los cuarenta planos quedan en opacidad cero y la
   seccion muestra los textos sobre un fondo vacio. */
.blue-run__frame.is-on { opacity: 1; visibility: visible; }
.blue-run__frame.is-base { opacity: 1; z-index: 0; }
.blue-run__frame.is-on:not(.is-base) { z-index: 1; }

/* ===================== PISTA DE SCROLL EN SECCIONES FIJAS ================
   Una seccion que solo cambia si sigues bajando tiene que decirlo. El hero
   lleva su propio aviso, mas grande; estas llevan la version chica. Se apaga
   en cuanto la seccion arranca: ya cumplio, y dejarla puesta solo tapa. */
.pista {
  position: absolute;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  pointer-events: none;
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242, 245, 253, 0.55);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  will-change: opacity;
}
.pista__chev { display: grid; gap: 1px; color: rgba(242, 245, 253, 0.42); }
.pista__chev svg:first-child { animation: pistaChev 1.9s var(--ease-io) infinite; }
.pista__chev svg:last-child  { animation: pistaChev 1.9s var(--ease-io) 0.18s infinite; }
@keyframes pistaChev {
  0%, 100% { opacity: 0.2; transform: translateY(-2px); }
  50%      { opacity: 1;   transform: translateY(2px); }
}

/* Sobre fondo claro la pista se invierte, o no se lee. */
.section--ice .pista,
.section--ice .pista__chev,

@media (max-width: 767px) {
  .pista { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 8px; }
}

/* Sin movimiento las flechas se quedan quietas, pero la pista se queda: es
   una instruccion, no un adorno. */
html.no-motion .pista__chev svg { animation: none; opacity: 0.6; }

/* ================= PULIDO DE MOVIMIENTO (auditoria de craft) =============
   Cuatro cosas que salieron al medir el movimiento contra el listón de Emil
   Kowalski. Las tres primeras se notan; la cuarta es higiene. */

/* 1 · RESPUESTA AL PULSAR EN LOS BOTONES.

   Toda la pagina existe para que alguien toque el boton de WhatsApp, y al
   tocarlo no pasaba nada hasta que cargaba la otra app. En movil, medio
   segundo sin confirmacion se siente como que no registro el toque.

   0.97 y 140ms: lo justo para que el dedo lo note y no parezca un juguete. */
.btn:active,
.fab:active,
.sheet__row:active,
.foot__mapa-link:active { transform: scale(0.97); }
.btn, .fab, .foot__mapa-link { transition: transform 0.14s var(--ease); }
/* En escritorio el magnetico manda sobre el boton de catalogo: ahi la
   respuesta ya la da el propio tiron siguiendo al cursor. */
@media (hover: hover) {
  .btn--wa { transition: transform 0.25s var(--ease), background 0.3s; }
}
.sheet__row { transition: transform 0.14s var(--ease), background 0.2s; }

/* Con "reducir movimiento" la respuesta al pulsar SE QUEDA, solo mas corta.

   Apagarla del todo era volver al problema de origen: el boton sin confirmar
   el toque. Y no es movimiento gratuito —no desplaza nada, no hace recorrer
   la vista—: es un acuse de recibo de 90ms al dedo del visitante, que si algo
   le hace mas falta a quien pide menos movimiento. */
html.no-motion :is(.btn, .fab, .sheet__row, .foot__mapa-link) {
  transition-duration: 0.09s;
}

/* 2 · EL HOVER NO ES PARA DEDOS.

   Ninguna regla de hover estaba protegida. En una pantalla tactil el toque
   dispara el hover y el estado se queda pegado hasta que tocas otra cosa:
   una foto del muro se quedaba agrandada, el icono de WhatsApp inflado. Solo
   se apagan los que MUEVEN algo; los cambios de color se quedan, que ahi el
   hover pegado no molesta. */
@media (hover: none) {
  .muro__pieza:hover img { transform: none; }
  .nav__wa:hover { transform: none; }
  .btn:hover svg { transform: none; }
  .subir:hover .subir__flecha svg { transform: none; }
  .nav__links a:hover::after,
  .foot__enlaces a:hover::after { transform: scaleX(0); }
}

/* 3 · LO QUE SE MIRO Y SE DEJO COMO ESTABA.

   La etiqueta del boton flotante anima max-width y margin-left, y el
   acordeon del movil anima height. Las dos son propiedades de maquetado, que
   normalmente es un hallazgo. Aqui no: las dos se disparan UNA vez —al
   cruzar el 28% del scroll y al tocar un panel—, no en cada fotograma. Un
   maquetado puntual no se nota, y las alternativas sin maquetado obligaban a
   fijar anchos que rompen el estado cerrado. Queda anotado para que no se
   vuelva a "arreglar".

/* ============ PULIDO DE TIPOGRAFIA Y ACCESIBILIDAD (auditoria) ==========

   1 · CIFRAS DE ANCHO FIJO.

   Las cifras de la franja cuentan de 0 a su valor al entrar en pantalla. Sin
   figuras tabulares cada digito mide distinto, asi que el numero cambiaba de
   ancho en cada paso y la casilla entera temblaba mientras contaba. Es un
   defecto que solo se ve en movimiento, y por eso no salta revisando el
   diseno quieto. */
.stats__item b,
.hero__deg,
.blue-run__progress,
.spec__contador { font-variant-numeric: tabular-nums; }

/* 2 · SIN PALABRAS HUERFANAS.

   Un titular que deja una sola palabra en la ultima linea se lee como un
   error de maquetacion. balance reparte las lineas para que no pase; pretty
   hace lo mismo en parrafos largos sin el coste de balance. */
h1, h2, h3, .display, .eyebrow { text-wrap: balance; }
p, .lede { text-wrap: pretty; }

/* 3 · EL ANILLO DE FOCO NO PUEDE SER LA REGLA MAS DEBIL DE LA HOJA.

   Estaba escrito con :where(), que tiene especificidad CERO. Para un estilo
   decorativo esta bien; para el unico indicador que tiene quien navega con
   teclado, no: cualquier otra regla lo pisa sin querer. Se declara con su
   propia especificidad y con dos colores, para que se vea tanto sobre el
   fondo oscuro como sobre las secciones claras. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue-glow);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--ice a:focus-visible,
.section--ice button:focus-visible,

/* El aviso de privacidad va en la linea legal del pie, no en la fila de
   enlaces: no es una via de navegacion, es una nota al pie que tiene que
   estar y poder encontrarse sin competir con el boton de catalogo. */
.foot__aviso {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(237, 241, 250, 0.3);
  transition: text-decoration-color 0.3s var(--ease);
}
.foot__aviso:hover { text-decoration-color: currentColor; }

/* ============ EL MAPA ANTES DE CARGARSE ==================================
   No es un hueco esperando: es la direccion, la senal de que ahi hay un mapa,
   y el punto que la animacion del camino ilumina al llegar. Quien solo quiere
   la direccion ya la tiene sin cargar nada de Google. */
.foot__mapa-carga {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  color: var(--on-night);
  background:
    radial-gradient(circle at 50% 46%, rgba(47, 68, 200, 0.20), transparent 62%),
    var(--night-2);
  transition: background 0.3s var(--ease);
}
.foot__mapa-carga:hover { background: var(--night-2); }

/* Rejilla de calles insinuada: dice "mapa" sin traer un mapa. */
.foot__mapa-rejilla {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(109, 134, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109, 134, 255, 0.13) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 46%, #000 30%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 30%, transparent 74%);
}
.foot__mapa-txt { position: relative; display: grid; gap: 4px; }
.foot__mapa-txt b {
  font-family: var(--cond); font-weight: 600;
  font-size: clamp(17px, 4.6vw, 22px); letter-spacing: 0.01em;
}
.foot__mapa-txt i {
  font-style: normal; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-night-3);
}
.foot__mapa-pedir {
  position: relative;
  justify-self: center;
  margin-top: 4px;
  padding: 9px 17px;
  border: 1px solid rgba(109, 134, 255, 0.45);
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue-glow);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.14s var(--ease);
}
.foot__mapa-carga:hover .foot__mapa-pedir {
  background: rgba(47, 68, 200, 0.22);
  border-color: var(--blue-glow);
}
.foot__mapa-carga:active .foot__mapa-pedir { transform: scale(0.97); }
.foot__mapa-carga:focus-visible { outline: 2px solid var(--blue-glow); outline-offset: -3px; }

/* Cargado el mapa, el cartel desaparece y deja pasar el clic. */
.foot__mapa.is-cargado .foot__mapa-carga { display: none; }

/* ================= DONDE ESTOY: SECCION ACTUAL EN EL MENU ================
   Catorce pantallas sin indicador son catorce pantallas sin saber por donde
   vas. El subrayado del enlace activo se queda extendido; el de hover sigue
   apareciendo al pasar por encima de los demas. */
/* La opacidad, no el color, es lo que distingue aqui. Los enlaces del menu
   viven al 66%; poner el activo en blanco no se notaba porque la opacidad lo
   apagaba igual que a los demas. */
.nav__links a.is-here { color: var(--on-night); opacity: 1; }
.nav__links a.is-here::after { transform: scaleX(1); transform-origin: left; }

.sheet__row.is-here { color: var(--on-night); }
.sheet__row.is-here::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 18px;
  margin-top: -9px;
  border-radius: 0 3px 3px 0;
  background: var(--blue-glow);
}

/* ============================ TEXTURA ====================================
   Un grano fijísimo sobre todo. En pantalla grande los degradados oscuros
   planos muestran bandas; el grano las rompe. Va sobre el fondo y por debajo
   de todo lo demas, sin capturar el raton.

   Es SVG en la propia hoja: ni un archivo mas que descargar. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* Por encima de todo. La escala de la pagina llega a 300 (la hoja del
     menu); 400 deja el grano arriba del todo sin inventar un 9999. */
  z-index: 400;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* En telefono el grano se nota menos y cuesta lo mismo: se apaga. */
@media (max-width: 767px) { body::after { display: none; } }

/* ======================= SOMBRAS DEL COLOR DEL FONDO =====================
   Las sombras negras puras sobre un fondo azul oscuro se leen como suciedad.
   Tenidas del azul de la escena, se leen como profundidad. */
.foot__mapa { box-shadow: 0 18px 44px rgba(6, 12, 34, 0.55); }

/* ==================== LO QUE DICE EL HERO ================================
   Dos mensajes que se relevan segun avanza el vuelo. Nunca hay dos a la vez
   y nunca hay texto quieto encima de la toma: cada uno entra, ocupa su tramo
   y cede el sitio. La opacidad y el desplazamiento los escribe el bucle de
   scroll, aqui solo va la forma. */
.hero__di {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}
/* MAS ABAJO Y MAS ANCHO.

   A 108px y 17ch el titular salia a tres lineas, y desde bottom:27vh esas
   tres lineas se salian por arriba: la primera palabra quedaba cortada por
   el borde de la pantalla, detras del menu. Dandole ancho baja a dos lineas,
   y desde ahi cabe holgado en la mitad inferior sin tocar la barra. */
/* NADA DE ch EN LA TIPOGRAFIA DE TITULARES.

   ch mide el ancho del cero, y en una condensada pesada el cero es muy
   estrecho: 26ch daban menos de la mitad del ancho que aparentan y el
   titular se partia en cuatro lineas. Con medida real cabe en dos. */
.hero__di--uno { bottom: 15vh; max-width: min(56vw, 660px); }
.hero__di--dos { bottom: 15vh; max-width: min(46vw, 520px); }

.hero__marca {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(242, 245, 253, 0.72);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.hero__titular {
  margin-top: 12px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(44px, 7.6vw, 88px);
  line-height: 0.88; letter-spacing: -0.02em;
  color: var(--on-night);
  text-shadow: 0 3px 26px rgba(0, 0, 0, 0.6);
  text-wrap: balance;
}
.hero__titular em {
  font-style: normal; display: inline-block;
  color: var(--blue-glow); transform: skewX(-11deg);
}
.hero__linea {
  font-size: clamp(15px, 4vw, 18px); line-height: 1.5;
  color: rgba(242, 245, 253, 0.88);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
  text-wrap: pretty;
}
.hero__di--dos .hero__cta {
  margin-top: 18px;
  pointer-events: auto;
}

/* EN TELEFONO NO FLOTAN SOBRE LA TOMA: OCUPAN EL HUECO QUE YA HABIA.

   El hero vertical es una banda de imagen de 0.9 anchos de pantalla, debajo
   una fila con la senal de scroll y el porcentaje, y despues unos 350px de
   negro que no decian nada. Ese hueco no era un margen: era espacio muerto
   en la primera pantalla de la pagina.

   Los mensajes se anclan ahi, medidos desde la banda, no desde el borde de
   abajo —que se mueve con la barra del navegador—. Y sin max-width en ch:
   con la tipografia condensada, doce caracteres daban una columna de 101px
   y el titular bajaba en cascada, una palabra por linea. */
@media (max-width: 767px) {
  .hero__di {
    top: calc(var(--band, 90vw) + 148px);
    bottom: auto;
    max-width: none;
  }
  .hero__titular { font-size: clamp(36px, 10.5vw, 60px); }
  .hero__di--uno,
  .hero__di--dos { max-width: none; }
  .hero__di--dos .hero__cta { margin-top: 16px; }
}

/* Sin movimiento no hay desplazamiento, pero el relevo se queda: lo dirige
   el scroll del visitante, no un temporizador. */
html.no-motion .hero__di { transform: none !important; }

/* ============ ENTRADAS DE TEXTO DEL HERO =================================
   Todo lo que sigue lo acciona el bucle de scroll, no un temporizador: si el
   visitante para el dedo, la animacion para con el. Aqui solo va la forma
   que hace falta para que el gesto sea posible. */

/* La palabra sube desde debajo de su propia linea. overflow:hidden en la
   mascara es lo que hace que "aparezca desde el borde" en vez de flotar. */
.hero__titular .pal {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  /* Mismo motivo que en .pal: sin aire arriba, la mascara come la parte
     alta de las mayusculas del titular de portada. */
  padding: 0.34em 0 0.06em;
  margin: -0.34em 0 -0.06em;
}
.hero__titular .pal > i {
  display: inline-block;
  font-style: inherit;
  will-change: transform, opacity;
  /* Sin transicion: la posicion la escribe el scroll en cada fotograma, y
     una transicion encima solo anadiria retraso al dedo. */
  transition: none;
}

/* La marca se descubre con una cortina que se retira hacia la derecha. */
.hero__marca { position: relative; display: inline-block; }
.hero__marca-tapa {
  position: absolute;
  inset: -2px -3px;
  background: var(--night);
  transform-origin: right center;
  transform: scaleX(1);
  will-change: transform;
}
.hero.is-seq .hero__marca-tapa { background: var(--night); }

.hero__cta { will-change: transform, opacity; opacity: 0; }

/* Sin movimiento no hay ni subida ni cortina: el texto esta puesto desde el
   principio y solo se releva al bajar, que es informacion, no adorno. */
/* Las palabras del titular suben con el scroll, no solas: es la entrada de
   la portada, no una animacion en bucle. Congelarlas dejaba el hero mudo. */
html.no-motion .hero__marca-tapa { display: none; }
html.no-motion .hero__cta { opacity: 1 !important; transform: none !important; }

/* ================== MURO VERTICAL DE DOS COLUMNAS ========================
   La tira horizontal girada. Dos columnas que se cruzan mientras bajas: una
   sube, la otra baja. En el mismo sentido el ojo las toma por una sola cosa
   deslizandose; enfrentadas, cada una empuja a la otra. */
.vmuro {
  position: relative;
  background: var(--night);
}
.vmuro__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: center;
}

.vmuro__cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 14px;
  /* Mas altas que la pantalla: al desplazarse nunca asoma un extremo. */
  align-items: start;
}
.vmuro__col {
  display: grid;
  gap: 14px;
  will-change: transform;
}
/* La segunda arranca medio paso desfasada, para que las fichas no queden
   emparejadas en filas y se lea como dos corrientes y no como una rejilla. */
.vmuro__col--b { margin-top: -14vh; }

.vmuro__ficha {
  border-radius: 14px;
  overflow: hidden;
  background: var(--night-2);
  border: 1px solid var(--line-night);
}
/* Cuadradas. Los renders de estudio vienen en cuadrado y la camioneta ocupa
   todo el ancho: recortarlos a vertical le cortaba las puntas. Asi se usa el
   archivo entero, sin tirar un pixel. */
.vmuro__ficha img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* El velo deja legible el texto y funde los extremos de las columnas, para
   que no se vea donde empiezan ni donde acaban. */
.vmuro__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--night) 0%, rgba(4,6,15,0.10) 26%,
                    rgba(4,6,15,0.10) 74%, var(--night) 100%),
    radial-gradient(ellipse 70% 52% at 50% 50%, rgba(4,6,15,0.62) 0%, rgba(4,6,15,0.30) 60%, transparent 80%);
}

/* EL TEXTO NECESITA SU PROPIO SUELO.

   Con solo el velo, el titular caia encima de una camioneta blanca y no se
   leia: un degradado suave no puede garantizar contraste contra fotos que
   ademas se estan moviendo debajo. El bloque se apoya en su propio panel de
   vidrio, que ademas lo separa del muro y lo convierte en lo que es, una
   parada en medio del desfile. */
.vmuro__copy {
  position: relative;
  z-index: 3;
  justify-self: center;
  text-align: center;
  max-width: min(27rem, 88vw);
  padding: clamp(26px, 5vw, 40px) clamp(20px, 4vw, 34px);
  border-radius: 20px;
  background: rgba(6, 10, 24, 0.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 60px rgba(2, 5, 16, 0.6);
}
.vmuro__copy h2 { font-size: clamp(30px, 7.6vw, 52px); line-height: 0.94; }
.vmuro__copy .lede {
  margin: 12px auto 22px;
  color: var(--on-night-2);
  font-size: clamp(14px, 1.15vw, 17px);
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .vmuro__cols { gap: 10px; padding: 0 10px; }
  .vmuro__col { gap: 10px; }
  .vmuro__col--b { margin-top: -12vh; }
  .vmuro__ficha { border-radius: 11px; }
}

/* EN ESCRITORIO LAS COLUMNAS SE APARTAN A LOS LADOS.

   Con dos columnas repartiendose el ancho completo, en un monitor cada ficha
   salia de casi 700px: mas alta que la ventana, asi que no se veia un muro
   pasando sino dos cuadrados gigantes deslizandose. Y encima el panel de
   texto quedaba encima de ellos.

   Limitando el ancho de columna y empujando cada una a su lado, el centro
   queda libre para el texto y las fichas vuelven al tamano en que se leen
   como muro. */
@media (min-width: 768px) {
  .vmuro__cols {
    padding: 0 clamp(20px, 5vw, 80px);
    gap: clamp(20px, 4vw, 56px);
  }
  /* width ademas de max-width: con justify-self la columna se ajusta a su
     contenido, y su contenido pide el 100% de la columna. Sin un ancho
     explicito que rompa ese circulo, las dos se colapsaban a dos pixeles. */
  .vmuro__col {
    width: 100%;
    max-width: clamp(220px, 24vw, 340px);
  }
  .vmuro__col--a { justify-self: start; }
  .vmuro__col--b { justify-self: end; }
}

/* Sin movimiento las columnas se quedan quietas: la seccion sigue contando
   lo mismo, un muro de Tacomas con su invitacion al catalogo. */
/* El recorrido de las columnas NO se apaga. Es el contenido de la seccion
   y lo dirige el dedo del visitante, no la pagina sola. Este !important
   anulaba el JavaScript y dejaba el carrusel entero congelado. */


/* ============ LA VISTA DEL CATALOGO, DENTRO DEL PANEL ====================
   Va entre el texto y el boton: se ve a donde lleva antes de tocarlo. El
   borde inferior viene fundido en el propio archivo, asi que no acaba en un
   corte: se disuelve en el panel. */
.vmuro__vista {
  margin: 20px auto 4px;
  /* La captura mide 571px y de ahi no se puede sacar mas. A este ancho el
     navegador la reduce en vez de estirarla. */
  width: min(280px, 100%);
}
.vmuro__vista img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 0;
  box-shadow: 0 12px 34px rgba(2, 5, 16, 0.5);
}

/* ============ ESCRITORIO ANCHO: LA SECCION NO SE PARTE EN TRES ===========
   A 1900px las columnas quedaban a 340 y el panel a 432: sobraban 308px de
   negro a cada lado y la seccion se leia como tres islas sueltas en vez de
   un muro con un cartel encima.

   Las fichas y el panel crecen con la pantalla hasta donde el archivo
   aguanta —840px de origen, mostradas como mucho a 420— y los huecos se
   cierran. */
@media (min-width: 1200px) {
  .vmuro__col { max-width: clamp(340px, 23vw, 420px); }
  .vmuro__copy { max-width: min(38rem, 46vw); }
}


/* ===================== ZONAS QUE SERVIMOS ==============================
   Lista de ciudades del Valle para el SEO local. Discreta: es texto de
   referencia al pie, no un bloque que compita con el catalogo.
   ======================================================================== */
.foot__zonas {
  margin-top: clamp(28px, 3.5vw, 46px);
  padding-top: 18px;
  border-top: 1px solid rgba(237, 241, 250, 0.1);
  position: relative;
  z-index: 1;
}
.foot__zonas-txt {
  margin-top: 10px;
  max-width: 60rem;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(237, 241, 250, 0.72);
}
.foot__zonas-txt b { color: var(--ice, #EDF1FA); font-weight: 600; }
.foot .foot__zonas-lista {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: rgba(237, 241, 250, 0.55);
}
.foot__zonas-lista li:first-child { color: var(--ice, #EDF1FA); font-weight: 600; }
.foot__zonas-en {
  display: inline-block;
  margin-top: 14px;
  font-size: 12.5px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(237, 241, 250, 0.3);
}
.foot__zonas-en:hover { text-decoration-color: currentColor; }


/* ====================== PREGUNTAS FRECUENTES ===========================
   Cerradas por defecto: el texto existe para Google y para quien lo busca,
   sin alargar el pie para todos los demas.
   ======================================================================== */
.foot__faq {
  margin-top: clamp(28px, 3.5vw, 46px);
  padding-top: 18px;
  border-top: 1px solid rgba(237, 241, 250, 0.1);
  position: relative;
  z-index: 1;
  max-width: 60rem;
}
.foot__faq-item { border-bottom: 1px solid rgba(237, 241, 250, 0.08); }
.foot__faq-item summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ice, #EDF1FA);
  list-style-position: outside;
}
.foot__faq-item summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.foot__faq-item p {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(237, 241, 250, 0.72);
}

/* ========================= CAMBIO DE IDIOMA =============================
   ES | EN en la barra. Visible siempre, tambien en telefono. El idioma
   activo va lleno; el otro es el enlace.
   ======================================================================== */
.nav__lang {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 100px;
  border: 1px solid rgba(237, 241, 250, 0.28);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.nav__lang a {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 26px;
  padding: 0 6px;
  border-radius: 100px;
  color: inherit;
  text-decoration: none;
  opacity: 0.75;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  transition: opacity 0.25s, background 0.25s;
}
.nav__lang a:hover { opacity: 1; }
.nav__lang a[aria-current="true"] {
  opacity: 1;
  background: var(--ice, #EDF1FA);
  color: var(--night, #04060F);
  text-shadow: none;
}
.nav.is-stuck .nav__lang a { text-shadow: none; }
.nav.is-stuck.on-ice .nav__lang { border-color: rgba(4, 6, 15, 0.2); }
.nav.is-stuck.on-ice .nav__lang a[aria-current="true"] {
  background: var(--night, #04060F);
  color: var(--ice, #EDF1FA);
}
.nav__lang a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* En telefono la barra va justa: solo se muestra el idioma al que se
   cambia, como un boton pequeno. Quien lee en espanol ve "EN", y al reves. */
@media (max-width: 860px) {
  .nav__lang { padding: 0; border: 0; gap: 0; }
  .nav__lang a[aria-current="true"] { display: none; }
  .nav__lang a {
    opacity: 1;
    min-width: 34px;
    height: 30px;
    border: 1px solid rgba(237, 241, 250, 0.4);
  }
  .nav.is-stuck.on-ice .nav__lang a { border-color: rgba(4, 6, 15, 0.3); }
}