/* escenas de historia entre zonas (js/cinematica.js) */
.cine { position: fixed; inset: 0; z-index: 20000; background: #0A0707; }
.cine[hidden] { display: none; }
.cine canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cine-saltar { position: absolute; right: 28px; top: calc(5vh - 22px); display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; font-size: 15px; background: rgba(17, 17, 17, 0.72); border: 0; border-radius: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); color: #F2ECEC; }
.cine-saltar:hover, .cine-saltar:focus-visible { background: #9C2315; border-color: #C8402D; }
.cine-saltar[hidden], .cine-aviso[hidden] { display: none; }
.cine-tecla { font-size: 12px; font-weight: 800; color: #E0B2B2; border: 1px solid #E0B2B2; border-radius: 0; padding: 2px 7px; }
.cine-aviso { position: absolute; right: 28px; top: calc(5vh - 9px); font-size: 14px; font-weight: 700; color: #E0B2B2; }
@media (max-width: 600px) { .cine-saltar, .cine-aviso { right: 16px; } }