@keyframes slideDown {
    0% {
        opacity: 0.05;
        transform: translateY(-2px); /* Empuja el círculo hacia arriba al principio */
    }

    50% {
        opacity: 0.5;
        transform: translateY(-1px); /* Empuja el círculo hacia arriba al principio */
    }

    100% {
        opacity: 1;
        transform: translateY(0); /* Devuelve el círculo a su posición original */
    }
}

.circle {
    animation: slideDown 1s ease forwards; /* La animación durará 0.5s */
}

@keyframes slideDownLine {
    0% {
        opacity: 0.05;
        transform: translateY(-2px); /* Empuja el círculo hacia arriba al principio */
    }

    50% {
        opacity: 0.5;
        transform: translateY(-1px); /* Empuja el círculo hacia arriba al principio */
    }

    100% {
        opacity: 1;
        transform: translateY(0); /* Devuelve el círculo a su posición original */
    }
}

.line {
    animation: slideDown 1s ease forwards; /* La animación durará 0.5s */
}