/* Los SVG exportados de Figma suelen traer opacity interna; neutralizarla en el archivo antes de controlarla desde CSS. */
.cta-layers { position: relative; display: flex; box-sizing: border-box; align-items: center; justify-content: center; border: var(--cta-border-width) solid var(--color-gold); border-radius: var(--cta-radius); background: var(--color-sky); color: var(--color-navy); box-shadow: 0 var(--cta-shadow-depth) 0 var(--color-gold-dark); line-height: 1; transition: background-color 150ms ease, color 150ms ease; }
.cta-layers span { line-height: 1; transition: color 150ms ease; }
.cta-layers:focus-visible { outline: calc(2 * var(--u)) solid var(--color-navy); outline-offset: calc(3 * var(--u)); }
@media (hover: hover) {
  .cta-layers:not(:disabled):hover { background: var(--color-white); color: var(--color-navy); }
  /* Algunos botones (COMPROBAR en desktop, ~2468) fijan el color en el span; sin esto queda blanco sobre blanco. */
  .cta-layers:not(:disabled):hover span { color: var(--color-navy); }
}

.hero {
  position: relative;
  background: var(--color-sand);
}

.escena {
  position: relative;
}

.prueba-superada {
  --escena-background: var(--color-sand);
  --escena-track-k: 2.2;
  --escena-track: calc(var(--escena-track-k) * var(--vh));
}

.escena__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; width: 100%; height: 100%; transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1); }
.prueba-superada[data-cupones="true"] .escena__track { transform: translateX(-100%); }
.escena__panel { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; overflow: hidden; }

.escena__sticky {
  position: sticky;
  top: 0;
  display: flex;
  height: var(--vh);
  /* Mide la pantalla grande (barra compacta), constante: la escena siguiente recién
     entra cuando esta se va. El padding devuelve al escenario la altura medida
     (--vh) y lo deja apoyado donde estaba; el hueco queda dentro del sticky, pintado
     con el piso de la escena. Con barra expandida el padding queda bajo la barra; en
     escritorio vale 0. La primera línea es el respaldo sin soporte de lvh. */
  height: 100lvh;
  padding-bottom: max(0px, calc(100lvh - var(--vh)));
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--escena-background, transparent);
  background: linear-gradient(to top,
    var(--escena-piso, var(--escena-background, transparent)) max(0px, calc(100lvh - var(--vh))),
    var(--escena-background, transparent) 0);
}

@media (min-width: 481px) and (max-width: 899px) {
  .escena__sticky {
    width: 100vw;
    margin-left: calc((480px - 100vw) / 2);
  }
}

.escena__stage {
  --escena-p: 1;
  --escena-entrada-tramo: 0.30;
  --escena-entrada-p: clamp(0, calc(var(--escena-p) / var(--escena-entrada-tramo)), 1);
  /* El globo ocupa de 44 a 331 unidades: 375 - 88 = 287 es el ancho mínimo visible sin cortarlo. */
  --u: clamp(
    min(calc(min(100vw, 480px) / 375), calc(100svh / 667)),
    calc(100svh / 667),
    calc(min(100vw, 480px) / 287)
  );
  position: relative;
  width: calc(375 * var(--u));
  aspect-ratio: var(--escena-ar);
  flex: 0 0 auto;
  /* Una sección nueva se ve por defecto; solo las que animan su entrada
     declaran --escena-p: 0. */
  opacity: var(--escena-entrada-p);
  transform: translateY(calc((1 - var(--escena-entrada-p)) * 12 * var(--u)));
}

@media (max-width: 899px) {
  .escena__stage {
    /* Espejo móvil de los bordes --vp-* de escritorio: conservar el mismo criterio de sangrado. */
    --stage-w: calc(375 * var(--u));
    /* Bordes del viewport expresados en coordenadas del escenario, que esta
       centrado y mide --stage-w. Con la ventana mas angosta que el escenario
       dan valores invertidos, por eso cada pieza los combina con min()/max()
       y nunca encoge por debajo de su ancho de diseno. */
    --vp-izq: calc((var(--stage-w) - 100vw) / 2);
    --vp-der: calc((var(--stage-w) + 100vw) / 2);
    /* cenefa.webp trae 5px transparentes por lado sobre 2114 (0.24%), asi
       que la caja llega al borde pero el dibujo no. Estas dos se pasan 8
       unidades de cada lado para que el trazo opaco si llegue. */
    --vp-izq-x: calc(var(--vp-izq) - 8 * var(--u));
    --vp-der-x: calc(var(--vp-der) + 8 * var(--u));
  }
}

.prueba-superada__stage {
  --escena-p: 0;
  /* Corto a propósito: entra oculta detrás de .sala-fondo, así que lo único
     que se ve es el fundido de salida del interior sobre ella ya armada. */
  --escena-entrada-tramo: 0.10;
}

.escena__stage img,
.prueba-superada__globo img {
  position: absolute;
  display: block;
  /* En .escena__stage img, este height:auto gana a reglas de una sola clase. */
  height: auto;
  max-width: none;
}

.marco-papiro__glifo { width: calc(605.22 * var(--u)); }
.marco-papiro__glifo--uno { left: calc(-88.1 * var(--u)); top: calc(9.29 * var(--u)); }
.marco-papiro__glifo--dos { left: calc(15.56 * var(--u)); top: calc(317.82 * var(--u)); }
.marco-papiro__glifo--tres { left: calc(-215.26 * var(--u)); top: calc(577.29 * var(--u)); }

.marco-papiro__columna { width: calc(125.38 * var(--u)); top: calc(39.27 * var(--u)); }
.marco-papiro__columna--izquierda { left: calc(-62.69 * var(--u)); }
.marco-papiro__columna--derecha { left: calc(310.37 * var(--u)); }

.marco-papiro__cenefa { width: calc(704.43 * var(--u)); }
.marco-papiro__cenefa--superior { left: calc(-207.06 * var(--u)); top: calc(-2.76 * var(--u)); }
.marco-papiro__cenefa--inferior { left: calc(-221.54 * var(--u)); top: calc(622.92 * var(--u)); z-index: 9; }
@media (max-width: 899px) {
  .prueba-superada__stage, .cupones__stage { --papiro-subida: max(0px, calc(var(--vh) - 667 * var(--u))); }
  .escena__stage .marco-papiro__cenefa--superior { top: calc(-2.76 * var(--u) - var(--papiro-subida)); }
  .escena__stage .marco-papiro__columna { top: calc(39.27 * var(--u) - var(--papiro-subida)); height: calc(125.38 * var(--u) * 1798 / 377 + var(--papiro-subida)); object-fit: fill; }
  .escena__stage .marco-papiro__glifo {
    /* Los tres glifos se apilan sin hueco (9-318, 318-627, 577-886u); suben
       juntos para cubrir el alto sobrante. ponytail: --tres termina en 886u,
       aguanta hasta 219u de subida; más que eso deja hueco abajo. */
    translate: 0 calc(-1 * var(--papiro-subida));
  }
}

.prueba-superada__ofertiti { left: calc(50% - (236.81 * var(--u)) / 2 - 0.41 * var(--u)); top: calc(207.07 * var(--u)); z-index: 5; width: calc(236.81 * var(--u)); }

.prueba-superada__globo { position: absolute; left: calc(50% - (287 * var(--u)) / 2); top: calc(74.24 * var(--u)); width: calc(287 * var(--u)); height: calc(124 * var(--u)); z-index: 6; }
.prueba-superada__globo img { inset: 0; width: 100%; --cola: -1; }
.prueba-superada__globo p { position: absolute; top: calc(0.22 * var(--u)); left: calc((287 - 199.99) * var(--u) / 2); width: calc(199.99 * var(--u)); height: calc(124 * var(--u)); display: flex; align-items: center; justify-content: center; margin: 0; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 800; line-height: calc(22 * var(--u)); text-align: center; }

.prueba-superada__cupones { position: absolute; left: calc(50% - (239 * var(--u)) / 2); top: calc(530.24 * var(--u)); z-index: 8; width: calc(239 * var(--u)); height: calc(55 * var(--u)); font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 600; text-align: center; text-decoration: none; }

.escena-rail { height: 0px; pointer-events: none; }
.escena[data-entrada-activa="true"] .escena-rail { height: var(--escena-track, 0px); }

.puerta { --escena-background: var(--color-wall); --escena-piso: var(--color-asset-warm); }
body {
  --puerta-cruce-inicio: 0.75;
  --puerta-cruce-p: clamp(0, calc((var(--puerta-p, 0) - var(--puerta-cruce-inicio)) / (1 - var(--puerta-cruce-inicio))), 1);
  --puerta-desenfoque: 5px;
  /* Calibrable: el pasillo se apaga en el último tramo del riel de
     .interior, justo cuando dispara el popup y arranca el viaje. */
  --pasillo-salida-inicio: 0.95;
  --pasillo-salida-p: clamp(0, calc((var(--interior-p, 0) - var(--pasillo-salida-inicio)) / (1 - var(--pasillo-salida-inicio))), 1);
}
.puerta__stage {
  --puerta-p: 0;
  background: var(--color-wall);
}
.puerta__encuadre { position: absolute; inset: 0; }
.puerta__escena {
  position: absolute;
  inset: 0;
  /* Calibración óptica del inicio del piso; no es una medida de Figma. */
  --puerta-piso-corte: 67.92%;
  /* Centro del hueco medido en image 51.png y convertido al frame móvil. */
  transform-origin: calc(188.38 * var(--u)) calc(443.74 * var(--u));
  transform: scale(calc(1 + 1.117 * var(--puerta-p) * var(--puerta-zoom-factor)));
}
/* El blur solo existe durante el cruce. Declarado permanentemente, aunque
   valga 0, obliga a una superficie de filtro a pantalla completa que las
   llamas invalidan en cada fotograma. */
.puerta__stage[data-cruzando="true"] .puerta__escena {
  filter: blur(calc(var(--puerta-desenfoque) * var(--puerta-cruce-p)));
}
.puerta__glifos { position: absolute; z-index: 1; top: 0; left: min(calc(2.5 * var(--u)), var(--vp-izq)); width: calc(max(calc(372.5 * var(--u)), var(--vp-der)) - min(calc(2.5 * var(--u)), var(--vp-izq))); height: 100%; /* El SVG fue editado a mano tras exportarlo para centralizar la opacidad en CSS. */ opacity: 0.3; background-image: url("../img/puerta/glifos-pared.svg"); background-position: calc(calc(2.5 * var(--u)) - min(calc(2.5 * var(--u)), var(--vp-izq))) top; background-repeat: repeat; background-size: calc(370 * var(--u)) calc(20 * var(--u)); }
.puerta__cenefa { position: absolute; z-index: 2; left: calc(-207.06 * var(--u)); top: calc(-1.52 * var(--u)); width: calc(704.43 * var(--u)); height: auto; max-width: none; }
@media (max-width: 899px) {
  .puerta__stage { --puerta-subida: max(0px, calc(var(--vh) - 667 * var(--u))); }
  .puerta__escena::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: calc(-1.52 * var(--u) - var(--puerta-subida));
    bottom: 0;
    left: min(calc(-207.06 * var(--u)), var(--vp-izq-x));
    width: calc(max(calc(497.37 * var(--u)), var(--vp-der-x)) - min(calc(-207.06 * var(--u)), var(--vp-izq-x)));
    background-image: url("../img/prueba-superada/cenefa.webp");
    background-position: calc(calc(-207.06 * var(--u)) - min(calc(-207.06 * var(--u)), var(--vp-izq-x))) top;
    background-repeat: repeat-x;
    background-size: calc(704.43 * var(--u)) auto;
  }
  .puerta__stage .puerta__cenefa { top: calc(-1.52 * var(--u) - var(--puerta-subida)); }
  .puerta__stage .puerta__glifos { top: calc(-1 * var(--puerta-subida)); height: calc(100% + var(--puerta-subida)); }
}
.puerta__imagen { position: absolute; z-index: 3; left: calc(-10.59 * var(--u)); top: calc(216.87 * var(--u)); width: calc(396.18 * var(--u)); height: calc(488.83 * var(--u)); max-width: none; }
.puerta__escena::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: min(calc(-10.59 * var(--u)), var(--vp-izq));
  top: calc(216.87 * var(--u));
  width: calc(max(calc(385.59 * var(--u)), var(--vp-der)) - min(calc(-10.59 * var(--u)), var(--vp-izq)));
  height: calc(488.83 * var(--u));
  background: linear-gradient(to bottom, transparent var(--puerta-piso-corte), var(--color-asset-warm) var(--puerta-piso-corte));
}
/* Llamas: dos fotogramas apilados que se alternan. Anclados por bottom
   porque el fotograma 2 es 8px mas alto y tiene que crecer hacia arriba.
   z-index 3, el mismo que .puerta__imagen, y van despues en el markup. */
.puerta__llama {
  position: absolute;
  z-index: 3;
  width: calc(46.16 * var(--u));
  bottom: calc(248.68 * var(--u));
  height: calc(71.35 * var(--u));
}
.puerta__llama--izq { left: calc(20.89 * var(--u)); }
.puerta__llama--der { left: calc(314.24 * var(--u)); }

.puerta__llama-frame {
  bottom: 0;
  left: 0;
  top: auto;
  width: 100%;
  opacity: 0;
  will-change: opacity;
}

/* Los dos pebeteros no parpadean al mismo tiempo: ritmos distintos y el
   derecho arranca desfasado medio ciclo. Es lo unico que evita que se lea
   como un GIF de dos cuadros. */
.puerta__llama--izq { --llama-ritmo: 280ms; }
.puerta__llama--der { --llama-ritmo: 340ms; }

.puerta__llama-frame--a { animation: llama-a var(--llama-ritmo) infinite; }
.puerta__llama-frame--b { animation: llama-b var(--llama-ritmo) infinite; }
.puerta__llama--der .puerta__llama-frame--a,
.puerta__llama--der .puerta__llama-frame--b { animation-delay: calc(var(--llama-ritmo) / -2); }

