/* ==========================================================================
   SISTEMA DE MENÚ MÓVIL REFINADO - SENTIR-LY
   ========================================================================== */

/* 1. COMPORTAMIENTO SEGÚN PANTALLA (MEDIA QUERIES) */

/* En Escritorio (Ocultamos todo lo relacionado al menú móvil) */
@media (min-width: 1025px) {
    .header__menu-btn, 
    #sideMenu, 
    body.is-menu-open::after {
        display: none !important;
    }
}

/* En Móvil y Tablets (Activamos la lógica visual) */
@media (max-width: 1024px) {
    
    /* Ocultamos la navegación principal del header para no duplicar */
    .header__container > .header__nav,
    .header__nav--right {
        display: none !important;
    }

    /* 2. CONTENEDOR LATERAL (SIDE MENU) */
    #sideMenu.header__nav-container {
        position: fixed;
        top: 0;
        left: -100%; /* Escondido */
        width: 85%;
        max-width: 350px;
        height: 100vh;
        background-color: var(--color-dark) !important;
        background-image: linear-gradient(80deg, var(--color-rose-dark) 20%, var(--color-primary) 80%);
        z-index: var(--z-modal);
        transition: left var(--transition-normal);
        padding: var(--spacing-2xl) var(--spacing-lg);
        box-shadow: var(--shadow-medium);
        display: flex !important;
        flex-direction: column;
    }

    #sideMenu.is-active {
        left: 0;
    }

    /* 3. BOTÓN CERRAR (X) */
    #closeBtn.header__close-btn {
        position: absolute;
        top: var(--spacing-md);
        right: var(--spacing-md);
        background: none;
        border: none;
        color: var(--color-dark) !important;
        cursor: pointer;
        transition: transform var(--transition-fast);
        display: block !important;
    }

    #closeBtn:hover {
        transform: rotate(90deg);
        color: var(--color-rose-dark) !important;
    }

    /* 4. LISTA DE NAVEGACIÓN */
    .header__nav--mobile {
        margin-top: var(--spacing-xl);
        display: block !important;
    }

    .mobile-menu-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mobile-menu-list li {
        margin-bottom: var(--spacing-sm) !important;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }

    /* 5. ENLACES (TEXTO) */
    .mobile-menu-list li a {
        display: inline-block !important;
        padding: var(--spacing-sm) 0 !important;
        color: var(--color-white) !important;
        text-decoration: none !important;
        text-shadow: 0cap;
        
        /* Tipografía de Marca */
        font-family: var(--font-display); 
        font-size: 1.3rem !important;
        font-weight: 500 !important;
        text-transform: uppercase;
        letter-spacing: 2px;
        
        transition: all var(--transition-fast);
        position: relative;
    }

    

    /* 6. OVERLAY Y ESTADO DEL BODY */
    body.is-menu-open {
        overflow: hidden !important;
    }

    body.is-menu-open::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--overlay-dark);
        z-index: calc(var(--z-modal) - 1);
        backdrop-filter: blur(2px);
        animation: fadeIn var(--transition-fast);
    }

    /* Marca de agua al fondo del menú */
    #sideMenu::after {
        content: 'Sentir';
        font-family: var(--font-script);
        font-size: 2.5rem;
        color: var(--color-rose-dark);
        opacity: 0.2;
        margin-top: auto;
        text-align: center;
        padding-bottom: var(--spacing-md);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}