/* Retiro Cosmogénesis · plantilla Figma «sanctuary-retreat» (k3ezgB2hBfP6GZV4l6x1Wb) en vanilla.
   Medidas en px de la plantilla (lienzo 1440 × 810) multiplicadas por --px, así el diseño
   escala como en Figma. Posiciones sacadas de get_metadata; colores y vidrio de las pantallas exportadas. */

@font-face { font-family: 'Marko'; src: url('../fonts/Marko.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Marko'; src: url('../fonts/Marko-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Noken'; src: url('../fonts/Noken.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --px: min(calc(100vw / 1440), calc(100vh / 810));      /* 1 px de la plantilla */
  --blanco: #fff;
  --texto-suave: #e7e2e0;
  --amarillo: #facf78;
  --tinta: #1e1711;
  --tinta-suave: rgba(30, 23, 17, .68);
  --papel: #fff;
  --linea-clara: rgba(30, 23, 17, .12);
  --vidrio: rgba(255, 255, 255, .06);
  --vidrio-nav: rgba(255, 255, 255, .04);
  --vidrio-activo: rgba(255, 255, 255, .2);
  --vidrio-boton: rgba(255, 255, 255, .08);
  --desenfoque: blur(40px);                               /* variable Bgblur-40 de Figma */
  --f-display: 'Marko', 'Times New Roman', serif;
  --f-texto: 'Nanum Gothic', system-ui, sans-serif;
  --f-cifra: 'Noken', 'Nanum Gothic', sans-serif;      /* Noken Extended Regular: cifras de la tarjeta */
  --suave-firma: cubic-bezier(.76, 0, .24, 1);          /* relevo de la línea de tiempo */
  --juegos: "ss01" 1, "ss02" 1, "ss03" 1, "ss05" 1;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);                 /* entradas de la plantilla */
  --resorte: linear(0, 0.0216, 0.0747, 0.1458, 0.2255, 0.3076, 0.3879, 0.4638, 0.5339, 0.5974, 0.6542, 0.7044, 0.7484, 0.7866, 0.8196, 0.8479, 0.8722, 0.8928, 0.9103, 0.9251, 0.9375, 0.948, 0.9568, 0.9642, 0.9703, 0.9754, 0.9797, 0.9832, 0.9862, 0.9886, 0.9906, 0.9923, 0.9936, 0.9948, 0.9957, 0.9965, 0.9971, 0.9976, 0.9981, 0.9984, 0.9987, 0.9989, 0.9991, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 0.9997, 0.9998, 0.9998);
  --margen: calc(87 * var(--px));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }                          /* clip y no hidden: hidden rompe el sticky */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--tinta); color: var(--blanco); font-family: var(--f-texto); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
.ico { width: 1em; height: 1em; display: block; }
:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 3px; }
.pausa :focus-visible, .barra.en-claro :focus-visible { outline-color: var(--tinta); }   /* el amarillo no se ve sobre blanco */
[hidden] { display: none !important; }
.bloqueado { overflow: hidden; }
/* Entrada al cargar (solo con JS): app.js pone html.listo y estas transiciones hacen el resto */
.js .logo, .js .nav, .js .nav__item, .js .nav__icono, .js .idioma, .js .cuadricula { opacity: 0; translate: 0 -25px; }
.js .hero__texto { opacity: 0; translate: 0 -60px; }
.js .raton { opacity: 0; translate: 0 35px; }
.listo .logo, .listo .nav, .listo .nav__item, .listo .nav__icono, .listo .idioma, .listo .cuadricula, .listo .hero__texto, .listo .raton { opacity: 1; translate: 0 0; }
.listo .logo, .listo .nav { transition: opacity .5s var(--curva) .24s, translate .5s var(--curva) .24s; }
.listo .nav__item { transition: opacity .45s var(--curva), translate .45s var(--curva); transition-delay: calc(.32s + var(--i, 0) * .08s); }
.listo .nav__icono { transition: opacity .45s var(--curva) .72s, translate .45s var(--curva) .72s; }
.listo .idioma, .listo .cuadricula { transition: opacity .5s var(--curva) .3s, translate .5s var(--curva) .3s; }
.listo .hero__texto { transition: opacity 2.2s ease-out .5s, translate 3s cubic-bezier(.16, 1, .3, 1) .5s; transition-timing-function: ease-out, var(--resorte); }
.listo .raton { transition: opacity .6s var(--curva) 1.4s, translate .6s var(--curva) 1.4s; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amarillo); color: var(--tinta);
  font: 700 14px/1 var(--f-texto); padding: 20px; border-radius: 8px;
  transition: transform .3s var(--curva), filter .3s;
}
.boton:hover { transform: translateY(-2px); filter: brightness(1.04); }
/* Vidrio: blanco pálido en degradado de esquina a esquina (75 % → 15 % de la opacidad del vidrio),
   borde fino amarillo que se enciende al centro (45°: 0 → 100 → 0) y sombra; al pasar el ratón, crema amarilla. */
@property --borde { syntax: '<angle>'; inherits: false; initial-value: 45deg; }
.boton--vidrio {
  position: relative; color: var(--blanco); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; padding: 16px 30px;
  background: linear-gradient(135deg, rgba(255, 252, 245, .3), rgba(255, 252, 245, .06));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5);
  transition: transform .4s var(--curva), background .4s ease, box-shadow .3s;
}
.boton--vidrio::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--borde), rgba(250, 207, 120, 0), rgba(250, 207, 120, 1), rgba(250, 207, 120, 0));
  transition: --borde .6s var(--curva);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.boton--vidrio:hover::before { --borde: 135deg; }
.boton--vidrio:hover { transform: scale(1.03); filter: none; background: linear-gradient(135deg, rgba(250, 216, 150, .34), rgba(250, 216, 150, .08)); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55); }