@keyframes llama-a { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes llama-b { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }

.puerta-rail { height: var(--puerta-rail-height, 0px); pointer-events: none; }

.interior {
  --escena-track: var(--vh);
  --escena-background: var(--color-dark-bg);
  /* Esta sección sostiene el pasillo al que resuelve el cruce de .puerta; su final dispara el popup. */
}

/* Duracion del desenrollado. La comparten el clip-path del cuerpo y el
   transform de rodillos y lazos: si se separan, el rodillo deja de quedar
   pegado al borde del papel que se revela. El setTimeout de mostrarContenido
   en js/popup.js esta apareado con este valor. */
.popup { --papiro-apertura: 900ms; position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; /* Provisional: el color del overlay no vino en el diseño. */ background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; }
.popup:focus { outline: none; }
/* Solo monta el elemento. El estado animado va en --visible, dos frames
   despues: sin estilo previo renderizado el navegador no interpola y ninguna
   transicion de entrada se ejecuta. */
.popup--montado { display: flex; }
.popup--visible { opacity: 1; pointer-events: auto; transition: opacity 250ms ease; }
/* La caja es exactamente el bounding box del dibujo de las cinco capas
   (357.61 x 327, origen en 10.45/24.34 del frame de Figma). Todos los hijos
   estan rebasados a ese origen, asi que el centrado horizontal es 50% pelado,
   sin offsets de correccion. Si se agrega una capa que sobresalga de esa
   caja, hay que ampliar el contenedor y rebasar todo de nuevo. */
.popup__paper { position: relative; width: calc(357.61 * var(--u)); height: calc(327 * var(--u)); overflow: visible; opacity: 0; transform: scale(0.92); transition: opacity 300ms ease, transform 300ms ease; }
.popup--visible .popup__paper { opacity: 1; transform: scale(1); }
/* Tamano real del asset definitivo: 347x327. El 324x293 anterior venia del
   placeholder. La posicion de las cinco capas esta verificada por correlacion
   contra img/popup/papiro-entero.svg (el papiro armado de una pieza) con
   0.44/255 de error, y despues rebasada al origen del contenedor. */
.popup__paper-body { position: absolute; z-index: 0; left: calc(1.87 * var(--u)); top: 0; width: calc(347 * var(--u)); height: calc(327 * var(--u)); clip-path: inset(0 50% 0 50%); transition: clip-path var(--papiro-apertura) cubic-bezier(0.16, 1, 0.3, 1); }
.popup__roll, .popup__lazo { position: absolute; max-width: none; transition: transform var(--papiro-apertura) cubic-bezier(0.16, 1, 0.3, 1); }
.popup__roll { z-index: 1; }
.popup__lazo { z-index: 2; }
.popup__roll--izq { left: calc(1.48 * var(--u)); top: calc(1.55 * var(--u)); width: calc(62 * var(--u)); height: calc(318 * var(--u)); transform: translateX(calc(131.39 * var(--u))); }
.popup__roll--der { left: calc(293.61 * var(--u)); top: calc(6.77 * var(--u)); width: calc(64 * var(--u)); height: calc(320 * var(--u)); transform: translateX(calc(-161.74 * var(--u))); }
.popup__lazo--izq { left: 0; top: calc(53.12 * var(--u)); width: calc(69 * var(--u)); height: calc(58 * var(--u)); transform: translateX(calc(131.39 * var(--u))); }
.popup__lazo--der { left: calc(300.54 * var(--u)); top: calc(131.91 * var(--u)); width: calc(49 * var(--u)); height: calc(68 * var(--u)); transform: translateX(calc(-161.74 * var(--u))); }
.popup--visible .popup__paper-body { clip-path: inset(0 0 0 0); }
.popup--visible .popup__roll--izq, .popup--visible .popup__lazo--izq, .popup--visible .popup__roll--der, .popup--visible .popup__lazo--der { transform: translateX(0); }
.popup__content { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.popup__title, .popup__copy, .popup__instagram, .popup__close { opacity: 0; transition: opacity 220ms ease; }
.popup--contenido .popup__title, .popup--contenido .popup__copy, .popup--contenido .popup__instagram, .popup--contenido .popup__close { opacity: 1; }
.popup--contenido .popup__copy { transition-delay: 80ms; }
.popup--contenido .popup__instagram { transition-delay: 160ms; }
.popup--contenido .popup__close { transition-delay: 240ms; }
/* Valores calibrados a ojo para el titulo en dos lineas, no medidas de Figma.
   Si cambia el texto y pasa a una o tres lineas, recalibrar los tres juntos. */
.popup__title { position: absolute; top: calc(75.66 * var(--u)); left: calc(50% - (237.95 * var(--u)) / 2); width: calc(237.95 * var(--u)); margin: 0; color: var(--color-navy); font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 800; line-height: calc(22 * var(--u)); text-align: center; }
.popup__copy { position: absolute; top: calc(125.66 * var(--u)); left: calc(50% - (248.6 * var(--u)) / 2); width: calc(248.6 * var(--u)); height: calc(95 * var(--u)); margin: 0; color: var(--color-navy); font-family: var(--font-display); font-size: calc(16 * var(--u)); font-weight: 400; line-height: calc(19 * var(--u)); text-align: center; }
.popup--registro .popup__title { top: calc(97 * var(--u)); }
.popup--registro .popup__copy { top: calc(150 * var(--u)); }
.popup__instagram { position: absolute; left: calc(50% - (239 * var(--u)) / 2); top: calc(230.66 * var(--u)); width: calc(239 * var(--u)); height: calc(55 * var(--u)); font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 600; text-decoration: none; pointer-events: auto; }
.popup__close { position: absolute; top: calc(25.66 * var(--u)); left: calc(260.07 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); padding: 0; border: 0; background: transparent; pointer-events: auto; }
.popup__close img { position: absolute; left: calc(6.48 * var(--u)); top: calc(6.32 * var(--u)); width: calc(31.48 * var(--u)); height: calc(31.37 * var(--u)); border: 0; outline: none; }
.popup :is(button, a):focus:not(:focus-visible) { outline: none; }
.popup :is(button, a):focus-visible { outline: calc(2 * var(--u)) solid var(--color-gold); outline-offset: calc(2 * var(--u)); }
/* El hueco lvh-svh del sticky queda pegado a la cenefa inferior: se pinta del naranja de la cenefa. */
.cupones { --escena-background: var(--color-sand); --escena-piso: var(--color-orange); }
.marco-papiro { position: absolute; z-index: 0; inset: 0; }
.cupones__title { position: absolute; z-index: 1; top: calc(50.4 * var(--u)); left: calc(50% - (338.8 * var(--u)) / 2); width: calc(338.8 * var(--u)); margin: 0; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(48 * var(--u)); font-weight: 800; line-height: calc(48 * var(--u)); letter-spacing: 0.02em; text-align: center; text-transform: uppercase; }
.cupones__subtitle { position: absolute; z-index: 1; top: calc(112.39 * var(--u)); left: calc(50% - (307.62 * var(--u)) / 2); width: calc(307.62 * var(--u)); margin: 0; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(18 * var(--u)); font-weight: 400; line-height: calc(18.9 * var(--u)); text-align: center; }
.carrusel__viewport { --carrusel-slide-ancho: 280; --carrusel-slide-alto: 330; --carrusel-gap: 0; --carrusel-recorte-top: -20; --carrusel-recorte-right: 0; --carrusel-recorte-bottom: 0; --carrusel-recorte-left: 0; position: absolute; z-index: 1; left: calc(47.5 * var(--u)); top: calc(164.38 * var(--u)); width: calc(var(--carrusel-slide-ancho) * var(--u)); height: calc(var(--carrusel-slide-alto) * var(--u)); overflow: visible; clip-path: inset(calc(var(--carrusel-recorte-top) * var(--u)) calc(var(--carrusel-recorte-right) * var(--u)) calc(var(--carrusel-recorte-bottom) * var(--u)) calc(var(--carrusel-recorte-left) * var(--u))); }
.cupones__viewport { --carrusel-recorte-bottom: -60; }
.carrusel__track { display: flex; gap: calc(var(--carrusel-gap) * var(--u)); height: 100%; touch-action: pan-y; transform: translateX(calc(-1 * var(--carrusel-index, 0) * (var(--carrusel-slide-ancho) + var(--carrusel-gap)) * var(--u))); transition: transform 300ms ease; }
.carrusel__track--sin-transicion { transition: none; }
.carrusel__slide { position: relative; flex: 0 0 calc(var(--carrusel-slide-ancho) * var(--u)); width: calc(var(--carrusel-slide-ancho) * var(--u)); height: calc(var(--carrusel-slide-alto) * var(--u)); }
.cupones__card { position: absolute; z-index: 0; left: calc(9 * var(--u)); top: calc(24 * var(--u)); width: calc(270 * var(--u)); height: calc(351 * var(--u)); }
.cupones__discount { position: absolute; z-index: 2; /* Valores de calibración óptica, no medidas del diseño; portados desde .vales__discount con factor 1.217. La sombra se ajusta hacia abajo y a la izquierda con estas variables. */ --precio-size: 58; --precio-entero-y: 15; --precio-cc-size: 35; --precio-dto-size: 20; --precio-gap-x: 2; --precio-cc-y: -6; --precio-y: 10; --cupones-sombra-x: 5; --cupones-sombra-y: 5; left: calc(1.98 * var(--u)); top: calc(-8.89 * var(--u)); width: calc(143.05 * var(--u)); height: calc(121.79 * var(--u)); }
/* Las cajas respetan la relación de aspecto del SVG para que la sombra no dependa del centrado de preserveAspectRatio. */
.cupones__slide .cupones__hexagon { position: absolute; left: calc(5.55 * var(--u)); top: 0; width: calc(131.95 * var(--u)); height: calc(118.37 * var(--u)); }
.cupones__slide .cupones__hexagon--shadow { left: calc((5.55 - var(--cupones-sombra-x)) * var(--u)); top: calc(var(--cupones-sombra-y) * var(--u)); width: calc(131.95 * var(--u)); height: calc(118.01 * var(--u)); }
.cupones__price { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: calc(var(--precio-gap-x) * var(--u)); padding-top: calc(var(--precio-y) * var(--u)); color: var(--color-navy); font-family: var(--font-display); font-weight: 800; transform: rotate(-6.98deg); pointer-events: none; }
.cupones__price-euros { font-size: calc(var(--precio-size) * var(--u)); line-height: 0.85; transform: translateY(calc(var(--precio-entero-y) * var(--u))); }
.cupones__price-resto { display: flex; flex-direction: column; align-items: flex-start; transform: translateY(calc(var(--precio-cc-y) * var(--u))); }
.cupones__price-centavos { font-size: calc(var(--precio-cc-size) * var(--u)); line-height: 1; }
.cupones__price-dto { font-size: calc(var(--precio-dto-size) * var(--u)); line-height: 1; white-space: nowrap; }
.cupones__product { position: absolute; z-index: 1; left: calc(50% - (116.48 * var(--u)) / 2 + 1.39 * var(--u)); top: calc(71.71 * var(--u)); width: calc(116.48 * var(--u)); height: calc(116.48 * var(--u)); object-fit: contain; }
.cupones__product-title { position: absolute; z-index: 1; /* Provisional: 190, calculado para encajar entre la imagen y el detalle; pendiente de confirmar contra Figma. */ top: calc(190 * var(--u)); left: calc(50% - (163.72 * var(--u)) / 2 + 0.02 * var(--u)); width: calc(163.72 * var(--u)); height: calc(44 * var(--u)); margin: 0; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(16 * var(--u)); font-weight: 800; line-height: calc(15 * var(--u)); text-align: center; transform: matrix(1, 0, -0.03, 1, 0, 0); }
.cupones__detail { position: absolute; z-index: 1; left: calc(-0.02 * var(--u)); top: calc(235.58 * var(--u)); width: calc(280 * var(--u)); height: calc(22 * var(--u)); margin: 0; color: var(--color-navy); font-family: var(--font-display); font-size: calc(18 * var(--u)); font-weight: 400; line-height: calc(22 * var(--u)); text-align: center; }
.cupones__barcode { position: absolute; z-index: 1; left: calc(68.26 * var(--u)); top: calc(266.17 * var(--u)); width: calc(143.7 * var(--u)); height: auto; filter: blur(calc(3 * var(--u))); }
.cupones__glyphs { position: absolute; z-index: 1; left: calc(31.91 * var(--u)); top: calc(319.9 * var(--u)); width: calc(216.4 * var(--u)); height: auto; }
.carrusel__arrow { position: absolute; z-index: 1; top: calc(320.47 * var(--u)); width: calc(54.05 * var(--u)); height: calc(52.81 * var(--u)); padding: 0; border: 0; background: transparent; }
/* Anclaje al viewport: el margen de 7.92 del diseño no sobrevive al recorte del cover. */
.carrusel__arrow--prev { left: calc(50% - 50vw + 7.92 * var(--u)); }
.carrusel__arrow--next { left: auto; right: calc(50% - 50vw + 7.92 * var(--u)); }
.carrusel__arrow::before, .carrusel__arrow::after { content: ""; position: absolute; border-radius: 44px; }
.carrusel__arrow::before { inset: 0; background: var(--color-gold-mid); }
.carrusel__arrow::after { left: calc(6.19 * var(--u)); top: calc(3.79 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: var(--color-sky); border: calc(4 * var(--u)) solid var(--color-gold); }
.carrusel__arrow span { position: absolute; z-index: 1; left: calc(17.21 * var(--u)); top: calc(15.29 * var(--u)); width: calc(20 * var(--u)); height: calc(21 * var(--u)); }
.carrusel__arrow img { width: 100%; height: 100%; }
.carrusel__arrow--prev img { transform: scaleX(-1); }
.carrusel__dots { position: absolute; z-index: 1; top: calc(540.43 * var(--u)); left: 50%; transform: translateX(-50%); display: flex; gap: calc(6 * var(--u)); height: calc(16.22 * var(--u)); }
.carrusel__dots button { position: relative; flex-shrink: 0; width: calc(16 * var(--u)); height: calc(16.22 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: var(--color-white-warm); }
/* Área táctil: llena el gap a cada lado (3u + 3u, sin solaparse con el vecino) y 44px de alto. El dibujo no cambia. */
.carrusel__dots button::after { content: ""; position: absolute; top: 50%; left: calc(-3 * var(--u)); right: calc(-3 * var(--u)); height: 44px; transform: translateY(-50%); }
.carrusel__dots button[aria-current="true"] { background: var(--color-brown-dark); }
.cupones__want { position: absolute; left: calc(50% - (239 * var(--u)) / 2 + 0.46 * var(--u)); top: calc(566.26 * var(--u)); z-index: 8; width: calc(239 * var(--u)); height: calc(55 * var(--u)); padding: 0; font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 600; text-decoration: none; }
/* La sección mide una pantalla y no cobra scroll propio. */
.ofertas { --escena-background: var(--color-brown-dark); }
.ofertas__stage { background: var(--color-brown-dark); }
/* El salto a ofertas es instantáneo y aterriza con --escena-entrada-p ya en 1,
   así que el fundido de entrada no puede salir del progreso del riel: lo
   dispara el marcador que escribe js/pase-puerta.js. Sin fill-mode a
   propósito: al terminar, la opacidad vuelve a mandarla --escena-entrada-p y
   el tramo sigue siendo reversible al scrollear hacia atrás. */
body[data-puerta-revelada="true"] .ofertas__stage {
  animation: ofertas-aparece 600ms ease;
}

@keyframes ofertas-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ofertas__decorado { position: absolute; z-index: 0; inset: 0; }
.ofertas__glifos { position: absolute; top: 0; left: min(calc(2.5 * var(--u)), var(--vp-izq)); width: calc(max(calc(372.5 * var(--u)), var(--vp-der)) - min(calc(2.5 * var(--u)), var(--vp-izq))); height: 100%; /* Opacidad calibrada contra el fondo marrón. */ opacity: 0.1; background-image: url("../img/puerta/glifos-pared.svg"); background-position: calc(calc(2.5 * var(--u)) - min(calc(2.5 * var(--u)), var(--vp-izq))) top; background-repeat: repeat; background-size: calc(370 * var(--u)) calc(20 * var(--u)); }
.ofertas__cenefa { position: absolute; left: calc(-207.06 * var(--u)); top: calc(-1.52 * var(--u)); width: calc(704.43 * var(--u)); height: auto; max-width: none; }
@media (max-width: 899px) {
  .ofertas__stage { --ofertas-subida: max(0px, calc(var(--vh) - 667 * var(--u))); }
  .ofertas__stage .ofertas__glifos { top: calc(-1 * var(--ofertas-subida)); height: calc(100% + var(--ofertas-subida)); }
  .ofertas__stage .ofertas__cenefa { top: calc(-1.52 * var(--u) - var(--ofertas-subida)); }
  .ofertas__arrow.carrusel__arrow--prev { left: calc(var(--vp-izq) + 8px); right: auto; }
  .ofertas__arrow.carrusel__arrow--next { left: calc(var(--vp-der) - 54.05 * var(--u) - 8px); right: auto; }
}
.ofertas__header { position: absolute; z-index: 1; top: calc(93.49 * var(--u)); left: calc(18.25 * var(--u)); display: flex; width: calc(338.8 * var(--u)); height: calc(140 * var(--u)); flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--u)); }
.ofertas__header h3 { width: 100%; flex-shrink: 0; margin: 0; color: var(--color-white-warm); font-family: var(--font-display); font-size: calc(48 * var(--u)); font-weight: 800; line-height: calc(48 * var(--u)); letter-spacing: 0.02em; text-align: center; text-transform: uppercase; }
.ofertas__header p { flex-shrink: 0; width: calc(293.01 * var(--u)); height: calc(76 * var(--u)); margin: 0; color: var(--color-white-warm); font-family: var(--font-display); font-size: calc(18 * var(--u)); font-weight: 400; line-height: calc(18.9 * var(--u)); text-align: center; }
.ofertas__viewport { --carrusel-slide-ancho: 293; --carrusel-slide-alto: 299.32; --carrusel-gap: 53; --carrusel-recorte-bottom: -11; top: calc(301.48 * var(--u)); left: 50%; transform: translateX(-50%); }
.ofertas__arrow { top: calc(424.735 * var(--u)); }
.ofertas__plato { position: absolute; max-width: none; }
.ofertas__slide .ofertas__plato--exterior { left: calc(1.56 * var(--u)); top: 0; width: calc(290 * var(--u)); height: calc(290 * var(--u)); }
.ofertas__slide .ofertas__plato--interior { left: calc(12.12 * var(--u)); top: calc(10.57 * var(--u)); width: calc(269 * var(--u)); height: calc(269 * var(--u)); }
.ofertas__slide .ofertas__producto { position: absolute; left: calc(51.06 * var(--u)); top: calc(36.97 * var(--u)); width: calc(191 * var(--u)); height: calc(125.4 * var(--u)); object-fit: contain; }
.ofertas__precio { position: absolute; --ofertas-precio-size: 56; --ofertas-precio-cc-size: 34; --ofertas-precio-unidad-size: 20; --ofertas-precio-gap-x: 2; --ofertas-precio-cc-y: -6; --ofertas-precio-entero-y: 15; --ofertas-precio-y: 0; --ofertas-precio-x: 0; left: calc(114 * var(--u)); top: calc(7.75 * var(--u)); width: calc(112.9 * var(--u)); height: calc(75 * var(--u)); }
.ofertas__stage .ofertas__precio > img { position: absolute; inset: 0; width: calc(113 * var(--u)); height: calc(76 * var(--u)); max-width: none; }
.ofertas__price { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: calc(var(--ofertas-precio-gap-x) * var(--u)); padding-top: calc(var(--ofertas-precio-y) * var(--u)); padding-right: calc(var(--ofertas-precio-x) * var(--u)); color: var(--color-brown-dark); font-family: var(--font-display); font-weight: 800; transform: rotate(4deg); pointer-events: none; }
.ofertas__price-entero { font-size: calc(var(--ofertas-precio-size) * var(--u)); line-height: 0.85; transform: translateY(calc(var(--ofertas-precio-entero-y) * var(--u))); }
.ofertas__price-resto { display: flex; flex-direction: column; align-items: flex-start; transform: translateY(calc(var(--ofertas-precio-cc-y) * var(--u))); }
.ofertas__price-centavos { font-size: calc(var(--ofertas-precio-cc-size) * var(--u)); line-height: 1; }
.ofertas__price-unidad { font-size: calc(var(--ofertas-precio-unidad-size) * var(--u)); line-height: 1; white-space: nowrap; }
.ofertas__texto { position: absolute; top: calc(169.17 * var(--u)); left: calc(50% - (226.74 * var(--u)) / 2); display: flex; width: calc(226.74 * var(--u)); flex-direction: column; align-items: center; gap: calc(5 * var(--u)); }
.ofertas__producto-titulo { width: 100%; margin: 0; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(14 * var(--u)); font-weight: 800; line-height: calc(17.6 * var(--u)); text-align: center; text-transform: uppercase; }
.ofertas__peso { width: 100%; margin: 0; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(18.9 * var(--u)); text-align: center; }
.ofertas__repisa { position: absolute; z-index: 2; --ofertas-estria-ancho: 9; --ofertas-estrias-alto: 50; --ofertas-estria-gap: -2; left: calc(50% - (296 * var(--u)) / 2); top: calc(271.9 * var(--u)); width: calc(296 * var(--u)); height: calc(26 * var(--u)); }
.ofertas__repisa > img { position: absolute; inset: 0; width: calc(296 * var(--u)); height: calc(26 * var(--u)); max-width: none; }
.ofertas__estrias { position: absolute; --ofertas-estrias-top: 15%; left: 50%; top: var(--ofertas-estrias-top); display: flex; z-index: 1; transform: translate(-50%, -50%); }
.ofertas__repisa .ofertas__estrias img { position: static; width: calc(var(--ofertas-estria-ancho) * var(--u)); height: calc(var(--ofertas-estrias-alto) * var(--u)); max-width: none; flex-shrink: 0; }
.ofertas__estria + .ofertas__estria { margin-left: calc(var(--ofertas-estria-gap) * var(--u)); }

.vales { --escena-background: var(--color-brown-dark); }
.vales__stage { background: var(--color-brown-dark); }
/* El riel pincha el sticky al llegar, igual que las secciones del principio:
   es la pausa para mirar la pantalla. Sin --escena-p: 0, el stage se ve desde
   el primer pixel y no reaparece el hueco marron del traspaso. */
.ofertas .escena-rail,
.vales .escena-rail {
  height: calc(var(--vh) * 0.6);
}
.vales__decorado { position: absolute; z-index: 0; inset: 0; }
.vales__glifos { position: absolute; top: 0; left: min(calc(2.5 * var(--u)), var(--vp-izq)); width: calc(max(calc(372.5 * var(--u)), var(--vp-der)) - min(calc(2.5 * var(--u)), var(--vp-izq))); height: 100%; background-image: url("../img/puerta/glifos-pared.svg"); background-position: calc(calc(2.5 * var(--u)) - min(calc(2.5 * var(--u)), var(--vp-izq))) top; background-repeat: repeat; background-size: calc(370 * var(--u)) calc(20 * var(--u)); opacity: 0.1; }
.vales__cenefa { position: absolute; left: calc(-207.06 * var(--u)); top: calc(-1.52 * var(--u)); width: calc(704.43 * var(--u)); height: calc(46.08 * var(--u)); max-width: none; }
.vales__columna { display: block; }
@media (max-width: 899px) {
  .vales__stage { --vales-subida: max(0px, calc(var(--vh) - 667 * var(--u))); }
  .vales__stage .vales__glifos { top: calc(-1 * var(--vales-subida)); height: calc(100% + var(--vales-subida)); }
  .vales__stage .vales__cenefa { top: calc(-1.52 * var(--u) - var(--vales-subida)); }
  .vales__stage .vales__columna--izq { left: calc(-77.23 * var(--u)); top: calc(42.51 * var(--u) - var(--vales-subida)); width: calc(133.01 * var(--u)); height: calc(635.63 * var(--u) + var(--vales-subida)); }
  .vales__stage .vales__columna--der { left: calc(320.69 * var(--u)); top: calc(43.15 * var(--u) - var(--vales-subida)); width: calc(132.88 * var(--u)); height: calc(634.99 * var(--u) + var(--vales-subida)); }
  .vales__arrow { top: calc(406.59 * var(--u)); }
  .vales__arrow.carrusel__arrow--prev { left: calc(var(--vp-izq) + 8px); right: auto; }
  .vales__arrow.carrusel__arrow--next { left: calc(var(--vp-der) - 54.05 * var(--u) - 8px); right: auto; }
}
.vales__header { position: absolute; z-index: 1; top: calc(55.49 * var(--u)); left: 50%; display: flex; width: calc(295 * var(--u)); height: auto; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u)); transform: translateX(-50%); }
.vales__header h3 { width: 100%; height: calc(48 * var(--u)); margin: 0; color: var(--color-white-warm); font-family: var(--font-display); font-size: calc(48 * var(--u)); font-weight: 800; line-height: calc(48 * var(--u)); letter-spacing: 0.02em; text-align: center; text-transform: uppercase; }
.vales__header p { width: calc(293.01 * var(--u)); height: auto; margin: 0; color: var(--color-white-warm); font-family: var(--font-display); font-size: calc(15 * var(--u)); font-weight: 400; line-height: calc(16.5 * var(--u)); text-align: center; }
.vales__viewport { --carrusel-slide-ancho: 219; --carrusel-slide-alto: 476; --carrusel-gap: 30; --carrusel-recorte-left: -22; top: calc(176.49 * var(--u)); left: calc(50% + 4 * var(--u)); width: calc(219 * var(--u)); height: calc(476 * var(--u)); transform: translateX(-50%); }
.vales__slide .vales__sarcofago { position: absolute; left: 0; top: 0; width: calc(219 * var(--u)); height: calc(476 * var(--u)); max-width: none; }
.vales__dilo { position: absolute; top: calc(30.78 * var(--u)); left: calc(50% - (117.66 * var(--u)) / 2 - 0.43 * var(--u)); width: calc(117.66 * var(--u)); height: calc(15.71 * var(--u)); margin: 0; color: var(--color-white); font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 500; line-height: calc(24 * var(--u)); text-align: center; }
.vales__frase { position: absolute; top: calc(57.22 * var(--u)); left: calc(50% - (150.95 * var(--u)) / 2 + 1.43 * var(--u)); width: calc(150.95 * var(--u)); height: calc(44 * var(--u)); margin: 0; color: var(--color-white-warm); font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 800; line-height: calc(22 * var(--u)); text-align: center; }
.vales__discount { --vales-precio-size: 79.9; --vales-precio-cc-size: 34; --vales-precio-unidad-size: 23.95; --vales-precio-gap-x: 2; --vales-precio-cc-y: -6; --vales-precio-entero-y: 15; --vales-precio-y: 8; position: absolute; z-index: 2; left: calc(-21.6 * var(--u)); top: calc(103.9 * var(--u)); width: calc(160.79 * var(--u)); height: calc(133.05 * var(--u)); transform: rotate(-7.24deg); }
.vales__discount--prefijo { --vales-precio-size: 52; --vales-precio-cc-size: 33; --vales-precio-unidad-size: 19; --vales-precio-entero-y: 0; --vales-precio-cc-y: 0; --vales-precio-y: 0; }
.vales__discount--combo { --vales-precio-size: 68; --vales-precio-cc-size: 36; --vales-precio-entero-y: 0; --vales-precio-cc-y: -11; --vales-precio-y: 0; }
.vales__hexagono { position: absolute; max-width: none; }
.vales__hexagono--sombra { left: 2.674296%; top: 1.082300%; width: 90.316562%; height: 102.863585%; }
.vales__hexagono--cara { left: 0; top: 0; width: 100%; height: 100%; }
.vales__price { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: calc(var(--vales-precio-y) * var(--u)); color: var(--color-navy); font-family: var(--font-display); font-weight: 800; pointer-events: none; transform: rotate(-6.98deg); }
.vales__price-fila { display: flex; flex-direction: row; align-items: center; gap: calc(var(--vales-precio-gap-x) * var(--u)); }
.vales__discount--combo .vales__price-fila { align-items: baseline; }
.vales__price-prefijo { margin-bottom: calc(-2 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1; white-space: nowrap; }
.vales__discount--prefijo .vales__price-prefijo { font-size: calc(23 * var(--u)); }
.vales__price-chico { font-size: 0.45em; vertical-align: middle; }
.vales__price-euros { font-size: calc(var(--vales-precio-size) * var(--u)); line-height: 0.85; transform: translateY(calc(var(--vales-precio-entero-y) * var(--u))); }
.vales__price-resto { display: flex; flex-direction: column; align-items: flex-start; transform: translateY(calc(var(--vales-precio-cc-y) * var(--u))); }
.vales__price-centavos { font-size: calc(var(--vales-precio-cc-size) * var(--u)); line-height: 1; }
.vales__price-dto { font-size: calc(var(--vales-precio-unidad-size) * var(--u)); line-height: 1; white-space: nowrap; }
.vales__slide .vales__producto { position: absolute; left: calc(36.57 * var(--u)); top: calc(192.35 * var(--u)); width: calc(145 * var(--u)); height: calc(165 * var(--u)); max-width: none; object-fit: contain; }
.vales__texto { position: absolute; top: calc(365 * var(--u)); left: calc(50% - (136.09 * var(--u)) / 2 + 1.61 * var(--u)); display: flex; width: calc(136.09 * var(--u)); flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.vales__titulo { width: 100%; margin: 0; color: var(--color-white); font-family: var(--font-display); font-size: calc(16 * var(--u)); font-weight: 800; line-height: calc(18 * var(--u)); text-align: center; transform: matrix(1, 0, -0.02, 1, 0, 0); }
.vales__peso { width: 100%; margin: 0; color: var(--color-white); font-family: var(--font-display); font-size: calc(15 * var(--u)); font-weight: 400; line-height: calc(18 * var(--u)); text-align: center; }

/* Formulario con sticky: el riel posterior mantiene la pantalla un momento. */
.formulario { --formulario-campo-padding: 5; position: relative; min-height: calc(var(--vh) * 1.6); background: var(--color-sand); }
/* Mismo patron que .escena: el sticky pincha la pantalla y el riel es la
   pausa para mirarla antes de seguir. */
.formulario__sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  height: var(--vh);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  padding-block: calc(40 * var(--u));
}
.formulario__rail { height: calc(var(--vh) * 0.6); pointer-events: none; }
/* Editado a mano tras exportar el SVG: se neutralizó su opacity interna para calibrarla solo desde CSS. */
.formulario__glifos { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0.1; }
.formulario__banda { position: absolute; width: calc(821.2 * var(--u)); height: calc(164.8 * var(--u)); max-width: none; }
.formulario__cenefa { display: none; }
.formulario__banda--uno { left: calc(1.7 * var(--u)); top: -1.61%; }
.formulario__banda--dos { left: calc(-11.6 * var(--u)); top: 26.33%; }
.formulario__banda--tres { left: calc(-175.2 * var(--u)); top: 46.65%; }
.formulario__banda--cuatro { left: calc(-188.6 * var(--u)); top: 74.59%; }
.formulario__header { position: relative; z-index: 1; display: flex; width: calc(294.6 * var(--u)); flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--u)); }
.formulario__header h2 { width: calc(295 * var(--u)); height: auto; margin: 0; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(28 * var(--u)); font-weight: 700; line-height: calc(23.52 * var(--u)); text-align: center; text-transform: uppercase; white-space: nowrap; }
.formulario__header p { width: calc(293.01 * var(--u)); height: auto; margin: 0; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(16 * var(--u)); font-weight: 400; line-height: calc(17.6 * var(--u)); text-align: center; }
.formulario__form { position: relative; z-index: 1; display: flex; width: calc(342.24 * var(--u)); height: auto; flex-direction: column; align-items: center; gap: calc(32 * var(--u)); }
.formulario__fields { display: flex; width: calc(342 * var(--u)); height: calc(296 * var(--u)); flex-direction: column; gap: calc(20 * var(--u)); }
.formulario__field { position: relative; width: calc(342 * var(--u)); height: calc(59 * var(--u)); flex: 0 0 calc(59 * var(--u)); }
.formulario__field-bg { position: absolute; inset: calc(0.5 * var(--u)) 0 auto; width: calc(342 * var(--u)); height: calc(58 * var(--u)); max-width: none; }
.formulario__field::before { content: ""; position: absolute; inset: calc(0.5 * var(--u)) 0 auto; z-index: 1; height: calc(58 * var(--u)); background: var(--color-field-focus); -webkit-mask: url("../img/formulario/campo.svg") no-repeat 0 0 / 100% 100%; mask: url("../img/formulario/campo.svg") no-repeat 0 0 / 100% 100%; opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
.formulario__field:focus-within::before { opacity: 1; }
.formulario__input { position: absolute; z-index: 2; top: 0; left: calc(50% - (268.96 * var(--u)) / 2); width: calc(268.96 * var(--u)); height: 100%; padding-inline: calc(var(--formulario-campo-padding) * var(--u)); border: 0; background: transparent; color: var(--color-white-warm); font-family: var(--font-display); font-size: calc(18 * var(--u)); font-weight: 400; line-height: calc(18.9 * var(--u)); text-align: left; }
.formulario__input:-webkit-autofill,
.formulario__input:-webkit-autofill:hover,
.formulario__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-white-warm);
  caret-color: var(--color-white-warm);
  transition: background-color 0s 600000s, color 0s 600000s;
}
.formulario__input::placeholder { color: var(--color-white-warm); opacity: 1; }
/* El foco: cambio de color del campo (::before) + anillo navy que sigue la forma,
   separado 2px por un halo arena (mismo offset que el foco de los CTA). El estado
   de error usa la misma técnica y, por especificidad, gana si el campo es inválido. */
