/* ==== GLOBAL ==== */

body {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    /* Usa la imagen de fondo que tenías originalmente */
    background: url("https://dinostorm.com/wp-content/gallery/concept-art/dino-storm-concept-art-13.png") center/cover fixed;
    color: #f2f2f2;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(3px);
    z-index: -1;
}


/* ========================================================= */


/* ==== HEADER (Solo logo) - DISEÑO GLASSMORFISM (FIJO) ==== */


/* ========================================================= */

header {
    /* Ahora solo contiene y centra el logo */
    display: flex;
    justify-content: center;
    /* Centra el logo horizontalmente */
    align-items: center;
    /* Centra el logo verticalmente */
    padding: 10px 50px;
    /* 10px arriba/abajo + 50px lados */
    height: 60px;
    /* Fija la altura total del contenido */
    /* Efecto Glassmorphism */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 211, 122, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Asegura que esté por encima del menú */
}


/* --- LOGO/TÍTULO - AHORA SOLO IMAGEN --- */

.logo {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: default;
}


/* --- ESTILO PARA LA IMAGEN DEL LOGO --- */

.logo img {
    height: 60px;
    width: auto;
    max-width: 250px;
    filter: drop-shadow(0 0 5px rgba(255, 211, 122, 0.8));
}


/* ========================================================= */


/* ==== BARRA DE MENÚ SEPARADA (.menu-bar) ==== */


/* ========================================================= */

.menu-bar {
    /* Nueva "cajita" de menú debajo del header principal */
    display: flex;
    justify-content: center;
    /* Centra la navegación dentro de la barra */
    /* CAMBIOS PARA HACER LA CAJA MÁS PEQUEÑA Y FIJA */
    width: auto;
    /* Permite que el ancho se ajuste al contenido */
    max-width: 1200px;
    /* Límite para pantallas muy grandes */
    margin: 0 auto;
    /* Centra la caja horizontalmente */
    /* Estilos de la "cajita" oscura y dorada */
    background: rgba(0, 0, 0, 0.75);
    border-bottom: 3px solid #ffd37a;
    /* La "raya" dorada que lo separa del contenido */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    /* Mantenemos el efecto fijo al hacer scroll */
    position: fixed;
    /* Necesitamos Left y Right para que Fixed y Margin Auto centren correctamente */
    left: 0;
    right: 0;
    /* El header tiene 60px (height) + 20px (total padding) = 80px */
    top: 80px;
    z-index: 999;
    /* Justo debajo del header principal */
    /* Añadimos un poco de padding vertical para que los bordes se vean bien */
    padding: 5px 0;
}


/* --- REGLA DE NAVEGACIÓN (QUITAMOS ESTILOS DE CAJA) --- */

header nav {
    /* Esta regla se mantiene para anular el margin-bottom anterior, aunque el nav ya no esté aquí */
}


/* --- MENÚ DE NAVEGACIÓN (BOTONES CON SUBRAYADO ANIMADO) --- */

nav a {
    color: #f2f2f2;
    margin-left: 15px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 8px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: color 0.3s;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ffd37a;
    /* Color de la línea de animación */
    transform: translateX(-100%);
    /* Escondida inicialmente */
    transition: transform 0.4s ease-out;
}

nav a:hover {
    color: #ffd37a;
}

nav a:hover::after {
    transform: translateX(0);
    /* Desliza la línea al pasar el ratón */
}


/* Contenedor del dropdown */

.dropdown {
    position: relative;
    display: inline-block;
}


/* Contenido que se despliega */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    width: 140px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5);
    border: 1px solid #ffd37a;
    border-radius: 6px;
    z-index: 10;
}


/* Links dentro del dropdown */

.dropdown-content a {
    color: #f2f2f2;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: 600;
    transition: 0.3s;
    margin-left: 0;
    /* Reinicia el margen heredado del nav */
}

.dropdown-content a:hover {
    background-color: #ffd37a;
    color: #000;
}


/* Mostrar dropdown al pasar el mouse */

.dropdown:hover .dropdown-content {
    display: block;
}


/* Opcional: cambiar color del botón principal al hover */

.dropdown:hover .dropbtn {
    color: #ffd37a;
}


/* ==== HERO ==== */

.hero {
    /* Agregamos padding superior para compensar el doble encabezado fijo */
    padding-top: 130px;
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero h2 {
    font-size: 48px;
    font-family: 'Orbitron', sans-serif;
}

.hero p {
    font-size: 20px;
    margin-bottom: 25px;
}

.hero-btn {
    background: #ffcf6f;
    padding: 12px 30px;
    color: #000;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    transition: 0.3s;
}

.hero-btn:hover {
    background: #ffe1a6;
}


/* ==== INFO SECTION ==== */

.info {
    padding: 80px 60px;
    text-align: center;
    background: rgba(0, 0, 0, 0.35);
    margin: 0px auto;
    width: 80%;
    border-radius: 16px;
    border: 1px solid #a88045;
}

.info h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    color: #ffd37a;
}

