/* Enrike Segarra — una revista de cine en papel blanco.
   Fondo mínimo: papel estucado de verdad. Cada apartado tiene su color, pero en pequeño:
   dos líneas negras que se cruzan y una celda de color (un Mondrian en miniatura).
   Títulos en Antonio (mayúsculas altas y finas, como los carteles de sus cortos);
   texto en Inter Tight. Las páginas se pasan como hojas. */

:root {
  --papel: #fbfaf7; --tinta: #151413; --gris: #7b776f;
  --rojo: #d63a2b; --azul: #1d4fa6; --amarillo: #f0bf22; --verde: #228754; /* el verde, de Actor: la «green room» de los actores */
  --titulo: 'Antonio', 'Oswald', 'Arial Narrow', sans-serif;
  --texto: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --suave: cubic-bezier(.22, .8, .2, 1);
  --corte: cubic-bezier(.7, 0, .2, 1);
  --margen: clamp(18px, 3.4vw, 52px);
  --hueco: clamp(6px, .9vw, 12px);
  --raya: 1.5px;                                      /* grosor de las líneas */
  --celda-a: clamp(30px, 4.4vw, 70px);                /* la celda de color: ancho y alto */
  --celda-h: clamp(15px, 1.8vw, 26px);
  --fondo: var(--papel) url("../img/papel/papel.webp?v=9") top center / 620px auto;
  --c: var(--tinta);
}
[data-color="azul"] { --c: var(--azul); }
[data-color="rojo"] { --c: var(--rojo); }
[data-color="amarillo"] { --c: var(--amarillo); }
[data-color="verde"] { --c: var(--verde); }
[data-color="negro"] { --c: var(--tinta); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden;
  color: var(--tinta); background: var(--fondo);
  font: 400 clamp(.95rem, .9rem + .2vw, 1.05rem)/1.45 var(--texto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }
[hidden] { display: none !important; }
.salto { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--tinta); color: var(--papel); padding: .7em 1em; }
.salto:focus { top: 12px; }
.nav, .cab-lema, .sub, .pieza-rot, .volver, .pasar, .sala-cerrar, .contacto dt, .ficha dt, .tambien h2, .mas, .vistas, .chivato, .reel-boton {
  font: 500 .72rem/1.3 var(--texto); letter-spacing: .13em; text-transform: uppercase;
}

