/* Érase un Hotel: el tráiler. Escenario sticky de 100lvh por racha de tramos (con la puerta),
   pistas de scroll de cada tramo, etiqueta de escena abajo a la izquierda, portada (hero)
   y #hotel, la frase que se ilumina con el scroll. Negro y blanco, sin acento. */

.walk-run { position: relative; z-index: 1; background: var(--negro, #000); overflow-x: clip; }

/* ---------- Escenario ---------- */
.stage {
  /* Filtro negro: velo (en .stage__shade) y desaturado. Medido en móvil emulado con la CPU x4: no cuesta fps
     ni tareas largas. Si algún móvil sufriera, se hornea en los fotogramas en lugar de filtrar aquí. */
  --stage-sat: 0.5;
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden;
  background: var(--negro, #000); isolation: isolate;
  perspective: max(760px, 70vw); perspective-origin: var(--door-x, 50%) 46%;
  filter: saturate(var(--stage-sat));
  transition: filter 0.6s var(--ease-out);
}
/* Sin morado: donde la decoración morada ocupa media pantalla (toldo y reloj de la fachada, paneles del
   pasillo, cortinas de la habitación), casi blanco y negro. */
.stage[data-scene="llegada"], .stage[data-scene="puerta"], .stage[data-scene="pasillo"] { --stage-sat: 0.32; }
.stage[data-scene="dentro"] { --stage-sat: 0.38; }
.stage__poster, .stage__poster img, .stage__canvas, .stage__still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.stage__poster { z-index: 0; transition: opacity 0.5s var(--ease-out) 0.25s; }
.stage__canvas { z-index: 1; opacity: 0; transition: opacity 0.45s var(--ease-out); }
.stage.is-drawn .stage__canvas { opacity: 1; }
.stage.is-drawn .stage__poster { opacity: 0; }
.stage__poster.is-hidden { opacity: 0; }
.stage__still { z-index: 1; opacity: 0; transition: opacity 0.9s var(--ease-out); }
.stage__still.is-on { opacity: 1; }

/* Velo negro (35 a 45 %), degradado arriba para la cabecera y abajo para la letra. */
.stage__shade {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 26%);
}
/* El velo plano (::before) y el degradado de abajo (::after) van aparte para poder aclararlos por escena
   (walk.js escribe data-scene en el escenario). El de arriba, para la cabecera, es igual en todas. */
.stage__shade::before, .stage__shade::after {
  content: ""; position: absolute; inset: 0;
  transition: opacity 0.6s var(--ease-out);
}
.stage__shade::before { background: var(--velo, rgb(0 0 0 / 0.4)); opacity: var(--velo-op, 1); }
.stage__shade::after { background: linear-gradient(to top, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0) 44%); opacity: var(--pie-op, 1); }
/* La puerta, a contraluz, se veía de noche: que se lea el cristal y la luz de la calle. (El rótulo con frase
   que hay encima del cristal va difuminado en los propios fotogramas: tools/tapar-rotulo.py.) */
/* En el empuje hacia el cristal, aún más claro (walk.js escribe --push de 0 a 1): la puerta no se pierde. */
.stage[data-scene="puerta"] { --velo-op: calc(0.3 - var(--push, 0) * 0.15); --pie-op: calc(0.55 - var(--push, 0) * 0.15); }
/* La recepción (mármol blanco) no debe quedar gris apagada. */
.stage[data-scene="recepcion"] { --velo-op: 0.75; }

/* ---------- La puerta ---------- */
.stage__veil { position: absolute; inset: 0; z-index: 2; background: var(--negro, #000); opacity: 0; pointer-events: none; }
/* Las dos hojas de la puerta de cristal del hotel: walk.js las coloca sobre el hueco real del último
   fotograma (left/top/width/height), las gira sobre su bisagra y las acerca mientras pasamos. */
.door {
  position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: 3;
  visibility: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.door canvas { width: 100%; height: 100%; display: block; }
.door--l { transform-origin: 0% 50%; }
.door--r { transform-origin: 100% 50%; }
.door::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: calc(var(--door, 0) * 0.95);
}
.door--l::after { background: linear-gradient(to left, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.35) 60%, rgb(0 0 0 / 0.2)); }
.door--r::after { background: linear-gradient(to right, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.35) 60%, rgb(0 0 0 / 0.2)); }
/* canto de la hoja: perfil negro con un filete de luz */
.door::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7px; z-index: 1;
  opacity: min(1, calc(var(--door, 0) * 5));
}
.door--l::before { right: 0; background: linear-gradient(to right, rgb(0 0 0 / 0.85) 0 4px, rgb(255 255 255 / 0.75) 4px 6px, rgb(0 0 0 / 0.6) 6px); }
.door--r::before { left: 0; background: linear-gradient(to left, rgb(0 0 0 / 0.85) 0 4px, rgb(255 255 255 / 0.75) 4px 6px, rgb(0 0 0 / 0.6) 6px); }
.stage.is-opening .door { visibility: visible; will-change: transform; }
/* La luz de dentro: blanca, sin color. */
.stage__glow {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background:
    radial-gradient(7% 40% at var(--door-x, 50%) var(--door-y, 52%), rgb(255 255 255 / 0.85), transparent 72%),
    radial-gradient(24% 50% at var(--door-x, 50%) var(--door-y, 53%), rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.18) 42%, transparent 72%),
    radial-gradient(80% 90% at var(--door-x, 50%) var(--door-y, 55%), rgb(255 255 255 / 0.12), transparent 70%);
}
/* Al llegar a la puerta se adivina la luz de dentro; al abrirse, entra y se apaga al pasar. */
.stage .stage__glow { opacity: calc(var(--push, 0) * var(--push, 0) * var(--push, 0) * 0.26); }
.stage.is-opening .stage__glow { opacity: min(0.85, calc(0.26 + sin(var(--door, 0) * 3.1416) * 0.9 - var(--door, 0) * 0.26)); }

