/* TR33 · portada (index). Solo disposición propia de la página; todo lo demás viene de css/site.css.
   Secciones: 1 hero + intro · 2 declaración · 3 cabecera de la torre · 4 imagen alta fija
              5 capítulos (panel de color que se desvanece sobre la foto fija) */

/* el .h1 de la portada mide 60 px desde 768 (la etiqueta h1 sigue la escala 32 / 48 / 60) */
@media (min-width: 768px) { .page-home h2.h1 { font-size: var(--fs-h1-lg); } }
.page-home h2.h1 { margin: 0 auto 2rem; }
.home-br-md, .home-br-xs, .home-br-lg { display: none; }
@media (min-width: 1200px) { .home-br-lg { display: block; } }
@media (min-width: 768px) { .home-br-md { display: block; } }
@media (max-width: 575.98px) { .home-br-xs { display: block; } .home-hero__dot { display: none; } }

/* 1. HERO ----------------------------------------------------------------- */
.home-hero {
  position: relative; overflow: hidden;
  height: 100vh; height: 100dvh;
  background: var(--c-paper); color: var(--c-on-dark); text-align: center;
  transition: all var(--t-hero);
}
.home-hero__film {
  position: relative; z-index: 1; display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
}
/* último fotograma: solo si la película no puede verse (fallo de carga o movimiento reducido). No está en el HTML:
   js/index.js lo inserta y pone .is-static solo cuando hace falta (index-05) */
.home-hero__still {
  position: absolute; inset: 0; z-index: 1; display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 55% 45%;
  visibility: hidden;
}
.home-hero.is-static .home-hero__still { visibility: visible; }
.home-hero.is-static .home-hero__film { visibility: hidden; }

/* velo plano del 40 % y titular: llegan juntos al terminar la intro */
.home-hero__veil {
  position: absolute; inset: 0; z-index: 2;
  background: var(--overlay-hero-home);
  opacity: 0; transition: opacity var(--t-hero);
}
.home-hero__veil.show { opacity: 1; }
.home-hero__title { position: absolute; top: 50%; left: 0; right: 0; padding: 0 20px; transform: translateY(-50%); }
.home-hero__title h1 { margin: 0; color: var(--c-on-dark); letter-spacing: calc(.72px + var(--ls-fix-upper)); }
/* teléfonos: la primera línea del H1 real mide 361 px a 32 px; el cuerpo cede hasta 1,2 px para que quepa
   entre márgenes de 16 px y el titular quede en tres líneas (a 32 px serían cuatro, con una palabra suelta) */
@media (max-width: 767.98px) {
  .home-hero__title { padding: 0 16px; }
  .home-hero__title h1 { font-size: min(var(--fs-h1), 7.9vw); }
}
/* 619: una línea de 75 px con translateY(-40px) = centro óptico 2.5 px sobre el centro; aquí son dos líneas */
@media (min-width: 768px) { .home-hero__title { transform: translateY(calc(-50% - 2.5px)); } }

/* sombra radial muy suave detrás del logo grande de la intro (el logo blanco pasa 1.2 s sobre la fachada clara
   antes de que llegue el velo); se va con la intro, al mismo tiempo que entra el velo */
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse min(46vw, 470px) min(30vw, 290px) at 50% 50%, rgba(0,0,0,.44) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 100%);
  opacity: 1; transition: opacity var(--t-hero);
}
.home-hero.intro-done::before { opacity: 0; }

/* crédito inferior: visible desde el primer cuadro, sin animación, por encima del velo */
.home-hero__credit {
  position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3;
  margin: 0; padding: 0 30px;
  font-size: .9375rem; font-weight: var(--fw-small); line-height: 1.5;
  letter-spacing: calc(1.4px + var(--ls-fix-upper)); text-transform: uppercase;
  color: var(--c-on-dark);
}
@media (min-width: 768px) { .home-hero__credit { bottom: 50px; } }

