/*==================================================

            RAICES VERDES
        ANIMACIONES PROFESIONALES
              PARTE 1

====================================================*/


/*==========================
      ANIMACION GENERAL
==========================*/


.fade-in{

    animation:fadeIn 1s ease forwards;

}


@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*==========================
      ENTRADA DESDE ABAJO
==========================*/


.slide-up{

    animation:slideUp 1s ease forwards;

}



@keyframes slideUp{


    from{

        opacity:0;

        transform:translateY(50px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}



/*==========================
      ENTRADA IZQUIERDA
==========================*/


.slide-left{


    animation:slideLeft 1s ease forwards;


}



@keyframes slideLeft{


    from{


        opacity:0;

        transform:translateX(-80px);


    }


    to{


        opacity:1;

        transform:translateX(0);


    }


}



/*==========================
      ENTRADA DERECHA
==========================*/


.slide-right{


    animation:slideRight 1s ease forwards;


}



@keyframes slideRight{


    from{


        opacity:0;

        transform:translateX(80px);


    }


    to{


        opacity:1;

        transform:translateX(0);


    }


}




/*==========================
        ZOOM ENTRADA
==========================*/


.zoom-in{


    animation:zoomIn 1s ease;


}



@keyframes zoomIn{


    from{


        opacity:0;

        transform:scale(.7);


    }


    to{


        opacity:1;

        transform:scale(1);


    }


}




/*==========================
       BOTONES BRILLO
==========================*/


.btn-principal,
.btn-carrito{


    position:relative;

    overflow:hidden;


}



.btn-principal::before,
.btn-carrito::before{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:100%;


    height:100%;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.5),

    transparent

    );


    transition:.7s;


}




.btn-principal:hover::before,
.btn-carrito:hover::before{


    left:100%;


}





/*==========================
        EFECTO PULSO
==========================*/


.pulse{


    animation:pulse 2s infinite;


}



@keyframes pulse{


    0%{


        transform:scale(1);


    }


    50%{


        transform:scale(1.08);


    }


    100%{


        transform:scale(1);


    }


}





/*==========================
        FLOTAR ELEMENTOS
==========================*/


.float{


    animation:float 4s infinite ease-in-out;


}



@keyframes float{


    0%,100%{


        transform:translateY(0);


    }


    50%{


        transform:translateY(-20px);


    }


}




/*==========================
      ROTACION SUAVE
==========================*/


.rotate{


    animation:rotate 8s linear infinite;


}



@keyframes rotate{


    from{


        transform:rotate(0deg);


    }


    to{


        transform:rotate(360deg);


    }


}





/*==========================
      HOVER TARJETAS
==========================*/


.hover-card{


    transition:.4s ease;


}



.hover-card:hover{


    transform:

    translateY(-15px)

    scale(1.03);


    box-shadow:

    0 20px 40px

    rgba(0,0,0,.15);


}





/*==========================
      APARICION ESCALONADA
==========================*/


.delay-1{

    animation-delay:.2s;

}


.delay-2{

    animation-delay:.4s;

}


.delay-3{

    animation-delay:.6s;

}


.delay-4{

    animation-delay:.8s;

}




/*==========================
        LOADER INICIAL
==========================*/


.loader{


    width:60px;

    height:60px;

    border-radius:50%;

    border:6px solid #dcedc8;

    border-top-color:var(--verdePrincipal);

    animation:girar 1s linear infinite;


}



@keyframes girar{


    from{


        transform:rotate(0);


    }


    to{


        transform:rotate(360deg);


    }


}




/*==========================
        HOVER IMAGEN
==========================*/


.zoom-img{


    overflow:hidden;


}



.zoom-img img{


    transition:.6s ease;


}



.zoom-img:hover img{


    transform:scale(1.15);


}