/* ---------- Pistas de scroll ---------- */
.walk-tracks { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100lvh; }
.walk { position: relative; height: calc(var(--len, 180) * 1vh); height: calc(var(--len, 180) * 1lvh); }
/* Cada tramo es solo una pista de scroll: su caja no recoge clics (el tramo siguiente nunca tapa
   lo que haya debajo). Lo que está encendido vuelve a recogerlos. */
.walk:not(.walk--hero) { pointer-events: none; }
/* El último tramo de cada racha lleva 50lvh de más: su fotograma final llega justo cuando el escenario se suelta. */
.walk-tracks > .walk:last-child { height: calc((var(--len, 180) + 50) * 1vh); height: calc((var(--len, 180) + 50) * 1lvh); }
.walk-tracks > .walk:last-child .walk__track { height: calc((var(--len, 180) - 50) * 1lvh + 100svh); }
/* La caja de la etiqueta se queda fija durante todo el tramo: la pista sobresale 100svh. */
.walk__track { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--len, 180) * 1lvh + 100svh); pointer-events: none; }
.walk__ui {
  position: sticky; top: 0; height: 100vh; height: 100svh; pointer-events: none; overflow: clip;
  /* borde izquierdo común con el contenedor de las secciones: en pantallas anchas no salta */
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
}

/* ---------- Lo que se enciende con el tramo («plates»: data-in / data-out) ---------- */
.plate {
  position: absolute; opacity: 0; pointer-events: none;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.45s var(--ease-out), transform 0.9s var(--ease-out);
}
.plate.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.7s var(--ease-out), transform 1s var(--ease-out); }
/* Sin JS (o si el arranque falla): todo visible. */
.no-js .plate, .walk-off .plate { opacity: 1; transform: none; pointer-events: auto; }
.no-js .walk__track, .walk-off .walk__track { height: 100%; }

/* Etiqueta de escena: pequeña, abajo a la izquierda. Nada de tarjetas encima del vídeo. */
.scene-tag {
  left: var(--edge, var(--gutter)); bottom: clamp(26px, 5.6vh, 52px);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-text); font-size: var(--t-sm); font-weight: 500; line-height: 1.2; letter-spacing: 0.01em;
  color: rgb(255 255 255 / 0.9);
  transform: translate3d(0, 10px, 0);
}
.scene-tag::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.scene-tag.is-on, .no-js .scene-tag, .walk-off .scene-tag { pointer-events: none; }

