/* =========================================
   AYS MENU — RESPONSIVE
   ========================================= */


/* =========================================
   MÓVIL
   ========================================= */

@media (max-width: 767px) {

    /*
       La retícula de escritorio reserva una columna para el sidebar.
       En móvil el menú es fijo y esa columna debe desaparecer por completo.
    */
    .elementor .ays-page {
        display: block !important;
        grid-template-columns: 1fr;
    }

    .elementor .ays-page > .ays-sidebar-container {
        display: contents;
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
    }

    .elementor .ays-page > .ays-main {
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 100% !important;
        min-width: 0;
    }

    html,
    body {
        overflow-x: hidden;
    }

    /* -----------------------------------------
       CONTENEDOR DEL SIDEBAR
       ----------------------------------------- */

    .ays-sidebar-container {
        margin-left: 0 !important;
        width: 0 !important;
        min-width: 0 !important;
    }


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

    .ays-sidebar {
        position: fixed !important;

        top: 0;
        left: 0;

        width: 280px !important;
        height: 100vh !important;

        margin: 0 !important;

        padding: 40px 30px !important;

        box-sizing: border-box;

        background: #102B3F;

        transform: translateX(-100%);

        transition: transform 0.35s ease;

        z-index: 100000;
    }


    /* -----------------------------------------
       MENÚ ABIERTO
       ----------------------------------------- */

    .ays-sidebar.menu-abierto {
        transform: translateX(0);
    }


    /* -----------------------------------------
       BOTÓN
       ----------------------------------------- */

    .ays-mobile-toggle {

        display: flex !important;

        position: fixed !important;

        top: 20px !important;
        right: 20px !important;

        width: 48px !important;
        height: 48px !important;

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

        background: #102B3F !important;

        border: 0 !important;

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

        flex-direction: column !important;

        gap: 5px !important;

        z-index: 999999 !important;

    }


    .ays-mobile-toggle span {

        display: block !important;

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

        background: #F3F3F3 !important;

    }


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

    .ays-sidebar-links {

        display: flex;

        flex-direction: column;

        gap: 26px;

    }


    .ays-sidebar-links a {

        color: #F3F3F3 !important;

        text-decoration: none;

        font-size: 26px;
        letter-spacing: 0.5px;

    }


    .ays-sidebar-links a:hover {

        color: #FEE9AF !important;

    }


    /* -----------------------------------------
       LOGO
       ----------------------------------------- */

    .ays-sidebar-logo img {

        width: 120px;
        height: auto;

    }

}


/* =========================================
   PC
   ========================================= */

@media (min-width: 768px) {

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

}