/* =====================================
   RESET
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Poppins', sans-serif;

    color:#222;

    background:#fff;

    line-height:1.6;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


/* =====================================
   VARIÁVEIS
===================================== */


:root{

    --primary:#00b14f;

    --primary-dark:#008f3e;

    --dark:#151515;

    --gray:#666;

    --light:#f5f8f6;

    --white:#fff;

}



/* =====================================
   CONTAINER
===================================== */


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}



/* =====================================
   TOP BAR
===================================== */


.top-bar{

    height:42px;

    background:var(--dark);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:500;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:2000;

}



/* =====================================
   HEADER
===================================== */


header{

    background:white;

    position:sticky;

    top:42px;

    z-index:1000;

}



.header-content{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo img{

    width:170px;

    height:77px;

    display:block;

}


nav{

    display:flex;

    gap:35px;

}



nav a{

    font-weight:500;

    color:#444;

    transition:.3s;

}



nav a:hover{

    color:var(--primary);

}



.header-btn{

    background:var(--primary);

    color:white;

    padding:13px 25px;

    border-radius:40px;

    font-weight:700;

}



/* =====================================
   BOTÕES
===================================== */


.cta{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:18px 40px;

    background:var(--primary);

    color:white;

    border-radius:50px;

    font-weight:800;

    transition:.3s;

    box-shadow:0 15px 30px rgba(0,177,79,.25);

}



.cta:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}



/* =====================================
   HERO
===================================== */


.hero{

    padding:90px 0;

    background:

    linear-gradient(
        135deg,
        #ffffff,
        #effaf3
    );

    overflow:hidden;

}



.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}



.badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:#e8fff0;

    color:var(--primary);

    font-weight:700;

    margin-bottom:25px;

}



.hero h1{

    font-size:52px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;

}



.hero p{

    font-size:20px;

    color:var(--gray);

    margin-bottom:35px;

}



.benefits-mini{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-bottom:35px;

}



.benefits-mini div{

    background:white;

    padding:15px;

    border-radius:15px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.05);

}



.hero-product{

    position:relative;

    display:flex;

    justify-content:center;

}



.hero-product img{

    width:420px;

    position:relative;

    z-index:2;

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

}



.product-glow{

    position:absolute;

    width:400px;

    height:400px;

    background:

    radial-gradient(

    circle,

    rgba(0,177,79,.25),

    transparent 70%

    );

    border-radius:50%;

}



/* =====================================
   SEÇÕES
===================================== */


section{

    padding:90px 0;

}



h2{

    text-align:center;

    font-size:40px;

    margin-bottom:50px;

    font-weight:800;

}



/* =====================================
   BENEFÍCIOS
===================================== */


.benefits{

    background:#fafafa;

}



.cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.card{

    background:white;

    padding:35px;

    border-radius:25px;

    text-align:center;

    box-shadow:

    0 15px 35px rgba(0,0,0,.07);

    transition:.3s;

}



.card:hover{

    transform:translateY(-10px);

}



.card h3{

    color:var(--primary);

    margin-bottom:15px;

}



/* =====================================
   COMO FUNCIONA
===================================== */


.steps{

    background:white;

}



.steps-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.steps-grid div{

    background:#f7f7f7;

    padding:40px;

    text-align:center;

    border-radius:25px;

}



.steps-grid span{

    display:flex;

    width:70px;

    height:70px;

    background:var(--primary);

    color:white;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    margin:auto auto 20px;

    font-size:30px;

    font-weight:800;

}



/* =====================================
   OFERTA
===================================== */


.offer{

    background:#f3faf5;

}



.offer-box{

    max-width:500px;

    margin:auto;

    background:white;

    padding:50px;

    border-radius:30px;

    text-align:center;

    box-shadow:

    0 20px 50px rgba(0,0,0,.1);

}



.offer-box h3{

    font-size:32px;

}



.price{

    font-size:50px;

    color:var(--primary);

    font-weight:800;

    margin:25px 0;

}



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


.faq{

    background:#fafafa;

}



.faq-item{

    background:white;

    border-radius:15px;

    margin-bottom:20px;

    overflow:hidden;

}



.faq-item button{

    width:100%;

    border:none;

    background:white;

    text-align:left;

    padding:22px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

}



.answer{

    display:none;

    padding:0 22px 22px;

    color:#666;

}



/* =====================================
   FOOTER
===================================== */

footer{

    background:#111;

    color:white;

    margin-top:80px;

}

.footer-content{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:50px;

    padding:60px 0;

}

.footer-section h3{

    margin-bottom:20px;

    color:#00b14f;

    font-size:20px;

}

.footer-section p{

    margin-bottom:15px;

    color:#d8d8d8;

    line-height:1.8;

}

.footer-section a{

    color:white;

    transition:.3s;

}

