/* Web de IA (AI Filmmaking) · «Del ruido a la imagen»
   Cada pieza sale de un campo de grano en profundidad y se ordena en su fotograma, como un muestreo de difusión.
   Fondo negro, una retícula técnica de líneas finas con cruces y un solo acento: el ámbar #ffb547 (tungsteno).
   Nada más lleva color: el color lo ponen las películas. Production Design (su web hermana) va en azul luz de día;
   los dos acentos no se mezclan nunca.
   Sin 3D (reducir movimiento, sin WebGL, mientras carga) la página es normal y legible, con fotogramas. */
:root {
  --bg: #000;
  --bg-2: #121317;
  --panel: #15161a;
  --fg: #ecebe6;
  --mute: #8d8e93;
  --line: #22242a;
  --grid: rgba(236, 235, 230, .055);
  --amber: #ffb547;        /* el único acento: contadores, etiquetas, lo activo, el foco y los hovers */
  --pd: #1b1b1d;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* como Production Design: ancha (125%) en titulares */
  --label: "Archivo", "Helvetica Neue", Arial, sans-serif;     /* estrecha (75%) en etiquetas */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;      /* solo datos pequeños: contadores, cifras, notas «FALTA» */
  --gutter: clamp(16px, 3.2vw, 48px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 72px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.55 var(--display); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 600; letter-spacing: -.02em; font-stretch: 125%; }
p { margin: 0; }
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.mono { font: 500 12px/1.45 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; }
.mute { color: var(--mute); }
.amber { color: var(--amber); }

/* Retícula técnica: líneas cada 96 px con una cruz en cada cruce, fija detrás de todo */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 4.5h9M4.5 0v9' stroke='%23ecebe6' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 96px 96px; background-position: -4.5px -4.5px, 0 0, 0 0; }
/* Líneas de barrido muy suaves por encima del lienzo */
.scan { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; opacity: 0; transition: opacity .4s; }
html.gl .scan { opacity: 1; }
html.gl.past-stage .scan, html.gl.past-hero .scan { opacity: 0; }

/* ---------- Cabecera ---------- */
.head { position: sticky; top: 0; z-index: 40; display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-block: 18px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.brand { font: 700 clamp(19px, 1.8vw, 24px)/1 var(--display); font-stretch: 125%; letter-spacing: -.01em; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.nav a { font: 500 12px/1 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-block: 14px; margin-block: -14px; transition: color .2s; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--fg); }
.nav a.to-pd::before { content: "▪ "; color: var(--mute); }

/* ---------- Botones ---------- */
.links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 1px solid var(--fg); border-radius: 2px; background: transparent; color: var(--fg); font: 500 12px/1 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn:hover, .btn:focus-visible { background: var(--fg); color: var(--bg); }
.btn.solid { background: var(--fg); color: var(--bg); }
.btn.solid:hover, .btn.solid:focus-visible { background: var(--amber); border-color: var(--amber); color: #111; }
.btn.sq { width: 44px; padding: 0; justify-content: center; font-size: 16px; }
.tri { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.textlink { border-bottom: 1px solid currentColor; padding-block: 10px 2px; }

/* ---------- Fotogramas y huecos ---------- */
.frame { display: block; position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: 16 / 9; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame .vimeo-bg { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border: 0; opacity: 0; transition: opacity .8s; pointer-events: none; }
.frame.playing .vimeo-bg { opacity: 1; }
/* Hueco: un campo de grano quieto (la pieza «todavía en el ruido») con su rótulo */
.hole { display: grid; place-items: center; text-align: center; padding: 16px; color: var(--mute); font: 500 11.5px/1.45 var(--mono); letter-spacing: .04em; border: 1px dashed #3a3c43;
  background-color: var(--bg-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .6 0 0 0 0 .6 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hole b { display: block; color: var(--fg); font: 600 15px/1.2 var(--display); font-stretch: 125%; letter-spacing: 0; margin-bottom: 4px; }
.hole span { background: color-mix(in srgb, var(--bg) 82%, transparent); padding: 6px 8px; }
.frame.missing::after { content: attr(data-title); position: absolute; inset: 0; display: grid; place-items: center; font: 500 12px var(--mono); color: var(--mute); }
/* Material que falta: rótulo ámbar en mono sobre el fotograma o dentro del hueco («FALTA: …», ver MATERIAL-PENDIENTE.md) */
.falta { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; justify-self: start; width: fit-content; max-width: calc(100% - 16px);
  font: 500 10px/1.35 var(--mono); letter-spacing: .04em; color: var(--amber); background: rgba(0,0,0,.78); border: 1px dashed var(--amber); padding: 5px 7px; }
.falta-in { color: var(--amber); }
.hole > span { color: var(--amber); }
/* Etiqueta técnica en la esquina de cada fotograma (coordenada de la retícula) */
.coord { position: absolute; left: 8px; top: 8px; z-index: 1; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); background: rgba(0,0,0,.7); padding: 5px 6px; }

/* ---------- Lienzo 3D ---------- */
#gl { display: none; }
html.gl #gl { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.over { position: relative; z-index: 2; }
main, footer, section { position: relative; z-index: 2; }
.readout { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--amber); font-variant-numeric: tabular-nums; min-height: 1.4em; }
html:not(.gl) .readout { display: none; }

/* ================= PORTADA ================= */
.hero { min-height: calc(100svh - 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 0 clamp(20px, 3vw, 48px); align-items: stretch; padding-block: 8px 20px; }
.hero .ai { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; min-width: 0; }
.hero h1 { font-size: clamp(46px, 7vw, 116px); line-height: .9; letter-spacing: -.04em; }
.hero .lede { max-width: 34ch; font-size: clamp(16px, 1.25vw, 19px); }
.door { font: 600 clamp(18px, 1.6vw, 24px)/1.2 var(--display); display: inline-flex; gap: 10px; align-items: center; padding-block: 10px; border-bottom: 2px solid currentColor; justify-self: start; }
.door span { transition: transform .25s; }
.door:hover span, .door:focus-visible span { transform: translateX(6px); }
.ai-top { display: grid; gap: 16px; align-content: start; }
.fieldbar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; justify-content: space-between; }
.fieldbar .now { display: grid; gap: 6px; }
.nowgate { display: flex; gap: 10px; align-items: center; }
.nowgate i { width: 8px; height: 8px; background: var(--amber); }
.nowgate a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.field-btns { display: none; gap: 8px; }
html.gl .field-btns { display: flex; }
/* Sin 3D: las piezas como rejilla de fotogramas */
.flat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block: 16px; }
.flat a { display: grid; gap: 6px; font: 500 11px/1.3 var(--label); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.flat a:first-child { grid-column: span 2; grid-row: span 2; }
.flat .frame, .flat .hole { aspect-ratio: 16/10; }
html.gl .flat { display: none; }
html.gl .gl-room { min-height: 40svh; }

/* Pared de fotogramas con coordenadas de la retícula */
.sec { padding-block: clamp(56px, 10vh, 112px) clamp(32px, 6vh, 64px); border-top: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; margin-bottom: clamp(18px, 4vh, 36px); }
.sec-head .t { display: grid; gap: 10px; }
.sec h2 { font-size: clamp(30px, 3.6vw, 56px); line-height: 1; }
.sec-head p { max-width: 46ch; color: var(--mute); }
.plate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.plate-grid figure { margin: 0; background: var(--bg); padding: 10px; display: grid; gap: 8px; }
.plate-grid figcaption { display: flex; justify-content: space-between; gap: 10px; font: 500 10.5px/1.3 var(--label); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.plate-grid .big { grid-column: span 2; grid-row: span 2; }
.plate-grid .big .frame { aspect-ratio: auto; height: 100%; min-height: 220px; }
.plate-grid .frame img { transition: transform .6s, filter .6s; }
.plate-grid figure:hover .frame img { transform: scale(1.04); }
.note { margin-top: 12px; }

/* Índice de piezas */
.ix-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.ix-list a { display: grid; grid-template-columns: 3rem minmax(0, 1.3fr) minmax(0, 1.4fr) 8.5rem 9rem; gap: 18px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); transition: background .25s; }
.ix-list a:hover, .ix-list a:focus-visible { background: var(--bg-2); }
.ix-n { font: 500 12px var(--mono); color: var(--mute); }
.ix-t { font: 600 clamp(22px, 2.3vw, 34px)/1.05 var(--display); font-stretch: 125%; letter-spacing: -.02em; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ix-l { font: 500 12.5px/1.4 var(--label); font-stretch: 75%; color: var(--mute); }
.ix-y { font: 500 12px var(--label); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; }
.ix-img { aspect-ratio: 16/9; overflow: hidden; display: block; position: relative; }
.ix-img img { width: 100%; height: 100%; object-fit: cover; }
.ix-img.hole { padding: 4px; font-size: 10px; display: grid; }
.badge { justify-self: start; font: 500 11px/1 var(--label); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); padding: 6px 10px; font-style: normal; }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); }
.contact h2 { font-size: clamp(34px, 4vw, 64px); }
.mail { font: 600 clamp(18px, 1.6vw, 22px)/1.2 var(--display); user-select: all; -webkit-user-select: all; }
.mailrow { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px; border-top: 1px solid var(--line); font: 500 11.5px/1.5 var(--label); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); background: var(--bg); }
.foot a { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* ================= AI FILMMAKING ================= */
.thesis-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 24px; align-items: start; padding-block: 10px 28px; }
.thesis-bar h1 { font-size: clamp(30px, 3.4vw, 54px); line-height: 1.02; max-width: 20ch; }
.thesis-bar p { color: var(--mute); font-size: 15px; }
.tools { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tools li { font: 500 11px/1 var(--label); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); padding: 7px 10px; }
.film { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 48px); align-items: center; padding-block: clamp(28px, 6vh, 64px); border-top: 1px solid var(--line); }
.film .cap { display: grid; gap: 10px; max-width: 30rem; }
.slotno { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--mute); }
.film .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.film .meta b { color: var(--fg); font-weight: 500; }
.film h2 { font-size: clamp(40px, 5.2vw, 84px); line-height: .92; letter-spacing: -.035em; }
.film .line { font: 500 13px/1.4 var(--label); font-stretch: 75%; letter-spacing: .03em; color: var(--mute); }
.film .desc { max-width: 40ch; }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.strip.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strip img { aspect-ratio: 16/10; width: 100%; object-fit: cover; }

