.animated{
    opacity: 0;
}

/* Linea centro ------------ */
.animatedLCenter::after{
    content: "";
    width: 0%;
    opacity: 0;
    height: 3px;
    background-color: var(--rojo);
    display: block;
    position: absolute;
    inset-inline: 0;
    margin: auto;
    transition: 400ms ease-in-out;
}
.animatedLineCenter::after{
    opacity: 1;
    width: 90%;
}

/* Fade Top ------------ */
.animatedFadeUp{
    animation: fadeUp 400ms ease-in-out 0s 1 normal;
    opacity: 1;
}
@keyframes fadeUp {
    from {
        transform: translateY(-70px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* Fade Right ------------ */
.animatedFadeRight{
    animation: fadeRight 400ms ease-in-out 0s 1 normal;
    opacity: 1;
}
@keyframes fadeRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* Fade Bottom ------------ */
.animatedFadeDown{
    animation: fadeDown 400ms ease-in-out 0s 1 normal;
    opacity: 1;
}
@keyframes fadeDown {
    from {
        transform: translateY(70px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* Fade Left ------------ */
.animatedFadeLeft{
    animation: fadeLeft 400ms ease-in-out 0s 1 normal;
    opacity: 1;
}
@keyframes fadeLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}


/* Rotar Left ------------ */
.animatedRotateLeft{
    animation: rotateLeft 400ms ease-in-out 0s 1 normal;
    opacity: 1;
}
@keyframes rotateLeft {
    from {
        transform: rotate(25deg);
        opacity: 0;
    }
    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}