.mw-topnav {
    position: sticky;
    top: 0;
    z-index: 1040;

    width: 100%;

    background: #101827;
    border-bottom: 1px solid rgba(255,255,255,.08);

    box-shadow: 0 5px 22px rgba(15,23,42,.12);
}

.mw-topnav-inner {
    width: 100%;
    max-width: 1540px;
    min-height: 66px;

    margin: 0 auto;
    padding: 8px 22px;

    display: flex;
    align-items: center;
    gap: 16px;

    box-sizing: border-box;
}

.mw-topnav-brand {
    display: flex;
    align-items: center;
    gap: 9px;

    flex: 0 0 auto;

    color: #fff !important;
    text-decoration: none !important;

    font-size: 1.05rem;
    font-weight: 800;
}

.mw-topnav-brand img {
    object-fit: contain;
}

/* Search */

.mw-topnav-search {
    width: clamp(210px, 25vw, 370px);
    height: 40px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0 13px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;

    background: rgba(255,255,255,.08);
}

.mw-topnav-search i {
    color: #9ca8ba;
    font-size: .82rem;
}

.mw-topnav-search input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #fff;

    font-size: .82rem;
}

.mw-topnav-search input::placeholder {
    color: #9ca8ba;
}

/* Links */

.mw-topnav-collapse {
    flex: 1;
    min-width: 0;
}

.mw-topnav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.mw-topnav-links > a,
.mw-topnav-more {
    height: 38px;

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 0 9px;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #cbd5e1 !important;

    text-decoration: none !important;

    font-size: .78rem;
    font-weight: 600;

    white-space: nowrap;
}

.mw-topnav-links > a:hover,
.mw-topnav-more:hover {
    background: rgba(255,255,255,.08);
    color: #fff !important;
}

/* Right tools */

.mw-topnav-tools {
    display: flex;
    align-items: center;
    gap: 6px;

    flex: 0 0 auto;
}

.mw-topnav-tool {
    position: relative;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 10px;

    background: rgba(255,255,255,.07);
    color: #fff;

    cursor: pointer;
}

.mw-topnav-tool:hover {
    background: rgba(255,255,255,.13);
}

.mw-topnav-badge {
    position: absolute;
    top: -4px;
    right: -4px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    display: grid;
    place-items: center;

    border: 2px solid #101827;
    border-radius: 20px;

    background: #ef4444;
    color: #fff;

    font-size: .58rem;
    font-weight: 800;
}

/* User */

.mw-topnav-user {
    min-height: 42px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 4px 8px 4px 5px;

    border: 0;
    border-radius: 12px;

    background: transparent;
    color: #fff;

    text-align: left;
}

.mw-topnav-user:hover {
    background: rgba(255,255,255,.08);
}

.mw-topnav-avatar {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 34px;

    border-radius: 50%;

    background: linear-gradient(135deg, #0d6efd, #38bdf8);
    color: #fff;

    font-size: .72rem;
    font-weight: 800;
}

.mw-topnav-user-text {
    display: flex;
    flex-direction: column;

    line-height: 1.15;
}

.mw-topnav-user-text strong {
    font-size: .76rem;
}

.mw-topnav-user-text small {
    margin-top: 2px;
    color: #94a3b8;
    font-size: .61rem;
}

.mw-user-menu {
    min-width: 220px;
    border-radius: 12px;
}

.mw-user-menu-header {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
}

.mw-user-menu-header strong {
    font-size: .85rem;
}

.mw-user-menu-header span {
    color: #6b7280;
    font-size: .7rem;
}

/* Mobile button */

.mw-topnav-mobile-toggle {
    display: none;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 9px;

    background: rgba(255,255,255,.08);
    color: #fff;
}

/* ==========================================================
   NAVBAR RESPONSIVE
   ========================================================== */

@media (max-width: 1199px) {

    .mw-topnav-search {
        width: clamp(180px, 20vw, 260px);
    }

    .mw-topnav-links > a {
        padding-left: 7px;
        padding-right: 7px;
    }

    .mw-topnav-links > a i {
        display: none;
    }
}

@media (max-width: 991px) {

    .mw-topnav-inner {
        position: relative;
        flex-wrap: wrap;

        padding: 9px 14px;
    }

    .mw-topnav-mobile-toggle {
        display: grid;
        place-items: center;
        order: 1;
    }

    .mw-topnav-brand {
        order: 2;
    }

    .mw-topnav-tools {
        order: 3;
        margin-left: auto;
    }

    .mw-topnav-search {
        order: 4;

        width: 100%;
        flex: 1 0 100%;
    }

    .mw-topnav-collapse {
        order: 5;

        display: none;
        width: 100%;
        flex: 1 0 100%;
    }

    .mw-topnav-collapse.is-open {
        display: block;
    }

    .mw-topnav-links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        padding: 8px 0 3px;
    }

    .mw-topnav-links > a,
    .mw-topnav-more {
        justify-content: center;
    }

    .mw-topnav-links > a i {
        display: inline-block;
    }
}

@media (max-width: 575px) {

    .mw-topnav-brand span {
        font-size: .9rem;
    }

    .mw-topnav-user-text,
    .mw-notifications {
        display: none;
    }

    .mw-topnav-links {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   MEJENGAWEB - MOBILE NAVIGATION V2
   Header compacto + navegación completa
   ========================================================= */

@media (max-width: 768px) {

    /* Barra superior */
    .mw-map-topnav .mw-topnav-inner {
        min-height: 54px;
        padding: 6px 10px;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        grid-template-areas:
            "toggle brand"
            "menu menu"
            "tools tools";
        align-items: center;
        column-gap: 8px;
    }

    /* Hamburguesa primero */
    .mw-map-topnav .mw-topnav-mobile-toggle {
        grid-area: toggle;
        display: inline-flex !important;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border-radius: 8px;
        flex-shrink: 0;
    }

    /* Marca */
    .mw-map-topnav .mw-topnav-brand {
        grid-area: brand;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
    }

    .mw-map-topnav .mw-topnav-brand img {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }

    .mw-map-topnav .mw-topnav-brand span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }

    /* Navegación principal */
    .mw-map-topnav .mw-topnav-collapse {
        grid-area: menu;
        width: 100%;
        min-width: 0;
    }

    .mw-map-topnav .mw-topnav-collapse:not(.is-open) {
        display: none !important;
    }

    .mw-map-topnav .mw-topnav-collapse.is-open {
        display: block !important;
        padding-top: 8px;
    }

    .mw-map-topnav .mw-topnav-links {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
    }

    .mw-map-topnav .mw-topnav-links > a,
    .mw-map-topnav .mw-topnav-more {
        width: 100%;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 8px 11px;
        border-radius: 8px;
        text-align: left;
    }

    .mw-map-topnav .mw-topnav-links > a i {
        width: 20px;
        text-align: center;
    }

    /* "Más" ocupa toda la anchura */
    .mw-map-topnav .mw-topnav-links > .dropdown {
        width: 100%;
    }

    .mw-map-topnav .mw-topnav-more {
        justify-content: space-between;
    }

    /*
     * En móvil mostramos el submenu "Más" completo dentro del menú.
     * No requiere segundo toque.
     */
    .mw-map-topnav .mw-topnav-links > .dropdown > .dropdown-menu {
        position: static !important;
        display: block !important;
        width: 100%;
        min-width: 0;
        transform: none !important;
        inset: auto !important;
        margin: 3px 0 5px;
        padding: 4px;
        border: 0;
        border-radius: 8px;
        box-shadow: none;
    }

    .mw-map-topnav .mw-topnav-links .dropdown-item {
        min-height: 38px;
        display: flex;
        align-items: center;
        padding: 7px 12px;
        border-radius: 6px;
    }

    /*
     * Herramientas:
     * carrito + ingresar/cuenta dejan de ocupar la cabecera.
     * Se muestran debajo de la navegación cuando el menú está abierto.
     */
    .mw-map-topnav .mw-topnav-tools {
        grid-area: tools;
        width: 100%;
        display: none !important;
        align-items: stretch;
        gap: 5px;
        padding-top: 7px;
        margin-top: 4px;
        border-top: 1px solid rgba(255,255,255,.10);
    }

    /*
     * :has() vincula las herramientas al estado real del collapse.
     * Chrome/Android moderno lo soporta.
     */
    .mw-map-topnav .mw-topnav-inner:has(.mw-topnav-collapse.is-open)
    .mw-topnav-tools {
        display: flex !important;
        flex-direction: column;
    }

    /* Carrito */
    .mw-map-topnav #mwCartNavButton {
        width: 100%;
        min-height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 8px 11px;
        border-radius: 8px;
    }

    .mw-map-topnav #mwCartNavButton::after {
        content: "Mi carrito";
        font-size: 13px;
        font-weight: 600;
    }

    /* Ingresar */
    .mw-map-topnav .mw-topnav-login {
        width: 100%;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 8px 11px;
        border-radius: 8px;
    }

    /* Usuario autenticado */
    .mw-map-topnav .mw-topnav-user {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
    }

    .mw-map-topnav .mw-topnav-tools > .dropdown {
        width: 100%;
    }

    .mw-map-topnav .mw-topnav-tools > .dropdown > .dropdown-menu {
        position: static !important;
        width: 100%;
        transform: none !important;
        inset: auto !important;
        margin-top: 4px;
        box-shadow: none;
    }

    /* Notificaciones como opción del menú */
    .mw-map-topnav .mw-notifications {
        width: 100%;
        min-height: 40px;
        justify-content: flex-start;
        padding: 8px 11px;
    }

    .mw-map-topnav .mw-notifications::after {
        content: "Notificaciones";
        margin-left: 10px;
        font-size: 13px;
        font-weight: 600;
    }
}


