/* Estado inicial: elemento oculto para animaciones al scroll */
.wps-scroll-animation.wps-animation-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Mantener oculto hasta que esté listo para animar */
.wps-scroll-animation:not(.animate__animated) {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Solo cuando tiene clases de animate.css aplicadas */
.wps-scroll-animation.animate__animated {
    visibility: visible !important;
    /* Permitir que animate.css controle la opacity */
}

/* Estado final después de la animación */
.wps-scroll-animation.wps-animation-completed {
    opacity: 1 !important;
    visibility: visible !important;
}