/* CONFIGURAÇÕES GERAIS */

:root{
    --dourado:#946B24;
    --dourado-hover:#78551B;
    --texto:#444;
    --titulo:#2B2B2B;
    --fundo:#FFF;
    --fundo-suave:#FAFAFA;
    --borda:#E8E8E8;
    --sombra:0 5px 25px rgba(0,0,0,.07);
}

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:150px;
}

body{
    font-family:'Segoe UI',sans-serif;
    background:var(--fundo);
    color:var(--texto);
    line-height:1.6;
}

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

button,
input,
textarea,
select{
    font:inherit;
}

a{
    -webkit-tap-highlight-color:transparent;
}

a:focus-visible,
button:focus-visible{
    outline:3px solid var(--dourado);
    outline-offset:5px;
}

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

/* CABEÇALHO */

header{
    position:sticky;
    top:0;
    width:100%;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    z-index:1000;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}

.nav-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    padding:12px 0;
}

.logo{
    flex-shrink:0;
}

.logo img{
    height:90px;
    width:auto;
    object-fit:contain;
}

nav{
    min-width:0;
}

nav ul{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
    list-style:none;
    gap:8px 28px;
}

nav a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    text-decoration:none;
    color:var(--texto);
    font-weight:600;
    transition:color .2s ease;
}

nav a:hover{
    color:var(--dourado);
}

/* APRESENTAÇÃO */

