/* ==========================================================================
   TRUCACHO GD - Cinemáticas (js/sistemas/cinematicas.js)
   Estilo único para todas las historietas (2026-11-02), tomado de la primera:
   viñetas desparramadas e inclinadas que van apareciendo sobre un fondo que se
   mueve; la activa al frente con borde blanco, las ya vistas atrás y oscurecidas,
   las que faltan todavía no se ven. Texto en una caja flotante con borde amarillo
   y controles ANTERIOR / SIGUIENTE / OMITIR abajo.
   ========================================================================== */
#tg-cinematica {
    position: fixed; inset: 0; z-index: 1000000;
    display: none; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 2cqh 3cqw 1.6cqh; box-sizing: border-box; overflow: hidden;
    font-family: 'Arial Black', Impact, sans-serif; color: #fff;
    background: #000;
    opacity: 0; transition: opacity .6s ease;
    user-select: none; cursor: pointer;
}
#tg-cinematica.activa { opacity: 1; }

.tg-cine-fondo {
    position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; z-index: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .85) 100%),
        url('../img/escenarios/fondo_cinematica.webp') center / cover no-repeat;
    animation: movimientoFondoCinematica 18s ease-in-out infinite alternate;
}

.tg-cine-titulo {
    position: absolute; top: 1.6cqh; left: 2cqw; z-index: 30;
    font-size: clamp(.75rem, 1.6cqw, 1.15rem); letter-spacing: .22em; color: #f1c40f;
    text-shadow: 2px 2px 0 #000; text-transform: uppercase;
    padding: .3em .9em; background: rgba(0, 0, 0, .7); border: 2px solid #f1c40f; border-radius: 8px;
    transform: rotate(-2deg);
}

/* ---------- Hoja de viñetas ---------- */
.tg-cine-hoja {
    position: relative; z-index: 10;
    width: 92cqw; flex: 1 1 auto; min-height: 0;
}
.tg-cine-vineta {
    position: absolute; overflow: hidden;
    background: #0a0a0a; border: 4px solid #f1c40f; border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .95);
    opacity: 0; scale: .6;
    transition: opacity .5s ease, scale .5s cubic-bezier(.175, .89, .32, 1.275), filter .4s ease, border-color .3s, box-shadow .4s;
    pointer-events: none;
}
/* Posiciones "desordenadas" de la primera historieta (a partir de la 5.ª placa se repiten) */
.tg-cine-pos-1 { width: 48%; height: 54%; top: 1%;  left: 2%;  rotate: -3deg; z-index: 11; }
.tg-cine-pos-2 { width: 54%; height: 58%; top: 3%;  right: 2%; rotate: 2deg;  z-index: 12; }
.tg-cine-pos-3 { width: 58%; height: 62%; bottom: 3%; left: 4%; rotate: -2deg; z-index: 13; }
.tg-cine-pos-4 { width: 74%; height: 80%; top: 46%; left: 50%; translate: -50% -50%; z-index: 14; }

