/* Configuración base con variables nativas de Elementor */
.nexus-aurora-active {
    --aurora-entrance: 0.9s;
    --aurora-exit: 0.6s;
}

/* El botón debe encapsular al elemento hijo (stacking context y desborde) */
.nexus-aurora-active .elementor-button {
    position: relative !important;
    overflow: hidden !important;
    /* Crea un stacking context para que el z-index interior se respete 100% */
    transform: translate3d(0,0,0);
}

/* Base de la bola de color expansiva */
.nexus-aurora-active .nexus-fill {
    position: absolute;
    display: block;
    width: 2000px;
    height: 2000px;
    margin-left: -1000px; /* Centramos el origen exacto sobre X e Y */
    margin-top: -1000px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3A5AFF 0%, #5674FF 50%, #3A5AFF 100%);
    background-size: 200% 200%;
    
    transform: scale(0);
    /* z-index: 0 asegura que pinta POR ENCIMA del background (color o gradiente) del botón, pero por DEBAJO de las letras */
    z-index: 0;
    pointer-events: none;

    /* Transición de salida */
    transition: transform var(--aurora-exit, 0.6s) ease-out;
}

/* Expansión al pasar el ratón */
.nexus-aurora-active .elementor-button:hover .nexus-fill {
    transform: scale(1);
    /* Transición de entrada */
    transition: transform var(--aurora-entrance, 0.9s) ease-in-out;
    animation: auroraNexusAnim 4s ease infinite;
}

@keyframes auroraNexusAnim {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Forzamos que las letras e iconos siempre estén visibles POR ENCIMA del efecto */
.nexus-aurora-active .elementor-button-content-wrapper,
.nexus-aurora-active .elementor-button-text,
.nexus-aurora-active .elementor-button-icon {
    position: relative;
    z-index: 2; 
}