.home-page { overflow:clip; }
.cinema-story { height:350vh; margin-top:0; position:relative; background:#121619; }
.cinema-stage { position:sticky; top:56px; height:calc(100svh - 56px); min-height:620px; isolation:isolate; overflow:hidden; background:#121619; --photo:0; }
.cinema-view { position:absolute; inset:117px 0 84px; opacity:calc(1 - var(--photo)); }
.cinema-view canvas,.cinema-poster { width:100%; height:100%; object-fit:contain; display:block; position:absolute; inset:0; mask-image:linear-gradient(transparent,#000 9%,#000 96.5%,transparent); }
.cinema-view canvas { opacity:0; mask-image:linear-gradient(transparent,#000 3%,#000 97%,transparent); }
.cinema-poster { object-fit:contain; }
.cinema-ready .cinema-view canvas { opacity:1; }
.cinema-ready .cinema-poster { visibility:hidden; }
.cinema-copy { position:absolute; top:27px; left:24px; right:24px; text-align:center; z-index:2; visibility:hidden; opacity:0; transition:opacity .2s; }
.cinema-copy.is-active { visibility:visible; opacity:1; }
.cinema-copy h1,.cinema-copy h2 { margin:0 0 10px; color:#fff; font:600 clamp(42px,4.6vw,68px)/1 Teko,sans-serif; letter-spacing:-.01em; }
.cinema-copy strong { color:#ff6500; font:inherit; }
.cinema-copy p { margin:0 auto; max-width:72ch; color:#e2e7eb; font:13px/1.6 Poppins,sans-serif; }
.cinema-copy-photo { top:34%; }
.cinema-copy-photo h2 { max-width:700px; margin:0 auto 20px; font-size:80px; }
.cinema-copy-photo p { max-width:51ch; }
.cinema-bottom { position:absolute; bottom:44px; left:max(28px,calc((100vw - 1280px)/2)); right:max(28px,calc((100vw - 1280px)/2)); z-index:3; display:flex; gap:20px; justify-content:space-between; align-items:flex-end; }
.cinema-hint { color:#b9c5cc; font:10px Poppins,sans-serif; margin:0 0 5px; }
.cinema-phase { color:#eef2f4; font:12px Poppins,sans-serif; }
.cinema-buttons { display:flex; gap:8px; margin-top:10px; }
.cinema-buttons button { color:#fff; background:#171c1f; border:1px solid #65737c; border-radius:4px; min-height:44px; padding:9px 16px; font:12px Poppins,sans-serif; cursor:pointer; }
.cinema-buttons button:hover { background:#272e33; border-color:#ff6500; }
.cinema-story a:focus-visible,.cinema-story button:focus-visible { outline:2px solid #ff8b3b; outline-offset:4px; }
.cinema-actions { display:flex; align-items:center; gap:20px; }
.cinema-skip { color:#fff; font:13px Poppins,sans-serif; text-underline-offset:5px; }
.cinema-actions .home-btn { min-height:48px; }
.cinema-note { position:absolute; z-index:2; bottom:8px; left:24px; right:24px; max-width:760px; margin:0 auto; color:#adb9c2; font:11px/1.5 Poppins,sans-serif; text-align:center; }
.cinema-progress { position:absolute; bottom:0; height:3px; left:0; right:0; background:#3d464c; }
.cinema-progress span { display:block; background:#ff6500; width:100%; height:100%; transform:scaleX(0); transform-origin:left; }
.cinema-photo { position:absolute; inset:0; opacity:var(--photo); background:linear-gradient(#0007,#000a),url('../capa-maquinas-brutusmaq.jpeg') center/cover; }
.cinema-loading { position:absolute; left:0; right:0; top:52%; z-index:3; color:#fff; text-align:center; font:13px Poppins,sans-serif; }
.cinema-ready .cinema-loading { display:none; }
.cinema-error { height:auto; }
.cinema-error .cinema-photo { opacity:1; }
.cinema-error .cinema-view { display:none; }
.cinema-error .cinema-buttons,.cinema-error .cinema-hint { display:none; }
.cinema-error .cinema-loading { top:auto; bottom:125px; font-size:11px; }
@media(max-width:760px) {
 .cinema-story { height:310vh; margin-top:0; }
 .cinema-stage { top:72px; height:calc(100svh - 72px); min-height:600px; }
 .cinema-copy { top:24px; left:20px; right:20px; }
 .cinema-copy h1,.cinema-copy h2 { max-width:450px; margin:0 auto 10px; font-size:46px; }
 .cinema-copy p { max-width:43ch; font-size:11px; }
 .cinema-view { inset:150px -10% 160px; }
 .cinema-poster { object-fit:contain; height:100%; top:0; transform:none; mask-image:linear-gradient(transparent,#000 6%,#000 96.5%,transparent); }
 .cinema-view canvas { mask-image:none; }
 .cinema-copy-photo { top:28%; }
 .cinema-copy-photo h2 { font-size:54px; }
 .cinema-bottom { bottom:60px; left:20px; right:20px; display:block; }
 .cinema-controls { display:flex; justify-content:space-between; align-items:center; gap:8px; }
 .cinema-hint { display:none; }
 .cinema-phase { max-width:43%; font-size:10px; }
 .cinema-buttons { margin:0; gap:6px; }
 .cinema-buttons button { padding:7px 9px; font-size:10px; }
 .cinema-actions { justify-content:space-between; margin-top:14px; gap:8px; }
 .cinema-actions .home-btn { min-height:44px; font-size:16px; padding:10px 14px; width:auto; flex:1; min-width:0; }
 .cinema-skip { font-size:11px; white-space:nowrap; flex-shrink:0; }
 .cinema-note { left:20px; right:20px; bottom:8px; font-size:11px; }
}
@media(min-width:500px) and (max-width:760px) {
 .cinema-view { inset:120px -10% 140px; }
}
@media(min-width:500px) and (max-width:760px) and (max-height:720px) {
 .cinema-stage { min-height:0; }
 .cinema-copy { top:16px; }
 .cinema-copy h1,.cinema-copy h2 { font-size:40px; }
 .cinema-view { inset:110px -10% 124px; }
 .cinema-bottom { bottom:42px; }
}
@media(prefers-reduced-motion:reduce) {
 .cinema-story { height:auto; margin-top:0; }
 .cinema-stage { position:relative; top:0; }
 .cinema-copy { transition:none; }
 .cinema-poster { object-fit:contain; }
 .cinema-progress,.cinema-hint { display:none; }
}
@media(prefers-reduced-motion:reduce) and (min-width:761px) { .cinema-view { inset:117px 0 112px; } }