.hero{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:55px 20px 65px;
    background:linear-gradient(180deg,#FFF 0%,#F8F8F8 100%);
}

.hero-container,
.hero-content{
    width:100%;
    max-width:900px;
    margin-inline:auto;
}

.hero-text{
    width:100%;
    max-width:800px;
    margin-inline:auto;
}

.hero-logo{
    width:min(220px,65%);
    margin:0 auto 24px;
}

.hero-logo img{
    width:100%;
    height:auto;
}

.destaque{
    color:var(--dourado);
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.hero h1{
    font-size:clamp(2.1rem,4.5vw,3.5rem);
    line-height:1.18;
    color:var(--titulo);
    margin:20px 0;
    overflow-wrap:break-word;
}

.hero p{
    max-width:680px;
    margin:0 auto 28px;
    font-size:clamp(1rem,2vw,1.15rem);
    line-height:1.8;
}

.hero-benefits{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 22px;
    margin-bottom:28px;
    font-size:.95rem;
    font-weight:600;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    max-width:100%;
    padding:15px 30px;
    border:2px solid transparent;
    border-radius:50px;
    text-align:center;
    text-decoration:none;
    font-weight:600;
    line-height:1.4;
    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.btn-primary{
    background:var(--dourado);
    color:#FFF;
}

.btn-primary:hover{
    background:var(--dourado-hover);
    transform:translateY(-3px);
}

.btn-secondary{
    border-color:var(--dourado);
    color:var(--dourado);
    background:transparent;
}

.btn-secondary:hover{
    background:var(--dourado);
    color:#FFF;
}

/* BENEFÍCIOS */

.beneficios{
    padding:55px 20px;
    background:var(--fundo-suave);
}

.beneficios .container{
    display:flex;
    justify-content:center;
    align-items:stretch;
    flex-wrap:wrap;
    gap:25px;
}

.beneficio{
    flex:1 1 240px;
    min-width:0;
    max-width:380px;
    padding:28px;
    background:#FFF;
    border:1px solid var(--borda);
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,.04);
    overflow-wrap:break-word;
}

.beneficio h3{
    margin-bottom:10px;
    color:var(--titulo);
    font-size:1.1rem;
}

/* TRATAMENTOS */

.tratamentos{
    padding:80px 5%;
}

.tratamentos h2{
    margin-bottom:40px;
    color:var(--titulo);
    text-align:center;
    font-size:clamp(1.8rem,3.5vw,2.5rem);
    line-height:1.25;
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
    max-width:1200px;
    margin-inline:auto;
}

.card{
    min-width:0;
    background:#FFF;
    border:1px solid var(--borda);
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--sombra);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.card h3{
    padding:22px 18px;
    color:var(--titulo);
    text-align:center;
    line-height:1.4;
    overflow-wrap:break-word;
}

.card p{
    padding:0 20px 24px;
    text-align:center;
}

/* SOBRE */

.sobre{
    padding:80px 5%;
    background:var(--fundo-suave);
}

.sobre-container{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:50px;
    max-width:1200px;
    margin-inline:auto;
}

.sobre-imagem,
.sobre-texto{
    flex:1 1 320px;
    min-width:0;
}

.sobre-imagem img{
    width:100%;
    height:auto;
    border-radius:25px;
}

.sobre-texto span{
    color:var(--dourado);
    font-weight:700;
}

.cro{
    margin-top:6px;
    color:var(--texto);
    font-size:.9rem;
}

.sobre-texto h2{
    margin:20px 0;
    color:var(--titulo);
    font-size:clamp(1.8rem,3.5vw,2.5rem);
    line-height:1.25;
    overflow-wrap:break-word;
}

.sobre-texto p{
    line-height:1.8;
}

.sobre-texto p + p{
    margin-top:16px;
}

/* LOCALIZAÇÃO */

.mapa{
    padding:80px 5%;
    text-align:center;
}

.mapa h2,
.antes-depois h2,
.avaliacoes h2{
    margin-bottom:20px;
    color:var(--titulo);
    font-size:clamp(1.8rem,3.5vw,2.5rem);
    line-height:1.25;
}

.mapa > p{
    max-width:680px;
    margin:0 auto 30px;
}

.mapa-container{
    width:100%;
    max-width:1200px;
    margin:0 auto 30px;
    border:1px solid var(--borda);
    border-radius:20px;
    overflow:hidden;
    background:var(--fundo-suave);
}

.mapa-container iframe{
    display:block;
    width:100%;
    height:400px;
    border:0;
}

.btn-mapa{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:14px 24px;
    border-radius:50px;
    background:var(--dourado);
    color:#FFF;
    text-decoration:none;
    font-weight:600;
    transition:background-color .2s ease;
}

.btn-mapa:hover{
    background:var(--dourado-hover);
}

/* RESULTADOS */

.antes-depois{
    padding:80px 5%;
    background:var(--fundo-suave);
    text-align:center;
}

.resultado-container{
    max-width:900px;
    margin:30px auto 0;
}

.resultado-container img{
    width:100%;
    height:auto;
    border-radius:20px;
}

/* AVALIAÇÕES */

.avaliacoes{
    padding:80px 5%;
    text-align:center;
}

.avaliacoes-grid{
    display:grid;
    grid-template-columns:repeat(
        auto-fit,
        minmax(min(260px,100%),1fr)
    );
    gap:24px;
    max-width:1200px;
    margin:35px auto 0;
}

.avaliacao-card{
    min-width:0;
    padding:30px 24px;
    background:#FFF;
    border:1px solid var(--borda);
    border-radius:18px;
    box-shadow:var(--sombra);
}

.avaliacao-card p{
    margin-top:15px;
    overflow-wrap:break-word;
}

/* AGENDAMENTO — ESPAÇAMENTO CORRIGIDO */

.cta{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:70px 20px;
    background:var(--dourado);
    color:#FFF;
    text-align:center;
}

.cta h2{
    max-width:800px;
    margin:0;
    font-size:clamp(1.7rem,3.5vw,2.5rem);
    line-height:1.3;
}

.cta p{
    max-width:680px;
    margin:0;
    line-height:1.8;
}

.cta a{
    position:static;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    min-height:52px;
    max-width:100%;
    margin:0;
    padding:15px 35px;
    border-radius:50px;
    background:#FFF;
    color:var(--dourado);
    text-decoration:none;
    font-weight:700;
    line-height:1.4;
    transition:background-color .2s ease;
}

.cta a:hover{
    background:#F0F0F0;
}

.cta a:focus-visible{
    outline-color:#FFF;
}

/* RODAPÉ */

footer{
    padding:50px 20px 100px;
    background:var(--titulo);
    color:#FFF;
    text-align:center;
}

footer h3{
    margin-bottom:10px;
}

footer p + p{
    margin-top:10px;
}

footer a{
    color:#FFF;
    text-underline-offset:4px;
    overflow-wrap:anywhere;
}

footer a:hover{
    color:#F0CE91;
}

footer a:focus-visible{
    outline-color:#FFF;
}

/* WHATSAPP FLUTUANTE */

.whatsapp{
    position:fixed;
    right:24px;
    bottom:24px;
    right:max(24px,env(safe-area-inset-right));
    bottom:max(24px,env(safe-area-inset-bottom));
    z-index:1100;
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#167D3E;
    color:#FFF;
    font-size:32px;
    text-decoration:none;
    box-shadow:0 5px 20px rgba(0,0,0,.2);
    transition:background-color .2s ease;
}

.whatsapp:hover{
    background:#116331;
}

/* DISPOSITIVOS COM MOUSE */

@media(hover:hover) and (pointer:fine){
    .card:hover{
        transform:translateY(-6px);
        box-shadow:0 12px 30px rgba(0,0,0,.1);
    }
}

/* TABLETS */

@media(max-width:1000px){
    .cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* CELULARES E TABLETS MENORES */

@media(max-width:768px){
    html{
        scroll-padding-top:190px;
    }

    .nav-container{
        flex-direction:column;
        gap:8px;
        padding:10px 0;
    }

    .logo img{
        height:70px;
    }

    nav{
        width:100%;
    }

    nav ul{
        justify-content:center;
        gap:4px 18px;
    }

    nav a{
        font-size:.95rem;
    }

    .hero{
        padding:40px 20px 50px;
    }

    .hero-logo{
        width:min(180px,60%);
    }

    .hero-benefits{
        flex-direction:column;
        gap:8px;
    }

    .beneficios{
        padding:45px 16px;
    }

    .tratamentos,
    .sobre,
    .mapa,
    .antes-depois,
    .avaliacoes{
        padding:60px 5%;
    }

    .cards{
        gap:22px;
    }

    .sobre-container{
        flex-direction:column;
        align-items:stretch;
        gap:30px;
    }

    .sobre-imagem,
    .sobre-texto{
        flex:auto;
        width:100%;
    }

    .mapa-container iframe{
        height:320px;
    }

    .cta{
        padding:55px 20px;
        gap:20px;
    }

    .whatsapp{
        right:16px;
        bottom:16px;
        right:max(16px,env(safe-area-inset-right));
        bottom:max(16px,env(safe-area-inset-bottom));
        width:56px;
        height:56px;
        font-size:30px;
    }
}

/* CELULARES MENORES */

@media(max-width:540px){
    .cards{
        grid-template-columns:minmax(0,1fr);
    }

    .card img{
        height:240px;
    }
}

@media(max-width:480px){
    html{
        scroll-padding-top:220px;
    }

    nav ul{
        gap:2px 14px;
    }

    nav a{
        font-size:.875rem;
    }

    .destaque{
        font-size:.8rem;
        letter-spacing:1.2px;
    }

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

    .btn-primary,
    .btn-secondary{
        width:100%;
        padding:14px 20px;
    }

    .beneficios .container{
        width:100%;
    }

    .beneficio{
        max-width:100%;
    }

    .cta a{
        width:100%;
        max-width:320px;
        padding:15px 20px;
    }

    footer{
        padding:40px 20px 100px;
    }
}

/* PREFERÊNCIA POR MENOS MOVIMENTO */

@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
    }

    .card:hover,
    .btn-primary:hover{
        transform:none;
    }
}