/*
═══════════════════════════════════════════════════════════════════════════════
    MOBILE MENU FIX - Correcciones del Menú Móvil JPG
    
    Soluciona desbordamiento, comportamiento sticky y cierre automático
═══════════════════════════════════════════════════════════════════════════════
*/

/* ============================================================================
   MENÚ MÓVIL - CONTENEDOR PRINCIPAL
   ============================================================================ */

.th-menu-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background-color: #2B4A6F !important;
    z-index: 99999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.th-menu-wrapper.th-menu-open,
.th-menu-wrapper.body-visible {
    transform: translateX(0) !important;
}

/* ============================================================================
   ÁREA DEL MENÚ
   ============================================================================ */

.th-menu-wrapper .th-menu-area {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ============================================================================
   BOTÓN DE CERRAR
   ============================================================================ */

.th-menu-wrapper .th-menu-toggle {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 40px !important;
    height: 40px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 18px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease !important;
}

.th-menu-wrapper .th-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ============================================================================
   LOGO MÓVIL
   ============================================================================ */

.th-menu-wrapper .mobile-logo {
    padding: 25px 20px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
}

.th-menu-wrapper .mobile-logo img {
    max-width: 150px !important;
    height: auto !important;
}

/* ============================================================================
   CONTENEDOR DEL MENÚ MÓVIL - SCROLLABLE
   ============================================================================ */

.th-menu-wrapper .th-mobile-menu {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
}

.th-menu-wrapper .th-mobile-menu::-webkit-scrollbar {
    width: 4px !important;
}

.th-menu-wrapper .th-mobile-menu::-webkit-scrollbar-track {
    background: transparent !important;
}

.th-menu-wrapper .th-mobile-menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
}

/* ============================================================================
   LISTA DEL MENÚ
   ============================================================================ */

.th-menu-wrapper .th-mobile-menu>ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.th-menu-wrapper .th-mobile-menu>ul>li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ============================================================================
   ENLACES DEL MENÚ
   ============================================================================ */

.th-menu-wrapper .th-mobile-menu>ul>li>a {
    display: block !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 14px 18px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    background-color: transparent !important;
}

.th-menu-wrapper .th-mobile-menu>ul>li>a:hover,
.th-menu-wrapper .th-mobile-menu>ul>li>a.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFD700 !important;
}

/* Ocultar flechas de dropdown en móvil */
.th-menu-wrapper .th-mobile-menu>ul>li.menu-item-has-children>a::after {
    display: none !important;
}

/* ============================================================================
   OVERLAY CUANDO EL MENÚ ESTÁ ABIERTO
   ============================================================================ */

body.th-body-visible::before,
body.body-visible::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 99998 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease !important;
}

/* ============================================================================
   HEADER STICKY/FIXED EN MÓVIL
   ============================================================================ */

@media (max-width: 1199px) {
    .th-header.header-layout3 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background-color: #2B4A6F !important;
    }

    .th-header.header-layout3 .sticky-wrapper {
        background-color: #2B4A6F !important;
    }

    /* Compensar el espacio del header fijo */
    body {
        padding-top: 0 !important;
    }

    /* Ajustar hero section para el header fijo */
    .th-hero-wrapper {
        margin-top: 0 !important;
    }

    /* OCULTAR COMPLETAMENTE EL MENÚ MÓVIL Y TODOS SUS COMPONENTES */
    .th-menu-wrapper,
    .th-menu-wrapper.onepage-nav,
    .th-menu-wrapper .th-menu-area,
    .th-menu-wrapper .th-mobile-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Ocultar overlay del menú */
    body.th-body-visible::before,
    body.body-visible::before {
        display: none !important;
    }
}

/* ============================================================================
   AJUSTES ADICIONALES RESPONSIVOS
   ============================================================================ */

@media (max-width: 576px) {
    .th-menu-wrapper {
        max-width: 280px !important;
    }

    .th-menu-wrapper .th-mobile-menu>ul>li>a {
        font-size: 15px !important;
        padding: 12px 15px !important;
    }

    .th-menu-wrapper .mobile-logo img {
        max-width: 130px !important;
    }
}

/* ============================================================================
   FIX PARA EL SCROLL DEL BODY CUANDO EL MENÚ ESTÁ ABIERTO
   ============================================================================ */

body.th-body-visible,
body.body-visible {
    overflow: hidden !important;
}

/* ============================================================================
   ANIMACIÓN DE ENTRADA PARA LOS ITEMS DEL MENÚ
   ============================================================================ */

.th-menu-wrapper.body-visible .th-mobile-menu>ul>li {
    animation: slideInFromLeft 0.3s ease forwards;
    opacity: 0;
}

.th-menu-wrapper.body-visible .th-mobile-menu>ul>li:nth-child(1) {
    animation-delay: 0.1s;
}

.th-menu-wrapper.body-visible .th-mobile-menu>ul>li:nth-child(2) {
    animation-delay: 0.15s;
}

.th-menu-wrapper.body-visible .th-mobile-menu>ul>li:nth-child(3) {
    animation-delay: 0.2s;
}

.th-menu-wrapper.body-visible .th-mobile-menu>ul>li:nth-child(4) {
    animation-delay: 0.25s;
}

.th-menu-wrapper.body-visible .th-mobile-menu>ul>li:nth-child(5) {
    animation-delay: 0.3s;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================================
   ITEM DE CONTACTO DESTACADO EN MENÚ MÓVIL
   ============================================================================ */

.th-menu-wrapper .th-mobile-menu>ul>li.menu-contact-item {
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.th-menu-wrapper .th-mobile-menu>ul>li.menu-contact-item>a {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFD700 !important;
    font-weight: 600 !important;
}

.th-menu-wrapper .th-mobile-menu>ul>li.menu-contact-item>a:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%) !important;
    border-color: rgba(255, 215, 0, 0.4) !important;
}

/* ============================================================================
   ICONOS EN EL MENÚ MÓVIL
   ============================================================================ */

.th-menu-wrapper .th-mobile-menu>ul>li>a i {
    font-size: 16px !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

.th-menu-wrapper .th-mobile-menu>ul>li>a:hover i {
    opacity: 1 !important;
}

/* Utilidad para margen derecho */
.me-2 {
    margin-right: 0.5rem !important;
}

/* ============================================================================
   ANIMACIÓN ADICIONAL PARA EL 6TO ELEMENTO (CONTÁCTANOS)
   ============================================================================ */

.th-menu-wrapper.body-visible .th-mobile-menu>ul>li:nth-child(6) {
    animation-delay: 0.35s;
}

/* ============================================================================
   MEJORAS VISUALES ADICIONALES
   ============================================================================ */

.th-menu-wrapper .th-mobile-menu>ul>li>a {
    display: flex !important;
    align-items: center !important;
}

/* Separador visual sutil entre items */
.th-menu-wrapper .th-mobile-menu>ul>li:not(:last-child)>a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.th-menu-wrapper .th-mobile-menu>ul>li.menu-contact-item>a {
    border-bottom: none !important;
}