/* ============================
   RESET
============================ */
:root{

    --primary:#1B5E73;

    --primary-dark:#123E4B;

    --gold:#C6A15B;

    --gold-light:#E6D1A5;

    --background:#F4F1EB;

    --surface:#FFFFFF;

    --surface-2:#FBF8F3;

    --text:#252525;

    --text-light:#6B6B6B;

    --border:#E7DED0;

    --shadow:0 30px 80px rgba(0,0,0,.08);

    --radius:24px;

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

html{
    scroll-behavior:smooth;
}

body{

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

background:#FAFAF8;

color:#222;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

}

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

.container{

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

}

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

header{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:92%;

max-width:1300px;

border-radius:70px;

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

backdrop-filter:blur(20px);

box-shadow:0 20px 50px rgba(0,0,0,.08);

border:1px solid rgba(198,161,91,.18);

z-index:999;

transition:.4s;

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

.logo img{

    width:320px;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    color:#444;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}

nav a:hover{

    color:#C3A46B;

}

.botao{

background:linear-gradient(135deg,#C6A15B,#B48A46);

color:white;

padding:16px 34px;

border-radius:60px;

font-weight:600;

letter-spacing:.5px;

box-shadow:0 18px 40px rgba(198,161,91,.35);

transition:.35s;

}

.botao:hover{

transform:translateY(-5px);

box-shadow:0 25px 50px rgba(198,161,91,.45);

}

.botao:hover{

transform:translateY(-4px);

background:#b38f52;

}

.botao:hover{

    transform:translateY(-3px);

}

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

.hero{
padding-top: 140px;
background:
linear-gradient(
135deg,
#F8F6F2 0%,
#F2EDE5 50%,
#FAFAFA 100%
);

}



.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.subtitulo{

    letter-spacing:4px;

    color:#C3A46B;

    font-size:13px;

    text-transform:uppercase;

}

.hero h1{

font-family:'Cormorant Garamond',serif;

font-size:82px;

font-weight:600;

line-height:1.02;

letter-spacing:-2px;

max-width:650px;

margin:30px 0;

}

.hero p{

    font-size:18px;

    color:#666;

    line-height:1.8;

    margin-bottom:40px;

}

.hero-botoes{

    display:flex;

    gap:20px;

}

.btn-principal{

display:inline-flex;

align-items:center;

justify-content:center;

background:#1F7A8C;

color:white;

padding:18px 34px;

border-radius:50px;

font-weight:600;

font-size:16px;

transition:.35s;

box-shadow:0 15px 35px rgba(31,122,140,.25);

}

.btn-principal:hover{

background:#176674;

transform:translateY(-4px);

box-shadow:0 20px 40px rgba(31,122,140,.35);

}



.btn-secundario{

    border:2px solid #C3A46B;

    color:#C3A46B;

    padding:18px 35px;

    border-radius:40px;

}

.hero-imagem{

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.hero-imagem::before{

content:"";

position:absolute;

width:470px;

height:470px;

background:#C6A15B;

border-radius:50%;

opacity:.12;

}

.hero-imagem img{

position:relative;

z-index:5;

width:520px;

border-radius:30px;

border:8px solid white;

box-shadow:

0 50px 120px rgba(0,0,0,.18);

}

.hero-imagem img{

width:520px;

border-radius:30px;

box-shadow:0 30px 70px rgba(0,0,0,.15);

transition:.5s;

}

.hero-imagem img:hover{

transform:scale(1.02);

}

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

@media(max-width:980px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-botoes{

justify-content:center;

flex-wrap:wrap;

}

nav{

display:none;

}

.hero h1{

font-size:46px;

}

.hero-imagem img{

width:100%;

max-width:420px;

}

}

/*=============================
AJUDA
=============================*/

.ajuda{

padding:120px 0;

background:white;

}

.titulo-centro{

text-align:center;

max-width:700px;

margin:auto;

margin-bottom:70px;

}

.titulo-centro span{

letter-spacing:4px;

color:#C3A46B;

font-size:13px;

font-weight:600;

}

.titulo-centro h2{

font-family:'Cormorant Garamond',serif;

font-size:54px;

margin:20px 0;

}

.titulo-centro p{

color:#666;

font-size:18px;

line-height:1.8;

}

.cards{

display:grid;

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

gap:30px;

}

.card{

background:#FAFAF7;

padding:40px;

border-radius:20px;

border:1px solid #EFE8DB;

transition:.4s;

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

}

.card:hover{

transform:translateY(-10px);
border-color:#C3A46B;
box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.icone{

font-size:40px;

margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

font-size:22px;

}

.card p{

line-height:1.8;

color:#666;

}

@media(max-width:980px){

.cards{

grid-template-columns:1fr;

}

.titulo-centro h2{

font-size:40px;

}

}

/*======================================
ESCUTA
=======================================*/

.escuta{

padding:140px 0;

background:#FAFAF7;

}

.escuta-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.escuta-imagem{

display:flex;

justify-content:center;

}

.escuta-imagem img{

width:420px;

border-radius:25px;

box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.escuta-texto span{

letter-spacing:4px;

font-size:13px;

color:#C3A46B;

font-weight:600;

}

.escuta-texto h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

margin:20px 0;

line-height:1.1;

}

.escuta-texto p{

font-size:18px;

line-height:1.9;

color:#666;

margin-bottom:25px;

}

@media(max-width:980px){

.escuta-grid{

grid-template-columns:1fr;

text-align:center;

}

.escuta-imagem{

margin-bottom:50px;

}

.escuta-imagem img{

width:100%;

max-width:420px;

}

}

/*======================================
PROCESSO
=======================================*/

.processo{

padding:140px 0;

background:white;

}

.timeline{

display:grid;

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

gap:30px;

margin-top:70px;

}

.passo{

background:#FAFAF7;

padding:45px 35px;

border-radius:22px;

box-shadow:0 15px 35px rgba(0,0,0,.05);

transition:.35s;

position:relative;

}

.passo:hover{

transform:translateY(-10px);

}

.numero{

width:70px;

height:70px;

border-radius:50%;

background:#1F7A8C;

color:white;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

font-weight:bold;

margin-bottom:25px;

}

.passo h3{

font-size:24px;

margin-bottom:15px;

}

.passo p{

color:#666;

line-height:1.8;

}

@media(max-width:980px){

.timeline{

grid-template-columns:1fr;

}

}

/*======================================
ATENDIMENTO ONLINE
=======================================*/

.online{

padding:140px 0;

background:#FAFAF7;

}

.online-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:80px;

align-items:center;

}

.online-texto span{

letter-spacing:4px;

color:#C3A46B;

font-size:13px;

font-weight:600;

}

.online-texto h2{

font-family:'Cormorant Garamond',serif;

font-size:56px;

margin:25px 0;

line-height:1.15;

}

.online-texto p{

font-size:18px;

line-height:1.9;

color:#666;

margin-bottom:30px;

}

.online-texto ul{

list-style:none;

margin-bottom:40px;

}

.online-texto li{

padding:12px 0;

font-size:18px;

}

.online-card{

display:flex;

justify-content:center;

}

.card-info{

background:white;

padding:50px;

border-radius:25px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

width:100%;

}

.card-info h3{

font-size:30px;

margin-bottom:20px;

}

.linha{

height:2px;

width:80px;

background:#C3A46B;

margin-bottom:25px;

}

.card-info p{

font-size:18px;

padding:12px 0;

color:#555;

}

@media(max-width:980px){

.online-grid{

grid-template-columns:1fr;

}

.online-texto{

text-align:center;

}

.online-texto ul{

text-align:left;

display:inline-block;

}

}

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

.diferenciais{

padding:140px 0;

background:#fff;

}

.grid-diferenciais{

display:grid;

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

gap:35px;

margin-top:70px;

}

.item{

padding:45px;

border-radius:25px;

background:#FAFAF7;

transition:.4s;

border:1px solid #EFE8DB;

}

.item:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.numero-card{

width:70px;

height:70px;

background:#1F7A8C;

color:white;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:22px;

font-weight:bold;

margin-bottom:25px;

}

.item h3{

font-size:28px;

margin-bottom:18px;

font-family:'Cormorant Garamond',serif;

}

.item p{

line-height:1.9;

color:#666;

font-size:17px;

}

@media(max-width:980px){

.grid-diferenciais{

grid-template-columns:1fr;

}

}
/*======================================
SOBRE RONALD
=======================================*/

.sobre-ronald{

padding:150px 0;

background:#FAFAF8;

}

.sobre-grid{

display:grid;

grid-template-columns:.9fr 1.1fr;

gap:90px;

align-items:center;

}

.sobre-foto{

display:flex;

justify-content:center;

}

.sobre-foto img{

width:450px;

border-radius:28px;

box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.sobre-conteudo span{

color:#C3A46B;

letter-spacing:4px;

font-size:13px;

font-weight:600;

}

.sobre-conteudo h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

margin:20px 0;

}

.sobre-conteudo p{

font-size:18px;

line-height:1.9;

margin-bottom:28px;

color:#666;

}

.sobre-infos{

display:grid;

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

gap:20px;

margin-top:40px;

}

.info-box{

background:white;

padding:28px;

border-radius:20px;

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

}

.info-box strong{

display:block;

font-size:18px;

margin-bottom:8px;

}

.info-box span{

font-size:16px;

color:#666;

}

@media(max-width:980px){

.sobre-grid{

grid-template-columns:1fr;

text-align:center;

}

.sobre-infos{

grid-template-columns:1fr;

}

.sobre-foto img{

width:100%;

max-width:420px;

}

}

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

.faq{

padding:140px 0;

background:#fff;

}

.faq-item{

background:#FAFAF8;

margin-bottom:20px;

border-radius:18px;

overflow:hidden;

border:1px solid #ECE6DA;

}

.faq-pergunta{

width:100%;

padding:30px;

background:none;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

font-size:22px;

font-weight:600;

}

.faq-pergunta span{

font-size:32px;

color:#C3A46B;

}

.faq-resposta{

display:none;

padding:0 30px 30px;

}

.faq-resposta p{

font-size:17px;

line-height:1.9;

color:#666;

}

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

.cta-final{

padding:150px 0;

text-align:center;

background:linear-gradient(135deg,#1F7A8C,#245F6A);

color:white;

}

.cta-final span{

letter-spacing:4px;

font-size:13px;

color:#F2D9A6;

}

.cta-final h2{

font-family:'Cormorant Garamond',serif;

font-size:64px;

margin:25px auto;

max-width:750px;

}

.cta-final p{

font-size:20px;

max-width:700px;

margin:auto;

line-height:1.8;

margin-bottom:45px;

opacity:.9;

}

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

footer{

background:#1D1D1D;

color:white;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

}

.footer-grid h3{

font-size:32px;

margin-bottom:15px;

font-family:'Cormorant Garamond',serif;

}

.footer-grid h4{

margin-bottom:20px;

}

.footer-grid p{

line-height:2;

color:#CCC;

}

.footer-grid a{

display:block;

color:#CCC;

margin-bottom:10px;

}

.copyright{

margin-top:50px;

text-align:center;

color:#999;

padding-top:30px;

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

}

/*======================================
WHATSAPP
=======================================*/

.whatsapp{

position:fixed;

right:30px;

bottom:30px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:white;

box-shadow:0 20px 40px rgba(0,0,0,.2);

transition:.3s;

z-index:999;

}

.whatsapp:hover{

transform:scale(1.1);

}

/*======================================
ESTATÍSTICAS
=======================================*/

.estatisticas{

padding:110px 0;

background:white;

}

.estatisticas-grid{

display:grid;

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

gap:30px;

}

.estatistica{

padding:50px;

background:#FAFAF8;

border-radius:25px;

text-align:center;

transition:.4s;

border:1px solid #EEE4D3;

}

.estatistica:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.estatistica h2{

font-size:52px;

font-family:'Cormorant Garamond',serif;

color:#1F7A8C;

margin-bottom:10px;

}

.estatistica span{

font-size:18px;

color:#666;

}

@media(max-width:980px){

.estatisticas-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:650px){

.estatisticas-grid{

grid-template-columns:1fr;

}

}

section h2{

font-family:'Cormorant Garamond',serif;

font-weight:600;

letter-spacing:-1px;

}

img{

transition:.5s;

}

img:hover{

transform:scale(1.01);

}

section{

overflow:hidden;

}

/*=================================================
EFEITOS PREMIUM
=================================================*/

body{

    background:#F6F3EE;

}

/* Círculos decorativos */

.hero::before{

content:"";

position:absolute;

width:650px;

height:650px;

background:radial-gradient(circle,#E7D5AF 0%,transparent 70%);

top:-250px;

right:-200px;

opacity:.35;

z-index:0;

}

.hero::after{

content:"";

position:absolute;

width:350px;

height:350px;

background:radial-gradient(circle,#C6A15B 0%,transparent 70%);

left:-150px;

bottom:-120px;

opacity:.15;

}

.card,
.item,
.passo,
.info-box,
.card-info{

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

backdrop-filter:blur(18px);

border:1px solid rgba(198,161,91,.15);

box-shadow:0 25px 60px rgba(0,0,0,.05);

border-radius:28px;

transition:.45s;

}

.card:hover,
.item:hover,
.passo:hover,
.info-box:hover{

transform:translateY(-10px);

box-shadow:0 35px 70px rgba(0,0,0,.12);

}

.hero p,
.sobre-conteudo p,
.online-texto p,
.escuta-texto p{

font-size:19px;

line-height:2;

color:#666;

}

.hero-info{

margin-top:25px;

font-size:16px;

color:#666;

font-weight:500;

letter-spacing:.5px;

}