/* ---------- cabecera ---------- */
.cab { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; padding: clamp(14px, 2.4vh, 26px) var(--margen); }
.nav { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 0 1.6em; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: .55em; text-decoration: none; padding: .5em 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .05em; height: 2px; background: var(--tinta); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--suave), height .3s var(--suave); }
.nav a[data-color]::after { background: var(--c); transform: none; }                 /* el color de cada apartado, justo debajo de su nombre */
.nav a:hover::after, .nav a[aria-current]::after { transform: none; height: 4px; }
.cab-nombre { font: 300 clamp(1.3rem, 1rem + 1.1vw, 2rem)/1 var(--titulo); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.cab-der { justify-self: end; display: flex; align-items: center; gap: 1.3em; min-width: 0; }
.cab-lema { text-align: right; color: var(--gris); white-space: nowrap; }
/* el idioma: pequeño, a la derecha. El que se lee y, al pulsarlo, la lista, en una hoja con su raya */
.idioma { position: relative; font: 500 .72rem/1.3 var(--texto); letter-spacing: .13em; text-transform: uppercase; }
.cab-lema + .idioma::before { content: ""; position: absolute; left: -.65em; top: 50%; width: 1px; height: 1.3em; margin-top: -.65em; background: var(--tinta); opacity: .3; }
.idioma-boton { display: inline-flex; align-items: center; gap: .55em; padding: .5em 0; letter-spacing: inherit; text-transform: inherit; color: var(--gris); transition: color .3s var(--suave); }
.idioma-boton:hover, .idioma.abierto .idioma-boton { color: var(--tinta); }
.idioma-boton svg { flex: none; }
.idioma-boton::after { content: ""; width: .36em; height: .36em; margin: -.2em 0 0 .1em; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg); transition: transform .4s var(--suave); }
.idioma.abierto .idioma-boton::after { transform: translateY(.22em) rotate(225deg); }
.idioma-lista { position: absolute; z-index: 70; right: 0; top: calc(100% + 6px); min-width: 13.5em; margin: 0; padding: .5em 0; list-style: none; background: var(--papel); border: var(--raya) solid var(--tinta); box-shadow: 0 22px 40px -26px rgba(20, 15, 10, .55); animation: entra .35s var(--suave) both; }
.idioma-lista a { display: flex; justify-content: space-between; align-items: baseline; gap: 2em; padding: .62em 1.2em; text-decoration: none; white-space: nowrap; outline-offset: -3px; }
.idioma-lista a i { font-style: normal; color: var(--gris); font-size: .9em; }
.idioma-lista a:hover, .idioma-lista a:focus-visible { background: rgba(21, 20, 19, .06); }
.idioma-lista a[aria-current] { box-shadow: inset 4px 0 0 var(--tinta); }
/* cada escritura con su letra: Antonio no tiene cirílico (el ruso toma Oswald) ni chino o japonés (los del sistema, sin tanto aire entre signos) */
:lang(zh), :lang(ja) { --titulo: 'Antonio', 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Yu Gothic UI', 'Noto Sans CJK SC', sans-serif; }
:lang(ja) { --titulo: 'Antonio', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; }
:lang(zh) body, :lang(ja) body { line-height: 1.7; }
:lang(zh) :is(.nav, .cab-lema, .sub, .pieza-rot, .volver, .pasar, .mas, .vistas, .estilos, .chivato, .reel-boton, .a-rotulo, .a-meta, .indice button, .idioma-lista a),
:lang(ja) :is(.nav, .cab-lema, .sub, .pieza-rot, .volver, .pasar, .mas, .vistas, .estilos, .chivato, .reel-boton, .a-rotulo, .a-meta, .indice button, .idioma-lista a) { letter-spacing: .06em; font-size: .8rem; }
:lang(zh) :is(.titulo h1, .titulo h2, .proy h1, .capitulo h2, .a-sub, .a-titulo), :lang(ja) :is(.titulo h1, .titulo h2, .proy h1, .capitulo h2, .a-sub, .a-titulo) { font-weight: 300; line-height: 1.15; letter-spacing: .04em; }
:lang(zh) .capitulo h2, :lang(ja) .capitulo h2 { max-width: 11em; font-size: clamp(1.6rem, 2.7vw, 2.5rem); line-height: 1.3; }
:lang(zh) .capitulo:first-child h2, :lang(ja) .capitulo:first-child h2 { max-width: 10em; font-size: clamp(1.9rem, 3.4vw, 3.2rem); }
:lang(zh) .about-texto p, :lang(ja) .about-texto p { max-width: 34em; line-height: 1.9; }
:lang(zh) .about-texto .firma, :lang(ja) .about-texto .firma { font-family: var(--titulo); }
:lang(ru) .capitulo h2, :lang(ru) .about-texto .firma { font-family: var(--titulo); }
body[data-seccion="home"] .cab-nombre { visibility: hidden; } /* en la home el nombre es el titular grande */

/* ---------- el motivo: dos líneas que se cruzan y una celda de color ---------- */
.titulo { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem; padding-bottom: clamp(8px, 1.4vh, 16px); margin-bottom: clamp(22px, 4vh, 44px); }
.titulo::before, .cruz::before { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; bottom: 0; height: var(--raya); background: var(--tinta); } /* la horizontal, de borde a borde */
.titulo::after { content: ""; position: absolute; left: -22px; top: -16px; bottom: -34px; width: var(--raya); background: var(--tinta); }                 /* la vertical que la cruza */
.celda { background: var(--c); width: var(--celda-a); height: var(--celda-h); }
.titulo .celda { position: absolute; left: 0; top: 100%; width: clamp(64px, 9vw, 150px); height: 8px; }  /* el color, justo debajo del título */
.titulo h1, .titulo h2, .proy h1 { font: 300 clamp(3rem, 1.4rem + 7vw, 7.4rem)/.95 var(--titulo); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.titulo h2 { font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6rem); }
.proy h1 { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.8rem); }
.sub { color: var(--gris); }

/* ---------- HOME: el cartel ---------- */
.cartel { display: grid; place-items: start center; padding: clamp(4px, 1.2vh, 14px) var(--margen) 0; }
.escena { --w: min(86vw, 1400px, (100svh - 236px) / .763); position: relative; width: var(--w); container-type: inline-size; }
.escena::before { content: ""; position: absolute; left: -22px; top: -2cqw; bottom: -2.4cqw; width: var(--raya); background: var(--tinta); }
.titular { margin: 0; text-align: center; white-space: nowrap; font: 300 var(--tam, 17.5cqw)/.9 var(--titulo); letter-spacing: .012em; text-transform: uppercase; }
.titular > span { display: inline-block; }
.cruz { position: relative; height: 0; margin: 1.4cqw 0 2.1cqw; }
.cruz .celda { position: absolute; right: calc(100% + 22px); display: block; transition: width .5s var(--suave); }
.cruz .celda:nth-child(1) { top: 6px; }
.cruz .celda:nth-child(2) { top: calc(12px + var(--celda-h)); }
.cruz .celda:nth-child(3) { top: calc(18px + var(--celda-h) * 2); }
.cruz .celda:nth-child(4) { top: calc(24px + var(--celda-h) * 3); }
.cruz .celda:hover, .cruz .celda:focus-visible { width: calc(var(--celda-a) * 1.5); }
.c-azul { --c: var(--azul); } .c-rojo { --c: var(--rojo); } .c-verde { --c: var(--verde); } .c-amarillo { --c: var(--amarillo); }
.pantalla { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0c0c0c; } /* 16:9, como el reel: se ve entero, sin recortar nada */
.reel-fondo img, .reel-fondo iframe { position: absolute; left: 50%; top: 50%; width: 100%; height: auto; min-height: 100%; aspect-ratio: 16 / 9; max-width: none; transform: translate(-50%, -50%); object-fit: cover; border: 0; }
.reel-fondo iframe { opacity: 0; transition: opacity .7s var(--suave); pointer-events: none; }
.reel-fondo iframe.listo { opacity: 1; }
.reel-boton { position: absolute; z-index: 3; right: 2.4cqw; top: 2.2cqw; color: var(--papel); font-size: max(.86cqw, 10px); padding: .9em 0 .7em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; text-shadow: 0 0 12px rgba(0, 0, 0, .5); transition: letter-spacing .5s var(--suave); }
.reel-boton::before { content: "▶"; font-size: .8em; margin-right: .9em; }
.reel-boton:hover { letter-spacing: .22em; }
@keyframes abre { from { clip-path: inset(49.6% 0 49.6% 0); } to { clip-path: inset(0); } }
@keyframes sube { from { opacity: 0; transform: translateY(.14em); } }
.estreno .titular > span { animation: sube 1.3s var(--suave) .1s backwards; }
.estreno .pantalla { animation: abre 1.6s var(--corte) .5s backwards; }