.formulario__input:focus-visible { outline: none; }
.formulario__field:focus-within .formulario__field-bg {
  filter:
    drop-shadow(2px 0 0 var(--color-sand)) drop-shadow(-2px 0 0 var(--color-sand))
    drop-shadow(0 2px 0 var(--color-sand)) drop-shadow(0 -2px 0 var(--color-sand))
    drop-shadow(2px 0 0 var(--color-navy)) drop-shadow(-2px 0 0 var(--color-navy))
    drop-shadow(0 2px 0 var(--color-navy)) drop-shadow(0 -2px 0 var(--color-navy));
}
.formulario__terms { display: flex; width: calc(342.24 * var(--u)); height: calc(20 * var(--u)); align-items: center; }
.formulario__checkbox-label { display: flex; min-height: calc(44 * var(--u)); align-items: center; gap: calc(11 * var(--u)); color: var(--color-navy); font-family: var(--font-display); font-size: calc(16 * var(--u)); font-weight: 400; line-height: calc(19 * var(--u)); }
.formulario__checkbox-control { position: relative; display: flex; width: calc(44 * var(--u)); height: calc(44 * var(--u)); flex: 0 0 calc(44 * var(--u)); align-items: center; justify-content: center; }
.formulario__checkbox { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.formulario__checkbox-visual { position: relative; display: block; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.formulario__checkbox-visual img { width: 100%; height: 100%; }
.formulario__checkbox[aria-invalid="true"] + .formulario__checkbox-visual img {
  filter:
    drop-shadow(2px 0 0 var(--color-error))
    drop-shadow(-2px 0 0 var(--color-error))
    drop-shadow(0 2px 0 var(--color-error))
    drop-shadow(0 -2px 0 var(--color-error));
}
.formulario__checkbox-visual > span { position: absolute; inset: 0; display: none; }
.formulario__checkbox:checked + .formulario__checkbox-visual > span { display: block; }
/* Provisional: el asset del estado marcado está pendiente del diseño. */
.formulario__checkbox:checked + .formulario__checkbox-visual > span::after { position: absolute; top: calc(3 * var(--u)); left: calc(5 * var(--u)); width: calc(8 * var(--u)); height: calc(12 * var(--u)); border-right: calc(2 * var(--u)) solid var(--color-navy); border-bottom: calc(2 * var(--u)) solid var(--color-navy); content: ""; transform: rotate(45deg); }
.formulario__checkbox:focus-visible + .formulario__checkbox-visual { outline: calc(2 * var(--u)) solid var(--color-gold); outline-offset: calc(2 * var(--u)); }
.formulario__terms-text { white-space: nowrap; }
.formulario__checkbox-label:has(.formulario__checkbox[aria-invalid="true"]) .formulario__terms-text { color: var(--color-error); }
.formulario__terms-text a { color: var(--color-link); text-decoration: underline; }
.formulario__submit { width: calc(239 * var(--u)); height: calc(55 * var(--u)); flex-shrink: 0; padding: 0; font-family: var(--font-display); font-size: calc(22 * var(--u)); font-weight: 600; }
.formulario__submit:focus-visible { outline: calc(2 * var(--u)) solid var(--color-navy); outline-offset: calc(3 * var(--u)); }

@media (max-width: 899px) {
  .formulario {
    /* Escala por el lado que limite: el sticky mide 100svh con overflow hidden y en pantallas cortas cortaba título y botón. */
    --u: min(calc(min(100vw, 480px) / 375), calc(100svh / 658));
  }
}

@media (min-width: 481px) and (max-width: 899px) {
  .formulario {
    width: 100vw;
    margin-left: calc((480px - 100vw) / 2);
  }
}

.footer { position: relative; display: flex; width: 100%; min-height: calc(618.52 * var(--u)); padding-inline: calc(24 * var(--u)); overflow: hidden; flex-direction: column; align-items: center; gap: calc(24 * var(--u)); background: var(--color-orange-hex); }
.footer__cenefa { position: relative; z-index: 1; width: calc(937 * var(--u)); height: calc(45 * var(--u)); max-width: none; flex: 0 0 calc(45 * var(--u)); transform: translateX(calc(var(--footer-cenefa-x, 0) * var(--u))) scaleX(-1); }
.footer__cenefa--inferior { --footer-cenefa-x: 280; }
.footer__columna { position: absolute; z-index: 0; width: calc(122.71 * var(--u)); height: calc(536.99 * var(--u)); max-width: none; }
.footer__columna--izquierda { left: calc(-70.48 * var(--u)); top: calc(38.92 * var(--u)); }
.footer__columna--derecha { left: calc(329.82 * var(--u)); top: calc(38.95 * var(--u)); }
.footer__title { position: relative; z-index: 1; width: calc(307.58 * var(--u)); height: calc(116 * var(--u)); margin: 0; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(34 * var(--u)); font-weight: 700; line-height: calc(28.56 * var(--u)); text-align: center; text-transform: uppercase; }
.footer__logo { position: relative; z-index: 1; width: calc(224.34 * var(--u)); height: calc(110.52 * var(--u)); max-width: none; object-fit: contain; }
.footer__social { position: relative; z-index: 1; display: flex; width: calc(292 * var(--u)); height: calc(59 * var(--u)); align-items: center; justify-content: center; gap: calc(4 * var(--u)); margin: 0; padding: 0 calc(4 * var(--u)); list-style: none; background: url("../img/footer/redes-fondo.svg") center / 100% 100% no-repeat; }
.footer__social li { display: flex; width: calc(44 * var(--u)); height: calc(44 * var(--u)); align-items: center; justify-content: center; }
.footer__social a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: calc(10 * var(--u)); }
.footer__social img { width: 100%; height: 100%; object-fit: contain; }
.footer__social a:focus-visible { outline: calc(2 * var(--u)) solid var(--color-brown-dark); outline-offset: calc(2 * var(--u)); }
.footer__legal { position: relative; z-index: 1; display: flex; width: calc(197 * var(--u)); height: calc(164 * var(--u)); /* 4 x 41 */ flex-direction: column; }
.footer__legal a { display: flex; width: 100%; height: calc(41 * var(--u)); align-items: center; justify-content: center; color: var(--color-brown-dark); font-family: var(--font-display); font-size: calc(18 * var(--u)); font-weight: 500; line-height: calc(18.9 * var(--u)); text-align: center; text-decoration: none; }
.footer__legal a:hover, .footer__legal a:focus-visible { text-decoration: underline; }
.footer__legal a:focus-visible { outline: calc(2 * var(--u)) solid var(--color-brown-dark); outline-offset: calc(2 * var(--u)); }

@media (max-width: 899px) {
  .footer {
    /* Escala por el lado que limite. 659.52 es el alto real del contenido en flujo (cenefa 45 + título 116 + logo 110.52 + redes 59 + legales 164 + cenefa 45 + 5 gaps de 24), no el min-height de diseño: con 618.52 la banda de arriba quedaba fuera. */
    --u: min(calc(min(100vw, 480px) / 375), calc(100svh / 659.52));
  }
}

@media (min-width: 481px) and (max-width: 899px) {
  .footer {
    width: 100vw;
    margin-left: calc((480px - 100vw) / 2);
  }
}

@media (max-width: 899px) {
  /* Del borde superior (38.92u, bajo la banda de arriba) hasta la banda de abajo (45u): con alto fijo quedaban flotando. cover escala sin deformar y recorta los costados, que caen fuera de pantalla. */
  .footer__columna {
    height: calc(100% - (38.92 + 45) * var(--u));
    object-fit: cover;
  }

  .footer__columna--izquierda {
    left: calc(-70.48 * var(--u));
  }

  .footer__columna--derecha {
    left: auto;
    right: calc(-77.53 * var(--u));
  }

  /* Las cenefas en flujo se ubican con un translateX calibrado para la escala por ancho; con --u limitado por alto no llegan al borde. Las bandas ::before/::after cubren siempre el ancho completo. */
  .footer__cenefa { visibility: hidden; }

  .footer__title,
  .footer__logo,
  .footer__social,
  .footer__legal { z-index: 2; }

  .footer::before,
  .footer::after {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    height: calc(45 * var(--u));
    background-color: var(--color-sand);
    background-image: url("../img/footer/cenefa.svg");
    background-repeat: no-repeat;
    background-size: calc(937 * var(--u)) 100%;
    background-position: calc(50vw - 604.5 * var(--u)) top;
    content: "";
  }

  .footer::before { top: 0; }
  .footer::after { bottom: 0; }
}

.hero__sticky {
  position: sticky;
  top: 0;
  display: flex;
  height: var(--vh);
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-sand) linear-gradient(var(--color-sky), var(--color-sky));
}

.hero__stage {
  position: relative;
  --p: var(--intro-progress);
  /* Tramos: 0–.15 sale intro; 0–.30 entra Ofertiti; 0–.40 entra lockup;
     .30–.55 cierran nubes; .45–.70 entra evento; .55–.75 entra EMPEZAR. */
  --p-exit-early-t: clamp(0, calc(var(--p) / 0.15), 1);
  --p-exit-early: calc(var(--p-exit-early-t) * var(--p-exit-early-t) * (3 - 2 * var(--p-exit-early-t)));
  --p-ofertiti-t: clamp(0, calc(var(--p) / 0.30), 1);
  --p-ofertiti: calc(var(--p-ofertiti-t) * var(--p-ofertiti-t) * (3 - 2 * var(--p-ofertiti-t)));
  --p-lockup-t: clamp(0, calc(var(--p) / 0.40), 1);
  --p-lockup: calc(var(--p-lockup-t) * var(--p-lockup-t) * (3 - 2 * var(--p-lockup-t)));
  --p-clouds-close-t: clamp(0, calc((var(--p) - 0.30) / 0.25), 1);
  --p-clouds-close: calc(var(--p-clouds-close-t) * var(--p-clouds-close-t) * (3 - 2 * var(--p-clouds-close-t)));
  --p-event-t: clamp(0, calc((var(--p) - 0.45) / 0.25), 1);
  --p-event: calc(var(--p-event-t) * var(--p-event-t) * (3 - 2 * var(--p-event-t)));
  --p-start-event-t: clamp(0, calc((var(--p) - 0.55) / 0.20), 1);
  --p-start-event: calc(var(--p-start-event-t) * var(--p-start-event-t) * (3 - 2 * var(--p-start-event-t)));
  width: 100%;
  aspect-ratio: var(--escena-ar);
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .hero__sticky { justify-content: center; }
  .hero__stage {
    /* Mismo criterio que .escena__stage; el techo excluye lockup y Ofertiti, que se recortan por diseño. */
    --u: clamp(
      min(calc(100vw / 375), calc(100svh / 667)),
      calc(100svh / 667),
      calc(100vw / 354)
    );
    width: calc(375 * var(--u));
    /* Bordes del viewport en coordenadas del stage, igual que en 481–899: la arena los usa para sangrar. */
    --stage-w: calc(375 * var(--u));
    --vp-izq: calc((var(--stage-w) - 100vw) / 2);
    --vp-der: calc((var(--stage-w) + 100vw) / 2);
  }
}

@media (max-width: 899px) {
  .hero__sticky {
    /* clip y no hidden: hidden obliga a que el otro eje sea auto y el sticky
       pasaría a scrollear. clip corta lo que sale por los costados (lockup,
       esfinge, nubes) sin crear scroll horizontal en la página, y deja
       sangrar abajo hacia el clip-path. */
    overflow-x: clip;
    overflow-y: visible;
    /* Recorta igual que antes a los costados y arriba, pero abajo deja
       sangrar hasta el viewport grande: la franja bajo la barra de Safari. */
    clip-path: inset(0 0 calc(100svh - 100lvh) 0);
  }
  .hero__ofertiti {
    /* Safari tapa todo lo que queda bajo innerHeight con una franja de color
       sólido. Ofertiti se funde en la arena justo antes de ese corte (el borde
       inferior del stage, 667u) en vez de quedar cortada por un rectángulo.
       Coordenadas en la caja de la imagen: top 337.41u, así que el corte cae
       a 329.59u de su borde superior. Calibrable: el largo del fundido (30u). */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(299.59 * var(--u)), transparent calc(329.59 * var(--u)));
    mask-image: linear-gradient(to bottom, #000 calc(299.59 * var(--u)), transparent calc(329.59 * var(--u)));
  }
  .hero__sphinx-ground {
    /* arena-cerca.webp trae 8px transparentes a la izquierda; el fondo los
       rellena con el mismo color de la arena. */
    background-color: var(--color-sand);
  }
}

.hero__stage img,
.hero__stage picture {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}

.hero__sphinx-ground img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

.hero__clouds {
  z-index: 1;
  top: calc(71 * var(--u));
  left: calc(32 * var(--u));
  width: calc(168.81 * var(--u));
  transform: translate(calc(-93.16 * var(--p) * var(--u)), calc(-30 * var(--p) * var(--u)));
}

.hero__lockup {
  z-index: 2;
  top: calc(76.98 * var(--u));
  left: calc(22.6 * var(--u));
  width: calc(343 * var(--u));
  transform: translateY(calc(var(--salida-y) * var(--p-lockup)));
}

.hero__stage .hero__lockup-word,
.hero__stage .hero__lockup-banner {
  display: none;
}

.hero__prompt-group {
  position: absolute;
  z-index: 3;
  top: calc(312.22 * var(--u));
  left: calc(133.01 * var(--u));
  width: calc(230.15 * var(--u));
  height: calc(99.99 * var(--u));
  transform: translateX(calc(var(--salida-x) * var(--p-ofertiti)));
}

.hero__prompt-group img,
.hero__riddle-group img,
.hero__sphinx-group img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}

.hero__balloon {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
}

.hero__balloon img {
  position: static;
  width: 100%;
}