/* ---------- Portada (#llegada), al estilo Only YOU: centrada, recta, blanca ---------- */
/* Al bajar, la portada sube con la página y se desvanece bajo la cabecera: nada del hero se pinta debajo
   del logo ni del menú, por rápido que vaya el dedo. walk.js escribe --hero-shift (lo que la caja ya ha
   subido) para que el borde de la máscara se quede quieto en la pantalla. */
.walk--hero .walk__ui--flow {
  --hm-a: var(--header-h); --hm-b: calc(var(--header-h) + 40px);
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--hm-a) + var(--hero-shift, 0px)), #000 calc(var(--hm-b) + var(--hero-shift, 0px)));
  mask-image: linear-gradient(to bottom, transparent calc(var(--hm-a) + var(--hero-shift, 0px)), #000 calc(var(--hm-b) + var(--hero-shift, 0px)));
}
.hero {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; text-align: center;
  padding: calc(var(--header-h) + 24px) var(--edge, var(--gutter)) clamp(18px, 3.4vh, 36px);
  color: var(--blanco, #fff);
}
.hero__copy { align-self: end; display: grid; justify-items: center; gap: clamp(14px, 2.2vh, 24px); margin-bottom: clamp(22px, 4.2vh, 44px); }
/* Entrada: las dos líneas del titular, una detrás de otra; luego la frase y, al final, la reserva. */
.hero__l1, .hero__l2, .hero__line, .hero__book { transition: opacity 0.9s var(--ease-out), transform 1.2s var(--ease-out); }
.hero__l2 { transition-delay: 0.12s; }
.hero__line { transition-delay: 0.28s; }
.hero__book { transition-delay: 0.5s; }
.fonts-pending .hero__l1, .fonts-pending .hero__l2, .fonts-pending .hero__line, .fonts-pending .hero__book { opacity: 0.01; transform: translateY(14px); }
.hero__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--t-hero, clamp(3.2rem, 9vw, 8.5rem)); line-height: 0.95; letter-spacing: var(--tr-hero, -0.035em);
  text-shadow: 0 2px 40px rgb(0 0 0 / 0.35);
}
.hero__l1, .hero__l2 { display: block; }
.plate.plate--hero { position: absolute; inset: 0; transform: translate3d(0, -18px, 0); transition: opacity 0.5s var(--ease-out), transform 0.9s var(--ease-out); }
.plate.plate--hero.is-on { transform: none; pointer-events: none; }
.plate--hero .hero__book, .plate--hero .hero__foot { pointer-events: auto; }
.plate--hero:not(.is-on) .hero__book, .plate--hero:not(.is-on) .hero__foot { pointer-events: none; }
/* El Bernabéu, remarcado: una línea sola, blanca y grande, justo debajo del titular. */
.hero__line {
  font-family: var(--f-text); font-weight: 500; font-size: var(--t-xl); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--blanco, #fff); max-width: 48rem; text-wrap: balance; text-shadow: 0 1px 18px rgb(0 0 0 / 0.45);
}
/* Aquí monta el módulo reserva su barra blanca (escritorio, 105 px con la línea de precio) o
   su botón (móvil). El alto se reserva desde el principio para que el titular no se mueva. */
.hero__book {
  width: 100%; max-width: 1000px; min-height: 105px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; align-content: flex-start; gap: 12px 20px;
  pointer-events: auto;
}
.hero__perk { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--t-sm); color: var(--gris, rgb(255 255 255 / 0.66)); }
.hero__foot {
  position: relative; width: 100%; max-width: var(--max);
  display: flex; justify-content: center; align-items: center;
  margin-top: clamp(10px, 2.4vh, 24px); font-size: var(--t-xs);
}
.plate.plate--cue { position: relative; transform: none; }
.cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: rgb(255 255 255 / 0.82); letter-spacing: 0.02em; }
.cue__line { position: relative; order: 2; width: 1px; height: 30px; overflow: hidden; background: rgb(255 255 255 / 0.28); }
.cue__line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--blanco, #fff); animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { to { top: 100%; } }
.cue__txt--touch { display: none; }
.is-touch .cue__txt--touch { display: inline; }
.is-touch .cue__txt--wheel { display: none; }

/* ---------- #hotel: negro puro y una frase que se ilumina palabra a palabra ---------- */
/* walk.js no la mueve: frase.js escribe --p (0..1) según el scroll; cada palabra (--i de --n) pasa de
   blanco al 18 % a blanco al 100 % con un borde suave de dos palabras. Sin JS, entera. */