/* debajo del reel: las fotos y las películas, a la vista */
.muestra { width: 100%; max-width: calc(1500px + 2 * var(--margen)); margin: 0 auto; padding: clamp(64px, 12vh, 140px) var(--margen) 0; }
.cartel + .muestra { padding-top: clamp(40px, 6.5vh, 76px); } /* pegada al reel: su título asoma y da pie a seguir bajando */
.muestra:last-of-type { padding-bottom: clamp(50px, 9vh, 110px); }
.mas { display: block; width: max-content; margin: clamp(26px, 5vh, 54px) auto 0; text-decoration: none; padding: .7em 0 .55em; background: linear-gradient(var(--c), var(--c)) 0 100% / 100% var(--raya) no-repeat; }
.mas::after { content: "→"; margin-left: .8em; display: inline-block; transition: transform .5s var(--suave); }
.mas:hover::after { transform: translateX(.4em); }

/* la tira: una fila de imágenes grandes que cruza la página de lado a lado y se desliza sola */
.tira { --alto: clamp(230px, 46vh, 520px); min-height: var(--alto); /* reserva su altura antes de que el JS la rellene: sin saltos de página */ display: flex; gap: var(--hueco); overflow-x: auto; scrollbar-width: none; margin-inline: calc(50% - 50vw); padding-inline: var(--margen); cursor: grab; }
.tira::-webkit-scrollbar { display: none; }
.tira.arrastra { cursor: grabbing; }
.tira .teja { flex: none; height: var(--alto); }
.tira .teja img, .tira .teja video { display: block; height: 100%; width: auto; max-width: none; pointer-events: none; }
.tira .teja-video { background: #0c0c0c; }
.tira .teja-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--suave); }
.tira .teja-video iframe.listo { opacity: 1; }
.tira .teja-video .clip-rot { z-index: 2; }
/* el mosaico: todas las fotos, grandes, en filas que llenan el ancho */
.mosaico { --alto: clamp(112px, 15.5vw, 240px); display: flex; flex-wrap: wrap; gap: var(--hueco); }
.mosaico::after { content: ""; flex: 1000 1 0; } /* la última fila no se estira */
.mosaico.justo::after { content: none; } /* repartido en filas justas (js): ya no hace falta */
.mosaico .teja { flex: var(--r) 1 calc(var(--r) * var(--alto)); height: var(--alto); overflow: hidden; transition: opacity .5s var(--suave); }
.mosaico .teja img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--suave); }
.mosaico .teja:hover img { transform: scale(1.04); }
.teja { display: block; background: rgba(21, 20, 19, .06); }
#todas.enfocado .teja { opacity: .22; }
#todas.enfocado .teja.viva { opacity: 1; }
.chivato { position: fixed; z-index: 60; left: 0; top: 0; pointer-events: none; background: var(--tinta); color: var(--papel); font-size: .64rem; padding: .7em .9em; opacity: 0; transition: opacity .25s var(--suave); white-space: nowrap; }
.chivato.visible { opacity: 1; }
.chivato i { font-style: normal; color: #b9b4aa; margin-left: .8em; }
.chivato b { font-weight: 600; margin-left: 1.1em; }

/* ---------- apartados ---------- */
.interior { flex: 1; padding: clamp(26px, 5vh, 64px) var(--margen) clamp(50px, 9vh, 110px); }
.col { max-width: 1040px; margin: 0 auto; }
.col.ancho { max-width: 1500px; }
#v-filmmaker .col { max-width: 1280px; } /* los carteles, algo más grandes; siguen cabiendo cuatro por fila */
.vistas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2.2em; margin-bottom: clamp(24px, 4.5vh, 48px); }
.vistas button { padding: .7em 0 .55em; color: var(--gris); background: linear-gradient(var(--c), var(--c)) 0 100% / 0 var(--raya) no-repeat; transition: background-size .5s var(--suave), color .3s var(--suave); }
.vistas button[aria-pressed="true"] { color: var(--tinta); background-size: 100% var(--raya); }
.vistas sup { font-size: .82em; margin-left: .5em; letter-spacing: .04em; }
.rejilla.cambia .pieza, .mosaico.cambia .teja { animation: entra .6s var(--suave) both; }
/* «Todas», por estilos: tono · color · tema, separados por una rayita */
.estilos { --e-rojo: var(--rojo); --e-azul: var(--azul); --e-rosa: #e58fb4; --e-calido: #d9902f; --e-verde: #4f8a5b; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .1em 1.5em; margin: calc(clamp(24px, 4.5vh, 48px) * -.45) auto clamp(22px, 4vh, 40px); max-width: 1200px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.estilos button { padding: .7em 0 .5em; color: var(--gris); background: linear-gradient(var(--c), var(--c)) 0 100% / 0 var(--raya) no-repeat; transition: background-size .5s var(--suave), color .3s var(--suave); white-space: nowrap; }
.estilos button:hover { color: var(--tinta); }
.estilos button[aria-pressed="true"] { color: var(--tinta); background-size: 100% var(--raya); }
.estilos sup { font-size: .82em; margin-left: .45em; letter-spacing: .04em; }
.estilos .con-color::before { content: ""; display: inline-block; width: .62em; height: .62em; margin-right: .55em; background: var(--tinte); }
.estilos .corte { width: var(--raya); height: 1.3em; background: var(--tinta); opacity: .35; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

.rejilla { --cols: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hueco); } /* una fila incompleta, al final, queda centrada */
.rejilla > .pieza { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--hueco)) / var(--cols)); min-width: 0; }
.pieza { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; text-decoration: none; }
.pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--suave); }
.pieza:hover img, .pieza:focus-visible img { transform: scale(1.035); }
/* la etiqueta de cada tarjeta, igual en todas: ocupa siempre todo el ancho; arriba el título y debajo, a un lado el año
   (o las fotos) y al otro «Ver pieza →». Sobria: papel liso, una raya fina del color del apartado bajo la acción. */