/* Teléfonos muy estrechos */
@media (max-width: 390px) {

    .mw-map-topnav .mw-topnav-inner {
        padding-left: 8px;
        padding-right: 8px;
    }

    .mw-map-topnav .mw-topnav-brand span {
        font-size: 12px;
    }
}


/* =========================================================
   MEJENGAWEB - MOBILE NAVIGATION V3
   Fila superior : hamburguesa + marca
   Fila inferior : ingresar/cuenta | carrito
   ========================================================= */

@media (max-width: 768px) {

    /*
     * ESTRUCTURA
     *
     * ┌──────────────────────────────┐
     * │ ☰   MejengaWeb.com          │
     * ├──────────────────────────────┤
     * │ Ingresar      │ Mi Carrito  │
     * └──────────────────────────────┘
     *
     * El menú desplegable aparece debajo de ambas filas.
     */

    .mw-map-topnav .mw-topnav-inner {
        display: grid !important;

        grid-template-columns:
            38px
            minmax(0, 1fr);

        grid-template-areas:
            "toggle brand"
            "tools tools"
            "menu menu";

        align-items: center;

        column-gap: 8px;
        row-gap: 0;

        padding: 6px 9px 7px;
    }


    /* =====================================================
       FILA 1 - HAMBURGUESA + LOGO
       ===================================================== */

    .mw-map-topnav .mw-topnav-mobile-toggle {
        grid-area: toggle;

        display: inline-flex !important;

        width: 36px;
        height: 36px;

        align-items: center;
        justify-content: center;

        margin: 0;
    }


    .mw-map-topnav .mw-topnav-brand {
        grid-area: brand;

        display: flex;
        align-items: center;

        min-width: 0;
        margin: 0;
    }


    .mw-map-topnav .mw-topnav-brand img {
        width: 30px;
        height: 30px;

        flex: 0 0 30px;
    }


    .mw-map-topnav .mw-topnav-brand span {
        display: block;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 13px;
    }


    /* =====================================================
       FILA 2 - LOGIN / CARRITO
       ===================================================== */

    .mw-map-topnav .mw-topnav-tools {
        grid-area: tools;

        /*
         * IMPORTANTE:
         * V3 anula el comportamiento V2 que escondía tools
         * hasta abrir el hamburguesa.
         */
        display: grid !important;

        grid-template-columns: 1fr 1fr;

        width: 100%;

        gap: 6px;

        margin: 6px 0 0;
        padding: 6px 0 0;

        border-top:
            1px solid rgba(255,255,255,.10);
    }


    /*
     * Si V2 detecta el menú abierto mediante :has(),
     * tools DEBE seguir horizontal.
     */
    .mw-map-topnav
    .mw-topnav-inner:has(.mw-topnav-collapse.is-open)
    .mw-topnav-tools {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        flex-direction: initial !important;
    }


    /* =====================================================
       INGRESAR
       ===================================================== */

    .mw-map-topnav .mw-topnav-login {
        width: 100%;
        min-width: 0;
        min-height: 38px;

        display: flex !important;

        align-items: center;
        justify-content: center;

        gap: 7px;

        margin: 0;
        padding: 7px 8px;

        border-radius: 8px;

        text-align: center;
        white-space: nowrap;
    }


    .mw-map-topnav .mw-topnav-login i {
        margin: 0;
    }


    /* =====================================================
       CARRITO
       ===================================================== */

    .mw-map-topnav #mwCartNavButton {
        width: 100%;
        min-width: 0;
        min-height: 38px;

        display: flex !important;

        align-items: center;
        justify-content: center;

        gap: 7px;

        margin: 0;
        padding: 7px 8px;

        border-radius: 8px;

        white-space: nowrap;
    }


    .mw-map-topnav #mwCartNavButton::after {
        content: "Mi Carrito";

        font-size: 13px;
        font-weight: 600;

        margin: 0;
    }


    /*
     * Badge del carrito permanece al lado del texto.
     */
    .mw-map-topnav #mwCartNavButton
    [data-mw-cart-count] {
        position: static !important;

        transform: none !important;

        margin-left: 2px;
    }


    /* =====================================================
       MENU HAMBURGUESA
       ===================================================== */

    .mw-map-topnav .mw-topnav-collapse {
        grid-area: menu;

        width: 100%;
        min-width: 0;
    }


    .mw-map-topnav
    .mw-topnav-collapse:not(.is-open) {
        display: none !important;
    }


    .mw-map-topnav
    .mw-topnav-collapse.is-open {
        display: block !important;

        padding-top: 7px;
        margin-top: 6px;

        border-top:
            1px solid rgba(255,255,255,.10);
    }


    /*
     * Herramientas NO pertenecen al menú.
     * Permanecen siempre visibles.
     */
    .mw-map-topnav
    .mw-topnav-collapse.is-open
    ~ .mw-topnav-tools {
        display: grid !important;
    }


    /* =====================================================
       USUARIO LOGUEADO
       ===================================================== */

    /*
     * Cuando existe sesión:
     *
     * [ Cuenta / usuario ] [ Mi Carrito ]
     */

    .mw-map-topnav .mw-topnav-tools > .dropdown {
        width: 100%;
        min-width: 0;
    }


    .mw-map-topnav .mw-topnav-user {
        width: 100%;
        min-width: 0;
        min-height: 38px;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 5px 7px;

        margin: 0;
    }


    .mw-map-topnav .mw-topnav-user-text {
        min-width: 0;
    }


    .mw-map-topnav .mw-topnav-user-text strong,
    .mw-map-topnav .mw-topnav-user-text small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /*
     * Si existen notificaciones cuando hay sesión,
     * evitamos que rompan el layout de dos columnas.
     */
    .mw-map-topnav .mw-notifications {
        display: none !important;
    }

}


/* =========================================================
   TELEFONOS PEQUEÑOS - 360px
   ========================================================= */

@media (max-width: 390px) {

    .mw-map-topnav .mw-topnav-inner {
        padding-left: 7px;
        padding-right: 7px;
    }


    .mw-map-topnav .mw-topnav-tools {
        gap: 5px;
    }


    .mw-map-topnav .mw-topnav-login,
    .mw-map-topnav #mwCartNavButton {
        min-height: 36px;

        padding-left: 5px;
        padding-right: 5px;

        font-size: 12px;
    }


    .mw-map-topnav #mwCartNavButton::after {
        font-size: 12px;
    }

}


