/* =========================================================
   WEBLIGHTDIS
   MENÚ MÓVIL LATERAL IZQUIERDO
   ========================================================= */

.mobile-nav-toggle {
    display: none;
}


/* =========================================================
   TABLET + MÓVIL
   ========================================================= */

@media (max-width: 1023px) {

    /* -----------------------------------------
       BOTÓN DE LAS 3 RAYITAS
       ----------------------------------------- */

    .mobile-nav-toggle {
        display: flex !important;

        position: fixed !important;

        top: 15px !important;
        left: 15px !important;
        right: auto !important;

        width: 46px !important;
        height: 46px !important;

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

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        background: #081426 !important;

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

        cursor: pointer !important;

        z-index: 100001 !important;
    }


    .mobile-nav-toggle span {
        display: block !important;

        width: 24px !important;
        height: 2px !important;

        background: #ffffff !important;

        border-radius: 3px !important;

        transition: all .25s ease !important;
    }


    /* -----------------------------------------
       ANIMACIÓN ☰ → X
       ----------------------------------------- */

    .mobile-nav-toggle.menu-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .mobile-nav-toggle.menu-open span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-nav-toggle.menu-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }


    /* -----------------------------------------
       MENÚ LATERAL
       ----------------------------------------- */

    #mainNav {
        display: block !important;

        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: auto !important;

        width: min(310px, 82vw) !important;
        height: 100vh !important;

        box-sizing: border-box !important;

        padding: 80px 14px 25px !important;

        overflow-y: auto !important;

        background: #081426 !important;

        border-right: 1px solid rgba(255,255,255,.15) !important;

        box-shadow: 12px 0 35px rgba(0,0,0,.45) !important;

        transform: translateX(-105%) !important;

        transition: transform .28s ease !important;

        z-index: 100000 !important;
    }


    /* MENÚ ABIERTO */

    #mainNav.mobile-open {
        transform: translateX(0) !important;
    }


    /* -----------------------------------------
       LISTA
       ----------------------------------------- */

    #mainNav .nav-menu,
    #mainNav ul {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        gap: 4px !important;

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

        list-style: none !important;
    }


    #mainNav li {
        display: block !important;

        width: 100% !important;

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


    /* -----------------------------------------
       ENLACES
       ----------------------------------------- */

    #mainNav a {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 48px !important;

        padding: 12px 15px !important;

        box-sizing: border-box !important;

        color: #ffffff !important;

        text-decoration: none !important;

        text-align: left !important;

        border-radius: 9px !important;
    }


    #mainNav a:hover,
    #mainNav a:focus,
    #mainNav a.active {
        background: rgba(255,255,255,.09) !important;
    }


    /* -----------------------------------------
       BLOQUEAR SCROLL DEL BODY
       ----------------------------------------- */

    body.mobile-menu-open {
        overflow: hidden !important;
    }


    /* WHATSAPP POR ENCIMA DEL MENÚ */

    #whatsappWidget,
    #whatsappWidgetFull {
        z-index: 100050 !important;
    }
}


/* =========================================================
   ORDENADOR
   ========================================================= */

@media (min-width: 1024px) {

    .mobile-nav-toggle {
        display: none !important;
    }
}