/* Animaciones generales para módulos */
.animate-on-load {
    opacity: 0; /* Comienza invisible */
    transform: translateY(20px); /* Comienza un poco abajo para slide-in */
    animation: fadeInUp 0.8s ease-out forwards; /* Animación de 0.8s */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Opcional: Animación alternativa, como zoom-in */
.animate-zoom {
    opacity: 0;
    transform: scale(0.95);
    animation: zoomIn 0.6s ease-in forwards;
}

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

/* Para retrasar animaciones en elementos secuenciales (ej. cards en una lista) */
.animate-on-load:nth-child(2) {
    animation-delay: 0.2s;
}
.animate-on-load:nth-child(3) {
    animation-delay: 0.4s;
}
/* Y así sucesivamente para más elementos */