/* ==========================================
   PRIME CHOICE WELLNESS
   PREMIUM CSS
========================================== */

:root{

--primary:#028090;
--secondary:#00A896;
--accent:#F25C54;

--dark:#081C24;
--text:#344054;
--white:#FFFFFF;
--light:#F7FAFC;

--radius:18px;

--shadow:
0 15px 40px rgba(0,0,0,.08);

--transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:#F8FBFD;

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

.container{

width:90%;
max-width:1200px;

margin:auto;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

background:rgba(255,255,255,.92);

backdrop-filter:blur(12px);

z-index:999;

box-shadow:0 5px 20px rgba(0,0,0,.05);

transition:var(--transition);

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

}

.logo{

font-size:30px;

font-weight:800;

color:var(--primary);

text-decoration:none;

}

.logo span{

color:var(--accent);

}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav a{

text-decoration:none;

font-weight:600;

color:#23343D;

transition:var(--transition);

}

nav a:hover{

color:var(--primary);

}

.header-btn{

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

padding:14px 26px;

border-radius:50px;

color:#fff;

text-decoration:none;

font-weight:700;

transition:var(--transition);

}

.header-btn:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

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

.hero{

padding-top:180px;

padding-bottom:100px;

background:

linear-gradient(

135deg,

#ECFFFF,

#F8FBFD

);

}

.hero-grid{

display:grid;

grid-template-columns:

1fr 1fr;

align-items:center;

gap:70px;

}

.badge{

display:inline-block;

background:#D8FFF7;

color:var(--primary);

padding:10px 18px;

border-radius:50px;

font-weight:700;

margin-bottom:25px;

}

.hero h1{

font-size:62px;

line-height:1.1;

font-weight:800;

color:var(--dark);

margin-bottom:25px;

}

.hero p{

font-size:20px;

margin-bottom:35px;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

}

.btn-primary{

background:

linear-gradient(

135deg,

var(--accent),

#ff8364

);

padding:18px 34px;

border-radius:50px;

color:#fff;

text-decoration:none;

font-weight:700;

transition:.3s;

display:inline-block;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 20px 45px rgba(242,92,84,.35);

}

.btn-secondary{

border:2px solid var(--primary);

padding:18px 34px;

border-radius:50px;

text-decoration:none;

font-weight:700;

color:var(--primary);

transition:.3s;

}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

}

.hero-stats{

display:flex;

gap:50px;

margin-top:20px;

}

.hero-stats h2{

font-size:36px;

color:var(--primary);

}

.hero-stats p{

font-size:15px;

margin-top:5px;

}

.hero-image img{

width:100%;

animation:float 4s ease infinite;

}

/* ================= BRANDS ================= */

.brands{

padding:60px 0;

background:#fff;

text-align:center;

}

.brands p{

font-weight:700;

margin-bottom:30px;

color:#667085;

}

.brand-grid{

display:grid;

grid-template-columns:

repeat(5,1fr);

gap:20px;

}

.brand-grid div{

padding:25px;

background:#F8FAFC;

border-radius:14px;

font-weight:700;

box-shadow:var(--shadow);

}

/* ================= ABOUT ================= */

.about{

padding:110px 0;

}

.about-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:70px;

align-items:center;

}

.about img{

width:100%;

border-radius:20px;

box-shadow:var(--shadow);

}

.section-tag{

display:inline-block;

background:#D8FFF7;

padding:10px 18px;

border-radius:30px;

font-weight:700;

color:var(--primary);

margin-bottom:18px;

}

.about h2{

font-size:46px;

margin-bottom:20px;

color:var(--dark);

}

.about p{

margin-bottom:18px;

font-size:18px;

}

@keyframes float{

0%{transform:translateY(0);}

50%{transform:translateY(-18px);}

100%{transform:translateY(0);}

}
/* ==========================================
   BENEFITS
========================================== */

.benefits{
padding:110px 0;
background:#fff;
}

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title span{
display:inline-block;
background:#D8FFF7;
padding:10px 18px;
border-radius:30px;
color:var(--primary);
font-weight:700;
margin-bottom:18px;
}

