/* ------------------------------------------------------------------------*/
/* --------------------- MECANISMOS DE CADA ANIMACIÓN ---------------------*/
/* ------------------------------------------------------------------------*/

/*-Hacer Invisible la Barra de desplazamiento Horizontal-*/
html {overflow-x: hidden; overflow-y: auto; width: 100%}
body {min-width: 100%}/*Pone ancho min al contenido pa evitar desborda horizontal*/

/*-Quel Usuario no pueda desplazarse con dedo a los lados de la web (en movil)-*/
body {overflow-x: hidden; overflow-y: auto}

/*TODAS LAS ANIMACIONES*/
.entra-izquierda {animation: entrando-izquierda 2s ease forwards}
@keyframes entrando-izquierda {
    0% { transform: translateX(-110%); opacity: 0}
    100% { transform: translateX(0%); opacity: 1}
}

.entra-derecha {animation: entrando-derecha 2s ease forwards}
@keyframes entrando-derecha {
    0% { transform: translateX(110%); opacity: 0}
    100% { transform: translateX(0%); opacity: 1}
}

.entra-arriba {animation: entrando-arriba 1s ease forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.entra-abajo {animation: entrando-abajo 1s ease forwards}
@keyframes entrando-abajo {
    0% { transform: translateY(110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.aparece {animation: apareciendo 1.2s ease forwards}
@keyframes apareciendo {
    0% { opacity: 0}
    100% { opacity: 1}
}

.crece {animation: creciendo 2.2s ease 0.2s both;}
@keyframes creciendo {
    0% { transform: scale(0); opacity: 0}
    100% { transform: scale(1); opacity: 1}
}

.gira {animation: girando 1s ease forwards}
@keyframes girando {
    0% { transform: rotate(-200deg); opacity: 0}
    100% { transform: rotate(-0deg); opacity: 1}
}

.voltea-vertical {animation: flip-vertical 1s ease-in-out forwards}
@keyframes flip-vertical {
    0% { transform: perspective(1500px) rotateY(90deg) scaleX(1.4); opacity: 0}
    100% { transform: perspective(1500px) rotateY(0deg) scaleX(1); opacity: 1}
}

.voltea-horizontal {animation: flip-horizontal 1s ease-in-out forwards}
@keyframes flip-horizontal {
    0% { transform: perspective(1000px) rotateX(90deg) scaleY(1.4); opacity: 0}
    100% { transform: perspective(1000px) rotateX(0deg) scaleY(1); opacity: 1}
}



.entra-arriba-nueve {animation: entrando-arriba 2s ease forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.entra-arriba-diez {animation: entrando-arriba 2.5s ease forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.entra-arriba-once {animation: entrando-arriba 3s ease forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}





.entra-arriba-catorce {animation: entrando-arriba 1s ease forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.entra-arriba-quince {animation: entrando-arriba 1.5s ease forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.entra-arriba-dieciseis {animation: entrando-arriba 2s ease forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.entra-arriba-diecisiete {animation: entrando-arriba 2.5s ease forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}

.entra-arriba-dieciocho {animation: entrando-arriba 3s ease forwards}
@keyframes entrando-arriba {
    0% { transform: translateY(-110%); opacity: 0}
    100% { transform: translateY(0%); opacity: 1}
}




.entra-derecha-diecinueve {animation: entrando-derecha-diecinueve 2s ease 1s forwards}
@keyframes entrando-derecha-diecinueve {
    0% { transform: translateX(65%); opacity: 0}
    100% { transform: translateX(0%); opacity: 1}
}

.crece-veintitres {animation: creciendo-veintitres 1.8s ease both;}
@keyframes creciendo-veintitres {
    0% { transform: scale(0); opacity: 0}
    100% { transform: scale(1); opacity: 1}
}

.entra-izquierda-veinte {animation: entrando-izquierda-veinte 2s ease 1s forwards}
@keyframes entrando-izquierda-veinte {
    0% { transform: translateX(-65%); opacity: 0}
    100% { transform: translateX(0%); opacity: 1}
}




.aparece-veintidos {animation: apareciendo-veintidos 2s ease forwards}
@keyframes apareciendo-veintidos {
    0% { opacity: 0}
    100% { opacity: 1}
}


















/* ------------------------------------------------------------------------*/
/* ------------------ QUÉ DIV "anim" TIENE QUÉ ANIMACIÓN ------------------*/
/* --------------------- aquí están sus estados base ----------------------*/
/* ------------------------------------------------------------------------*/

/*Pa aplicarle "aparece"*/
.anim1 {opacity: 0}

/*Pa aplicarle "crece"*/
.anim2 {transform: scale(0); opacity: 0}

/*Pa aplicarle "aparece"*/
.anim3 {opacity: 0}

/*Pa aplicarle "voltea-vertical"*/
.anim4 {transform: perspective(1500px) rotateY(90deg) scaleX(1.4); opacity: 0;
transform-origin: center center; backface-visibility: hidden}

/*Pa aplicarle "entra-izquierda"*/
.anim5 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-derecha"*/
.anim6 {transform: translateX(110%); opacity: 0}

/*Pa aplicarle "entra-izquierda"*/
.anim7 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-derecha"*/
.anim8 {transform: translateX(110%); opacity: 0}


/*Pa aplicarle "entra-arriba"*/
.anim9 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-arriba"*/
.anim10 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-arriba"*/
.anim11 {transform: translateX(-110%); opacity: 0}


/*Pa aplicarle "entra-izquierda"*/
.anim12 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-derecha"*/
.anim13 {transform: translateX(110%); opacity: 0}




/*Pa aplicarle "entra-arriba"*/
.anim14 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-arriba"*/
.anim15 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-arriba"*/
.anim16 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-arriba"*/
.anim17 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-arriba"*/
.anim18 {transform: translateX(-110%); opacity: 0}



/*Pa aplicarle "entra-izquierda"*/
.anim19 {transform: translateX(-110%); opacity: 0}

/*Pa aplicarle "entra-derecha"*/
.anim20 {transform: translateX(110%); opacity: 0}


/*Pa aplicarle "entra-izquierda"*/
.anim21 {transform: translateX(-110%); opacity: 0}


/*Pa aplicarle "aparece"*/
.anim22 {opacity: 0}


/*Pa aplicarle "crece"*/
.anim23 {transform: scale(0); opacity: 0}

/*Pa aplicarle "crece"*/
.anim24 {transform: scale(0); opacity: 0}