/* Animación de desvanecimiento desde la izquierda */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación de desvanecimiento desde la derecha */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación de desvanecimiento general */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px); /* Inicia más arriba */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Llega a su posición original */
    }
}


/* Animación para la imagen que aparece desde la izquierda */
.index1 .logo {
    opacity: 0;
    transform: translateX(-100px); /* Comienza desde la izquierda */
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Animación de la imagen para que se desplace desde la izquierda */
.index1 .logo.animate-left {
    animation-name: fadeInLeft;
}

/* Animación para h1 y p de index1 */
.index1 h1, .index1 p, .index1-form {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.index1 h1.animate-fade, .index1 p.animate-fade,.index1 .index1-form.animate-fade {
    animation-name: fadeIn;
}

/* Animación para h1 y p de index2 */
.index2 h1, .index2 p {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
}


.index2 h1.animate-left, .index2 p.animate-left {
    animation-name: fadeInLeft;
}

/* Animación para h1 y p de index3 */
.index3 h1 {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.index3 h1.animate-right {
    animation-name: fadeInRight;
}

.cards-container .card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

/* Retrasar la animación para cada tarjeta */
.cards-container .card:nth-child(1) {
    animation-delay: 0.2s;
}

.cards-container .card:nth-child(2) {
    animation-delay: 0.4s;
}

.cards-container .card:nth-child(3) {
    animation-delay: 0.6s;
}

.cards-container .card2 {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInDown 0.8s ease forwards;
}

/* Retrasar la animación para cada tarjeta */
.cards-container .card2:nth-child(1) {
    animation-delay: 0.2s;
}

.cards-container .card2:nth-child(2) {
    animation-delay: 0.4s;
}

.cards-container .card2:nth-child(3) {
    animation-delay: 0.6s;
}

.index4 h1, .index4 h2, .index4 .button-container {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.index4 h1.animate-fade, .index4 h2.animate-fade, .index4 .button-container.animate-fade {
    animation-name: fadeIn;
}

/* Animación para h1 y p de index5 */
.index5 h1, .index5 p {
    opacity: 0;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.index5 h1.animate-left, .index5 p.animate-left {
    animation-name: fadeInLeft;
}