/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 06 2026 | 02:28:19 */
/**
 * AVSYS — Menú móvil colapsable para Divi 4
 * Versión 2.2
 *
 * Ajustes:
 * - Control visual ligeramente más pequeño.
 * - Área táctil de 44 × 44 px conservada.
 * - Alineación vertical mediante CSS Grid para que el botón permanezca
 *   centrado en la fila del enlace, incluso cuando el submenú está abierto.
 * - Fondo transparente en enlaces padre para eliminar la franja gris de Divi.
 * - Líneas divisorias ajustadas a #eeeeee.
 */

@media only screen and (max-width: 980px) {

    /* Variables rápidas de personalización. */
    ul.et_mobile_menu {
        --av-toggle-touch-size: 44px;
        --av-toggle-visual-size: 30px;
        --av-toggle-color: #3665db;
        --av-toggle-background: #f0f3f6;
        --av-toggle-background-hover: #e5ebf2;
    }

    /*
     * La fila principal se organiza en dos columnas:
     * texto | botón. El submenú ocupa la fila completa inferior.
     */
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle {
        position: relative;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 54px;
        align-items: center;
    }

    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle > a {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        padding-right: 12px !important;
        background-color: transparent !important;
    }

    /*
     * Elimina la franja gris que Divi aplica a los elementos con submenú,
     * también durante hover, foco y estados activos.
     */
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle > a:hover,
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle > a:focus,
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle.current-menu-item > a,
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle.current-menu-ancestor > a {
        background-color: transparent !important;
    }

    /* Línea divisoria uniforme y ligeramente más visible. */
    body #page-container ul.et_mobile_menu li > a {
        border-bottom-color: #eeeeee !important;
    }

    /* Todos los submenús directos ocupan una nueva fila completa. */
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle > ul.sub-menu,
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle > ul.children {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    /*
     * Respaldo CSS del estado cerrado.
     * El JavaScript también aplica display/visibility inline con !important
     * para vencer reglas anteriores de Divi o personalizaciones existentes.
     */
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle:not(.av-submenu-open) > ul.sub-menu,
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle:not(.av-submenu-open) > ul.children {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Mostrar únicamente el submenú directo del elemento abierto. */
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle.av-submenu-open > ul.sub-menu,
    body #page-container ul.et_mobile_menu li.av-has-mobile-toggle.av-submenu-open > ul.children {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /*
     * Botón independiente del enlace padre.
     * La superficie táctil sigue siendo de 44 × 44 px aunque la bolita
     * visible sea más pequeña.
     */
    body #page-container ul.et_mobile_menu .av-mobile-toggle {
        position: relative;
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: center;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--av-toggle-touch-size);
        height: var(--av-toggle-touch-size);
        margin: 0;
        padding: 0 !important;
        border: 0;
        background: transparent;
        color: var(--av-toggle-color);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
    }

    /* Círculo visual del control. */
    body #page-container ul.et_mobile_menu .av-mobile-toggle::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--av-toggle-visual-size);
        height: var(--av-toggle-visual-size);
        content: '';
        border-radius: 50%;
        background: var(--av-toggle-background);
        transform: translate(-50%, -50%);
        transition: background-color 180ms ease;
    }

    /* Flecha hacia abajo cuando el submenú está cerrado. */
    body #page-container ul.et_mobile_menu .av-mobile-toggle__icon {
        position: relative;
        z-index: 1;
        display: block;
        width: 8px;
        height: 8px;
        border-right: 3px solid currentColor;
        border-bottom: 3px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 180ms ease;
        pointer-events: none;
    }

    /* Flecha hacia arriba cuando el submenú está abierto. */
    body #page-container ul.et_mobile_menu li.av-submenu-open > .av-mobile-toggle .av-mobile-toggle__icon {
        transform: translateY(2px) rotate(225deg);
    }

    body #page-container ul.et_mobile_menu .av-mobile-toggle:hover::before,
    body #page-container ul.et_mobile_menu .av-mobile-toggle:focus-visible::before {
        background: var(--av-toggle-background-hover);
    }

    body #page-container ul.et_mobile_menu .av-mobile-toggle:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: -4px;
        border-radius: 50%;
    }

    /* Sangría por nivel. */
    body #page-container ul.et_mobile_menu ul.sub-menu,
    body #page-container ul.et_mobile_menu ul.children {
        padding-left: 0 !important;
    }

    body #page-container ul.et_mobile_menu ul.sub-menu > li > a,
    body #page-container ul.et_mobile_menu ul.children > li > a {
        padding-left: 30px !important;
    }

    body #page-container ul.et_mobile_menu ul.sub-menu ul.sub-menu > li > a,
    body #page-container ul.et_mobile_menu ul.children ul.children > li > a {
        padding-left: 45px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    ul.et_mobile_menu .av-mobile-toggle::before,
    ul.et_mobile_menu .av-mobile-toggle__icon {
        transition: none;
    }
}