.info p {
    font-size: 20px;
}

.discord-btn {
    background: #7289da;
    color: #fff;
    padding: 12px 25px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.discord-btn:hover {
    background: #99a9f3;
}


/* ========================================================= */


/* ==== FOOTER MEJORADO Y UNIFICADO ==== */


/* ========================================================= */

footer {
    text-align: center;
    padding: 30px 20px;
    background: #0d0d0d;
    /* Fondo oscuro sólido */
    /* Borde superior grueso y dorado para simular cierre de panel */
    border-top: 5px solid #ffd37a;
    /* <<--- ESTO ES LO QUE ELIMINAREMOS O CAMBIAREMOS */
    margin-top: 40px;
}

footer p {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #f2f2f2;
    text-shadow: 0 0 5px rgba(255, 211, 122, 0.4);
    letter-spacing: 1px;
    margin: 0 0 15px 0;
    /* Espacio antes del icono */
}


/* Estilos para el icono de Discord */

.social-links {
    margin-top: 15px;
}

.discord-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}


/* Efecto de resplandor dorado al pasar el ratón */

.discord-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px #ffd37a, 0 0 25px #a88045;
}


/* ========================================================= */


/* ==== ANIMACIÓN DE NIEVE - NAVIDAD (NUEVO) ==== */


/* ========================================================= */


/* Contenedor que cubre toda la pantalla y está por encima de todo */

#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Permite hacer clic en lo que está debajo */
    z-index: 9999;
    /* Asegura que esté encima de todos los demás elementos (header, menú, etc.) */
    overflow: hidden;
}


/* Estilo base para cada copo de nieve (se añadirá con JavaScript) */

.snowflake {
    color: #fff;
    font-size: 1.5em;
    /* Un tamaño base para los copos */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    position: absolute;
    top: -10px;
    /* Comienzan justo fuera de la pantalla */
    /* Animación principal: se mueve y desaparece lentamente */
    animation-name: fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}


/* 1. Keyframes para el movimiento de caída (fall) */

@keyframes fall {
    100% {
        transform: translateY(100vh);
        /* Cae hasta el fondo de la pantalla */
        opacity: 0.5;
        /* Se vuelve ligeramente transparente al llegar al suelo */
    }
}


/* 2. Keyframes para un movimiento lateral y rotación (opcional, para realismo) */

@keyframes drift {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(50px) rotate(180deg);
    }
    /* Ligeramente a la derecha */
    100% {
        transform: translateX(0) rotate(360deg);
    }
    /* Vuelve a la izquierda */
}


/* Clase para añadir el movimiento lateral */

.snowflake.drift {
    animation-name: fall, drift;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite;
    /* El 'drift' es infinito */
    animation-duration: var(--fall-duration), 5s;
    /* Duración de caída y duración de 'drift' */
}


/* ========================================================= */


/* ==== MEDIA QUERIES (RESPONSIVE DESIGN) PARA INICIO (NUEVO) ==== */


/* ========================================================= */

@media (max-width: 900px) {
    /* Ajustes generales para tablets y móviles grandes */
    .info {
        width: 90%;
        /* Ocupa más ancho en el centro */
        padding: 40px 20px;
    }
}

@media (max-width: 650px) {
    /* --- ENCABEZADO Y MENÚ FIJO --- */
    header {
        height: 40px;
        /* Reducimos la altura del header del logo */
        padding: 10px 10px;
    }
    .logo img {
        height: 40px;
        /* Reducimos el logo */
        max-width: 180px;
    }
    /* La altura total del encabezado (Header + Menu Bar) es clave */
    .menu-bar {
        top: 60px;
        /* 40px (header height) + 20px (header padding vertical) = 60px */
        padding: 5px 0;
    }
    /* --- MENÚ DE NAVEGACIÓN --- */
    /* Usamos flexbox para forzar a que los elementos quepan y se distribuyan */
    nav {
        display: flex;
        justify-content: space-around;
        width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
        /* Incluye padding en el ancho */
    }
    nav a {
        font-size: 12px;
        /* Reducimos el tamaño de la fuente de los enlaces */
        padding: 8px 3px;
        margin-left: 3px;
    }
    /* Ajuste para el contenido desplegable del menú GUÍAS */
    .dropdown-content {
        left: 0;
        right: auto;
        /* Anulamos el right para evitar desbordamiento */
        min-width: 120px;
        width: auto;
    }
    /* --- SECCIÓN HERO --- */
    .hero {
        /* Ajustamos el padding superior para el encabezado más pequeño y fijo */
        padding-top: 110px;
        height: auto;
        /* Permitimos que el contenido decida la altura */
        min-height: 70vh;
        align-items: flex-start;
        /* Alineamos el contenido arriba para que no se oculte */
        padding-bottom: 40px;
    }
    .hero h2 {
        font-size: 30px;
        /* Reducimos el título principal */
    }
    .hero p {
        font-size: 16px;
    }
    .hero-content {
        padding: 0 20px;
    }
    /* --- SECCIONES DE CONTENIDO (.info) --- */
    .info {
        padding: 30px 15px;
        width: 95%;
        /* Ocupa casi todo el ancho */
        margin: 20px auto;
    }
    .info h2 {
        font-size: 24px;
    }
    .info p {
        font-size: 18px;
    }
    /* --- FOOTER --- */
    footer p {
        font-size: 14px;
    }
    .discord-icon {
        width: 35px;
        height: 35px;
    }
}