/* DESLIZA HACIA ABAJO PARA CONTINUAR */
.hero__prompt {
  position: absolute;
  z-index: 1;
  top: 25.39%;
  left: 9.98%;
  width: 80.04%;
  height: 49.36%;
  margin: 0;
  color: var(--color-brown-dark);
  font-family: var(--font-display);
  font-size: calc(18 * var(--u));
  font-style: normal;
  font-weight: 800;
  line-height: calc(24 * var(--u));
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El corte "para / continuar" es solo de escritorio. */
.hero__prompt-corte { display: none; }

/* En mobile el escenario puede ser más ancho que la pantalla: en el peor caso
   se ven 354 de las 375 unidades (de 10.5 a 364.5, ver --u de .hero__stage).
   330 centrado (22.5 a 352.5) deja margen en cualquier ancho. La altura
   mantiene la proporción del globo (341.6 x 148.25). */
.hero__riddle-group {
  position: absolute;
  z-index: 8;
  top: calc(122.3 * var(--u));
  left: calc(22.5 * var(--u));
  width: calc(330 * var(--u));
  height: calc(143.21 * var(--u));
  transform: scale(calc(0.7 * var(--p-event) + 0.3 * var(--p-event) * var(--p-event) + 0.08 * var(--p-event) * (1 - var(--p-event))));
  transform-origin: center;
}

.hero__question-ui .hero__riddle-group {
  top: calc(99.11 * var(--u));
  transform: scale(clamp(0, calc(var(--quiz-p) / 0.5), 1));
}

.hero__stage[data-respondido="true"] .hero__question-ui > .hero__riddle-group {
  transform: scale(clamp(0, calc((1 - var(--resultado-salida-p, 0)) / 0.3), 1));
}

.hero__stage[data-estado="pregunta"] .hero__riddle-group {
  top: calc(99.11 * var(--u));
}

.piramide-escena {
  position: absolute;
  z-index: 18;
  inset: 0;
  background: var(--color-sky);
  /* Crossfade de entrada. El 0.15 va apareado con el umbral de
     controlsVisible en intro-scroll.js: si se mueve uno, se mueve el otro. */
  opacity: clamp(0, calc(var(--piramide-p, 0) / 0.15), 1);
  transform-origin: 0 0;
  transform: translate(calc((-123.13 * var(--piramide-p, 0) - 1200.10 * var(--puerta-p, 0) - 100.71 * var(--entrada-p, 0)) * var(--u)), calc((-445.26 * var(--piramide-p, 0) - 3242.59 * var(--puerta-p, 0) - 214.27 * var(--entrada-p, 0)) * var(--u))) scale(calc(1 + 0.6587 * var(--piramide-p, 0) + 5.8413 * var(--puerta-p, 0) + 0.5 * var(--entrada-p, 0)));
  visibility: hidden;
  pointer-events: none;
}

.piramide-escena__nube-sol {
  top: calc(91.61 * var(--u));
  left: calc(104.07 * var(--u));
  width: calc(227.51 * var(--u));
}

.piramide-escena__nube-alta,
.piramide-escena__nube-der,
.piramide-escena__nube-izq {
  display: none;
}

.piramide-escena__piramide {
  top: calc(284.41 * var(--u));
  left: calc(-243.52 * var(--u));
  width: calc(860.93 * var(--u));
}

.piramide-escena__arena {
  top: calc(541.61 * var(--u));
  left: calc(-130.96 * var(--u));
  width: calc(737.57 * var(--u));
  transform: translateY(calc(120 * var(--entrada-p, 0) * var(--u)));
}

/* La puerta se abre y luego la cámara entra al interior durante los dos
   últimos tramos del riel (intro-scroll.js). */
.piramide-puerta {
  position: absolute;
  top: calc(506.25 * var(--u));
  left: calc(164.44 * var(--u));
  /* Maquetado 8x y contra-escalado: obliga a rasterizar hojas.svg a 605px
     en vez de a 75px, que con el zoom x8 del ancestro se veía borroso. */
  width: calc(605.36 * var(--u));
  height: calc(497.52 * var(--u));
  perspective: calc(1520 * var(--u));
  transform: scale(0.125);
  transform-origin: 0 0;
}

.piramide-puerta img {
  position: absolute;
  display: block;
  max-width: none;
}

.piramide-puerta .piramide-puerta__hoja {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* El envoltorio lleva el recorte del vano y la profundidad. Se abre con
   --entrada-p hasta cubrir la pantalla: a partir de ahí ya estamos adentro
   y el marco deja de encuadrar. */
.piramide-puerta__vano {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    calc(3.01% - 200% * var(--entrada-p, 0)) calc(9.08% - 200% * var(--entrada-p, 0)),
    calc(94.75% + 200% * var(--entrada-p, 0)) calc(3.98% - 200% * var(--entrada-p, 0)),
    calc(94.75% + 200% * var(--entrada-p, 0)) calc(94.25% + 200% * var(--entrada-p, 0)),
    calc(3.01% - 200% * var(--entrada-p, 0)) calc(99.37% + 200% * var(--entrada-p, 0))
  );
  transform: translateZ(calc(-480 * var(--u))) scale(1.3158);
  transform-origin: center;
}

.piramide-puerta .piramide-puerta__interior {
  left: calc(18.22 * var(--u));
  top: calc(-236.55 * var(--u));
  width: calc(555.36 * var(--u));
  height: calc(987.3 * var(--u));
}

/* Cerradas no dejan ver el vano que se agranda con --entrada-p: se funden en
   el primer 30% de la entrada. Calibrable: el 0.3. */
.piramide-puerta .piramide-puerta__hoja {
  opacity: calc(1 - clamp(0, calc(var(--entrada-p, 0) / 0.3), 1));
}

/* Cada hoja es el SVG completo recortado a su mitad. Quedan fijas cerradas:
   la apertura animada se quitó. */
.piramide-puerta__hoja--izq {
  clip-path: inset(0 50% 0 0);
}

.piramide-puerta__hoja--der {
  clip-path: inset(0 0 0 50%);
}

.piramide-escena[data-piramide-active="true"] {
  visibility: visible;
}

.hero__riddle-balloon {
  inset: 0;
  width: 100%;
  transform: scaleX(-1);
  transform-origin: center;
}

.hero__riddle-balloon--answer {
  inset: 0;
  width: 100%;
  --cola: 1;
}

/* Cada estado usa su propio globo para conservar la orientación de la cola. */
.hero__stage[data-estado="intro"] .hero__riddle-balloon--answer,
.hero__stage[data-estado="pregunta"] .hero__riddle-balloon {
  visibility: hidden;
}

.hero__stage[data-estado="pregunta"] > .hero__riddle-group {
  visibility: hidden;
  pointer-events: none;
}

.hero__riddle {
  position: absolute;
  z-index: 1;
  top: 22.87%;
  left: 6.93%;
  width: 84.45%;
  height: 56.66%;
  margin: 0;
  color: var(--color-brown-dark);
  font-family: var(--font-display);
  font-size: calc(26 * var(--u));
  font-weight: 800;
  line-height: 80%;
  text-align: center;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figma mobile: P Black 18/20, caja de 40 centrada en el globo. Solo el de
   la intro: la regla base la comparte con .hero__riddle--answer. Desktop la
   pisa con su propio selector, más específico. */
.hero__riddle--intro {
  top: calc(50% - 20 * var(--u));
  left: 7.77%;
  width: 84.46%;
  height: calc(40 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(20 * var(--u));
}

/* Mobile. Desktop lo pisa con su propio selector, más específico. */
.hero__riddle--answer {
  font-size: calc(22 * var(--u));
}

.hero__sphinx-group {
  position: absolute;
  z-index: 5;
  top: calc(518.94 * var(--u));
  left: calc(255 * var(--u));
  width: calc(227.52 * var(--u));
  height: calc(144.18 * var(--u));
  transform: translate(calc(-243.2 * var(--p) * var(--u)), calc(-257.15 * var(--p) * var(--u))) scale(calc(1 + 2.01 * var(--p)));
  transform-origin: top left;
}

.hero__sphinx-ground {
  position: absolute;
  display: block;
  z-index: 0;
  top: calc(586.73 * var(--u));
  left: 0;
  width: calc(500.79 * var(--u));
  transform-origin: 0 0;
  /* transform-origin 0 0 es la esquina propia del elemento; la traslación
     es delta puro, no destino - origen * escala. */
  transform:
    translate(calc(-755.75 * var(--p) * var(--u)),
              calc(-120.89 * var(--p) * var(--u)))
    scale(calc(1 + 2.01 * var(--p)));
}

.hero__sphinx {
  z-index: 1;
  inset: 0;
  width: calc(227.52 * var(--u));
}

.hero__ofertiti {
  z-index: 6;
  top: calc(337.41 * var(--u));
  left: calc(-24.02 * var(--u));
  width: calc(236.88 * var(--u));
  transform: translateX(calc(var(--salida-x) * var(--p-ofertiti)));
}

.hero__cloud-two,
.hero__cloud-three {
  z-index: 8;
}

.hero__cloud-two {
  top: calc(64.37 * var(--u));
  left: calc(140.02 * var(--u));
  width: calc(145.63 * var(--u));
  transform: translateY(calc(var(--entrada-y) * (1 - var(--p-clouds-close))));
}

.hero__cloud-three {
  top: calc(140.02 * var(--u));
  left: calc(282.9 * var(--u));
  width: calc(145.63 * var(--u));
  transform: translateY(calc(var(--entrada-y) * (1 - var(--p-clouds-close)))) scaleX(-1);
}

.hero__start {
  position: absolute;
  z-index: 10;
  top: calc(537.59 * var(--u));
  left: calc(46.49 * var(--u));
  width: calc(284.32 * var(--u));
  height: calc(59.26 * var(--u));
  padding: 0;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: calc(26 * var(--u));
  line-height: 1;
  font-weight: 600;
  transform-origin: center;
  transform: scale(calc(0.7 * var(--p-start-event) + 0.3 * var(--p-start-event) * var(--p-start-event) + 0.08 * var(--p-start-event) * (1 - var(--p-start-event))));
}

.hero__question-ui {
  position: absolute;
  /* Debe quedar bajo .piramide-escena para el crossfade, y sobre
     .hero__start (10) y .hero__riddle-group (8). */
  z-index: 16;
  inset: 0;
  pointer-events: none;
  transform: none;
  transform-origin: center;
}

.hero__stage[data-estado="intro"] .hero__question-ui,
.hero__stage[data-estado="pregunta"] .hero__start {
  visibility: hidden;
  pointer-events: none;
}

.hero__stage[data-estado="pregunta"] .hero__question-ui {
  visibility: visible;
}

.hero__stage[data-estado="pregunta"] .hero__question-ui[data-quiz-visible="true"] {
  pointer-events: auto;
}

.hero__options {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}

.hero__option {
  position: absolute;
  left: calc(42.08 * var(--u));
  width: calc(292 * var(--u));
  height: calc(59 * var(--u));
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: url("../img/acertijo/opcion.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--color-brown-dark);
  font-family: var(--font-display);
  font-size: calc(22 * var(--u));
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  transform: scale(0);
  transform-origin: center;
  transition: transform 220ms ease-out, background-image 0ms;
  /* El ocultamiento lo dan transform: scale(0) y pointer-events: none; el
     contenedor .hero__options conserva visibility: hidden en estado intro,
     y la accesibilidad la manejan inert y aria-hidden sobre .hero__question-ui. */
  pointer-events: none;
}

/* La máquina de estados mantiene fuera de juego los controles del estado inactivo. */
.hero__stage[data-estado="intro"] .hero__options,
.hero__stage[data-estado="intro"] .hero__continue,
.hero__stage[data-estado="pregunta"] .hero__start {
  visibility: hidden;
  pointer-events: none;
}

.hero__stage[data-estado="intro"] .hero__option,
.hero__stage[data-estado="intro"] .hero__continue {
  transform: translateY(120%);
}

.hero__stage[data-estado="pregunta"] .hero__option[data-quiz-active="true"] {
  transform: scale(1);
  pointer-events: auto;
}

.hero__option:nth-child(1) { top: calc(264.71 * var(--u)); }
.hero__option:nth-child(2) { top: calc(333.21 * var(--u)); }
.hero__option:nth-child(3) { top: calc(401.71 * var(--u)); }
.hero__option:nth-child(4) { top: calc(470.21 * var(--u)); }

/* El escalonado va en el delay, no en el scroll. Definido sobre el estado
   activo a propósito: al volver a inactivo la regla no matchea y la salida
   arranca sin demora. */
.hero__option[data-quiz-active="true"]:nth-child(1) { transition-delay: 0ms; }
.hero__option[data-quiz-active="true"]:nth-child(2) { transition-delay: 90ms; }
.hero__option[data-quiz-active="true"]:nth-child(3) { transition-delay: 180ms; }
.hero__option[data-quiz-active="true"]:nth-child(4) { transition-delay: 270ms; }
.hero__continue[data-quiz-active="true"] { transition-delay: 400ms, 0ms, 0ms; }

/* Sin escalonado a la salida: un scroll rápido vuelve a traer el globo
   antes de que termine, y se pisan. La entrada sí lo conserva. */
.hero__continue[data-quiz-active="false"],
.hero__option[data-quiz-active="false"] { transition-delay: 0ms; }

.hero__option.is-selected {
  background-image: url("../img/acertijo/opcion-seleccionada.webp");
}

.hero__continue {
  position: absolute;
  z-index: 13;
  top: calc(557.8 * var(--u));
  left: calc(68 * var(--u));
  width: calc(239 * var(--u));
  height: calc(55 * var(--u));
  padding: 0;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: calc(22 * var(--u));
  line-height: 1;
  font-weight: 600;
  transform: scale(0);
  transform-origin: center;
  transition: transform 220ms ease-out, background-color 150ms ease, color 150ms ease;
  pointer-events: none;
}

.hero__stage[data-estado="pregunta"] .hero__continue[data-quiz-active="true"] {
  transform: scale(1);
  pointer-events: auto;
}

.hero__continue:disabled { background: var(--color-disabled); }

.hero__continue:disabled {
  cursor: not-allowed;
}

/* Mismo criterio que .hero__riddle-group: 330 centrado (22.5 a 352.5) entra
   en las 354 unidades visibles del peor caso de mobile sin tocar los bordes.
   La altura sale del aspect-ratio. */
.hero__result {
  position: absolute;
  z-index: 14;
  top: calc(99.11 * var(--u));
  left: calc(22.5 * var(--u));
  width: calc(330 * var(--u));
  aspect-ratio: 1025 / 445;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: 2% 8.5% 0 7.04%;
  visibility: hidden;
  pointer-events: none;
  transform: scale(clamp(0, calc(var(--resultado-entrada-p, 0) / 0.3), 1));
}

.hero__result-balloon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 1025 / 445;
  --cola: 1;
}

/* Orientación de la cola del globo, explícita por instancia.
   --cola: 1 = como viene el archivo; --cola: -1 = espejado.
   Antes esto eran scaleX(-1) sueltos en cuatro lugares y la orientación
   dependía de qué archivo había cargado el <picture>, no de una decisión. */
.hero__riddle-balloon--answer,
.hero__result-balloon,
.prueba-superada__globo img {
  transform: scaleX(var(--cola, 1));
  transform-origin: center;
}

@media (min-width: 481px) and (max-width: 899px) {
  .hero__sticky {
    --u: min(calc(min(100vw, 480px) / 375), calc(100svh / 667));
    width: 100vw;
    margin-left: calc((480px - 100vw) / 2);
    justify-content: center;
  }

  .hero__stage {
    --stage-w: calc(375 * var(--u));
    --vp-izq: calc((var(--stage-w) - 100vw) / 2);
    --vp-der: calc((var(--stage-w) + 100vw) / 2);
    /* La salida tiene que cruzar también el margen entre el stage y el borde
       del viewport; --vp-izq es negativo en este rango. */
    --salida-x: calc(-1.0667 * 375 * var(--u) + var(--vp-izq));
    width: calc(375 * var(--u));
  }

}

@media (max-width: 899px) {
  .hero__sphinx-ground {
    left: min(0px, var(--vp-izq));
    width: calc(max(calc(500.79 * var(--u)), var(--vp-der)) - min(0px, var(--vp-izq)));
  }

  .hero__sphinx-ground img {
    width: calc(500.79 * var(--u));
    margin-left: calc(0px - min(0px, var(--vp-izq)));
  }
}

@media (min-width: 900px) {
  .escena__sticky,
  .hero__sticky {
    align-items: center;
    justify-content: center;
    background: var(--lienzo-fondo);
  }

  .escena__panel {
    align-items: center;
    overflow: visible;
  }

  .hero__sticky {
    --lienzo-fondo: var(--color-sky);
  }

  .escena__stage,
  .hero__stage {
    width: var(--stage-w);
    height: var(--stage-h);
    margin-inline: auto;
    aspect-ratio: var(--escena-ar);
  }
}

.hero__result-title,
.hero__result-copy {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-brown-dark);
  font-family: var(--font-display);
  text-align: center;
}

.hero__result-title {
  font-size: calc(20 * var(--u));
  font-weight: 800;
  line-height: 100%;
  text-transform: uppercase;
}

.hero__result-copy {
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 105%;
}

.hero__result-cta {
  /* Entra después de la nube: fundido + sube 16u, entre el 30% y el 50% del tramo de entrada. */
  --cta-entrada: clamp(0, calc((var(--resultado-entrada-p, 0) - 0.3) / 0.2), 1);
  opacity: var(--cta-entrada);
  translate: 0 calc((1 - var(--cta-entrada)) * 16 * var(--u));
  position: absolute;
  z-index: 14;
  top: calc(557.8 * var(--u));
  left: calc(68 * var(--u));
  width: calc(239 * var(--u));
  height: calc(55 * var(--u));
  visibility: hidden;
  padding: 0;
  background: var(--color-navy);
  color: var(--color-white-warm);
  font-family: var(--font-display);
  font-size: calc(22 * var(--u));
  line-height: 1;
  font-weight: 600;
  pointer-events: none;
}

.hero__stage[data-respondido="true"] .hero__options,
.hero__stage[data-respondido="true"] .hero__continue,
.hero__stage[data-respondido="true"] .hero__question-ui > .hero__riddle-group {
  pointer-events: none;
}

.hero__stage[data-resultado="acierto"] .hero__result[data-resultado="acierto"][data-resultado-active="true"],
.hero__stage[data-resultado="error"] .hero__result[data-resultado="error"][data-resultado-active="true"],
.hero__stage[data-resultado="acierto"] .hero__result[data-resultado="acierto"][data-resultado-active="true"] + .hero__result-cta,
.hero__stage[data-resultado="error"] .hero__result[data-resultado="error"][data-resultado-active="true"] + .hero__result-cta {
  visibility: visible;
  pointer-events: auto;
}

.hero__skip {
  position: absolute;
  z-index: 30;
  top: calc(603.48 * var(--u));
  left: 50%;
  width: auto;
  white-space: nowrap;
  height: calc(35 * var(--u));
  color: var(--color-brown-dark);
  font-family: var(--font-display);
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: calc(35 * var(--u));
  text-align: center;
  text-decoration-line: underline;
  transform: translateX(-50%) scale(0);
  transform-origin: center;
  transition: transform 220ms ease-out;
  visibility: hidden;
  pointer-events: none;
}

.hero__stage[data-estado="intro"] .hero__skip:not([data-panel-active="true"]) {
  top: calc(603.48 * var(--u));
  transform: translateX(-50%) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.hero__stage[data-estado="pregunta"] .hero__skip[data-quiz-active="true"] {
  top: calc(620 * var(--u));
  transform: translateX(-50%) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.acertijo-panel {
  position: fixed;
  z-index: 25;
  top: 0;
  left: calc(10.1 * var(--u));
  width: calc(354.8 * var(--u));
  height: calc(646.51 * var(--u));
  overflow: hidden;
  background: var(--color-sand);
  /* Recorre top + alto (0 + 646.51) para que al salir su borde inferior
     llegue al viewport. En reposo (--panel-progress 0.5) el centro queda
     en 50svh + top / 2: con top 0 queda centrado en cualquier alto de
     pantalla. Si se vuelve a mover top, sumarlo aca. */
  transform: translateY(calc(100svh - var(--panel-progress) * (100svh + 646.51 * var(--u))));
  transform-origin: center;
}

@media (max-width: 899px) {
  /* Escala por el lado que limite, como el hero: en pantallas cortas el panel no puede pasar de 100svh. */
  .acertijo-panel {
    --u: min(calc(min(100vw, 480px) / 375), calc(100svh / 667));
    left: calc((100vw - 375 * var(--u)) / 2 + 10.1 * var(--u));
  }
}

.acertijo-panel-rail {
  height: 0px;
  pointer-events: none;
}

.acertijo-panel-rail--intro {
  height: var(--intro-rail-height, calc(var(--vh) * 1.5));
}

.acertijo-panel-rail--entrada {
  height: var(--panel-entry-rail-height, 0px);
}

.acertijo-panel-rail--salida {
  height: var(--panel-exit-rail-height, 0px);
}

.acertijo-panel-rail--anuncio {
  height: var(--anuncio-rail-height, 0px);
}

.acertijo-panel-rail--quiz {
  height: var(--quiz-rail-height, 0px);
}

.acertijo-panel-rail--resultado {
  height: var(--resultado-rail-height, 0px);
}

.acertijo-panel-rail--piramide {
  height: var(--piramide-rail-height, 0px);
}

.acertijo-panel[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

.acertijo-panel[data-progress-state="reposo"] {
  visibility: hidden;
  pointer-events: none;
}

.acertijo-panel__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.acertijo-panel__questions {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.acertijo-panel__skip {
  display: none;
  position: absolute;
  z-index: 2;
  top: calc(596.4 * var(--u));
  left: 50%;
  width: auto;
  height: calc(35 * var(--u));
  white-space: nowrap;
  transform: translateX(-50%);
  color: var(--color-brown-dark);
  font-family: var(--font-display);
  font-size: calc(22 * var(--u));
  font-weight: 500;
  line-height: calc(35 * var(--u));
  text-align: center;
  text-decoration-line: underline;
}

/* En mobile ocupa el lugar de SALTAR INTRO. Aparece con los 3 pergaminos
   abiertos (data-completo lo pone js/acertijo.js). */
.acertijo-panel__desliza {
  position: absolute;
  z-index: 2;
  top: calc(596.4 * var(--u));
  left: 50%;
  height: calc(35 * var(--u));
  margin: 0;
  transform: translateX(-50%);
  color: var(--color-brown-dark);
  font-family: var(--font-display);
  font-size: calc(16 * var(--u));
  font-weight: 500;
  line-height: calc(35 * var(--u));
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.acertijo-panel[data-completo="true"] .acertijo-panel__desliza {
  opacity: 1;
}

/* Los tres top salian como estilo inline desde js/acertijo.js y por eso ninguna
   media query podia moverlos. Viven aca. */
.acertijo-question {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.acertijo-question:nth-of-type(1) { top: calc(73.27 * var(--u)); }
.acertijo-question:nth-of-type(2) { top: calc(267.53 * var(--u)); }
.acertijo-question:nth-of-type(3) { top: calc(462.8 * var(--u)); }

.acertijo-question__title {
  position: absolute;
  top: calc(-31 * var(--u));
  left: calc(22 * var(--u));
  width: calc(288.51 * var(--u));
  height: calc(21 * var(--u));
  margin: 0;
  color: var(--color-brown-dark);
  font-family: var(--font-display);
  font-size: calc(26 * var(--u));
  font-weight: 800;
  line-height: 80%;
  text-transform: uppercase;
}

/* Ancho, clip cerrado y deslizamiento del rollo van atados: el clip
   deja ver solo el rollo cerrado (58.69 / 260 = 22.57%, inset 77.43%) y
   el rollo se desliza el ancho completo. Si cambia uno, cambian los tres. */
.acertijo-scroll {
  position: absolute;
  top: 0;
  left: calc(20.81 * var(--u));
  width: calc(260 * var(--u));
  height: calc(144.54 * var(--u));
  clip-path: inset(-6% 77.43% -6% -6%);
  transform: rotate(0deg);
  transition: clip-path 500ms ease-out, transform 500ms ease-out;
}

.acertijo-scroll.is-open {
  clip-path: inset(0 0 0 0);
  transform: rotate(-3.26deg);
}

.acertijo-scroll__open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Cerrado, el clip de .acertijo-scroll deja ver el borde izquierdo del
   pergamino abierto, y el rollo cerrado no lo tapa entero: asoma una
   franja de papel a la derecha. Aparece al abrirse, mientras el clip se
   expande. */
.acertijo-scroll:not(.is-open) .acertijo-scroll__open {
  visibility: hidden;
}

/* Caja = papel libre entre los rollos (14-86% alto, 18-78% ancho, sin
   pisar el glifo derecho). 15/17 entra en 6 lineas: la pista mas larga
   (93 caracteres) usa 4-5. Si se alarga un texto, revisar. */
.acertijo-scroll__answer {
  position: absolute;
  top: 14%;
  left: 18%;
  width: 60%;
  height: 72%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  color: #000000; /* Negro puro del diseño; revisar si se unifica más adelante. */
  font-family: var(--font-display);
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: calc(17 * var(--u));
  clip-path: inset(0 100% 0 0);
  transition: clip-path 500ms ease-out;
}

.acertijo-scroll.is-open .acertijo-scroll__answer {
  clip-path: inset(0 0 0 0);
}

.acertijo-scroll__closed {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: calc(58.69 * var(--u));
  height: calc(135.33 * var(--u));
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(0);
  transition: transform 500ms ease-out;
}

.acertijo-scroll__closed img {
  display: block;
  width: 100%;
  height: 100%;
}

.acertijo-scroll.is-open .acertijo-scroll__closed {
  transform: translateX(calc(260 * var(--u)));
}

/* Pulso de "tocame" en los papiros cerrados. Va en la img y no en el
   botón porque el botón usa transform para el deslizamiento de apertura.
   Desfasado por papiro para que no laten al unísono. Crece desde el borde derecho porque
   ese borde es el del clip de .acertijo-scroll en mobile. */
.acertijo-scroll__closed img {
  transform-origin: right center;
  animation: papiro-pulso 1.6s ease-in-out infinite;
}

.acertijo-question:nth-child(2) .acertijo-scroll__closed img { animation-delay: 0.2s; }
.acertijo-question:nth-child(3) .acertijo-scroll__closed img { animation-delay: 0.4s; }

.acertijo-scroll.is-open .acertijo-scroll__closed img {
  animation: none;
}

@keyframes papiro-pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Ancla lógica y capa fija del pasillo para el salto a ofertas. */
/* CSS lee data-puerta-revelada para disparar el fundido de entrada de .ofertas__stage. */
.pase-puerta {
  position: fixed;
  z-index: 35;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--puerta-cruce-p, 0) * (1 - var(--pasillo-salida-p, 0)));
}
/* Solo escritorio: en movil este tramo lo resuelve .pase-puerta. */
.pase-interior { display: none; }
.pase-puerta::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 480px;
  --pasillo-zoom-cruce: 0.08; /* empujón mientras entra con el cruce */
  --pasillo-zoom: 0.35; /* avance a lo largo del riel de .interior */
  transform: translateX(-50%) scale(calc(1 + var(--pasillo-zoom-cruce) * var(--puerta-cruce-p, 0) + var(--pasillo-zoom) * var(--interior-zoom-p, 0)));
  transform-origin: 50% 46%; /* centro del muro de jeroglíficos */
  background-color: var(--color-dark-bg);
  background-image: url("../img/interior.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(calc(var(--puerta-desenfoque) * (1 - var(--puerta-cruce-p, 0))));
}

@media (min-width: 481px) and (max-width: 899px) {
  .pase-puerta::before {
    max-width: none;
  }
}

@media (max-width: 899px) {
  /* El pasillo no se apaga antes del salto: cruza directo con ofertas.
     Antes se apagaba al 95% del riel de .interior y dejaba ver el stage
     vacío (oscuro) + el fundido de ofertas sobre marrón. */
  .pase-puerta {
    opacity: var(--puerta-cruce-p, 0);
  }
  /* Ida: ofertas ya está pintada debajo; se va el pasillo encima. */
  body[data-puerta-revelada="true"] .pase-puerta {
    opacity: 0;
    animation: pasillo-se-va 600ms ease;
  }
  body[data-puerta-revelada="true"] .ofertas__stage {
    animation: none;
  }
  /* Vuelta (espejo): el pasillo reaparece sobre el interior. */
  body[data-pase-volviendo="true"] .pase-puerta {
    animation: ofertas-aparece 600ms ease;
  }
}

/* Los 600ms están apareados con FUNDIDO de js/pase-puerta.js. */
@keyframes pasillo-se-va {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (min-width: 900px) {
  .acertijo-panel-rail--intro {
    --intro-rail-height: calc(var(--vh) * 2.5); /* Recorrido de escritorio; ajustar a ojo. */
  }

  /* El centrado es de las capas que siguen en --u. Las capas en --ud
     (glifos, arena) traen coordenadas absolutas del frame 1440x900 y no
     se tocan. */
  /* Esta pantalla no lleva cenefa en escritorio: el frame 1440x903 ya entra
     entero en escena-desktop.svg. El selector lleva el stage adelante porque
     .escena__stage img (linea 63) es 0-1-1 y le ganaria a .puerta__cenefa. */
  .puerta__stage .puerta__cenefa {
    display: none;
  }

  /* Dos bandas de glifos del frame 1440x900, no el tile movil. */
  .puerta__glifos {
    /* El padre mide 1440; con width 100% el fondo se cortaba igual que una
       pieza de ancho fijo. Sangra hasta el borde del viewport. */
    left: min(0px, var(--vp-izq));
    top: min(0px, var(--vp-arriba));
    width: calc(max(calc(1440 * var(--ud)), var(--vp-der)) - min(0px, var(--vp-izq)));
    height: calc(max(calc(900 * var(--ud)), var(--vp-abajo))
                 - min(0px, var(--vp-arriba)));
    /* Puerta, arena y calderas van en 0; la cenefa (2) y las llamas (4) quedan encima. */
    z-index: 0;
    opacity: 0.3;
    background-image:
      url("../img/puerta/pared-glifos-desktop.webp"),
      url("../img/puerta/pared-glifos-desktop.webp");
    /* Es un patron de pared: tilea en ambos ejes en vez de estirarse. */
    background-repeat: repeat, repeat;
    background-size:
      calc(1439.67 * var(--ud)) calc(378.26 * var(--ud)),
      calc(1439.67 * var(--ud)) calc(378.26 * var(--ud));
    background-position:
      calc(0.33 * var(--ud)) calc(16.27 * var(--ud) - min(0px, var(--vp-arriba))),
      calc(0.33 * var(--ud)) calc(406.74 * var(--ud) - min(0px, var(--vp-arriba)));
    transform: none;
  }

  /* En escritorio la puerta, la pared y la arena vienen en un solo SVG
     del frame 1440x900, en X 0 Y 144 y 1440x903 de tamano: se pasa por abajo y lo
     recorta el stage. Los pebeteros ya NO vienen horneados aca: son dos capas
     propias, medidas en Figma. Las capas sueltas en --u se apagan. */
  .puerta__escena::after {
    content: "";
    position: absolute;
    /* La caja sangra hasta el viewport, pero el SVG NO se estira: se queda en
       sus 1440 centrado. Lo que sangra es una banda plana del color del piso
       (var(--color-asset-warm), muestreado del propio asset) detras de el, que continua el
       suelo hasta los bordes. La pared de arriba ya llega sola: la pintan los
       glifos tileados y --lienzo-fondo. */
    left: min(0px, var(--vp-izq));
    top: calc(144 * var(--ud));
    width: calc(max(calc(1440 * var(--ud)), var(--vp-der)) - min(0px, var(--vp-izq)));
    height: calc(903 * var(--ud));
    background:
      url("../img/puerta/escena-desktop.svg") no-repeat center top / calc(1440 * var(--ud)) 100%,
      linear-gradient(to bottom, transparent 67.66%, var(--color-asset-warm) 67.66%);
    z-index: 0;
  }

  /* El origen del zoom es el centro del vano. El de la regla base esta en --u
     con las coordenadas de movil y en escritorio cae sobre la antorcha
     izquierda. Medido sobre escena-desktop.svg: el vano es X 627 Y 168
     191x439 dentro de la capa, centro (722, 387), y la capa arranca en Y 144.
     ponytail: medido del asset, no de Figma. Si el zoom queda corrido, estos
     son los dos numeros. */
  .puerta__escena {
    transform-origin: calc(722 * var(--ud)) calc(531 * var(--ud));
  }

  /* En escritorio el lienzo detras del stage lo pinta --lienzo-fondo, no
     --escena-background. Sin esto estas cuatro secciones quedan con el
     arenoso por defecto asomando alrededor del stage. */
  .puerta {
    --lienzo-fondo: var(--color-wall);
  }

  .interior {
    --lienzo-fondo: var(--color-dark-bg);
  }

  .ofertas {
    --lienzo-fondo: var(--color-brown-dark);
  }

  .vales {
    --lienzo-fondo: var(--color-brown-dark);
  }

  /* La cortina es fixed a pantalla completa; igualar las cajas evita un marco
     durante el fundido. */
  .interior .escena__stage {
    width: 100vw;
    height: 100svh;
    aspect-ratio: auto;
    background: var(--color-dark-bg);
    overflow: hidden;
  }

  /* El espejo de ofertas-aparece (linea 275): lo que entra al volver es el
     stage de .interior, con el mismo fundido y la misma duracion. Sin
     fill-mode, igual que el de ida, para que al terminar la opacidad vuelva a
     mandarla el scroll. */
  body[data-pase-volviendo="true"] .interior .escena__stage {
    animation: ofertas-aparece 600ms ease;
  }

  .interior .escena__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/puerta/entrada-desktop.webp") no-repeat center / cover;
    transform: scale(calc(1 + var(--entrada-zoom-cruce) + var(--entrada-zoom)));
  }

  /* Compartidas: la cortina y el fondo del stage de .interior tienen que
     llegar a la misma escala, o el relevo entre una y otra pega un salto de
     tamano aunque la opacidad cruce bien. */
  body {
    --entrada-zoom-cruce: 0.12;
    --entrada-zoom: 0.6;
  }

  /* .escena__stage img (linea 63) es 0-1-1 y le gana a .puerta__imagen,
     por eso el selector lleva el stage adelante. */
  .puerta__stage .puerta__imagen {
    display: none;
  }

  /* Los pebeteros son dos dibujos distintos, no espejados. Cada uno es la capa
     estatica; el fuego lo ponen los dos fotogramas de movil, que aca estrenan
     dibujos propios. Se reusa la maquinaria de la linea 143: ritmos distintos
     por lado y medio ciclo de desfase en el derecho.
     X Y W H medidos contra la capa de la puerta, que arranca en Y 144: por eso
     las Y llevan ese offset sumado. La X no, esa capa esta en X 0. */
  .puerta__stage .puerta__llama {
    z-index: 4;
    bottom: auto;
    transform: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .puerta__stage .puerta__llama--izq {
    left: calc(387.93 * var(--ud));
    top: calc(502.93 * var(--ud));
    width: calc(137.04 * var(--ud));
    height: calc(290.66 * var(--ud));
    background-image: url("../img/puerta/antorcha-izq.svg");
  }

  .puerta__stage .puerta__llama--der {
    left: calc(928.75 * var(--ud));
    top: calc(502.19 * var(--ud));
    width: calc(137.82 * var(--ud));
    height: calc(291.44 * var(--ud));
    background-image: url("../img/puerta/antorcha-der.svg");
  }

  /* El fuego vuelve al intercambio de dos fotogramas de movil (linea 147).
     llama-izq-desktop.svg y llama-der-desktop.svg no sirven como par: son dos
     dibujos distintos, con proporciones distintas, y alternarlos lee como
     salto. llama-1.svg y llama-2.svg si son la misma llama en dos poses, y
     son vectores, asi que escalan. El src del HTML ya apunta ahi: no hace
     falta ningun content: url().
     Anclados por abajo al borde del cuenco y centrados por CSS. Las alturas
     mantienen la proporcion del par de movil (55x77 y 55x85), por eso el
     ancho es el mismo en los dos fotogramas de cada lado. */
  .puerta__stage .puerta__llama-frame {
    display: block;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .puerta__stage .puerta__llama--izq .puerta__llama-frame {
    bottom: calc(288.09 * var(--ud));
  }

  /* Los dos cuencos estan a la misma altura (502.93 y 502.19), asi que las dos
     llamas llevan practicamente el mismo bottom. El 277.05 anterior salia del
     dibujo de la derecha que descartamos. */
  .puerta__stage .puerta__llama--der .puerta__llama-frame {
    bottom: calc(287.35 * var(--ud));
  }

  /* Una sola perilla por lado: el alto del fotograma A. El fotograma B y el
     ancho se derivan de la proporcion del par de movil (55x77 y 55x85), asi
     que los dos fotogramas quedan del mismo ancho y no cabecean.
       B = A * 85/77 = A * 1.1039
       ancho = A * 55/77 = A * 0.7143 */
  .puerta__stage .puerta__llama--izq { --llama-alto: 115; }
  .puerta__stage .puerta__llama--der { --llama-alto: 120; }

  .puerta__stage .puerta__llama-frame {
    width: calc(var(--llama-alto) * 0.7143 * var(--ud));
  }

  .puerta__stage .puerta__llama-frame--a {
    height: calc(var(--llama-alto) * var(--ud));
  }

  .puerta__stage .puerta__llama-frame--b {
    height: calc(var(--llama-alto) * 1.1039 * var(--ud));
  }

  .marco-papiro__cenefa--superior {
    /* Los 5px transparentes del asset escalan con su ancho de 2114px. */
    --marco-papiro-cenefa-ancho: calc(max(calc(1447.85 * var(--ud)), var(--vp-der-x))
                - min(calc(-68.31 * var(--ud)), var(--vp-izq-x)));
    top: calc(min(calc(-20.03 * var(--ud)), var(--vp-arriba))
              - var(--marco-papiro-cenefa-ancho) * 0.0023651845);
    /* Sangra hasta el borde del viewport sin perder su anclaje de diseno. */
    left: min(calc(-68.31 * var(--ud)), var(--vp-izq-x));
    width: var(--marco-papiro-cenefa-ancho);
  }

  .marco-papiro__cenefa--inferior {
    /* Anclada al borde inferior del frame, no al superior: con height auto el
       alto crece al sangrar y un top fijo hundia la banda. Los 33.90 son el
       desborde de diseno (839.15 + 94.75 - 900), que ahora queda constante. */
    top: auto;
    --marco-papiro-cenefa-ancho: calc(max(calc(1436.50 * var(--ud)), var(--vp-der-x))
                - min(calc(-4.50 * var(--ud)), var(--vp-izq-x)));
    bottom: calc(min(calc(-33.90 * var(--ud)), var(--vp-arriba))
                 - var(--marco-papiro-cenefa-ancho) * 0.0023651845);
    left: min(calc(-4.50 * var(--ud)), var(--vp-izq-x));
    width: var(--marco-papiro-cenefa-ancho);
  }

  .marco-papiro__columna {
    top: calc(-5.06 * var(--ud));
    width: calc(189.39 * var(--ud));
  }

  .marco-papiro__columna--izquierda {
    left: calc(-96.50 * var(--ud));
  }

  .marco-papiro__columna--derecha {
    /* Refleja el borde de la columna izquierda respecto del centro del frame. */
    left: calc(1347.11 * var(--ud));
  }

  .marco-papiro__glifo {
    content: url("../img/prueba-superada/glifos-fondo-desktop.svg");
    left: min(0px, var(--vp-izq));
    width: calc(max(calc(1440 * var(--ud)), var(--vp-der)) - min(0px, var(--vp-izq)));
    height: calc(332 * var(--ud));
  }

  .marco-papiro__glifo--uno {
    /* Sigue a la cenefa superior: 110 del frame por debajo de su anclaje. */
    top: calc(110 * var(--ud) + min(0px, var(--vp-arriba)));
    transform: scaleX(-1);
  }

  .marco-papiro__glifo--dos {
    /* A 47.84 del frame por debajo de la banda superior (110 + 332). */
    top: calc(489.84 * var(--ud) + min(0px, var(--vp-arriba)));
  }

  .escena__stage .marco-papiro__glifo--tres {
    display: none;
  }

  .prueba-superada__stage .prueba-superada__ofertiti {
    top: calc(204.05 * var(--ud));
    left: calc(238.75 * var(--ud));
    width: calc(402.30 * var(--ud));
  }

  .prueba-superada__stage .prueba-superada__globo {
    top: calc(138 * var(--ud));
    left: calc(619 * var(--ud));
    width: calc(575.22 * var(--ud));
    height: calc(249.64 * var(--ud));
  }

  .prueba-superada__stage .prueba-superada__globo p {
    top: 0;
    left: 50%;
    width: calc(509.37 * var(--ud));
    height: 100%;
    color: var(--color-brown-dark);
    font-family: var(--font-display);
    font-size: calc(32 * var(--ud));
    font-weight: 800;
    line-height: calc(36 * var(--ud));
    text-align: center;
    transform: translateX(-50%);
  }

  /* Usa el look base de .cta-layers (borde y sombra
     dorados) igual que EMPEZAR y COMPROBAR. El tamaño y la tipografia van
     explicitos aca en --ud: la regla base
     del boton (:89) esta en --u. */
  .prueba-superada__stage .prueba-superada__cupones {
    top: calc(675 * var(--ud));
    left: calc(670.5 * var(--ud));
    width: calc(482 * var(--ud));
    height: calc(76 * var(--ud));
    font-size: calc(32 * var(--ud));
    line-height: calc(36 * var(--ud));
  }

  .cupones__heading {
    position: absolute;
    z-index: 1;
    top: calc(96 * var(--ud));
    left: 50%;
    display: flex;
    width: calc(780 * var(--ud));
    flex-direction: column;
    align-items: center;
    gap: calc(14 * var(--ud));
    transform: translateX(-50%);
  }

  .cupones__title,
  .cupones__subtitle {
    position: static;
    width: auto;
    margin: 0;
    color: var(--color-brown-dark);
  }

  .cupones__title {
    font-size: calc(72 * var(--ud));
    line-height: calc(76 * var(--ud));
  }

  .cupones__subtitle {
    font-size: calc(23 * var(--ud));
    line-height: calc(26 * var(--ud));
  }

  .cupones__stage .carrusel__viewport {
    top: 0;
    left: calc(92 * var(--ud));
    width: calc(1261 * var(--ud));
    height: 100%;
    overflow: hidden;
    clip-path: none;
  }

  .cupones__stage .carrusel__track {
    position: relative;
    width: max-content;
    gap: calc(2 * var(--ud));
    transform: translateX(calc((6.95 - 315 * var(--carrusel-index, 0)) * var(--ud)));
    transition: transform 300ms ease;
  }

  .cupones__slide {
    position: relative;
    flex: 0 0 calc(313 * var(--ud));
    width: calc(313 * var(--ud));
    height: calc(439 * var(--ud));
    top: calc(247 * var(--ud));
  }

  .cupones__slide .cupones__card {
    left: calc(7.65 * var(--ud));
    top: calc(71.61 * var(--ud));
    width: calc(297.70 * var(--ud));
    height: calc(387 * var(--ud));
  }

  .cupones__slide .cupones__discount {
    left: calc(-3.8 * var(--ud));
    top: calc(-10.45 * var(--ud));
    width: calc(169.1 * var(--ud));
    height: calc(143.97 * var(--ud));
  }

  .cupones__slide .cupones__hexagon {
    left: calc(6.56 * var(--ud));
    top: 0;
    width: calc(155.98 * var(--ud));
    height: calc(139.93 * var(--ud));
  }

  .cupones__slide .cupones__hexagon--shadow {
    left: calc((6.56 - var(--cupones-sombra-x)) * var(--ud));
    top: calc(var(--cupones-sombra-y) * var(--ud));
    width: calc(155.98 * var(--ud));
    height: calc(139.50 * var(--ud));
  }

  .cupones__slide .cupones__price {
    gap: calc(2 * var(--ud));
    padding-top: calc(10 * var(--ud));
    color: var(--color-navy);
    font-family: var(--font-display);
    font-size: calc(71.5 * var(--ud));
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 100%;
    text-transform: uppercase;
    transform: rotate(-6.98deg);
  }

  .cupones__slide .cupones__price-dto {
    color: var(--color-navy);
    font-family: var(--font-display);
    font-size: calc(21.5 * var(--ud));
    font-weight: 800;
    line-height: calc(28 * var(--ud));
  }

  .cupones__slide .cupones__price-euros {
    font-size: calc(71.5 * var(--ud));
    line-height: 100%;
    transform: translateY(calc(15 * var(--ud)));
  }

  .cupones__slide .cupones__price-resto {
    transform: translateY(calc(-7 * var(--ud)));
  }

  .cupones__slide .cupones__product {
    top: calc(95.46 * var(--ud));
    left: calc(50% - (137.69 * var(--ud)) / 2 + 4.49 * var(--ud));
    width: calc(137.69 * var(--ud));
    height: calc(137.69 * var(--ud));
  }

  .cupones__slide .cupones__product-title {
    top: calc(233.16 * var(--ud));
    left: calc(50% - (182.9 * var(--ud)) / 2 - 0.61 * var(--ud));
    width: calc(182.9 * var(--ud));
    height: auto;
    color: var(--color-brown-dark);
    font-family: var(--font-display);
    font-size: calc(19 * var(--ud));
    font-weight: 800;
    line-height: calc(21 * var(--ud));
    transform: matrix(1, 0, -0.03, 1, 0, 0);
  }

  .cupones__slide .cupones__detail {
    top: calc(305.59 * var(--ud));
    left: calc(50% - (228.4 * var(--ud)) / 2 + 0.31 * var(--ud));
    width: calc(228.4 * var(--ud));
    height: auto;
    color: var(--color-navy);
    font-family: var(--font-display);
    font-size: calc(19.22 * var(--ud));
    font-weight: 400;
    line-height: calc(25 * var(--ud));
  }

  .cupones__slide .cupones__barcode {
    left: calc(76.66 * var(--ud));
    top: calc(343 * var(--ud));
    width: calc(160.55 * var(--ud));
    height: calc(56.22 * var(--ud));
  }

  .cupones__slide .cupones__glyphs {
    left: calc(36.05 * var(--ud));
    top: calc(403.02 * var(--ud));
    width: calc(241.77 * var(--ud));
    height: calc(11.16 * var(--ud));
  }

  /* Look base de .cta-layers, igual que VER CUPONES.
     Tamano y tipografia explicitos en --ud porque la regla base (:258)
     esta en --u. */
  .cupones__want {
    top: calc(723 * var(--ud));
    left: 50%;
    transform: translateX(-50%);
    width: calc(482 * var(--ud));
    height: calc(76 * var(--ud));
    font-size: calc(32 * var(--ud));
    line-height: calc(36 * var(--ud));
  }

  .cupones__stage .carrusel__dots {
    display: none;
  }

  .cupones__stage .carrusel__arrow {
    --u: var(--ud);
    display: block;
    top: calc(485.705 * var(--ud));
  }

  .cupones__stage .carrusel__arrow--prev {
    left: calc(16 * var(--ud));
    right: auto;
  }

  .cupones__stage .carrusel__arrow--next {
    left: auto;
    right: calc(16 * var(--ud));
  }

  /* --anuncio-p solo lo escribe intro-scroll.js cuando el panel de papiros
     no esta en juego (tramo "anuncio"). Con el panel en juego no existe, y
     el fallback tiene que ser 0: con 1 la nube de la intro quedaba en
     escala 0 y nunca se veia. */
  .hero__stage {
    --p-anuncio-out: clamp(0, calc((var(--anuncio-p, 0) - 0.6) / 0.4), 1);
  }

  /* Camara del acercamiento. transform-origin es 0 0 (regla base, linea 570),
     asi que final = translate + escala * inicio.
     Primer tramo (--piramide-p): escala 2452.8 / 1209.90 = 2.02728, medido
     contra el frame 1440x900.
       tx: -573.09 - 2.02728 * 115.06 = -806.35
       ty:    54.4 - 2.02728 * 330.93 = -616.48
     Segundo tramo (--entrada-p): sigue entrando y tiene que dejar el centro
     de la puerta en el centro del viewport. Con origen 0 0 el translate NO es
     libre: queda determinado por la escala, por eso se deriva de
     --zoom-entrada en vez de ir a ojo.
       tx = (720 + 806.35) - (2.02728 + zoom) * --puerta-cx
       ty = (450 + 616.48) - (2.02728 + zoom) * --puerta-cy
     El centro de la puerta sale de .piramide-puerta en (688.50, 642.60) con
     850.70x699.10, contra-escalada por el scale(0.125) de su regla base:
     106.34 x 87.39, centro (741.67, 686.29). */
  .piramide-escena {
    --zoom-entrada: 0.9;   /* Calibrable: cuanto mas entra al abrirse. */
    --puerta-cx: 741.67;
    --puerta-cy: 686.29;
    transform:
      translate(
        calc((
          -806.35 * var(--piramide-p, 0)
          + (1526.35 - (2.02728 + var(--zoom-entrada)) * var(--puerta-cx)) * var(--entrada-p, 0)
        ) * var(--ud)),
        calc((
          -616.48 * var(--piramide-p, 0)
          + (1066.48 - (2.02728 + var(--zoom-entrada)) * var(--puerta-cy)) * var(--entrada-p, 0)
        ) * var(--ud))
      )
      scale(calc(1 + 1.02728 * var(--piramide-p, 0) + var(--zoom-entrada) * var(--entrada-p, 0)));
  }

  .hero__clouds {
    top: calc(133.99 * var(--ud));
    left: calc(667.83 * var(--ud));
    width: calc(359.65 * var(--ud));
  }

  .piramide-escena__nube-sol {
    display: none;
  }

  .piramide-escena__nube-alta {
    display: block;
    top: calc(73 * var(--ud));
    left: calc(525.54 * var(--ud));
    width: calc(359.65 * var(--ud));
  }

  .piramide-escena__nube-der {
    display: block;
    top: calc(268 * var(--ud));
    left: calc(1204.82 * var(--ud));
    width: calc(184.41 * var(--ud));
  }

  .piramide-escena__nube-izq {
    display: block;
    top: calc(364.72 * var(--ud));
    left: calc(154 * var(--ud));
    width: calc(184.41 * var(--ud));
  }

  .piramide-escena__piramide {
    top: calc(330.93 * var(--ud));
    left: calc(115.06 * var(--ud));
    width: calc(1209.90 * var(--ud));
  }

  .piramide-escena__arena {
    top: calc(639.65 * var(--ud));
    /* Sangra hasta el borde del viewport. El anclaje de diseno es asimetrico
       (-474 a 1474.56): ya desborda 474 por la izquierda y solo 34 por la
       derecha, que es el lado que quedaba corto. */
    left: min(calc(-474 * var(--ud)), var(--vp-izq));
    width: calc(max(calc(1474.56 * var(--ud)), var(--vp-der))
                - min(calc(-474 * var(--ud)), var(--vp-izq)));
    height: calc(495.66 * var(--ud));
    object-fit: fill;
    /* La arena no se desplaza sola en el segundo zoom: ya la mueve la camara
       de .piramide-escena con --entrada-p. Su translateY propio la separaba
       de la puerta y abria un hueco. transform: none y no borrar la linea,
       porque la regla base (:599) reaplicaria el mismo translateY con --u. */
    transform: none;
  }

  .piramide-puerta {
    top: calc(642.60 * var(--ud));
    left: calc(688.50 * var(--ud));
    width: calc(850.70 * var(--ud));
    height: calc(699.10 * var(--ud));
    perspective: calc(2136 * var(--ud));
  }

  .piramide-puerta__vano {
    transform: translateZ(calc(-674.40 * var(--ud))) scale(1.3158);
    /* El recorte deja de abrirse con --entrada-p. En movil se abre a +-200%
       para entrar a la sala, pero ahi la camara va a escala 5.84 y tapa la
       pantalla antes de que asomen los bordes de interior-claro.jpeg. Aca la
       camara es mucho mas suave y el recorte le gana. En escritorio el que
       cubre es .pase-puerta, asi que el vano solo tiene que seguir
       encuadrando la puerta. */
    clip-path: polygon(3.01% 9.08%, 94.75% 3.98%, 94.75% 94.25%, 3.01% 99.37%);
  }

  /* En escritorio las hojas quedan siempre cerradas: no se funden con --entrada-p
     (eso es solo de mobile). El pasillo entra encima y las tapa. */
  .piramide-puerta .piramide-puerta__hoja {
    opacity: 1;
  }

  .piramide-puerta .piramide-puerta__interior {
    top: calc(-332.60 * var(--ud));
    left: calc(25.60 * var(--ud));
    width: calc(780.50 * var(--ud));
    height: calc(1387.60 * var(--ud));
  }

  .hero__stage .hero__lockup {
    display: none;
  }

  .hero__stage .hero__lockup-word {
    display: block;
    z-index: 2;
    top: calc(167.55 * var(--ud));
    left: calc(36.95 * var(--ud));
    width: calc(443.15 * var(--ud));
    transform: translateY(calc(var(--salida-y) * var(--p-lockup)));
  }

  .hero__stage .hero__lockup-banner {
    display: block;
    z-index: 2;
    top: calc(337.8 * var(--ud));
    left: calc(101.42 * var(--ud));
    width: calc(322.4 * var(--ud));
    transform: translateY(calc(var(--salida-y) * var(--p-lockup))) rotate(-1.32deg);
    transform-origin: center;
  }

  .hero__cloud-two {
    top: calc(268 * var(--ud));
    left: calc(1204.82 * var(--ud));
    width: calc(184.41 * var(--ud));
  }

  .hero__prompt-group {
    top: calc(253.42 * var(--ud));
    left: calc(572.6 * var(--ud));
    width: calc(487.17 * var(--ud));
    height: calc(211.42 * var(--ud));
  }

  .hero__prompt {
    top: 27.94%;
    left: 5.72%;
    width: 88.55%;
    height: 43.51%;
    font-size: calc(32 * var(--ud));
    line-height: calc(34 * var(--ud));
  }

  .hero__prompt-corte { display: inline; }

  .hero__stage[data-estado] > .hero__riddle-group {
    top: calc(221.13 * var(--ud));
    left: calc(118.03 * var(--ud));
    width: calc(614.94 * var(--ud));
    height: calc(266.87 * var(--ud));
    transform: scale(calc(
      (0.7 * var(--p-event) + 0.3 * var(--p-event) * var(--p-event)
       + 0.08 * var(--p-event) * (1 - var(--p-event)))
      * (1 - var(--p-anuncio-out))
    ));
    transform-origin: center;
  }

  .hero__stage[data-estado] > .hero__riddle-group > .hero__riddle-balloon {
    width: 100%;
    height: auto;
  }

  .hero__stage[data-estado] > .hero__riddle-group .hero__riddle-balloon {
    transform: none;
  }

  .hero__stage[data-estado] > .hero__riddle-group > .hero__riddle {
    top: calc(50% - (36 * var(--ud)));
    left: 6.93%;
    width: 84.45%;
    height: calc(72 * var(--ud));
    color: var(--color-brown-dark);
    font-size: calc(32 * var(--ud));
    font-weight: 800;
    line-height: calc(36 * var(--ud));
    text-align: center;
  }

  .hero__ofertiti {
    top: calc(372.08 * var(--ud));
    left: calc(273.39 * var(--ud));
    width: calc(459.09 * var(--ud));
  }

  .hero__stage[data-estado="intro"] .hero__skip:not([data-panel-active="true"]) {
    top: calc(830 * var(--ud));
    left: 50%;
    width: calc(344 * var(--ud));
    height: calc(26 * var(--ud));
    color: var(--color-brown-dark);
    font-size: calc(24 * var(--ud));
    font-weight: 500;
    line-height: calc(26 * var(--ud));
    text-decoration-line: underline;
  }

  .hero__stage[data-estado="pregunta"] .hero__skip[data-quiz-active="true"] {
    top: calc(820 * var(--ud));
    left: 50%;
    width: calc(484 * var(--ud));
    height: calc(26 * var(--ud));
    color: var(--color-brown-dark);
    font-size: calc(24 * var(--ud));
    font-weight: 500;
    line-height: calc(26 * var(--ud));
    text-decoration-line: underline;
    text-align: center;
  }

  .hero__sphinx-group {
    /* Desktop: el grupo cubre el stage; las hijas van en coords de frame.
       El transform de acercamiento sigue calibrado para mobile. */
    top: 0;
    left: 0;
    width: var(--stage-w);
    height: var(--stage-h);
    /* La esfinge va de 719.68/402.32 (931.46 ancho) a 376/268 (1228.32).
       Escala 1.3187 uniforme. El grupo está en el origen, así que la
       traslación se calcula como destino - origen * escala, no como delta. */
    transform-origin: 0 0;
    transform:
      translate(calc(-573.04 * var(--p) * var(--ud)),
                calc(-262.54 * var(--p) * var(--ud)))
      scale(calc(1 + 0.3187 * var(--p)));
  }

  /* .hero__clouds es hija del stage, no del grupo: acá el delta sí aplica. */
  .hero__clouds {
    transform: translate(calc(-142.29 * var(--p) * var(--ud)),
                         calc(-60.99 * var(--p) * var(--ud)));
  }

  .hero__sphinx {
    inset: auto;
    z-index: 1;
    top: calc(402.32 * var(--ud));
    left: calc(719.68 * var(--ud));
    width: calc(931.46 * var(--ud));
  }

  .hero__sphinx-ground {
    z-index: 0;
    top: calc(683.99 * var(--ud));
    /* Sangra hasta el borde del viewport sin perder su anclaje de diseno:
       se estira solo del lado donde la ventana supera al escenario. */
    left: min(calc(-25.31 * var(--ud)), var(--vp-izq));
    width: calc(max(calc(1452.28 * var(--ud)), var(--vp-der))
                - min(calc(-25.31 * var(--ud)), var(--vp-izq)));
    transform-origin: 0 0;
    /* La arena es fondo y hace paralaje contra la esfinge: se desplaza
       -440.62 contra los -573.04 del grupo. Por eso vive fuera del grupo.
       transform-origin 0 0 es la esquina propia del elemento; la traslación
       es delta puro, no destino - origen * escala. */
    transform:
      translate(calc(-448.69 * var(--p) * var(--ud)),
                calc(-44.34 * var(--p) * var(--ud)))
      scale(calc(1 + 0.3188 * var(--p)));
  }

  /* La arena de la intro vive antes que .piramide-escena en el DOM y con
     z-index 0: donde la escena de la piramide no tiene nada opaco (el cielo
     lo pinta el lienzo), la arena de la intro se cuela contra el borde
     derecho. Queda opaca durante el crossfade de .piramide-escena (0-0.15 de
     --piramide-p, linea ~697) para irse junto con la esfinge, y se apaga
     recien cuando el fundido termina. Si cambia ese 0.15, cambiar este. */
  .hero__sphinx-ground {
    opacity: clamp(0, calc((0.15 - var(--piramide-p, 0)) * 1000), 1);
  }

  .hero__cloud-three {
    display: none;
  }
  /* Desktop tiene dos nubes; la tercera es de mobile. */

  .hero__stage[data-estado] .hero__question-ui > .hero__riddle-group {
    top: calc(99.21 * var(--ud));
    left: calc(152.03 * var(--ud));
    width: calc(487.17 * var(--ud));
    height: calc(211.42 * var(--ud));
    /* --quiz-p sobre 150svh: 0-.5 entra el globo (75svh); en .5 entran las
       opciones (ENTRADA_CONTROLES_DESKTOP) y conviven con el globo. El globo
       se va con las opciones al responder (--resultado-salida-p), igual que
       la regla base de mobile. */
    --p-globo-in: clamp(0, calc(var(--quiz-p) / 0.5), 1);
    transform: scale(calc(var(--p-globo-in) * clamp(0, calc((1 - var(--resultado-salida-p, 0)) / 0.3), 1)));
    transform-origin: center;
  }

  .hero__stage[data-estado] .hero__question-ui > .hero__riddle-group .hero__riddle {
    left: 6.93%;
    width: 84.45%;
    height: calc(138 * var(--ud));
    top: calc(50% - (69 * var(--ud)));
    font-size: calc(28 * var(--ud));
    line-height: calc(29.27 * var(--ud));
  }

  /* Misma caja que el globo de la pregunta: los dos ocupan el mismo lugar del
     frame y nunca se ven juntos. */
  .hero__stage[data-estado] .hero__result {
    top: calc(221.13 * var(--ud));
    left: calc(118.03 * var(--ud));
    width: calc(614.94 * var(--ud));
    height: calc(266.87 * var(--ud));
    gap: calc(10 * var(--ud));
  }

  .hero__stage[data-estado] .hero__result .hero__result-title {
    font-size: calc(32 * var(--ud));
    line-height: calc(34 * var(--ud));
    white-space: nowrap;
  }

  .hero__stage[data-estado] .hero__result .hero__result-copy {
    font-size: calc(22 * var(--ud));
    line-height: calc(26 * var(--ud));
  }

  .hero__stage[data-estado] .hero__riddle-balloon--answer {
    --cola: 1;
  }

  .hero__stage .hero__option {
    left: calc(128.77 * var(--ud));
    width: calc(547.23 * var(--ud));
    height: calc(82 * var(--ud));
    display: flex;
    align-items: center;
    justify-content: center;
    /* El nudge óptico de +3.29 del diseño: en un flex centrado, un padding-top
       de 2×3.29 corre el centro 3.29 hacia abajo. */
    padding-top: calc(6.58 * var(--ud));
    font-size: calc(32 * var(--ud));
    line-height: calc(36 * var(--ud));
  }

  /* La nube del quiz termina en 310.63 (99.21 + 211.42) y convive con las
     opciones: arrancan 26 debajo, paso de 96, y AGUA (82 de alto) termina
     en 707, 18 sobre COMPROBAR (725). */
  .hero__stage .hero__option:nth-child(1) { top: calc(337 * var(--ud)); }
  .hero__stage .hero__option:nth-child(2) { top: calc(433 * var(--ud)); }
  .hero__stage .hero__option:nth-child(3) { top: calc(529 * var(--ud)); }
  .hero__stage .hero__option:nth-child(4) { top: calc(625 * var(--ud)); }

  .hero__stage .hero__continue {
    top: calc(725 * var(--ud));
    left: calc(479 * var(--ud));
    width: calc(482 * var(--ud));
    height: calc(76 * var(--ud));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero__stage .hero__result-cta {
    top: calc(725 * var(--ud));
    left: calc(479 * var(--ud));
    width: calc(482 * var(--ud));
    height: calc(76 * var(--ud));
    font-size: calc(32 * var(--ud));
    line-height: calc(36 * var(--ud));
  }

  .hero__stage .hero__continue span {
    font-size: calc(32 * var(--ud));
    line-height: calc(36 * var(--ud));
    font-weight: 600;
    color: var(--color-white);
  }

  /* Misma caja y tipografia que COMPROBAR: centrado en el frame de 1440 y
     29 por encima de SALTAR INTRO (830). El transform de entrada
     (--p-start-event) viene de la regla base y escala desde el centro. */
  .hero__stage .hero__start {
    top: calc(725 * var(--ud));
    left: calc(479 * var(--ud));
    width: calc(482 * var(--ud));
    height: calc(76 * var(--ud));
    font-size: calc(32 * var(--ud));
    line-height: calc(36 * var(--ud));
  }

  /* ---- OFERTAS, escritorio. Coordenadas del frame 1440x900. ---- */

  /* Tres bandas de glifos, no el tile movil. */
  .ofertas__glifos {
    /* El padre mide 1440; con width 100% el fondo se cortaba igual que una
       pieza de ancho fijo. Sangra hasta el borde del viewport. */
    left: min(0px, var(--vp-izq));
    top: min(0px, var(--vp-arriba));
    width: calc(max(calc(1440 * var(--ud)), var(--vp-der)) - min(0px, var(--vp-izq)));
    height: calc(max(calc(900 * var(--ud)), var(--vp-abajo))
                 - min(0px, var(--vp-arriba)));
    opacity: 0.1;
    background-image:
      url("../img/puerta/pared-glifos-desktop.webp"),
      url("../img/puerta/pared-glifos-desktop.webp"),
      url("../img/puerta/pared-glifos-desktop.webp");
    /* Al sangrar, la banda tilea en horizontal en vez de estirarse: es un
       patron de pared y repetirlo no deforma los glifos. */
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size:
      calc(1439.67 * var(--ud)) calc(378.26 * var(--ud)),
      calc(1439.67 * var(--ud)) calc(378.26 * var(--ud)),
      calc(1439.67 * var(--ud)) calc(378.26 * var(--ud));
    background-position:
      calc(0.33 * var(--ud)) calc(16.27 * var(--ud) - min(0px, var(--vp-arriba))),
      calc(0.33 * var(--ud)) calc(406.74 * var(--ud) - min(0px, var(--vp-arriba))),
      calc(0.33 * var(--ud)) calc(790 * var(--ud) - min(0px, var(--vp-arriba)));
    transform: none;
  }

  /* Figma estira la cenefa: el ratio del archivo no es el del diseno,
     por eso el height va explicito. */
  /* El stage adelante: .escena__stage img (:63) es 0-1-1 y le ganaba al
     height, que quedaba en auto. Al sangrar a 1900 eso daba 125 en vez de
     los 91.45 del diseno. */
  .ofertas__stage .ofertas__cenefa {
    /* El asset tiene 5px transparentes en los cuatro bordes; arriba escalan
       como ancho/422.8 y quedan cubiertos por este sangrado vertical. */
    /* Sangra hasta el borde del viewport sin perder su anclaje de diseno.
       L = -60.58 y R = 1455.58 son los bordes de hoy resueltos con el 50%
       en 720, el centro del frame de 1440. */
    left: min(calc(-60.58 * var(--ud)), var(--vp-izq-x));
    top: min(calc(-10.61 * var(--ud)), var(--vp-arriba));
    width: calc(max(calc(1455.58 * var(--ud)), var(--vp-der-x))
                - min(calc(-60.58 * var(--ud)), var(--vp-izq-x)));
    /* Sin alto forzado: el asset es 2114x139 y al sangrar la caja a 1900 un
       alto fijo de 91.45 la achataba a 20.8:1 contra los 15.2:1 nativos.
       Con auto la cenefa conserva su proporcion. El 91.45 estaba calibrado
       para la caja de 1516 del diseno y dejo de valer al ensanchar. */
    height: auto;
  }

  .ofertas__cenefa--inferior {
    /* Sangra hasta el borde del viewport sin perder su anclaje de diseno.
       L = -60.58 y R = 1455.58 son los bordes de hoy resueltos con el 50%
       en 720, el centro del frame de 1440. */
    left: min(calc(-60.58 * var(--ud)), var(--vp-izq));
    top: calc(808 * var(--ud));
    width: calc(max(calc(1455.58 * var(--ud)), var(--vp-der))
                - min(calc(-60.58 * var(--ud)), var(--vp-izq)));
    height: calc(91.45 * var(--ud));
  }

  .ofertas__header {
    top: calc(131 * var(--ud));
    left: calc(50% - (780 * var(--ud)) / 2);
    width: calc(780 * var(--ud));
    height: calc(128 * var(--ud));
    gap: calc(14 * var(--ud));
    justify-content: flex-start;
  }

  /* En escritorio el titulo va en minusculas, a diferencia del movil. */
  .ofertas__header h3 {
    height: calc(76 * var(--ud));
    font-size: calc(72 * var(--ud));
    line-height: calc(76 * var(--ud));
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-white);
  }

  .ofertas__header p {
    width: calc(684.75 * var(--ud));
    height: calc(38 * var(--ud));
    font-size: calc(18 * var(--ud));
    line-height: 105%;
  }

  /* Ventana de 4 ofertas; el track mantiene el avance circular del carrusel. */
  .ofertas__stage .carrusel__viewport {
    top: 0;
    left: calc(46.5 * var(--ud));
    width: calc(1347 * var(--ud));
    height: 100%;
    overflow: hidden;
    clip-path: none;
    transform: none;
  }

  .ofertas__stage .carrusel__track {
    position: relative;
    width: max-content;
    gap: calc(45 * var(--ud));
    transform: translateX(calc((6 - 345 * var(--carrusel-index, 0)) * var(--ud)));
    transition: transform 300ms ease;
  }

  .ofertas__slide {
    position: relative;
    flex: 0 0 calc(300 * var(--ud));
    width: calc(300 * var(--ud));
    height: calc(485 * var(--ud));
    top: calc(313 * var(--ud));
  }

  /* Reemplaza platos por cardOferta en desktop */
  .ofertas__stage .ofertas__plato--exterior,
  .ofertas__stage .ofertas__plato--interior {
    display: none;
  }

  .ofertas__stage .ofertas__slide {
    background-image: url('../img/cardOferta.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  /* La repisa está incluida en cardOferta.svg; ocultarla en desktop */
  .ofertas__stage .ofertas__repisa {
    display: none;
  }

  .ofertas__stage .carrusel__dots {
    display: none;
  }

  .ofertas__stage .carrusel__arrow {
    --u: var(--ud);
    display: block;
    z-index: 2;
    top: calc(531.5 * var(--ud));
  }

  .ofertas__stage .carrusel__arrow--prev {
    left: calc(10 * var(--ud));
    right: auto;
  }

  .ofertas__stage .carrusel__arrow--next {
    left: auto;
    right: calc(10 * var(--ud));
  }

  /* Piezas internas de la tarjeta, en coordenadas de la card de 300x485
     (los % del volcado de Figma resueltos a px del diseno). */
  .ofertas__slide .ofertas__plato--exterior {
    left: calc(21.09 * var(--ud));
    top: calc(3.01 * var(--ud));
    width: calc(258.03 * var(--ud));
    height: calc(471.47 * var(--ud));
  }

  .ofertas__slide .ofertas__plato--interior {
    left: calc(31.98 * var(--ud));
    top: calc(12.17 * var(--ud));
    width: calc(237.99 * var(--ud));
    height: calc(454.84 * var(--ud));
  }

  .ofertas__slide .ofertas__producto {
    left: calc(37.35 * var(--ud));
    top: calc(225 * var(--ud));
    width: calc(227.37 * var(--ud));
    height: calc(149.4 * var(--ud));
  }

  .ofertas__texto {
    top: calc(37 * var(--ud));
    width: calc(227 * var(--ud));
    left: calc(37 * var(--ud));
    gap: calc(8 * var(--ud));
  }

  .ofertas__producto-titulo {
    font-size: calc(22 * var(--ud));
    line-height: calc(24 * var(--ud));
  }

  .ofertas__peso {
    font-size: calc(24 * var(--ud));
    line-height: calc(26 * var(--ud));
  }

  .ofertas__precio {
    --ofertas-precio-size: 48;
    --ofertas-precio-cc-size: 39;
    --ofertas-precio-unidad-size: 21;
    left: calc(132.6 * var(--ud));
    top: calc(347 * var(--ud));
    width: calc(136 * var(--ud));
    height: calc(90 * var(--ud));
  }

  .ofertas__stage .ofertas__precio > img {
    width: calc(136 * var(--ud));
    height: calc(90 * var(--ud));
  }

  .ofertas__stage .ofertas__price {
    gap: calc(2 * var(--ud));
    padding-top: 0;
  }

  .ofertas__stage .ofertas__price-entero {
    font-size: calc(63 * var(--ud));
    transform: translateY(calc(14.5 * var(--ud)));
  }

  .ofertas__stage .ofertas__price-resto {
    transform: translateY(calc(-4 * var(--ud)));
  }

  .ofertas__stage .ofertas__price-centavos {
    font-size: calc(39 * var(--ud));
  }

  .ofertas__stage .ofertas__price-unidad {
    font-size: calc(21 * var(--ud));
  }

  .ofertas__repisa {
    left: calc(1.44 * var(--ud));
    top: calc(456.09 * var(--ud));
    width: calc(297.33 * var(--ud));
    height: calc(22.78 * var(--ud));
  }

  .ofertas__repisa > img {
    width: calc(297.33 * var(--ud));
    height: calc(22.78 * var(--ud));
  }

  /* 11 estrias de 6.57 de ancho cada 7.71: el solape es -1.14. */
  .ofertas__repisa .ofertas__estrias img {
    width: calc(6.57 * var(--ud));
    height: calc(47.85 * var(--ud));
  }

  .ofertas__estria + .ofertas__estria {
    margin-left: calc(1.14 * var(--ud));
  }

  /* ---- VALES, escritorio. Coordenadas del frame 1440x900. ---- */

  /* Sin recorte: .vales__decorado solo contiene los glifos y la cenefa, y
     ahora las dos sangran a proposito hasta el borde del viewport. El
     overflow las cortaba en el borde del frame de 1440. */
  .vales__stage .vales__decorado { overflow: visible; }

  .vales__stage {
    --vales-cenefa-top: min(calc(-10.61 * var(--ud)), var(--vp-arriba));
    --vales-cenefa-ancho: calc(max(calc(1455.58 * var(--ud)), var(--vp-der-x)) - min(calc(-60.58 * var(--ud)), var(--vp-izq-x)));
    --vales-cenefa-base: calc(var(--vales-cenefa-top) + var(--vales-cenefa-ancho) * 139 / 2114);
  }

  .vales__glifos {
    /* El padre mide 1440; con width 100% el fondo se cortaba igual que una
       pieza de ancho fijo. Sangra hasta el borde del viewport. */
    left: min(0px, var(--vp-izq));
    top: min(0px, var(--vp-arriba));
    width: calc(max(calc(1440 * var(--ud)), var(--vp-der)) - min(0px, var(--vp-izq)));
    height: calc(max(calc(900 * var(--ud)), var(--vp-abajo))
                 - min(0px, var(--vp-arriba)));
    opacity: 0.1;
    background-image:
      url("../img/puerta/pared-glifos-desktop.webp"),
      url("../img/puerta/pared-glifos-desktop.webp"),
      url("../img/puerta/pared-glifos-desktop.webp");
    /* Al sangrar, la banda tilea en horizontal en vez de estirarse: es un
       patron de pared y repetirlo no deforma los glifos. */
    background-repeat: repeat-x, repeat-x, repeat-x;
    background-size:
      calc(1439.67 * var(--ud)) calc(378.26 * var(--ud)),
      calc(1439.67 * var(--ud)) calc(378.26 * var(--ud)),
      calc(1439.67 * var(--ud)) calc(378.26 * var(--ud));
    background-position:
      calc(0.33 * var(--ud)) calc(16.27 * var(--ud) - min(0px, var(--vp-arriba))),
      calc(0.33 * var(--ud)) calc(406.74 * var(--ud) - min(0px, var(--vp-arriba))),
      calc(0.33 * var(--ud)) calc(790 * var(--ud) - min(0px, var(--vp-arriba)));
    transform: none;
  }

  /* El stage adelante: .escena__stage img (:63) es 0-1-1 y le ganaba al
     height, que quedaba en auto. Al sangrar a 1900 eso daba 125 en vez de
     los 91.45 del diseno. */
  .vales__stage .vales__cenefa {
    z-index: 1;
    /* Sangra hasta el borde del viewport sin perder su anclaje de diseno.
       L = -60.58 y R = 1455.58 son los bordes de hoy resueltos con el 50%
       en 720, el centro del frame de 1440. */
    left: min(calc(-60.58 * var(--ud)), var(--vp-izq-x));
    top: var(--vales-cenefa-top);
    width: var(--vales-cenefa-ancho);
    /* Sin alto forzado: el asset es 2114x139 y al sangrar la caja a 1900 un
       alto fijo de 91.45 la achataba a 20.8:1 contra los 15.2:1 nativos.
       Con auto la cenefa conserva su proporcion. El 91.45 estaba calibrado
       para la caja de 1516 del diseno y dejo de valer al ensanchar. */
    height: auto;
  }

  .vales__stage .vales__columna {
    position: absolute;
    display: block;
    max-width: none;
    top: calc(var(--vales-cenefa-base) - 10 * var(--ud));
    width: calc(175.88 * var(--ud));
    height: calc(var(--vp-abajo) - var(--vales-cenefa-base) + 10 * var(--ud));
    object-fit: fill;
  }

  .vales__stage .vales__columna--izq {
    left: calc(50% - 720 * var(--ud) - 85.74 * var(--ud));
    transform: scaleX(-1);
  }
  .vales__stage .vales__columna--der {
    left: calc(50% - 720 * var(--ud) + 1349.86 * var(--ud));
    transform: scaleX(-1);
  }

  .vales__header {
    top: calc(131 * var(--ud));
    left: calc(50% - (1000 * var(--ud)) / 2);
    width: calc(1000 * var(--ud));
    height: auto;
    gap: calc(14 * var(--ud));
    justify-content: flex-start;
    transform: none;
  }

  .vales__header h3 {
    height: calc(76 * var(--ud));
    font-size: calc(72 * var(--ud));
    line-height: calc(76 * var(--ud));
  }

  .vales__header p {
    width: calc(1000 * var(--ud));
    height: auto;
    font-size: calc(18 * var(--ud));
    line-height: 105%;
  }

  .vales__stage .carrusel__viewport {
    top: 0;
    left: calc(50% - 720 * var(--ud) + 137 * var(--ud));
    width: calc(1148 * var(--ud));
    height: 100%;
    overflow: hidden;
    clip-path: none;
    transform: none;
  }

  .vales__stage .carrusel__track {
    position: relative;
    width: max-content;
    height: 100%;
    gap: calc(36.1 * var(--ud));
    transform: translateX(calc((22.04 - 289.6 * var(--carrusel-index, 0)) * var(--ud)));
    transition: transform 300ms ease;
  }

  .vales__slide {
    position: relative;
    flex: 0 0 calc(253.5 * var(--ud));
    top: calc(294.18 * var(--ud));
    width: calc(253.5 * var(--ud));
    height: calc(550.99 * var(--ud));
  }

  .vales__slide .vales__sarcofago {
    left: 0;
    top: 0;
    width: calc(253.5 * var(--ud));
    height: calc(550.99 * var(--ud));
  }

  .vales__dilo {
    top: calc(36.63 * var(--ud));
    left: calc(50% - (136.2 * var(--ud)) / 2 - 0.5 * var(--ud));
    width: calc(136.2 * var(--ud));
    height: calc(18.19 * var(--ud));
    font-size: calc(24 * var(--ud));
    line-height: calc(26 * var(--ud));
  }

  .vales__frase {
    top: calc(65.24 * var(--ud));
    left: calc(50% - (174.73 * var(--ud)) / 2 + 1.66 * var(--ud));
    width: calc(174.73 * var(--ud));
    height: calc(52 * var(--ud));
    font-size: calc(24 * var(--ud));
    line-height: calc(26 * var(--ud));
  }

  .vales__discount {
    left: calc(-16.45 * var(--ud));
    top: calc(128.57 * var(--ud));
    width: calc(169.1 * var(--ud));
    height: calc(143.97 * var(--ud));
    --vales-precio-size: 84.04;
    --vales-precio-cc-size: 41;
    --vales-precio-unidad-size: 25.19;
    --vales-precio-entero-y: 18;
    --vales-precio-cc-y: -7;
    --vales-precio-y: 10;
  }

  .vales__discount--prefijo {
    --vales-precio-size: 54;
    --vales-precio-cc-size: 35;
    --vales-precio-unidad-size: 20;
    --vales-precio-entero-y: 0;
    --vales-precio-cc-y: 0;
    --vales-precio-y: 0;
  }

  .vales__discount--combo {
    --vales-precio-size: 70;
    --vales-precio-cc-size: 37;
    --vales-precio-entero-y: 0;
    --vales-precio-cc-y: -11;
    --vales-precio-y: 0;
  }

  /* Las cajas respetan la relación de aspecto del SVG para que la sombra no
     dependa del centrado de preserveAspectRatio. */
  .vales__hexagono--cara {
    left: 0;
    top: 0;
    width: calc(169.1 * var(--ud));
    height: calc(139.93 * var(--ud));
  }

  .vales__hexagono--sombra {
    left: calc(4.53 * var(--ud));
    top: calc(1.52 * var(--ud));
    width: calc(152.73 * var(--ud));
    height: calc(143.94 * var(--ud));
  }

  .vales__price {
    padding-top: calc(var(--vales-precio-y) * var(--ud));
  }

  .vales__price-fila {
    gap: calc(var(--vales-precio-gap-x) * var(--ud));
  }

  .vales__discount--combo .vales__price-fila {
    align-items: baseline;
  }

  .vales__price-prefijo {
    margin-bottom: calc(-2 * var(--ud));
    font-size: calc(22 * var(--ud));
  }

  .vales__discount--prefijo .vales__price-prefijo {
    font-size: calc(26 * var(--ud));
  }

  .vales__price-euros {
    font-size: calc(var(--vales-precio-size) * var(--ud));
    transform: translateY(calc(var(--vales-precio-entero-y) * var(--ud)));
  }

  .vales__price-resto {
    transform: translateY(calc(var(--vales-precio-cc-y) * var(--ud)));
  }

  .vales__price-centavos {
    font-size: calc(var(--vales-precio-cc-size) * var(--ud));
  }

  .vales__price-dto {
    font-size: calc(var(--vales-precio-unidad-size) * var(--ud));
  }

  .vales__slide .vales__producto {
    left: calc(42.33 * var(--ud));
    top: calc(222.65 * var(--ud));
    width: calc(167.84 * var(--ud));
    height: calc(190 * var(--ud));
  }

  .vales__texto {
    top: calc(425 * var(--ud));
    left: calc(50% - (157.53 * var(--ud)) / 2 + 1.87 * var(--ud));
    width: calc(157.53 * var(--ud));
    gap: calc(8 * var(--ud));
  }

  .vales__titulo {
    font-size: calc(18 * var(--ud));
    line-height: calc(21 * var(--ud));
  }

  .vales__peso {
    font-size: calc(18 * var(--ud));
    line-height: calc(21 * var(--ud));
  }

  .vales__stage .carrusel__dots {
    display: none;
  }

  .vales__stage .carrusel__arrow {
    --u: var(--ud);
    display: block;
    z-index: 3;
    top: calc(543.4 * var(--ud));
  }

  .vales__stage .carrusel__arrow--prev {
    left: calc(50% - 720 * var(--ud) + 80 * var(--ud));
    right: auto;
  }

  .vales__stage .carrusel__arrow--next {
    left: calc(50% - 720 * var(--ud) + 1292 * var(--ud));
    right: auto;
  }

  /* ---- FORMULARIO, escritorio. Coordenadas del frame 1440x900. ---- */

  .formulario {
    --formulario-y0: calc((100svh - 900 * var(--ud)) / 2);
    --formulario-glifos-dy: 40;
  }

  .formulario__sticky {
    display: block;
    height: 100svh;
    gap: 0;
    padding: 0;
  }

  .formulario__cenefa {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: none;
    /* Compensa el margen transparente de 5px del asset de 2114px. */
    --formulario-cenefa-ancho: calc(max(calc(1455.58 * var(--ud)), var(--vp-der-x))
                - min(calc(-60.58 * var(--ud)), var(--vp-izq-x)));
    /* El padre ocupa el viewport: se resta --vp-izq para traducir la
       coordenada del escenario al sistema de coordenadas del padre. */
    left: calc(min(calc(-60.58 * var(--ud)), var(--vp-izq-x)) - var(--vp-izq));
    width: var(--formulario-cenefa-ancho);
    /* Sin alto forzado: el asset es 2114x139 y al sangrar la caja a 1900 un
       alto fijo de 91.45 la achataba a 20.8:1 contra los 15.2:1 nativos.
       Con auto la cenefa conserva su proporcion. El 91.45 estaba calibrado
       para la caja de 1516 del diseno y dejo de valer al ensanchar. */
    height: auto;
    top: calc(var(--formulario-y0) + min(calc(-10.61 * var(--ud)), var(--vp-arriba))
              - var(--formulario-cenefa-ancho) * 0.0023651845);
  }

  .formulario__banda {
    /* Padre a ancho completo (.formulario__sticky), igual que la cenefa: no
       van los tokens --vp-*, alcanza con no quedar mas angosta que el. */
    width: max(calc(1615.16 * var(--ud)), 100%);
    height: auto;
    left: min(calc(50% - (1615.16 * var(--ud)) / 2 + 60.93 * var(--ud)), 0px);
  }

  .formulario__banda--uno { top: calc((71 + var(--formulario-glifos-dy)) * var(--ud)); transform: scaleX(-1); }
  .formulario__banda--dos { top: calc((450.84 + var(--formulario-glifos-dy)) * var(--ud)); }
  .formulario__banda--tres,
  .formulario__banda--cuatro { display: none; }

  .formulario__header {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    height: auto;
    top: calc(var(--formulario-y0) + 140 * var(--ud));
    gap: calc(11.52 * var(--ud));
  }

  .formulario__header h2 {
    width: calc(1100 * var(--ud));
    height: auto;
    font-size: calc(56 * var(--ud));
    font-weight: 800;
    line-height: calc(60 * var(--ud));
  }

  .formulario__header p {
    width: calc(800 * var(--ud));
    height: auto;
    margin-left: calc(1.7 * var(--ud));
    font-size: calc(20 * var(--ud));
    line-height: calc(26 * var(--ud));
  }

  .formulario__header br:not(.formulario__salto) { display: none; }

  .formulario__form {
    position: absolute;
    z-index: 1;
    top: calc(var(--formulario-y0) + 330.96 * var(--ud));
    left: calc(50% - (640 * var(--ud)) / 2);
    width: calc(640 * var(--ud));
    height: calc(458 * var(--ud));
    gap: calc(32 * var(--ud));
  }

  .formulario__fields {
    width: calc(640 * var(--ud));
    height: calc(296 * var(--ud));
    gap: calc(20 * var(--ud));
  }

  .formulario__field {
    width: calc(640 * var(--ud));
    height: calc(59 * var(--ud));
    flex: 0 0 calc(59 * var(--ud));
    position: relative;
    background: url("../img/input.svg") no-repeat 0 0 / 100% 100%;
  }

  .formulario__field-bg { display: none; }

  .formulario__field::before {
    inset: 0;
    height: auto;
    -webkit-mask-image: url("../img/input.svg");
    mask-image: url("../img/input.svg");
  }

  .formulario__field:focus-within::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../img/input.svg") no-repeat 0 0 / 100% 100%;
    filter:
      drop-shadow(2px 0 0 var(--color-sand)) drop-shadow(-2px 0 0 var(--color-sand))
      drop-shadow(0 2px 0 var(--color-sand)) drop-shadow(0 -2px 0 var(--color-sand))
      drop-shadow(2px 0 0 var(--color-navy)) drop-shadow(-2px 0 0 var(--color-navy))
      drop-shadow(0 2px 0 var(--color-navy)) drop-shadow(0 -2px 0 var(--color-navy));
    pointer-events: none;
  }

  .formulario__field:has(.formulario__input[aria-invalid="true"])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../img/input.svg") no-repeat 0 0 / 100% 100%;
    filter:
      drop-shadow(2px 0 0 var(--color-error))
      drop-shadow(-2px 0 0 var(--color-error))
      drop-shadow(0 2px 0 var(--color-error))
      drop-shadow(0 -2px 0 var(--color-error));
    pointer-events: none;
  }

  .formulario__field:has(.formulario__input[aria-invalid="true"]) .formulario__input {
    z-index: 1;
  }

  .formulario__input {
    left: calc(68.35 * var(--ud));
    width: calc(503.3 * var(--ud));
    padding-inline: 0;
    font-size: calc(18 * var(--ud));
    line-height: calc(18.9 * var(--ud));
  }

  .formulario__terms {
    width: calc(640 * var(--ud));
    height: calc(22 * var(--ud));
  }

  .formulario__checkbox-label {
    min-height: calc(22 * var(--ud));
    gap: calc(11 * var(--ud));
    font-size: calc(18 * var(--ud));
    line-height: calc(22 * var(--ud));
  }

  .formulario__checkbox-control {
    width: calc(20 * var(--ud));
    height: calc(20 * var(--ud));
    flex: 0 0 calc(20 * var(--ud));
  }

  .formulario__checkbox {
    inset: calc(-12 * var(--ud));
    width: auto;
    height: auto;
  }

  .formulario__checkbox-visual {
    box-sizing: border-box;
    width: calc(20 * var(--ud));
    height: calc(20 * var(--ud));
    border: calc(2 * var(--ud)) solid var(--color-navy);
  }

  .formulario__checkbox[aria-invalid="true"] + .formulario__checkbox-visual {
    border-color: var(--color-error);
  }

  .formulario__checkbox-visual img { display: none; }

  .formulario__checkbox:checked + .formulario__checkbox-visual > span::after {
    top: calc(3 * var(--ud));
    left: calc(5 * var(--ud));
    width: calc(8 * var(--ud));
    height: calc(12 * var(--ud));
    border-right-width: calc(2 * var(--ud));
    border-bottom-width: calc(2 * var(--ud));
  }

  .formulario__terms-text {
    width: calc(519 * var(--ud));
    height: calc(22 * var(--ud));
  }

  .formulario__mensaje {
    margin: 0 0 calc(16 * var(--ud));
    font-size: calc(18 * var(--ud));
    line-height: calc(22 * var(--ud));
  }

  .formulario__checkbox:focus-visible + .formulario__checkbox-visual {
    outline-width: calc(2 * var(--ud));
    outline-offset: calc(2 * var(--ud));
  }

  .formulario .formulario__submit {
    position: relative;
    top: auto;
    left: auto;
    width: calc(482 * var(--ud));
    height: calc(76 * var(--ud));
    font-size: calc(32 * var(--ud));
    line-height: calc(36 * var(--ud));
  }

  .formulario .formulario__submit:focus-visible {
    outline-width: calc(2 * var(--ud));
    outline-offset: calc(3 * var(--ud));
  }

  /* ------------------------------------------------------------------
     Panel del acertijo. Coordenadas literales del frame 1440x900.
     La caja del panel llega hasta Y 856 y no hasta los 799.83 del papiro:
     SALTAR INTRO esta en Y 830, fuera del dibujo, y el overflow lo recorta.
     El papiro visible es .acertijo-panel__background, de 1318x726.
     ------------------------------------------------------------------ */
  .acertijo-panel {
    --panel-top: 45;
    top: calc(var(--panel-top) * var(--ud));
    /* .acertijo-panel es position: fixed (:1062), asi que su bloque
       contenedor es el viewport y no el escenario de 1440: los 52 del frame
       lo pegaban al borde de la ventana. Se resta --vp-izq para traducir la
       coordenada. Mismo recurso que .formulario__cenefa. */
    left: calc(52 * var(--ud) - var(--vp-izq));
    width: calc(1318 * var(--ud));
    height: calc(782.17 * var(--ud));
    /* El papiro (726) es mas bajo que el panel (782.17): la franja de abajo
       queda transparente para que SALTAR INTRO (756.17) se vea debajo del
       papiro y no dentro. El webp ya trae su relleno arena. */
    background: transparent;
    /* El recorrido es top + alto: el borde inferior tiene que llegar al viewport. */
    transform: translateY(calc(100svh - var(--panel-progress) * (100svh + (var(--panel-top) + 782.17) * var(--ud))));
  }

  /* El webp de escritorio lo elige el <picture> de base.html. Ya trae el
     relleno #F7D8AA y los frisos al 10%: ni color aparte ni tileado. */
  .acertijo-panel__background {
    inset: auto;
    top: 0;
    left: 0;
    width: calc(1318 * var(--ud));
    height: calc(726 * var(--ud));
    object-fit: fill;
  }

  /* Cada .acertijo-question se ancla en el top del pergamino cerrado. */
  .acertijo-question:nth-of-type(1) { top: calc(83.79 * var(--ud)); }
  .acertijo-question:nth-of-type(2) { top: calc(320.57 * var(--ud)); }
  .acertijo-question:nth-of-type(3) { top: calc(549.92 * var(--ud)); }

  /* Figma da -50.97, -46.72 y -49.94. Son empujones a mano de +-2px. */
  .acertijo-question__title {
    top: calc(-49 * var(--ud));
    left: calc(509.75 * var(--ud));
    width: calc(299 * var(--ud));
    height: calc(36 * var(--ud));
    font-size: calc(32 * var(--ud));
    line-height: calc(36 * var(--ud));
    text-align: center;
  }

  /* En escritorio el pergamino es otro dibujo: 628x144 con un rollo en cada
     punta, y se despliega del centro hacia afuera. Mismo mecanismo que el
     popup (ver .popup__paper-body). El de movil es 260 de ancho, un solo
     rollo, y se abre de izquierda a derecha. */
  .acertijo-scroll {
    left: calc(354 * var(--ud));
    width: calc(628 * var(--ud));
    height: calc(144 * var(--ud));
    overflow: hidden;
    clip-path: none;
    transform: none;
  }

  .acertijo-scroll__closed img { transform-origin: center; }

  /* El papel se despliega del centro hacia afuera. */
  .acertijo-scroll__open {
    clip-path: inset(0 50% 0 50%);
    transition: clip-path 500ms ease-out;
  }

  .acertijo-scroll.is-open .acertijo-scroll__open {
    clip-path: inset(0 0 0 0);
  }

  /* El rollo cerrado vive en el centro del abierto, no en su borde. Al abrir
     se apaga y lo reemplazan los dos rollos que el propio SVG ya dibuja en
     las puntas. Opacidad permitida: es cambio de estado de UI, no camara. */
  .acertijo-scroll__closed {
    top: calc(4.33 * var(--ud));
    left: calc(275.66 * var(--ud));
    width: calc(58.69 * var(--ud));
    height: calc(135.33 * var(--ud));
    transition: opacity 200ms ease-out;
  }

  .acertijo-scroll.is-open .acertijo-scroll__closed {
    transform: none;
    opacity: 0;
    pointer-events: none;
  }

  .acertijo-scroll__answer {
    top: calc(43.45 * var(--ud));
    left: 50%;
    width: calc(502.62 * var(--ud));
    height: calc(52 * var(--ud));
    margin-left: calc(-1 * var(--ud));
    transform: translateX(-50%);
    text-align: center;
    font-size: calc(24 * var(--ud));
    font-weight: 500;
    line-height: calc(26 * var(--ud));
    clip-path: inset(0 50% 0 50%);
  }

  /* Y 830 del frame - los 73.83 del panel. Queda 9px a la derecha del centro
     del papiro, por eso left explicito y no el translateX(-50%) del movil. */
  .acertijo-panel__skip {
    display: block;
    top: calc(756.17 * var(--ud));
    left: calc(496 * var(--ud));
    width: calc(344 * var(--ud));
    height: calc(26 * var(--ud));
    font-size: calc(24 * var(--ud));
    font-weight: 500;
    line-height: calc(26 * var(--ud));
    transform: none;
  }

  /* Entre el pie del pergamino 3 (549.92 + 4.33 + 135.33 = 689.58) y el borde
     del papiro (726). Misma caja horizontal que SALTAR INTRO. */
  .acertijo-panel__desliza {
    display: block;
    position: absolute;
    z-index: 2;
    top: calc(697 * var(--ud));
    left: calc(496 * var(--ud));
    width: calc(344 * var(--ud));
    height: calc(19 * var(--ud));
    margin: 0;
    color: var(--color-brown-dark);
    font-family: var(--font-display);
    font-size: calc(16 * var(--ud));
    font-weight: 500;
    line-height: calc(19 * var(--ud));
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 300ms ease-out;
    transform: none;
  }

  /* En escritorio el pasillo no lo dispara la seccion .puerta: entra con la
     apertura de la puerta de la piramide. --puerta-cruce-p cuelga del
     --puerta-p de body, que escribe js/puerta.js, y ese tramo aca no corre. */
  .pase-puerta {
    /* Calibrable: en que punto de la apertura empieza a entrar el pasillo. */
    --pasillo-entrada-inicio: 0.55;
    --pasillo-entrada-p: clamp(0, calc((var(--entrada-p, 0) - var(--pasillo-entrada-inicio)) / (1 - var(--pasillo-entrada-inicio))), 1);
    /* El pasillo se va cuando entra "Has pasado la prueba de la Esfinge", no
       cuando llega .interior: esa seccion esta mucho mas abajo en el DOM.
       --sala-salida-p es el progreso del riel de .prueba-superada y lo escribe
       js/escena-entrada.js:77 en el body.
       Calibrable: en que fraccion de ese riel termina de irse. */
    --pasillo-salida-tramo: 0.5;
    --pasillo-salida-p-desktop: clamp(0, calc(var(--sala-salida-p, 0) / var(--pasillo-salida-tramo)), 1);
    opacity: calc(var(--pasillo-entrada-p) * (1 - var(--pasillo-salida-p-desktop)));
  }

  /* Sale como entro: desenfocandose. Y sigue avanzando un poco mientras se va,
     para que lea como camara que atraviesa y no como capa que se apaga.
     Calibrable: cuanto avanza. */
  .pase-puerta::before {
    --pasillo-salida-avance: 0.15;
    max-width: none;
    background-image: url("../img/piramide/pasillo-desktop.webp");
    filter: blur(calc(var(--puerta-desenfoque) * (1 - var(--pasillo-entrada-p) + var(--pasillo-salida-p-desktop))));
    transform: translateX(-50%) scale(calc(1 + var(--pasillo-salida-avance) * var(--pasillo-salida-p-desktop)));
  }

  /* La entrada por la puerta de la piramide, en escritorio. Mismo mecanismo
     que .pase-puerta: capa fija que entra con --puerta-cruce-p mientras
     .puerta__escena se desenfoca con esa misma variable (linea 115), y se va
     con el final del riel de .interior, que es lo que dispara el popup.
     .pase-puerta aca esta tomada por el pasillo de la piramide, por eso esta
     va aparte. */
  .pase-interior {
    display: block;
    position: fixed;
    z-index: 35;
    inset: 0;
    pointer-events: none;
    /* Todo colgado del scroll: entra con --puerta-cruce-p y se va con
       --pasillo-salida-p, que sale del final del riel de .interior. Asi la
       vuelta es el mismo recorrido al reves, sin atributos ni transiciones de
       por medio. El fundido de salida cruza contra la misma imagen quieta que
       pinta el stage de .interior, por eso no deja hueco. */
    opacity: calc(var(--puerta-cruce-p, 0) * (1 - var(--pasillo-salida-p, 0)));
  }

  /* Entra desenfocandose y sigue avanzando un poco al irse, para que lea como
     camara que atraviesa y no como capa que se apaga.
     Calibrable: cuanto avanza. */
  .pase-interior::before {
    /* La camara atraviesa la imagen. Dos tramos: un empujon chico mientras
       entra con el cruce, para que nunca se la vea quieta, y el recorrido
       largo a lo ancho del riel de .interior, que termina justo cuando
       dispara el popup. --interior-p lo escribe js/escena-entrada.js:81 en el
       body. Los dos son calibrables. */
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-dark-bg) url("../img/puerta/entrada-desktop.webp") no-repeat center / cover;
    filter: blur(calc(var(--puerta-desenfoque) * (1 - var(--puerta-cruce-p, 0) + var(--pasillo-salida-p, 0))));
    transform: scale(calc(1 + var(--entrada-zoom-cruce) * var(--puerta-cruce-p, 0) + var(--entrada-zoom) * var(--interior-p, 0)));
  }

}

/* Rendimiento de scroll (ver docs/rendimiento-scroll.md).
   Sin capa propia, cada cambio de transform ligado al scroll obliga a Chrome
   a re-rasterizar el stage entero en cada frame.
   1) Traslaciones sin escala: capa permanente; mover una capa no re-rasteriza.
   2) Elementos que ESCALAN: capa solo mientras hay scroll (html[data-scrolling],
      lo pone js/scroll-activo.js). Con capa fija se rasterizan a escala 1 y el
      zoom los muestra borrosos; así en reposo vuelven a quedar nítidos. */
.hero__clouds,
.hero__stage .hero__lockup-word,
.hero__stage .hero__lockup-banner,
.hero__prompt-group,
.hero__ofertiti,
.hero__cloud-two,
.escena__stage,
.acertijo-panel,
.piramide-escena__arena {
  will-change: transform;
}

html[data-scrolling] .hero__sphinx-group,
html[data-scrolling] .hero__sphinx-ground,
html[data-scrolling] .hero__riddle-group,
html[data-scrolling] .hero__start,
html[data-scrolling] .piramide-escena,
html[data-scrolling] .puerta__escena,
html[data-scrolling] .pase-puerta::before {
  will-change: transform;
}

/* Relevo del interior de la pirámide: una vez que la cámara del hero
   terminó de entrar, esta capa fija toma la posta con el mismo encuadre
   exacto, así el hero puede irse scrolleando sin que se note el corte.
   Los números salen de la posición final de .piramide-puerta__interior:
   555.36 x 987.30 unidades con su esquina en (-90.20u, -88.67u). */
.sala-fondo {
  position: fixed;
  z-index: 9;
  /* Misma columna que el body, igual que .site-header: si no, en viewports de
     más de 480px la capa queda centrada distinto que el hero y se ve el salto. */
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 480px;
  transform: translateX(-50%);
  background-color: var(--color-dark-bg);
  background-image: url("../img/interior-claro.webp");
  background-repeat: no-repeat;
  background-size: var(--sala-w) var(--sala-h);
  /* Al crecer, mantiene fijo el punto que cae en el borde inferior del
     viewport; el ancho extra se reparte a ambos lados. */
  background-position:
    calc(-90.20 * var(--u) - (var(--sala-w) - 555.36 * var(--u)) / 2)
    calc(100svh - 0.76539 * var(--sala-h));
  visibility: hidden;
  pointer-events: none;
  /* Smoothstep sobre el riel de prueba-superada: arranca en 0.10 (el stage termina
     de entrar) y termina en 0.40, ~66svh. La curva t*t*(3-2t) suaviza los dos
     extremos; con rampa lineal el principio y el final se leen como corte. */
  --t: clamp(0, calc((0.40 - var(--sala-salida-p, 0)) / 0.30), 1);
  opacity: calc(var(--t) * var(--t) * (3 - 2 * var(--t)));
}

@media (max-width: 899px) {
  .sala-fondo, .piramide-puerta .piramide-puerta__interior {
    --sala-w: max(calc(555.36 * var(--u)), 73.4923svh, 100vw);
    --sala-h: max(calc(987.30 * var(--u)), 130.653svh, 177.778vw);
  }

  .piramide-puerta .piramide-puerta__interior {
    width: var(--sala-w);
    height: var(--sala-h);
    left: calc(18.22 * var(--u) - (var(--sala-w) - 555.36 * var(--u)) / 2);
    top: calc(-236.55 * var(--u) + 755.67 * var(--u) - 0.76539 * var(--sala-h));
  }
}

@media (min-width: 481px) and (max-width: 899px) {
  .sala-fondo {
    --u: min(calc(min(100vw, 480px) / 375), calc(100svh / 667));
    max-width: none;
    background-color: var(--color-brown-terracota);
    background-position:
      calc((100vw - 480px) / 2 - 90.20 * var(--u) - (var(--sala-w) - 555.36 * var(--u)) / 2)
      calc(100svh - 0.76539 * var(--sala-h));
  }
}

body[data-en-sala="true"] .sala-fondo { visibility: visible; }

@media (min-width: 900px) {
  .sala-fondo { display: none; }

  /* ---- FOOTER, escritorio. Coordenadas del frame 1440x559. ---- */

  .footer {
    position: relative;
    display: block;
    width: 100%;
    height: calc(559 * var(--ud));
    min-height: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }

  .footer__cenefa { display: none; }

  .footer::before,
  .footer::after {
    position: absolute;
    z-index: 1;
    content: "";
    left: 0;
    /* .footer ya ocupa el ancho del viewport (width: 100% en :2998), asi que
       no van los tokens --vp-*: alcanza con no quedar mas angosto que el. */
    width: max(calc(1440 * var(--ud)), 100%);
    height: calc(51 * var(--ud));
    /* El SVG no trae preserveAspectRatio: con size 100% 100% se centraba a
       1440 y dejaba los bordes vacios. Tilea a proporcion nativa. */
    background: url("../img/section.svg") repeat-x left top / auto 100%;
  }

  .footer::before { top: calc(1 * var(--ud)); }
  .footer::after { top: calc(508 * var(--ud)); }

  .footer__columna {
    content: url("../img/columna-footer.webp");
    width: calc(81 * var(--ud));
    top: 0;
    height: calc(559 * var(--ud));
    object-fit: fill;
    z-index: 2;
  }

  /* Las columnas son el marco lateral del footer, que ahora sangra hasta el
     viewport: se anclan a su borde y no al del frame de 1440, donde quedaban
     230px adentro. Los min/max conservan la posicion de diseno cuando la
     ventana es mas angosta que el frame. */
  .footer__columna--izquierda {
    left: min(calc(50% - 720 * var(--ud)), 0px);
    right: auto;
  }
  .footer__columna--derecha {
    left: max(calc(50% + 639 * var(--ud)), calc(100% - 81 * var(--ud)));
    right: auto;
    transform: scaleX(-1);
  }

  .footer__title {
    position: absolute;
    z-index: 1;
    width: calc(791.33 * var(--ud));
    height: calc(120 * var(--ud));
    left: calc(50% - (791.33 * var(--ud)) / 2);
    top: calc(82 * var(--ud));
    font-size: calc(56 * var(--ud));
    font-weight: 800;
    line-height: calc(60 * var(--ud));
  }

  .footer__logo {
    position: absolute;
    z-index: 1;
    width: calc(326 * var(--ud));
    height: calc(160 * var(--ud));
    left: calc(50% - (973.88 * var(--ud)) / 2);
    top: calc(244 * var(--ud));
  }

  .footer__social {
    position: absolute;
    z-index: 1;
    width: calc(454.64 * var(--ud));
    height: calc(91.86 * var(--ud));
    left: calc(50% - (973.88 * var(--ud)) / 2 + 519.24 * var(--ud));
    top: calc(279.85 * var(--ud));
    padding: 0 calc(40.48 * var(--ud));
    gap: calc(13.5 * var(--ud));
    justify-content: space-between;
  }

  .footer__social li {
    width: calc(41.49 * var(--ud));
    height: calc(41.49 * var(--ud));
  }

  .footer__social a { padding: calc(3 * var(--ud)); }

  .footer__social a:focus-visible {
    outline-width: calc(2 * var(--ud));
    outline-offset: calc(2 * var(--ud));
  }

  .footer__legal {
    position: absolute;
    z-index: 1;
    width: calc(968 * var(--ud)); /* 4 x 197 + 3 x 60 */
    height: calc(41 * var(--ud));
    left: calc(50% - (968 * var(--ud)) / 2);
    top: calc(441.44 * var(--ud));
    flex-direction: row;
    gap: calc(60 * var(--ud));
  }

  .footer__legal a {
    width: calc(197 * var(--ud));
    height: calc(41 * var(--ud));
    font-size: calc(20 * var(--ud));
    font-weight: 400;
    line-height: calc(26 * var(--ud));
  }

  .footer__legal a:focus-visible {
    outline-width: calc(2 * var(--ud));
    outline-offset: calc(2 * var(--ud));
  }

  /* Todo el papiro del popup esta en calc(N * var(--u)): el cuerpo, los dos
     rollos, los dos lazos y los translateX del desenrollado. Redefinir --u
     dentro de .popup escala las cinco piezas y su animacion de una sola vez,
     en vez de reescribir veinte reglas. El factor son los 357.61 de ancho del
     papel movil contra los 736.4 de la caja de escritorio.
     OJO: --u aca NO es la unidad movil. Es local a este subarbol. */
  .popup {
    --u: calc(2.0592 * var(--ud));
  }

  .popup__paper {
    width: calc(736.4 * var(--ud));
    height: calc(689.98 * var(--ud));
  }

  /* Estas cuatro si tienen diseno propio en escritorio: coordenadas contra la
     caja de 736.4x689.98, no escaladas del movil. En movil el titulo y el copy
     estaban calibrados a ojo (ver comentario de la linea 206); aca van medidos. */
  /* X Y W H medidos contra la caja del popup de 736.4x689.98. Se verifican
     solos: las distancias a los bordes mas el ancho dan 736.4, y mas el alto
     dan 689.98. Los porcentajes del dump iban contra otro padre y daban el
     boton 126px mas abajo.
     El alto va auto: Figma lo reporta para el texto que tenga en ese momento
     y nosotros no sabemos en cuantas lineas va a caer. */
  .popup__title {
    top: calc(160 * var(--ud));
    left: calc(188.24 * var(--ud));
    width: calc(363.96 * var(--ud));
    height: auto;
    font-size: calc(36 * var(--ud));
    line-height: calc(38 * var(--ud));
  }

  /* Ninguno de estos tres top es el medido en Figma. El titulo a 36/38 cae en
     tres lineas en vez de dos y arrastra a todo el bloque. Los medidos eran
     217.03 el titulo, 295.46 el copy y 403.38 el boton, y valen si el titulo
     vuelve a 28/30. El copy tambien sube de 20/26 a 22/28, con lo que pasa de
     tres lineas a cuatro. */
  .popup__copy {
    top: calc(300 * var(--ud));
    left: calc(187.3 * var(--ud));
    width: calc(365.84 * var(--ud));
    height: auto;
    font-size: calc(26 * var(--ud));
    line-height: calc(30 * var(--ud));
  }

  /* Look base de .cta-layers, igual que VER CUPONES
     y LOS QUIERO. Aca van posicion, tamano y tipografia. */
  .popup__instagram {
    top: calc(450 * var(--ud));
    left: calc(133.47 * var(--ud));
    width: calc(482 * var(--ud));
    height: calc(76 * var(--ud));
    font-size: calc(32 * var(--ud));
    line-height: calc(36 * var(--ud));
  }

  /* En escritorio la cruz es otro dibujo: un rombo naranja con el aspa
     adentro, no el aspa pelada de movil. */
  .popup__close {
    top: calc(96.46 * var(--ud));
    left: calc(582.86 * var(--ud));
    width: calc(43 * var(--ud));
    height: calc(43 * var(--ud));
  }

  .popup__close img {
    content: url("../img/popup/cross.svg");
    left: 0;
    top: 0;
    width: calc(43 * var(--ud));
    height: calc(43 * var(--ud));
  }

}

/* Provisional: todavía no hay diseño de Figma para los estados del formulario. */
.formulario__mensaje {
  margin: calc(-16 * var(--u)) 0 0;
  color: var(--color-error);
  font-size: calc(16 * var(--u));
  line-height: calc(19 * var(--u));
}

.formulario__mensaje:empty {
  display: none;
}

/* Éxito y "ya registrado" son información, no error: marrón del texto (10:1 sobre arena). */
.formulario__mensaje[data-estado="info"] { color: var(--color-brown-dark); }

.formulario__input[aria-invalid="true"] {
  color: var(--color-error-on-dark);
  caret-color: var(--color-error-on-dark);
}
.formulario__input:-webkit-autofill[aria-invalid="true"] {
  -webkit-text-fill-color: var(--color-error-on-dark);
  caret-color: var(--color-error-on-dark);
}

.formulario__input[aria-invalid="true"]::placeholder {
  color: var(--color-error-on-dark);
}

.formulario__field:has(.formulario__input[aria-invalid="true"]) .formulario__field-bg {
  filter:
    drop-shadow(2px 0 0 var(--color-error))
    drop-shadow(-2px 0 0 var(--color-error))
    drop-shadow(0 2px 0 var(--color-error))
    drop-shadow(0 -2px 0 var(--color-error));
}

/* Destino programático del salto; no es interactivo. */
.formulario:focus { outline: none; }

/* Anillo de foco de marca para los controles sin estilo propio. Dos tonos: el halo
   crema (box-shadow, dentro del offset) lo separa de fondos oscuros y el navy de los
   claros. :where() = especificidad 0: cualquier regla de foco existente gana. */
:where(.hero__option, .carrusel__arrow, .carrusel__dots button, .hero__skip,
       .acertijo-panel__skip, .acertijo-scroll__closed, .site-header__logo,
       .formulario__terms-text a):focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-white-warm);
}
/* Las flechas dibujan un círculo con ::before; el anillo lo sigue. */
:where(.carrusel__arrow):focus-visible { border-radius: 50%; }

/* Cursor de marca en escritorio. El hotspot (24 14) es el centro de la pupila
   en el PNG de 1x; si el clic se siente corrido, son esos dos números.
   Los links y botones conservan la manito del navegador. */
@media (min-width: 900px) {
  html {
    cursor: url("../img/puntero/ojo.png") 24 14, auto;
    cursor: image-set(url("../img/puntero/ojo.png") 1x, url("../img/puntero/ojo@2x.png") 2x) 24 14, auto;
  }
}