/* ── Barra ──────────────────────────────────────────────────────────── */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(90 * var(--px)); pointer-events: none; color: var(--blanco); transition: color .4s; }
.barra > * { pointer-events: auto; }
.logo { position: absolute; left: calc(24 * var(--px)); top: calc(20.25 * var(--px)); width: calc(29.64 * var(--px)); transition: filter .4s; }
.logo img { width: 100%; height: auto; }
.nav {
  position: absolute; left: 50%; top: calc(14.6 * var(--px)); transform: translateX(-50%);
  display: flex; align-items: center; padding: 4px; border-radius: 12px;
  background: var(--vidrio-nav); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
}
.nav__item { display: block; padding: 18px 20px; border-radius: 8px; font: 400 13px/13px var(--f-texto); text-decoration: none; color: rgba(255, 255, 255, .72); white-space: nowrap; transition: background .3s, color .3s; }
.nav__item:hover, .nav__item.activo { color: var(--blanco); }
.nav__item.activo { background: var(--vidrio-activo); }
.nav__icono { width: 56px; height: 44px; display: grid; place-items: center; font-size: 24.4px; }   /* WhatsApp en contorno fino */
.idioma { position: absolute; right: calc(24 * var(--px)); top: calc(14.6 * var(--px)); width: 56px; border-radius: 12px; background: var(--vidrio-boton); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); transition: background .4s; }
.idioma__boton { width: 56px; height: 56px; display: grid; place-items: center; font-size: 20px; }
.idioma__lista { display: grid; overflow: hidden; max-height: 0; transition: max-height .45s var(--curva); }
.idioma.abierto .idioma__lista { max-height: 120px; }
.idioma__lista button { height: 44px; font: 700 12px/1 var(--f-texto); letter-spacing: .1em; opacity: 0; translate: 0 -8px; transition: opacity .3s, translate .4s var(--curva), color .3s; color: rgba(255, 255, 255, .6); }
.idioma.abierto .idioma__lista button { opacity: 1; translate: 0 0; }
.idioma.abierto .idioma__lista button + button { transition-delay: .06s; }
.idioma__lista button:hover, html[lang="es"] [data-lang="es"], html[lang="en"] [data-lang="en"] { color: var(--blanco); }
.idioma__lista button:last-child { margin-bottom: 6px; }
.cuadricula { display: none; height: 44px; width: 44px; border-radius: 12px; background: var(--vidrio-boton); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); place-items: center; font-size: 22px; transition: background .4s; }
/* sobre las pausas blancas la barra pasa a tinta */
.barra.en-claro { color: var(--tinta); }
.barra.en-claro .logo { filter: invert(1); }
.barra.en-claro .nav { background: rgba(30, 23, 17, .05); }
.barra.en-claro .nav__item { color: var(--tinta-suave); }
.barra.en-claro .nav__item:hover, .barra.en-claro .nav__item.activo { color: var(--tinta); }
.barra.en-claro .nav__item.activo { background: rgba(30, 23, 17, .08); }
.barra.en-claro .idioma, .barra.en-claro .cuadricula { background: rgba(30, 23, 17, .06); }
.barra.en-claro .idioma__lista button { color: var(--tinta-suave); }
.barra.en-claro .idioma__lista button:hover, html[lang="es"] .barra.en-claro [data-lang="es"], html[lang="en"] .barra.en-claro [data-lang="en"] { color: var(--tinta); }

/* ── Actos ──────────────────────────────────────────────────────────── */
.acto { position: sticky; background: var(--tinta); }   /* app.js fija top y z-index: al terminar se queda y la siguiente sube encima */
.acto.sw-root { color: var(--blanco); font-family: var(--f-texto); --sw-bg: var(--tinta); --sw-ink: var(--blanco); }  /* el motor hereda tinta oscura */
.acto__pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.acto .sw-stage { position: absolute; inset: 0; z-index: 0; }
.acto .sw-scene__still, .acto .sw-scene__video { object-position: 50% 50%; }
.velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background:
    linear-gradient(to bottom, rgba(14, 10, 7, .62) 0%, rgba(14, 10, 7, .28) 26%, rgba(14, 10, 7, 0) 48%),
    radial-gradient(95% 85% at 0% 100%, rgba(14, 10, 7, .72) 0%, rgba(14, 10, 7, 0) 58%);
}
.ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ui .boton, .ui button, .ui a { pointer-events: auto; }
.penumbra { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: linear-gradient(to top right, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 35%); }
.linea-on > .penumbra { opacity: 1; }
#portales .penumbra { display: none; }                      /* en escritorio el acto 3 ya tiene su sombra */
/* Acto 1: la entrada de la interfaz va amarrada al scroll. app.js da --entra (0 → 1) entre el 85 % del vuelo
   K1→K2 y K2; cada pieza toma su tramo de ese recorrido: k = (entra − desde) / largo. */
#llegada .ui { --entra: 0; }
#llegada .penumbra { opacity: var(--entra); transition: none; }
#llegada .lista :is(.item__dia, .item__num, .item__titulo, .item__linea, .item__texto, .item__boton) {
  --k: clamp(0, (var(--entra) - var(--desde, 0)) / .45, 1); opacity: var(--k); translate: 0 calc((1 - var(--k)) * 26px); transition: none; }
#llegada .lista :is(.item__dia, .item__num) { translate: -50% calc((1 - var(--k)) * 26px); }
#llegada .lista .item__titulo { --desde: .08; }
#llegada .lista .item__linea { --desde: .2; }
#llegada .lista .item__texto { --desde: .32; }
#llegada .lista .item__boton { --desde: .44; }
#llegada .lista .item.siguiente :is(.item__dia, .item__num, .item__titulo) { --desde: .55; }
/* salto de la línea entre posiciones (móvil, acto 2): el bloque sale subiendo y se reinicia sin transición */
.lista.saliendo .item.activo :is(.item__titulo, .item__linea, .item__texto, .item__boton) { opacity: 0; translate: 0 -30px; transition-duration: .4s; transition-delay: 0s; }
.lista.saliendo .item.activo :is(.item__dia, .item__num) { opacity: 0; translate: -50% -30px; transition-duration: .4s; transition-delay: 0s; }
.lista.saliendo .item.siguiente { opacity: 0; }
.lista.sin-transicion, .lista.sin-transicion * { transition: none !important; }

