/* The Long Afternoon — Vela Club · style.css (spec project, The Pitch Lab)
   Editorial light: off-white, tinta negra, tipografía geométrica fina (Jost ≈ Futura PT). */
:root {
  --bg: #F4F1EC;
  --paper: #FAF8F4;
  --ink: #141414;
  --muted: #6E6960;
  --line: rgba(20, 20, 20, .14);
  --ph: #E4DFD6;
  --acc: #8A8174;
  --g: clamp(20px, 4.2vw, 64px);
  --gap: 24px;
  --font: 'Jost', 'Futura PT', Futura, 'Century Gothic', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 300; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; font-weight: 300; }
p { text-wrap: pretty; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, video { display: block; }
a { color: inherit; }
.loading, .error { padding: 96px var(--g); color: var(--muted); }

/* Tipografía */
.lbl { font-family: var(--font); font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.lbl.muted { color: var(--muted); }
.it { font-style: italic; }
.acc { color: var(--acc); }
.h-display { font-weight: 300; text-transform: uppercase; letter-spacing: .04em; line-height: 1.02; text-wrap: balance; }
.h-xl { font-size: clamp(52px, 6.4vw, 96px); }
.h-l  { font-size: clamp(34px, 4vw, 58px); }
.h-m  { font-size: clamp(22px, 2.2vw, 32px); }
.lead { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.35; font-weight: 300; }
.body-l, .body-l p { font-size: 18px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }

/* HUD fijo: arriba nombre · versión · índice; abajo sección · página */
.hud, .hud-foot { position: fixed; left: 0; right: 0; z-index: 50; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.hud { top: 0; }
.hud-bar { height: 1px; background: rgba(255,255,255,.28); }
.hud-bar-fill { height: 100%; background: #fff; }
.hud-meta, .hud-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px var(--g); font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; }
.hud-version { text-align: center; }
.hud-version[hidden] { visibility: hidden; display: block; }
.hud-ix { justify-self: end; pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 32px; margin: -8px 0; text-decoration: none; color: #fff; }
.hud-ix span { border-bottom: 1px solid transparent; transition: border-color .3s; }
.hud-ix:hover span, .hud-ix:focus-visible span { border-color: currentColor; }
.hud-ix:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.hud-foot { bottom: 0; grid-template-columns: 1fr auto; padding-bottom: 18px; }
.hud-count { text-align: right; }
.on-hero .hud-name, .on-hero .hud-left { visibility: hidden; }

/* Página: cada pantalla ocupa exactamente 100vh (las escenas del guion mantienen el scroll largo) */
.pg { position: relative; min-height: 100vh; padding: 96px var(--g) 72px; display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 901px) {
  .pg:not(.pg-scene):not(.pg-collage-stack) { height: 100vh; min-height: 620px; overflow: hidden; }
  .pg-spread, .pg-index { padding: 84px var(--g) 64px; }
}

/* Fila justificada: cada plano a su proporción real, todos a la misma altura, sin recorte.
   El ancho se limita con --h (altura máxima de la fila) × --sum (suma de proporciones). */
.jrow { display: flex; gap: 10px; align-items: flex-start; width: min(100%, calc(var(--h, 40vh) * var(--sum) + 10px * 3)); }
.jrow > .shot { flex: var(--ar, 1.778) 1 0%; min-width: 0; height: auto; aspect-ratio: var(--ar, 1.778); }
.intro, .wave-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.intro > :first-child, .wave-head > :first-child { grid-column: span 5; }
.intro > :nth-child(2), .wave-head > :nth-child(2) { grid-column: 7 / span 6; }
.intro > :nth-child(3) { grid-column: 1 / -1; }

/* Plano */
.shot { position: relative; overflow: hidden; background: var(--ph); width: 100%; height: 100%; }
.shot video, .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-label { position: absolute; left: 16px; top: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sub { position: absolute; left: 0; right: 0; bottom: 32px; display: flex; justify-content: center; padding: 0 16px; }
.sub span { padding: 6px 14px; background: rgba(250,248,244,.92); color: var(--ink); font-size: 18px; font-weight: 400; text-align: center; }

/* 00 Portada — hero a sangre completa */
.pg-cover { height: 100vh; min-height: 640px; padding: 64px var(--g) 92px; justify-content: space-between; gap: 0; overflow: hidden; color: #FAF8F4; background: #111; }
.pg-cover > .shot.bleed { position: absolute; inset: 0; }
.pg-cover::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.34) 0, rgba(0,0,0,0) 24%, rgba(0,0,0,.08) 55%, rgba(0,0,0,.5) 100%); }
.pg-cover > :not(.shot):not(.folio) { position: relative; z-index: 2; }
.pg-cover .folio { z-index: 3; mix-blend-mode: normal; color: #FAF8F4; }
.pg-cover .lbl { color: #FAF8F4; }
.cv-head { display: flex; justify-content: space-between; }
.cv-center { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cover-title { font-weight: 200; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(34px, 8.4vw, 150px); line-height: .95; white-space: nowrap; text-align: center; }
.pg-cover .lk-name { font-size: clamp(16px, 1.5vw, 24px); }
.pg-cover .credits { border-top-color: rgba(250,248,244,.35); }
.pg-cover .cr .lbl { color: rgba(250,248,244,.7); }
.credits { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); padding-top: 18px; border-top: 1px solid var(--line); }
.credits.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr { display: flex; flex-direction: column; gap: 4px; }
.cr .lbl { font-size: 10px; color: var(--muted); }
.cr-name { font-size: 19px; }

/* Índice */
.pg-index { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-content: center; }
.ix-head { grid-column: span 4; display: flex; flex-direction: column; gap: 20px; align-self: start; }
.ix-list { grid-column: 6 / -1; }
.ix-row { border-top: 1px solid var(--line); }
.ix-row:last-child { border-bottom: 1px solid var(--line); }
.ix-link { display: grid; grid-template-columns: 56px auto 1fr auto; align-items: baseline; gap: 20px; padding: clamp(10px, 1.6vh, 17px) 0; text-decoration: none; transition: padding-left .4s ease, color .4s ease; }
a.ix-link:hover, a.ix-link:focus-visible { padding-left: 14px; color: var(--acc); outline: none; }
.ix-no { font-size: 12px; font-weight: 400; letter-spacing: .12em; color: var(--muted); }
.ix-title { font-weight: 300; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.1; }
.ix-tag { color: var(--muted); font-size: 16px; text-align: right; }
.ix-state { font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); min-width: 110px; text-align: right; }
.is-soon { opacity: .45; }


/* Índice: fondo full bleed al hacer hover */
.pg-index { overflow: hidden; transition: color .45s ease; }
.pg-index > :not(.ix-bg) { position: relative; z-index: 1; }
.ix-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ix-bgi { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform 1.2s ease; }
.ix-bgi.on { opacity: 1; transform: none; }
.ix-bg::after { content: ''; position: absolute; inset: 0; background: rgba(10,10,10,.34); opacity: 0; transition: opacity .6s ease; }
.pg-index.has-bg .ix-bg::after { opacity: 1; }
.pg-index.has-bg { color: #FAF8F4; }
.pg-index.has-bg .lbl, .pg-index.has-bg .ix-title { color: #FAF8F4; }
.pg-index.has-bg .acc, .pg-index.has-bg .ix-tag, .pg-index.has-bg .ix-no, .pg-index.has-bg .ix-state { color: rgba(250,248,244,.78); }
.pg-index.has-bg .ix-row { border-color: rgba(250,248,244,.3); }
.pg-index.has-bg a.ix-link:hover, .pg-index.has-bg a.ix-link:focus-visible { color: #FAF8F4; }
.pg-index .lbl, .pg-index .acc, .ix-title, .ix-tag, .ix-no, .ix-state, .ix-row { transition: color .45s ease, border-color .45s ease; }
.pg-index.has-bg .is-soon { opacity: .6; }


/* Lockup and spaced claim */
.lockup { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lk-name { font-weight: 400; font-size: clamp(18px, 1.9vw, 30px); letter-spacing: .34em; text-transform: uppercase; padding-left: .34em; }
.lk-sub { font-weight: 300; font-size: clamp(11px, .95vw, 15px); letter-spacing: .02em; }
.lockup.on-img { position: absolute; z-index: 2; left: 0; right: 0; bottom: 7%; color: #FAF8F4; }
.claim { font-weight: 300; font-size: 11px; letter-spacing: .5em; text-transform: uppercase; text-align: center; margin: 0; }
.sc-top { align-items: baseline; }
.sc-claim { color: #FAF8F4; }

/* Portada de sección (full bleed) */
.pg-seccover { display: block; padding: 0; height: 100vh; min-height: 640px; overflow: hidden; color: #FAF8F4; }
.pg-seccover > .shot.bleed { position: absolute; inset: 0; }
.pg-seccover::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.28) 0, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%); }
.sc-top { position: absolute; z-index: 2; top: 64px; left: var(--g); right: var(--g); display: flex; justify-content: space-between; }
.sc-top .lbl, .pg-seccover .lbl { color: #FAF8F4; }
.sc-bottom { position: absolute; z-index: 2; left: var(--g); right: var(--g); bottom: 56px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.sc-name { display: flex; flex-direction: column; gap: 12px; }
.sc-no { font-weight: 200; font-size: clamp(22px, 2vw, 30px); letter-spacing: .1em; }
.cv-title { font-size: clamp(52px, 8vw, 136px); font-weight: 200; letter-spacing: .05em; line-height: .95; }
.sc-tag { font-weight: 300; font-size: clamp(16px, 1.3vw, 20px); width: min(560px, 70vw); text-align: justify; text-align-last: justify; }
.ticks { display: flex; gap: 6px; padding-bottom: 10px; }
.tick { width: 24px; height: 1px; background: rgba(250,248,244,.45); }
.tick.on { background: #FAF8F4; height: 2px; }

/* Hola · Tono · Fotografía — texto + columna de planos a casi todo el alto */
.pg-spread { gap: 0; }
.pbody { flex: 1; min-height: 0; container-type: size; display: grid; column-gap: clamp(40px, 5vw, 88px); align-content: center; }
.pbody.m-left { grid-template-columns: auto minmax(0, 1fr); }
.pbody.m-right { grid-template-columns: minmax(0, 1fr) auto; }
.mcol { width: min(64cqw, calc((100cqh - 10px * (var(--n) - 1)) / var(--inv))); display: flex; flex-direction: column; gap: 10px; }
.mcol .jrow { width: 100%; }
.tcol { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; max-width: 31em; }
.m-right .tcol { justify-self: start; }
.tc-top, .tc-bottom { display: flex; flex-direction: column; gap: 20px; }
.tc-top > .lbl { margin-top: -.3em; }
.sp-kicker { font-size: clamp(28px, 2.7vw, 42px); font-weight: 200; line-height: 1.08; text-wrap: balance; }
.sp-lead { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.42; }
.sp-body { display: flex; flex-direction: column; gap: 14px; }
.sp-body p, .sp-p { font-size: 15.5px; line-height: 1.62; }
.ho-drop::first-letter { float: left; font-size: 3.6em; line-height: .8; font-weight: 200; padding: 6px 10px 0 0; }
.ho-close { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.ho-sign { color: var(--muted); }
.pbody-band { display: flex; align-items: center; justify-content: center; }
.band { width: min(100%, calc(62cqh * var(--sum))); display: flex; flex-direction: column; gap: clamp(28px, 4.4cqh, 44px); }
.band .jrow { width: 100%; }
.band-cols { display: grid; column-gap: 10px; align-items: start; }
.band-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding-right: clamp(28px, 3vw, 56px); }
.band-col:last-child { padding-right: 0; }
.band .sp-body { max-width: 36em; }
.band .sp-body p { font-size: 15.5px; }
/* Tono · tira */
.band-tira { gap: clamp(24px, 4cqh, 40px); }
.tira-lead { grid-column: 2 / -1; }
.tira-lead .sp-lead { max-width: 40em; }
.tira-b1 { grid-column: 1; }
.tira-b2 { grid-column: 2 / span 2; }
.tira-b2 .sp-p { max-width: 38em; }
.tira-close { grid-column: 4; }
em { font-style: italic; }
/* Fotografía 1 · grande + pequeña */
.fo-big { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-content: center; }
.j-hero { width: min(65cqw, calc(100cqh * var(--sum))); }
.fo-big .tcol { max-width: 30em; }
.j-thumb { width: min(100%, calc(22cqh * var(--sum))); align-self: flex-end; }
.to-close { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.38; text-transform: uppercase; letter-spacing: .06em; }

/* Página collage: solo imágenes, mosaico editorial a sangre de márgenes */
.pg-collage { gap: 20px; }
.cl-head { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.cl-head .lead { font-size: clamp(16px, 1.4vw, 20px); max-width: 44em; color: var(--muted); }

/* Casting — estilo Tono/Cinematografía: texto + mosaico de fotos a toda la página */
.pg-casting { gap: 24px; }
.cst-head { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.cst-head .lead, .cst-frame-text .lead { font-size: clamp(18px, 1.6vw, 22px); }
.cst-head p:not(.lead), .cst-frame-text p:not(.lead) { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.cst-foot { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cst-foot .dls { width: min(100%, 720px); }
.cst-foot .dls.dls-2col { width: min(100%, 1080px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.cst-foot .dls.dls-2col .dl { grid-template-columns: 68px 1fr; }
.cst-mosaic { flex: 1; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.cst-mosaic .mcol { width: min(96cqw, calc((100cqh - 10px * (var(--n) - 1)) / var(--inv))); }
/* Página 1 de Casting: texto centrado, enmarcado por fotos arriba y abajo (proporción real, sin recorte) */
.cst-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 28px; }
.cst-frame-row { --h: 22vh; justify-content: center; }
.cst-frame-text { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 640px; text-align: center; }
.cl-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px; }
.cl-cell { min-width: 0; min-height: 0; }
.cl-cell .shot { width: 100%; height: 100%; }
.cl-row-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cl-row-wrap .jrow { justify-content: center; }
.pg-collage-stack { height: auto !important; min-height: 100vh; overflow: visible !important; }
.cl-stack { display: flex; flex-direction: column; gap: 20px; }
.cl-stack-item { width: 100%; }
.cl-stack-item .shot { width: 100%; height: auto; aspect-ratio: var(--ar, 1.778); }
.cl-w { grid-column: span 2; }
.cl-t { grid-row: span 2; }

/* Guion: intro */
.wave-head .h-l { font-size: clamp(38px, 5vw, 76px); }
.wave-list { grid-column: auto; }

/* Página de escena (sticky) */
.pg-scene { padding: 0 var(--g); gap: 0; background: var(--bg); }
.scene-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); column-gap: var(--gap); }
.sticky-col { grid-column: 1; align-self: start; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 72px 32px 48px clamp(16px, 4vw, 56px); }
/* Escena sin planos (texto introductorio): una sola columna centrada */
.pg-scene.no-media .scene-grid { grid-template-columns: minmax(0, 1fr); }
.pg-scene.no-media .sticky-col { position: relative; height: auto; min-height: 100vh; width: 100%; max-width: 68ch; margin: 0 auto; padding: 96px 0; }
.pg-scene.no-media .scene-body { max-width: none; }
.sc-meta { display: flex; gap: 18px; }
/* Si la palabra más larga del título (--lw, en letras) no cabe en la columna,
   el título se reduce lo justo ("DESCOORDINACIÓN"); los cortos no cambian. */
.sticky-col { container-type: inline-size; }
.scene-title { font-size: min(clamp(34px, 3.6vw, 56px), calc(100cqi / (var(--lw, 6) * 0.74))); overflow-wrap: break-word; font-weight: 300; text-transform: uppercase; letter-spacing: .04em; line-height: 1.04; text-wrap: balance; }
.scene-body { display: flex; flex-direction: column; gap: 14px; font-size: 18px; max-width: 46ch; }
.dls { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); max-width: 46ch; }
.dl { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline; }
.dl .lbl { font-size: 10px; color: var(--muted); }
.dl-t { font-size: 17px; }
.scene-media { grid-column: 2; display: flex; flex-direction: column; gap: 12px; padding: 22vh 0 22vh; }
.srow { display: flex; gap: 12px; align-items: flex-start; }
.srow > .shot { flex: var(--ar, 1.778) 1 0%; min-width: 0; height: auto; aspect-ratio: var(--ar, 1.778); }
.shot.fx { opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(.2,.7,.1,1), transform 1.2s cubic-bezier(.2,.7,.1,1); }
.shot.fx.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .shot.fx { opacity: 1; transform: none; transition: none; } }

/* Casting y resto (se mantienen para las siguientes páginas) */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.split > .stack { grid-column: span 5; }
.split-shot { grid-column: 7 / span 6; aspect-ratio: 16 / 9; }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.person { display: flex; flex-direction: column; gap: 12px; }
.person .shot { aspect-ratio: 4 / 5; height: auto; }
.person figcaption { display: flex; flex-direction: column; gap: 4px; }
.p-name { font-size: 20px; text-transform: uppercase; letter-spacing: .05em; }
.p-line { font-size: 16px; color: var(--muted); }
.refs { display: flex; flex-direction: column; gap: 12px; }
.ref-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.ref-grid .shot { aspect-ratio: 3 / 4; height: auto; }
.wide { position: relative; aspect-ratio: 2.39 / 1; }
.wave-line { display: none; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.list { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; }
.row .r-d { color: var(--muted); }
.loc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.loc-grid .shot { aspect-ratio: 16 / 9; height: auto; }
/* Localizaciones: una foto a sangre; el texto va encima, abajo a la izquierda */
.pg-loc { justify-content: flex-end; background: #111; }
.loc-bleed, .loc-shade { position: absolute; inset: 0; }
.loc-bleed > .shot { position: absolute; inset: 0; }
.loc-shade { background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,0) 70%); pointer-events: none; }
.loc-text { position: relative; z-index: 2; max-width: 580px; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.loc-text .lbl { color: rgba(255,255,255,.75); }
.loc-text .lead { font-size: clamp(19px, 1.7vw, 24px); color: #fff; }
.loc-text p:not(.lead) { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.85); }
/* 08 Sonido: texto a la izquierda, plano a la derecha (entero, a su proporción, sin recorte) */
.sd-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.sd-text { display: flex; flex-direction: column; gap: 18px; max-width: 540px; }
.sd-text .lead { font-size: clamp(18px, 1.5vw, 22px); }
.sd-text p:not(.lead) { font-size: 16px; line-height: 1.6; color: var(--muted); }
.sd-media { height: 100%; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.sd-media > .shot { width: min(100cqw, calc(100cqh * var(--ar, 1.5))); height: auto; aspect-ratio: var(--ar, 1.5); }
@media (max-width: 900px) {
  .sd-grid { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .sd-media { height: auto; container-type: normal; }
  .sd-media > .shot { width: 100%; }
}
.pg-end { justify-content: center; }
.end-frame { position: relative; flex: 1; min-height: 60vh; }
.end-frame > .shot { position: absolute; inset: 0; }
/* Varios planos de cierre: se alternan en fundido cruzado en vez de mostrar solo el primero. */
.end-frame > .shot.cross { opacity: 0; animation: endCross 13s ease-in-out infinite; }
.end-frame > .shot.cross-0 { animation-delay: 0s; }
.end-frame > .shot.cross-1 { animation-delay: -6.5s; }
.end-frame > .shot.cross-2 { animation-delay: -3.25s; }
.end-frame > .shot.cross-3 { animation-delay: -9.75s; }
@keyframes endCross { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .end-frame > .shot.cross { animation: none; opacity: 1; } }
.end-text { position: absolute; z-index: 2; inset: auto 0 8% 0; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; color: #FAF8F4; }
.end-title { font-size: clamp(56px, 10vw, 160px); font-weight: 200; }
.end-sub { font-size: clamp(20px, 2vw, 30px); }


/* Número de página por pantalla: solo en PDF (en pantalla lo muestra el HUD) */
.folio { display: none; position: absolute; right: var(--g); bottom: 20px; z-index: 5; font-size: 10px; font-weight: 400; letter-spacing: .18em; }

/* Responsive */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .hud-version { display: none !important; }
  .hud-meta { grid-template-columns: 1fr auto; padding: 12px 20px; }
  .hud-foot { padding: 12px 20px 14px; }
  .hud-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pg { padding: 80px 20px 56px; gap: 28px; }
  .intro, .wave-head, .split, .group, .pg-index, .scene-grid { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .credits, .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-cover { height: 100svh; padding: 64px 20px 40px; }
  .cover-title { white-space: normal; font-size: 13vw; }
  .pg-collage, .pg-casting { height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 88px 20px 56px !important; }
  .cst-frame { gap: 24px; }
  .cst-frame-row.jrow { width: 100% !important; flex-direction: column; gap: 10px; }
  .cst-frame-row .shot { width: 100% !important; flex: none !important; }
  .cst-foot .dls.dls-2col { grid-template-columns: 1fr; }
  .cst-mosaic { container-type: normal; }
  .cst-mosaic .mcol { width: 100%; }
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: 46vw; }
  .cl-w, .cl-t { grid-column: span 1; grid-row: span 1; }
  .pg-refs { height: auto !important; overflow: visible !important; padding: 88px 20px 56px !important; }
  .rf-row { flex-direction: column; align-items: center; }
  .rf-item { max-width: 100%; width: 100%; }
  .pbody { display: flex; flex-direction: column; gap: 28px; container-type: normal; }
  .m-right .mcol { order: 2; }
  .mcol, .j-hero, .j-thumb { width: 100%; }
  .fo-big { display: flex; flex-direction: column; gap: 24px; }
  .tira-lead, .tira-b1, .tira-b2, .tira-close { grid-column: auto; }
  .band { width: 100%; }
  .band-cols { display: flex; flex-direction: column; gap: 24px; }
  .band-col { padding-right: 0; }
  .tcol { max-width: none; }
  .pg-seccover { height: 100svh; }
  .sc-top { top: 56px; flex-direction: column; gap: 4px; }
  .sc-bottom { flex-direction: column; align-items: flex-start; bottom: 32px; }
  .cv-title { font-size: 13vw; }
  .ix-link { grid-template-columns: 36px 1fr; gap: 6px 12px; padding: 14px 0; }
  .ix-tag, .ix-state { grid-column: 2; text-align: left; }
  .pg-scene { padding: 0 20px; }
  .sticky-col { position: relative; height: auto; padding: 88px 0 8px; align-self: stretch; }
  .scene-media { padding: 16px 0 56px; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc { font-size: 3.2vw; }
  .sc-claim { display: none; }
  .ref-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols { grid-template-columns: 1fr; }
  .loc-grid { grid-template-columns: 1fr; }
}

/* PDF (Cmd+P / Guardar como PDF): una página por plano, 1440×900 */
@page { size: 1440px 900px; margin: 0; }
@media print {
  html, body { background: var(--bg) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { width: 1440px; }
  .hud, .hud-foot, .ix-bg { display: none; }
  .folio { display: block; color: var(--muted); bottom: 16px; }
  .pg-seccover .folio { color: #FAF8F4; }
  video { display: none !important; }
  .reveal, .wipe, .shot.fx { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .pg { break-before: page; min-height: 900px; padding: 48px 64px 40px; gap: 28px; }
  .pg:first-child { break-before: auto; }
  .pg-seccover, .pg-cover { height: 900px; min-height: 900px; }
  .pg-cover { padding: 48px 64px !important; }
  .pg { height: 900px; overflow: hidden; }
  .pg-seccover { padding: 0 !important; }
  .sc-top { top: 44px; }
  .cover-title { font-size: 120px; }
  .wave-list .ix-link { padding: 8px 0; }
  .wave-list .ix-title { font-size: 18px; }
  .h-l, .wave-head .h-l { font-size: 50px; }
  .lead { font-size: 22px; }
  .pg-scene { height: 900px; overflow: hidden; padding: 0 64px !important; }
  .sticky-col { position: relative; height: 900px; padding: 40px 32px 40px 0; }
  .scene-media { padding: 90px 0 0; gap: 10px; }
  .scene-media { max-width: 640px; }
  .srow:nth-child(n+3) { display: none; }
  .ix-link { padding: 13px 0; }
  .gmark.on { animation: none; }
  .group { padding-top: 10px; }
  .groups { gap: 10px; }
  .shot, .group, .tile, .person, .pbody { break-inside: avoid; }
}

/* 07 Casting · página 1: texto a la izquierda, moodboard a la derecha */
.cst-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 80px); align-items: center; }
.cst-split-text { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.cst-split-text .lead { font-size: clamp(18px, 1.6vw, 22px); }
.cst-split-text p:not(.lead) { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.cst-side { height: 100%; }
@media (max-width: 900px) {
  .cst-split { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .cst-side { height: auto; }
}

/* The Pitch Lab: en móvil la barra de navegación del portfolio ocupa el pie; se oculta el pie del HUD */
@media (max-width: 900px) { .hud-foot { display: none; } }