.pieza-rot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .5em 1em; background: rgba(251, 250, 247, .97); color: var(--tinta); font-size: .62rem; line-height: 1.35; padding: .85em .95em .8em; opacity: 0; transform: translateY(100%); transition: transform .45s var(--suave), opacity .3s var(--suave); }
.pieza-rot strong { grid-column: 1 / -1; font-weight: 500; letter-spacing: .1em; }
.pieza-rot i { grid-column: 1; font-style: normal; color: var(--gris); white-space: nowrap; }
.pieza-rot b { grid-column: 2; justify-self: end; font-weight: 500; white-space: nowrap; padding-bottom: .2em; background: linear-gradient(var(--c), var(--c)) 0 100% / 100% 1px no-repeat; }
.pieza-rot b::after { content: " →"; }
/* al señalar una serie van pasando sus fotos; las rayitas de arriba dicen cuántas hay */
.pase { position: absolute; inset: 0; display: flex; gap: var(--hueco); background: var(--papel); opacity: 0; transition: opacity .45s var(--suave); pointer-events: none; }
.pase.visible { opacity: 1; }
.pase img, .tira .teja .pase img, .pieza .pase img { flex: 1 1 0; min-width: 0; width: auto; height: 100%; max-width: none; object-fit: cover; transform: none; }
.pase-marcas { position: absolute; z-index: 2; left: 8px; right: 8px; top: 8px; display: flex; gap: 3px; pointer-events: none; mix-blend-mode: difference; }
.pase-marcas i { flex: 1; height: 2px; background: rgba(255, 255, 255, .38); transition: background-color .3s var(--suave); }
.pase-marcas i.hecha { background: #fff; }
.pieza:hover .pieza-rot, .pieza:focus-visible .pieza-rot { opacity: 1; transform: none; }

/* al señalar un cartel, la película corre en una ventanita que flota sobre él */
.tira .teja { position: relative; }
.pieza-rot { z-index: 2; }
.previas { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
/* cerradas esperan dentro de la página, invisibles: fuera de ella el navegador las frena */
.previa { position: absolute; left: 0; top: 0; width: 360px; aspect-ratio: 16 / 9; overflow: hidden; background: #0c0b0a; opacity: 0; transform: scale(.955); box-shadow: 0 2px 6px rgba(20, 15, 10, .25), 0 26px 50px -22px rgba(20, 15, 10, .65); transition: opacity .2s var(--suave), transform .4s var(--suave); }
.previa.abierta { opacity: 1; transform: none; }
.previa > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(.66); } /* el fotograma fijo, mientras llega la película */
.previa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--suave); }
.previa.lista iframe { opacity: 1; }
.previa.lista > img { opacity: 0; transition: opacity .3s .3s; } /* con la película ya en marcha, el fotograma se retira: que no asome por los lados */
.previa-yt iframe { top: -100%; height: 300%; } /* más alto que la ventana: los rótulos de YouTube quedan fuera de plano */
.previa.abierta:not(.lista)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rojo); transform-origin: 0 50%; animation: cargando 1s var(--suave) infinite; }
@keyframes cargando { from { transform: scaleX(0); } 70% { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
.previa.abierta:not(.lista) > img { animation: acercar 7s linear both; } /* mientras tanto el fotograma se acerca despacio: no parece parado */
@keyframes acercar { to { transform: scale(1.09); } }
.pieza > img, .tira .teja > img { transition: filter .5s var(--suave), transform 1.1s var(--suave); }
.con-previa > img { filter: brightness(.5) saturate(.8); }
/* los carteles de Filmmaker van enteros: la imagen entera (sin recorte) y el rótulo debajo, nunca encima de los créditos */
.pieza.pieza-cine { aspect-ratio: auto; overflow: visible; display: flex; flex-direction: column; }
.pieza-cine > img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; flex: none; }
.pieza-cine:hover > img, .pieza-cine:focus-visible > img { transform: none; }
.pieza-cine .pieza-rot { position: static; flex: 1; grid-template-rows: 1fr auto; opacity: 1; transform: none; background: none; padding: .9em .1em .35em; } /* el año y «Ver pieza» siempre a la misma altura, tenga el título una línea o dos */

.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.about img { width: 100%; }
@media (min-width: 761px) { .about > :first-child { position: sticky; top: 24px; } } /* el texto es largo: el retrato acompaña mientras se lee */
/* el texto, como un reportaje: capítulos numerados con titular grande, para leerlo a saltos */
.about-texto p { max-width: 58ch; margin-bottom: 1em; }
.capitulo { padding: clamp(20px, 3.4vh, 34px) 0 clamp(8px, 1.4vh, 14px); border-top: var(--raya) solid var(--tinta); }
.capitulo:first-child { border-top: 0; padding-top: 0; }
.capitulo h2 { font-family: "Antonio", sans-serif; font-weight: 300; text-transform: uppercase; line-height: 1; letter-spacing: .01em; font-size: clamp(1.9rem, 3.5vw, 3.3rem); margin: 0 0 .5em; max-width: 16ch; text-wrap: balance; }
.capitulo h2 i { display: block; font: 600 .7rem/1 "Inter Tight", sans-serif; font-style: normal; letter-spacing: .16em; margin-bottom: 1.1em; }
.capitulo h2 i::before { content: ""; display: inline-block; width: 2.6em; height: 6px; margin-right: .8em; background: var(--c); vertical-align: middle; }
.capitulo h2 + p { font-size: 1.14em; line-height: 1.45; }
.capitulo:first-child h2 { font-size: clamp(2.4rem, 4.8vw, 4.6rem); max-width: 14ch; }
/* About me, para leerlo jugando: foco en el capítulo que se lee, subrayados que se dibujan, índice y tamaño de letra */
.about-texto { --letra: 1; font-size: calc(1em * var(--letra)); }
.capitulo { cursor: zoom-in; transition: opacity .6s var(--suave), transform .7s var(--suave), font-size .5s var(--suave); transform-origin: 0 50%; outline: 0; }
.con-foco .capitulo { opacity: .32; }
.con-foco .capitulo.activo, .con-foco .capitulo.cerca { opacity: 1; }
.capitulo.cerca { cursor: zoom-out; font-size: 1.24em; }
.capitulo.cerca h2 { font-size: clamp(2.6rem, 5.4vw, 5rem); }
.capitulo mark { color: inherit; background: linear-gradient(var(--c), var(--c)) 0 88% / 0 .42em no-repeat; transition: background-size 1.1s var(--suave) .35s; padding: 0 .08em; margin: 0 -.08em; }
.capitulo.activo mark, .capitulo.visto mark, .capitulo.cerca mark { background-size: 100% .42em; }
.capitulo mark + mark, .capitulo p + p mark { transition-delay: .8s; }
.indice { display: grid; gap: .1em; margin-top: 1.4em; }
.indice button { display: flex; gap: .9em; align-items: baseline; text-align: left; padding: .34em 0; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); transition: color .3s var(--suave), transform .4s var(--suave); }
.indice button i { font-style: normal; font-weight: 600; flex: none; width: 1.6em; }
.indice button:hover, .indice button[aria-current="true"] { color: var(--tinta); transform: translateX(.5em); }
.indice button[aria-current="true"] i { box-shadow: 0 5px 0 -1px var(--c); }
.letra { display: flex; gap: 1.1em; margin-top: 1.2em; font-size: .72rem; letter-spacing: .08em; }
.letra button { padding: .3em 0; border-bottom: var(--raya) solid var(--tinta); }
.letra button:hover { color: var(--gris); }
@media (max-width: 760px) { .indice, .letra { display: none; } .capitulo.cerca { font-size: 1.12em; } }
@media (prefers-reduced-motion: reduce) { .con-foco .capitulo { opacity: 1; } .capitulo mark { background-size: 100% .42em; transition: none; } }
.about-texto .firma { margin-top: 1.6em; font-family: "Antonio", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 1.3rem; }

