/* ═══════════════════════════════════════════════════════════════════════════
   guet.lat — una sola página, seis momentos.
   Orden del archivo: tokens · el punto (chrome) · 00 entrada · 01 pasillo ·
   02 contador · 03 aritmética · 04 locales · 05 letra chica · 06 salida · pie.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Tipografía de marca ─────────────────────────────────────────────────
   Outfit Bold para display y Figtree para leer: son las fuentes oficiales de
   guet, no las sugeridas en el brief. Outfit es una grotesca geométrica y en
   Bold aguanta los tamaños descomunales; la marca pesa más que la sugerencia.
   Tres archivos, subconjunto latino, 32 KB en total. */
@font-face {
  font-family: 'Outfit';
  src: url('fuentes/outfit-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fuentes/figtree-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fuentes/figtree-semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Color. Valores oficiales de marca (src/theme/colors.ts), no los
     aproximados del brief. Medidos:
       naranja sobre azul .......... 3,47:1  → AA sólo en texto grande (≥24px)
       naranja sobre blanco ........ 2,88:1  → NUNCA como texto; sólo bloque
       tinta sobre naranja ......... 4,89:1  → AA, así se rotula el naranja
       blanco sobre azul ........... 10,0:1
       tinta sobre blanco .......... 14,1:1
     De ahí la regla: el naranja rotula en tinta y nunca lleva letra blanca. */
  --azul:    #1C3F85;
  --naranja: #EE771B;
  --blanco:  #FFFFFF;
  --tinta:   #12295A;
  /* El susurro de la sección 05: blanco al 62 % ya mezclado sobre el azul,
     4,91:1. Se deja resuelto en hex para que el contraste no dependa del
     fondo que tenga detrás. */
  --susurro: #A9B6D1;

  --display-xl: clamp(3.5rem, 18vw, 16rem);
  --display-l:  clamp(2.5rem, 10vw, 8rem);
  --cuerpo:     clamp(1rem, 1.15vw, 1.25rem);

  --sombra-dura: 8px 8px 0 var(--tinta);
  --frenada: cubic-bezier(0.16, 1, 0.3, 1);

  /* De qué color se pinta el punto (cursor, riel, viñetas). Lo decide la
     sección: si ella tiene su propio naranja, el punto se retira a blanco.
     Así nunca hay dos naranjas en pantalla. */
  --tono-punto: var(--naranja);
}

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

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

body {
  margin: 0;
  background: var(--azul);
  color: var(--blanco);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: var(--cuerpo);
  line-height: 1.45;
  /* clip y no hidden: deja que los titulares sangren sin crear scroll lateral
     ni romper el `position: sticky` del pasillo. */
  overflow-x: clip;
}

h1, h2, h3, .display {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 0.92;
  margin: 0;
  text-transform: uppercase;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--blanco);
  outline-offset: 4px;
}
[data-fondo='claro'] :focus-visible { outline-color: var(--tinta); }

.vis-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* El rótulo: guet.lat con el punto en naranja. */
.marca { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.marca__punto { color: var(--blanco); }
/* En el menú —opaco y a pantalla completa— el punto del rótulo es el único
   naranja. En la salida lo decide `data-manda` (ver más abajo). */
.menu .marca__punto { color: var(--naranja); }

/* El botón es un rectángulo. No una píldora. */
.boton {
  display: inline-block;
  padding: 0.95rem 1.4rem;
  min-height: 44px;
  border-radius: 2px;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: 4px 4px 0 var(--tinta);
  transition: translate 240ms var(--frenada), box-shadow 240ms var(--frenada);
}
.boton:hover, .boton:focus-visible { translate: -3px -3px; box-shadow: 7px 7px 0 var(--tinta); }
.boton--claro { font-size: 1.05rem; padding: 1.15rem 2rem; }

/* ═══ EL PUNTO · sistema de navegación ═════════════════════════════════════
   Tres papeles: cursor en escritorio, marcador de avance en el borde
   izquierdo, y disparador del menú arriba a la derecha. Todo esto sólo
   aparece con JavaScript; sin él la página se lee y se recorre igual. */

.cursor, .riel, .nav-punto { display: none; }

.con-js .riel {
  display: block;
  position: fixed; inset-block: 0; left: 6px;
  width: 2px; z-index: 40; pointer-events: none;
  background: color-mix(in srgb, var(--blanco) 14%, transparent);
}
[data-fondo='claro'] .riel { background: color-mix(in srgb, var(--tinta) 14%, transparent); }

.riel__punto {
  position: absolute; left: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--blanco);
  top: calc(var(--avance, 0) * (100dvh - 10px));
  transition: background 320ms var(--frenada);
}
[data-fondo='claro'] .riel__punto { background: var(--tinta); }
/* Sin puntero fino no hay cursor, así que el naranja del punto vive acá. */
@media (pointer: coarse) {
  .riel__punto, [data-fondo='claro'] .riel__punto { background: var(--tono-punto); }
}

