/* Mecánica del escenario. El kit visual define los tokens y componentes. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { color: var(--c-texto, #f2f5ff); font-family: var(--f-cuerpo, sans-serif); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .5; }
#cine-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.cine-escenario { position: absolute; width: 1920px; height: 1080px; overflow: hidden; transform-origin: top left; background: var(--c-fondo-1, #0e1525); isolation: isolate; }
.cine-escena, .cine-fondo, .cine-capas { position: absolute; inset: 0; }
.cine-escena { overflow: hidden; }
.cine-fondo { background: var(--c-fondo-1, #0e1525); overflow: hidden; }
.cine-fondo > img, .cine-fondo > svg { width: 100%; height: 100%; object-fit: cover; }
.cine-capas { pointer-events: none; z-index: 1; isolation: isolate; }
.capa { position: absolute; transform-origin: center; will-change: transform, opacity; }
.capa > svg, .capa > img { display: block; width: 100%; height: auto; }
.capa--texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.capa--texto p { margin: 0; }
.capa .feed__pista { will-change: transform; }
.capa .feed__telefono { overflow: hidden; }
.capa.tarjeta { transform-style: preserve-3d; }
.tarjeta__cara, .tarjeta__dorso { backface-visibility: hidden; }
.tarjeta__cara > svg, .tarjeta__cara > img { display: block; width: 100%; }
.tarjeta__dorso { position: absolute; inset: 0; transform: rotateY(180deg); }
.cine-placeholder { min-height: 150px; display: flex; justify-content: center; align-items: center; padding: 24px; border: 3px dashed var(--c-alerta, #f4bf61); color: var(--c-texto, #fff); background: var(--c-fondo-2, #17243c); font: 26px var(--f-hud, monospace); overflow-wrap: anywhere; text-align: center; }
.cine-fondo > .cine-placeholder { width: 100%; height: 100%; }
.cine-aviso { position: absolute; top: 20px; right: 24px; max-width: 900px; padding: 10px 16px; font-size: 22px; background: var(--c-fondo-2, #17243c); color: var(--c-alerta, #f4bf61); }
.cine-escena > .retrato { position: absolute; left: 42px; bottom: 46px; width: 350px; z-index: 1000; }
.retrato__marco > svg { width: 100%; display: block; }
.cine-subtitulos { position: absolute; left: 50%; width: 1100px; max-width: calc(100% - 80px); bottom: 90px; transform: translateX(-50%); z-index: 1001; text-align: center; pointer-events: none; }
.cine-subtitulos > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 10px 24px; border-radius: var(--radio, 12px); color: var(--c-texto, #fff); background: var(--c-hud, #101725); font: 38px/1.25 var(--f-cuerpo, sans-serif); white-space: pre-line; }
.cine-inicio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--c-hud, #101725); text-align: center; padding: 24px; z-index: 500; }
.cine-inicio h1 { font-family: var(--f-titulo, sans-serif); font-size: clamp(32px, 6vw, 68px); margin: 0; }
.cine-inicio button, .cine-controles button { border: 1px solid var(--c-acento, #4fd1c5); border-radius: var(--radio, 12px); color: var(--c-texto, #fff); background: var(--c-hud-2, #20314c); padding: 12px 24px; }
.cine-controles { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: min(96%, 1050px); display: flex; gap: 12px; align-items: center; background: var(--c-hud, #101725); padding: 10px; border-radius: var(--radio, 12px); z-index: 450; transition: opacity .2s; }
.cine-controles.cine-controles--ocultos { opacity: 0; pointer-events: none; }
.cine-progreso { flex: 1; position: relative; }
#cine-barra { display: block; width: 100%; accent-color: var(--c-acento, #4fd1c5); }
.cine-capitulos { position: relative; height: 8px; margin: 0 8px; }
.cine-capitulos button { position: absolute; width: 3px; height: 8px; padding: 0; border: 0; background: var(--c-texto-suave, #8ba6c5); }
#cine-pantalla svg { display: block; width: 24px; height: 24px; }
#cine-tiempo { font: 14px var(--f-hud, monospace); white-space: nowrap; }
[hidden] { display: none !important; }
body.cine-modo-grabacion .cine-controles, body.cine-modo-grabacion .cine-inicio { display: none; }
/* ?grabar=2: sin barra de controles; tras «Comenzar», sin cursor y con cuenta regresiva. */
body.cine-modo-externo .cine-controles { display: none; }
body.cine-sin-cursor { cursor: none; }
.cine-cuenta { position: absolute; inset: 0; display: grid; place-items: center; z-index: 10000; pointer-events: none; background: rgba(0, 0, 0, .6); color: var(--c-texto, #fff); font: 700 clamp(80px, 15vw, 220px)/1 var(--f-titulo, sans-serif); }
/* Sin animaciones CSS: estados, idle y boca salen exclusivamente del reloj. */
.cine-escenario *, .cine-escenario *::before, .cine-escenario *::after { animation: none !important; transition: none !important; }
.cine-escenario [data-parte="cuerpo"] { transform-box: fill-box; transform-origin: center bottom; }
.cine-escenario [data-parte="ojos"], .cine-escenario [data-parte="anillo"] { transform-box: fill-box; transform-origin: center; }
@media (max-width: 600px) { .cine-controles { gap: 6px; } .cine-controles button { padding: 10px; } #cine-tiempo { font-size: 11px; } }

.capa.feed { height: 650px; }
.capa.feed .feed__telefono { height: 100%; min-height: 0; }
#cine-grabacion { position: fixed; z-index: 600; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 680px); padding: 24px; border-radius: var(--radio, 16px); background: var(--c-hud, #1f2a40); box-shadow: var(--sombra); text-align: center; }
#cine-grabacion button, #cine-grabacion a { display: inline-block; margin: 8px; padding: 12px 24px; border: 1px solid var(--c-acento, #4fd1c5); border-radius: var(--radio, 16px); background: var(--c-hud-2, #3a4a6b); color: var(--c-texto, #fff); }