/* ------------------------------------------------------------------------*/
/* --------------------- 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 1s ease-in forwards}
@keyframes entrando-izquierda {
    0% { transform: translateX(-110%); opacity: 0}
    100% { transform: translateX(0%); opacity: 1}
}

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

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

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

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

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

.gira {animation: girando 1s ease-in forwards}
@keyframes girando {
    0% { transform: rotate(-200deg); opacity: 0}
    100% { transform: rotate(-0deg); 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}
}


.voltea-vertical-seis {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-vertical-siete {animation: flip-vertical 1.4s 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-vertical-ocho {animation: flip-vertical 1.8s 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-vertical-nueve {animation: flip-vertical 2.2s 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}
}











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

/*------ ANIMACIONES DE "INDEX"*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



/*------ ANIMACIONES DE "PROYECTOS"*/

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

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

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

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

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

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

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

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

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