.nav-punto {
  position: fixed; top: max(1rem, 2.2vh); right: max(1rem, 2.2vw);
  z-index: 60;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.con-js .nav-punto { display: grid; }
.nav-punto__disco {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--blanco);
  transition: scale 320ms var(--frenada), background 320ms var(--frenada);
}
.nav-punto:hover .nav-punto__disco, .nav-punto:focus-visible .nav-punto__disco { scale: 1.6; }
[data-fondo='claro'] .nav-punto__disco { background: var(--tinta); }
[data-menu='abierto'] .nav-punto__disco { background: var(--blanco); scale: 1.6; }

/* El cursor del sistema se oculta y el punto ocupa su lugar. Sólo en
   escritorio con puntero fino: en móvil el punto vive en el riel. */
@media (pointer: fine) {
  .con-js, .con-js a, .con-js button, .con-js input { cursor: none; }
  .con-js .cursor {
    display: block;
    position: fixed; top: 0; left: 0; z-index: 80;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--tono-punto);
    pointer-events: none;
    translate: var(--cx, 50vw) var(--cy, 50vh);
    scale: var(--cescala, 1);
    opacity: 0;
    transition: scale 260ms var(--frenada), background 320ms var(--frenada);
  }
  .con-js body[data-cursor='vivo'] .cursor { opacity: 1; }
}

/* ── La regla del naranja, hecha estructura ──────────────────────────────
   Sólo la sección que ocupa el centro de la pantalla lleva `data-manda`, y
   sólo ella enciende su naranja. Todo lo demás que podría ser naranja —el
   punto de la otra sección, el bloque de la otra columna, el punto errante—
   se queda en blanco o tinta. Así la promesa "un solo naranja por pantalla"
   deja de depender de dónde se detuvo el scroll: se cumple siempre, también
   a mitad de camino entre dos secciones. */
.salida .marca__punto { color: var(--blanco); }
.salida[data-manda] .marca__punto { color: var(--naranja); }
/* El punto de la entrada no necesita apagarse: termina su viaje con el borde
   inferior a 45vh como mucho (mide 40vh de alto y queda centrado en 25vh),
   así que desaparece de pantalla antes de que el pasillo pase a mandar en
   50vh. Nunca coincide con el punto errante encendido. */
.contador__cifra { color: var(--blanco); transition: color 300ms var(--frenada); }
.contador[data-manda] .contador__cifra { color: var(--naranja); }

/* Cuándo el punto cede el naranja: la sección lo reclama, un local se
   enciende, o el menú está abierto. */
body[data-tono='seccion'] { --tono-punto: var(--blanco); }
body[data-fondo='claro']  { --tono-punto: var(--tinta); }
body[data-menu='abierto'] { --tono-punto: var(--blanco); }
body:has(.local:hover), body:has(.local:focus-within) { --tono-punto: var(--blanco); }

/* El punto como puntuación: cada sección cierra con él, centrado. */
.punto-final {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  margin: 0 auto; background: var(--blanco); flex: none;
}
[data-fondo='claro'] .punto-final { background: var(--tinta); }

/* ─── El menú a pantalla completa. No existe barra superior. ─────────────── */
.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--azul);
  display: flex; flex-direction: column; justify-content: center;
  padding: max(2rem, 8vh) max(1.5rem, 8vw);
}
.menu[hidden] { display: none; }
.menu__lista { display: flex; flex-direction: column; gap: 0.35em; }
.menu__lista a {
  display: flex; align-items: center; gap: 0.5em;
  min-height: 44px;
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 5.5vw, 3.4rem);
  text-transform: uppercase; text-decoration: none; letter-spacing: -0.015em;
}
/* Viñetas: el punto, nunca un guion ni el bullet del navegador. */
.menu__lista a::before {
  content: ''; flex: none;
  width: 0.16em; height: 0.16em; border-radius: 50%;
  background: currentColor; opacity: 0.55;
  transition: opacity 240ms var(--frenada), scale 240ms var(--frenada);
}
.menu__lista a:hover::before, .menu__lista a:focus-visible::before { opacity: 1; scale: 1.8; }
.menu__marca { margin-top: 3rem; font-size: 1.4rem; }

