/* =======================================================================
   1. BLOQUEO PARA ESCRITORIO (Seguridad Visual)
======================================================================= */
@media only screen and (min-width: 981px) {
    .burger-menu-container {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* =======================================================================
   2. ESTILOS OFF-CANVAS PARA MÓVILES Y TABLETS (<980px)
======================================================================= */
@media only screen and (max-width: 980px) {
    :root {
        --bg-primary: #002855; /* Azul institucional */
        --bg-secondary: #b9202f; /* Rojo acento */
        --bg-white: #ffffff;
        --bg-hover: #f4f7f9;
        --text-dark: #1a1a1a;
        --text-muted: #555555;
    }

    /* Contenedor principal: Centrado vertical perfecto para el scroll */
    .burger-menu-container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        height: 100% !important;
        position: relative;
    }

    /* Botón Hamburguesa: Blindaje contra estilos de Divi */
    .burger-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 10px !important;
        margin: 0 !important;
        z-index: 9998 !important;
        outline: none !important;
        min-height: 44px; /* Touch target accesible */
    }

    .burger-box {
        position: relative !important;
        width: 32px !important;
        height: 24px !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .burger-inner, 
    .burger-inner::before, 
    .burger-inner::after {
        width: 32px !important;
        height: 3px !important;
        /* COLOR ESTÁTICO (Tope de página con fondo oscuro) = BLANCO */
        background-color: #ffffff !important; 
        border-radius: 4px !important;
        position: absolute !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.3s ease !important;
        display: block !important;
    }
    
    /* COLOR SCROLL (Cabecera blanca) = AZUL INSTITUCIONAL */
    .burger-menu-toggle.is-scrolled .burger-inner,
    .burger-menu-toggle.is-scrolled .burger-inner::before,
    .burger-menu-toggle.is-scrolled .burger-inner::after {
        background-color: var(--bg-primary) !important;
    }
    
    .burger-inner { 
        top: 50% !important; 
        transform: translateY(-50%) !important; 
    }
    
    .burger-inner::before { 
        content: "" !important; 
        top: -9px !important; 
    }
    
    .burger-inner::after { 
        content: "" !important; 
        bottom: -9px !important; 
    }

    /* Overlay Oscuro */
    .burger-menu-overlay {
        position: fixed !important;
        top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important;
        background: rgba(0, 15, 35, 0.7) !important; /* Tono azulado más elegante */
        backdrop-filter: blur(4px) !important; /* Efecto premium (Glassmorphism) */
        -webkit-backdrop-filter: blur(4px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.35s ease, visibility 0.35s ease !important;
        z-index: 9998 !important;
    }
    .burger-menu-overlay.is-active { 
        opacity: 1 !important; 
        visibility: visible !important; 
    }

    /* Menú Off-Canvas Panel Lateral */
    .burger-offcanvas {
        position: fixed !important;
        top: 0 !important; right: 0 !important;
        width: 340px !important; max-width: 88vw !important; height: 100vh !important;
        background-color: var(--bg-white) !important;
        box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .burger-offcanvas.is-open { 
        transform: translateX(0) !important; 
    }

    /* Cabecera del panel */
    .burger-offcanvas-header {
        display: flex !important; justify-content: space-between !important; align-items: center !important;
        padding: 24px 20px !important; 
        background-color: var(--bg-primary) !important; 
        color: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    }
    .burger-title { 
        font-family: inherit !important;
        font-weight: 600 !important; 
        font-size: 1.15rem !important; 
        letter-spacing: 0.5px !important;
    }
    .burger-menu-close {
        background: rgba(255,255,255,0.1) !important; border: none !important; color: white !important;
        width: 36px !important; height: 36px !important; border-radius: 50% !important;
        font-size: 24px !important; cursor: pointer !important; 
        display: flex !important; align-items: center !important; justify-content: center !important;
        transition: background 0.2s ease !important;
    }
    .burger-menu-close:active { background: rgba(255,255,255,0.2) !important; }

    /* ELIMINACIÓN DE VIÑETAS Y LISTAS NATIVAS */
    ul.burger-nav-list, 
    ul.burger-sub-menu,
    li.burger-nav-item,
    li.burger-sub-item { 
        list-style: none !important; 
        list-style-type: none !important;
        padding: 0 !important; 
        margin: 0 !important; 
    }
    
    /* Previene pseudo-elementos inyectados por Divi (Puntos negros) */
    ul.burger-nav-list li::before,
    ul.burger-sub-menu li::before {
        content: none !important;
        display: none !important;
    }

    /* Enlaces Principales */
    a.burger-nav-link {
        display: block !important; 
        padding: 18px 24px !important;
        color: var(--text-dark) !important; 
        text-decoration: none !important;
        font-weight: 600 !important; 
        font-size: 16px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        transition: background-color 0.2s ease, padding-left 0.2s ease !important;
    }
    a.burger-nav-link:active { background-color: var(--bg-hover) !important; }

    /* Submenús - UI Premium */
    ul.burger-sub-menu { 
        background-color: var(--bg-hover) !important; 
        border-bottom: 1px solid #e0e0e0 !important;
    }
    a.burger-sub-link {
        display: flex !important; align-items: center !important;
        padding: 16px 24px 16px 45px !important;
        color: var(--text-muted) !important; 
        text-decoration: none !important; 
        font-size: 15px !important;
        font-weight: 500 !important;
        border-bottom: 1px solid rgba(0,0,0,0.03) !important;
    }
    /* Reemplazamos el guion por una sutil barra vertical indicadora */
    a.burger-sub-link::before { 
        content: "" !important; 
        display: block !important;
        width: 12px !important;
        height: 2px !important;
        background-color: var(--bg-secondary) !important;
        margin-right: 12px !important;
        border-radius: 2px !important;
    }
}