@media (max-width: 767px) {

    /* ==============================
       MENÚ PRINCIPAL
       ============================== */

    #ss-menu {
        overflow: visible !important;
        width: 100% !important;
    }

    #ss-menu > div {
        width: 100% !important;
        overflow: visible !important;
        align-items: flex-start !important;
    }

    #ss-menu-list {
        width: 100% !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;

        /* Separación del borde izquierdo */
        padding-left: 20px !important;
        padding-right: 15px !important;

        /* Mantiene el espacio entre opciones */
        gap: 20px !important;

        overflow: visible !important;
    }

    /* Ítems principales */
    #ss-menu-list > li {
        width: 100% !important;
        text-align: left !important;
        overflow: visible !important;
    }

    #ss-menu .ss-menu-item,
    #ss-menu .ss-menu-split-link {
        margin-left: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }



    /* ==============================
       ELEMENTOS CON SUBMENÚ
       ============================== */

    #ss-menu .ss-menu-split-layout {
        position: relative !important;
        width: 100% !important;
        text-align: left !important;
        overflow: visible !important;
    }

    /* Link + flecha */
    #ss-menu .ss-menu-split-link {
        display: inline-block !important;
    }

    #ss-menu .ss-menu-split-button {
        display: inline-block !important;
        vertical-align: middle !important;
    }


    /* ==============================
       SUBMENÚ
       ============================== */

    #ss-menu .ss-menu-split-dropdown {
        position: static !important;
        float: none !important;
        transform: none !important;

        width: auto !important;
        min-width: 220px !important;
        max-width: calc(100vw - 55px) !important;

        margin-top: 10px !important;
        margin-left: 15px !important;

        padding: 5px 0 !important;

        /* MUY IMPORTANTE */
        max-height: none !important;
        height: auto !important;

        overflow: visible !important;
    }

    #ss-menu .ss-menu-split-dropdown .dropdown-item {
        white-space: normal !important;
        text-align: left !important;

        padding: 8px 15px !important;

        width: 100% !important;
    }


    /* ==============================
       EVITAR RECORTES
       ============================== */

    #ss-menu nav,
    #ss-menu ul,
    #ss-menu li,
    #ss-menu .nav-item,
    #ss-menu .ss-menu-split-layout {
        overflow: visible !important;
    }
}

@media (max-width: 767px) {

    /* El contenedor del ítem permite que el desplegable salga */
    #ss-menu .ss-menu-split-layout {
        position: relative !important;
        overflow: visible !important;
    }

    /* SUBMENÚ */
    #ss-menu .ss-menu-split-dropdown {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;

        transform: none !important;
        float: none !important;

        min-width: 230px !important;
        width: max-content !important;
        max-width: calc(100vw - 40px) !important;

        margin: 8px 0 0 15px !important;

        padding: 5px 0 !important;

        max-height: none !important;
        height: auto !important;

        overflow: visible !important;
        z-index: 99999 !important;
    }

    /* Texto de las opciones */
    #ss-menu .ss-menu-split-dropdown .dropdown-item {
        display: block !important;
        width: 100% !important;

        padding: 9px 15px !important;

        white-space: normal !important;
        text-align: left !important;
    }

    /* Que ningún elemento interno lo recorte */
    #ss-menu,
    #ss-menu > div,
    #ss-menu-list,
    #ss-menu-list > li,
    #ss-menu .ss-menu-split-layout {
        overflow: visible !important;
    }
}