/* =========================================
   IMPORTACIÓN DE FUENTES LOCALES
========================================= */

/* 1. Jersey 15 */
@font-face {
    font-family: 'Jersey 15';
    src: url('../fonts/Jersey15-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. Montserrat - Normal (Peso 400) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 3. Montserrat - SemiBold (Peso 600) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* 4. Montserrat - SemiBold Itálica (Peso 600 Cursiva) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBoldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* 5. Montserrat - Black (Peso 900) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   RESETEO BÁSICO
========================================= */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}

.pantalla-inicio {
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/texturas/fondo-index.png');
    
    /* Tati, aquí se ciontrolan las proporciones de la pared de fondo de inicio para 100% de ancho, pero solo 82vh de alto */
    background-size: 100% 80vh; 
    
    /* Lo pegamos al techo para que el recorte quede abajo, oculto por el piso 3D */
    background-position: top center; 
    background-repeat: no-repeat;
    
    /* Fondo oscuro de seguridad por si el piso 3D se mueve en pantallas muy altas */
    background-color: #2b2522; 
    
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6%; 
}

/* =========================================
   NUEVO: PISO CON PERSPECTIVA 3D (CSS)
========================================= */
.piso-3d {
    position: absolute;
    bottom: -25vh; /* CRÍTICO: Lo empujamos mucho más abajo para liberar la franja café */
    left: -10vw; 
    width: 120vw;
    height: 45vh; 
    
    background-image: url('../assets/texturas/baldosas.png');
    background-size: 6vw; /* Baldosas un poco más pequeñas para mayor fuga visual */
    
    /* Magia 3D: Ángulo más acostado (75deg) para que no tape la pared */
    transform: perspective(40vh) rotateX(75deg);
    transform-origin: top center;
    z-index: 1;
}

/* Sombra degradada para que el piso se funda con la pared y no se vea un corte duro */
.piso-3d::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 40%);
}

/* =========================================
   CAPA INTERACTIVA (PUERTA Y TABLERO)
========================================= */
.capa-interactiva {
    position: absolute;
    top: 0; left: 0; width: 100vw; height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    padding-top: 4vh; /* CRÍTICO: Reducimos de 18vh a 4vh para subir todo hacia el techo */
    gap: 6%;
    z-index: 2; 
}

/* Puerta ajustada para que baje justo hasta el nuevo nivel del suelo */
.contenedor-puerta {
    height: 74vh; 
    /* NUEVO: Empuja la puerta hacia abajo para que toque el zócalo */
    margin-top: 2.5vh; 
}

.puerta-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.6)); 
}

/* Tablero paralelo, bajado sutilmente respecto al marco superior de la puerta */
.contenedor-tablero {
    position: relative;
    /* CAMBIO: Aumentamos de 48vw a 56vw para hacerlo más grande */
    width: 56vw; 
    max-width: 900px;
    /* CAMBIO: Reducimos el margen para que suba y quede paralelo a la puerta */
    margin-top: 2vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.6));
}

.tablero-fondo {
    width: 100%;
    display: block;
}

.contenido-tablero {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 2%;
}

.titulo-img {
    width: 75%;
    margin-top: -3%;
}

.subtitulo {
    /* Tati, para el subtítulo del tablero de inio usé Montserrat en lugar de Jersey 15, pero no estoy seguro */
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* Peso "Black" ultra grueso */
    
    font-size: 3.5vw; 
    color: rgba(255, 255, 255, 0.6);
    margin: -1% 0 0 0;
    
    /* Reducimos un poco el espaciado porque Montserrat es más ancha que Jersey */
    letter-spacing: 0px; 
}

.texto-corrido {
    font-family: 'Montserrat', sans-serif;
    font-size: 1vw; 
    font-weight: 600;
    color: #333333;
    text-align: center;
    margin-top: 1.5%;
    width: 90%;
}

