/* --- VARIABLES DE COLOR (PALETA VIRT6 basada en la imagen) --- */
:root {
    --bg-deep: #050510;
    --neon-cyan: #00f3ff; /* Cyan brillante de la imagen */
    --neon-magenta: #bc13fe; /* Magenta/Rosa neón */
    --neon-purple: #7b2cbf;
    --text-main: #ffffff;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- RESET BÁSICO --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    background-color: var(--bg-deep);
    font-family: var(--font-main);
    overflow: hidden; /* Evita scroll en la pantalla de inicio */
}

/* --- CONTENEDOR PRINCIPAL (CENTRADO ABSOLUTO) --- */
.splash-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #1a1a3a 0%, var(--bg-deep) 100%);
}

/* --- VIDEO --- */
.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre toda la pantalla manteniendo proporción */
    opacity: 0.85; /* Un poco oscuro para que resalte el botón */
}

/* --- OVERLAY Y BOTÓN --- */
.overlay-content {
    position: absolute; /* Cambiado a absolute para controlar mejor los dos overlays */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Por encima del video */
    text-align: center;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Gradiente sutil detrás del botón para legibilidad */
    background: radial-gradient(circle, rgba(5,5,16,0.7) 0%, rgba(5,5,16,0) 70%);
}

.neon-button {
    background: transparent;
    color: var(--neon-cyan);
    font-family: var(--font-main);
    font-size: 1.5rem;
    font-weight: bold;
    padding: 20px 40px;
    border: 2px solid var(--neon-cyan);
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 10px var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan);
    display: flex;
    align-items: center;
    gap: 10px;
}

.neon-button:hover {
    background: var(--neon-cyan);
    color: var(--bg-deep);
    box-shadow: 0 0 20px var(--neon-cyan), 0 0 40px var(--neon-magenta);
    text-shadow: none;
    transform: scale(1.05);
}

.neon-button:active {
    transform: scale(0.95);
}

/* Variante Magenta para el botón de inicio de respaldo */
.neon-button.magenta {
    color: var(--neon-magenta);
    border-color: var(--neon-magenta);
    box-shadow: 0 0 10px var(--neon-magenta), inset 0 0 10px var(--neon-magenta);
    text-shadow: 0 0 5px var(--neon-magenta);
}
.neon-button.magenta:hover {
    background: var(--neon-magenta);
    color: #fff;
    box-shadow: 0 0 20px var(--neon-magenta), 0 0 40px var(--neon-cyan);
}

.btn-icon {
    font-size: 1.8rem;
}

/* =========================================
   MEDIA QUERIES (DISEÑO RESPONSIVO)
   ========================================= */

/* Tablets y pantallas medianas */
@media (max-width: 1024px) {
    .neon-button {
        font-size: 1.3rem;
        padding: 18px 35px;
    }
}

/* Móviles en horizontal / Tablets pequeñas */
@media (max-width: 768px) {
    .neon-button {
        font-size: 1.1rem;
        padding: 15px 30px;
        border-width: 2px;
    }
    
    #intro-video {
        object-fit: cover; 
    }
}

/* Móviles en vertical (Tu requerimiento específico de 500px) */
@media (max-width: 500px) {
    .splash-container {
        align-items: flex-end; 
        padding-bottom: 15vh; 
    }

    .overlay-content {
        background: linear-gradient(to top, rgba(5,5,16,0.9) 0%, rgba(5,5,16,0) 100%);
        align-items: flex-end;
        padding-bottom: 20px;
    }

    .neon-button {
        font-size: 1rem;
        padding: 15px 25px;
        width: 90%; /* Botón casi ancho completo en móvil */
        justify-content: center;
        box-shadow: 0 0 15px var(--neon-cyan), inset 0 0 5px var(--neon-cyan);
    }
    
    .neon-button.magenta {
         box-shadow: 0 0 15px var(--neon-magenta), inset 0 0 5px var(--neon-magenta);
    }

    .btn-icon {
        font-size: 1.4rem;
    }
}