/* =========================================================
   MEJENGAWEB - MOBILE NAVIGATION V4
   Menú compacto 2 columnas
   Login + carrito como botones equivalentes
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       MENU PRINCIPAL - DOS COLUMNAS
       ===================================================== */

    .mw-map-topnav .mw-topnav-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;

        width: 100%;
    }


    /* Cada opción se convierte en botón */
    .mw-map-topnav .mw-topnav-links > a {
        width: 100%;
        min-width: 0;
        min-height: 38px;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        gap: 7px;

        margin: 0;
        padding: 7px 9px;

        border: 1px solid rgba(255,255,255,.08);
        border-radius: 7px;

        background: rgba(255,255,255,.035);

        font-size: 12px;
        font-weight: 600;

        white-space: nowrap;
    }


    .mw-map-topnav .mw-topnav-links > a i {
        width: 17px;

        flex: 0 0 17px;

        text-align: center;

        font-size: 12px;
    }


    .mw-map-topnav .mw-topnav-links > a:hover,
    .mw-map-topnav .mw-topnav-links > a:focus {
        background: rgba(255,255,255,.09);
    }


    .mw-map-topnav .mw-topnav-links > a.is-active {
        background: rgba(13,110,253,.18);
        border-color: rgba(13,110,253,.35);
    }


    /* =====================================================
       SECCION "MAS"
       Ocupa las dos columnas
       ===================================================== */

    .mw-map-topnav .mw-topnav-links > .dropdown {
        grid-column: 1 / -1;

        width: 100%;

        margin-top: 2px;
    }


    .mw-map-topnav .mw-topnav-more {
        width: 100%;
        min-height: 30px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 4px 8px;

        border: 0;
        border-radius: 6px;

        background: transparent;

        font-size: 11px;
        font-weight: 700;
    }


    /* =====================================================
       SUBMENU "MAS" - DOS COLUMNAS
       ===================================================== */

    .mw-map-topnav
    .mw-topnav-links
    > .dropdown
    > .dropdown-menu {

        position: static !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 4px;

        width: 100%;
        min-width: 0;

        transform: none !important;
        inset: auto !important;

        margin: 2px 0 0;
        padding: 5px;

        border: 0;
        border-radius: 8px;

        box-shadow: none;
    }


    /*
     * IMPORTANTE:
     * Los <li> participan directamente en el grid.
     */
    .mw-map-topnav
    .mw-topnav-links
    > .dropdown
    > .dropdown-menu
    > li {

        min-width: 0;
        margin: 0;
    }


    .mw-map-topnav
    .mw-topnav-links
    .dropdown-item {

        width: 100%;
        min-width: 0;
        min-height: 34px;

        display: flex;
        align-items: center;

        gap: 5px;

        padding: 6px 8px;

        border-radius: 6px;

        font-size: 11px;
        line-height: 1.15;

        white-space: nowrap;
    }


    .mw-map-topnav
    .mw-topnav-links
    .dropdown-item i {

        width: 16px;

        flex: 0 0 16px;

        margin-right: 0 !important;

        text-align: center;

        font-size: 11px;
    }


    /* =====================================================
       DIVISORES DEL SUBMENU
       Deben atravesar las dos columnas
       ===================================================== */

    .mw-map-topnav
    .mw-topnav-links
    > .dropdown
    > .dropdown-menu
    > li:has(.dropdown-divider) {

        grid-column: 1 / -1;
    }


    .mw-map-topnav .dropdown-divider {
        margin: 2px 0;
    }


    /* =====================================================
       LOGIN + CARRITO
       DOS BOTONES SIMETRICOS
       ===================================================== */

    .mw-map-topnav .mw-topnav-tools {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;

        width: 100%;
    }


    /*
     * El HTML tiene:
     *
     * carrito
     * ingresar
     *
     * Pero visualmente queremos:
     *
     * INGRESAR | MI CARRITO
     */

    .mw-map-topnav .mw-topnav-login {
        order: 1;

        width: 100%;
        min-width: 0;
        min-height: 38px;

        display: flex !important;

        align-items: center;
        justify-content: center;

        gap: 7px;

        margin: 0;
        padding: 7px 10px;

        border: 1px solid rgba(13,110,253,.55);
        border-radius: 8px;

        background: #0d6efd;

        color: #ffffff !important;

        font-size: 12px;
        font-weight: 700;

        text-decoration: none !important;

        box-shadow:
            0 2px 6px rgba(0,0,0,.18);

        transition:
            background .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }


    .mw-map-topnav .mw-topnav-login:hover,
    .mw-map-topnav .mw-topnav-login:focus {

        background: #0b5ed7;

        color: #ffffff !important;

        transform: translateY(-1px);

        box-shadow:
            0 4px 9px rgba(0,0,0,.22);
    }


    .mw-map-topnav .mw-topnav-login i {
        font-size: 12px;
    }


    /* CARRITO */

    .mw-map-topnav #mwCartNavButton {
        order: 2;

        width: 100%;
        min-width: 0;
        min-height: 38px;

        display: flex !important;

        align-items: center;
        justify-content: center;

        gap: 7px;

        margin: 0;
        padding: 7px 10px;

        border: 1px solid rgba(255,255,255,.12);
        border-radius: 8px;

        background: rgba(255,255,255,.09);

        color: #ffffff;

        font-size: 12px;
        font-weight: 700;

        box-shadow:
            0 2px 6px rgba(0,0,0,.12);
    }


    .mw-map-topnav #mwCartNavButton:hover,
    .mw-map-topnav #mwCartNavButton:focus {

        background: rgba(255,255,255,.15);

        transform: translateY(-1px);
    }


    .mw-map-topnav #mwCartNavButton::after {
        content: "Mi Carrito";

        margin: 0;

        font-size: 12px;
        font-weight: 700;
    }


    /* =====================================================
       MENU ABIERTO MÁS COMPACTO
       ===================================================== */

    .mw-map-topnav
    .mw-topnav-collapse.is-open {

        padding-top: 6px;
        margin-top: 5px;
    }

}


/* =========================================================
   GALAXY A55 / 360px Y TELEFONOS PEQUEÑOS
   ========================================================= */

@media (max-width: 390px) {

    .mw-map-topnav .mw-topnav-links {
        gap: 4px;
    }


    .mw-map-topnav .mw-topnav-links > a {
        min-height: 35px;

        padding: 5px 7px;

        font-size: 10.5px;
    }


    .mw-map-topnav
    .mw-topnav-links
    .dropdown-item {

        min-height: 31px;

        padding: 5px 6px;

        font-size: 10.5px;
    }


    .mw-map-topnav .mw-topnav-more {
        min-height: 27px;

        font-size: 10.5px;
    }


    .mw-map-topnav .mw-topnav-login,
    .mw-map-topnav #mwCartNavButton {

        min-height: 36px;

        font-size: 11px;
    }


    .mw-map-topnav #mwCartNavButton::after {
        font-size: 11px;
    }

}


/* =========================================================
   360px - Galaxy A55
   ========================================================= */

@media (max-width: 390px) {

    .mw-map-topnav .mw-user-menu-header {
        padding-left: 8px !important;
        padding-right: 8px !important;

        gap: 5px;
    }


    .mw-map-topnav .mw-user-menu-header strong {
        font-size: 10px;
    }


    .mw-map-topnav .mw-user-menu-header span {
        font-size: 8px;
    }


    .mw-map-topnav
    .mw-user-menu
    .dropdown-item {

        min-height: 36px;

        padding-left: 4px !important;
        padding-right: 4px !important;

        font-size: 9.5px;
    }

}


/* =========================================================
   GALAXY A55 / 360px
   ========================================================= */

@media (max-width: 390px) {

    .mw-map-topnav .mw-user-menu {

        left: 6px !important;
        right: 6px !important;
    }


    .mw-map-topnav .mw-user-menu-name {

        padding-left: 9px;
        padding-right: 7px;

        font-size: 10px;
    }


    .mw-map-topnav .mw-user-menu-account {

        padding-left: 7px;
        padding-right: 9px;

        font-size: 8.5px;
    }


    .mw-map-topnav .mw-user-menu-action {

        min-height: 38px;

        padding: 6px;

        font-size: 9.5px;
    }

}


/* =========================================================
   MEJENGAWEB - USER MENU MOBILE FINAL
   ========================================================= */

