/* FIX DEFINITIVO MENÚ MÓVIL - VERSIÓN CORREGIDA */
#mainHeader {
    z-index: 10000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

#mobileMenu {
    z-index: 10001 !important;
    position: fixed !important;
    top: 5rem !important; /* Usar rem en lugar de px para mejor adaptación */
    left: 0 !important;
    right: 0 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(236, 72, 153, 0.5) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    max-height: calc(100vh - 5rem) !important;
    overflow-y: auto !important;
}

#mobileMenu.active {
    display: flex !important;
    flex-direction: column !important;
}

/* Asegurar que el botón del menú sea clickeable */
#mobileMenuBtn {
    z-index: 10002 !important;
    position: relative !important;
}

/* Scroll del body cuando el menú esté abierto */
body.menu-open {
    overflow: hidden !important;
}

/* Asegurar que modales tengan z-index correcto */
.modal-overlay, #ageModal {
    z-index: 10003 !important;
}

/* Responsive: ajustar en pantallas muy pequeñas */
@media (max-height: 600px) {
    #mobileMenu {
        top: 4rem !important;
        max-height: calc(100vh - 4rem) !important;
    }
}