/* ==========================================================================
   El fracaso como forma iconoclasta — hoja de estilo (v2)
   Escenario fijo de 1920×1080 escalado a la ventana. Navegación sólo con flechas.
   ========================================================================== */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }

:root {
  --negro: #0b0907;
  --tinta: #efe6d6;
  --tinta-2: #b8ab98;
  --tinta-3: #7d7264;
  --ocre: #d19a45;
  --rojo: #b8321f;
  --linea: rgba(239, 230, 214, .18);
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "Plex Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --dur: 700ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: var(--negro); color: var(--tinta); overflow: hidden; }
body { font-family: var(--serif); -webkit-font-smoothing: antialiased; }
i, em { font-style: italic; }

#escenario { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--negro); }

.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--dur) ease, visibility 0s linear var(--dur); }
.slide.activa { opacity: 1; visibility: visible; transition: opacity var(--dur) ease, visibility 0s; z-index: 2; }
.notas { display: none; }

/* grano de 16 mm (siempre en movimiento) */
#grano {
  position: absolute; inset: -50%; pointer-events: none; z-index: 50; opacity: .085; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 1.4 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grano 1s steps(6) infinite;
}
@keyframes grano { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- tipografía ---------- */
.rotulo { font-family: var(--mono); font-size: 19px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ocre); }
.rotulo .sep { color: var(--tinta-3); margin: 0 .6em; }
h1, h2 { font-weight: 400; line-height: .95; letter-spacing: -.01em; }
h1 { font-size: 120px; }
h2 { font-size: 84px; margin-top: 14px; }
.bajada { font-size: 42px; line-height: 1.15; }
.cuerpo { font-size: 36px; line-height: 1.26; }
.menor { font-size: 29px; line-height: 1.3; color: var(--tinta-2); }
.cita { font-size: 38px; line-height: 1.2; }
.cita .ref, .cuerpo .ref, .menor .ref, .bajada .ref { margin-left: .4em; }
.ref { font-family: var(--mono); font-size: 18px; letter-spacing: .02em; color: var(--tinta-3); white-space: nowrap; font-style: normal; }
.ocre { color: var(--ocre); }
.pie { font-family: var(--mono); font-size: 15px; line-height: 1.4; color: var(--tinta-3); margin-top: 10px; white-space: nowrap; }
.pie .num { color: var(--ocre); }
.sobre { position: absolute; z-index: 5; margin: 0; text-shadow: 0 1px 4px #000; color: var(--tinta-2); }

/* ---------- movimiento: acercamiento lento sobre imágenes fijas ---------- */
.kb { position: relative; overflow: hidden; background: #000; }
.kb img { width: 100%; height: 100%; object-fit: cover; display: block; animation: kb 26s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.kb.contener img { object-fit: contain; animation-name: kb-suave; }
.kb.o-izq img { transform-origin: 20% 45%; } .kb.o-der img { transform-origin: 80% 40%; } .kb.o-arr img { transform-origin: 50% 15%; }
.kb.lento img { animation-duration: 38s; }
@keyframes kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
@keyframes kb-suave { from { transform: scale(1); } to { transform: scale(1.05); } }

/* ---------- banda (tríptico del film) y cajas de video ---------- */
.banda { position: absolute; left: 0; width: 1920px; height: 480px; overflow: hidden; background: #000; }
.banda video { width: 100%; height: 100%; object-fit: cover; display: block; }
.banda::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--velo, rgba(11, 9, 7, .25)); }
.fundido-arriba::before, .fundido-abajo::before { content: ""; position: absolute; left: 0; right: 0; height: 170px; z-index: 3; pointer-events: none; }
.fundido-arriba::before { top: 0; background: linear-gradient(var(--negro), transparent); }
.fundido-abajo::before { bottom: 0; background: linear-gradient(transparent, var(--negro)); }
.caja { position: absolute; overflow: hidden; background: #000; }
.caja video, .caja > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recorte video { position: absolute; top: 0; height: 100%; width: auto; max-width: none; }

/* ---------- pasos (sólo flechas) ---------- */
.desde-1, .desde-2, .desde-3, .desde-4, .solo-0, .solo-1, .solo-2, .solo-3, .solo-4 { transition: opacity .7s ease, transform .7s ease, filter .7s ease; }
.desde-1, .desde-2, .desde-3, .desde-4 { opacity: 0; transform: translateY(14px); }
.slide[data-paso="1"] .desde-1, .slide[data-paso="2"] .desde-1, .slide[data-paso="3"] .desde-1, .slide[data-paso="4"] .desde-1,
.slide[data-paso="2"] .desde-2, .slide[data-paso="3"] .desde-2, .slide[data-paso="4"] .desde-2,
.slide[data-paso="3"] .desde-3, .slide[data-paso="4"] .desde-3,
.slide[data-paso="4"] .desde-4 { opacity: 1; transform: none; }
.slide:not([data-paso="0"]) .solo-0, .slide:not([data-paso="1"]) .solo-1, .slide:not([data-paso="2"]) .solo-2,
.slide:not([data-paso="3"]) .solo-3, .slide:not([data-paso="4"]) .solo-4 { opacity: 0; }

/* aparición escalonada al entrar a una pantalla */
.entra { opacity: 0; transform: translateY(18px); }
.slide.activa .entra { animation: entra .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.slide.activa .entra.d1 { animation-delay: .35s; } .slide.activa .entra.d2 { animation-delay: .7s; }
.slide.activa .entra.d3 { animation-delay: 1.05s; } .slide.activa .entra.d4 { animation-delay: 1.4s; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* ---------- chrome ---------- */
#progreso { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--ocre); z-index: 60; transition: width var(--dur) ease; }
#contador { position: absolute; right: 40px; bottom: 20px; font-family: var(--mono); font-size: 15px; color: var(--tinta-3); z-index: 60; letter-spacing: .1em; }
#parte { position: absolute; left: 40px; bottom: 20px; font-family: var(--mono); font-size: 15px; color: var(--ocre); opacity: .75; z-index: 60; letter-spacing: .12em; text-transform: uppercase; }
body.limpio #contador, body.limpio #progreso, body.limpio #parte { opacity: 0; }
#panel-notas { position: fixed; left: 0; right: 0; bottom: 0; max-height: 42vh; overflow: auto; z-index: 100; background: rgba(11, 9, 7, .94); border-top: 2px solid var(--ocre); padding: 18px 28px 24px; font-family: var(--mono); font-size: 15px; line-height: 1.55; transform: translateY(105%); transition: transform .35s ease; }
#panel-notas.visible { transform: none; }
#panel-notas h3 { font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ocre); margin-bottom: 8px; }
#panel-notas ul { padding-left: 18px; } #panel-notas li + li { margin-top: 4px; }
#negro-total { position: fixed; inset: 0; background: #000; z-index: 200; display: none; }
body.pantalla-negra #negro-total { display: block; }
#ayuda { position: fixed; right: 20px; top: 20px; z-index: 120; font-family: var(--mono); font-size: 14px; line-height: 1.7; background: rgba(11, 9, 7, .92); border: 1px solid var(--linea); padding: 16px 20px; display: none; }
#ayuda.visible { display: block; }
#ayuda kbd { font-family: inherit; color: var(--ocre); display: inline-block; min-width: 120px; }

/* ==========================================================================
   Pantallas
   ========================================================================== */

/* popurrí: capas de video que se relevan */
.popurri { overflow: hidden; background: #000; }
.popurri video.capa-popurri { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.empuje video { animation: kb-suave 16s ease-in-out infinite alternate; }
.popurri .sobre, .banda .sobre, .caja .sobre { z-index: 6; }

/* portada (mosaico) */
.mosaico { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 480px); grid-template-rows: repeat(3, 360px); background: #000; }
.mosaico > * { width: 480px; height: 360px; overflow: hidden; position: relative; }
.mosaico video, .mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.82) saturate(.95); }
.mosaico .kb img { animation-duration: 20s; }
.slide.activa .mosaico > * { animation: entra 1.2s ease both; }
.slide.activa .mosaico > :nth-child(3n+2) { animation-delay: .25s; } .slide.activa .mosaico > :nth-child(3n) { animation-delay: .5s; }
#portada .titular { position: absolute; left: 0; right: 0; top: 318px; height: 444px; background: rgba(11, 9, 7, .82); padding: 54px 96px 0; z-index: 5; }
#portada .titular h1 { font-size: 132px; margin-top: 20px; }
#portada .titular .bajada { margin-top: 26px; color: var(--tinta-2); max-width: 1180px; }
#portada .titular .firma { position: absolute; right: 96px; bottom: 46px; text-align: right; font-family: var(--mono); font-size: 18px; line-height: 1.6; color: var(--tinta-2); }
#portada .titular .firma .nombre { font-family: var(--serif); font-size: 40px; color: var(--tinta); }
#portada .sobre { right: 24px; bottom: 22px; }

/* el instante / la duración */
.instante .caja { left: 96px; top: 110px; width: 1100px; height: 825px; }
.instante .pie.bajo { position: absolute; left: 96px; top: 947px; }
.instante .tc { position: absolute; left: 124px; top: 134px; z-index: 6; font-family: var(--mono); font-size: 22px; letter-spacing: .08em; color: var(--tinta); background: rgba(11, 9, 7, .6); padding: 6px 12px; }
.instante .tc .ico { color: var(--ocre); margin-right: .5em; }
.instante .col { position: absolute; left: 1260px; top: 110px; width: 564px; height: 825px; }
.instante .col > * { position: absolute; left: 0; right: 0; }
.instante .col .rotulo { top: 0; }
.instante .col .cita { top: 60px; font-size: 44px; }
.instante .col .menor { top: 420px; }
#instante .col .cita.b2 { top: 330px; font-size: 30px; color: var(--tinta-2); }
#instante .col .menor { top: 610px; }

/* desde dónde hablo */
#desde-donde .banda { top: 0; height: 400px; --velo: rgba(11, 9, 7, .35); }
#desde-donde .rotulo.sup { position: absolute; left: 96px; top: 60px; z-index: 5; }
#desde-donde .sobre { right: 24px; top: 360px; }
#desde-donde .deixis { position: absolute; left: 96px; right: 96px; top: 430px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
#desde-donde .deixis .palabra { font-size: 112px; line-height: 1; font-style: italic; }
#desde-donde .deixis .glosa { font-family: var(--mono); font-size: 18px; color: var(--tinta-2); margin-top: 10px; letter-spacing: .02em; }
#desde-donde .sesgos { position: absolute; left: 96px; right: 96px; top: 636px; }
#desde-donde .sesgos .rotulo { color: var(--ocre); }
#desde-donde .sesgos ul { list-style: none; display: flex; flex-wrap: wrap; margin-top: 12px; }
#desde-donde .sesgos li { font-size: 34px; line-height: 1.15; }
#desde-donde .sesgos li + li::before { content: "·"; color: var(--ocre); margin: 0 16px; }
#desde-donde .sesgos .nota { margin-top: 16px; font-size: 26px; line-height: 1.24; color: var(--tinta-2); max-width: 1500px; }
#desde-donde .abajo { position: absolute; left: 96px; right: 96px; top: 856px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
#desde-donde .abajo .cita, #desde-donde .abajo .cuerpo { font-size: 30px; }

/* Martí: el eje */
#marti .banda { top: 0; height: 420px; --velo: rgba(11, 9, 7, .5); }
#marti .sobre { right: 24px; top: 380px; }
#marti .enc { position: absolute; left: 96px; top: 56px; right: 96px; z-index: 5; }
#marti .enc h2 { font-size: 76px; }
#marti .izq { position: absolute; left: 96px; top: 476px; width: 840px; }
#marti .izq .cita { font-size: 31px; line-height: 1.2; }
#marti .izq .cita + .cita { margin-top: 28px; }
#marti .izq .fuente { margin-top: 30px; font-family: var(--mono); font-size: 18px; letter-spacing: .06em; color: var(--ocre); }
#marti .der { position: absolute; left: 1000px; top: 470px; width: 824px; }
#marti .der .epigrafe p { font-size: 40px; line-height: 1.16; font-style: italic; }
#marti .der .remate { margin-top: 40px; font-size: 30px; line-height: 1.22; color: var(--tinta-2); }

/* Alexander Apóstol */
#apostol .banda { top: 0; height: 300px; --velo: rgba(11, 9, 7, .4); }
#apostol .sobre { right: 24px; top: 258px; }
#apostol .retrato { position: absolute; left: 96px; top: 344px; }
#apostol .retrato .kb { width: 420px; height: 210px; }
#apostol .retrato .pie { position: absolute; left: 0; top: 218px; }
#apostol .ficha-a { position: absolute; left: 560px; top: 334px; width: 1264px; }
#apostol .ficha-a h2 { font-size: 76px; margin-top: 4px; }
#apostol .ficha-a .cuerpo { margin-top: 14px; font-size: 29px; color: var(--tinta-2); }
#apostol .ficha-a .cita { margin-top: 20px; font-size: 29px; }
#apostol .obras-a { position: absolute; left: 96px; right: 96px; top: 640px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
#apostol .obras-a > div { position: relative; }
#apostol .obras-a .kb { width: 100%; height: 310px; }
#apostol .remate { position: absolute; left: 96px; right: 96px; top: 1010px; font-size: 34px; text-align: center; }
#apostol .remate i { color: var(--ocre); }

/* la obra */
#obra .banda { top: 0; height: 520px; }
#obra .banda::after { z-index: 2; background: rgba(11, 9, 7, .15); }
#obra .izq { position: absolute; left: 96px; top: 560px; width: 820px; }
#obra .izq h2 { font-size: 76px; }
#obra .izq .ficha { margin-top: 26px; font-family: var(--mono); font-size: 19px; line-height: 1.8; color: var(--tinta-2); }
#obra .der { position: absolute; left: 1000px; top: 580px; width: 824px; }
#obra .der .cita { font-size: 36px; }
#obra .der .cita + .cita { margin-top: 34px; }
#obra .sobre { right: 24px; top: 488px; }

/* Centeno Vallenilla */
#centeno .enc { position: absolute; left: 96px; top: 56px; right: 96px; }
#centeno .retrato-cv { position: absolute; left: 96px; top: 190px; }
#centeno .retrato-cv .kb { width: 460px; height: 714px; }
#centeno .retrato-cv .pie { position: absolute; left: 0; top: 722px; white-space: nowrap; }
#centeno .obras { position: absolute; left: 596px; top: 190px; display: flex; gap: 28px; }
#centeno .obras > div { position: relative; }
#centeno .obras .kb { height: 460px; }
#centeno .obras > div:nth-child(1) .kb { width: 230px; }
#centeno .obras > div:nth-child(2) .kb { width: 380px; }
#centeno .obras > div:nth-child(3) .kb { width: 560px; }
#centeno .texto { position: absolute; left: 596px; right: 96px; top: 704px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 56px; }
#centeno .texto p { font-size: 25px; line-height: 1.22; }
#centeno .texto .aclara { color: var(--ocre); font-style: italic; }
#centeno .tira { left: 0; width: 1920px; top: 962px; height: 118px; }
#centeno .tira video.capa-popurri { top: -160px; height: 480px; }
#centeno .tira .sobre { right: 24px; bottom: 24px; }

/* el mural del Círculo Militar, solo */
#mural > div { position: absolute; left: 285px; top: 56px; }
#mural .kb { width: 1350px; height: 900px; }
#mural .pie { margin-top: 14px; font-size: 17px; white-space: normal; }

/* Hércules americano */
#hercules .kb { position: absolute; left: 96px; top: 96px; width: 860px; height: 673px; }
#hercules .p-chacao { position: absolute; left: 96px; top: 778px; }
#hercules .der { position: absolute; left: 1030px; top: 96px; width: 794px; }
#hercules .der h2 { font-size: 88px; }
#hercules .der .cita { margin-top: 30px; font-size: 34px; }
#hercules .caja { left: 1030px; top: 560px; width: 560px; height: 420px; }
#hercules .p-papagayo { position: absolute; left: 1030px; top: 988px; }
#hercules .lado { position: absolute; left: 1624px; top: 560px; width: 200px; font-size: 30px; line-height: 1.15; color: var(--tinta-2); font-style: italic; }
#hercules .abajo { position: absolute; left: 96px; top: 850px; width: 860px; font-size: 34px; line-height: 1.22; }

/* beefcake */
#beefcake .kb { position: absolute; left: 96px; top: 96px; width: 600px; height: 886px; }
#beefcake .p-cover { position: absolute; left: 96px; top: 990px; }
#beefcake .der { position: absolute; left: 780px; top: 80px; width: 1044px; }
#beefcake .der h2 { font-size: 76px; }
#beefcake .der .cita { font-size: 32px; margin-top: 24px; }
#beefcake .der .cuerpo { font-size: 29px; margin-top: 22px; color: var(--tinta-2); }
#beefcake .caja { left: 780px; top: 640px; width: 440px; height: 330px; }
#beefcake .p-grupo { position: absolute; left: 780px; top: 978px; }
#beefcake > .cita { position: absolute; left: 1260px; top: 616px; width: 564px; font-size: 27px; line-height: 1.22; color: var(--tinta-2); }
#beefcake .remate { position: absolute; left: 1260px; top: 812px; width: 564px; font-size: 44px; line-height: 1.06; font-style: italic; color: var(--ocre); }
#beefcake .remate .ref { display: block; margin-top: 14px; font-style: normal; margin-left: 0; }

/* pares pintura ↔ escena */
.par .enc { position: absolute; left: 96px; top: 56px; right: 96px; }
.par .enc h2 { font-size: 72px; }
.par .fila { position: absolute; left: 96px; right: 96px; top: 196px; height: 560px; display: flex; justify-content: center; gap: 40px; }
.par .fila > div { position: relative; }
.par .fila .kb { height: 560px; }
.par .fila .caja { position: relative; width: 747px; height: 560px; }
.par .fila .etq { position: absolute; top: 14px; left: 14px; z-index: 7; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; background: rgba(11, 9, 7, .75); padding: 5px 9px; color: var(--ocre); }
.par .fila .caja .etq { color: var(--tinta); }
.par .retrata { position: absolute; left: 130px; right: 130px; top: 824px; font-size: 26px; line-height: 1.24; color: var(--tinta-2); text-align: center; }
.par .cambio { position: absolute; left: 160px; right: 160px; top: 936px; font-size: 40px; line-height: 1.15; text-align: center; }
.par .cambio em { color: var(--ocre); }

/* la otra voz (par + citas) */
#otra-voz .enc h2 { font-size: 68px; }
#otra-voz .fila { top: 186px; height: 500px; }
#otra-voz .fila .kb { height: 500px; }
#otra-voz .fila .caja { width: 667px; height: 500px; }
#otra-voz .voces { position: absolute; left: 96px; right: 96px; top: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
#otra-voz .voces .cita { font-size: 28px; line-height: 1.22; }
#otra-voz .cambio { top: 950px; font-size: 36px; }

/* tipos nacionales */
#tipos .enc { position: absolute; left: 96px; top: 48px; right: 96px; }
#tipos .enc h2 { font-size: 68px; }
#tipos .grilla-t { position: absolute; left: 96px; right: 96px; top: 190px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
#tipos .grilla-t > div { position: relative; }
#tipos .grilla-t .kb { width: 100%; height: 335px; }
#tipos .grilla-t .pie { position: absolute; left: 0; top: 343px; font-size: 20px; color: var(--tinta); letter-spacing: 0; text-transform: none; }
#tipos .grilla-t .pais { display: block; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-top: 4px; }
#tipos .abajo-t { position: absolute; left: 96px; top: 640px; width: 1080px; }
#tipos .abajo-t .cuerpo { font-size: 32px; line-height: 1.24; }
#tipos .abajo-t .remate { margin-top: 34px; font-size: 42px; line-height: 1.1; }
#tipos .abajo-t .remate em { color: var(--ocre); }
#tipos .conde { position: absolute; left: 1290px; top: 626px; width: 500px; }
#tipos .conde .kb { width: 252px; height: 315px; }
#tipos .conde .pie { position: static; margin-top: 12px; white-space: normal; max-width: 520px; }

/* censura / olvido / forclusión */
#forclusion .enc { position: absolute; left: 96px; top: 56px; right: 96px; }
#forclusion .enc h2 { font-size: 72px; }
#forclusion .tripa { position: absolute; left: 96px; right: 96px; top: 210px; height: 432px; display: flex; justify-content: center; gap: 6px; transition: gap .9s ease; }
#forclusion .toma { position: relative; width: 572px; height: 432px; overflow: hidden; background: #000; flex: 0 0 auto; transition: width 1s cubic-bezier(.7, 0, .2, 1), opacity .9s ease, filter .9s ease; }
#forclusion .toma video { position: absolute; top: 0; height: 432px; width: 1728px; max-width: none; }
#forclusion .toma:nth-child(1) video { left: 0; } #forclusion .toma:nth-child(2) video { left: -576px; } #forclusion .toma:nth-child(3) video { left: -1152px; }
#forclusion .toma .barra { position: absolute; left: 0; right: 0; top: 45%; height: 53%; background: #000; transform: scaleX(0); transform-origin: left; transition: transform .6s ease; z-index: 2; }
#forclusion[data-paso="1"] .toma.blanco .barra { transform: scaleX(1); }
#forclusion[data-paso="2"] .toma.blanco { opacity: .14; filter: blur(9px) grayscale(1); }
#forclusion[data-paso="3"] .toma.blanco { width: 0; opacity: 0; }
#forclusion[data-paso="3"] .tripa { gap: 0; }
#forclusion .p-frutas { position: absolute; left: 96px; top: 652px; }
#forclusion .modos { position: absolute; left: 96px; right: 96px; top: 730px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
#forclusion .modo { border-top: 2px solid var(--linea); padding-top: 16px; color: var(--tinta-3); transition: color .5s, border-color .5s; }
#forclusion .modo .nombre { font-family: var(--mono); font-size: 18px; letter-spacing: .14em; text-transform: uppercase; }
#forclusion .modo .def { display: block; font-size: 36px; line-height: 1.15; margin-top: 12px; }
#forclusion[data-paso="1"] .modo.m1, #forclusion[data-paso="2"] .modo.m2, #forclusion[data-paso="3"] .modo.m3 { color: var(--tinta); border-color: var(--ocre); }
#forclusion[data-paso="1"] .modo.m1 .nombre, #forclusion[data-paso="2"] .modo.m2 .nombre, #forclusion[data-paso="3"] .modo.m3 .nombre { color: var(--ocre); }

/* Segato: la silueta */
#segato .kb { position: absolute; left: 150px; top: 70px; width: 740px; height: 850px; background: transparent; }
#segato .kb img { object-fit: contain; animation: kb-suave 22s ease-in-out infinite alternate; transform-origin: 50% 30%; }
#segato .p-silueta { position: absolute; left: 150px; top: 940px; }
#segato .der { position: absolute; left: 1000px; top: 110px; width: 824px; }
#segato .der h2 { font-size: 80px; }
#segato .der .cita { font-size: 36px; margin-top: 36px; }
#segato .der .menor { margin-top: 36px; }

/* formato homogeneizador (grilla grande al centro, textos abajo) */
#formato .enc { position: absolute; left: 96px; top: 48px; right: 96px; }
#formato .enc h2 { font-size: 68px; }
#formato .grilla { position: absolute; left: 160px; top: 186px; width: 1600px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
#formato .grilla > * { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: #000; animation: deriva 7s ease-in-out infinite alternate; }
#formato .grilla video { width: 100%; height: 100%; object-fit: cover; display: block; }
#formato .grilla > :nth-child(2) { animation-duration: 8.5s; animation-delay: -2s; } #formato .grilla > :nth-child(3) { animation-duration: 6.2s; animation-delay: -4s; }
#formato .grilla > :nth-child(4) { animation-duration: 9s; animation-delay: -1s; animation-name: deriva2; } #formato .grilla > :nth-child(5) { animation-duration: 7.7s; animation-delay: -3s; animation-name: deriva2; }
#formato .grilla > :nth-child(6) { animation-duration: 6.8s; animation-delay: -5s; } #formato .grilla > :nth-child(7) { animation-duration: 8s; animation-delay: -6s; animation-name: deriva2; }
#formato .grilla > :nth-child(8) { animation-duration: 9.4s; animation-delay: -2.5s; }
@keyframes deriva { 0%, 30% { transform: none; filter: grayscale(1) contrast(1.05); } 100% { transform: translate(-8px, 12px) rotate(-2deg) scale(.97); filter: grayscale(0); } }
@keyframes deriva2 { 0%, 30% { transform: none; filter: grayscale(1) contrast(1.05); } 100% { transform: translate(10px, -9px) rotate(1.7deg) scale(1.03); filter: grayscale(0); } }
#formato .p-grilla { position: absolute; left: 160px; top: 800px; }
#formato .abajo { position: absolute; left: 130px; right: 130px; top: 850px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
#formato .abajo .cita { font-size: 26px; line-height: 1.22; }


/* iconoclasia */
#iconoclasia .palabra { position: absolute; left: 96px; top: 60px; display: flex; align-items: baseline; font-size: 150px; line-height: 1; }
#iconoclasia .palabra span { display: inline-block; }
#iconoclasia.activa .palabra .b { animation: quiebre 1.2s cubic-bezier(.7, 0, .2, 1) .5s forwards; }
@keyframes quiebre { to { transform: translate(70px, 10px) rotate(5deg); } }
#iconoclasia .glosa { position: absolute; left: 96px; top: 240px; font-family: var(--mono); font-size: 22px; color: var(--tinta-2); }
#iconoclasia .glosa em { color: var(--ocre); }
#iconoclasia .cartas { position: absolute; left: 96px; top: 320px; width: 1728px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
#iconoclasia .carta .kb, #iconoclasia .carta .caja { position: relative; width: 100%; height: 360px; }
#iconoclasia .carta .estrategia { display: block; font-family: var(--mono); font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--ocre); margin-top: 18px; }
#iconoclasia .carta .gesto { display: block; font-size: 32px; line-height: 1.12; margin-top: 8px; min-height: 72px; }
#iconoclasia .carta .pie { white-space: normal; }
#iconoclasia .carta.apostol .estrategia { color: var(--tinta); background: var(--rojo); display: inline-block; padding: 3px 10px; }
#iconoclasia .remate { position: absolute; left: 96px; right: 96px; top: 975px; font-size: 38px; }

/* Bolívar y la Miss */
#miss .caja { left: 96px; top: 96px; width: 1000px; height: 750px; }
#miss .p-escalinata { position: absolute; left: 96px; top: 858px; }
#miss .der { position: absolute; left: 1160px; top: 96px; width: 664px; }
#miss .der h2 { font-size: 88px; }
#miss .der .cita { font-size: 34px; margin-top: 34px; }
#miss .der .menor { margin-top: 28px; font-size: 27px; }

/* ¿y en Argentina? */
#argentina .izq { position: absolute; left: 96px; top: 56px; width: 520px; }
#argentina .izq h2 { font-size: 88px; }
#argentina .izq .intro { margin-top: 24px; font-size: 30px; line-height: 1.22; color: var(--tinta-2); }
#argentina .caja { left: 96px; top: 540px; width: 520px; height: 460px; }
#argentina .caja .sobre { left: 14px; right: 14px; bottom: 12px; white-space: normal; }
#argentina .etapa { position: absolute; left: 680px; top: 56px; width: 1144px; height: 960px; }
#argentina .etapa .kb { position: absolute; }
#argentina .etapa .pie { position: absolute; }
#argentina .etapa .etq { position: absolute; z-index: 6; font-family: var(--mono); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; background: rgba(11, 9, 7, .78); color: var(--ocre); padding: 6px 10px; }
#argentina .etapa .linea { position: absolute; left: 0; right: 0; font-size: 36px; line-height: 1.18; }
#argentina .etapa .linea em { color: var(--ocre); }
#argentina .e0 .grande { position: absolute; left: 0; right: 0; top: 300px; font-size: 64px; line-height: 1.05; font-style: italic; color: var(--tinta-2); }

/* pregunta final (mosaico) */
#pregunta .titular { position: absolute; left: 0; right: 0; top: 282px; height: 524px; background: rgba(11, 9, 7, .86); z-index: 5; padding: 58px 110px 0; text-align: center; }
#pregunta .pregunta { font-size: 106px; line-height: 1; }
#pregunta .preguntas { margin: 26px auto 0; max-width: 1560px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 60px; text-align: left; }
#pregunta .preguntas li { font-size: 26px; line-height: 1.22; color: var(--tinta-2); padding-left: 22px; text-indent: -22px; }
#pregunta .preguntas li::before { content: "·"; color: var(--ocre); margin-right: 12px; }
#pregunta .fuente-p { margin: 18px auto 0; font-family: var(--mono); font-size: 15px; color: var(--tinta-3); }
#pregunta .fuente-p .ref { margin-left: 0; }
#pregunta .gracias { position: absolute; left: 110px; right: 110px; bottom: 26px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 20px; color: var(--tinta-2); letter-spacing: .06em; }
#pregunta .sobre { right: 24px; bottom: 22px; }

/* Ochoa: la cadena de imágenes */
#ochoa .enc { position: absolute; left: 96px; top: 48px; right: 96px; }
#ochoa .enc h2 { font-size: 68px; }
#ochoa .cadena { position: absolute; left: 96px; top: 190px; width: 1728px; height: 470px; }
#ochoa .eslabon { position: absolute; top: 0; width: 528px; }
#ochoa .eslabon .kb { width: 528px; height: 380px; }
#ochoa .eslabon .etq { position: absolute; left: 12px; top: 12px; z-index: 6; font-family: var(--mono); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; background: rgba(11, 9, 7, .8); color: var(--ocre); padding: 6px 10px; }
#ochoa .eslabon .quien { display: block; font-size: 30px; line-height: 1.12; margin-top: 12px; }
#ochoa .e-a { left: 0; } #ochoa .e-b { left: 600px; } #ochoa .e-c { left: 1200px; }
#ochoa .flecha { position: absolute; top: 160px; font-family: var(--mono); font-size: 40px; color: var(--ocre); }
#ochoa .f1 { left: 543px; } #ochoa .f2 { left: 1143px; }
#ochoa .pie { white-space: nowrap; }
#ochoa .texto { position: absolute; left: 96px; right: 96px; top: 700px; height: 330px; }
#ochoa .texto > * { position: absolute; left: 0; right: 0; top: 0; }
#ochoa .texto .cita { font-size: 36px; }
#ochoa .t2 .fotos { position: absolute; left: 0; top: 0; width: 820px; height: 300px; }
#ochoa .t2 .fotos .kb { position: absolute; top: 0; height: 260px; }
#ochoa .t2 .fotos .pie { position: absolute; top: 268px; }
#ochoa .t2 .cita { position: absolute; left: 880px; right: 0; top: 0; }

/* Marcos López */
#lopez .enc { position: absolute; left: 96px; top: 48px; right: 96px; }
#lopez .enc h2 { font-size: 68px; }
#lopez .fila { position: absolute; left: 96px; right: 96px; top: 200px; display: flex; justify-content: center; gap: 36px; }
#lopez .fila > div { position: relative; }
#lopez .fila .kb { height: 560px; }
#lopez .fila .etq { position: absolute; left: 12px; top: 12px; z-index: 6; font-family: var(--mono); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; background: rgba(11, 9, 7, .8); color: var(--ocre); padding: 6px 10px; }
#lopez .cambio { position: absolute; left: 160px; right: 160px; top: 850px; font-size: 38px; line-height: 1.16; text-align: center; }
#lopez .cambio em { color: var(--ocre); }
#lopez .cita-l { position: absolute; left: 160px; right: 160px; top: 960px; text-align: center; font-size: 26px; color: var(--tinta-2); }

/* duración: la hipótesis (paso 1) */
#duracion .col .hipotesis { top: 590px; border-left: 4px solid var(--rojo); padding: 4px 0 4px 24px; }
#duracion .hipotesis .rotulo { color: var(--tinta); }
#duracion .hipotesis .cuerpo { font-size: 33px; line-height: 1.18; margin-top: 10px; }
#duracion .hipotesis .cuerpo i { color: var(--ocre); }
#duracion .hipotesis .ruta { font-family: var(--mono); font-size: 15px; letter-spacing: .06em; color: var(--tinta-2); margin-top: 16px; line-height: 1.5; }

/* máscara: la línea que la ata al molde */
#mascara .puente { position: absolute; left: 240px; right: 240px; top: 952px; font-size: 30px; line-height: 1.2; color: var(--tinta-2); }

/* Ochoa: el contraste con Apóstol (paso 2) */
#ochoa .t2 .remate { position: absolute; left: 880px; right: 0; top: 0; font-size: 34px; line-height: 1.16; color: var(--ocre); border-left: 4px solid var(--rojo); padding-left: 20px; }
#ochoa .t2 .remate i { color: var(--tinta); }
#ochoa .t2 .cita { top: 112px; font-size: 30px; }

/* anexo */
.anexo .marco { position: absolute; left: 96px; right: 96px; top: 56px; bottom: 56px; }
.anexo h2 { font-size: 60px; margin: 12px 0 26px; }
.anexo .columnas { column-count: 2; column-gap: 70px; }
.anexo .columnas p { break-inside: avoid; font-size: 17px; line-height: 1.34; padding-left: 30px; text-indent: -30px; margin-bottom: 8px; }
.anexo .creditos p { font-family: var(--mono); font-size: 13px; line-height: 1.4; padding-left: 0; text-indent: 0; color: var(--tinta-2); margin-bottom: 6px; }
.anexo .creditos .cred { color: var(--tinta-3); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
  #grano, .kb img, #formato .grilla > *, .empuje video, .mosaico > * { animation: none; }
}

/* modo captura (index.html?captura): sin animaciones, para revisar capturas */
.captura *, .captura *::before, .captura *::after { animation-delay: 0s !important; animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }