/* ========================================
   PLUGIN DE MENÚ PERSONALIZADO PARA ELEMENTOR
   ======================================== */

/* Variables CSS para personalización */
:root {
    --ecm-primary-color: #333333;
    --ecm-secondary-color: #ffffff;
    --ecm-accent-color: #007cba;
    --ecm-text-color: #333333;
    --ecm-background-color: rgba(0, 0, 0, 0.95);
    --ecm-overlay-z-index: 999999;
    --ecm-trigger-z-index: 99999;
    --ecm-transition-duration: 0.3s;
    --ecm-border-radius: 8px;
    --ecm-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* GARANTIZAR QUE NO SE GENERE ESPACIO SUPERIOR */
.ecm-menu-container,
.ecm-menu-trigger,
.ecm-menu-overlay {
    /* ELIMINAR COMPLETAMENTE DEL FLUJO DEL DOCUMENTO */
    position: absolute !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* NO AFECTAR EL LAYOUT */
    display: block !important;
    /* NO GENERAR SCROLL */
    overflow: visible !important;
}

/* Asegurar que el contenedor padre no genere espacio */
.elementor-widget-container:has(.ecm-menu-container) {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: visible !important;
}

/* CSS adicional para eliminar espacio cuando se usa posición relativa */
.ecm-menu-container[style*="position: relative"] {
    margin: 0 !important;
    padding: 0 !important;
    width: 50px !important;
    height: 50px !important;
    display: inline-block !important;
    vertical-align: top !important;
}

/* CSS para posición fija - asegurar que no genere espacio */
.ecm-menu-container[style*="position: fixed"] {
    margin: 0 !important;
    padding: 0 !important;
    width: 50px !important;
    height: 50px !important;
}

/* CSS para posición absoluta - asegurar que no genere espacio */
.ecm-menu-container[style*="position: absolute"] {
    margin: 0 !important;
    padding: 0 !important;
    width: 50px !important;
    height: 50px !important;
}

/* Asegurar que el widget de Elementor no genere espacio */
.elementor-widget-ecm-custom-menu .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* SOLUCIÓN AGRESIVA PARA ELIMINAR ESPACIO DEL BACKGROUND */
.elementor-widget-ecm-custom-menu {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    display: block !important;
    /* FORZAR POSICIÓN ABSOLUTA */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    /* ELIMINAR BACKGROUND COMPLETAMENTE */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    /* ELIMINAR BORDES Y SOMBRAS */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    /* ELIMINAR CUALQUIER PADDING INTERNO */
    box-sizing: border-box !important;
    /* Z-INDEX ALTO PARA ESTAR POR ENCIMA */
    z-index: 999999 !important;
}

.elementor-widget-ecm-custom-menu .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    /* FORZAR POSICIÓN ABSOLUTA */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    /* Z-INDEX ALTO */
    z-index: 999999 !important;
}

/* Eliminar cualquier background del widget */
.elementor-widget-ecm-custom-menu,
.elementor-widget-ecm-custom-menu * {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Asegurar que el contenedor del menú no genere espacio */
.ecm-menu-container {
    /* La posición se controla desde Elementor */
    /* width y height se controlan desde Elementor */
    /* z-index se controla desde Elementor */
    /* NO AFECTAR EL LAYOUT */
    overflow: visible !important;
    display: block !important;
    /* GARANTIZAR QUE NO GENERE ESPACIO */
    pointer-events: auto !important;
    /* ELIMINAR CUALQUIER IMPACTO EN EL LAYOUT */
    transform: none !important;
    /* ELIMINAR BACKGROUND */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* CSS ESPECÍFICO PARA ELIMINAR ESPACIO DEL BACKGROUND */
.elementor-widget-ecm-custom-menu {
    /* Eliminar completamente del flujo */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    display: block !important;
    /* Eliminar background */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    /* Eliminar bordes y sombras */
    border: none !important;
    box-shadow: none !important;
    /* Eliminar cualquier padding interno */
    box-sizing: border-box !important;
}

/* Asegurar que el contenedor interno no genere espacio */
.elementor-widget-ecm-custom-menu .elementor-widget-container {
    /* Eliminar completamente del flujo */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    /* Eliminar texto y líneas */
    line-height: 0 !important;
    font-size: 0 !important;
    /* Eliminar background */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    /* Eliminar bordes */
    border: none !important;
    box-shadow: none !important;
    /* Eliminar cualquier padding interno */
    box-sizing: border-box !important;
}

/* Eliminar cualquier elemento interno que pueda generar espacio */
.elementor-widget-ecm-custom-menu .elementor-widget-container > * {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* CSS para cuando el control "Eliminar del Flujo del Documento" está activado */
.elementor-widget-ecm-custom-menu[data-remove-flow="yes"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    z-index: 999999 !important;
}

/* CSS adicional para eliminar completamente el espacio del background */
.elementor-widget-ecm-custom-menu[data-remove-flow="yes"] .elementor-widget-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* CSS para el contenedor del menú cuando se elimina del flujo */
.elementor-widget-ecm-custom-menu[data-remove-flow="yes"] .ecm-menu-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 50px !important;
    width: 50px !important;
    overflow: visible !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* CSS para eliminar cualquier espacio residual */
.elementor-widget-ecm-custom-menu[data-remove-flow="yes"] * {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Overlay del menú - COMPLETAMENTE FUERA DEL FLUJO */
.ecm-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--ecm-background-color);
    z-index: var(--ecm-overlay-z-index);
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all var(--ecm-transition-duration) ease;
}

/* Bloquear scroll cuando el menú está activo */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Asegurar que el menú tenga prioridad absoluta sobre cualquier otro elemento */
.ecm-menu-overlay.active {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    z-index: 999999 !important; /* Prioridad máxima absoluta */
}

/* Contenedor del menú - POSICIÓN CONTROLADA POR ELEMENTOR */
.ecm-menu-container {
    /* La posición se controla desde Elementor */
    /* width y height se controlan desde Elementor */
    /* z-index se controla desde Elementor */
    /* NO AFECTAR EL LAYOUT */
    overflow: visible !important;
    display: block !important;
    /* GARANTIZAR QUE NO GENERE ESPACIO */
    pointer-events: auto !important;
    /* ELIMINAR CUALQUIER IMPACTO EN EL LAYOUT */
    transform: none !important;
}

/* Botón del menú - POSICIÓN ABSOLUTA DENTRO DEL CONTENEDOR */
.ecm-menu-trigger {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    border: none;
    cursor: pointer;
    transition: all var(--ecm-transition-duration) ease;
    /* NO establecer colores, bordes, sombras o padding por defecto */
    /* Los controles de Elementor se encargarán de esto */
    /* Eliminar outline por defecto */
    outline: none !important;
    /* Asegurar que no genere espacio */
    margin: 0 !important;
    padding: 0 !important;
    /* No afectar el layout */
    float: none !important;
    clear: none !important;
}

.ecm-menu-trigger:hover {
    transform: scale(1.1);
}

.ecm-menu-trigger:focus {
    /* Solo mostrar outline cuando está activamente enfocado, no después de cerrar */
    outline: 2px solid var(--ecm-accent-color) !important;
    outline-offset: 2px;
}

/* Estado activo del botón - sin outline */
.ecm-menu-trigger.active,
.ecm-menu-trigger.menu-open {
    outline: none !important;
}

/* Estado después de cerrar el menú - sin outline */
.ecm-menu-trigger.menu-closed {
    outline: none !important;
}

/* POSICIONAMIENTO REAL DEL CONTENEDOR - RESPETANDO LA BARRA DE ADMINISTRACIÓN */
.ecm-menu-top-right {
    top: 32px !important; /* Debajo de la barra de administración de WordPress */
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
}

.ecm-menu-top-left {
    top: 32px !important; /* Debajo de la barra de administración de WordPress */
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
}

.ecm-menu-bottom-right {
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
}

.ecm-menu-bottom-left {
    bottom: 20px !important;
    left: 20px !important;
    top: auto !important;
    right: auto !important;
}

/* Contenido del menú - PRIORIDAD MÁXIMA */
.ecm-menu-content {
    position: relative;
    z-index: 999999 !important; /* Prioridad máxima absoluta */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    box-sizing: border-box;
    background-color: inherit; /* Heredar el color de fondo del overlay */
}

/* Header del menú - MÁXIMA PRIORIDAD */
.ecm-menu-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999999 !important; /* Prioridad máxima absoluta */
    padding: 20px;
}

/* Botón de cerrar - POSICIÓN RELATIVA AL ICONO DEL MENÚ */
.ecm-menu-close {
    position: fixed !important; /* Usar fixed para que esté en la misma posición que el icono del menú */
    top: 32px !important; /* Misma posición que el icono del menú */
    right: 20px !important; /* Misma posición que el icono del menú */
    width: 50px;
    height: 50px;
    border: none;
    background-color: rgba(0, 0, 0, 0.8) !important; /* Fondo visible */
    color: #ffffff !important; /* Color blanco por defecto */
    font-size: 24px;
    cursor: pointer;
    display: flex !important; /* Forzar display */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 999999 !important; /* Prioridad máxima absoluta */
    opacity: 1 !important; /* Forzar visibilidad */
    visibility: visible !important; /* Forzar visibilidad */
}

/* Ajustar posición del botón de cerrar según la posición del menú */
.ecm-menu-container.ecm-menu-top-left ~ .ecm-menu-overlay .ecm-menu-close {
    right: auto !important;
    left: 20px !important;
}

.ecm-menu-container.ecm-menu-bottom-right ~ .ecm-menu-overlay .ecm-menu-close {
    top: auto !important;
    bottom: 20px !important;
}

.ecm-menu-container.ecm-menu-bottom-left ~ .ecm-menu-overlay .ecm-menu-close {
    top: auto !important;
    right: auto !important;
    bottom: 20px !important;
    left: 20px !important;
}

.ecm-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(180deg); /* Rotación rápida al hover */
    transition: all 0.2s ease; /* Transición más rápida para el efecto de rotación */
}

/* Animación de rotación rápida al hover (como en studiofifty.premiumthemes.in) */
.ecm-menu-close i {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* Transición más suave y rápida */
}

.ecm-menu-close:hover i {
    transform: rotate(180deg);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efecto adicional de rotación continua al hover prolongado */
.ecm-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    transform: scale(1.05); /* Escala más sutil */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animación de entrada del botón de cerrar */
.ecm-menu-close {
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-90deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Navegación del menú - PRIORIDAD ALTA */
.ecm-menu-navigation {
    position: relative;
    z-index: 999999 !important; /* Prioridad máxima absoluta */
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
    max-width: 600px;
}

/* Menú de WordPress - PRIORIDAD ALTA */
.ecm-wp-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 999999 !important; /* Prioridad máxima absoluta */
}

/* Asegurar que los elementos del menú estén por encima de cualquier logotipo */
.ecm-wp-menu li {
    position: relative;
    z-index: 999999 !important; /* Prioridad máxima absoluta */
}

.ecm-wp-menu a {
    position: relative;
    z-index: 999999 !important; /* Prioridad máxima absoluta */
    display: inline-block; /* Cambiar a inline-block para el underline */
    padding: 15px 20px;
    color: var(--ecm-secondary-color);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    transition: all var(--ecm-transition-duration) ease;
    border-radius: var(--ecm-border-radius);
    background-color: transparent;
}

.ecm-wp-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(10px);
}

.ecm-wp-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 2px;
    background-color: var(--ecm-accent-color);
    transition: width var(--ecm-transition-duration) ease;
    transform: translateY(-50%);
}

.ecm-wp-menu a:hover::before {
    width: 100%;
}

/* Bullets personalizables para elementos del menú */
.ecm-wp-menu li.has-bullet {
    position: relative;
    padding-left: 25px;
}

.ecm-wp-menu li.has-bullet::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

/* Estilos de bullets */
.ecm-wp-menu li.bullet-dot::before {
    content: '•';
    color: inherit;
    font-size: inherit;
}

.ecm-wp-menu li.bullet-arrow::before {
    content: '→';
    color: inherit;
    font-size: inherit;
}

.ecm-wp-menu li.bullet-square::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: inherit;
}

.ecm-wp-menu li.bullet-circle::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: inherit;
    border-radius: 50%;
}

.ecm-wp-menu li.bullet-dash::before {
    content: '';
    width: 12px;
    height: 2px;
    background-color: inherit;
}

/* Submenús tipo popup */
.ecm-wp-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: rgba(0, 0, 0, 0.95);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 999999 !important;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    gap: 8px;
}

.ecm-wp-menu .sub-menu.sub-menu-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    min-width: 300px;
    max-width: 80vw;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.ecm-wp-menu .sub-menu.sub-menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(-10px);
}

.ecm-wp-menu .sub-menu.sub-menu-slide {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-left: 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    padding-left: 20px;
}

/* Mostrar submenús en hover */
.ecm-wp-menu li:hover > .sub-menu {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0);
}

.ecm-wp-menu li:hover > .sub-menu.sub-menu-popup {
    transform: translate(-50%, -50%) scale(1);
}

.ecm-wp-menu li:hover > .sub-menu.sub-menu-dropdown {
    transform: translateY(0);
}

/* Elementos de submenú */
.ecm-wp-menu .sub-menu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.ecm-wp-menu .sub-menu li:last-child {
    border-bottom: none;
}

.ecm-wp-menu .sub-menu a {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
}

.ecm-wp-menu .sub-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 25px;
}

/* Indicador de submenú */
.ecm-wp-menu a .eicon-chevron-down {
    margin-left: 8px;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.ecm-wp-menu li:hover > a .eicon-chevron-down {
    transform: rotate(180deg);
}

/* Redes sociales - PRIORIDAD MUY BAJA (por debajo de todo) */
.ecm-social-media {
    position: relative;
    z-index: 1 !important; /* Prioridad muy baja */
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    padding-top: 40px;
    /* Asegurar que esté por debajo del menú */
    pointer-events: none !important; /* No permitir interacción */
}

/* Enlaces sociales - PRIORIDAD MUY BAJA */
.ecm-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--ecm-secondary-color);
    text-decoration: none;
    transition: all var(--ecm-transition-duration) ease;
    position: relative;
    z-index: 1 !important; /* Prioridad muy baja */
    /* Asegurar que esté por debajo del menú */
    pointer-events: none !important; /* No permitir interacción */
}

.ecm-social-link:hover {
    background-color: var(--ecm-accent-color);
    transform: scale(1.1);
}

/* Estilos personalizados para elementos del menú */
.ecm-wp-menu li.custom-hover a:hover {
    background-color: var(--ecm-accent-color);
    color: var(--ecm-secondary-color);
}

/* Estilos para elementos con bullets personalizados */
.ecm-wp-menu li.custom-bullet::before {
    content: '▶';
    margin-right: 10px;
    color: var(--ecm-accent-color);
    transition: transform var(--ecm-transition-duration) ease;
}

.ecm-wp-menu li.custom-bullet:hover::before {
    transform: rotate(90deg);
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
    :root {
        --ecm-primary-color: #ffffff;
        --ecm-secondary-color: #333333;
        --ecm-text-color: #ffffff;
        --ecm-background-color: rgba(255, 255, 255, 0.95);
    }
    
    .ecm-menu-overlay {
        background-color: var(--ecm-background-color);
    }
    
    .ecm-menu-content {
        color: var(--ecm-text-color);
    }
    
    .ecm-wp-menu a {
        color: var(--ecm-text-color);
    }
    
    .ecm-social-link {
        color: var(--ecm-text-color);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ecm-menu-content {
        padding: 20px;
        max-width: 100%;
    }
    
    .ecm-menu-header {
        margin-bottom: 20px;
    }
    
    .ecm-logo img {
        max-width: 150px;
    }
    
    .ecm-menu-close {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
    
    .ecm-wp-menu a {
        font-size: 16px;
        padding: 12px 15px;
    }
    
    .ecm-social-media {
        gap: 15px;
        margin-top: 30px;
    }
    
    .ecm-social-link {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .ecm-menu-trigger {
        width: 40px;
        height: 40px;
    }
    
    .ecm-menu-top-right,
    .ecm-menu-bottom-right {
        right: 15px;
    }
    
    .ecm-menu-top-left,
    .ecm-menu-bottom-left {
        left: 15px;
    }
    
    .ecm-wp-menu a {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .ecm-social-media {
        gap: 12px;
        margin-top: 25px;
    }
    
    .ecm-social-link {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.3);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes slideOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.3);
        opacity: 0;
    }
}

@keyframes bounceOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    20% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.3);
        opacity: 0;
    }
}

/* Clases de animación */
.ecm-menu-overlay.animate-in {
    animation: fadeIn var(--ecm-transition-duration) ease forwards;
}

.ecm-menu-overlay.animate-out {
    animation: fadeOut var(--ecm-transition-duration) ease forwards;
}

/* Estilos adicionales para elementos personalizados */
.ecm-wp-menu li.custom-hover a:hover {
    background-color: var(--ecm-accent-color);
    color: var(--ecm-secondary-color);
}

.ecm-wp-menu li.custom-bullet::before {
    content: '▶';
    margin-right: 10px;
    color: var(--ecm-accent-color);
    transition: transform var(--ecm-transition-duration) ease;
}

.ecm-wp-menu li.custom-bullet:hover::before {
    transform: rotate(90deg);
}

/* Efectos de hover personalizables para el menú */
.ecm-wp-menu a {
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Efecto de deslizar */
.ecm-wp-menu a[data-hover-effect="slide"]:hover {
    transform: translateX(10px) !important;
}

/* Efecto de escalar */
.ecm-wp-menu a[data-hover-effect="scale"]:hover {
    transform: scale(1.05) !important;
}

/* Efecto de subrayado - TAMAÑO DEL TEXTO */
.ecm-wp-menu a[data-hover-effect="underline"]:hover::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important; /* Distancia desde el texto */
    left: 0 !important;
    width: 100% !important; /* Ancho del texto, no full width */
    height: 2px !important;
    background-color: currentColor !important;
    animation: slideInLeft 0.3s ease-out !important;
    transform-origin: left !important;
}

/* Efecto de subrayado personalizado - solo el ancho del texto */
.ecm-wp-menu a[data-hover-effect="underline"] {
    position: relative !important;
}

.ecm-wp-menu a[data-hover-effect="underline"]:hover::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important; /* Distancia desde el texto */
    left: 0 !important;
    width: 100% !important; /* 100% del ancho del texto */
    height: 2px !important;
    background-color: currentColor !important;
    animation: slideInLeft 0.3s ease-out !important;
}

/* CSS para ancho personalizado de línea */
.ecm-wp-menu a[data-hover-effect="underline"][data-line-width="full"]:hover::after {
    width: 100% !important; /* Ancho completo del contenedor */
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-width="text"]:hover::after {
    width: 100% !important; /* Ancho del texto */
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-width="custom"]:hover::after {
    width: var(--line-width, 100px) !important; /* Ancho personalizado */
}