/* Título display: Marko 176 px, tracking −7 px, mayúsculas, ss01 ss02 ss03 ss05 */
.hero, .titulo-acto, .cierre {
  margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-feature-settings: var(--juegos); letter-spacing: -0.04em; line-height: 1; white-space: nowrap;
  color: var(--blanco); pointer-events: none;
}
/* Hero en una línea entre el sol y la maloka; app.js fija --hero-top y --hero-fs con la geometría de K1 */
.hero { position: absolute; left: 0; right: 0; top: var(--hero-top, 24vh); font-size: var(--hero-fs, calc(176 * var(--px))); display: flex; justify-content: center; }
.hero__vuelo { display: block; transform-origin: 50% 60%; will-change: transform; }
/* La base del texto se desvanece: sale del bosque. padding-top deja entrar la tilde de la É en la máscara. */
.hero__texto {
  display: block; padding-top: .2em; margin-top: -.2em; letter-spacing: inherit;
  -webkit-mask-image: linear-gradient(to bottom, #000 61%, transparent 77%);
  mask-image: linear-gradient(to bottom, #000 61%, transparent 77%);
}
/* La G monta sobre la mitad de la O: un símbolo de infinito dentro del nombre */
.hero__o, .hero__g { display: inline-block; }
.hero__g { margin-left: -0.38em; }   /* el óvalo del medio, más chico */
/* Promesa: al centro, sobre la maloka de K2, entra con la interfaz y se va cuando nace PRIMERA LUZ */
.promesa { position: absolute; left: 50%; top: 17%; width: min(calc(560 * var(--px)), 88vw); translate: -50% 0; text-align: center; transition: opacity .7s var(--curva); }
.promesa.fuera { opacity: 0; }
.promesa > p { --k: clamp(0, (var(--entra) - var(--desde, .42)) / .5, 1); opacity: var(--k); translate: 0 calc((1 - var(--k)) * 18px); }
.promesa__bajada { --desde: .5; }
.promesa__frase { margin: 0; font: 400 calc(40 * var(--px))/1.1 var(--f-display); font-feature-settings: var(--juegos); letter-spacing: -0.01em; color: var(--blanco); text-wrap: balance; text-shadow: 0 1px 24px rgba(14, 10, 7, .45); }
.promesa__bajada { margin: 14px auto 0; max-width: 46ch; font: 400 14px/1.5 var(--f-texto); color: var(--texto-suave); letter-spacing: -0.02em; text-shadow: 0 1px 18px rgba(14, 10, 7, .5); }

.titulo-acto { position: absolute; left: calc(90 * var(--px)); top: calc(50% - 200 * var(--px) - 7vh); font-size: calc(140 * var(--px)); }
.titulo-acto__vuelo { display: block; }
.titulo-acto__l1, .titulo-acto__l2 { display: block; will-change: transform; }
.titulo-acto__l2 { margin-top: calc(-20 * var(--px)); }

/* ── Lista: índice del itinerario ───────────────────────────────────── */
/* Línea de tiempo. Cada momento es un bloque (número, título, línea, texto, botón).
   .lista.on = entrada escalonada de los hijos; --i = bloque activo: la pila sube un bloque y el activo pasa a 1. */
.lista { position: absolute; left: calc(82 * var(--px)); top: calc(100% - 305 * var(--px)); width: calc(320 * var(--px)); --paso: calc(265.8 * var(--px)); }
.lista__pila { position: relative; transform: translateY(calc(var(--i, 0) * var(--paso) * -1)); transition: transform 1s var(--suave-firma); }
.item { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: opacity .8s var(--suave-firma); }
.item.activo { opacity: 1; }
.item.siguiente { opacity: .22; }
.item__extra { opacity: 0; transition: opacity .6s ease; }
.item.activo .item__extra { opacity: 1; transition-delay: .25s; }
.item__dia { position: absolute; left: calc(17 * var(--px)); top: -15px; font: 700 10px/1 var(--f-texto); letter-spacing: .16em; color: rgba(255, 255, 255, .72); }
.item__num { position: absolute; left: calc(17 * var(--px)); top: 0; font: 400 36px/1.1 var(--f-display); letter-spacing: .01em; white-space: nowrap; }
.item__linea { position: absolute; left: calc(17 * var(--px)); top: calc(56 * var(--px)); width: 2px; margin-left: -1px; height: calc(180 * var(--px)); }
.item__linea::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(246, 228, 184, 0), rgba(246, 228, 184, .75) 22%, rgba(246, 228, 184, .75) 78%, rgba(246, 228, 184, 0)); transition: opacity .6s; }
.item:not(.activo) .item__linea::after { opacity: 0; }
.item__cuerpo { margin-left: calc(69 * var(--px)); padding-top: 4px; display: flex; flex-direction: column; align-items: flex-start; }
/* entrada: número, título, línea, texto, botón y, al final, el bloque siguiente (atenuado) */
.item__dia, .item__num, .item__titulo, .item__linea, .item__texto, .item__boton { opacity: 0; translate: 0 26px; transition: opacity .45s ease, translate .45s var(--curva); }
.item__dia, .item__num { translate: -50% 26px; }
.lista.on :is(.item__titulo, .item__linea, .item__texto, .item__boton) { opacity: 1; translate: 0 0; transition-duration: .7s, .9s; }
.lista.on :is(.item__dia, .item__num) { opacity: 1; translate: -50% 0; transition-duration: .7s, .9s; }
.lista.on .item__titulo { transition-delay: .08s; }
.lista.on .item__linea { transition-delay: .2s; }
.lista.on .item__texto { transition-delay: .32s; }
.lista.on .item__boton { transition-delay: .44s; }
.lista.on .item.siguiente :is(.item__dia, .item__num) { transition-delay: .56s; }
.lista.on .item.siguiente .item__titulo { transition-delay: .64s; }
.item__titulo { margin: 0; font: 700 16px/1.4 var(--f-texto); text-transform: uppercase; }
.item__texto { margin: 30px 0 0; width: calc(241 * var(--px)); min-width: 220px; font: 400 14px/1.4 var(--f-texto); letter-spacing: -0.04em; color: var(--texto-suave); }
.item__boton { margin-top: 24px; }
.item__extra { display: flex; flex-direction: column; align-items: flex-start; }

/* ── Tarjeta de cristal con cifra (datos) ───────────────────────────── */
.datos {
  position: absolute; right: calc(24 * var(--px)); top: calc(100% - 176 * var(--px));
  width: calc(459 * var(--px)); height: calc(289 * var(--px)); border-radius: 12px;
  scale: .9; transform-origin: 100% 0;                    /* 10 % más chica, anclada arriba a la derecha */
  translate: 0 35px; transition: translate .8s var(--curva);
}
.datos { translate: 0 calc((1 - var(--entra, 1)) * 35px); transition: none; }
/* Vidrio con desenfoque en degradado: una capa suave entera y encima una fuerte (32 px, 20 % menos que antes)
   que se apaga hacia abajo. Se funden las capas y no la caja: con opacidad en la caja el desenfoque no se ve. */
