/* ==========================================================================
   Animaciones de entrada (equivalentes a las de Elementor)
   Los elementos .anim quedan ocultos hasta que animaciones.js los activa.
   ========================================================================== */

.anim {
    visibility: hidden;
}

.anim.is-animated {
    visibility: visible;
    animation-duration: 1.25s;
    animation-fill-mode: both;
}

/* Sin JS o con movimiento reducido: todo visible y sin animación */
.no-js .anim {
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .anim,
    .anim.is-animated {
        visibility: visible;
        animation: none !important;
    }
}

.fadeInUp { animation-name: fadeInUp; }
.fadeInLeft { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }
.rotateIn { animation-name: rotateIn; }
.zoomIn { animation-name: zoomIn; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes rotateIn {
    from { opacity: 0; transform: rotate3d(0, 0, 1, -200deg); transform-origin: center; }
    to { opacity: 1; transform: translate3d(0, 0, 0); transform-origin: center; }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50% { opacity: 1; }
}