/* ===========================
   INICIO: INDEX
   Descripción: Archivo comentado para identificar claramente el propósito general y los bloques internos de lógica/estilos.
=========================== */

@keyframes fade-in-up-left {
    0% {
        opacity: 0;
        transform: translateY(40px) translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

.animate-fade-in-up-left {
    animation: fade-in-up-left 0.9s ease-out forwards;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 1s ease-out forwards;
}

.animate-fade-in {
    animation: fade-in 1.2s ease-out forwards;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-left {
    animation: slide-in-left 1s ease-out forwards;
}

.animate-slide-in-right {
    animation: slide-in-right 1s ease-out forwards;
}

.reveal {
    opacity: 0;
}

/* ===========================
   FIN: INDEX
=========================== */