.datos::before, .datos::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.datos::before { background: var(--vidrio); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .12); }   /* la sombra exterior no se pinta bajo el vidrio */
.datos::after { -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%); }
.datos.on::before, .datos.on::after { opacity: var(--entra, 1); transition: none; }
.dato { position: absolute; inset: 0; opacity: 0; translate: 0 14px; transition: opacity .35s ease, translate .5s var(--curva); }
.dato.on { opacity: var(--entra, 1); translate: 0 0; transition-duration: .5s, .8s; transition-delay: .15s; }
.dato__etiqueta { position: absolute; left: calc(32.6 * var(--px)); top: calc(44 * var(--px)); margin: 0; font: 700 16px/1.4 var(--f-texto); text-transform: uppercase; }
.dato__etiqueta span { display: block; }
.dato__nota { position: absolute; left: calc(32.6 * var(--px)); top: calc(108 * var(--px)); margin: 0; max-width: calc(330 * var(--px)); white-space: pre-line; font: 400 12px/1.35 var(--f-texto); color: rgba(231, 226, 224, .78); }
.dato__cifra { position: absolute; right: calc(29 * var(--px)); top: calc(28 * var(--px)); margin: 0; display: flex; flex-direction: column; align-items: flex-end; font: 400 calc(72 * var(--px))/.9 var(--f-display); font-feature-settings: var(--juegos); letter-spacing: -0.02em; }
.dato__cifra sup { font-size: .36em; line-height: 1; margin-top: .12em; letter-spacing: 0; vertical-align: baseline; }
.datos__flecha { position: absolute; left: calc(404 * var(--px)); top: calc(128.2 * var(--px)); width: calc(39 * var(--px)); height: calc(39 * var(--px)); font-size: calc(30 * var(--px)); display: grid; place-items: center; color: var(--blanco); pointer-events: auto; opacity: 0; transition: opacity .6s ease, transform .3s var(--curva); }
.datos__flecha:hover { transform: translate(2px, -2px); }
.datos.on .datos__flecha { opacity: var(--entra, 1); transition: none; }

/* ── Tarjeta de cristal con imagen (noches) ─────────────────────────── */
.noche {
  position: absolute; right: calc(56 * var(--px)); bottom: calc(48 * var(--px)); --k: .8;
  width: calc(342 * var(--k) * var(--px)); height: calc(409 * var(--k) * var(--px)); border-radius: 12px;
  box-shadow: 0 22px 46px -16px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .18);   /* sombra exterior: no oscurece el vidrio */
  background: var(--vidrio); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  opacity: 0; transform-origin: 50% 50%;
  transition: width .7s var(--resorte), height .7s var(--resorte);
}
.noche__capa { position: absolute; inset: 0; opacity: 0; }
.noche__foto { position: absolute; left: calc(16 * var(--px)); top: calc(16 * var(--px)); width: calc(140 * var(--px)); height: calc(167 * var(--px)); border-radius: 8px; object-fit: cover; }
.noche__titulo { position: absolute; left: calc(24 * var(--px)); top: calc(203 * var(--px)); right: calc(24 * var(--px)); margin: 0; font: 700 15px/1.35 var(--f-texto); text-transform: uppercase; }
.noche__corto { position: absolute; left: calc(24 * var(--px)); top: calc(238 * var(--px)); right: calc(24 * var(--px)); margin: 0; font: 400 13px/1.4 var(--f-texto); letter-spacing: -0.03em; color: var(--texto-suave); }
.noche__detalle { position: absolute; left: calc(24 * var(--px)); width: calc(340 * var(--px)); top: calc(238 * var(--px)); margin: 0; font: 400 14px/1.55 var(--f-texto); color: var(--texto-suave); opacity: 0; transition: opacity .35s; }
.noche__mas {
  position: absolute; left: calc(273.6 * var(--px) - 52px); top: 12px; width: 40px; height: 40px;
  border-radius: 50%; background: var(--amarillo); color: var(--tinta); display: grid; place-items: center; font-size: 16px;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .45);
  transition: left .7s var(--resorte), transform .3s var(--curva);
}
.noche__mas:hover { transform: scale(1.06); }
.noche__mas .ico-menos { display: none; }
/* borde blanco fino en diagonal, de 80 % a 20 % */
.noche__mas::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.noche.abierta { width: calc(388 * var(--px)); height: var(--alto-abierta, calc(460 * var(--px))); }
.noche.abierta .noche__mas { left: calc(388 * var(--px) - 52px); }
.noche.abierta .noche__mas .ico-mas { display: none; }
.noche.abierta .noche__mas .ico-menos { display: block; }
.noche.abierta .noche__corto { opacity: 0; }
.noche.abierta .noche__detalle { opacity: 1; transition-delay: .25s; }

/* ── Acto 3: párrafo y galería (pantalla 04) ────────────────────────── */
.sombra { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 50%); }
/* Galería: las cuatro fotos caben enteras (sin paginación), algo más abajo y con sombra para despegarlas del fondo */
.galeria { position: absolute; right: calc(56 * var(--px)); top: auto; bottom: var(--galeria-bottom, calc(130 * var(--px))); display: flex; gap: calc(14 * var(--px)); }
.galeria img { width: calc(135 * var(--px)); height: calc(180 * var(--px)); border-radius: 12px; object-fit: cover; opacity: 0; box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .25); }

