/* Introducción cinematográfica: capa independiente sobre la web (no toca el mapa ni sus estilos). */
#cine { position: fixed; inset: 0; z-index: 100; background: #121a2e; color: #fbf3e2; overflow: hidden; transition: opacity .9s ease; }
.sin-cine #cine { display: none; }
#cine.fuera { opacity: 0; pointer-events: none; }
#cine video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #121a2e; }
#cine .cine-vel { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(8,12,24,.38) 100%); }
#cine .cine-luz { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .75s ease-in; background: radial-gradient(ellipse at 55% 60%, #fff3d6 0%, #ffd9a0 45%, #f2b27a 100%); }
#cine.luz .cine-luz { opacity: .96; }
/* título: ocupa el cielo (parte alta), nunca las cumbres */
#cine .cine-titulo { position: absolute; left: 0; right: 0; top: clamp(70px, 13vh, 150px); text-align: center; padding: 0 var(--gutter, 20px); pointer-events: none; text-shadow: 0 2px 30px rgba(20, 22, 50, .55), 0 0 60px rgba(255, 190, 120, .35); }
#cine .cine-titulo h2 { margin: 0; font: 500 clamp(1.5rem, 5.2vw, 3.7rem)/1.18 "Cormorant Garamond", Georgia, serif; letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; }
#cine .cine-titulo h2 span { display: block; opacity: 0; filter: blur(10px); letter-spacing: .46em; transform: translateY(8px); transition: opacity 2.2s ease, filter 2.2s ease, letter-spacing 3.2s cubic-bezier(.2, .6, .2, 1), transform 2.4s ease; }
#cine .cine-titulo h2 span:nth-child(2) { transition-delay: .7s; }
#cine .cine-titulo .linea { display: block; width: 0; height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, #ffd9a8, transparent); transition: width 3s ease .5s; }
#cine.t-in .cine-titulo h2 span { opacity: 1; filter: blur(0); letter-spacing: .26em; transform: none; }
#cine.t-in .cine-titulo .linea { width: min(46vw, 360px); }
#cine.t-out .cine-titulo { opacity: 0; transition: opacity 1s ease; }
/* indicador de sonido (solo si el navegador bloquea la música): casi imperceptible, abajo y centrado */
#cine #cine-hint { position: absolute; left: 0; right: 0; bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px)); margin: 0; display: flex; justify-content: center; align-items: center; gap: 7px; pointer-events: none; font: 300 .76rem "Barlow", system-ui, sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .55); opacity: 0; transition: opacity 1.6s ease; }
#cine #cine-hint svg { flex: none; animation: cine-latido 3.2s ease-in-out infinite; }
#cine #cine-hint span { transition: opacity 1.6s ease, max-width 1.6s ease; max-width: 22em; white-space: nowrap; overflow: hidden; }
#cine #cine-hint.ver { opacity: 1; }
#cine #cine-hint.tenue { opacity: .6; }
#cine #cine-hint.tenue span { opacity: 0; max-width: 0; }
#cine #cine-hint.quita { opacity: 0; }
#cine.sin-sonido { cursor: pointer; }
@keyframes cine-latido { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* «Saltar introducción»: arriba a la derecha, discreto y semitransparente */
#cine #cine-saltar { position: absolute; top: max(14px, env(safe-area-inset-top)); right: var(--gutter, 20px); padding: 8px 4px; font: 400 .7rem "Barlow Semi Condensed", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(251, 243, 226, .6); background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer; transition: color .25s, border-color .25s; }
#cine #cine-saltar:hover, #cine #cine-saltar:focus-visible { color: rgba(251, 243, 226, .95); border-color: rgba(251, 243, 226, .6); }
/* botón para volver a ver la introducción (en la cabecera de la web) */
#btn-reintro { position: absolute; left: var(--gutter, 20px); top: max(16px, env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .18em; opacity: .72; }
#btn-reintro:hover { opacity: 1; }
@media (max-width: 640px) { #btn-reintro span { display: none; } #btn-reintro svg { width: 20px; height: 14px; } }
@media (prefers-reduced-motion: reduce) { #cine { display: none; } }