/* ============================
   Animaciones para BLOQUES
============================ */
@keyframes fadeInRise {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes zoomInSutil {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-up {
    animation: fadeInRise 0.8s ease-out forwards;
}
.animate-slide-in-right { 
    animation: slideInRight 0.6s ease-out forwards;
}
.animate-zoom-in {
    animation: zoomInSutil 0.8s ease-out forwards;
}

/* ============================
   Animaciones para TARJETAS
============================ */
@keyframes fadeInCard {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomInCard {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-up-card {
    animation: fadeInCard 0.8s ease-out forwards;
}
.animate-zoom-in-card {
    animation: zoomInCard 0.8s ease-out forwards;
}

/* ============================
   Utilidades comunes
============================ */
.initial-hidden {
    opacity: 0;
}

.step-circle {
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem; /* sm */
}