.cierre { --cierre-top: 16vh; position: absolute; left: 0; right: 0; top: var(--cierre-top); font-size: var(--hero-fs, calc(176 * var(--px))); display: flex; justify-content: center; }
.cierre__vuelo { display: block; }
.cierre__texto { display: block; padding-top: .2em; margin-top: -.2em;
  -webkit-mask-image: linear-gradient(to bottom, #000 61%, transparent 77%); mask-image: linear-gradient(to bottom, #000 61%, transparent 77%); }
.cierre__pie { position: absolute; left: var(--cierre-x, calc(90 * var(--px))); top: calc(16vh + var(--hero-fs, 176px) * .9 + 18px); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }   /* app.js anima cada pieza (no el contenedor: el vidrio no desenfocaría) */
.cierre__pie p { margin: 0; font: 700 18px/1.35 var(--f-texto); }

/* Indicador de scroll (ratón) */
.raton-caja { position: absolute; left: 50%; top: calc(100% - 77 * var(--px) - 16vh); translate: -50% 0; }
.raton { position: relative; width: calc(33.6 * var(--px)); height: calc(57 * var(--px)); border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 999px; }
.raton i { position: absolute; left: 50%; bottom: calc(12 * var(--px)); width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--blanco); animation: rueda 1.8s ease-in-out infinite; }
@keyframes rueda { 0% { transform: translateY(-14px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }

/* ── Pausas blancas ─────────────────────────────────────────────────── */
.pausa { position: sticky; z-index: 3; background: var(--papel); color: var(--tinta); padding: clamp(96px, 12vw, 168px) clamp(20px, 6vw, 87px); }
.pausa__inner { max-width: 1266px; margin: 0 auto; }
.pausa__ante { margin: 0; font: 700 11px/1 var(--f-texto); letter-spacing: .22em; color: var(--tinta-suave); }
.pausa__titulo { margin: 22px 0 30px; font: 400 clamp(52px, 8.4vw, 124px)/.95 var(--f-display); letter-spacing: -0.04em; text-transform: uppercase; font-feature-settings: var(--juegos); }
.pausa__titulo span { display: block; }
.pausa__texto { max-width: 56ch; margin: 0 0 44px; font: 400 17px/1.65 var(--f-texto); color: rgba(30, 23, 17, .82); }
.aparece { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--curva), transform .9s var(--curva); }
.aparece.visto { opacity: 1; transform: none; }


.final__cols { margin-top: 88px; padding-top: 56px; border-top: 1px solid var(--linea-clara); }
.faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; }
.pausa--final { padding-bottom: 28px; }
.final__h { margin: 0 0 18px; font: 700 12px/1 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.final__h ~ .final__h { margin-top: 40px; }
.final__lista { list-style: none; margin: 0; padding: 0; }
.final__lista li { padding: 12px 0; border-bottom: 1px solid var(--linea-clara); font: 400 16px/1.45 var(--f-texto); }
.final__nota { margin: 14px 0 0; font: 400 14px/1.5 var(--f-texto); color: var(--tinta-suave); }
.faq details { border-bottom: 1px solid var(--linea-clara); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font: 700 16px/1.4 var(--f-texto); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 24px/1 var(--f-display); transition: transform .3s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 20px; max-width: 60ch; font: 400 15px/1.6 var(--f-texto); color: rgba(30, 23, 17, .8); }
.pie { max-width: 1266px; margin: 96px auto 0; padding-top: 28px; border-top: 1px solid var(--linea-clara); display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; font: 400 13px/1.5 var(--f-texto); color: var(--tinta-suave); }

/* ── Popup del día y formulario ─────────────────────────────────────── */
.dialogo, .menu { border: 0; padding: 0; background: transparent; color: var(--blanco); }
.dialogo:focus, .menu:focus { outline: none; }               /* el foco va a los controles, no a la caja */
.dialogo { width: min(760px, calc(100vw - 32px)); max-height: min(90vh, 900px); max-height: min(90dvh, 900px); }
.dialogo::backdrop, .menu::backdrop { background: rgba(12, 9, 6, .42); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.dialogo[open] { animation: entra .6s var(--curva); }
.dialogo[open]::backdrop { animation: velar .5s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes velar { from { opacity: 0; } }
.dialogo__tarjeta { position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; background: rgba(30, 23, 17, .78); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); border: 1px solid rgba(255, 255, 255, .08); }
.dialogo__x { position: absolute; right: 14px; top: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: rgba(30, 23, 17, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vista--dias { display: flex; flex-direction: column; max-height: min(90vh, 900px); max-height: min(90dvh, 900px); }
.dias { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dia { display: none; }
.dia.activo { display: flex; flex-direction: column; flex: 1; min-height: 0; animation: aparecer .5s var(--curva); }
@keyframes aparecer { from { opacity: 0; transform: translateX(var(--desde, 24px)); } }
.dia__foto { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 16px 16px 0 0; }
.dia__cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 36px 20px; }
.dia__num { margin: 0; font: 400 15px/1 var(--f-display); letter-spacing: .1em; color: rgba(255, 255, 255, .7); }
.dia__titulo { margin: 10px 0 12px; font: 400 clamp(34px, 5vw, 52px)/1 var(--f-display); letter-spacing: -0.03em; text-transform: uppercase; font-feature-settings: var(--juegos); }
.dia__intro { margin: 0 0 22px; font: 400 16px/1.55 var(--f-texto); color: var(--texto-suave); }
.bloque { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.bloque__momento { font: 700 11px/1.6 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--amarillo); }
.bloque ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bloque li { font: 400 14.5px/1.5 var(--f-texto); color: var(--texto-suave); }
.bloque .hora { display: inline-block; min-width: 0; margin-right: 8px; font-weight: 700; color: var(--blanco); white-space: nowrap; }
.dias__nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.dias__flecha { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--vidrio-boton); }
.dias__flecha:disabled { opacity: .3; cursor: default; }
.dias__puntos { display: flex; gap: 10px; }
.dias__puntos button { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); }
.dias__puntos button::after { content: ""; position: absolute; inset: -12px; }   /* área de toque de 33 px sin agrandar el punto */
.dias__puntos button.activo { background: var(--blanco); }
.dialogo__pie { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px 36px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.dialogo__pie .dias__nav { grid-column: 2; }
.dialogo__pie .boton { grid-column: 3; justify-self: end; }

.vista--form, .vista--gracias { padding: 44px 36px 32px; }
.form__titulo { margin: 0 0 10px; font: 400 clamp(34px, 5vw, 50px)/1 var(--f-display); letter-spacing: -0.03em; text-transform: uppercase; font-feature-settings: var(--juegos); }
.form__texto { margin: 0 0 26px; font: 400 15px/1.55 var(--f-texto); color: var(--texto-suave); max-width: 46ch; }
.form { display: grid; gap: 16px; }
.form label, .form fieldset { display: grid; gap: 8px; margin: 0; border: 0; padding: 0; min-width: 0; }
.form label > span, .form legend { padding: 0; font: 700 12px/1.4 var(--f-texto); letter-spacing: .06em; color: rgba(255, 255, 255, .8); }
.form input:not([type="checkbox"]):not([type="radio"]) { width: 100%; padding: 14px 16px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: var(--blanco); font: 400 16px/1.2 var(--f-texto); }
.form input:focus { outline: none; border-color: var(--amarillo); }
.form input[aria-invalid="true"] { border-color: #ff9d8a; }
.opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.form .opciones label { display: block; position: relative; }
.opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.form .opciones label > span { display: flex; align-items: center; gap: 12px; min-height: 48px; height: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03);
  font: 400 14px/1.35 var(--f-texto); letter-spacing: 0; color: var(--texto-suave); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.form .opciones label > span::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4); transition: border-color .2s, box-shadow .2s; }
.form .opciones label > span:hover { border-color: rgba(255, 255, 255, .26); }
.form .opciones input:checked + span { border-color: rgba(250, 207, 120, .7); background: rgba(250, 207, 120, .1); color: var(--blanco); }
.form .opciones input:checked + span::before { border-color: var(--amarillo); box-shadow: inset 0 0 0 3.5px var(--tinta), inset 0 0 0 8px var(--amarillo); }
.opciones input:focus-visible + span { outline: 2px solid var(--amarillo); outline-offset: 2px; }
.form__check { grid-template-columns: 20px 1fr !important; align-items: start; }
.form .form__check > span { font: 400 13px/1.5 var(--f-texto); letter-spacing: 0; color: var(--texto-suave); }
.form__check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--amarillo); }
.form .boton { justify-self: start; margin-top: 8px; }
.form__volver { justify-self: start; font: 400 13px/1 var(--f-texto); color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 3px; }
.form__error { font: 400 12px/1.3 var(--f-texto); color: #ffb5a6; }
.form__prototipo { margin: 0; font: 400 13px/1.5 var(--f-texto); color: rgba(255, 255, 255, .55); }

.menu[open] { animation: menu-entra .45s var(--curva); }
.menu[open]::backdrop { animation: velar .4s ease; }
.menu.cerrando { animation: menu-sale .32s ease-in forwards; }
.menu.cerrando::backdrop { animation: velar .32s ease reverse forwards; }
.menu[open] .menu__nav a { animation: menu-item .5s var(--curva) both; }
.menu[open] .menu__nav a:nth-child(2) { animation-delay: .04s; } .menu[open] .menu__nav a:nth-child(3) { animation-delay: .08s; }
.menu[open] .menu__nav a:nth-child(4) { animation-delay: .12s; } .menu[open] .menu__nav a:nth-child(5) { animation-delay: .16s; }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-14px) scale(.98); } }
@keyframes menu-sale { to { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes menu-item { from { opacity: 0; transform: translateY(10px); } }
.menu { width: min(420px, calc(100vw - 32px)); margin: 16px 16px auto auto; border-radius: 16px; padding: 28px; background: rgba(30, 23, 17, .82); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); }
.menu__nav { display: grid; margin-bottom: 22px; }
.menu__nav a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font: 400 28px/1.1 var(--f-display); text-transform: uppercase; text-decoration: none; font-feature-settings: var(--juegos); }
.menu__x { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 18px; }