@media (max-width: 768px) {

    /*
     * El dropdown del usuario está dentro de .mw-topnav-tools.
     * Le damos todo el ancho disponible.
     */
    .mw-map-topnav .mw-topnav-tools > .dropdown {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
    }


    /*
     * MENU COMPLETO
     *
     * Debe medir exactamente el ancho interior
     * del navbar móvil.
     */
    .mw-map-topnav .mw-user-menu {
        position: absolute !important;

        left: 6px !important;
        right: 6px !important;
        top: 100% !important;

        width: calc(100% - 12px) !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 4px 0 0 !important;
        padding: 0 !important;

        transform: none !important;

        display: block !important;

        background: #fff !important;

        border: 1px solid rgba(0,0,0,.12) !important;
        border-radius: 8px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        box-shadow: 0 5px 15px rgba(0,0,0,.20) !important;
    }


    /*
     * Bootstrap controla mostrar/ocultar con .show.
     */
    .mw-map-topnav .mw-user-menu:not(.show) {
        display: none !important;
    }

    .mw-map-topnav .mw-user-menu.show {
        display: block !important;
    }


    /* =====================================================
       ROW 1

       Carlos Barboza       Cuenta MejengaWeb.com
       ===================================================== */

    .mw-map-topnav .mw-user-menu-info {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        align-items: center;

        min-height: 38px;

        border-bottom: 1px solid #dee2e6;

        box-sizing: border-box;
    }


    .mw-map-topnav .mw-user-menu-name,
    .mw-map-topnav .mw-user-menu-account {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center;

        padding: 7px 10px !important;

        box-sizing: border-box;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .mw-map-topnav .mw-user-menu-name {
        justify-content: flex-start;

        color: #212529;

        font-size: 10px;
        font-weight: 700;
    }


    .mw-map-topnav .mw-user-menu-account {
        justify-content: flex-end;

        color: #7a828b;

        font-size: 9px;
        font-weight: 500;

        border-left: 1px solid #eeeeee;
    }


    /* =====================================================
       ROW 2

       Mi Dashboard        Cerrar sesión
       ===================================================== */

    .mw-map-topnav .mw-user-menu-actions {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        align-items: stretch;

        box-sizing: border-box;
    }


    .mw-map-topnav .mw-user-menu-action {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;

        display: flex !important;

        align-items: center;
        justify-content: center;

        gap: 6px;

        padding: 7px 8px !important;
        margin: 0 !important;

        box-sizing: border-box;

        border: 0 !important;
        border-radius: 0 !important;

        background: #fff;

        text-decoration: none !important;

        font-size: 10px;
        font-weight: 600;

        white-space: nowrap;
    }


    .mw-map-topnav .mw-user-menu-action i {
        margin: 0 !important;
        flex: 0 0 auto;
    }


    /* BOTÓN DASHBOARD */

    .mw-map-topnav .mw-user-dashboard {
        color: #343a40 !important;
    }

    .mw-map-topnav .mw-user-dashboard:hover {
        background: #f1f5f9 !important;
        color: #0d6efd !important;
    }


    /* BOTÓN CERRAR SESIÓN */

    .mw-map-topnav .mw-user-logout {
        color: #dc3545 !important;

        border-left: 1px solid #dee2e6 !important;
    }

    .mw-map-topnav .mw-user-logout:hover {
        background: #fff1f2 !important;
        color: #bb2d3b !important;
    }

}


/* =========================================================
   MEJENGAWEB - USER MENU DESKTOP FINAL
   Solo escritorio. NO modifica responsive <= 768px.
   ========================================================= */

@media (min-width: 769px) {

    /* -----------------------------------------------------
       CONTENEDOR
       ----------------------------------------------------- */

    .mw-map-topnav .mw-user-menu {
        width: 300px !important;
        min-width: 300px !important;

        padding: 0 !important;
        margin-top: 7px !important;

        overflow: hidden !important;

        background: #ffffff !important;

        border: 1px solid rgba(15, 23, 42, .12) !important;
        border-radius: 10px !important;

        box-shadow:
            0 10px 28px rgba(15, 23, 42, .18) !important;
    }


    /* =====================================================
       ROW 1
       Carlos Barboza | Cuenta MejengaWeb.com
       ===================================================== */

    .mw-map-topnav .mw-user-menu-info {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        width: 100% !important;
        min-height: 43px;

        align-items: stretch;

        border-bottom: 1px solid #e5e7eb;

        box-sizing: border-box;
    }


    .mw-map-topnav .mw-user-menu-name,
    .mw-map-topnav .mw-user-menu-account {
        display: flex !important;
        align-items: center;

        width: 100% !important;
        min-width: 0;

        padding: 9px 12px !important;

        box-sizing: border-box;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    /* Nombre */

    .mw-map-topnav .mw-user-menu-name {
        justify-content: flex-start;

        color: #1f2937 !important;

        font-size: 12px !important;
        font-weight: 700 !important;
    }


    /* Cuenta */

    .mw-map-topnav .mw-user-menu-account {
        justify-content: flex-end;

        border-left: 1px solid #eef0f2;

        color: #7b8491 !important;

        font-size: 10px !important;
        font-weight: 500 !important;
    }


    /* =====================================================
       ROW 2
       Mi Dashboard | Cerrar sesión
       ===================================================== */

    .mw-map-topnav .mw-user-menu-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        width: 100% !important;

        align-items: stretch;

        box-sizing: border-box;
    }


    .mw-map-topnav .mw-user-menu-action {
        display: flex !important;

        align-items: center;
        justify-content: center;

        gap: 7px;

        width: 100% !important;
        min-width: 0;
        min-height: 42px;

        padding: 8px 10px !important;
        margin: 0 !important;

        box-sizing: border-box;

        border: 0 !important;
        border-radius: 0 !important;

        background: #ffffff !important;

        text-decoration: none !important;

        font-size: 11px !important;
        font-weight: 600 !important;

        line-height: 1.2 !important;

        white-space: nowrap;

        transition:
            background-color .15s ease,
            color .15s ease;
    }


    .mw-map-topnav .mw-user-menu-action i {
        flex: 0 0 auto;

        margin: 0 !important;

        font-size: 11px !important;
    }


    /* -----------------------------------------------------
       DASHBOARD
       ----------------------------------------------------- */

    .mw-map-topnav .mw-user-dashboard {
        color: #334155 !important;
    }

    .mw-map-topnav .mw-user-dashboard:hover {
        color: #0d6efd !important;
        background: #f8fafc !important;
    }


    /* -----------------------------------------------------
       CERRAR SESIÓN
       ----------------------------------------------------- */

    .mw-map-topnav .mw-user-logout {
        color: #dc3545 !important;

        border-left: 1px solid #e5e7eb !important;
    }

    .mw-map-topnav .mw-user-logout:hover {
        color: #b42332 !important;
        background: #fff5f5 !important;
    }

}


/* =========================================================
   MEJENGAWEB - MOBILE USER FULL WIDTH GRID V4

   ROW 1: CB              | Mi Carrito
   ROW 2: Carlos Barboza  | Cuenta MejengaWeb.com
   ROW 3: Mi Dashboard    | Cerrar sesión
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       TOOLS
       Debe utilizar TODO el ancho disponible.
       ----------------------------------------------------- */

    .mw-map-topnav .mw-topnav-tools {
        width: 100% !important;
        min-width: 0 !important;
    }


    /*
     * Cuando las tools están visibles, la primera fila
     * debe ser exactamente 50 / 50.
     */
    .mw-map-topnav
    .mw-topnav-inner:has(.mw-topnav-collapse.is-open)
    .mw-topnav-tools {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        align-items: stretch !important;

        gap: 5px !important;

        width: 100% !important;
    }


    /* -----------------------------------------------------
       COLUMNA IZQUIERDA:
       usuario CB
       ----------------------------------------------------- */

    .mw-map-topnav
    .mw-topnav-tools > .dropdown {

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }


    .mw-map-topnav .mw-topnav-user {

        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;

        display: flex !important;

        align-items: center;
        justify-content: center !important;

        margin: 0 !important;
    }


    /* En móvil solo queremos el avatar CB en esta fila */

    .mw-map-topnav .mw-topnav-user-text {
        display: none !important;
    }


    /* -----------------------------------------------------
       COLUMNA DERECHA:
       Mi Carrito
       ----------------------------------------------------- */

    .mw-map-topnav #mwCartNavButton {

        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;

        display: flex !important;

        align-items: center;
        justify-content: center !important;

        margin: 0 !important;
    }


    /* =====================================================
       DROPDOWN ABIERTO

       IMPORTANTE:
       ocupa las DOS columnas del grid.
       ===================================================== */

    .mw-map-topnav
    .mw-topnav-tools > .dropdown
    > .mw-user-menu {

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 5px 0 0 !important;
        padding: 0 !important;

        transform: none !important;
        inset: auto !important;

        border: 0 !important;
        border-radius: 7px !important;

        box-shadow: none !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
     * CLAVE:
     * el dropdown pertenece al primer elemento del grid,
     * pero necesitamos que visualmente ocupe las dos columnas.
     *
     * Cuando está abierto hacemos que el wrapper del usuario
     * abarque todo el grid y creamos internamente la fila
     * superior 50/50.
     */

    .mw-map-topnav
    .mw-topnav-tools > .dropdown:has(.mw-user-menu.show) {

        grid-column: 1 / -1 !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 5px !important;

        width: 100% !important;
    }


    /*
     * CB continúa en columna izquierda.
     */

    .mw-map-topnav
    .mw-topnav-tools > .dropdown:has(.mw-user-menu.show)
    > .mw-topnav-user {

        grid-column: 1 !important;
        grid-row: 1 !important;
    }


    /*
     * El dropdown ocupa las dos columnas debajo.
     */

    .mw-map-topnav
    .mw-topnav-tools > .dropdown:has(.mw-user-menu.show)
    > .mw-user-menu {

        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
    }


    /*
     * Como el wrapper del usuario pasa a ocupar ambas
     * columnas, movemos Mi Carrito a la derecha de CB.
     */

    .mw-map-topnav
    .mw-topnav-tools:has(.mw-user-menu.show)
    > #mwCartNavButton {

        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;

        z-index: 2;
    }


    /* =====================================================
       ROW 2
       Nombre | Cuenta
       ===================================================== */

    .mw-map-topnav .mw-user-menu-info {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;

        min-height: 36px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        border-bottom:
            1px solid #e5e7eb !important;
    }


    .mw-map-topnav .mw-user-menu-name,
    .mw-map-topnav .mw-user-menu-account {

        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 7px 8px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;

        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }


    .mw-map-topnav .mw-user-menu-name {

        color: #26313d !important;

        font-size: 10px !important;
        font-weight: 700 !important;
    }


    .mw-map-topnav .mw-user-menu-account {

        color: #7b8490 !important;

        font-size: 9px !important;
        font-weight: 500 !important;

        border-left:
            1px solid #e5e7eb !important;
    }


    /* =====================================================
       ROW 3
       Dashboard | Cerrar sesión
       ===================================================== */

    .mw-map-topnav .mw-user-menu-actions {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    .mw-map-topnav .mw-user-menu-action {

        width: 100% !important;
        min-width: 0 !important;

        min-height: 36px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        padding: 7px 6px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        border-radius: 0 !important;

        text-decoration: none !important;

        font-size: 10px !important;
        font-weight: 600 !important;

        white-space: nowrap !important;
    }


    .mw-map-topnav .mw-user-dashboard {

        color: #334155 !important;

        background: #ffffff !important;
    }


    .mw-map-topnav .mw-user-logout {

        color: #dc3545 !important;

        background: #ffffff !important;

        border-left:
            1px solid #e5e7eb !important;
    }

}


