/* ------------------------------------------------------------------------*/
/* --------------------- 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-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}
}

















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

/*Pa aplicarle "aparece"*/
.anim1 {opacity: 0}
.anim2 {opacity: 0}
.anim-portada {opacity: 0}
.anim10 {opacity: 0}
.anim11 {opacity: 0}
.anim12 {opacity: 0}
.anim13 {opacity: 0}
.anim14 {opacity: 0}
.anim15 {opacity: 0}
.anim16 {opacity: 0}
.anim17 {opacity: 0}
.anim18 {opacity: 0}
.anim19 {opacity: 0}
.anim22 {opacity: 0}
.anim23 {opacity: 0}
.anim24 {opacity: 0}
.anim25 {opacity: 0}
.single .articulocompleto {opacity: 0}

/*Pa aplicarle "entra-izquierda"*/
.anim3 {transform: translateX(-110%); opacity: 0}
.anim20 {transform: translateX(-110%); opacity: 0}
.single .woocommerce-product-gallery {transform: translateX(-110%); opacity: 0}

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

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

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

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

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

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

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