/* ── Móvil (≤ 860 px): composición vertical sobre los 9:16 ──────────── */
@media (max-width: 860px) {
  :root { --px: calc(100vw / 390); --margen: 20px; }
  /* barra: logo a la izquierda, cuadrícula al centro, idioma plegado a la derecha */
  .barra { height: 76px; }
  .logo { left: 18px; top: 18px; width: 24px; }
  .nav { display: none; }
  .cuadricula { display: grid; position: absolute; left: 50%; top: 14px; margin-left: -22px; }
  .idioma { right: 14px; top: 14px; width: 44px; }
  .idioma__boton { width: 44px; height: 44px; font-size: 18px; }

  .hero { font-size: var(--hero-fs, 13vw); }
  .promesa { width: auto; left: 20px; right: 20px; translate: 0 0; top: 22vh; }   /* frase en el cielo, párrafo sobre los árboles */
  .promesa__frase { font-size: 30px; }
  .promesa__bajada { font-size: 13px; margin-top: 10px; }

  /* títulos más grandes y más cerca del centro */
  .titulo-acto { left: 20px; top: 27vh; font-size: min(21vw, 96px); }
  .titulo-acto__l2 { margin-top: -.12em; }

  /* abajo: la tarjeta (datos, noche o galería) y encima la línea de tiempo; --abajo = alto de lo que hay debajo */
  /* sombra vertical detrás de la línea de tiempo (actos 1 y 3); en el acto 2 la línea sube y no hay sombra */
  .penumbra { background: linear-gradient(to top, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 45%); }
  #portales .penumbra { display: block; }
  #noches .penumbra { display: none; }
  .lista.arriba { top: 23vh; bottom: auto; }
  .ui { --base: calc(16px + env(safe-area-inset-bottom)); --abajo: 0px; }
  #llegada .ui { --abajo: 120px; }
  #noches .ui { --abajo: 116px; }
  #portales .ui { --abajo: 128px; }
  #noches .ui:has(.noche.abierta) { --abajo: var(--alto-abierta, 320px); }
  .lista { left: 20px; right: 20px; width: auto; top: auto; bottom: calc(var(--base) + var(--abajo) + 18px); height: 178px; --paso: 200px;
    clip-path: inset(-100vh -20px 0 -20px); transition: bottom .7s var(--resorte); }   /* el bloque siguiente sale de abajo */
  .item__dia, .item__num, .item__linea { left: 14px; }
  .item__linea { top: 46px; height: auto; bottom: 0; }   /* termina con el borde inferior de Ver más */
  .item__cuerpo { margin-left: 50px; }
  .item__texto { margin-top: 10px; width: auto; min-width: 0; font-size: 13.5px; }
  .item__boton { margin-top: 12px; padding: 13px 16px; }

  .datos { right: 16px; left: 16px; width: auto; top: auto; bottom: var(--base); height: 120px; scale: 1; }   /* en móvil, tamaño completo y centrada */
  .dato__etiqueta { left: 16px; top: 16px; font-size: 12px; line-height: 1.35; }
  .dato__nota { left: 16px; right: 16px; top: 66px; max-width: none; font-size: 12px; }
  .dato__cifra { right: 16px; top: 12px; font-size: 40px; }
  .datos__flecha { display: none; }

  .noche { right: 16px; left: 16px; bottom: var(--base); width: auto; height: 116px; }
  .noche__foto { left: 12px; top: 12px; width: 64px; height: 80px; }
  .noche__titulo { left: 90px; top: 16px; right: 52px; font-size: 13px; }
  .noche__corto { left: 90px; top: 40px; right: 52px; font-size: 12.5px; }   /* nunca bajo el + */
  .noche__detalle { left: 16px; right: 16px; width: auto; top: 116px; font-size: 14px; }
  .noche__mas { left: auto; right: 10px; top: 10px; width: 32px; height: 32px; font-size: 13px; }
  .noche.abierta { width: auto; height: var(--alto-abierta, 320px); }
  .noche.abierta .noche__mas { left: auto; }

  .sombra { display: none; }
  .galeria { left: 16px; right: auto; top: auto; bottom: var(--base); gap: 8px; }
  .galeria img { width: calc((100vw - 32px - 24px) / 4); height: 128px; border-radius: 10px; }
  .cierre { --cierre-top: 22vh; }
  .cierre__pie { top: calc(22vh + var(--hero-fs, 52px) * .9 + 14px); }
  .raton-caja { top: auto; bottom: calc(64px + 2vh + env(safe-area-inset-bottom)); }
  .cierre__pie p { font-weight: 400; }
  .raton { width: 26px; height: 44px; }
  .raton i { bottom: 9px; }

  .final__cols { margin-top: 64px; }
  .faq { grid-template-columns: 1fr; }
  .dia__cuerpo { padding: 22px 20px 16px; }
  .opciones { grid-template-columns: 1fr; }
  .bloque { grid-template-columns: 1fr; gap: 8px; }
  .dialogo__pie { display: flex; justify-content: space-between; padding: 12px 16px 16px; gap: 10px; }
  .dias__nav { gap: 8px; } .dias__puntos { gap: 7px; }
  .dias__flecha { width: 44px; height: 44px; }
  .vista--form, .vista--gracias { padding: 40px 20px 24px; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .raton i { animation: none; }
  .aparece { transform: none; transition: opacity .4s; }
  .noche, .noche__mas { transition: none; }
}

/* ── Pausa 1 · El santuario — GetLayers «cards-almanac» ─────────────────
   Composición y movimiento de la fuente (MATERIAL/cards-almanac); piel de la plantilla. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pausa--almanac { background: radial-gradient(120% 80% at 50% -8%, #fbfaf8 0%, #f1f0ed 60%), #f1f0ed; padding-bottom: clamp(60px, 12vh, 140px); }
.alm__cabeza, .alm { width: min(84vw, 1180px); margin: 0 auto; }
.alm__cabeza { position: sticky; top: 110px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 88px); align-items: end; padding-bottom: clamp(28px, 5vh, 56px); }
.alm__intro { position: relative; }                       /* app.js le da el alto: tiempo congelado del encabezado */
.alm__titulo { font-size: clamp(40px, 5.2vw, 78px); margin: 18px 0 0; }
.alm__titulo > span { overflow: hidden; padding-bottom: .04em; }
.alm__titulo > span > span { display: block; translate: 0 105%; transition: translate 1.1s var(--curva); }
.alm__titulo > span + span > span { transition-delay: .12s; }
.alm__titulo.visto > span > span { translate: 0 0; }
.alm__titular .pausa__ante.aparece { transition-delay: 0s; }
.alm__titulo > span:first-child > span { transition-delay: .12s; }
.alm__titulo > span + span > span { transition-delay: .24s; }
.alm__lectura.aparece { transition-delay: .4s; }
.alm__titulo.aparece { opacity: 1; transform: none; }
.alm__lectura { margin: 0; max-width: 52ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; }
.alm__lectura span { color: rgba(30, 23, 17, .2); transition: color .5s ease; }
.alm__lectura span.on { color: rgba(30, 23, 17, .88); }
.alm__carta {
  position: sticky; top: var(--top, 88px); margin: 0;
  background: #fff; border-radius: clamp(18px, 2vw, 26px); border: 1px solid rgba(26, 25, 23, .08);
  box-shadow: 0 1px 2px rgba(28, 22, 16, .06), 0 40px 80px -34px rgba(40, 30, 20, .4);
  padding: clamp(14px, 1.4vw, 20px); display: grid; grid-template-columns: minmax(180px, 42%) 1fr; grid-template-rows: 1fr auto;
  gap: clamp(16px, 1.6vw, 26px); min-height: clamp(300px, 46vh, 480px); transform-origin: 50% 0; will-change: transform, filter;
}
.alm__hueco { pointer-events: none; }
.alm__media { grid-column: 1; grid-row: 1 / span 2; position: relative; border-radius: clamp(12px, 1.2vw, 18px); overflow: hidden; min-height: 210px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.alm__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.15s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.alm__cuerpo { grid-column: 2; grid-row: 1; padding: 8px clamp(4px, 1vw, 18px) 0 clamp(4px, 1vw, 10px); display: flex; flex-direction: column; }
.alm__nombre { margin: 0 0 clamp(12px, 1.4vw, 22px); font: 400 clamp(26px, 2.6vw, 40px)/1 var(--f-display); letter-spacing: -0.03em; text-transform: uppercase; font-feature-settings: var(--juegos); color: var(--tinta); }
.alm__texto { margin: 0; max-width: 46ch; font: 400 clamp(15px, 1.4vw, 20px)/1.5 var(--f-texto); letter-spacing: -0.01em; color: #2a2825; }
.alm__piecarta { grid-column: 2; grid-row: 2; display: flex; align-items: center; padding: 0 clamp(4px, 1vw, 12px); }
.alm__tag { padding: 8px 15px; border-radius: 999px; font: 700 12px/1 var(--f-texto); letter-spacing: .04em; color: #4a463f; background: #f2f1ee; }
.alm__nombre, .alm__texto, .alm__piecarta { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .65s cubic-bezier(.2, .7, .2, 1); }
.alm__carta.-in .alm__foto { transform: scale(1); }
.alm__carta.-in .alm__nombre { opacity: 1; transform: none; transition-delay: .12s; }
.alm__carta.-in .alm__texto { opacity: 1; transform: none; transition-delay: .2s; }
.alm__carta.-in .alm__piecarta { opacity: 1; transform: none; transition-delay: .3s; }

/* ── Pausa 2 · Facilitadores — GetLayers «cards-cascade» ────────────────
   Composición y movimiento de la fuente (MATERIAL/cards-cascade); piel de la plantilla. */
.pausa--cascada { padding: 0; background: #0b0907; }
.cas { position: relative; --acento: #1e1711; }
.cas__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: linear-gradient(155deg, #0b0907 0%, #17110c 42%, #2e1f13 78%, #3d2a19 100%); color: var(--blanco); user-select: none; -webkit-user-select: none; }
.cas__fondo { position: absolute; inset: -6%; background: url('../img/k/16x9/K9.webp') center / cover no-repeat; opacity: .2; filter: blur(22px) saturate(.8); pointer-events: none; }
.pausa--cascada .pausa__ante { color: rgba(255, 255, 255, .6); }
.pausa--cascada .pausa__texto { color: rgba(255, 255, 255, .78); }
.pausa--cascada :focus-visible { outline-color: var(--amarillo); }
.cas__titulo > span, .cas__escena, .cas__intro .pausa__ante, .cas__texto, .cas__intro .boton, .cas__riel { transition: opacity .7s ease, translate 1s var(--suave-firma); }
.js .cas:not(.entra) .cas__titulo > span:first-child { translate: -45.6vw 0; opacity: 0; }
.js .cas:not(.entra) .cas__titulo > span:last-child { translate: 23.5vw 0; opacity: 0; }
.js .cas:not(.entra) .cas__escena { translate: 0 80px; opacity: 0; }
.js .cas:not(.entra) :is(.cas__intro .pausa__ante, .cas__texto, .cas__intro .boton) { translate: 0 24px; opacity: 0; }
.js .cas:not(.entra) .cas__riel { opacity: 0; }
.cas.entra .cas__intro .pausa__ante { transition-delay: .1s; }
.cas.entra .cas__escena { transition-delay: .45s; }
.cas.entra .cas__texto { transition-delay: .75s; }
.cas.entra .cas__intro .boton { transition-delay: .9s; }
.cas__intro .boton { padding-left: 34px; padding-right: 34px; }
.cas.entra .cas__riel { transition-delay: 1.05s; }
.cas__escena { position: absolute; inset: 0; perspective: var(--persp, 1500px); perspective-origin: var(--vanishX, 50%) var(--vanish, 40%); }
.cas__mazo { position: absolute; left: var(--deckX, 50%); top: var(--deckY, 50%); width: 0; height: 0; transform-style: preserve-3d; }
.cas__carta { position: absolute; width: var(--cw, 380px); height: var(--ch, 440px); left: calc(var(--cw, 380px) / -2); top: calc(var(--ch, 440px) / -2); transform-style: preserve-3d; will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cas__cara { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: #1e1711;
  box-shadow: 0 2px 3px rgba(20, 24, 40, .10), 0 24px 44px -18px rgba(20, 24, 40, .40), inset 0 0 0 1px rgba(255, 255, 255, .06);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cas__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cas__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(14, 10, 7, .84) 0%, rgba(14, 10, 7, .36) 32%, rgba(14, 10, 7, 0) 58%), linear-gradient(to bottom, rgba(14, 10, 7, .34) 0%, rgba(14, 10, 7, 0) 22%); }
.cas__cara::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(160deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .20) 100%); opacity: var(--sheen, .5); mix-blend-mode: soft-light; }
.cas__cuerpo { position: absolute; inset: 0; z-index: 2; padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.cas__arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cas__idx { font: 700 11px/1 var(--f-texto); letter-spacing: .12em; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cas__tag { font: 700 10.5px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-align: right; }
.cas__dias { margin: 0 0 8px; font: 700 10.5px/1 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--amarillo); }
.cas__nombre { margin: 0; font: 400 clamp(24px, 2.6vw, 36px)/1 var(--f-display); letter-spacing: -0.03em; text-transform: uppercase; font-feature-settings: var(--juegos); text-shadow: 0 1px 20px rgba(0, 0, 0, .18); }
.cas__rol { margin: 10px 0 0; font: 400 13px/1.45 var(--f-texto); color: rgba(255, 255, 255, .78); max-width: 30ch; }
.cas__intro { position: absolute; left: clamp(24px, 6vw, 92px); top: 50%; transform: translateY(-50%); z-index: 5; width: min(40vw, 480px); display: flex; flex-direction: column; align-items: flex-start; }
.cas__titulo { font-size: clamp(44px, 6.2vw, 96px); margin: 18px 0 22px; }
.cas__texto { max-width: 34ch; margin: 0 0 30px; }
/* Riel fijo: número actual arriba, línea de alto constante y el total (9) abajo */
.cas__riel { position: absolute; right: clamp(20px, 3.4vw, 56px); top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 16px; font-family: var(--f-display); line-height: 1; }
.cas__actual { font-size: clamp(30px, 3.2vw, 44px); font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: center; }
.cas__total { font-size: clamp(16px, 1.4vw, 20px); color: rgba(255, 255, 255, .55); }
.cas__pista { position: relative; width: 22px; height: clamp(210px, 42vh, 430px); cursor: pointer; touch-action: none; }
.cas__pista::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: rgba(255, 255, 255, .28); }
.cas__pulgar { position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--amarillo); box-shadow: 0 0 0 4px rgba(250, 207, 120, .25); }
.cas__marca { position: absolute; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); padding: 0; background: transparent; cursor: pointer; }
.cas__marca::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .2s, transform .2s; }
.cas__marca:hover::before { background: var(--blanco); transform: translate(-50%, -50%) scale(1.3); }
.cas__marca[aria-current="true"]::before { opacity: 0; }
@media (max-width: 880px) {
  .cas__intro { top: clamp(84px, 13vh, 110px); left: 0; right: 0; width: auto; transform: none; align-items: center; text-align: center; padding: 0 24px; }
  .cas__intro .pausa__ante { display: none; }
  .cas__texto { display: none; }
  .cas__titulo { font-size: clamp(40px, 12vw, 72px); margin: 0 0 14px; }
  .cas__riel { right: clamp(10px, 3vw, 18px); top: 72%; }
  .cas__pista { height: clamp(150px, 30vh, 280px); }
}
@media (max-width: 620px) {
  .alm__cabeza, .alm { width: 92vw; }
  .alm__carta { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; gap: 13px; padding: 12px; border-radius: 20px; }
  .alm__media { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 10; min-height: 0; }
  .alm__cuerpo { grid-column: 1; grid-row: 2; padding: 2px 4px 0; }
  .alm__piecarta { grid-column: 1; grid-row: 3; padding: 0 4px; }
  .alm__texto { font-size: 15.5px; max-width: none; }
}
@media (max-width: 860px) {
  .alm__cabeza { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 900px) and (min-width: 621px) {
  .alm__cabeza, .alm { width: 86vw; }
  .alm__carta { min-height: clamp(280px, 42vh, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .alm__foto { transform: none !important; transition: none !important; }
  .alm__nombre, .alm__texto, .alm__piecarta { opacity: 1 !important; transform: none !important; transition: none !important; }
}