/* primer gesto en móvil: la película se pliega a una franja bajo la cabecera sólida */
@media (max-width: 767.98px) {
  .home-hero.is-compact { height: 75vw; min-height: 75vw; transform: translateY(80px); }
  .home-hero.is-compact .home-hero__veil,
  .home-hero.is-compact .home-hero__credit { animation: fadeOut .125s forwards; }
}

/* 2. DECLARACIÓN (15-oct, Raúl: «nobody reads»): pregunta corta + tres puntos con ícono, banda compacta ---------- */
.home-statement { position: relative; z-index: 1; padding: 64px 0 72px; background: var(--c-stone); color: var(--c-ink); text-align: center;
  --icon-color: var(--c-ink); --ip-label-color: var(--c-ink); }
.home-statement__text { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.home-statement__pre { margin: 0 0 10px; font-family: var(--font-sans); font-size-adjust: var(--fsa-sans); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink); opacity: .78; text-wrap: balance; }
.home-statement__q { margin: 0 auto 44px; max-width: 18em; font-size: 2rem; line-height: 1.15; font-weight: var(--fw-display); text-wrap: balance; }
@media (min-width: 768px) {
  .home-statement { padding: 96px 0 104px; }
  .home-statement__q { font-size: 2.75rem; margin-bottom: 56px; }
}
@media (min-width: 1200px) { .home-statement__q { font-size: 3.25rem; } }
.home-statement__points { max-width: 1040px; margin: 0 auto; }

/* 3. CABECERA DE LA TORRE ------------------------------------------------- */
.home-tower { position: relative; z-index: 1; padding: 100px 40px 75px; background: var(--c-paper); text-align: center; }
.home-tower h2 { max-width: 850px; color: var(--c-accent); }
@media (max-width: 991.98px) { .home-tower h2 { text-wrap: balance; } }
.home-tower p { max-width: 990px; margin: 0 auto 3rem; }
@media (min-width: 768px) { .home-tower { padding: 200px 90px 150px; } }
@media (min-width: 992px) { .home-tower p { margin-bottom: 5rem; } }

/* 4. IMAGEN ALTA: baja con el scroll hasta que su borde inferior toca el de la pantalla y ahí se queda;
      el capítulo siguiente sube por encima. js/index.js calcula --tower-top = alto de pantalla − alto de la sección */
.home-curtain { position: relative; }
.home-tower-image { position: relative; z-index: 1; padding: 0 20px 75px; background: var(--c-paper); }
.home-tower-image.is-armed { position: -webkit-sticky; position: sticky; top: var(--tower-top, 0px); }
.home-tower-image img, .home-tower-image video {
  display: block; width: 1500px; max-width: 100%; height: auto; margin: 0 auto 20px;
  aspect-ratio: 6 / 9; object-fit: cover; object-position: var(--pos, 50% 41%);
}
@media (min-width: 768px) {
  .home-tower-image { padding: 0 90px 150px; }
  .home-tower-image img, .home-tower-image video { aspect-ratio: 1500 / 1590; }
}

/* 5. CAPÍTULOS ------------------------------------------------------------ */
/* 400vh: panel de color de 300vh encima (z 2) y escenario de foto de 100vh fijo detrás (z 1).
   El escenario va en el flujo justo después del panel, subido 300vh, y se pega arriba (sticky) durante los
   primeros 300vh del capítulo; en los últimos 100vh se va con el scroll. La opacidad del panel la pone js/index.js. */
.reveal { position: relative; z-index: 2; min-height: 400vh; background: var(--c-paper); --band: var(--c-paper); }
.reveal--sand { --band: var(--c-sand); }
.reveal__panel { position: relative; z-index: 2; min-height: 300vh; background: var(--band); text-align: center; }
.reveal__content {
  position: absolute; top: 0; left: 0; right: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
}
.reveal__content > div { width: 100%; max-width: 1012px; margin: 0 auto; padding: 0 20px; }
.reveal__content h2 { color: var(--c-accent); }
.reveal--sand .reveal__content h2 { color: var(--c-ink); }
.reveal__content p { margin: 0 0 3rem; }
@media (min-width: 992px) { .reveal__content p { margin-bottom: 5rem; } }

