/*=============================================
MOVIL (XS revisamos en 320px)
=============================================*/

@media (max-width: 768px) {
    
    /* 1. Corrección del Header Principal (Fondo Blanco) */
    .header-custom {
        height: auto !important;          /* Permite que el contenedor crezca verticalmente */
        min-height: min-content;
        flex-direction: column !important; /* Apila Logo, Menú e Iconos verticalmente */
        justify-content: center !important;
        align-items: center !important;
        padding: 25px 15px !important;    /* Espaciado interno cómodo */
        gap: 20px !important;              /* Distancia uniforme entre bloques */
    }

    /* 2. Área del Logo Centrada */
    .logo-area {
        width: 100px !important;          /* Regula el tamaño del logo en móviles */
        display: flex;
        justify-content: center;
    }

    /* 3. Menú de Categorías (Fluido y Multi-fila Centrado) */
    .menu-area {
        width: 100%;
        max-width: 550px;                /* Limita el ancho para obligar el salto limpio */
    }

    .menu-area ul {
        flex-wrap: wrap !important;       /* Permite que salten a la siguiente línea */
        justify-content: center !important; /* Centra horizontalmente las dos líneas */
        gap: 15px 25px !important;        /* 15px de separación vertical, 25px entre palabras */
    }

    .menu-area ul li {
        position: relative;
    }

    .menu-area ul li a {
        font-size: 11px !important;       /* Reduce un poco la fuente para optimizar espacio */
        letter-spacing: 1px !important;   /* Reduce el espacio entre letras */
    }

    /* 4. Corrección de la línea dorada animada en móvil */
    .menu-area ul li a::after {
        bottom: -4px !important;          /* Sube la línea para que no choque con la fila inferior */
    }

    /* 5. Área de Iconos (Buscador y Carrito) */
    .icons-area {
        justify-content: center !important;
        width: 100%;
        gap: 30px !important;             /* Espacio cómodo para dar tap con el dedo */
        margin-top: 5px;
    }
    
    /* 6. El ítem padre se queda estático para que el submenú no mueva a los demás */
    .menu-area ul li.dropdown-item {
        position: relative !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 7. El submenú vuelve a ser absoluto para FLOTAR sin mover nada */
    .menu-area ul li.dropdown-item .submenu-modern {
        position: absolute !important;   
        top: 100% !important;            /* Se posiciona exactamente debajo del texto */
        left: 50% !important;            /* Lo centramos respecto a su palabra */
        transform: translateX(-50%) !important; /* Centrado perfecto sin desfasarse a la derecha */
        z-index: 1000 !important;        /* Se superpone limpiamente sobre las filas de abajo */
        
        /* Dimensiones óptimas para móvil */
        width: auto !important;
        min-width: 150px !important;     
        background-color: #ffffff !important; 
        box-shadow: 0px 8px 20px rgba(0,0,0,0.15) !important; /* Sombra sutil para resaltar al flotar */
        border: 1px solid #eee !important;
        
        /* Oculto por defecto para controlarse con el JavaScript */
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
   @media (max-width: 489px) {
    /* 1. Volvemos a hacer al header relativo */
    .header-custom {
        position: relative !important;
    }

    /* 2. Dejamos el menú estático para el ancho completo */
    .menu-area, 
    .menu-area ul, 
    .menu-area ul li.dropdown-item {
        position: static !important; 
    }

    /* 3. Ajuste de posición del submenú */
    .menu-area ul li.dropdown-item .submenu-modern {
        position: absolute !important;   
        top: 100% !important;            
        left: 0 !important;              
        right: 0 !important;             
        transform: none !important;      
        
        width: 100% !important;          
        max-width: 100% !important;
        box-sizing: border-box !important;
        
        background-color: #ffffff !important; 
        border-top: 1px solid #eaeaea !important;
        border-bottom: 1px solid #eaeaea !important;
        
        /* EL TRUCO CLAVE: */
        margin-top: -45px !important;    /* Jalamos el submenú hacia arriba para tapar los iconos */
        z-index: 9999 !important;        /* Máxima prioridad para cubrir la lupa y el carrito */
        box-shadow: 0px 15px 30px rgba(0,0,0,0.2) !important; /* Sombra pronunciada abajo */
    }

    /* 4. Enlaces internos del submenú */
    .menu-area ul li.dropdown-item .submenu-modern li a {
        padding: 14px 10px !important;   
        font-size: 12px !important;
        text-align: center !important;   
        white-space: normal !important;  
    }
}

    /* 8. Activación fija únicamente cuando tiene la clase .open (inyectada por JS) */
    .menu-area ul li.dropdown-item.open .submenu-modern {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 9. Estilos de los links internos del submenú */
    .menu-area ul li.dropdown-item .submenu-modern li {
        width: 100% !important;
    }

    .menu-area ul li.dropdown-item .submenu-modern li a {
        display: block !important;
        padding: 12px 15px !important;   /* Espacio cómodo para dar clic con el dedo */
        font-size: 12px !important;
        text-align: center !important;
        color: #333 !important;
        border-bottom: 1px solid #f5f5f5 !important;
    }
    
    .menu-area ul li.dropdown-item .submenu-modern li:last-child a {
        border-bottom: none !important;  /* Quita la línea divisoria al último elemento */
    }

    /* 10. Estilo para la flechita interactiva */
    .submenu-toggle {
        cursor: pointer;
        padding: 5px;
        display: inline-block !important;
    }
    
    /* Animación opcional: rota la flecha cuando se abre */
    .menu-area ul li.dropdown-item.open .submenu-toggle i {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
    
    /* ==========================================================================
       BARRA SUPERIOR NEGRA (TOPBAR) RESPONSIVE
       ========================================================================== */
    #top {
        height: auto !important;
        padding: 10px 0 !important;
        width: 100% !important;
        max-width: 100vw !important;  /* Evita que mida más que la pantalla visible */
        overflow: hidden !important;   /* Recorta cualquier imperfección marginal */
    }

    .topbar-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 5px 15px !important;  /* Margen interno controlado */
        width: 100% !important;
        box-sizing: border-box !important; /* Fuerza a incluir el padding dentro del ancho total */
    }

    /* Contenedor central de información (Envíos, Oro, Compra) */
    .topbar-center {
        display: flex !important;
        flex-direction: column !important; /* Apila las 3 leyendas informativas en celular */
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
    }
    
    .topbar-item {
        font-size: 11px !important; /* Ajusta el texto para que quepa en pantallas chicas */
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    /* Contenedor de redes sociales */
    .social {
        width: 100% !important;
    }

    .social ul {
        display: flex !important;
        justify-content: center !important; /* Centra los iconos de redes */
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        gap: 15px !important;
    }

    /* Contenedor de Iniciar sesión / Registro */
    .registro {
        width: 100% !important;
        text-align: center !important; /* Centra el bloque de registro */
    }

    .registro ul {
        display: flex !important;
        justify-content: center !important; /* Centra los enlaces del login */
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        gap: 10px !important;
        font-size: 11px !important; /* Fuente idónea para legibilidad en celular */
    }
    
    .registro ul li {
        display: inline-block !important;
        margin: 0 !important;
    }
    
    .registro ul li a {
        color: #fff !important;
        text-decoration: none !important;
    }
}