/* Efecto de fondo */
.ecm-wp-menu a[data-hover-effect="background"]:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

/* Efecto de borde */
.ecm-wp-menu a[data-hover-effect="border"]:hover {
    border: 2px solid currentColor !important;
    border-radius: 8px !important;
}

/* Efecto de resplandor */
.ecm-wp-menu a[data-hover-effect="glow"]:hover {
    box-shadow: 0 0 20px currentColor !important;
    text-shadow: 0 0 10px currentColor !important;
}

/* Animación para el subrayado */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%) !important;
        opacity: 0 !important;
    }
    100% {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
}

/* UNDERLINE DEL TEXTO DEL MENÚ - DEJAR QUE ELEMENTOR LO CONTROLE */
.ecm-wp-menu a {
    position: relative !important;
    text-decoration: none !important;
}

/* CSS PARA UNDERLINE - DEJAR QUE ELEMENTOR LO CONTROLE */

/* Efecto de subrayado básico - DEJAR QUE ELEMENTOR LO CONTROLE */
.ecm-wp-menu a[data-hover-effect="underline"] {
    position: relative !important;
}

.ecm-wp-menu a[data-hover-effect="underline"]:hover::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    /* El color se controla desde Elementor */
    animation: slideInLeft 0.3s ease-out !important;
    transform-origin: left !important;
}

/* CSS para ancho personalizado de línea */
.ecm-wp-menu a[data-hover-effect="underline"][data-line-width="full"]:hover::after {
    width: 100% !important; /* Ancho completo del contenedor */
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-width="text"]:hover::after {
    width: 100% !important; /* Ancho del texto */
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-width="custom"]:hover::after {
    width: var(--line-width, 100px) !important; /* Ancho personalizado */
}

/* ELIMINAR COLOR FORZADO - DEJAR QUE ELEMENTOR LO CONTROLE */
/* .ecm-wp-menu a:hover::after {
    background-color: #007cba !important;
} */

/* ELIMINAR COLOR FORZADO - DEJAR QUE ELEMENTOR LO CONTROLE */
/* .ecm-wp-menu a[data-hover-effect="underline"]:hover::after {
    background-color: #007cba !important;
} */

/* ELIMINAR COLORES ESPECÍFICOS FORZADOS */
/* .ecm-wp-menu a[data-hover-effect="underline"][data-line-color="red"]:hover::after {
    background-color: #ff0000 !important;
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-color="green"]:hover::after {
    background-color: #00ff00 !important;
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-color="blue"]:hover::after {
    background-color: #0000ff !important;
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-color="yellow"]:hover::after {
    background-color: #ffff00 !important;
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-color="purple"]:hover::after {
    background-color: #800080 !important;
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-color="purple"]:hover::after {
    background-color: #800080 !important;
}

.ecm-wp-menu a[data-hover-effect="underline"][data-line-color="orange"]:hover::after {
    background-color: #ffa500 !important;
} */

/* El grosor se controla desde Elementor */

/* CSS DINÁMICO PARA UNDERLINE - USAR ATRIBUTOS DATA */
.ecm-wp-menu a[data-hover-effect="underline"]:hover::after {
    background-color: var(--line-color, #007cba) !important;
    height: var(--line-thickness, 2px) !important;
}

/* Aplicar colores específicos desde atributos data */
.ecm-wp-menu a[data-line-color]:hover::after {
    background-color: var(--line-color) !important;
}

/* Aplicar grosor específico desde atributos data */
.ecm-wp-menu a[data-line-thickness]:hover::after {
    height: calc(var(--line-thickness) * 1px) !important;
}

/* CSS para aplicar estilos CSS personalizados */
.ecm-wp-menu a[data-hover-effect="underline"]:hover::after {
    --line-color: attr(data-line-color);
    --line-thickness: attr(data-line-thickness);
}