/* =========================================================
   GALAXY A55 / 360px
   ========================================================= */

@media (max-width: 390px) {

    .mw-map-topnav .mw-user-menu-name {
        font-size: 9.5px !important;
    }

    .mw-map-topnav .mw-user-menu-account {
        font-size: 8.5px !important;
    }

    .mw-map-topnav .mw-user-menu-action {
        font-size: 9.5px !important;
    }

}


/* =========================================================
   MEJENGAWEB - MOBILE USER GRID V5 FINAL

   CERRADO:
   CB | Mi Carrito

   ABIERTO:
   CB             | Mi Carrito
   Nombre         | Cuenta
   Mi Dashboard   | Cerrar sesión
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       CONTENEDOR PRINCIPAL DE LAS DOS COLUMNAS
       ===================================================== */

    .mw-map-topnav .mw-topnav-tools,
    .mw-map-topnav
    .mw-topnav-inner:has(.mw-topnav-collapse.is-open)
    .mw-topnav-tools {

        position: relative !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-template-rows: auto !important;

        gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;

        align-items: stretch !important;
    }


    /* =====================================================
       COLUMNA 1 - USUARIO

       MUY IMPORTANTE:
       nunca debe ocupar las dos columnas.
       ===================================================== */

    .mw-map-topnav
    .mw-topnav-tools > .dropdown,

    .mw-map-topnav
    .mw-topnav-tools > .dropdown:has(.mw-user-menu.show) {

        position: static !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* CB */

    .mw-map-topnav
    .mw-topnav-tools > .dropdown
    > .mw-topnav-user,

    .mw-map-topnav
    .mw-topnav-tools > .dropdown:has(.mw-user-menu.show)
    > .mw-topnav-user {

        position: relative !important;

        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
    }


    /* =====================================================
       COLUMNA 2 - MI CARRITO

       Siempre permanece al lado de CB.
       ===================================================== */

    .mw-map-topnav #mwCartNavButton,

    .mw-map-topnav
    .mw-topnav-tools:has(.mw-user-menu.show)
    > #mwCartNavButton {

        position: relative !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;

        margin: 0 !important;

        z-index: 2 !important;
    }


    /* =====================================================
       MENU ABIERTO

       El dropdown está dentro de la columna izquierda,
       pero visualmente debe extenderse al ancho TOTAL
       de .mw-topnav-tools.

       200% + gap compensa las dos columnas.
       ===================================================== */

    .mw-map-topnav
    .mw-topnav-tools
    > .dropdown
    > .mw-user-menu {

        position: absolute !important;

        top: calc(100% + 5px) !important;
        left: 0 !important;
        right: auto !important;

        width: calc(200% + 5px) !important;

        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        z-index: 1100 !important;

        box-sizing: border-box !important;

        border: 0 !important;
        border-radius: 7px !important;

        overflow: hidden !important;

        box-shadow:
            0 4px 12px rgba(0,0,0,.18) !important;

        background: #ffffff !important;
    }


    .mw-map-topnav
    .mw-topnav-tools
    > .dropdown
    > .mw-user-menu:not(.show) {

        display: none !important;
    }


    .mw-map-topnav
    .mw-topnav-tools
    > .dropdown
    > .mw-user-menu.show {

        display: block !important;
    }


    /* =====================================================
       ROW 2
       NOMBRE | CUENTA
       ===================================================== */

    .mw-map-topnav .mw-user-menu-info {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;

        min-height: 37px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom:
            1px solid #e5e7eb !important;

        box-sizing: border-box !important;
    }


    .mw-map-topnav .mw-user-menu-name,
    .mw-map-topnav .mw-user-menu-account {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;

        padding: 7px 8px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }


    .mw-map-topnav .mw-user-menu-name {

        color: #26313d !important;

        font-size: 10px !important;
        font-weight: 700 !important;
    }


    .mw-map-topnav .mw-user-menu-account {

        border-left:
            1px solid #e5e7eb !important;

        color: #7b8490 !important;

        font-size: 9px !important;
        font-weight: 500 !important;
    }


    /* =====================================================
       ROW 3
       DASHBOARD | CERRAR SESION
       ===================================================== */

    .mw-map-topnav .mw-user-menu-actions {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    .mw-map-topnav .mw-user-menu-action {

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 37px !important;

        padding: 7px 6px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        border-radius: 0 !important;

        font-size: 10px !important;
        font-weight: 600 !important;

        white-space: nowrap !important;

        text-decoration: none !important;
    }


    .mw-map-topnav .mw-user-dashboard {

        background: #ffffff !important;

        color: #334155 !important;
    }


    .mw-map-topnav .mw-user-logout {

        background: #ffffff !important;

        color: #dc3545 !important;

        border-left:
            1px solid #e5e7eb !important;
    }

}


/* =========================================================
   MEJENGAWEB - LOGIN NAVBAR DESKTOP FINAL
   Solo desktop. No modifica la versión responsive.
   ========================================================= */

@media (min-width: 769px) {

    .mw-map-topnav .mw-topnav-login {

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        min-height: 38px !important;

        padding: 0 13px !important;

        margin: 0 !important;

        border: 1px solid rgba(255, 255, 255, .12) !important;
        border-radius: 10px !important;

        background: rgba(255, 255, 255, .07) !important;

        color: #f8fafc !important;

        font-size: .82rem !important;
        font-weight: 600 !important;

        line-height: 1 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        transition:
            background .18s ease,
            border-color .18s ease,
            transform .18s ease !important;
    }

    .mw-map-topnav .mw-topnav-login:hover {

        background: rgba(255, 255, 255, .13) !important;

        border-color: rgba(255, 255, 255, .22) !important;

        color: #ffffff !important;

        text-decoration: none !important;
    }

    .mw-map-topnav .mw-topnav-login i {

        color: #38bdf8 !important;

        font-size: .95rem !important;
    }

}


/* =========================================================
   MEJENGAWEB - MENU PRINCIPAL COMPACTO
   ========================================================= */

.mw-main-nav {
    position: relative;
}

.mw-main-nav-button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

.mw-main-nav-dropdown {
    min-width: 255px;
    padding: .55rem;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .20);
}

.mw-main-nav-dropdown .dropdown-header {
    padding: .45rem .65rem;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
}

.mw-main-nav-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: 7px;
}

.mw-main-nav-dropdown .dropdown-item i {
    width: 18px;
    text-align: center;
    color: #6c757d;
}

.mw-main-nav-dropdown .dropdown-item:hover i {
    color: inherit;
}