.contacto { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .7em 1.8em; align-items: baseline; }
.contacto dt { color: var(--gris); }
.contacto dd a { font: 300 clamp(1.6rem, 1rem + 3.4vw, 4rem)/1.1 var(--titulo); letter-spacing: .03em; text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(var(--tinta), var(--tinta)) 0 100% / 0 var(--raya) no-repeat; transition: background-size .6s var(--suave); }
.contacto dd a:hover { background-size: 100% var(--raya); }

/* ---------- proyecto ---------- */
.volver { display: inline-block; text-decoration: none; color: var(--gris); padding: .5em 0; margin-bottom: 1.2rem; transition: color .3s var(--suave); }
.volver:hover { color: var(--tinta); }
.reproductor { position: relative; aspect-ratio: 16 / 9; background: #0c0c0c; margin-bottom: clamp(22px, 4vh, 40px); }
.reproductor iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.aviso { max-width: 46ch; margin-bottom: clamp(22px, 4vh, 40px); }
.ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); max-width: 36rem; margin-bottom: clamp(30px, 6vh, 64px); font-size: .96rem; }
.ficha dt, .ficha dd { padding: .6em 0; border-top: 1px solid rgba(21, 20, 19, .18); }
.ficha dt { padding-right: 2.6em; line-height: 2; color: var(--gris); }
.fila { display: flex; gap: var(--hueco); margin-bottom: var(--hueco); justify-content: center; }
.fila figure { flex: var(--r) 1 0; aspect-ratio: var(--r); overflow: hidden; }
.fila.sola-v figure { flex: 0 1 min(100%, 86svh * var(--r)); }
.fila img { width: 100%; height: 100%; object-fit: cover; }
.tambien { margin-top: clamp(54px, 10vh, 110px); border-top: var(--raya) solid var(--tinta); padding-top: 18px; }
.tambien h2 { margin-bottom: 14px; color: var(--gris); }

