/*======================================================
ANIMATIONS.CSS
======================================================*/

/* ================================
   Fade Up
================================ */

.fade-up{

opacity:0;

transform:translateY(60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/* ================================
   Fade Down
================================ */

.fade-down{

opacity:0;

transform:translateY(-60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-down.show{

opacity:1;

transform:translateY(0);

}

/* ================================
   Fade Left
================================ */

.fade-left{

opacity:0;

transform:translateX(-60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-left.show{

opacity:1;

transform:translateX(0);

}

/* ================================
   Fade Right
================================ */

.fade-right{

opacity:0;

transform:translateX(60px);

transition:
opacity .8s ease,
transform .8s ease;

}

.fade-right.show{

opacity:1;

transform:translateX(0);

}

/* ================================
   Zoom
================================ */

.zoom{

opacity:0;

transform:scale(.85);

transition:
opacity .8s ease,
transform .8s ease;

}

.zoom.show{

opacity:1;

transform:scale(1);

}

/* ================================
   Hero
================================ */

.hero-logo{

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

}

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.hero h1{

animation:titleUp 1s ease;

}

@keyframes titleUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.hero p{

animation:paragraphUp 1.3s ease;

}

@keyframes paragraphUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.hero-buttons{

animation:buttonsUp 1.6s ease;

}

@keyframes buttonsUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ================================
   Cards
================================ */

.card{

transition:
transform .35s,
box-shadow .35s;

}

.card:hover{

transform:
translateY(-12px);

}

.card:hover .icon{

transform:
rotate(8deg)
scale(1.08);

}

.card .icon{

transition:.35s;

}

/* ================================
   Advantage Cards
================================ */

.advantage-card{

transition:
all .35s;

}

.advantage-card:hover{

transform:
translateY(-12px);

}

.advantage-card:hover .number{

color:var(--primary);

}

/* ================================
   Steps
================================ */

.step{

transition:.35s;

}

.step:hover{

transform:translateY(-10px);

}

.step:hover .step-circle{

transform:scale(1.12);

}

.step-circle{

transition:.35s;

}

/* ================================
   Partners
================================ */

.partner-logo img{

transition:
filter .35s,
transform .35s;

}

.partner-logo:hover img{

transform:
scale(1.08);

}

/* ================================
   FAQ
================================ */

.faq-item{

transition:
all .35s;

}

.faq-question{

transition:.35s;

}

.faq-question:hover{

background:#f7f9fc;

}

/* ================================
   Buttons
================================ */

.btn-primary,
.btn-secondary,
.btn-menu{

transition:
all .35s ease;

}

.btn-primary:hover{

transform:
translateY(-5px)
scale(1.02);

}

.btn-secondary:hover{

transform:
translateY(-5px);

}

.btn-menu:hover{

transform:
translateY(-3px);

}

/* ================================
   Navbar
================================ */

#header{

transition:
background .35s,
padding .35s,
box-shadow .35s;

}

/* ================================
   WhatsApp
================================ */

.whatsapp-float{

animation:
pulseWhats 2s infinite;

}

@keyframes pulseWhats{

0%{

box-shadow:
0 0 0 0 rgba(26,177,95,.5);

}

70%{

box-shadow:
0 0 0 18px rgba(26,177,95,0);

}

100%{

box-shadow:
0 0 0 0 rgba(26,177,95,0);

}

}

/* ================================
   Footer Links
================================ */

.footer-grid a{

transition:.3s;

}

.footer-grid a:hover{

padding-left:6px;

}

/* ================================
   Scroll Progress (caso use)
================================ */

.progress-bar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(
90deg,
var(--secondary),
var(--primary)
);

z-index:99999;

transition:width .15s linear;

}

/* ================================
   Disable animations
================================ */

@media(prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}