@media (max-width: 768px) {

    .mw-main-nav-dropdown {
        min-width: min(280px, 90vw);
        max-height: 72vh;
        overflow-y: auto;
    }
}


/* ==========================================================
   MEJENGAWEB - MENU RESPONSIVE UNIFICADO
   En móvil el hamburger principal ES el menú.
   No mostrar un segundo botón "Menú".
   ========================================================== */

@media (max-width: 991px) {

    /*
     * El botón hamburger superior ya controla mwNavCollapse.
     * Por tanto ocultamos el segundo botón "Menú".
     */
    .mw-map-topnav .mw-main-nav-button {
        display: none !important;
    }

    /*
     * El contenedor interno deja de comportarse
     * como dropdown Bootstrap.
     */
    .mw-map-topnav .mw-main-nav {
        position: static !important;
        width: 100% !important;
    }

    /*
     * Mostrar directamente las opciones cuando
     * mwNavCollapse está abierto.
     */
    .mw-map-topnav .mw-main-nav-dropdown {
        position: static !important;
        inset: auto !important;
        transform: none !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 8px 0 4px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;

        overflow: visible !important;
    }

    /*
     * Lista integrada visualmente en el navbar oscuro.
     */
    .mw-map-topnav
    .mw-main-nav-dropdown
    .dropdown-item {

        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        gap: 10px !important;

        padding: 10px 12px !important;

        border-radius: 8px !important;

        background: transparent !important;
        color: #dbe4f0 !important;

        font-size: .82rem !important;
        font-weight: 500 !important;
    }

    .mw-map-topnav
    .mw-main-nav-dropdown
    .dropdown-item:hover,

    .mw-map-topnav
    .mw-main-nav-dropdown
    .dropdown-item:focus {

        background: rgba(255,255,255,.08) !important;
        color: #fff !important;
    }

    .mw-map-topnav
    .mw-main-nav-dropdown
    .dropdown-item i {

        width: 20px !important;

        text-align: center !important;

        color: #94a3b8 !important;
    }

    .mw-map-topnav
    .mw-main-nav-dropdown
    .dropdown-item:hover i {

        color: #fff !important;
    }

    /*
     * Encabezados de secciones.
     */
    .mw-map-topnav
    .mw-main-nav-dropdown
    .dropdown-header {

        padding: 12px 12px 5px !important;

        color: #7dd3fc !important;

        font-size: .66rem !important;
        font-weight: 800 !important;

        letter-spacing: .07em !important;
        text-transform: uppercase !important;
    }

    /*
     * Separadores discretos sobre fondo oscuro.
     */
    .mw-map-topnav
    .mw-main-nav-dropdown
    .dropdown-divider {

        margin: 7px 10px !important;

        border-color:
            rgba(255,255,255,.12) !important;
    }

    /*
     * El collapse completo se comporta como
     * un único menú.
     */
    .mw-map-topnav
    .mw-topnav-collapse.is-open {

        padding-top: 5px !important;
        padding-bottom: 8px !important;
    }

    .mw-map-topnav
    .mw-topnav-links {

        display: block !important;

        width: 100% !important;

        padding: 0 !important;
    }
}


/* Teléfonos pequeños */
@media (max-width: 575px) {

    .mw-map-topnav
    .mw-main-nav-dropdown
    .dropdown-item {

        padding:
            11px 10px !important;

        font-size:
            .84rem !important;
    }
}


/* ==========================================================
   SUBMENU DE USUARIO - ESTILO MEJORADO
   ========================================================== */

.mw-user-menu {
    min-width: 290px !important;
    width: 290px !important;
    padding: 0 !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 18px 45px rgba(2, 6, 23, .22) !important;
}

.mw-user-menu-info {
    padding: 16px 18px 14px !important;
    background: linear-gradient(135deg, #0f172a, #111827) !important;
    color: #ffffff !important;
}

.mw-user-menu-name {
    font-size: .96rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
}

.mw-user-menu-account {
    margin-top: 4px !important;
    font-size: .72rem !important;
    color: #94a3b8 !important;
    letter-spacing: .02em !important;
}

.mw-user-menu-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
    background: #f8fafc !important;
}

.mw-user-menu-action {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    transition: all .18s ease !important;
    border: 1px solid transparent !important;
}

.mw-user-menu-action i {
    font-size: .85rem !important;
}

.mw-user-dashboard {
    background: #e0f2fe !important;
    color: #075985 !important;
    border-color: #bae6fd !important;
}

.mw-user-dashboard:hover,
.mw-user-dashboard:focus {
    background: #bae6fd !important;
    color: #0c4a6e !important;
}