.frase {
  --p: 1;
  position: relative; z-index: var(--z-section, 20);
  height: 240vh; height: 240lvh;
  background: var(--negro, #000); color: var(--blanco, #fff);
}
.frase > .ola { --ola-fill: var(--negro, #000); color: var(--negro, #000); }
.frase__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; align-items: center;
  padding: calc(var(--header-h) + 20px) var(--gutter) clamp(28px, 6vh, 64px);
}
.frase__in { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; }
.frase__text {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-5xl, clamp(2.8rem, 7.2vw, 5.5625rem)); line-height: 1.02; letter-spacing: var(--tr-head, -0.03em);
  max-width: 15.5em; text-wrap: pretty;
}
.frase .w {
  --k: clamp(0, calc((var(--p) * (var(--n) + 2) - var(--i)) / 2), 1);
  color: rgb(255 255 255 / calc(0.18 + 0.82 * var(--k)));
}
.frase__meta { display: grid; gap: var(--s-5, 1.5rem); margin-top: clamp(2.25rem, 7vh, 4.75rem); font-size: var(--t-sm); line-height: 1.35; color: var(--gris, rgb(255 255 255 / 0.66)); }
.frase__ratings { display: flex; flex-wrap: wrap; row-gap: 10px; }
/* Valoraciones en fila y con filetes finos entre medias */
.frase__ratings li { display: inline-flex; align-items: baseline; gap: 8px; padding: 2px 20px; border-left: 1px solid var(--linea, rgb(255 255 255 / 0.16)); }
.frase__ratings li:first-child { padding-left: 0; border-left: 0; }
/* Los tres datos del hotel: cápsulas grafito con su icono en un círculo con brillo. */
.frase__facts { display: flex; flex-wrap: wrap; gap: 10px 12px; color: var(--blanco, #fff); font-weight: 500; font-size: var(--t-md); }
.frase__facts li {
  display: inline-flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; white-space: nowrap;
  border-radius: var(--r-pill, 999px); background: var(--grafito, #151515); border: 1px solid var(--linea-suave, rgb(255 255 255 / 0.09));
}
.frase__ico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #3a3a3a, #161616 70%);
  border: 1px solid rgb(255 255 255 / 0.16); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 6px 16px -8px rgb(0 0 0 / 0.9);
}
.frase__ico .ico { width: 20px; height: 20px; stroke-width: 1.4; }
/* Las valoraciones son el mejor argumento de confianza: un escalón intermedio entre la frase y la letra pequeña. */
.frase__ratings li { align-items: baseline; gap: 10px; }
.frase__score { font-family: var(--f-display); font-weight: 700; font-size: var(--t-2xl); line-height: 1; letter-spacing: -0.02em; color: var(--blanco, #fff); font-variant-numeric: lining-nums; }
.frase__when { font-size: var(--t-xs); }
/* La nota del presentador, abajo a la derecha: no tapa la frase. En el móvil va debajo, en el flujo. */
html.notas .nota--frase { top: auto; bottom: 0; right: 0; }
@media (max-width: 760px) { html.notas .nota--frase { position: relative; bottom: auto; margin-top: 1.25rem; max-width: none; } }

/* ---------- Escritorio estrecho ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .frase__text { font-size: clamp(2.6rem, 6.6vw, 4.4rem); }
}

/* ---------- Pantallas bajas en horizontal (portátil pequeño): todo más compacto ---------- */
@media (max-height: 640px) and (min-width: 761px) {
  .hero { padding-top: calc(var(--header-h) + 8px); padding-bottom: 14px; }
  .hero__title { font-size: clamp(2.6rem, 13vh, 5.2rem); }
  .hero__line { font-size: var(--t-lg); }
  .hero__copy { gap: 10px; margin-bottom: 18px; }
  .frase__text { font-size: clamp(2.2rem, 9.4vh, 4rem); }
  .frase__meta { margin-top: 1.25rem; gap: 8px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .scene-tag { left: 16px; bottom: calc(var(--bar-h) + 22px + env(safe-area-inset-bottom)); font-size: var(--t-xs); }
  .scene-tag::before { width: 20px; }
  /* El titular arriba, sobre el cielo; el botón, sobre la fachada; abajo, el «desliza». */
  .hero {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    padding: calc(var(--header-h) + 16px) 16px calc(var(--bar-h) + 14px + env(safe-area-inset-bottom));
  }
  .hero__copy { align-self: start; margin: clamp(8px, 4svh, 40px) 0 0; gap: 14px; }
  .hero__title { font-size: clamp(2.6rem, 11.4vw, 3.4rem); line-height: 0.96; text-wrap: balance; }
  .walk--hero .walk__ui--flow { --hm-b: calc(var(--header-h) + 32px); }
  .hero__line { font-size: var(--t-lg); max-width: 21rem; text-shadow: 0 1px 14px rgb(0 0 0 / 0.6); }
  .hero__book { grid-row: 3; min-height: 56px; }
  .hero__foot { grid-row: 4; margin-top: 14px; }
  .hero__foot .cue { flex-direction: row; gap: 10px; }
  .hero__foot .cue__line { order: 0; height: 26px; }
  .frase { height: 230vh; height: 230lvh; }
  .frase__pin { padding: calc(var(--header-h) + 12px) 16px calc(var(--bar-h) + 24px + env(safe-area-inset-bottom)); }
  .frase__text { font-size: clamp(2.4rem, 11vw, 2.8rem); line-height: 1.04; }
  .frase__meta { margin-top: 1.75rem; gap: 16px; font-size: var(--t-xs); }
  /* Apilados: en fila se partían a media palabra («Recepción 24 / horas»). */
  .frase__facts { display: grid; justify-items: start; gap: 8px; font-size: var(--t-sm); }
  .frase__facts li { padding: 5px 16px 5px 5px; gap: 10px; }
  .frase__ico { width: 32px; height: 32px; }
  .frase__ico .ico { width: 17px; height: 17px; }
  .frase__ratings { display: grid; gap: 8px; }
  .frase__ratings li { padding-left: 0; border-left: 0; }
  .frase__score { font-size: var(--t-xl); }
}

/* ---------- Teléfono en horizontal: cabecera compacta y barra abajo (components.css) ---------- */
@media (max-height: 500px) and (pointer: coarse) {
  .scene-tag { left: var(--edge); bottom: calc(var(--bar-h) + 18px + env(safe-area-inset-bottom)); }
  .walk--hero .walk__ui--flow { --hm-a: calc(var(--header-h) - 14px); --hm-b: calc(var(--header-h) + 2px); }
  .hero {
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: calc(var(--header-h) + 6px) var(--edge) calc(var(--bar-h) + 30px + env(safe-area-inset-bottom));
  }
  .hero__copy { align-self: start; margin: 0; gap: 8px; }
  .hero__title { font-size: clamp(1.9rem, 10.5vh, 2.6rem); }
  .hero__line { font-size: var(--t-md); }
  .hero__book { grid-row: 3; min-height: 0; }
  /* sin «desliza»: chocaría con el titular centrado */
  .hero__foot { display: none; }
  .frase__pin { padding: calc(var(--header-h) + 8px) var(--gutter) calc(var(--bar-h) + 14px + env(safe-area-inset-bottom)); }
  .frase__text { font-size: clamp(1.7rem, 9.5vh, 2.3rem); }
  .frase__meta { margin-top: 12px; gap: 6px; font-size: var(--t-xs); }
  /* En fila, para que quepa con su fecha (las valoraciones van siempre con fuente y fecha). */
  .frase__facts { display: flex; gap: 8px; font-size: var(--t-xs); }
  .frase__facts li { padding: 3px 12px 3px 3px; gap: 8px; }
  .frase__ico { width: 26px; height: 26px; }
  .frase__ico .ico { width: 14px; height: 14px; }
  .frase__score { font-size: var(--t-lg); }
  .frase__when { font-size: 0.75rem; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .door, .stage__glow, .stage__veil { display: none; }
  .cue__line::after { animation: none; top: 30%; }
  /* sin desplazamientos: lo que se enciende solo aparece con un fundido */
  .plate, .plate.plate--hero { transform: none !important; transition: opacity 0.4s linear; }
  .plate.is-on { transition: opacity 0.5s linear; }
  .hero__l1, .hero__l2, .hero__line, .hero__book { transform: none !important; transition: opacity 0.6s linear; }
  /* la frase, entera desde el principio */
  .frase .w { color: var(--blanco, #fff); }
}