/* ═══ 00 · LA ENTRADA ══════════════════════════════════════════════════════
   Pantalla completa, azul, un punto. Sin menú, sin botón, sin subtítulo, sin
   flecha de scroll. La secuencia es CSS puro: ocurre aunque el JS no llegue. */
.entrada {
  position: relative;
  min-height: 100dvh;
  display: flex; align-items: flex-end;
  padding: 0 0 max(8vh, 4rem) 5vw;
  overflow: clip;
}
.entrada__punto {
  --d: min(40vh, 62vw);
  position: absolute; left: 50%; top: 50%;
  width: var(--d); height: var(--d);
  z-index: 0;
  animation: entrada-punto 1.5s var(--frenada) both;
}
@keyframes entrada-punto {
  0%, 26%   { translate: -50% -50%; scale: 0.07; }   /* aparece y espera 400 ms */
  56%       { translate: -50% -50%; scale: 1; }      /* crece hasta ~40 % del alto */
  100%      { translate: calc(-50% + 27vw) calc(-50% - 25vh); scale: 1; }
}
.entrada__titular {
  position: relative; z-index: 1;
  /* 9,84vw: medido contra el ancho real de "TE QUEDAS CON 100." en Outfit
     Bold (10,00 em) más el margen de 5vw. La línea sobresale del borde
     derecho exactamente lo que mide el punto final. */
  font-size: 9.84vw;
  white-space: nowrap;
}
.entrada__titular span { display: block; animation: entra-izquierda 700ms var(--frenada) 1.3s both; }
.entrada__titular span:last-child { animation-delay: 1.42s; }
@keyframes entra-izquierda { from { translate: -112% 0; } to { translate: 0 0; } }

@media (max-width: 759px) {
  /* En móvil el titular no se achica: se parte. 13,5vw sobre 390 px son
     53 px, y ninguna palabra se pierde por el borde. */
  .entrada__titular { font-size: 13.5vw; white-space: normal; padding-right: 5vw; }
  .entrada__punto { --d: min(34vh, 58vw); }
  @keyframes entrada-punto {
    0%, 26% { translate: -50% -50%; scale: 0.07; }
    56%     { translate: -50% -50%; scale: 1; }
    100%    { translate: calc(-50% + 22vw) calc(-50% - 28vh); scale: 1; }
  }
}

/* ═══ 01 · EL PASILLO ══════════════════════════════════════════════════════
   Fachadas, no tarjetas. Por defecto (y en móvil) es un carrusel que se
   desliza con el dedo dentro del scroll vertical de siempre; en escritorio
   con JS el scroll vertical empuja la fila de lado. */
.pasillo { position: relative; }
.pasillo__fijo {
  display: flex; align-items: center;
  /* En móvil no hace falta una pantalla entera: la fila de vitrinas manda, y
     el resto del alto sería hueco. En escritorio vuelve a 100dvh. */
  min-height: 82dvh;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pasillo__fijo::-webkit-scrollbar { display: none; }
.pasillo__via { display: flex; gap: 6vw; }
.fachada:first-child { margin-left: 12vw; }
.fachada:last-child { margin-right: 12vw; }

.fachada {
  position: relative;
  flex: none;
  width: min(74vw, 22rem);
  aspect-ratio: 3 / 4;
  background: var(--tinta);
  border-radius: 2px;
  overflow: clip;
  scroll-snap-align: center;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.25rem;
  box-shadow: var(--sombra-dura);
}
.fachada:nth-child(even) { background: #0E2149; }
.fachada__foto { position: absolute; inset: 0; }
.fachada__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto real todavía: la tipografía es la imagen. El nombre de la marca,
   enorme y cortado por el marco, hace de escaparate. */
.fachada__foto--vacia::after {
  content: attr(data-nada);
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - 1px),
      color-mix(in srgb, var(--blanco) 7%, transparent) calc(100% / 9 - 1px) calc(100% / 9));
}
.fachada__marca {
  position: relative;
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  line-height: 0.88;
  /* Sangra por el borde: la fachada recorta, como una vitrina de verdad. */
  margin: 0 -1.25rem 0.5rem -1.25rem;
  padding-inline: 1.25rem;
  white-space: nowrap;
}
.fachada__rubro {
  position: relative;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--susurro);
}
.fachada__sello {
  position: absolute; top: 1.25rem; left: 1.25rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--blanco) 45%, transparent);
  border-radius: 2px;
}