.footer-section a:hover{

    color:#00b14f;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    padding:20px;

    color:#aaa;

    font-size:14px;

}

/* =====================================
   BOTÃO VOLTAR AO TOPO
===================================== */


.back-top{

position:fixed;

right:20px;

bottom:20px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#00b14f;

color:white;

font-size:25px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9999;

box-shadow:

0 10px 25px rgba(0,0,0,.2);

}


.back-top.show{

opacity:1;

visibility:visible;

}


.back-top:hover{

transform:translateY(-5px);

}

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


.faq-item button{

display:flex;

justify-content:space-between;

align-items:center;

}



.faq-icon{

font-size:28px;

font-weight:400;

color:#00b14f;

transition:.3s;

}



.answer{

display:block;

max-height:0;

overflow:hidden;

padding:0 22px;

transition:

max-height .4s ease,

padding .4s ease;

}



.faq-item.open .answer{

padding:

0 22px 22px;

}



.faq-item.open .faq-icon{

transform:rotate(180deg);

}



.faq-item{

transition:.3s;

}



.faq-item:hover{

box-shadow:

0 10px 30px rgba(0,0,0,.08);

}

/* =====================================
   COUNTDOWN
===================================== */


.countdown-box{

margin:30px 0;

background:#111;

color:white;

padding:25px;

border-radius:20px;

}



.countdown-box p{

margin-bottom:20px;

font-weight:600;

}



.countdown{

display:flex;

justify-content:center;

gap:15px;

}



.countdown div{

background:white;

color:#111;

width:80px;

height:80px;

border-radius:15px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}



.countdown strong{

font-size:28px;

color:#00b14f;

}



.countdown span{

font-size:12px;

color:#666;

}



@media(max-width:500px){


.countdown{

gap:8px;

}


.countdown div{

width:65px;

height:70px;

}


.countdown strong{

font-size:22px;

}



}

/* =====================================
   TESTIMONIALS
===================================== */


.testimonials{

background:#fafafa;

}



.testimonial-slider{

display:flex;

align-items:center;

gap:20px;

}



.slider-window{

overflow:hidden;

width:100%;

}



.slider-track{

display:flex;

transition:.5s ease;

}



.testimonial-card{

min-width:100%;

background:white;

padding:45px;

border-radius:25px;

text-align:center;

box-shadow:

0 15px 40px rgba(0,0,0,.08);

}



.stars{

font-size:30px;

color:#ffc107;

margin-bottom:20px;

}



.testimonial-card p{

font-size:18px;

color:#555;

margin-bottom:25px;

font-style:italic;

}



.testimonial-card h3{

margin-bottom:5px;

}



.testimonial-card span{

color:#777;

font-size:14px;

}



.slider-btn{

width:50px;

height:50px;

border-radius:50%;

border:none;

background:#00b14f;

color:white;

font-size:25px;

cursor:pointer;

flex-shrink:0;

transition:.3s;

}



.slider-btn:hover{

transform:scale(1.1);

}



.slider-dots{

display:flex;

justify-content:center;

gap:10px;

margin-top:30px;

}



.slider-dot{

width:12px;

height:12px;

border-radius:50%;

background:#ccc;

cursor:pointer;

}



.slider-dot.active{

background:#00b14f;

}




@media(max-width:600px){


.slider-btn{

width:40px;

height:40px;

font-size:20px;

}


.testimonial-card{

padding:30px 20px;

}


}

/* =====================================
   PRODUTOS DE OFERTA
===================================== */


.products-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:40px;

max-width:900px;

margin:auto;

}



.product-card{

background:white;

border-radius:30px;

padding:40px;

text-align:center;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

position:relative;

transition:.3s;

}



.product-card:hover{

transform:translateY(-10px);

}



.product-card img{

height:260px;

margin:auto;

object-fit:contain;

}



.product-card h3{

font-size:30px;

margin:20px 0 10px;

}



.product-card p{

color:#666;

}



.product-card ul{

list-style:none;

margin:25px 0;

text-align:left;

}



.product-card li{

padding:8px 0;

}



.featured-product{

border:3px solid #00b14f;

transform:scale(1.05);

}



.featured-product:hover{

transform:scale(1.05) translateY(-10px);

}



.tag{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:#00b14f;

color:white;

padding:8px 20px;

border-radius:30px;

font-weight:700;

font-size:13px;

}

/* =====================================
   CLIENTE DO DEPOIMENTO
===================================== */


.customer-info{

display:flex;

align-items:center;

justify-content:center;

gap:15px;

margin-top:30px;

}



.customer-info img{

width:65px;

height:65px;

border-radius:50%;

object-fit:cover;

border:3px solid #00b14f;

}



.customer-info h3{

margin:0;

font-size:18px;

text-align:left;

}



.customer-info span{

display:block;

font-size:14px;

color:#777;

text-align:left;

}