@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');

* {
    margin: 0; padding: 0; box-sizing: border-box;
}

body, html {
    height: 100%;
    overflow: hidden; /* Esto bloquea el scroll de la página */
    font-family: 'Montserrat', sans-serif;
    background-color: #000;
    color: #e0e0e0;
}

/* --- Imagen Fija --- */
#background-image {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('https://40.horizonte.fm/hzt_40_web_.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: filter 0.5s ease; /* Efecto suave al aplicar el blur */
}

/* Clase que inyecta JS para hacer el efecto blur y oscurecer */
.blur-active {
    filter: blur(12px) brightness(0.4);
}

/* --- Menú de Navegación --- */
/* --- Barra de Navegación Premium Mejorada --- */
.navbar {
    position: fixed;
    top: 0; 
    width: 100%;
    padding: 20px 0; /* Un poco más compacta para refinar el diseño */
    z-index: 10;
    
    /* Fondo negro profundo pero con transparencia para que se intuya la foto detrás */
    background: rgba(5, 5, 5, 0.85); 
    
    /* Efecto de desenfoque tipo vidrio esmerilado (estilo iOS/Premium) */
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); /* Compatibilidad con Safari/iPhones */
    
    /* Una delgadísima línea dorada abajo para separar finamente el menú de la foto */
    border-bottom: 1px solid rgba(212, 175, 55, 0.2); 
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.navbar ul {
    list-style: none; display: flex; justify-content: center; gap: 50px;
}

.navbar a {
    color: #ffffff; text-decoration: none; font-size: 1.1rem;
    text-transform: uppercase; letter-spacing: 2px;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
    transition: color 0.3s;
}

.navbar a:hover {
    color: #d4af37;
}

/* --- Contenedor de Ventanas (Overlay) --- */
.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 20;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; /* Oculto y sin ser clickeable por defecto */
    transition: opacity 0.5s ease;
}

.overlay.active {
    opacity: 1; pointer-events: auto; /* Se muestra al activarlo */
}

/* ==========================================================================
   1. ESTILOS PARA ESCRITORIO (Base general)
   ========================================================================== */

/* --- Botón Cerrar (X) --- */
.close-btn {
    position: fixed;        /* CAMBIO: Deja de ser 'absolute' para que flote fija en pantalla */
    top: 30px; 
    right: 40px;
    font-size: 3.5rem; 
    color: #d4af37;
    cursor: pointer; 
    z-index: 9999;          /* NUEVO: Obliga a la X a estar al frente de cualquier panel */
    line-height: 1;
    text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9); /* Sombra para que no se pierda con el fondo */
    transition: transform 0.3s;
}

.close-btn:hover {
    transform: scale(1.1); 
    color: #fff;
}

/* --- Estilo de los Paneles --- */
.content-panel {
    display: none; 
    background: rgba(15, 15, 15, 0.9);
    padding: 60px 40px;
    border-radius: 12px;
    border: 1px solid #d4af37;
    max-width: 1050px; /* ← CAMBIADO: Más ancho para aprovechar las pantallas de escritorio */
    width: 90%;       
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
    
    max-height: 85vh;  
    overflow-y: auto;  
    overflow-x: hidden; 
}

/* Scrollbar elegante para los paneles */
.content-panel::-webkit-scrollbar {
    width: 8px;
}
.content-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}
.content-panel::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 4px;
}

.content-panel.active {
    display: block; /* Solo se muestra la que JS active */
    animation: slideUp 0.4s ease forwards;
}

/* Animación de entrada para el panel */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Tipografía y Botones --- */
h2 {
    font-size: 2.2rem; color: #d4af37;
    margin-bottom: 25px; text-transform: uppercase; letter-spacing: 2px;
}

p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 30px; }

.btn-premium {
    background-color: transparent; color: #d4af37; border: 2px solid #d4af37;
    padding: 15px 40px; font-size: 1.2rem; text-transform: uppercase;
    letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease;
    border-radius: 4px; font-family: inherit;
}

.btn-premium:hover { background-color: #d4af37; color: #0a0a0a; }

.map-container {
    border: 1px solid #d4af37;
    padding: 5px;
    border-radius: 8px;
    background: #111;
    width: 100%;          /* Asegura que no sea más ancho que el panel */
    overflow: hidden;     /* Corta cualquier exceso del iframe */
}

/* --- Caja controlada para Eventbrite --- */
.eventbrite-box {
    width: 100%;
    height: 400px; /* Aquí limitas la altura para que no ocupe toda la pantalla */
    background-color: #ffffff; /* Fondo blanco para que el texto de Eventbrite se lea perfecto */
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
}
/* --- Estilos específicos para el texto de Información --- */

/* Alineamos el texto a la izquierda para mejor lectura, pero mantenemos el título centrado */
#info {
    text-align: left;
}
#info h2 {
    text-align: center;
}

.intro-text {
    text-align: center;
    font-size: 1.15rem;
    margin-bottom: 20px;
}