html.gl .stage .film { min-height: calc(var(--n, 1) * 72svh + 28svh); border-top: 0; grid-template-columns: 1fr; align-items: end; align-content: end; padding-block: 0 clamp(28px, 7vh, 72px); }
html.gl .stage { pointer-events: none; }
html.gl .stage .film > .frame, html.gl .stage .film > .hole { display: none; }
html.gl .stage .film .cap { position: sticky; bottom: clamp(20px, 5vh, 56px); max-width: 26rem; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 16px 18px; margin-left: -18px; border-left: 1px solid var(--amber); opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
html.gl .stage .film.on .cap { opacity: 1; visibility: visible; pointer-events: auto; }
html.gl .stage .thesis-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding-top: 4px; pointer-events: none; }
html.gl .stage .thesis-bar > * { pointer-events: auto; }
html.gl .stage .thesis-bar h1 { font-size: clamp(22px, 2.1vw, 34px); max-width: 18ch; }
html.gl .stage .thesis-bar .tools { display: none; }
.stage-readout { display: none; }
html.gl .stage-readout { display: block; position: fixed; right: var(--gutter); bottom: 22px; z-index: 3; }
html.gl.past-stage .stage-readout, html.gl.past-stage .dial { opacity: 0; pointer-events: none; }
.gate-hit { display: none; }
html.gl .gate-hit { display: block; background: none; border: 0; padding: 0; appearance: none; position: fixed; z-index: 1; cursor: none; }
html.gl .gate-hit[hidden] { display: none; }
.cursor-tag { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; font: 500 11px/1 var(--label); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; background: var(--amber); color: #111; padding: 8px 10px; opacity: 0; transition: opacity .2s; }
.cursor-tag.on { opacity: 1; }
.dial { display: none; }
html.gl .dial { display: flex; position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; flex-direction: column; gap: 4px; transition: opacity .3s; }
.dial a { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--mute); display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 8px 0; }
.dial a::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width .3s; }
.dial a.on { color: var(--fg); }
.dial a.on::after { width: 34px; background: var(--amber); }

