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

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
line-height:1.6;
color:#2d3748;
background:#ffffff;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}


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

header{
position:fixed;
top:0;
left:0;
width:100%;
padding:22px 0;
background:rgba(255,255,255,.96);
backdrop-filter:blur(10px);
box-shadow:0 2px 12px rgba(0,0,0,.04);
z-index:999;
transition:.35s;
}

header::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#2ECC71;
}


/* header ao rolar */
header.scrolled{
padding:14px 0;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}



/* layout 3 colunas */

.nav{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
width:100%;
}



/* logo */

.logo{
height:55px;
justify-self:start;
transition:.3s;
}

header.scrolled .logo{
height:48px;
}



/* menu central */

nav{
display:flex;
justify-content:center;
align-items:center;
gap:42px;
}

nav a{
position:relative;
font-weight:600;
color:#2d3748;
padding-bottom:6px;
transition:.3s;
}

nav a::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:0;
height:2px;
background:#1F7A4D;
transition:.3s;
}

nav a:hover{
color:#1F7A4D;
}

nav a:hover::after{
width:100%;
}



/* botão direita */

.botao-topo{
justify-self:end;
background:#1F7A4D;
color:#fff;
padding:14px 28px;
border-radius:12px;
font-weight:600;
box-shadow:0 6px 18px rgba(31,122,77,.18);
transition:.3s;
}

.botao-topo:hover{
transform:translateY(-2px);
background:#16643e;
}



/* mobile */