@media (min-width: 760px) {
  .pasillo__fijo { min-height: 100dvh; }
  .fachada { width: min(34vw, 26rem); }
  .fachada__marca { font-size: clamp(3rem, 5.6vw, 5.6rem); }
  /* Con JS el pasillo pasa a scroll controlado: la sección mide 320vh y la
     fila se mueve de lado mientras el usuario baja. */
  .con-js .pasillo { height: 320vh; }
  .con-js .pasillo__fijo {
    position: sticky; top: 0; height: 100dvh; min-height: 0;
    overflow: clip;
  }
  .con-js .pasillo__via { transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
  /* Cada fachada va a una velocidad ligeramente distinta, como vitrinas
     reales al pasar. */
  .con-js .fachada { translate: calc(var(--avance-pasillo, 0) * (var(--i) - 2.5) * 18px) 0; }
}

/* ═══ 02 · EL CONTADOR ═════════════════════════════════════════════════════ */
.contador {
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem;
  padding: 8vh 5vw;
}
.contador__cifra {
  /* Cuando manda esta sección, el único naranja de la pantalla; a este
     tamaño 3,47:1 pasa AA de texto grande con holgura. */
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 700;
  /* "Casi todo el alto": el alto del glifo es ~0,7 em, así que el cuerpo va
     muy por encima del alto de pantalla. En móvil manda el ancho. */
  font-size: min(98vh, 86vw);
  line-height: 0.74;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.contador__pie {
  font-family: 'Figtree', system-ui, sans-serif; font-weight: 400;
  font-size: var(--cuerpo); letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
}
.contador .punto-final {
  position: absolute; left: 50%; bottom: max(4vh, 2rem);
  margin: 0; translate: -50% 0;
}

/* ═══ 03 · LA ARITMÉTICA ═══════════════════════════════════════════════════
   El único bloque blanco grande del sitio, por contraste, y el momento de
   conversión. El naranja de la pantalla es el bloque "En Guet". */
.aritmetica {
  background: var(--blanco);
  color: var(--tinta);
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(4rem, 12vh, 8rem) 5vw;
}
@media (min-width: 900px) {
  .aritmetica { grid-template-columns: 1fr 1fr; align-items: center; }
  .aritmetica .punto-final { grid-column: 1 / -1; }
}
.aritmetica__h { font-size: clamp(2.2rem, 5vw, 5.5rem); }

.campo {
  display: flex; align-items: baseline; gap: 0.15em;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  /* Sin caja: una sola línea inferior gruesa. */
  border-bottom: 6px solid var(--tinta);
  /* El ancho se mide en el tamaño del propio número, no en el del cuerpo:
     por eso el font-size vive acá y los hijos heredan. */
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5rem);
  max-width: min(100%, 9em);
}
.campo__prefijo, .campo__input {
  font: inherit;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.campo__input {
  width: 100%; min-width: 0;
  padding: 0; border: 0; background: none;
  font-variant-numeric: tabular-nums;
  caret-color: var(--naranja);   /* el cursor parpadea en naranja */
}
.campo__input:focus { outline: none; }
.campo:focus-within { border-bottom-color: var(--naranja); }
.campo__nota { margin-top: 1rem; font-size: 0.85rem; color: #4A5A7F; }

.cuentas { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.cuenta { padding: clamp(1.2rem, 3vw, 2rem); }
.cuenta dt {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.cuenta dd { margin: 0.6rem 0 0; }
.cuenta strong {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 3.6rem);
  line-height: 0.95; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cuenta dd span { font-size: 0.85rem; }
.cuenta--comision { border: 3px solid var(--tinta); }
/* El bloque "En Guet" se enciende igual que un local del plano: apagado es
   una caja más; encendido es el único naranja de la pantalla. La letra queda
   en tinta en los dos estados (4,89:1 sobre naranja), así que al encenderse
   sólo cambia el relleno. Nunca letra blanca sobre naranja. */
.cuenta--guet {
  background: var(--blanco); color: var(--tinta);
  border: 3px solid var(--tinta);
  box-shadow: var(--sombra-dura);
  transition: background 300ms var(--frenada), border-color 300ms var(--frenada);
}
.aritmetica[data-manda] .cuenta--guet { background: var(--naranja); border-color: var(--naranja); }

/* El resultado no aparece con fade: cae. */
.cuentas[data-cayendo] .cuenta { animation: cae 420ms var(--frenada) both; }
.cuentas[data-cayendo] .cuenta--guet { animation-delay: 60ms; }
@keyframes cae {
  0%   { translate: 0 -26px; }
  72%  { translate: 0 4px; }
  100% { translate: 0 0; }
}

.remate {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.35;
  max-width: 34ch;
  padding-left: 1rem;
  border-left: 6px solid var(--tinta);
}

/* ═══ 04 · LOS TRES LOCALES ════════════════════════════════════════════════
   Un plano en planta, no una tabla. Las proporciones 1× / 1,6× / 2,6× son la
   idea entera y viven en `--escala`; se conservan también apiladas en móvil. */
.plano {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(2rem, 6vh, 4rem);
  padding: clamp(4rem, 10vh, 7rem) 5vw;
}
.plano__piso {
  --u: 29vw;          /* el lado corto del Stand; los otros dos son múltiplos */
  --escala-max: 2.6;
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  padding-left: clamp(1.5rem, 5vw, 3rem);
}
/* El pasillo del plano: la línea sobre la que se apoyan los tres locales. */
.plano__pasillo {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: color-mix(in srgb, var(--blanco) 40%, transparent);
}

.local {
  position: relative;
  width: calc(var(--escala) * var(--u));
  max-width: 100%;
  transition: opacity 320ms var(--frenada);
}

/* La caja del local: paredes blancas, interior oscuro, sombra dura. El alto
   sale de `--escala` igual que el ancho — si la caja se estirara con su
   contenido, los tres saldrían casi del mismo tamaño y la idea se perdería. */
.local__caja {
  position: relative;
  width: 100%;
  height: calc(var(--escala) * var(--u) * 1.15);
  padding: calc(0.35rem + var(--escala) * 0.3rem);
  border: 3px solid var(--blanco);
  background: var(--tinta);
  box-shadow: var(--sombra-dura);
  transition: background 260ms var(--frenada), border-color 260ms var(--frenada),
              box-shadow 260ms var(--frenada);
}
.local__nombre {
  font-size: calc(0.78rem + var(--escala) * 0.42rem);
  letter-spacing: 0.04em;
}
.local__precio {
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 700;
  font-size: calc(1rem + var(--escala) * 0.7rem);
  line-height: 1; letter-spacing: -0.02em;
  margin-top: 0.35em;
  display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap;
}
.local__mes {
  font-family: 'Figtree', system-ui, sans-serif; font-weight: 400;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.75;
}
/* La puerta: un hueco en la pared que da al pasillo. */
.local__puerta {
  position: absolute;
  background: var(--azul);
  left: -3px; top: 30%; width: 3px; height: 34%;
}
.local__micro {
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--susurro);
  margin-top: 0.9rem;
}
.local__cta {
  margin-top: 0.7rem;
  font-size: calc(0.6rem + var(--escala) * 0.12rem);
}

/* La vitrina se enciende: el interior pasa de azul a naranja sólido y la
   sombra dura se desplaza. El resto del plano se oscurece. */
.plano__piso:has(.local:hover) .local:not(:hover),
.plano__piso:has(.local:focus-within) .local:not(:focus-within) { opacity: 0.4; }
.plano[data-manda] .local:hover .local__caja,
.plano[data-manda] .local:focus-within .local__caja {
  background: var(--naranja);
  border-color: var(--tinta);
  box-shadow: 16px 16px 0 var(--tinta);
}
.plano[data-manda] .local:hover .local__nombre,
.plano[data-manda] .local:focus-within .local__nombre,
.plano[data-manda] .local:hover .local__precio,
.plano[data-manda] .local:focus-within .local__precio { color: var(--tinta); }

@media (max-width: 899px) {
  /* Apilados, pero la caja conserva su proporción: el Ancla se sigue viendo
     2,6 veces más grande que el Stand. La microcopia y el botón sí usan todo
     el ancho, para que se puedan tocar. */
  .local { width: 100%; }
  .local__caja { width: calc(var(--escala) * var(--u)); }
  .local__cta { font-size: 0.85rem; }
}

@media (min-width: 900px) {
  /* En escritorio el pasillo es horizontal y los tres locales se apoyan en
     él. La primera fila de la grilla mide lo que el local más grande, así
     que las tres cajas comparten piso y las tres etiquetas, techo. */
  .plano__piso {
    --u: min(15.5vw, 19vh);
    flex-direction: row; align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
    padding: 0;
    justify-content: center;
  }
  .plano__pasillo {
    left: 0; right: 0; width: auto; height: 2px;
    top: calc(var(--escala-max) * var(--u) * 1.15); bottom: auto;
  }
  .local {
    display: grid;
    grid-template-rows: calc(var(--escala-max) * var(--u) * 1.15) auto;
  }
  .local__caja { align-self: end; }
  .local__puerta { left: 33%; top: auto; bottom: -3px; width: 34%; height: 3px; }
}

/* ═══ 05 · LA LETRA CHICA QUE NO EXISTE ════════════════════════════════════
   Menos contenido que ninguna otra, a propósito. El vacío es el mensaje: no
   se le agregan íconos, ni gráficos, ni tres beneficios. */
.letra-chica {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: max(10vh, 5rem) 5vw max(8vh, 4rem);
}
.letra-chica__susurro {
  text-align: center;
  font-size: 0.82rem; letter-spacing: 0.1em;
  color: var(--susurro);
}
.letra-chica__grito {
  /* 13,2vw: "Alquiler fijo." mide 7,43 em, así que con el margen de 5vw la
     línea sobresale justo el punto final. */
  font-size: 13.2vw;
  white-space: nowrap;
}
.letra-chica__grito span { display: block; }

/* ═══ 06 · LA SALIDA ═══════════════════════════════════════════════════════
   El punto que acompañó todo el recorrido se encoge hasta ser el punto de
   guet.lat. Una sola acción, nunca dos. */
.salida {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  padding: max(10vh, 5rem) 5vw;
  overflow: clip;   /* el punto gigante se queda en su sección */
}
.salida__marca { font-size: clamp(2.2rem, 6vw, 5rem); }
.salida .marca__punto {
  display: inline-block;
  /* Arranca gigante y se encoge hasta su tamaño tipográfico al entrar. */
  transform-origin: 62% 82%;
  scale: var(--escala-punto, 1);
  transition: scale 900ms var(--frenada);
}
.con-js .salida:not([data-visto]) .marca__punto { --escala-punto: 12; }
.salida__h { font-size: clamp(2.6rem, 8.6vw, 8rem); }
.salida .boton { align-self: flex-start; }

/* ─── Pie mínimo: rótulo y legales. Sin newsletter, sin redes, sin mapa. ─── */
.pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 3rem 5vw max(3rem, 6vh);
  border-top: 2px solid color-mix(in srgb, var(--blanco) 18%, transparent);
}
.pie__marca { font-size: 1.5rem; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.85rem; }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; }

/* Sin JavaScript nadie reparte `data-manda`, así que cada sección enciende
   su propio naranja: es la página estática, y ahí no hay scroll que la
   ponga a medio camino entre dos pantallas. */
.sin-js .contador__cifra { color: var(--naranja); }
.sin-js .cuenta--guet { background: var(--naranja); border-color: var(--naranja); }
.sin-js .salida .marca__punto { color: var(--naranja); }
.sin-js .local:hover .local__caja { background: var(--naranja); border-color: var(--tinta); }

/* ═══ MOVIMIENTO APAGADO ═══════════════════════════════════════════════════
   Sin excepciones: se desactiva todo y el contenido queda estático. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .con-js .salida .marca__punto { --escala-punto: 1; }
  .con-js .pasillo { height: auto; }
  .con-js .pasillo__fijo { position: static; height: auto; min-height: 100dvh; overflow-x: auto; }
  .con-js .pasillo__via { transform: none; }
  .con-js .fachada { translate: none; }
  .cursor { display: none !important; }
  .con-js, .con-js a, .con-js button, .con-js input { cursor: auto; }
}