/* ========================================================= */


/* ==== ESTILOS DEL MODAL (VENTANA EMERGENTE) ==== */


/* ========================================================= */

#event-modal {
    /* PROPIEDADES CRÍTICAS PARA LA VENTANA EMERGENTE */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* LAYOUT Y SCROLLING (CRÍTICO PARA MÓVIL) */
    display: flex;
    /* justify-content: flex-start;  <-- OPCIONAL: Para alinear los eventos arriba si ocupan poco */
    align-items: center;
    flex-direction: column;
    gap: 15px;
    /* Reducimos el espacio entre los dos eventos de 20px a 15px */
    overflow-y: auto;
    /* Permite el scroll vertical si el contenido excede 100vh */
    padding: 15px 10px;
    /* Reducimos el padding superior/inferior y lateral */
    /* Estilos visuales */
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10001;
    transition: opacity 0.4s, visibility 0.4s;
}

.modal-hidden {
    opacity: 0;
    visibility: hidden;
}

.modal-content {
    background: rgba(10, 10, 10, 0.95);
    border: 3px solid #ffd37a;
    border-radius: 12px;
    padding: 20px;
    /* Reducimos el padding interno de 30px a 20px */
    max-width: 450px;
    width: 100%;
    text-align: center;
    color: #f2f2f2;
    box-shadow: 0 0 25px rgba(255, 211, 122, 0.5);
    margin: 0 auto;
    /* Es recomendable añadir un margen inferior si el gap no es suficiente */
}

.modal-content h2 {
    font-family: 'Orbitron', sans-serif;
    color: #ffd37a;
    font-size: 1.8em;
    margin-top: 0;
    text-transform: uppercase;
}

.modal-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #a88045;
}

.modal-date {
    font-size: 1.1em;
    color: #ffd37a;
    margin: 15px 0;
}


/* Botón de Enlace (Llama a la acción) */

.modal-btn {
    display: block;
    width: 80%;
    margin: 20px auto 15px auto;
    padding: 10px;
    background: #c90000;
    /* Un rojo intenso o puedes usar el amarillo #ffd37a */
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    transition: background 0.3s, transform 0.2s;
}

.modal-btn:hover {
    background: #ff4d4d;
    transform: translateY(-2px);
}


/* Botón de Cerrar (Secundario) */

#close-modal-btn {
    background: transparent;
    color: #ccc;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.9em;
    transition: color 0.3s;
}

#close-modal-btn:hover {
    color: #ffd37a;
    text-decoration: underline;
}


/* ------------------------------------------- */


/* Botón de Cierre con Posición Absoluta (X) */


/* ------------------------------------------- */

.modal-content {
    position: relative;
    /* CLAVE: Para que el botón 'X' se posicione respecto a este contenedor */
    /* ... otros estilos del modal-content ... */
}

#close-modal-btn.close-icon {
    position: absolute;
    top: -15px;
    /* Saca el botón de cierre ligeramente del modal */
    right: -15px;
    /* Estilos del botón */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    /* Lo hace circular */
    background: #c90000;
    /* Fondo rojo fuerte */
    color: #fff;
    border: 2px solid #ffd37a;
    /* Borde dorado */
    /* Centrar la 'X' */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1;
    /* Asegura que la 'X' esté centrada verticalmente */
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    transition: transform 0.2s, background 0.2s;
    /* Quita el fondo transparente del estilo anterior */
    text-decoration: none;
    padding: 0;
}

#close-modal-btn.close-icon:hover {
    background: #ff4d4d;
    /* Rojo más claro al pasar el ratón */
    transform: rotate(90deg);
    /* Animación sutil */
    box-shadow: 0 0 15px rgba(255, 211, 122, 0.8);
    /* Resplandor dorado más fuerte */
}