.section-title h2{
font-size:46px;
color:var(--dark);
margin-bottom:20px;
}

.section-title p{
max-width:700px;
margin:auto;
font-size:18px;
}

.benefit-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

.benefit-card{
background:#fff;
padding:40px;
border-radius:20px;
box-shadow:var(--shadow);
transition:var(--transition);
border:1px solid #edf2f7;
}

.benefit-card:hover{
transform:translateY(-10px);
}

.icon{
font-size:48px;
margin-bottom:20px;
}

.benefit-card h3{
margin-bottom:15px;
color:var(--dark);
}

/* ==========================================
   HOW
========================================== */

.how{
padding:110px 0;
background:#F8FBFD;
}

.steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}

.step{
background:white;
padding:40px;
border-radius:20px;
box-shadow:var(--shadow);
text-align:center;
}

.step span{
display:inline-flex;
align-items:center;
justify-content:center;
width:70px;
height:70px;
border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:white;
font-size:28px;
font-weight:bold;
margin-bottom:20px;
}

/* ==========================================
   PRODUCT
========================================== */

.product{
padding:110px 0;
background:white;
}

.product-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.product img{
width:100%;
max-width:450px;
display:block;
margin:auto;
}

.product ul{
margin:25px 0;
padding-left:20px;
}

.product li{
margin-bottom:12px;
}

/* ==========================================
   REVIEWS
========================================== */

.reviews{
padding:110px 0;
background:#F8FBFD;
}

.review-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.review{
background:white;
padding:35px;
border-radius:20px;
box-shadow:var(--shadow);
}

.review h4{
margin-top:20px;
color:var(--primary);
}

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

.faq{
padding:110px 0;
background:white;
}

.faq-item{
padding:30px;
margin-bottom:25px;
border-radius:16px;
background:#F8FBFD;
box-shadow:var(--shadow);
}

.faq-item h3{
margin-bottom:15px;
color:var(--dark);
}

/* ==========================================
   CTA
========================================== */

.final-cta{
padding:120px 0;
text-align:center;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:white;
}

.final-cta h2{
font-size:48px;
margin-bottom:20px;
}

.final-cta p{
font-size:20px;
margin-bottom:35px;
}

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

footer{
background:#081C24;
padding:70px 0;
text-align:center;
color:white;
}

.footer-logo{
font-size:32px;
font-weight:800;
margin-bottom:20px;
}

/* ==========================================
   RESPONSIVO
========================================== */

@media(max-width:991px){

.hero-grid,
.about-grid,
.product-grid,
.benefit-grid,
.review-grid,
.steps{
grid-template-columns:1fr;
}

.hero{
text-align:center;
}

.hero h1{
font-size:42px;
}

.hero-buttons{
flex-direction:column;
}

.hero-stats{
justify-content:center;
flex-wrap:wrap;
}

.brand-grid{
grid-template-columns:repeat(2,1fr);
}

nav{
display:none;
}

.header-btn{
display:none;
}

.section-title h2{
font-size:34px;
}

.about h2{
font-size:34px;
}

.final-cta h2{
font-size:34px;
}

}

@media(max-width:600px){

.container{
width:94%;
}

.hero{
padding-top:140px;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:17px;
}

.btn-primary,
.btn-secondary{
width:100%;
text-align:center;
}

.brand-grid{
grid-template-columns:1fr;
}

}

/* ==========================================
   ANIMAÇÕES
========================================== */

.reveal{
opacity:0;
transform:translateY(40px);
transition:1s;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}
.whatsapp-float {

    position: fixed;
    width: 60px;
    height: 60px;
    right: 25px;
    bottom: 25px;

    background: #25D366;
    color: white;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;

    text-decoration: none;

    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    z-index:999;

    transition:.3s;

}


.whatsapp-float {
    position: fixed;
    width: 65px;
    height: 65px;
    right: 25px;
    bottom: 25px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    z-index: 9999;
}


}