/* =========================================
   BOTÓN PIXEL ART: BORDE FINO + CAPA BLINDADA
========================================= */
#btn-iniciar {
    position: absolute;
    bottom: -12%; 
    z-index: 10; 
    
    background-color: #1aa3ff; /* Azul celeste en la capa principal (Siempre arriba) */
    color: white; 
    
    font-family: 'Jersey 15', sans-serif;
    font-size: 3.5vw;
    line-height: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vw 3vw; 
    
    border: none;
    outline: none;
    cursor: pointer;
    text-transform: uppercase;
    
    /* MATRIZ MAESTRA: Dibuja el borde fino y la profundidad 3D en un solo bloque seguro */
    box-shadow: 
        /* --- 1. SUPERFICIE (Azul Celeste) --- */
        -0.3vw 0 0 0 #1aa3ff,
         0.3vw 0 0 0 #1aa3ff,
         0 -0.3vw 0 0 #1aa3ff,
         0  0.3vw 0 0 #1aa3ff,
         
        /* --- 2. BORDE FINO SUPERIOR (Rojo) --- */
        -0.6vw 0 0 0 #e60000,
         0.6vw 0 0 0 #e60000,
         0 -0.6vw 0 0 #e60000,
         0  0.6vw 0 0 #e60000,
        -0.3vw -0.3vw 0 0 #e60000,
         0.3vw -0.3vw 0 0 #e60000,
        -0.3vw  0.3vw 0 0 #e60000,
         0.3vw  0.3vw 0 0 #e60000,

        /* --- 3. SOMBRA 3D (Azul Oscuro, desplazada hacia abajo) --- */
         0 0.9vw 0 0 #0073b6,
        -0.3vw 0.9vw 0 0 #0073b6,
         0.3vw 0.9vw 0 0 #0073b6,
         0 1.2vw 0 0 #0073b6,

        /* --- 4. BORDE DE LA SOMBRA 3D (Rojo Oscuro) --- */
        -0.6vw 0.9vw 0 0 #b30000,
         0.6vw 0.9vw 0 0 #b30000,
         0 1.5vw 0 0 #b30000,
        -0.3vw 1.2vw 0 0 #b30000,
         0.3vw 1.2vw 0 0 #b30000;
         
    transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
}

/* INTERACCIÓN HOVER (Inversión perfecta de colores) */
#btn-iniciar:hover {
    background-color: #e60000; 
    box-shadow: 
        /* Superficie Roja */
        -0.3vw 0 0 0 #e60000,  0.3vw 0 0 0 #e60000,  0 -0.3vw 0 0 #e60000,  0  0.3vw 0 0 #e60000,
        /* Borde Celeste */
        -0.6vw 0 0 0 #1aa3ff,  0.6vw 0 0 0 #1aa3ff,  0 -0.6vw 0 0 #1aa3ff,  0  0.6vw 0 0 #1aa3ff,
        -0.3vw -0.3vw 0 0 #1aa3ff, 0.3vw -0.3vw 0 0 #1aa3ff, -0.3vw  0.3vw 0 0 #1aa3ff, 0.3vw  0.3vw 0 0 #1aa3ff,
        /* Sombra 3D Roja Oscura */
        0 0.9vw 0 0 #b30000, -0.3vw 0.9vw 0 0 #b30000, 0.3vw 0.9vw 0 0 #b30000, 0 1.2vw 0 0 #b30000,
        /* Borde 3D Azul Oscuro */
        -0.6vw 0.9vw 0 0 #0073b6, 0.6vw 0.9vw 0 0 #0073b6, 0 1.5vw 0 0 #0073b6,
        -0.3vw 1.2vw 0 0 #0073b6, 0.3vw 1.2vw 0 0 #0073b6;
}

/* FÍSICA DEL CLIC (Se hunde colapsando la sombra 3D) */
#btn-iniciar:active {
    transform: translateY(0.9vw);
    box-shadow: 
        -0.3vw 0 0 0 #1aa3ff, 0.3vw 0 0 0 #1aa3ff, 0 -0.3vw 0 0 #1aa3ff, 0 0.3vw 0 0 #1aa3ff,
        -0.6vw 0 0 0 #e60000, 0.6vw 0 0 0 #e60000, 0 -0.6vw 0 0 #e60000, 0 0.6vw 0 0 #e60000,
        -0.3vw -0.3vw 0 0 #e60000, 0.3vw -0.3vw 0 0 #e60000, -0.3vw 0.3vw 0 0 #e60000, 0.3vw 0.3vw 0 0 #e60000;
}