/* HALE: las decisiones de preparación, escritas como prompts */
.prompts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.prompts > * { background: var(--bg); padding: 16px; display: grid; gap: 10px; align-content: start; }
.prompts .k { font: 500 10.5px/1 var(--label); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.prompts p { font: 400 14px/1.55 var(--mono); color: var(--fg); }
.prompts p::before { content: "> "; color: var(--mute); }
.prompts .wide { grid-column: span 2; padding: 0; }
.prompts .wide .frame { aspect-ratio: 2/1; }
.prompts .wide figcaption { padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; font: 500 10.5px/1.3 var(--label); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

.working { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); }
.working h2 { font-size: clamp(28px, 3vw, 44px); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.steps li { display: grid; gap: 8px; font: 500 11px/1.3 var(--label); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; min-width: 0; align-content: start; }
.steps li .frame, .steps li .hole { aspect-ratio: 3/4; }

/* ================= FICHA DE MUSES ================= */
.sheet-grid { display: grid; grid-template-columns: minmax(300px, 30rem) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; padding-bottom: 40px; position: relative; z-index: 2; }
.sheet { position: sticky; top: 72px; display: grid; gap: 12px; padding-block: 14px 24px; max-height: calc(100svh - 80px); overflow: auto; }
.sheet h1 { font-size: clamp(54px, 6vw, 96px); line-height: .9; letter-spacing: -.04em; }
.sheet dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14.5px; }
.sheet dt { font: 500 11px/1.9 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.sheet dd { margin: 0; }
.mini { display: none; }
html.gl .mini { display: block; position: relative; aspect-ratio: 16/9; width: 100%; background: #000; border: 1px solid var(--line); }
html.gl .mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-cap { font: 500 11px/1 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); display: flex; justify-content: space-between; gap: 10px; }
html:not(.gl) .mini-cap { display: none; }
.toc { display: grid; }
.toc a { font: 500 12px/1 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-block: 11px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.toc a.on { color: var(--fg); }
.toc a.on::before { content: "■"; color: var(--amber); }
.mo { display: grid; gap: clamp(56px, 12vh, 120px); padding-block: 14px 40px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.mo section { display: grid; gap: 14px; scroll-margin-top: 80px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.mo h2 { font-size: clamp(26px, 2.6vw, 40px); }
.mo .step { font: 500 12px/1 var(--mono); color: var(--amber); letter-spacing: .1em; }
.mo .note { color: var(--mute); max-width: 52ch; margin: 0; }
.grp { font: 600 18px/1.2 var(--display); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; margin: 8px 0 0; }
.plates { display: grid; gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plates.n4, .plates.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trio .hole, .duo .hole { aspect-ratio: 4/3; }
.trio > *, .duo > *, .tests > *, .plates > * { min-width: 0; }
.tests { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tests .hole { aspect-ratio: 1; position: relative; padding: 4px; font-size: 9.5px; }
.tests .hole span { padding: 2px 4px; }
.tests .cut::after { content: ""; position: absolute; inset: 12%; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--fg) 50%, transparent calc(50% + 1px)); opacity: .5; }
.tests .pick { outline: 2px solid var(--amber); outline-offset: 2px; }
.credits { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; margin: 0; }
.credits dt { font: 500 11px/1.9 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.credits dd { margin: 0; }
.next { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 22px; border-top: 1px solid var(--fg); }
.next a { font: 600 clamp(22px, 2.4vw, 34px)/1.1 var(--display); font-stretch: 125%; padding-block: 8px; }

/* Aviso y reproductor (comportamiento común) */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: 90; max-width: min(92vw, 520px); background: var(--fg); color: var(--bg); font: 500 13px/1.45 var(--display); padding: 12px 16px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.film-dialog { width: min(1100px, 94vw); border: 1px solid var(--line); padding: 0; background: #000; color: #fff; }
.film-dialog::backdrop { background: rgba(0, 0, 0, .86); }
.fd-frame { aspect-ratio: 16/9; }
.fd-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.fd-note { padding: 18px; font-size: 15px; }
.fd-note:empty { display: none; }
.fd-note a { text-decoration: underline; }
.fd-close { position: absolute; top: 8px; right: 8px; min-height: 40px; padding: 0 14px; background: #fff; color: #000; border: 0; font: 500 12px var(--label); font-stretch: 75%; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }

/* ================= MÓVIL ================= */
@media (max-width: 1100px) {
  .ix-list a { grid-template-columns: 2.4rem minmax(0, 1fr) 7.5rem; }
  .ix-l, .ix-y { display: none; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
  html.gl .gl-room { min-height: 40svh; }
  .sec-head, .thesis-bar, .working, .pd-band .inner, .contact, .film { grid-template-columns: 1fr; }
  .plate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate-grid .big { grid-column: span 2; grid-row: auto; }
  .plate-grid .big .frame { aspect-ratio: 16/9; height: auto; min-height: 0; }
  .pd-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prompts .wide { grid-column: auto; }
  .flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.gl .stage .film .cap { max-width: none; margin-left: 0; }
  html.gl .stage .thesis-bar { grid-template-columns: 1fr; }
  html.gl .stage .thesis-bar > div:last-child { display: none; }
  html.gl .dial { top: 76px; transform: none; flex-direction: row; background: color-mix(in srgb, var(--bg) 80%, transparent); padding: 0 4px; }
  html.gl .dial a { padding: 12px 8px; min-width: 40px; justify-content: center; }
  html.gl .dial a::after { display: none; }
  html.gl .dial a.on { color: var(--amber); }
  html.gl .stage-readout { left: var(--gutter); right: auto; bottom: auto; top: 128px; }
  .sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet { position: static; max-height: none; overflow: visible; }
  .tests { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trio, .duo { grid-template-columns: 1fr; }
  .plates, .plates.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 861px) and (max-height: 1000px) {
  .sheet .mini { width: 80%; justify-self: center; }
  .sheet > p.mute { display: none; }
  .sheet h1 { font-size: clamp(48px, 5vw, 76px); }
  .sheet { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Ajustes tras la primera mirada */
.prompts { grid-auto-flow: dense; }
@media (max-width: 860px) {
  html.gl .dial { display: none; }
  html.gl .stage-readout { top: 96px; left: var(--gutter); right: auto; }
  html.gl .stage .thesis-bar { padding-top: 34px; }
  html.gl .stage .thesis-bar h1 { font-size: 21px; }
}
@media (min-width: 861px) and (max-height: 1000px) { .sheet .mini { width: 66%; } .sheet .readout { text-align: center; } }

/* Correcciones de la revisión */
html.gl main { pointer-events: none; }
html.gl main > section, html.gl main > .sec, html.gl .dial, html.gl .stage .thesis-bar > * { pointer-events: auto; }
.plate-grid { grid-auto-flow: dense; }
.prompts figure { margin: 0; }
html:not(.gl) .nowgate .mute { display: none; }
.toc a { padding-block: 14px; }
.brand { display: inline-block; padding-block: 10px; margin-block: -10px; }
.pd-wall .frame b { right: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gl { will-change: transform; }
@media (max-width: 860px) {
  html.gl .stage .thesis-bar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
  html.gl .stage-readout { top: auto; bottom: auto; top: 92px; }
  html.gl .stage .film .cap .desc, html.gl .stage .film .cap .strip, html.gl .stage .film .cap .line { display: none; }
  html.gl .stage .film h2 { font-size: 40px; }
}
@media (min-width: 861px) and (max-height: 1080px) {
  .sheet > p:not(.readout):not(.mini-cap), .sheet dl:not(.official) { display: none; }   /* la ficha oficial se ve siempre */
}

/* =====================================================================
   PUERTA A PRODUCTION DESIGN CON CAMBIO DE FOCO (de la propuesta B), sobre la E
   ===================================================================== */
:root { --pull: 900ms; --ease: cubic-bezier(.45, .05, .2, 1); --mark: var(--amber); }

/* Planos de delante: se ablandan en la vista previa y se van en el cambio de foco */
.fp { transition: filter var(--pull) var(--ease), opacity var(--pull) var(--ease); }
body.preview .fp { filter: blur(2.2px); opacity: .55; }
body.pulled .fp { filter: blur(16px); opacity: 0; pointer-events: none; }
body.preview::before, body.pulled::before { opacity: .3; transition: opacity var(--pull) var(--ease); }

/* Reel a pantalla completa: solo aparece con el cambio de foco */
.bgreel { position: fixed; inset: 0; z-index: 1; overflow: hidden; opacity: 0; pointer-events: none; background: #0c0c0d;
  transition: opacity var(--pull) var(--ease); }
.bgreel video { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: blur(24px); transform: scale(1.14);
  transition: filter var(--pull) var(--ease), transform var(--pull) var(--ease); }
.bgreel::after { content: ""; position: absolute; inset: 0; background: rgba(12, 12, 13, .45); }
body.pulled .bgreel { opacity: 1; }
body.pulled .bgreel video { filter: blur(0); transform: scale(1.02); }

/* La puerta: arriba del todo, en la columna de la derecha, donde estaba el panel de la E */
.lens { position: relative; z-index: 3; align-self: start; display: grid; gap: 14px; min-width: 0; color: var(--fg); }
.lens-win { position: relative; overflow: hidden; background: #2a2a2c; }
.lens-win video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
  filter: blur(5px) grayscale(.35); transform: scale(1.08); transition: filter .6s var(--ease), transform .6s var(--ease); }
.lens:hover .lens-win video, .lens:focus-within .lens-win video { filter: blur(0) grayscale(0); transform: scale(1.02); }
.lens .ff { display: grid; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums; }
.lens .ff-read b, .pull-msg .ff-read b { color: var(--fg); font-weight: 500; }
.ff-scale { position: relative; height: 12px; width: 100%; max-width: 220px; border-bottom: 1px solid currentColor; }
.ff-scale i { position: absolute; bottom: 0; width: 1px; height: 6px; background: currentColor; }
.ff-scale i:nth-child(1) { left: 0; } .ff-scale i:nth-child(2) { left: 22%; } .ff-scale i:nth-child(3) { left: 44%; }
.ff-scale i:nth-child(4) { left: 66%; } .ff-scale i:nth-child(5) { left: calc(100% - 1px); height: 10px; }
.ff-mark { position: absolute; bottom: 0; left: calc(var(--f, 0) * (100% - 3px)); width: 3px; height: 12px; background: var(--mark);
  transition: left var(--pull) var(--ease); }
.lens-link { display: grid; gap: 8px; }
.lens-link::after { content: ""; position: absolute; inset: 0; }        /* toda la puerta es el enlace */
.lens-k { font: 500 11px/1.4 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.lens-t { font: 600 clamp(24px, 2.2vw, 34px)/1.02 var(--display); font-stretch: 125%; letter-spacing: -.025em; }
.lens-s { font-size: 15px; line-height: 1.4; color: var(--mute); max-width: 30ch; }
.lens-go { font: 600 16px/1 var(--display); display: inline-flex; align-items: center; gap: 8px; padding-block: 8px; border-bottom: 2px solid currentColor; justify-self: start; }
.lens-go span { transition: transform .4s var(--ease); }
.lens:hover .lens-go span, .lens:focus-within .lens-go span { transform: translateX(6px); }
.lens:focus-within { outline: 2px solid var(--fg); outline-offset: 6px; }
.lens-link:focus-visible { outline: none; }
body.pulled .lens { opacity: 0; transition: opacity calc(var(--pull) * .6); }

/* La puerta es redonda: un objetivo. El vídeo dentro del círculo y el anillo de foco alrededor */
.lens[data-shape="round"] { justify-items: start; padding-top: 6px; }
.lens[data-shape="round"] .lens-win { width: min(100%, 300px); aspect-ratio: 1; border-radius: 50%; overflow: visible; background: none; }
.lens[data-shape="round"] .lens-win video { inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); border-radius: 50%; clip-path: circle(50% at 50% 50%); }
.lens[data-shape="round"] .lens-win::before { content: ""; position: absolute; inset: 21px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line), inset 0 0 40px rgba(0,0,0,.55); z-index: 1; pointer-events: none; }
.lens[data-shape="round"] .ff-scale { display: none; }
.lens-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lens-ring .r-out { fill: none; stroke: var(--line); stroke-width: 1; }
.lens-ring .r-dial { transform-origin: 100px 100px; transition: transform var(--pull) var(--ease); }
.lens-ring line { stroke: var(--mute); stroke-width: .8; }
.lens-ring text { fill: var(--mute); font: 500 7.5px var(--mono); text-anchor: middle; letter-spacing: .04em; }
.lens-ring .r-index { fill: var(--mark); }
.lens:hover .lens-ring text, .lens:focus-within .lens-ring text { fill: var(--fg); }

/* Mensaje al terminar el cambio de foco (solo en esta vista previa) */
.pull-msg { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px;
  color: #f2f2f0; text-align: center; }
.pull-msg[hidden] { display: none; }
.pull-msg .ff-read { font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #cfcfd2; }
.pull-msg p { margin: 0; font: 600 clamp(28px, 4vw, 56px)/1 var(--display); font-stretch: 125%; letter-spacing: -.03em; }
.pull-msg .btn { border-color: #f2f2f0; color: #f2f2f0; }

@media (max-width: 860px) {
  .lens[data-shape="round"] { justify-items: center; }
  .lens[data-shape="round"] .lens-win { width: min(72vw, 260px); }
  .lens[data-shape="round"] .lens-link { justify-items: center; text-align: center; }
  .lens[data-shape="round"] .lens-go { justify-self: center; }
}
/* Móvil (23 oct, reducido a 2/3): el visor no es un bloque más de la página. En la portada, el visor grande se oculta y en la cabecera
   aparece uno pequeño arriba a la derecha (.mini-door): el círculo con el reel dentro y debajo «Production Design →». */
.mini-door { display: none; }
@media (max-width: 860px) {
  .lens[data-shape="round"] { display: none; }
  .mini-door {
    display: grid; justify-items: center; gap: 4px; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 16px; width: 62px;
    text-align: center; color: var(--fg); text-decoration: none;
  }
  .mini-door .md-win { position: relative; width: 39px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #1a1a1c;
    box-shadow: 0 0 0 1.5px var(--amber), 0 0 0 3.5px #000, 0 0 0 4.5px var(--line); }
  .mini-door video, .mini-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mini-door .md-t { font: 600 8.5px/1.2 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
  .mini-door .md-t span { color: var(--amber); }
  body:has(.mini-door) .nav .to-pd { display: none; }   /* en la portada, el visor ya es el acceso a Production Design */
}
}
@media (prefers-reduced-motion: reduce) {
  .fp, .bgreel, .bgreel video, .lens-win video, .lens-ring .r-dial, .ff-mark { transition: none; }
}

/* Texto de la puerta: el título es el enlace, con flecha y subrayado que se dibuja al pasar */
.lens-k { font: 500 11px/1.4 var(--label); font-stretch: 75%; letter-spacing: .1em; }
.lens-t { position: relative; justify-self: start; width: fit-content; max-width: 100%; font: 600 clamp(22px, 1.9vw, 30px)/1.12 var(--display); font-stretch: 125%; letter-spacing: -.02em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat; padding-bottom: 4px;
  transition: background-size .5s var(--ease); text-wrap: balance; }
.lens-t .amp { font-weight: 400; color: var(--mute); }
.lens-arrow { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-left: .35em; vertical-align: -.12em;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: .72em; transition: transform .45s var(--ease), background-color .3s, color .3s; }
.lens:hover .lens-t, .lens:focus-within .lens-t { background-size: 100% 2px; }
.lens:hover .lens-arrow, .lens:focus-within .lens-arrow { transform: translateX(6px); background: var(--fg); color: var(--bg); }
.lens-s { font: 500 15px/1.4 var(--display); color: var(--mute); }
/* «Enter» en el centro del objetivo cuando entra en foco */
.lens-enter { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%) scale(.9); padding: 9px 16px 8px;
  font: 500 11px/1 var(--label); font-stretch: 75%; letter-spacing: .18em; text-transform: uppercase; color: #f2f2f0;
  border: 1px solid rgba(242, 242, 240, .7); border-radius: 999px; background: rgba(12, 12, 13, .35); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.lens:hover .lens-enter, .lens:focus-within .lens-enter { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lens[data-shape="round"] .lens-win { cursor: pointer; }
@media (hover: none) { .lens-enter { opacity: 1; transform: translate(-50%, -50%) scale(1); } }   /* en el móvil, siempre visible */

/* Selector de idioma, en la cabecera */
.head { align-items: center; }
.lang { display: flex; gap: 2px; margin-left: auto; }
.lang button { font: inherit; letter-spacing: .08em; color: var(--mute); background: none; border: 1px solid transparent; min-width: 40px; min-height: 36px; padding: 0 8px; cursor: pointer; }
.lang button:hover { color: var(--fg); }
.lang button[aria-pressed="true"] { color: var(--fg); border-color: var(--line); }
@media (max-width: 860px) { .lang { margin-left: 0; } }

/* Aviso discreto junto al campo */
.fx-extra { display: grid; gap: 8px; justify-items: start; }
html:not(.gl) .fx-extra { display: none; }
.fx-hint { color: var(--mute); font-size: 11px; letter-spacing: .06em; }
.thesis-bar .fx-extra { margin-top: 14px; }
.sheet .fx-extra { justify-items: stretch; }
/* ---------- La esfera (pieza reutilizable: portada y, más adelante, cada película) ---------- */
.fx-hint, .thesis-bar .fx-hint { font-size: 11px; color: var(--mute); }
@media (min-width: 861px) {
  .fieldbar { flex-wrap: nowrap; }
  .fieldbar .fx-extra { min-width: 0; flex: 0 1 auto; }
  .fieldbar .fx-hint { max-width: 38ch; }
}

.sphere { display: none; position: relative; height: clamp(440px, 78vh, 820px); margin-bottom: 14px; border: 1px solid var(--line); overflow: hidden; outline: none;
  background: radial-gradient(ellipse at 50% 55%, #15161b 0, #000 72%); }
.sphere-block.live .sphere { display: block; }
.sphere-block.live .sp-items { display: none; }
/* Sin 3D: el mismo material como rejilla de tarjetas */
.sp-items { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px 14px; }
.sp-items li { display: grid; gap: 6px; align-content: start; min-width: 0; }
.sp-items li[data-play], .sp-items li[data-href] { cursor: pointer; }
.sp-items img, .sp-items .hole { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sp-items li[data-mode="cut"] img { filter: grayscale(1) brightness(.6); }
.sp-it-k { font: 500 11px/1.3 var(--label); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.sp-it-t { font: 600 20px/1.1 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.sp-it-x { font-size: 14px; line-height: 1.5; color: var(--mute); }
.sp-it-go { font: 600 14px/1 var(--display); justify-self: start; border-bottom: 2px solid currentColor; padding: 6px 0; }
.sp-items li:hover .sp-it-go { color: var(--amber); }
.sphere:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.sphere canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.sphere.hot canvas { cursor: pointer; }
.sphere.dragging canvas { cursor: grabbing; }
.sp-info { position: absolute; left: 20px; bottom: 22px; z-index: 2; display: grid; gap: 10px; max-width: 420px; padding: 16px 18px;
  background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .4s, left .6s cubic-bezier(.2,.7,.2,1), bottom .6s cubic-bezier(.2,.7,.2,1), max-width .6s; }
.sp-info.off { opacity: 0; pointer-events: none; }
.sp-info.in > * { animation: spIn .6s cubic-bezier(.2,.7,.2,1) both; }
.sp-info.in > :nth-child(2) { animation-delay: .05s; } .sp-info.in > :nth-child(3) { animation-delay: .1s; } .sp-info.in > :nth-child(4) { animation-delay: .15s; }
@keyframes spIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sp-k { color: var(--amber); font-size: 11px; }
.sp-t { font: 700 clamp(24px, 2.2vw, 36px)/1 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.sp-c { font: 400 14px/1.5 var(--display); color: var(--mute); max-width: 40ch; }
.sp-go { justify-self: start; font: 600 15px/1 var(--display); color: var(--fg); background: none; border: 0; border-bottom: 2px solid currentColor; padding: 8px 0; cursor: pointer; }
.sp-go[hidden] { display: none; }
.sp-go span { display: inline-block; transition: transform .3s; } .sp-go:hover span { transform: translateX(6px); }
.sp-info.side { left: var(--sx, 66%); bottom: auto; top: 50%; transform: translateY(-50%); max-width: min(320px, 28vw); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; gap: 14px; }
.sp-info.side .sp-t { font-size: clamp(30px, 3vw, 50px); line-height: .98; }
@media (max-aspect-ratio: 23/20) { .sp-info.side { left: 16px; top: auto; bottom: 18px; transform: none; max-width: calc(100% - 32px); } }
.sp-hint { position: absolute; right: 18px; bottom: 22px; z-index: 2; font-size: 11px; letter-spacing: .12em; color: var(--fg); padding: 10px 14px; border: 1px solid rgba(236,235,230,.35); border-radius: 999px; pointer-events: none; transition: opacity .6s; }
.sp-hint.gone { opacity: 0; }
.sp-note { margin: 0 0 18px; }


/* Fotogramas que se mueven (hoja de contactos, tiras y pared): empuje lento de cámara en cada uno, cada cual a su ritmo.
   Sitio para los clips de vídeo reales de MUSES cuando estén exportados. */
@media (prefers-reduced-motion: no-preference) {
  .plate-grid .frame img, .strip img, .plates .frame img, .steps .frame img, .prompts .frame img { animation: kb 16s ease-in-out infinite alternate; will-change: transform; }
  .plate-grid figure:nth-child(3n+1) .frame img, .plates .frame:nth-child(3n+1) img { animation-duration: 13s; transform-origin: 20% 30%; }
  .plate-grid figure:nth-child(3n+2) .frame img, .plates .frame:nth-child(3n+2) img { animation-duration: 18s; transform-origin: 80% 60%; animation-direction: alternate-reverse; }
  .plate-grid figure:nth-child(3n) .frame img, .plates .frame:nth-child(3n) img { animation-duration: 15s; transform-origin: 50% 85%; }
  .plate-grid figure:nth-child(odd) .frame img { animation-delay: -6s; }
  .plate-grid figure:hover .frame img { transform: none; animation-play-state: paused; }
}
@keyframes kb { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.14) translate(-2.5%, -1.5%); } }

/* La puerta: año junto al título y, debajo, «25 years on real sets» más pequeño. Subrayado fino siempre, para que se lea como enlace */
.lens-y { font: 500 .62em/1 var(--label); font-stretch: 75%; letter-spacing: .06em; color: var(--mute); white-space: nowrap; vertical-align: .15em; }
.lens-t { background-size: 100% 1px; }
.lens:hover .lens-t, .lens:focus-within .lens-t { background-image: linear-gradient(var(--amber), var(--amber)); background-size: 100% 2px; }
.lens:hover .lens-arrow, .lens:focus-within .lens-arrow { background: var(--amber); border-color: var(--amber); color: #000; }

/* MUSES: ficha oficial, hoja de contactos de descartes y créditos */
.sheet dl.official { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.sheet dl.official dd { margin-bottom: 10px; font-size: 15px; line-height: 1.5; }
.discards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.discards figure { margin: 0; display: grid; gap: 6px; min-width: 0; }
.discards .hole { aspect-ratio: 16 / 9; filter: grayscale(1); }
.discards .dc-good .hole { border-color: var(--amber); filter: none; }
.discards figcaption { display: grid; gap: 2px; font: 500 10.5px/1.4 var(--mono); }
.credit-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: clamp(17px, 1.5vw, 21px); }
@media (max-width: 860px) { .discards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= PÁGINA DE PELÍCULA (plantilla: pelicula.html + pelicula.js) ================= */
.pl-loading { padding-block: 40vh; }
.pl-error { display: grid; gap: 14px; padding-block: 18vh; max-width: 60ch; }
.pl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px clamp(24px, 4vw, 64px); align-items: end; padding-block: 18px clamp(32px, 6vh, 64px); scroll-margin-top: 72px; }
.pl-titles { display: grid; gap: 12px; align-content: end; min-width: 0; }
.pl-back { padding-block: 10px; justify-self: start; }
.pl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; font-size: 12px; letter-spacing: .08em; }
.pl-meta b { color: var(--amber); font-weight: 500; }
.pl-head h1 { font-size: clamp(40px, 5.2vw, 96px);   /* Archivo ancha ocupa más: a este tamaño «MUSES» cabe entero */ line-height: .9; letter-spacing: -.04em; overflow-wrap: anywhere; }
.pl-sub { margin: 0; font-size: 15px; }
.pl-video { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; min-width: 0; }
.pl-video > img, .pl-video > .hole { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; background: #000; }
.pl-play { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; gap: 10px; align-items: center; font: 600 15px/1 var(--display); color: #000; background: var(--fg); border: 0; padding: 12px 16px; cursor: pointer; }
.pl-play:hover, .pl-play:focus-visible { background: var(--amber); }
.pl-play .tri { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.pl-video.live .pl-play { display: none; }
.pl-falta { position: absolute; left: 12px; bottom: 12px; right: auto; }
.pl-nextlink { padding-block: 10px; }
.pl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.pl-k { font: 500 11px/1.4 var(--label); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px; }
.pending { color: var(--mute); font-style: italic; }
.plates .frame video, .pl-caps video, .discards video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.pl-caps figure { margin: 0; display: grid; gap: 6px; }
.pl-caps figcaption { font-size: 14px; color: var(--mute); }
.discards .dc-bad img, .discards .dc-bad video { filter: grayscale(1) brightness(.75); }
.discards .dc-good img, .discards .dc-good video, .discards .dc-good .hole { outline: 2px solid var(--amber); outline-offset: 2px; }
.discards img, .discards video { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.dc-n { color: var(--amber); font-weight: 500; }
.dc-prompt { color: var(--mute); }
/* Antes / después: el corte sigue al ratón (con el dedo, se arrastra); la raya es ámbar */
.ba { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); touch-action: pan-y; cursor: ew-resize; }
.ba-a, .ba-b { position: absolute; inset: 0; }
.ba-a > *, .ba-b > * { width: 100%; height: 100%; object-fit: cover; }
.ba-b { clip-path: inset(0 0 0 var(--p)); }
.ba-bar { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--amber); pointer-events: none; z-index: 2; }
.ba-l, .ba-r { position: absolute; top: 10px; z-index: 2; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.72); padding: 6px 8px; pointer-events: none; }
.ba-l { left: 10px; } .ba-r { right: 10px; }
.ba input { position: absolute; inset: auto 0 0 0; width: 100%; height: 44px; opacity: 0; cursor: ew-resize; z-index: 3; }
.ba:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.pl-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 22px; margin-top: 18px; border-top: 1px solid var(--fg); }
.pl-prevnext a { display: grid; gap: 6px; padding-block: 8px; }
.pl-prevnext b { font: 600 clamp(20px, 2.2vw, 32px)/1.1 var(--display); font-stretch: 125%; letter-spacing: -.02em; }
.pl-prevnext a:hover b { color: var(--amber); }
.pl-next { text-align: right; grid-column: 2; }
.sheet .mini-cap b { font-weight: 500; }
@media (max-width: 860px) {
  .pl-head { grid-template-columns: minmax(0, 1fr); }
  .pl-two { grid-template-columns: minmax(0, 1fr); }
  .pl-prevnext { grid-template-columns: minmax(0, 1fr); }
  .pl-next { grid-column: auto; text-align: left; }
}
.pl-side { margin: 0; display: grid; gap: 6px; min-width: 0; }
.pl-side .hole, .pl-side img, .pl-side video { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.pl-side figcaption { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 860px) { .sp-hint { top: 14px; bottom: auto; right: 14px; } }   /* en el móvil, el aviso arriba: abajo va la ficha de la pantalla */

/* Cabecera en el móvil, opción 1 (23 oct): dos líneas limpias.
   Arriba: nombre a la izquierda y el visor a la derecha (solo el círculo, con el reel dentro).
   Debajo: «Films · Contact» a la izquierda y CA ES EN en pequeño a la derecha. Fuera la línea «AI Filmmaking · 2023 — now». */
@media (max-width: 860px) {
  .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand door" "nav lang"; align-items: center; gap: 12px 12px; }
  .head .brand { grid-area: brand; }
  .head .nav { grid-area: nav; gap: 4px 18px; }
  .head .lang { grid-area: lang; margin-left: 0; justify-self: end; }
  .head .lang button { min-width: 30px; min-height: 30px; padding: 0 5px; font-size: 11px; }
  .mini-door { position: static; grid-area: door; width: auto; justify-self: end; }
  .mini-door .md-t { display: none; }
  .mini-door .md-win { width: 36px; }
  .ai-top > span.mono.mute:first-child { display: none; }
}

/* Móvil: rótulo pequeño a la izquierda del visor, en dos líneas («Production / Design →») */
@media (max-width: 860px) {
  .mini-door { display: flex; flex-direction: row-reverse; align-items: center; gap: 9px; text-decoration: none; }
  .mini-door .md-t { display: block; max-width: 11ch; text-align: right; margin: 0; font-size: 9px; line-height: 1.25; }
}
/* Móvil: rótulo en una sola línea */
@media (max-width: 860px) { .mini-door .md-t { max-width: none; white-space: nowrap; font-size: 10px; } }

/* Películas · rejillas sin recuadros vacíos al final */
/* «The Palau, frame by frame»: 12 fotos con dos grandes (2×2) llenan justo 3 columnas (en 4 sobraban dos casillas) */
@media (min-width: 861px) { .plate-grid.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 24 oct (Agustí): el visor de Production Design, un cuarto más pequeño (300 → 225 px) y su rótulo en una sola línea,
   más pequeño. Los años pasan a la línea de debajo. Sigue subrayado y con flecha para que se vea que es un enlace. */
.lens[data-shape="round"] .lens-win { width: min(100%, 225px); }
.lens[data-shape="round"] .lens-win video { inset: 17px; width: calc(100% - 34px); height: calc(100% - 34px); }
.lens[data-shape="round"] .lens-win::before { inset: 16px; }
.lens-t { white-space: nowrap; text-wrap: nowrap; font-size: clamp(13px, 1.12vw, 18px); font-stretch: 100%; letter-spacing: -.01em; }
.lens-s { font-size: 13px; }
.lens-s .lens-y { font-size: 1em; vertical-align: 0; }
.lens-s { max-width: none; white-space: nowrap; }

/* 24 oct (Agustí) · Portada en ordenador:
   - La presentación (título, texto y «Entra en las películas») más grande: es lo importante.
   - El visor de Production Design sube arriba a la derecha, casi debajo de CA · ES · EN, con el texto centrado debajo del círculo.
   - Sin 3D, las piezas tampoco van en ventanas: una sola imagen que pasa a la siguiente (como el campo). */
@media (min-width: 861px) {
  .hero { align-items: start; padding-top: 0; }
  .hero h1 { font-size: clamp(60px, 9.4vw, 170px); line-height: .88; }
  .hero .lede { font-size: clamp(18px, 1.65vw, 26px); max-width: 32ch; }
  .door { font-size: clamp(20px, 1.9vw, 28px); }
  .lens[data-shape="round"] { justify-self: end; justify-items: center; text-align: center; padding-top: 0; margin-top: -6px; }
  .lens[data-shape="round"] .ff { justify-items: center; }
  .lens[data-shape="round"] .lens-link { justify-items: center; }
  .lens[data-shape="round"] .lens-t { justify-self: center; }
}
.flat { display: grid; grid-template-columns: minmax(0, 1fr); }
.flat a, .flat a:first-child { grid-area: 1 / 1; justify-self: start; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s .9s; }
.flat a.on { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
.flat .frame, .flat .hole { aspect-ratio: 16/9; width: auto; height: clamp(200px, calc(100svh - 600px), 640px); max-width: 100%; }
.flat .frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .flat .frame, .flat .hole { height: auto; width: 100%; } }
.field-btns.flat-on { display: flex; }
@media (max-width: 860px) { .flat { grid-template-columns: minmax(0, 1fr); } }

/* 24 oct (Agustí), 2.ª vuelta · Portada en ordenador:
   - «AI Filmmaking» algo más pequeño; debajo, UNA línea que llega justo hasta el final del título (site.js ajusta su tamaño).
   - «Enter the films» baja a la barra de abajo, junto a las flechas.
   - La imagen que se forma, mucho más grande: ocupa todo el hueco libre de la izquierda, sin pisar el visor. */
.lede-line { margin: 0; color: var(--fg); font: 500 clamp(17px, 1.6vw, 26px)/1.2 var(--display); letter-spacing: -.005em; }
.lede-line span { display: inline-block; white-space: nowrap; }
.door-s { font-size: clamp(16px, 1.15vw, 19px); padding-block: 8px; margin-right: 18px; align-self: center; }
.field-btns { align-items: center; }
html:not(.gl) .field-btns:not(.flat-on) { display: flex; }
html:not(.gl) .field-btns:not(.flat-on) .btn { display: none; }
@media (min-width: 861px) {
  .hero h1 { font-size: clamp(52px, 7.2vw, 128px); line-height: .95; }
  .ai-top { gap: 12px; justify-items: start; }
  .ai-top > h1 { width: fit-content; }
  .flat .frame, .flat .hole { height: clamp(220px, calc(100svh - 430px), 760px); }
}
@media (max-width: 860px) {
  .lede-line span { white-space: normal; }
  .door-s { margin-right: auto; }
}
@media (min-width: 861px) { .hero .ai { align-self: stretch; } html.gl .gl-room { min-height: 0; } }

/* 24 oct, 3.ª vuelta: la línea manda (tamaño fijo, una sola línea) y el título se ajusta a su ancho (site.js) */
.lede-line { font-size: clamp(18px, 1.7vw, 30px); color: var(--fg); }
@media (min-width: 861px) { .lede-line span { white-space: nowrap; } }

/* 24 oct: el nombre, más grande. Production Design sale del menú (ya está el visor) */
.brand { font-size: clamp(22px, 2.3vw, 34px); }

/* 24 oct, tarde (Agustí): todo el paquete del visor de Production Design un tercio más pequeño en ordenador
   (círculo 225 → 150 px; rótulos en proporción, sin bajar de 11 px para que se sigan leyendo). */
@media (min-width: 861px) {
  .lens[data-shape="round"] { gap: 9px; }
  .lens[data-shape="round"] .lens-win { width: min(100%, 150px); }
  .lens[data-shape="round"] .lens-win video { inset: 11px; width: calc(100% - 22px); height: calc(100% - 22px); }
  .lens[data-shape="round"] .lens-win::before { inset: 10px; }
  .lens[data-shape="round"] .lens-enter { padding: 6px 11px 5px; font-size: 10px; }
  .lens .ff { font-size: 10px; }
  .lens-link { gap: 5px; }
  .lens-t { font-size: clamp(11px, .75vw, 13px); }
  .lens-s { font-size: 11px; }
}

/* 24 oct, tarde: con el visor pequeño, todo lo demás crece. La columna del visor se estrecha (24 → 16rem)
   y ese espacio pasa a la imagen; la frase (y con ella el título, que se ajusta a su ancho) es más grande. */
@media (min-width: 861px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); }
  .lede-line { font-size: clamp(22px, 2.15vw, 40px); }
}
@media (min-width: 861px) { .hero .ai { gap: 10px; } .fieldbar { padding-top: 14px; } }