/* Cartelera de cine para Animaciones */
.cinema-page { background: radial-gradient(1000px 700px at 70% 10%, #0f1116, #0a0b0e); color: #fff; }

.cinema-hero { padding: 14px clamp(16px, 4vw, 48px) 8px; text-align: center; }
.cinema-title { margin: 0; font-weight: 900; letter-spacing: .06em; font-size: clamp(22px, 5vmin, 44px); }
.cinema-hero .lede { color: #cbd5e1; margin: 8px 0 0; }

/* Reflectores animados */
.spotlights { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.beam { position: absolute; bottom: -10vh; width: 40vw; height: 60vh; background: radial-gradient(closest-side, rgba(255,255,255,.4), rgba(255,255,255,0)); filter: blur(2px); mix-blend-mode: screen; opacity: .65; transform-origin: bottom center; }
.beam.b1 { left: -8vw; transform: rotate(-18deg); animation: sweep1 9s ease-in-out infinite; }
.beam.b2 { right: -10vw; transform: rotate(18deg); animation: sweep2 10s ease-in-out infinite; }
.beam.b3 { left: 30vw; transform: rotate(0deg); animation: sweep3 12s ease-in-out infinite; width: 30vw; }
@keyframes sweep1 { 0%,100%{ transform: rotate(-24deg);} 50%{ transform: rotate(-6deg);} }
@keyframes sweep2 { 0%,100%{ transform: rotate(24deg);} 50%{ transform: rotate(6deg);} }
@keyframes sweep3 { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(10deg);} }

.cinema-board { padding: 8px clamp(16px, 4vw, 48px) 40px; }
.cinema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.cinema-grid .poster, .cinema-grid figure { position: relative; background: #0e0f12; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 0 8px #1f2127 inset; }
.cinema-grid video { width: 100%; height: 220px; object-fit: cover; display: block; }
.cinema-grid figcaption { position: absolute; left: 12px; bottom: 10px; background: rgba(0,0,0,.6); padding: 6px 10px; border-radius: 10px; font-weight: 800; letter-spacing: .04em; }

/* Modal de video */
.video-modal[hidden] { display: none; }
.video-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.video-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(1px); }
.video-content { position: relative; z-index: 1; width: min(80vw, 720px); background: #0b0b0b; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.video-content video { width: 100%; height: auto; max-height: 60vh; display: block; background: #000; }
.video-close { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: .9rem; z-index: 2; }
.video-caption { padding: 8px 12px; color: #eaeaea; font-size: .95rem; border-top: 1px solid rgba(255,255,255,.1); }

.sales-copy { padding: 0 clamp(16px, 4vw, 48px) 40px; text-align: center; }
.sales-copy h3 { margin: 0 0 8px; font-weight: 900; letter-spacing: .04em; }
.sales-copy p { margin: 0; color: #cbd5e1; }

@media (max-width: 640px) { .cinema-grid video { height: 200px; } }