@media(max-width:900px){

.nav{
display:flex;
justify-content:space-between;
}

nav{
display:none;
}

.botao-topo{
padding:12px 18px;
font-size:14px;
}

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

.hero{
padding-top:90px;
height:100vh;
background:url("imagens/banner.jpg") center/cover;
position:relative;
display:flex;
align-items:center;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
}

.hero-content{
position:relative;
z-index:2;
color:white;
max-width:700px;
}

.tag{
background:#2ECC71;
display:inline-block;
padding:10px 18px;
border-radius:30px;
font-weight:600;
}

.hero h1{
font-size:68px;
line-height:1.1;
margin:30px 0;
}

.hero p{
font-size:24px;
margin-bottom:40px;
max-width:650px;
}

.hero-buttons{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.btn-principal{
background:#2ECC71;
color:white;
padding:16px 32px;
border-radius:10px;
font-weight:600;
}

.btn-principal:hover{
background:#25b965;
}

.btn-secundario{
border:2px solid white;
color:white;
padding:16px 32px;
border-radius:10px;
}



/* =========================
SERVIÇOS
========================= */

.servicos{
padding:120px 0;
background:white;
}

.titulo-servicos{
text-align:center;
max-width:760px;
margin:auto;
margin-bottom:70px;
}

.tag-servicos{
background:#e7f7ee;
color:#1F7A4D;
padding:10px 18px;
border-radius:30px;
font-weight:600;
display:inline-block;
}

.titulo-servicos h2{
font-size:52px;
line-height:1.2;
margin:25px 0;
}

.titulo-servicos p{
font-size:22px;
color:#667085;
}

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

.service-card{
background:white;
padding:45px;
border-radius:22px;
box-shadow:0 8px 30px rgba(0,0,0,.06);
transition:.3s;
}

.service-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 45px rgba(0,0,0,.10);
}

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

.service-card h3{
font-size:24px;
margin-bottom:15px;
}

.service-card p{
color:#667085;
}



/* =========================
DIFERENCIAIS
========================= */

.diferenciais{
background:linear-gradient(
135deg,
#16643e,
#1F7A4D
);
color:white;
padding:120px 0;
}

.titulo-dif{
text-align:center;
max-width:800px;
margin:auto;
margin-bottom:70px;
}

.titulo-dif h2{
font-size:52px;
line-height:1.2;
margin:25px 0;
}

.titulo-dif p{
font-size:22px;
opacity:.92;
}

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

.dif-card{
background:rgba(255,255,255,.08);
padding:45px;
border-radius:24px;
backdrop-filter:blur(8px);
transition:.3s;
}

.dif-card:hover{
transform:translateY(-8px);
background:rgba(255,255,255,.12);
}

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

.dif-card h3{
font-size:28px;
margin-bottom:15px;
}

.numeros{
margin-top:70px;
display:flex;
justify-content:space-around;
text-align:center;
padding-top:50px;
border-top:1px solid rgba(255,255,255,.25);
}

.numero h3{
font-size:54px;
margin-bottom:10px;
}

.numero p{
font-size:18px;
}



/* =========================
BANNER SOBRE
========================= */

.sobre-banner{
background:#f5f7f6;
padding:0;
}

.banner-sobre{
width:100%;
display:block;
}



/* =========================
CONTATO
========================= */

.contato{
padding:120px 0;
background:linear-gradient(
180deg,
#f7faf8,
#eef7f1
);
}

.contato-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.texto-contato h2{
font-size:54px;
line-height:1.15;
margin:25px 0;
max-width:650px;
}

.texto-contato p{
font-size:22px;
color:#667085;
margin-bottom:35px;
}

.beneficios-contato{
margin-bottom:40px;
}

.beneficios-contato div{
margin-bottom:18px;
font-size:22px;
font-weight:600;
}

.whatsapp-cta{
display:inline-block;
background:#25D366;
color:white;
padding:18px 34px;
border-radius:12px;
font-weight:700;
}

.form-box{
background:white;
padding:50px;
border-radius:26px;
box-shadow:0 18px 55px rgba(0,0,0,.08);
}

.form-box h3{
font-size:34px;
margin-bottom:30px;
}

input,
textarea,
select{
width:100%;
padding:18px;
margin-bottom:18px;
border:1px solid #ddd;
border-radius:10px;
font-size:16px;
background:white;
}

button{
width:100%;
background:#1F7A4D;
padding:18px;
font-size:18px;
font-weight:700;
border:none;
border-radius:10px;
color:white;
}

button:hover{
background:#16643e;
}

@media(max-width:900px){

.contato-wrapper{
grid-template-columns:1fr;
}

.texto-contato h2{
font-size:40px;
}

}

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

.faq{
padding:120px 0;
background:#fff;
}

.faq-titulo{
text-align:center;
max-width:700px;
margin:auto;
margin-bottom:70px;
}

.faq-titulo h2{
font-size:52px;
margin:25px 0;
}

.faq-titulo p{
font-size:22px;
color:#667085;
}



/* caixa */

.faq-box{
max-width:900px;
margin:auto;
}

.faq-item{
border:1px solid #e5e7eb;
border-radius:18px;
margin-bottom:22px;
overflow:hidden;
background:white;
box-shadow:0 4px 14px rgba(0,0,0,.03);
}


/* pergunta */

.faq-question{
width:100%;
background:white;
color:#1f2937;
border:none;
padding:30px 35px;
text-align:left;
font-size:24px;
font-weight:700;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
transition:.3s;
}


/* hover */
.faq-question:hover{
background:#f8faf8;
}


/* quando aberta */
.faq-item.active .faq-question{
background:#1F7A4D;
color:white;
}


/* resposta */

.faq-answer{
display:none;
padding:30px 35px;
background:#ffffff;
color:#667085;
font-size:18px;
line-height:1.8;
border-top:1px solid #eef1f2;
}

.faq-item.active .faq-answer{
display:block;
}

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

footer{
background:#222;
color:white;
text-align:center;
padding:60px 0;
}

footer img{
height:60px;
margin:0 auto 20px;
}


/* =========================
BOTÃO WHATSAPP
========================= */

.whatsapp-float{
position:fixed;
right:28px;
bottom:28px;
background:#25D366;
color:white;
display:flex;
align-items:center;
gap:12px;
padding:16px 22px;
border-radius:60px;
font-weight:700;
box-shadow:0 10px 28px rgba(37,211,102,.35);
z-index:999;
transition:.3s;
animation:pulse 2s infinite;
}

.whatsapp-float:hover{
transform:translateY(-4px);
}

.whats-icon{
font-size:24px;
}

@keyframes pulse{

0%{
box-shadow:0 0 0 0 rgba(37,211,102,.45);
}

70%{
box-shadow:0 0 0 18px rgba(37,211,102,0);
}

100%{
box-shadow:0 0 0 0 rgba(37,211,102,0);
}

}

@media(max-width:900px){

.whats-text{
display:none;
}

.whatsapp-float{
padding:18px;
right:18px;
bottom:18px;
}

}



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

@media(max-width:900px){

nav{
display:none;
}

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

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

.titulo-servicos h2,
.titulo-dif h2,
.contato h2{
font-size:38px;
}

.grid-servicos,
.grid-diferenciais,
.contato-grid{
grid-template-columns:1fr;
}

.numeros{
flex-direction:column;
gap:35px;
}

.hero-buttons{
flex-direction:column;
align-items:flex-start;
}

}