/* RESPONSIVIDAD MÓVIL (Escala matemática x2) */
@media (max-width: 768px) {
    #btn-iniciar { 
        font-size: 6vw; bottom: -15%; padding: 1.5vw 5vw;
        box-shadow: -0.6vw 0 0 0 #1aa3ff, 0.6vw 0 0 0 #1aa3ff, 0 -0.6vw 0 0 #1aa3ff, 0 0.6vw 0 0 #1aa3ff, -1.2vw 0 0 0 #e60000, 1.2vw 0 0 0 #e60000, 0 -1.2vw 0 0 #e60000, 0 1.2vw 0 0 #e60000, -0.6vw -0.6vw 0 0 #e60000, 0.6vw -0.6vw 0 0 #e60000, -0.6vw 0.6vw 0 0 #e60000, 0.6vw 0.6vw 0 0 #e60000, 0 1.8vw 0 0 #0073b6, -0.6vw 1.8vw 0 0 #0073b6, 0.6vw 1.8vw 0 0 #0073b6, 0 2.4vw 0 0 #0073b6, -1.2vw 1.8vw 0 0 #b30000, 1.2vw 1.8vw 0 0 #b30000, 0 3vw 0 0 #b30000, -0.6vw 2.4vw 0 0 #b30000, 0.6vw 2.4vw 0 0 #b30000;
    }
    #btn-iniciar:hover {
        box-shadow: -0.6vw 0 0 0 #e60000, 0.6vw 0 0 0 #e60000, 0 -0.6vw 0 0 #e60000, 0 0.6vw 0 0 #e60000, -1.2vw 0 0 0 #1aa3ff, 1.2vw 0 0 0 #1aa3ff, 0 -1.2vw 0 0 #1aa3ff, 0 1.2vw 0 0 #1aa3ff, -0.6vw -0.6vw 0 0 #1aa3ff, 0.6vw -0.6vw 0 0 #1aa3ff, -0.6vw 0.6vw 0 0 #1aa3ff, 0.6vw 0.6vw 0 0 #1aa3ff, 0 1.8vw 0 0 #b30000, -0.6vw 1.8vw 0 0 #b30000, 0.6vw 1.8vw 0 0 #b30000, 0 2.4vw 0 0 #b30000, -1.2vw 1.8vw 0 0 #0073b6, 1.2vw 1.8vw 0 0 #0073b6, 0 3vw 0 0 #0073b6, -0.6vw 2.4vw 0 0 #0073b6, 0.6vw 2.4vw 0 0 #0073b6;
    }
    #btn-iniciar:active { 
        transform: translateY(1.8vw); 
        box-shadow: -0.6vw 0 0 0 #1aa3ff, 0.6vw 0 0 0 #1aa3ff, 0 -0.6vw 0 0 #1aa3ff, 0 0.6vw 0 0 #1aa3ff, -1.2vw 0 0 0 #e60000, 1.2vw 0 0 0 #e60000, 0 -1.2vw 0 0 #e60000, 0 1.2vw 0 0 #e60000, -0.6vw -0.6vw 0 0 #e60000, 0.6vw -0.6vw 0 0 #e60000, -0.6vw 0.6vw 0 0 #e60000, 0.6vw 0.6vw 0 0 #e60000;
    }
}

/* =========================================
   LUCES DE TEATRO DINÁMICAS (CONTRASTE PRO)
========================================= */
#luces-teatro-index {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    pointer-events: none; 
    z-index: 9999; 
    mix-blend-mode: multiply;
    
    /* LUZ BASE: Tenue y elegante cuando no se señala nada */
    background-color: #888888; 
    background-image:
        radial-gradient(circle at 22% 48%, rgba(255,255,255,0.8) 0%, transparent 55%),
        radial-gradient(circle at 65% 50%, rgba(255,255,255,0.8) 0%, transparent 55%);
        
    transition: background-image 0.4s ease, background-color 0.4s ease;
}

/* FOCO PUERTA: Mayor oscuridad en el resto de la sala */
#luces-teatro-index.foco-puerta {
    background-color: #444444; 
    background-image:
        radial-gradient(circle at 22% 48%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 15%, transparent 45%), 
        radial-gradient(circle at 65% 50%, rgba(255,255,255,0.3) 0%, transparent 30%); 
}

/* FOCO TABLERO: Mayor oscuridad en el resto de la sala */
#luces-teatro-index.foco-tablero {
    background-color: #444444; 
    background-image:
        radial-gradient(circle at 22% 48%, rgba(255,255,255,0.3) 0%, transparent 30%), 
        radial-gradient(circle at 65% 50%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 12%, transparent 40%); 
}

/* LUZ TOTAL: Para el botón y la cinemática (Blanco en multiply = transparente/iluminado) */
#luces-teatro-index.luz-total {
    background-color: #ffffff; 
    background-image: none; 
}

/* =========================================
   EFECTO CINEMÁTICO DE TRANSICIÓN (LENTO Y PULIDO)
========================================= */

/* 1. Zoom de cámara (3.5s) y fundido a negro (2.5s con 1s de retraso) */
.pantalla-inicio {
    transition: transform 3.5s ease-in-out, opacity 2.5s ease-in 1s;
}

.pantalla-inicio.efecto-zoom-puerta {
    transform-origin: 22% 50%;
    transform: scale(4);
    opacity: 0; 
}

.contenedor-puerta {
    position: relative;
    z-index: 1; 
}

/* 2. AGUJERO NEGRO (Más estrecho para que no se asome por los lados) */
.contenedor-puerta::before {
    content: "";
    position: absolute;
    top: 3%;
    bottom: 2%;
    left: 12%;   /* CRÍTICO: Lo empujamos hacia adentro para esconderlo tras la puerta */
    right: 12%;  /* CRÍTICO: Lo empujamos hacia adentro para esconderlo tras la puerta */
    background-color: #030303; 
    z-index: -1; 
    box-shadow: inset 0 0 2vw rgba(0,0,0,1); 
}

/* 3. La puerta se desliza un poco más lento (2s) acompañando la cámara */
.puerta-img {
    transition: transform 2s ease-in-out;
}

/* 4. Movimiento hacia la izquierda */
.contenedor-puerta.puerta-abriendo .puerta-img {
    transform: translateX(-90%); 
}