.mw-user-logout {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.mw-user-logout:hover,
.mw-user-logout:focus {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

.mw-topnav-user[aria-expanded="true"] {
    background: rgba(255,255,255,.08) !important;
    border-radius: 12px !important;
}

/* Un poco de separación respecto al botón */
.dropdown-menu-end.mw-user-menu.show {
    margin-top: 10px !important;
}

/* Móvil */
@media (max-width: 575px) {
    .mw-user-menu {
        min-width: min(92vw, 320px) !important;
        width: min(92vw, 320px) !important;
    }

    .mw-user-menu-actions {
        grid-template-columns: 1fr !important;
    }

    .mw-user-menu-action {
        min-height: 44px !important;
    }
}


/* ==========================================================
   MEJENGAWEB - MENU DE CUENTA
   Mismo lenguaje visual del menú principal,
   con identidad azul/turquesa.
   ========================================================== */

.mw-user-menu {
    width: 290px !important;
    min-width: 290px !important;

    padding: 8px !important;

    border: 1px solid rgba(56,189,248,.22) !important;
    border-radius: 14px !important;

    background: #0f172a !important;

    box-shadow:
        0 18px 45px rgba(2,6,23,.32) !important;

    overflow: hidden !important;
}


/* ==========================================================
   CABECERA DE LA CUENTA
   ========================================================== */

.mw-user-menu-info {
    display: block !important;

    padding: 14px 14px 13px !important;
    margin-bottom: 6px !important;

    border: 0 !important;
    border-radius: 10px !important;

    background:
        linear-gradient(
            135deg,
            #0e7490 0%,
            #0891b2 55%,
            #0284c7 100%
        ) !important;
}


.mw-user-menu-name {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: .92rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}


.mw-user-menu-account {
    margin-top: 4px !important;

    color: #cffafe !important;

    font-size: .70rem !important;
    font-weight: 500 !important;
}


/* ==========================================================
   ACCIONES
   ========================================================== */

.mw-user-menu-actions {
    display: flex !important;
    flex-direction: column !important;

    gap: 4px !important;

    padding: 0 !important;

    background: transparent !important;
}


.mw-user-menu-action {
    width: 100% !important;
    min-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    padding: 0 12px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;

    color: #dbeafe !important;

    text-decoration: none !important;

    font-size: .80rem !important;
    font-weight: 600 !important;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease !important;
}


.mw-user-menu-action i {
    width: 20px !important;

    text-align: center !important;

    color: #67e8f9 !important;

    font-size: .84rem !important;
}


/* Dashboard */

.mw-user-dashboard {
    background: transparent !important;
    color: #e0f2fe !important;
}


.mw-user-dashboard:hover,
.mw-user-dashboard:focus {
    background: rgba(14,165,233,.16) !important;
    color: #ffffff !important;
}


/* Cerrar sesión */

.mw-user-logout {
    margin-top: 3px !important;

    background: transparent !important;
    color: #fecaca !important;
}


.mw-user-logout i {
    color: #fb7185 !important;
}


.mw-user-logout:hover,
.mw-user-logout:focus {
    background: rgba(244,63,94,.14) !important;
    color: #ffffff !important;
}


/* ==========================================================
   BOTON DE USUARIO ABIERTO
   ========================================================== */

.mw-topnav-user[aria-expanded="true"] {
    background: rgba(14,165,233,.14) !important;
}


/* Separación del dropdown */

.dropdown-menu-end.mw-user-menu.show {
    margin-top: 8px !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 575px) {

    .mw-user-menu {
        width:
            min(
                330px,
                calc(100vw - 28px)
            ) !important;

        min-width: 0 !important;

        padding: 7px !important;
    }


    .mw-user-menu-info {
        padding:
            13px 13px 12px !important;
    }


    .mw-user-menu-action {
        min-height: 46px !important;

        padding:
            0 12px !important;

        font-size:
            .82rem !important;
    }
}


/* ==========================================================
   MENU USUARIO - NEGRO / BLANCO
   Coherente con navbar principal
   ========================================================== */

.mw-user-menu {
    width: 235px !important;
    min-width: 235px !important;

    padding: 6px !important;

    background: #101827 !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;

    box-shadow: 0 10px 28px rgba(0,0,0,.30) !important;

    overflow: hidden !important;
}


/* Datos del usuario */

.mw-user-menu-info {
    display: block !important;

    margin: 0 !important;
    padding: 10px 11px !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 0 !important;
}


.mw-user-menu-name {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}


.mw-user-menu-account {
    margin-top: 2px !important;

    color: #cbd5e1 !important;

    font-size: .66rem !important;
    font-weight: 400 !important;
}


/* Acciones */

.mw-user-menu-actions {
    display: flex !important;
    flex-direction: column !important;

    gap: 2px !important;

    margin: 0 !important;
    padding: 6px 0 0 !important;

    background: transparent !important;
}


.mw-user-menu-action,
.mw-user-dashboard,
.mw-user-logout {
    width: 100% !important;
    min-height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 9px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 7px !important;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: .76rem !important;
    font-weight: 600 !important;
}


.mw-user-menu-action i,
.mw-user-dashboard i,
.mw-user-logout i {
    width: 18px !important;

    color: #ffffff !important;

    text-align: center !important;
}


/* Hover uniforme */

.mw-user-menu-action:hover,
.mw-user-menu-action:focus,
.mw-user-dashboard:hover,
.mw-user-dashboard:focus,
.mw-user-logout:hover,
.mw-user-logout:focus {
    background: rgba(255,255,255,.10) !important;
    color: #ffffff !important;
}


/* Botón del usuario cuando está abierto */

.mw-topnav-user[aria-expanded="true"] {
    background: rgba(255,255,255,.08) !important;
}


/* Pegarlo más al navbar para que ocupe menos espacio */

.dropdown-menu-end.mw-user-menu.show {
    margin-top: 5px !important;
}


/* Móvil */

@media (max-width: 575px) {

    .mw-user-menu {
        width: 225px !important;
        min-width: 225px !important;
    }

    .mw-user-menu-action,
    .mw-user-dashboard,
    .mw-user-logout {
        min-height: 40px !important;
    }
}


/* ==========================================================
   MW USER MENU - OVERRIDE FINAL AUTORITATIVO
   Fondo oscuro + texto blanco + layout vertical.
   ========================================================== */

.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu {

    width: 230px !important;
    min-width: 230px !important;

    padding: 7px !important;
    margin: 6px 0 0 !important;

    background: #101827 !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 11px !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.32) !important;

    overflow: hidden !important;

    color: #ffffff !important;
}


/* ----------------------------------------------------------
   INFORMACION DE CUENTA
   ---------------------------------------------------------- */

.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-menu-info {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 10px 11px !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom:
        1px solid rgba(255,255,255,.11) !important;

    border-radius: 0 !important;

    text-align: left !important;
}


.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-menu-name {

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: .80rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    text-align: left !important;
}


.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-menu-account {

    display: block !important;

    margin: 3px 0 0 !important;
    padding: 0 !important;

    color: #94a3b8 !important;

    font-size: .65rem !important;
    font-weight: 400 !important;

    text-align: left !important;
}


/* ----------------------------------------------------------
   ACCIONES - SIEMPRE VERTICALES
   ---------------------------------------------------------- */

.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-menu-actions {

    display: flex !important;
    flex-direction: column !important;

    grid-template-columns: none !important;

    width: 100% !important;

    gap: 2px !important;

    margin: 0 !important;
    padding: 6px 0 0 !important;

    background: transparent !important;

    border: 0 !important;
}


.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-menu-action {

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-height: 38px !important;

    gap: 9px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 7px !important;

    color: #ffffff !important;

    font-size: .76rem !important;
    font-weight: 600 !important;

    text-align: left !important;
    text-decoration: none !important;
}


.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-menu-action i {

    width: 18px !important;

    color: #ffffff !important;

    text-align: center !important;
}


.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-menu-action:hover,

.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-menu-action:focus {

    background:
        rgba(255,255,255,.09) !important;

    color: #ffffff !important;
}


/* Cerrar sesión TAMBIEN blanco */

.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-logout,

.mw-map-topnav
.mw-topnav-tools
.dropdown
.mw-user-menu
.mw-user-logout i {

    color: #ffffff !important;
}


/* ==========================================================
   MOBILE
   El dropdown forma parte del navbar.
   NO flota sobre el banner.
   ========================================================== */

@media (max-width: 768px) {

    .mw-map-topnav
    .mw-topnav-tools
    > .dropdown {

        position: static !important;

        align-self: flex-start !important;
    }


    .mw-map-topnav
    .mw-topnav-tools
    > .dropdown
    > .mw-user-menu.show {

        position: static !important;

        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        display: block !important;

        width: 215px !important;
        min-width: 215px !important;
        max-width: 215px !important;

        margin:
            6px 0 0 0 !important;

        float: none !important;
    }


    /*
     * Al crecer el dropdown, el navbar crece también.
     * El contenido inferior baja y NO queda tapado.
     */
    .mw-map-topnav
    .mw-topnav-tools {

        align-items: flex-start !important;
    }


    .mw-map-topnav
    .mw-topnav-tools
    .mw-user-menu
    .mw-user-menu-action {

        min-height: 40px !important;
    }
}

/*
 * ==========================================================
 * MEJENGAWEB - NAVBAR DESKTOP
 * ==========================================================
 *
 * Desktop:
 *   - Navegacion principal horizontal.
 *
 * Mobile:
 *   - Se conserva el menu hamburguesa existente.
 *
 * No modifica carrito, notificaciones ni usuario.
 * ==========================================================
 */

@media (min-width: 992px) {

    /*
     * El contenedor principal puede utilizar
     * todo el espacio disponible.
     */
    .mw-topnav-inner {
        width: 100%;
    }

    .mw-topnav-collapse {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        min-width: 0;
    }

    .mw-topnav-links {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
    }

    /*
     * En escritorio no necesitamos el boton "Menu".
     */
    .mw-main-nav-button {
        display: none !important;
    }

    /*
     * El contenido que actualmente vive dentro
     * del dropdown pasa a funcionar como navbar.
     */
    .mw-main-nav {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mw-main-nav-dropdown {
        position: static !important;

        display: flex !important;

        flex-direction: row;
        align-items: center;

        width: 100%;
        min-width: 0;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        background: transparent !important;

        transform: none !important;
    }

    /*
     * Los encabezados "Explorar" y "Servicios"
     * no son necesarios en el navbar horizontal.
     */
    .mw-main-nav-dropdown .dropdown-header {
        display: none !important;
    }

    /*
     * Los separadores tampoco son necesarios
     * en la version horizontal.
     */
    .mw-main-nav-dropdown .dropdown-divider {
        display: none !important;
    }

    .mw-main-nav-dropdown > li {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    .mw-main-nav-dropdown .dropdown-item {
        display: flex;
        align-items: center;
        justify-content: center;

        white-space: nowrap;

        background: transparent !important;

        border-radius: 8px;

        padding: 8px 10px;

        font-size: .86rem;
    }

    .mw-main-nav-dropdown .dropdown-item:hover,
    .mw-main-nav-dropdown .dropdown-item:focus {
        background: rgba(255,255,255,.08) !important;
    }

}


/*
 * ==========================================================
 * MOBILE
 * ==========================================================
 *
 * No se redefine el comportamiento.
 * El CSS existente de mobile continua controlando
 * el menu hamburguesa.
 * ==========================================================
 */

@media (max-width: 991.98px) {

    .mw-main-nav-dropdown {
        display: none;
    }

    .mw-main-nav-dropdown.show {
        display: block;
    }

}


/*
 * ==========================================================
 * MEJENGAWEB - NAVBAR DESKTOP
 * COLOR DE TEXTO E ICONOS
 * ==========================================================
 */

@media (min-width: 992px) {

    .mw-main-nav-dropdown .dropdown-item {
        color: #e9ecef !important;
    }

    .mw-main-nav-dropdown .dropdown-item i {
        color: #adb5bd !important;
    }

    .mw-main-nav-dropdown .dropdown-item:hover,
    .mw-main-nav-dropdown .dropdown-item:focus {
        color: #ffffff !important;
    }

    .mw-main-nav-dropdown .dropdown-item:hover i,
    .mw-main-nav-dropdown .dropdown-item:focus i {
        color: #ffffff !important;
    }

}


/*
 * ==========================================================
 * MEJENGAWEB - NAVBAR DESKTOP
 * NAVEGACION CENTRADA + BOTONES UNIFORMES
 * ==========================================================
 */

@media (min-width: 992px) {

    /*
     * El espacio central del Navbar queda realmente
     * dedicado a la navegación.
     */
    .mw-topnav-collapse {
        justify-content: center;
    }

    .mw-topnav-links {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

    .mw-main-nav {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
    }

    .mw-main-nav-dropdown {
        width: auto;
        max-width: 100%;

        display: flex !important;
        justify-content: center;
        align-items: center;

        gap: 5px;
    }

    /*
     * Cada elemento de navegación utiliza el mismo
     * lenguaje visual de los CTA principales.
     */
    .mw-main-nav-dropdown .dropdown-item {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 6px;

        padding: 7px 11px;

        min-height: 34px;

        border-radius: 18px;

        background: #12c6e8 !important;
        border: 1px solid #12c6e8 !important;

        color: #07131d !important;

        font-size: .82rem;
        font-weight: 600;

        line-height: 1;

        white-space: nowrap;

        transition:
            background .18s ease,
            color .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }

    .mw-main-nav-dropdown .dropdown-item i {
        color: #07131d !important;
        font-size: .82rem;
    }

    .mw-main-nav-dropdown .dropdown-item:hover,
    .mw-main-nav-dropdown .dropdown-item:focus {
        background: #12c6e8 !important;
        border-color: #12c6e8 !important;

        color: #07131d !important;

        transform: translateY(-1px);

        box-shadow:
            0 4px 12px rgba(18, 198, 232, .24);

        outline: none;
    }

    .mw-main-nav-dropdown .dropdown-item:hover i,
    .mw-main-nav-dropdown .dropdown-item:focus i {
        color: #07131d !important;
    }

    /*
     * El botón actualmente utilizado para abrir el menú
     * no participa en desktop.
     */
    .mw-main-nav-button {
        display: none !important;
    }

}


/*
 * ==========================================================
 * MOBILE
 * ==========================================================
 *
 * No se modifica el diseño móvil.
 * El menú hamburguesa continúa utilizando el comportamiento
 * existente.
 * ==========================================================
 */


/*
 * ==========================================================
 * MEJENGAWEB - MOBILE MENU
 * POLISH VISUAL / UX
 * ==========================================================
 */

@media (max-width: 991.98px) {

    /*
     * Contenedor general del menu.
     */
    .mw-main-nav-dropdown {
        padding: 8px 10px 12px !important;
    }

    /*
     * Las secciones siguen claramente diferenciadas.
     */
    .mw-main-nav-dropdown .dropdown-header {
        padding: 12px 6px 7px !important;

        color: #70dff2 !important;

        font-size: .68rem !important;
        font-weight: 700 !important;

        letter-spacing: .08em;
        text-transform: uppercase;
    }

    /*
     * Dos columnas limpias.
     */
    .mw-main-nav-dropdown > li {
        width: 50%;
        box-sizing: border-box;
    }

    /*
     * Cada enlace ocupa realmente un área táctil cómoda.
     */
    .mw-main-nav-dropdown .dropdown-item {
        width: 100%;

        min-height: 40px;

        display: flex !important;

        align-items: center;
        justify-content: flex-start;

        gap: 9px;

        box-sizing: border-box;

        padding: 8px 8px !important;

        border-radius: 8px;

        color: #e9eef5 !important;

        background: transparent !important;

        font-size: .82rem !important;
        font-weight: 500;

        line-height: 1.2;

        white-space: nowrap;

        transition:
            background .15s ease,
            color .15s ease;
    }

    /*
     * Iconos uniformes.
     */
    .mw-main-nav-dropdown .dropdown-item i {
        width: 18px;
        min-width: 18px;

        text-align: center;

        color: #aeb9c7 !important;

        font-size: .78rem;
    }

    /*
     * Estado táctil / hover.
     */
    .mw-main-nav-dropdown .dropdown-item:hover,
    .mw-main-nav-dropdown .dropdown-item:focus,
    .mw-main-nav-dropdown .dropdown-item:active {
        background: rgba(18, 198, 232, .10) !important;

        color: #ffffff !important;

        outline: none;
    }

    .mw-main-nav-dropdown .dropdown-item:hover i,
    .mw-main-nav-dropdown .dropdown-item:focus i,
    .mw-main-nav-dropdown .dropdown-item:active i {
        color: #12c6e8 !important;
    }

    /*
     * Separadores más limpios.
     */
    .mw-main-nav-dropdown .dropdown-divider {
        margin: 8px 4px !important;

        border-color: rgba(255,255,255,.10) !important;
    }

    /*
     * PLAN DIAMANTE:
     * única acción de navegación destacada.
     */
    .mw-main-nav-dropdown .dropdown-item[href="/Field"] {
        color: #07131d !important;

        background: #12c6e8 !important;

        border: 1px solid #12c6e8 !important;

        border-radius: 18px;

        font-weight: 700;
    }

    .mw-main-nav-dropdown .dropdown-item[href="/Field"] i {
        color: #07131d !important;
    }

    .mw-main-nav-dropdown .dropdown-item[href="/Field"]:hover,
    .mw-main-nav-dropdown .dropdown-item[href="/Field"]:focus,
    .mw-main-nav-dropdown .dropdown-item[href="/Field"]:active {
        background: #12c6e8 !important;

        color: #07131d !important;
    }

    /*
     * Contacto / Nosotros permanecen como acciones
     * secundarias, pero con buena área táctil.
     */
    .mw-main-nav-dropdown .dropdown-item[href="/contact"],
    .mw-main-nav-dropdown .dropdown-item[href="/about-us"] {
        color: #dbe3ec !important;
    }

}


/*
 * ==========================================================
 * MOBILE MUY ESTRECHO
 * ==========================================================
 */

@media (max-width: 380px) {

    .mw-main-nav-dropdown {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .mw-main-nav-dropdown .dropdown-item {
        gap: 6px;

        padding-left: 6px !important;
        padding-right: 6px !important;

        font-size: .77rem !important;
    }

    .mw-main-nav-dropdown .dropdown-item i {
        width: 16px;
        min-width: 16px;
    }

}


@media (max-width: 991.98px) {

    /*
     * Plan Diamante ocupa una fila completa.
     * El resto de la navegación conserva las
     * dos columnas originales.
     */
    .mw-main-nav-dropdown > li:has(
        > .dropdown-item[href="/Field"]
    ) {
        width: 100% !important;
    }

    .mw-main-nav-dropdown
    > li:has(
        > .dropdown-item[href="/Field"]
    )
    .dropdown-item {
        width: 100% !important;

        justify-content: center;

        box-sizing: border-box;

        margin: 2px 0;
    }

}

/* ==========================================================
   MW NAVBAR - DESKTOP FINAL
   Estructura:
   MARCA | MENU PRINCIPAL | ESPACIO FLEXIBLE | USUARIO
   ========================================================== */

@media (min-width: 992px) {

    .mw-topnav-inner {
        width: 100% !important;
        max-width: none !important;

        display: flex !important;
        align-items: center !important;

        gap: 8px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Marca: nunca debe comprimirse */
    .mw-topnav-brand {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
    }

    /* Contenedor central */
    .mw-topnav-collapse {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;
    }

    /* Menú principal */
    .mw-topnav-links {
        flex: 1 1 auto !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        gap: 5px !important;
    }

    /* IMPORTANTE:
       Los botones NO se expanden para ocupar espacio artificial.
       Conservan su ancho natural y no empujan al usuario. */
    .mw-topnav-links > *,
    .mw-topnav-links .mw-main-nav {
        flex: 0 0 auto !important;
        min-width: max-content !important;
    }

    .mw-topnav-links a,
    .mw-topnav-links button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Área autenticada:
       siempre queda como bloque independiente a la derecha. */
    .mw-topnav-user {
        flex: 0 0 auto !important;
        min-width: max-content !important;

        margin-left: auto !important;

        white-space: nowrap !important;
        position: relative !important;
        z-index: 20 !important;
    }

    .mw-topnav-user-text {
        flex: 0 0 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
    }

    /* Avatar / notificaciones / carrito tampoco se comprimen */
    .mw-topnav-user *,
    .mw-topnav-tools *,
    .mw-topnav-actions * {
        flex-shrink: 0 !important;
    }

    /* El menú desplegable del usuario permanece a la derecha */
    .mw-topnav-user .dropdown-menu,
    .mw-topnav-user .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
}

/* ==========================================================
   FIN MW NAVBAR DESKTOP FINAL
   ========================================================== */