.reveal__stage {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 1;
  margin-top: -300vh;
  height: 100vh; height: 100dvh;
}
/* las fotos de TR33 son claras abajo: degradado mínimo para que la leyenda y los puntos blancos se lean */
@media (min-width: 768px) {
  .reveal__stage:not([data-captions="no"])::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 170px; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.36), rgba(0,0,0,.16) 45%, rgba(0,0,0,0));
  }
  .reveal__stage .slider__caption, .reveal__stage .slider__dots { z-index: 2; }
}
/* encuadre por imagen: --pos en escritorio, --pos-m en el teléfono (4:5) */
/* foto aún sin pedir (data-src, js/index.js): solo el tono de espera, sin el texto alternativo pintado encima */
.reveal__stage img[data-src] { color: transparent; }
.reveal__stage.slider img { object-position: var(--pos, 50% 50%); }

/* móvil (index-01): capítulos de 320vh con 220vh de color; la foto pasa a 4:5 (≈390×487) centrada en una pantalla
   del color del panel, con la leyenda y los puntos en tinta debajo, en el flujo */
@media (max-width: 767.98px) {
  .reveal { min-height: 320vh; }
  .reveal__panel { min-height: 220vh; }
  .reveal__stage { display: flex; flex-direction: column; justify-content: center; margin-top: -220vh; }
  .reveal__stage .slider__viewport { flex: none; width: 100%; }
  .reveal__stage.slider img { aspect-ratio: 4 / 5; width: 100%; height: auto; max-height: 70vh; max-height: 70dvh; object-fit: cover; object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .reveal__stage .slider__caption, .reveal__stage .slider__dots { position: static; transform: none; }
  /* la leyenda reserva su línea también cuando la foto no lleva leyenda: los puntos y la foto no saltan */
  .reveal__stage .slider__caption, .reveal__stage .slider__caption:empty { display: block; box-sizing: border-box; min-height: 28px; padding: 16px 30px 0; }

  /* capítulo final: apilado y estático */
  .reveal--last { min-height: 0; }
  .reveal--last .reveal__panel { min-height: 0; opacity: 1 !important; pointer-events: auto !important; }
  .reveal--last .reveal__content { position: relative; height: auto; padding: 120px 0; }
  .reveal--last .reveal__stage { position: relative; display: block; margin-top: 0; height: auto; }
}

/* capítulo final: el atardecer es un video que arranca al descubrirse (js/index.js) */
.reveal__video { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 45% 0%; background: var(--band); }
@media (min-width: 768px) {
  .reveal__video { height: var(--slider-h, 100vh); aspect-ratio: auto; }
  @supports (height: 100dvh) { .reveal__video { height: var(--slider-h, 100dvh); } }
}

/* index-03: el atardecer baja de saturación para quedar dentro de la paleta (el archivo no se toca; el póster
   recibe el mismo filtro) */
.reveal__video { filter: saturate(.78) sepia(.08); }

/* index-04: salida discreta bajo el botón del último capítulo. Enlace de texto de F09 (filete al 35 % en reposo que se
   dibuja entero al pasar o enfocar); zona de toque de 44 px con la línea a 2 px del texto */
.reveal__content .home-more { margin: 28px 0 0; font-size: 1rem; line-height: 1.5; }
.home-more a {
  display: inline-block; padding: 10px 0; color: var(--c-accent-text); text-decoration: none;
  background:
    linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat,
    linear-gradient(rgba(101,109,94,.35), rgba(101,109,94,.35)) 0 calc(100% - 8px) / 100% 1px no-repeat;
  transition: background-size .5s var(--ease-fine), color .3s ease;
}
.home-more a:hover, .home-more a:focus-visible { color: var(--c-accent-dark); text-decoration: none; background-size: 100% 1px, 100% 1px; }

/* 15-oct: en pantallas verticales la película es la versión vertical (las tres torres abajo, cielo arriba): se centra
   en las torres y el titular sube al cielo para no taparlas */
@media (max-aspect-ratio: 4/5) {
  .home-hero__film, .home-hero__still { object-position: 52% 50%; }
  .home-hero__title { top: 34%; }
}