/* ===========================================================================
   CORRECCIÓN CRÍTICA DE NAVEGACIÓN Y DROPDOWN - VERSIÓN FINAL LAVADA
   Fix EXCLUSIVO para z-index y visibilidad, sin tocar layout del site
   =========================================================================== */

/* IMPORTANTE: Este archivo DEBE cargarse DESPUÉS de styles.css */

/* 
   FIX 1: Header y Contenedores 
   Solo permitimos overflow visible para que el dropdown no se corte.
   NO tocamos height ni width del header para no romper el flujo.
*/
header {
    z-index: 99999 !important;
}

/* El contenedor interno SÍ necesita overflow visible para el dropdown */
header .container,
header .nav-container,
.nav-links,
.dropdown {
    overflow: visible !important;
    z-index: auto;
    /* Dejar que el stack context funcione */
}

header .container {
    z-index: 100000 !important;
}

/* Dropdown en desktop */
.dropdown {
    z-index: 100002 !important;
    position: relative !important;
    overflow: visible !important;
    display: inline-block !important;
    height: 100%;
    /* Asegurar altura completa relativa al padre */
}

/* 
   PUENTE INVISIBLE PARA EL HOVER 
   Esto crea un área transparente debajo del botón que conecta con el menú,
   evitando que se cierre al bajar el mouse.
*/
.dropdown::after {
    content: '';
    position: absolute;
    bottom: -20px;
    /* Extiende el área sensible hacia abajo */
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 100003;
    pointer-events: auto;
    /* IMPORTANTE: Captura eventos de mouse */
}

/* 
   FIX 2: Dropdown Content
   CORRECCIÓN: Oculto por defecto, visible solo en hover/active 
*/
.dropdown-content {
    display: none;
    /* Reset crucial */
    opacity: 0;
    visibility: hidden;
    position: absolute !important;
    z-index: 100004 !important;
    /* Mantener estilos visuales base si se perdieron */
    background-color: rgba(0, 0, 0, 0.95);
    min-width: 250px;
    top: 100% !important;
    /* Posición estándar */
    margin-top: 0 !important;
    /* Sin márgenes que creen huecos */
    padding-top: 10px !important;
    /* Padding interno visual */
}

/* ESTADOS ACTIVOS: Solo aquí mostramos el menú */
.dropdown:hover .dropdown-content,
.dropdown.active .dropdown-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* 
   FIX 3: Hero y Secciones (SIN ROMPER LAYOUT)
   Solo ajustamos z-index. NO tocamos display, position, width, ni height.
   Esto asegura que la estructura original de Flexbox/Grid se mantenga intacta.
*/

/* Bajar el nivel del Hero para que el menú pase por encima */
.hero,
.signature-hero,
.cartelera-hero-section {
    z-index: 1 !important;
    position: relative;
    /* Mantener relative es seguro */
}

/* Video y fondos al fondo absoluto */
.hero-video,
.signature-hero-video,
.hero-bg,
.hero-overlay {
    z-index: -1 !important;
    /* NO forzamos posición ni tamaño aquí, usamos el CSS original */
}

/* Contenido del Hero un poco más arriba que el fondo */
.hero-content {
    z-index: 2 !important;
    position: relative;
}

/* 
   FIX 4: Móvil 
*/
@media (max-width: 768px) {

    /* Menú móvil fijo y encima de todo */
    .nav-links {
        z-index: 100001 !important;
        position: fixed !important;
        /* Restaurar scroll si el menú es muy alto */
        overflow-y: auto !important;
        /* Dynamic viewport height para navegadores modernos */
        height: 100vh;
        height: 100dvh;
        max-height: -webkit-fill-available;
        /* Extra padding para que el contenido no quede cortado */
        padding-bottom: 6rem !important;
        overscroll-behavior: contain;
    }

    /* En móvil quitar el puente invisible del hover desktop */
    .dropdown::after {
        display: none !important;
    }

    /* En móvil, el dropdown es parte del flujo, no flotante */
    .nav-links .dropdown-content {
        position: relative !important;
        display: none !important;
        /* Oculto por defecto */
        opacity: 1 !important;
        visibility: visible !important;
        top: 0 !important;
        transform: none !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        padding-top: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Mostrar solo cuando la clase .active está presente (vía JS) */
    .nav-links .dropdown.active .dropdown-content {
        display: block !important;
        max-height: none !important;
        /* Permitir altura completa */
    }

    /* Icono de flecha rotando */
    .nav-links .dropdown .dropbtn i {
        transition: transform 0.3s ease !important;
    }

    .nav-links .dropdown.active .dropbtn i {
        transform: rotate(180deg) !important;
    }

    /* Botón contactar mejorado */
    .nav-btn-highlight {
        background: linear-gradient(135deg, var(--primary-gold), #f4d03f) !important;
        color: #000 !important;
        font-weight: 700 !important;
        text-shadow: none !important;
    }
}

/* 
   FIX 5: Reset de visibilidad para evitar parpadeos
   Pero sin bloquear el renderizado inicial
*/
html,
body {
    overflow-x: hidden;
    /* Prevenir scroll lateral indeseado */
}

/* FIX 6: Pantallas muy pequeñas (320px-480px) */
@media (max-width: 480px) {
    .nav-links {
        width: 95% !important;
        max-width: 100% !important;
        padding-bottom: 8rem !important;
    }

    .nav-links .dropdown .dropdown-content a {
        padding: 0.75rem 1rem 0.75rem 1.25rem !important;
        font-size: 0.8rem !important;
    }

    .nav-links .dropdown .dropdown-content .dropdown-category-title {
        font-size: 0.6rem !important;
        letter-spacing: 0.5px !important;
    }
}