.tg-cine-vineta.visible { opacity: 1; scale: .95; pointer-events: auto; cursor: zoom-in; filter: brightness(.5) grayscale(.2); border-color: #d4af37; }
.tg-cine-vineta.activa {
    scale: 1; z-index: 20; cursor: pointer;
    filter: brightness(1.1); border-color: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .98), 0 0 30px rgba(241, 196, 15, .8);
}
.tg-cine-vineta img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cuadro de arte provisional: claramente identificado para reemplazar */
.tg-cine-provisional {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 6%; box-sizing: border-box; text-align: center;
    background: repeating-linear-gradient(-45deg, #2c2c2c 0 14px, #262626 14px 28px);
    color: #bdbdbd; font-family: Arial, sans-serif; font-weight: bold;
}
.tg-cine-provisional p { font-size: clamp(.55rem, 1.25cqw, .9rem); line-height: 1.35; margin: .6em 0 0; max-height: 70%; overflow: hidden; }
.tg-cine-sello {
    font-family: 'Arial Black', Impact, sans-serif; font-size: clamp(.6rem, 1.4cqw, 1rem); color: #111;
    background: #f1c40f; padding: .2em .7em; transform: rotate(-4deg); border: 2px solid #111;
}
.tg-cine-num { position: absolute; top: 6px; left: 10px; font-size: 2.2cqh; color: #f1c40f; }

/* ---------- Caja de texto flotante ---------- */
.tg-cine-texto {
    position: relative; z-index: 40;
    width: 90%; max-width: 980px; margin-top: -4.5cqh; min-height: 9cqh; box-sizing: border-box;
    background: rgba(0, 0, 0, .92); backdrop-filter: blur(5px);
    border: 3px solid #f1c40f; border-radius: 12px;
    padding: 1.2cqh 2cqw; text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .95);
}
.tg-cine-narrador {
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; font-weight: bold; font-style: italic;
    font-size: clamp(.85rem, 1.7cqw, 1.3rem); line-height: 1.35; color: #fff;
}
.tg-cine-narrador::before { content: '«'; color: #f1c40f; }
.tg-cine-narrador::after  { content: '»'; color: #f1c40f; }
.tg-cine-dialogos { display: flex; flex-direction: column; align-items: center; gap: .5cqh; margin-top: .4cqh; }
.tg-cine-dialogos:empty { display: none; }
.tg-cine-globo {
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; font-weight: bold;
    font-size: clamp(.85rem, 1.6cqw, 1.25rem); line-height: 1.35; color: #fff;
    opacity: 0; animation: tgGlobo .35s ease forwards;
}
.tg-cine-globo b { font-family: 'Arial Black', Impact, sans-serif; letter-spacing: .03em; }
@keyframes tgGlobo { from { opacity: 0; transform: translateY(6px) scale(.95); } to { opacity: 1; transform: none; } }

/* ---------- Controles ---------- */
.tg-cine-controles { position: relative; z-index: 40; display: flex; align-items: center; gap: 1.2cqw; margin-top: 1.4cqh; cursor: default; }
.tg-cine-btn {
    font-family: 'Arial Black', Impact, sans-serif; font-size: clamp(.7rem, 1.25cqw, 1rem); letter-spacing: .05em;
    padding: .7cqh 1.4cqw; border: 3px solid #f1c40f; border-radius: 8px; cursor: pointer;
    background: rgba(0, 0, 0, .85); color: #f1c40f; text-shadow: 2px 2px 0 #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .9);
    transition: transform .12s ease, background .15s, color .15s;
}
.tg-cine-btn:hover:not(:disabled) { background: #f1c40f; color: #000; text-shadow: none; transform: scale(1.06); }
.tg-cine-btn:active:not(:disabled) { transform: scale(.96); }
.tg-cine-btn:disabled { opacity: .3; cursor: default; }
.tg-cine-btn-principal { background: #f1c40f; color: #000; text-shadow: none; animation: parpadeo 1.5s ease-in-out infinite; }
.tg-cine-btn-principal:hover:not(:disabled) { animation: none; filter: brightness(1.15); }
.tg-cine-btn-omitir { border-color: #8a8a8a; color: #cfcfcf; }
.tg-cine-btn-omitir:hover:not(:disabled) { background: #cfcfcf; }
.tg-cine-puntos { display: flex; gap: 6px; }
.tg-cine-punto { width: 10px; height: 10px; border-radius: 50%; background: #444; border: 2px solid #f1c40f; transition: background .2s, transform .2s; }
.tg-cine-punto.visto { background: #8a6d12; }
.tg-cine-punto.activo { background: #f1c40f; transform: scale(1.3); }

@media (max-height: 480px) {
    #tg-cinematica { padding: 1cqh 2cqw; }
    .tg-cine-texto { min-height: 0; padding: .6cqh 1.5cqw; margin-top: -3cqh; }
    .tg-cine-controles { margin-top: .8cqh; }
    .tg-cine-titulo { display: none; }
}