/* Capa cinematográfica (10-oct-2026): fotos de ambiente, grano, viñeta, entrada al bajar, foco del cursor.
   Mejora progresiva: sin JS, con «vista tranquila» o con movimiento reducido la página se ve entera y quieta.
   Solo se animan transform y opacity. */
.grano{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Portada con foto */
.hero.simple.cine{position:relative;overflow:hidden;background:#0a1628;padding-top:clamp(56px,11vh,120px);padding-bottom:clamp(60px,11vh,120px)}
.hero.simple.cine>*{position:relative;z-index:2}
.hero.simple.cine>.hero-foto{position:absolute;inset:0;z-index:0;max-width:none;margin:0;overflow:hidden}
.hero-foto img{position:absolute;inset:-4% -2%;width:104%;height:108%;object-fit:cover;object-position:60% 55%;filter:saturate(.82) contrast(1.06) brightness(.92)}
.hero.simple.cine:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#0a1628f2 0%,#0a1628d9 34%,#0a162873 66%,#0a162838 100%),radial-gradient(120% 90% at 70% 45%,#0a162800 45%,#0a1628cc 100%)}
.hero.simple.cine>.hero-luz{position:absolute;inset:0;z-index:1;max-width:none;margin:0;pointer-events:none;background:linear-gradient(105deg,#ffffff00 38%,#ffffff12 50%,#ffffff00 62%);transform:translateX(-70%)}
.hero.simple.cine h1{text-shadow:0 2px 28px #0a1628cc}
.hero.simple.cine .hs-inc,.hero.simple.cine .hs-dates{text-shadow:0 1px 14px #0a1628}
.hero.simple.cine .hs-inc{color:#e3eaf3}
.palabra{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.palabra>span{display:inline-block}

/* Bandas de foto entre apartados */
.banda{position:relative;margin:0 -32px;height:clamp(300px,58vh,560px);overflow:hidden;display:flex;align-items:center;border-top:1px solid #d4af3755;border-bottom:1px solid #d4af3755;isolation:isolate}
.banda img{position:absolute;left:0;top:-14%;width:100%;height:128%;object-fit:cover;z-index:-2;filter:saturate(.82) contrast(1.06) brightness(.9);will-change:transform}
.banda:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0a1628e6 0%,#0a162899 48%,#0a162840 100%),radial-gradient(130% 100% at 60% 50%,#0a162800 50%,#0a1628b3 100%)}
.banda blockquote{margin:0;padding:0 max(6vw,32px);max-width:900px;font:400 clamp(1.9rem,4.4vw,3.6rem)/1.12 'Instrument Serif',serif;color:#fff}
.banda blockquote span{display:block}
.banda figcaption{position:absolute;right:0;bottom:0;background:#0a1628cc;font-size:11px;letter-spacing:.06em;padding:5px 12px;color:var(--muted)}
.banda.alta img{object-position:50% 38%}
@media(max-width:800px){.banda{margin:0 -20px;height:300px}.banda img{top:0;height:100%}.banda blockquote{padding:0 20px}}

/* Foco del cursor en las tarjetas */
.foco{position:relative;isolation:isolate}
.foco:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(340px circle at var(--x,50%) var(--y,50%),#d4af3724,#d4af3700 70%)}
.foco:hover:before{opacity:1}

/* Botón de vista tranquila */
.calma-btn{position:fixed;left:14px;bottom:14px;z-index:8;min-height:44px;padding:8px 14px;font:600 13px 'Source Sans 3',sans-serif;letter-spacing:.04em;background:#0a1628e6;color:var(--muted);border:1px solid #d4af3755;border-radius:2px}
.calma-btn:hover{background:#0a1628;color:#fff;border-color:var(--gold)}
@media(max-width:800px){.calma-btn{left:10px;bottom:10px;font-size:12px;padding:6px 10px}}

/* Movimiento: solo con JS activo (html.cine) y sin vista tranquila */
@media(prefers-reduced-motion:no-preference){
html.cine:not(.calma) .hero-foto img{animation:acercar 26s ease-out both}
html.cine:not(.calma) .hero-luz{animation:barrido 9s ease-in-out 1.2s infinite}
html.cine:not(.calma) .palabra>span{transform:translateY(105%);animation:subir .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--i)*.06s)}
html.cine:not(.calma) .hero.simple.cine>.entra{opacity:0;transform:translateY(18px);animation:aparecer .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.75s + var(--i)*.1s)}
html.cine:not(.calma) .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0)*80ms)}
html.cine:not(.calma) .rv.in{opacity:1;transform:none}
html.cine:not(.calma) .banda blockquote span{opacity:calc(.28 + var(--p,1)*.72);transition:opacity .2s linear}
html.cine:not(.calma) .telon{animation:telon 1.5s cubic-bezier(.65,0,.35,1) both}
html.cine:not(.calma) .telon i{animation:raya 1s cubic-bezier(.65,0,.35,1) both}
}
.telon{position:fixed;inset:0;z-index:30;background:#0a1628;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none;opacity:0;visibility:hidden}
.telon img{height:56px;width:auto}
.telon i{display:block;width:160px;height:2px;background:var(--gold);transform-origin:left}
@keyframes acercar{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes barrido{0%{transform:translateX(-70%)}55%,100%{transform:translateX(70%)}}
@keyframes subir{to{transform:none}}
@keyframes aparecer{to{opacity:1;transform:none}}
@keyframes telon{0%,62%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes raya{from{transform:scaleX(0)}to{transform:scaleX(1)}}