/* ---------- pasar página ---------- */
.pasar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 10px var(--margen) clamp(14px, 2.6vh, 26px); }
.pasar a { text-decoration: none; padding: .7em 0; width: max-content; transition: color .3s var(--suave); }
.pasar a:hover { color: var(--gris); }
.pasar-atras::before { content: "←"; margin-right: .8em; }
.pasar-delante { justify-self: end; grid-column: 3; }
.pasar-delante::after { content: "→"; margin-left: .8em; }
.pasar-folio { grid-column: 2; color: var(--gris); }

/* ---------- el visor: una foto sola, a página entera ---------- */
.visor { position: fixed; inset: 0; z-index: 85; background: var(--fondo); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.visor-foto { height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 14px; padding: clamp(54px, 8vh, 80px) 0 clamp(16px, 3vh, 30px); }
.visor-foto img { max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; align-self: center; }
.visor-foto figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .4em 1.6em; font: 500 .72rem/1.3 var(--texto); letter-spacing: .13em; text-transform: uppercase; color: var(--gris); }
.visor-foto figcaption b { font: 400 1.25rem/1 var(--titulo); letter-spacing: .08em; color: var(--tinta); }
.visor-foto figcaption a { color: var(--tinta); text-decoration: none; padding-bottom: .3em; background: linear-gradient(var(--c), var(--c)) 0 100% / 100% 2px no-repeat; }
.visor-paso { align-self: stretch; padding: 0 var(--margen); font-size: 1.5rem; transition: color .3s var(--suave); }
.visor-paso:hover { color: var(--gris); }
.visor-cerrar { position: absolute; z-index: 1; right: var(--margen); top: 18px; padding: 1em 0; font: 500 .72rem/1.3 var(--texto); letter-spacing: .13em; text-transform: uppercase; }

