/* ========================================================= */
/* BASE DEL DOCUMENTO — EVITAR SCROLL Y FLASH BLANCO         */
/* ========================================================= */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: #fff;
}

/* ========================================================= */
/* FADE-IN / OUT (1.2s)                                      */
/* ========================================================= */

@keyframes entradaCineB {
    0%   { opacity: 0; transform: scale(0.94); filter: blur(8px); }
    30%  { opacity: 0.25; transform: scale(0.97); filter: blur(4px); }
    60%  { opacity: 0.6; transform: scale(0.985); filter: blur(2px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0px); }
}

@keyframes salidaCineB {
    0%   { opacity: 1; transform: scale(1); filter: blur(0px); }
    40%  { opacity: 0.6; transform: scale(0.985); filter: blur(2px); }
    70%  { opacity: 0.25; transform: scale(0.97); filter: blur(4px); }
    100% { opacity: 0; transform: scale(0.94); filter: blur(8px); }
}

#escena {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    animation: entradaCineB 1.2s ease-out forwards;
    will-change: opacity, transform, filter;
}

#escena.salida {
    animation: salidaCineB 1.2s ease-in forwards;
}

/* ========================================================= */
/* FONDO                                                     */
/* ========================================================= */

.fondo-cine {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: image-set(
        url('/foto.webp') type('image/webp'),
        url('/foto.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* ========================================================= */
/* CONTENEDOR                                                */
/* ========================================================= */

#contenedor {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    background: rgba(0,0,0,0.35);
    padding: 40px 60px;
    border-radius: 12px;

    border: 2px solid rgba(255,255,255,0.35);
    box-shadow: none;

    backdrop-filter: blur(3px);
    z-index: 2;

    transition: box-shadow 0.4s ease, border-color 0.4s ease;
    will-change: box-shadow, border-color;
}

/* ========================================================= */
/* HOVER DEL CONTENEDOR — GLOW INTENSO #FF0                  */
/* ========================================================= */

#contenedor:hover {
    border-color: #ff0;
    box-shadow:
        0 0 28px rgba(255,255,0,1),
        0 0 56px rgba(255,255,0,0.9),
        0 0 84px rgba(255,255,0,0.75);
}

/* ========================================================= */
/* TEXTOS BASE                                               */
/* ========================================================= */

.texto,
.texto-grande,
.texto-amarillo,
.suscrito,
.titulo-hover {
    color: #fff;
    text-shadow: none;
    -webkit-text-stroke: 0;
    transition: all 0.35s ease;
}

.texto-grande {
    font-size: 38px;
}

/* ========================================================= */
/* GLOW ROJO PARA LA FRASE “DEBEMOS”                         */
/* ========================================================= */

.frase-debemos {
    color: #fff;
    text-shadow: none;
}

#contenedor:hover .frase-debemos {
    color: #ff0;
    text-shadow:
        0 0 12px rgba(255,0,0,1),
        0 0 24px rgba(255,0,0,0.9),
        0 0 36px rgba(255,0,0,0.8),
        0 0 48px rgba(255,0,0,0.7);
}

/* ========================================================= */
/* GLOW AMARILLO PARA ¡COMPENSAR LO QUE FALTA!               */
/* ========================================================= */

.glow-compensar {
    text-shadow: none;
}

#contenedor:hover .glow-compensar {
    text-shadow:
        0 0 18px rgba(255,255,0,1),
        0 0 36px rgba(255,255,0,1),
        0 0 72px rgba(255,255,0,0.95),
        0 0 110px rgba(255,255,0,0.85);
}

/* ========================================================= */
/* HOVER: TEXTOS A AMARILLO (SIN GLOW)                       */
/* ========================================================= */

#contenedor:hover .texto:not(.blanco-fijo),
#contenedor:hover .texto-grande:not(.blanco-fijo),
#contenedor:hover .texto-amarillo:not(.blanco-fijo),
#contenedor:hover .titulo-hover:not(.blanco-fijo) {
    color: #ff0 !important;
    -webkit-text-stroke: 1px #fff;
    font-weight: 900;
}

/* ========================================================= */
/* ¿SUSCRITO? — BAJA 2PX EN HOVER                            */
/* ========================================================= */

.suscrito {
    color: #fff;
    font-weight: bold;
    font-size: 26px;
}

#contenedor:hover .suscrito {
    color: #ff0 !important;
    text-shadow: none !important;
    font-size: 24px !important;
}

/* ========================================================= */
/* BLANCO FIJO                                               */
/* ========================================================= */

.blanco-fijo {
    color: #fff !important;
    -webkit-text-stroke: 0 !important;
    font-weight: bold !important;
    transform: none !important;
    font-size: calc(100% + 16px) !important;
}

/* ========================================================= */
/* BLOQUE INFERIOR                                           */
/* ========================================================= */

.bloque-inferior {
    transform: translateY(-25px);
}

/* ========================================================= */
/* BOTÓN © — SIN GLOW                                        */
/* ========================================================= */

.boton-copy {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 50px;
    background: rgba(255,255,0,0.15);
    border: 2px solid rgba(255,255,0,0.55);
    color: #ff0;
    font-size: 28px;
    font-weight: bold;
    text-shadow: none;
    box-shadow: none;
    transition: all 0.4s ease;
    margin-bottom: 8px;
    text-decoration: none;
}

.boton-copy:hover {
    background: rgba(255,255,0,0.35);
    border-color: rgba(255,255,0,0.85);
    box-shadow: none;
    transform: scale(1.08);
    text-decoration: underline;
}

/* ========================================================= */
/* OVERLAY GLOBAL BLANCO                                     */
/* ========================================================= */

#overlayGlobal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #fff;
    opacity: 1;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 1.2s ease-in-out;
    will-change: opacity;
}

#overlayGlobal.inactivo {
    opacity: 0;
    pointer-events: none;
}

#overlayGlobal.activo {
    opacity: 1;
}