/* Separador elegante entre secciones */
.info-section {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(212, 175, 55, 0.2); /* Línea dorada semi-transparente */
}

/* Subtítulos dorados */
.gold-subtitle {
    color: #d4af37;
    font-size: 1.1rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Lista del menú con viñetas personalizadas */
.menu-list {
    list-style-type: none; /* Quitamos los puntos por defecto */
    padding-left: 0;
    margin-bottom: 15px;
}

.menu-list li {
    font-size: 1rem;
    color: #cccccc;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

/* Punto dorado elegante para la lista */
/* Punto dorado seguro contra errores de codificación */
.menu-list li::before {
    content: '\2022'; /* ← Código universal para el punto */
    color: #d4af37;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
    top: -2px;
}

/* Nota destacada (Mesas) */
.highlight-note {
    font-size: 0.95rem;
    color: #e0e0e0;
    border-left: 3px solid #d4af37; /* Línea lateral dorada */
    padding-left: 15px;
    margin: 20px 0;
    font-style: italic;
    background: rgba(255, 255, 255, 0.05); /* Fondo apenas visible */
    padding: 10px 10px 10px 15px;
    border-radius: 0 4px 4px 0;
}


/* ==========================================================================
   2. ADAPTACIONES PARA MÓVILES (Reemplaza tu bloque actual por este)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Conservamos tu imagen especial para celulares */
    #background-image {
        background-image: url('HZT40_cell.jpg');
    }

    /* 2. Forzamos a que TODOS los popups comiencen arriba a la misma altura */
    .overlay {
        align-items: flex-start; /* Evita que los paneles cortos floten en el centro */
        padding-top: 90px;       /* Deja un espacio limpio de 90px desde el techo del celular */
        overflow-y: auto;        /* Permite deslizar la pantalla si el texto es largo */
    }

    /* 3. Ajustamos los paneles internos */
    .content-panel {
        width: 95%;         
        padding: 30px 15px; 
        max-height: none;        /* Quitamos el 90vh para que el panel fluya con suavidad */
        margin-bottom: 40px;     /* Espacio de seguridad al final del scroll */
    }
    
    /* 4. Protegemos el título para que nunca se choque con la X */
    .content-panel h2 {
        font-size: 1.6rem;    
        padding: 0 40px;         /* Margen a los lados para dejarle un "hueco" exclusivo a la X */
        line-height: 1.2;
        margin-bottom: 25px;
    }
    
    .navbar ul {
        gap: 20px; 
    }
    
    .eventbrite-box {
        height: 450px; 
    }
    
    /* 5. Dejamos la X fija en una esquina despejada */
    .close-btn {
        position: fixed;
        top: 25px;       
        right: 20px;     
        font-size: 2.8rem; 
        z-index: 99999;          /* Se asegura de flotar por encima de cualquier texto */
    }
}

/* --- Estilo para el texto legal secundario de Tickets --- */
.disclaimer-text {
    font-size: 0.85rem;       /* Letra más chica */
    color: #777777;           /* Gris opaco, no brilla tanto como el blanco */
    line-height: 1.5;         /* Espaciado cómodo entre líneas */
    max-width: 800px;         /* Evita que las líneas de texto sean infinitamente largas */
    margin: 0 auto 25px auto; /* Centra el bloque de texto y le da espacio respecto a Eventbrite */
    text-align: center;
}
/* Clase para desvanecer el menú cuando un popup está abierto */
.navbar.navbar-hidden {
    opacity: 0;
    visibility: hidden; /* Evita que se pueda hacer click por error mientras no se ve */
    pointer-events: none;
}
/* --- Footer Fijo Premium --- */
.main-footer {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    padding: 15px 0;
    z-index: 5; /* Por debajo de las ventanas emergentes (z-index 20) */
    background: rgba(5, 5, 5, 0.85); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
    border-top: 1px solid rgba(212, 175, 55, 0.2); /* Fina línea dorada arriba */
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright {
    font-size: 0.85rem;
    color: #888888;
    letter-spacing: 1px;
}

.share-box {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
    color: #d4af37;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.share-buttons {
    display: flex;
    gap: 12px;
}

.share-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.4);
    transition: all 0.3s ease;
}

/* Los íconos vectoriales SVG toman el color dorado de la marca */
.share-btn svg {
    width: 16px;
    height: 16px;
    fill: #d4af37; 
    transition: fill 0.3s ease;
}

/* Efectos hover elegantes al pasar el mouse */
.share-btn:hover {
    border-color: #ffffff;
    background-color: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
}

.share-btn:hover svg {
    fill: #ffffff;
}

/* Ocultar el footer cuando el menú se esconda */
.main-footer.footer-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Ajustes del footer para Celulares */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column-reverse; /* Pone los botones arriba y el copyright abajo */
        gap: 12px;
        text-align: center;
    }
    .main-footer {
        padding: 12px 0;
    }
}