/* ---------- sala de proyección y la hoja que pasa ---------- */
.sala { position: fixed; inset: 0; z-index: 90; background: #0b0b0b; display: grid; place-items: center; }
.sala-pantalla { width: min(94vw, 84svh * 16 / 9); aspect-ratio: 16 / 9; background: #000; }
.sala-pantalla iframe { width: 100%; height: 100%; border: 0; display: block; }
.sala-cerrar { position: absolute; right: var(--margen); top: 18px; color: var(--papel); padding: 1em 0; }
.hoja { position: fixed; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; background: var(--fondo); border: 0 solid var(--c); } /* el canto de la hoja lleva el color del apartado al que vas */
.hoja::before { content: ""; position: absolute; inset: 0 100% 0 auto; width: 70px; background: linear-gradient(90deg, rgba(40, 30, 20, 0), rgba(40, 30, 20, .2)); }
.hoja::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 110px; background: linear-gradient(90deg, rgba(40, 30, 20, .1), rgba(40, 30, 20, 0)); }
.hoja.de-derecha { visibility: visible; transform: translateX(104%); border-left-width: 7px; }
.hoja.de-izquierda { visibility: visible; transform: translateX(-104%); border-right-width: 7px; }
.hoja.de-izquierda::before { inset: 0 auto 0 100%; transform: scaleX(-1); }
.hoja.de-izquierda::after { inset: 0 0 0 auto; transform: scaleX(-1); }
.hoja.pasa { transform: none; transition: transform .72s var(--corte); }
.hoja.fuera { opacity: 0; transition: opacity .4s var(--suave); }

/* ---------- pantallas medianas y estrechas ---------- */
@media (hover: none) { .pieza-rot { opacity: 1; transform: none; font-size: .56rem; } }
@media (max-width: 1180px) {
  .cab { grid-template-columns: auto 1fr auto; }
  .cab-nombre { justify-self: end; }
  .cab-lema { display: none; }
  .idioma::before { display: none; }
}
@media (max-width: 1360px) { :root:not(:lang(es)):not(:lang(en)) .cab-lema, :root:not(:lang(es)):not(:lang(en)) .idioma::before { display: none; } } /* en otros idiomas el menú y el lema son más largos: el lema se retira antes */
@media (max-width: 1000px) and (min-width: 761px) { .rejilla { --cols: 3; } }
@media (max-width: 760px) {
  .estilos { gap: 0 1.2em; font-size: .62rem; }
  .vistas { flex-wrap: nowrap; gap: 0 clamp(8px, 3.2vw, 18px); font-size: min(.72rem, 3.05vw); } /* Todas · Ficción · Música · Documental · Animación: juntas, en una sola línea */
  .estilos .corte { flex-basis: 100%; width: auto; height: 0; opacity: 0; } /* en el móvil, cada grupo de filtros en su renglón */
  .cab { grid-template-columns: 1fr; justify-items: center; gap: .4rem; padding-top: 16px; }
  .cab-nombre { order: -1; justify-self: center; font-size: 1.5rem; }
  body[data-seccion="home"] .cab-nombre { display: none; }
  .cab-der { position: absolute; right: var(--margen); top: 13px; } /* el idioma, en la esquina: a la altura del nombre */
  body[data-seccion="home"] .cab { padding-top: 46px; }            /* en la portada no hay nombre arriba: el idioma tiene su renglón */
  .idioma-boton { padding: .7em 0; }
  .nav { gap: 0 1em; font-size: min(2.3vw, .64rem); letter-spacing: .07em; }
  .cartel { min-height: 0; padding-top: 22px; }
  .escena { --w: calc(100vw - 2 * var(--margen)); }
  .escena::before, .titulo::after { display: none; }
  .cruz { height: auto; margin: 3cqw 0 4cqw; padding-top: 8px; display: flex; gap: 6px; }
  .cruz::before { bottom: auto; top: 0; }
  .cruz .celda { position: static; --celda-a: 13cqw; --celda-h: 4cqw; }
  .pantalla { aspect-ratio: 16 / 9; }
  .reel-boton { font-size: 2.4cqw; right: 4cqw; top: 4cqw; }
  .titulo { justify-content: flex-start; }
  .titulo .celda { height: 6px; }
  .tira { --alto: 56vw; }
  .mosaico { --alto: 27vw; }
  .visor { grid-template-columns: minmax(0, 1fr); }
  .visor-paso { position: absolute; bottom: 8px; padding: 14px var(--margen); }
  .visor-paso[data-paso="-1"] { left: 0; }
  .visor-paso[data-paso="1"] { right: 0; }
  .visor-foto { padding-inline: 12px; padding-bottom: 64px; }
  .rejilla { --cols: 2; }
  .about, .contacto { grid-template-columns: 1fr; }
  .contacto dt { margin-top: .8em; }
  .fila.sola-v figure { flex-basis: 100%; }
}

/* ---------- ACTOR ---------- */
/* la escena en grande: con su título debajo cabe en la primera pantalla (y nunca baja de 560 px) */
.a-escena { width: min(100%, max(560px, (100svh - 395px) * 16 / 9)); margin: 0 auto; }
.a-pantalla { position: relative; aspect-ratio: 16 / 9; background: #0c0c0c; overflow: hidden; }
.a-pantalla > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: brightness(.82); transition: opacity .6s var(--suave); }
.a-pantalla iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s var(--suave); }
.a-pantalla.suena iframe { opacity: 1; }
.a-pantalla.suena > img, .a-pantalla.suena .a-play { opacity: 0; pointer-events: none; }
.a-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--papel); transition: opacity .5s var(--suave); }
.a-play span { display: grid; place-items: center; width: clamp(58px, 7vw, 96px); aspect-ratio: 1; border: var(--raya) solid currentColor; border-radius: 50%; background: rgba(12, 12, 12, .2); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background-color .4s var(--suave), color .4s var(--suave), transform .6s var(--suave); }
.a-play span::before { content: ""; margin-left: .14em; border-left: 1em solid currentColor; border-top: .62em solid transparent; border-bottom: .62em solid transparent; font-size: clamp(14px, 1.7vw, 22px); }
.a-play:hover span, .a-play:focus-visible span { background: var(--papel); color: var(--tinta); transform: scale(1.07); }
.a-pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: baseline; padding-top: clamp(12px, 2vh, 20px); }
.a-titulo { font: 300 clamp(1.7rem, 1.1rem + 1.7vw, 2.8rem)/1 var(--titulo); letter-spacing: .04em; text-transform: uppercase; }
.a-meta, .a-folio { font: 500 .72rem/1.3 var(--texto); letter-spacing: .13em; text-transform: uppercase; color: var(--gris); }
.a-meta { grid-column: 1; margin-top: .7em; }
.a-nota { grid-column: 1; max-width: 60ch; margin-top: .6em; color: var(--gris); font-size: .94rem; }
.a-folio { grid-column: 2; grid-row: 1; }
/* rótulos pequeños: una barrita del color del apartado y el nombre (Escenas, Retratos, Creativas) */
.a-rotulo { display: flex; align-items: center; margin: clamp(30px, 5.5vh, 56px) 0 clamp(12px, 2vh, 18px); font: 500 .72rem/1.3 var(--texto); letter-spacing: .13em; text-transform: uppercase; color: var(--gris); }
.a-rotulo::before { content: ""; width: 2.6em; height: 6px; margin-right: .9em; background: var(--c); }
.a-rotulo sup { font-size: .82em; margin-left: .5em; letter-spacing: .04em; }
/* la tira de escenas: la de la portada, con fotogramas pequeños; la que está en pantalla lleva el color debajo */
.tira.tira-escenas { --alto: clamp(118px, 13.5vw, 200px); }
.clip { position: relative; flex: none; height: var(--alto); aspect-ratio: 16 / 9; overflow: hidden; background: #0c0c0c; color: var(--papel); text-align: left; }
.clip img { width: 100%; height: 100%; max-width: none; object-fit: contain; filter: brightness(.78); transition: filter .5s var(--suave), transform 1.1s var(--suave); pointer-events: none; }
.clip:hover img, .clip:focus-visible img, .clip[aria-current="true"] img { filter: none; }
.clip:hover img, .clip:focus-visible img { transform: scale(1.035); }
.clip-rot { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 2.4em .9em .8em; font: 500 .64rem/1.3 var(--texto); letter-spacing: .13em; text-transform: uppercase; background: linear-gradient(transparent, rgba(12, 12, 12, .78)); }
.clip-rot i { font-style: normal; opacity: .75; white-space: nowrap; }
.clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--suave); }
.clip[aria-current="true"]::after { transform: none; }
/* el subtítulo de Actor es el índice: cada parte lleva a su sitio */
#sub-actor button { padding: .25em 0; color: inherit; background: linear-gradient(var(--c), var(--c)) 0 100% / 0 var(--raya) no-repeat; transition: background-size .5s var(--suave), color .3s var(--suave); }
#sub-actor button:hover, #sub-actor button:focus-visible { color: var(--tinta); background-size: 100% var(--raya); }
#a-escenas, .a-grupo { scroll-margin-top: clamp(16px, 4vh, 40px); }
/* las fotos: retratos (look actual, otros looks) y creativas; grandes, sin recortar */
.a-fotos { margin-top: clamp(64px, 12vh, 140px); }
.a-fotos > .titulo { margin-bottom: clamp(10px, 1.6vh, 18px); }
.a-fotos .a-rotulo { margin-top: clamp(22px, 4vh, 40px); }
.a-grupo + .a-grupo { margin-top: clamp(46px, 9vh, 100px); } /* Creativas se separa bien de Retratos */
.a-grupo + .a-grupo .a-rotulo { margin-top: 0; }
.a-sub-grupo { margin-top: clamp(16px, 3vh, 30px); }
.a-sub { margin: 0 0 clamp(10px, 1.8vh, 18px); font: 300 clamp(1.4rem, 1rem + 1.2vw, 2.1rem)/1 var(--titulo); letter-spacing: .04em; text-transform: uppercase; }
.a-sub sup { margin-left: .7em; font: 500 .72rem/1 var(--texto); letter-spacing: .06em; color: var(--gris); vertical-align: super; }
.mosaico.mosaico-a { --alto: clamp(190px, 28vw, 420px); } /* mientras no se reparten en filas (js), la rejilla normal */
.mosaico-a::after { content: none; }
.mosaico-a .teja { cursor: zoom-in; }
/* el reparto en filas (js): cada fila llena el ancho y, si no hay fotos para llenarlo, queda centrada; en cada fila,
   todas las fotos, a su proporción, tienen la misma altura (--h) */
.mosaico > .a-fila { flex: 0 0 100%; display: flex; justify-content: center; gap: var(--hueco); }
.a-fila .teja { flex: none; height: var(--h); width: calc(var(--r) * var(--h)); }
@media (max-width: 760px) {
  .tira.tira-escenas { --alto: 30vw; }
  .mosaico.mosaico-a { --alto: 52vw; }
  .clip-rot { font-size: .56rem; padding: 1.8em .7em .6em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}