/* =========================================================
   01. VARIÁVEIS / CORES / MEDIDAS GERAIS
   ========================================================= */
:root {
    --coffee:#2b1b12;
    --brown:#4a2e1d;
    --brown2:#68452e;
    --caramel:#a9784f;
    --gold:#d8ae70;
    --sand:#eadbc5;
    --cream:#f7f1e8;
    --ivory:#fffaf3;
    --ink:#2b211b;
    --muted:#786b62;
    --line:rgba(74,46,29,
    .15);
    --shadow:0 24px 60px rgba(43,27,18,
    .13);
    --radius:26px;
    --container:1220px
}
/* =========================================================
   02. RESET E BASE
   ========================================================= */
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:"DM Sans",
    sans-serif;
    line-height:1.65
}
a {
    text-decoration:none;
    color:inherit
}
button {
    font:inherit
}
.container {
    width:min(var(--container),
    calc(100% - 44px));
    margin:auto
}
/* =========================================================
   03. CABEÇALHO / MENU
   ========================================================= */
.site-header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    padding:15px 0;
    transition:.3s
}
.site-header.scrolled {
    background:rgba(43,27,18,
    .94);
    backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(0,0,0,
    .15)
}
.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff
}
.brand-mark {
    width:48px;
    height:48px;
    border:1px solid rgba(216,174,112,
    .7);
    border-radius:50%;
    display:grid;
    place-items:center;
    font-family:"Playfair Display",
    serif;
    font-size:18px
}
.brand strong,
.brand small {
    display:block
}
.brand strong {
    font-family:"Playfair Display",
    serif;
    letter-spacing:.13em;
    font-size:16px
}
.brand small {
    font-size:9px;
    letter-spacing:.3em;
    color:var(--gold)
}
.main-nav {
    display:flex;
    align-items:center;
    gap:23px;
    color:#fff;
    font-size:13px;
    font-weight:600
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:0 24px;
    border-radius:999px;
    background:var(--brown2);
    color:#fff;
    font-weight:700;
    transition:.25s
}
.button:hover {
    transform:translateY(-2px)
}
.button-small {
    min-height:42px;
    padding:0 18px;
    background:var(--gold);
    color:var(--coffee)
}
.gold {
    background:var(--gold);
    color:var(--coffee)
}
.menu-toggle {
    display:none;
    background:none;
    border:0
}
.menu-toggle span {
    display:block;
    width:26px;
    height:2px;
    background:#fff;
    margin:5px
}
/* =========================================================
   04. HERO / CAPA
   Para trocar a imagem principal, procure por: PEXELS HERO
   ========================================================= */
.hero {
    min-height: 790px;
    position: relative;
    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(35, 21, 14, .86) 0%,
            rgba(43, 27, 18, .68) 42%,
            rgba(43, 27, 18, .16) 72%,
            rgba(43, 27, 18, .06) 100%
        ),
        url('../img/hero.png') center 42% / cover no-repeat;

    overflow: hidden;
}

.hero:after {
    display:none
}
.hero-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center
}
.hero-copy {
    max-width:680px
}
.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-transform:uppercase;
    letter-spacing:.19em;
    font-size:11px;
    font-weight:800;
    color:var(--caramel)
}
.eyebrow:before {
    content:"";
    width:34px;
    height:1px;
    background:currentColor
}
.light {
    color:var(--gold)
}
.hero h1,
.section h2,
.manifesto h2,
.contact h2 {
    font-family:"Playfair Display",
    serif
}
.hero h1 {
    font-size:clamp(54px,6vw,84px);
    line-height:.98;
    color:#fff;
    margin:18px 0 25px;
    font-weight:500
}
.hero h1 em {
    color:var(--gold);
    font-weight:500
}
.hero-copy>p {
    font-size:18px;
    max-width:620px;
    color:rgba(255,255,255,
    .78)
}
.hero-actions {
    display:flex;
    gap:14px;
    margin-top:32px
}
.ghost {
    min-height:50px;
    border:1px solid rgba(255,255,255,
    .7);
    color:#fff;
    border-radius:999px;
    padding:12px 24px;
    font-weight:700
}
.hero-info {
    display:flex;
    gap:34px;
    margin-top:28px;
    color:rgba(255,255,255,
    .72);
    font-size:13px
}
.hero-quote {
    justify-self:end;
    width:300px;
    color:#fff;
    position:relative;
    z-index:3
}
.hero-quote p {
    font:italic 27px/1.4 "Playfair Display",
    serif;
    color:var(--sand)
}
.hero-quote span {
    font-size:10px;
    letter-spacing:.22em;
    color:var(--gold)
}
/* =========================================================
   05. ESTRUTURA GERAL DAS SEÇÕES / TÍTULOS
   ========================================================= */
.section {
    padding:105px 0
}
.section-heading {
    max-width:800px;
    margin-bottom:46px
}
.centered {
    text-align:center;
    margin-left:auto;
    margin-right:auto
}
.centered .eyebrow {
    justify-content:center
}
.section-heading h2,
.about-copy h2 {
    font-size:clamp(38px,4vw,57px);
    line-height:1.1;
    margin:13px 0 15px;
    font-weight:600
}
.section-heading p {
    color:var(--muted)
}
/* =========================================================
   06. ÁREAS DE ATENDIMENTO
   ========================================================= */
.areas {
    background:var(--ivory)
}
.area-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:17px
}
.area-card {
    padding:0;
    text-align:left;
    border:1px solid var(--line);
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
    color:var(--ink);
    transition:.3s
}
.area-card:hover {
    transform:translateY(-8px);
    box-shadow:var(--shadow)
}
.photo {
    height:205px;
    background-size:cover;
    background-position:center
}
.ph1 {
    background:url('https://images.pexels.com/photos/4101189/pexels-photo-4101189.jpeg?auto=compress&cs=tinysrgb&w=900') center 38%/cover
}
.ph2 {
    background:url('https://images.pexels.com/photos/7176304/pexels-photo-7176304.jpeg?auto=compress&cs=tinysrgb&w=900') center 35%/cover
}
.ph3 {
    background:url('https://images.pexels.com/photos/5699425/pexels-photo-5699425.jpeg?auto=compress&cs=tinysrgb&w=900') center/cover
}
.ph4 {
    background:url('https://images.pexels.com/photos/7176320/pexels-photo-7176320.jpeg?auto=compress&cs=tinysrgb&w=900') center/cover
}
.ph5 {
    background:url('https://images.pexels.com/photos/5699450/pexels-photo-5699450.jpeg?auto=compress&cs=tinysrgb&w=900') center/cover
}
.card-body {
    padding:22px
}
.card-body span {
    color:var(--gold);
    font:24px "Playfair Display",
    serif
}
.card-body h3 {
    font:600 25px "Playfair Display",
    serif;
    margin:8px 0
}
.card-body p {
    color:var(--muted);
    font-size:14px;
    min-height:90px
}
.card-body b {
    font-size:12px;
    color:var(--brown2)
}
/* =========================================================
   07. FRASE / MANIFESTO
   ========================================================= */
.manifesto {
    padding:85px 0;
    background:var(--brown);
    color:#fff;
    text-align:center
}
.manifesto-inner>span {
    font-size:11px;
    letter-spacing:.28em;
    color:var(--gold)
}
.manifesto h2 {
    font-size:clamp(34px,4vw,54px);
    font-weight:500;
    line-height:1.25
}
.manifesto em {
    color:var(--gold);
    font-weight:500
}
/* =========================================================
   08. SOBRE MIM
   ========================================================= */
.about {
    background:var(--cream)
}
.about-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:80px;
    align-items:center
}
/* =========================================================
   18. FOTO DO SOBRE + MINHA HISTÓRIA
   ========================================================= */
.portrait {
    height:610px;
    border-radius:30px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,
    #d1b08d,
    #5d3e2d);
    box-shadow:var(--shadow)
}
.portrait-placeholder {
    height:100%;
    display:grid;
    place-content:center;
    text-align:center;
    color:#fff
}
.portrait-placeholder span {
    font:100px "Playfair Display",
    serif;
    opacity:.5
}
.portrait-placeholder small {
    letter-spacing:.15em;
    text-transform:uppercase
}
.portrait-label {
    position:absolute;
    bottom:22px;
    left:22px;
    right:22px;
    padding:15px;
    background:rgba(255,250,243,
    .9);
    border-radius:14px;
    text-align:center;
    color:var(--brown);
    font-weight:700
}
.about-copy h2 {
    margin-bottom:0
}
.about-copy h4 {
    font:italic 25px "Playfair Display",
    serif;
    color:var(--caramel);
    margin:0 0 24px
}
.about-copy p {
    color:var(--muted)
}
blockquote {
    margin:25px 0;
    padding:20px 24px;
    border-left:3px solid var(--gold);
    background:#fff;
    font:italic 20px "Playfair Display",
    serif
}
.text-link {
    font-weight:800;
    color:var(--brown2)
}
/* =========================================================
   09. ATENDIMENTO ONLINE
   ========================================================= */
.online {
    background:linear-gradient(125deg,
    #2b1b12,
    #573823);
    color:#fff
}
.online-grid {
    display:grid;
    grid-template-columns:1fr .85fr;
    gap:80px;
    align-items:center
}
.online h2 {
    font-size:clamp(42px,4vw,62px);
    line-height:1.08;
    margin:15px 0
}
.online p {
    color:rgba(255,255,255,
    .75)
}
.online ul {
    list-style:none;
    padding:0;
    margin:28px 0
}
.online li {
    padding:8px 0 8px 30px;
    position:relative
}
.online li:before {
    content:"✓";
    position:absolute;
    left:0;
    color:var(--gold)
}
.online-art {
    height:470px;
    display:grid;
    place-items:center;
    border-radius:30px;
    background:radial-gradient(circle,
    #9d7455,
    #3c271a)
}
.screen {
    width:80%;
    padding:22px;
    border-radius:20px;
    background:#f6eee4;
    color:var(--coffee);
    display:flex;
    align-items:center;
    gap:20px;
    box-shadow:0 25px 60px rgba(0,0,0,
    .25)
}
.screen-person {
    width:120px;
    height:120px;
    border-radius:15px;
    background:var(--brown);
    display:grid;
    place-items:center;
    color:var(--gold);
    font:50px "Playfair Display",
    serif
}
.screen b,
.screen small {
    display:block
}
/* =========================================================
   10. COMO FUNCIONA
   ========================================================= */
.process {
    background:#fff
}
.steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px
}
.steps article {
    padding:35px;
    border-top:1px solid var(--line)
}
.steps span {
    width:50px;
    height:50px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--sand);
    color:var(--brown);
    font-weight:800
}
.steps h3 {
    font:26px "Playfair Display",
    serif
}
.steps p {
    color:var(--muted)
}
/* =========================================================
   11. CONTEÚDOS / REFLEXÕES
   ========================================================= */
.content {
    background:var(--cream)
}
.content-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}
.content-card {
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    border:1px solid var(--line)
}
.content-photo {
    height:310px
}
.cp1 {
    background:url('https://images.pexels.com/photos/7176304/pexels-photo-7176304.jpeg?auto=compress&cs=tinysrgb&w=900') center/cover
}
.cp2 {
    background:url('https://images.pexels.com/photos/4101189/pexels-photo-4101189.jpeg?auto=compress&cs=tinysrgb&w=900') center/cover
}
.cp3 {
    background:url('https://images.pexels.com/photos/5699426/pexels-photo-5699426.jpeg?auto=compress&cs=tinysrgb&w=900') center/cover
}
.content-card>div:last-child {
    padding:25px
}
.content-card span {
    font-size:11px;
    letter-spacing:.17em;
    color:var(--caramel);
    font-weight:800
}
.content-card h3 {
    font:27px "Playfair Display",
    serif;
    margin:9px 0
}
.content-card p {
    color:var(--muted)
}
/* =========================================================
   12. DÚVIDAS FREQUENTES
   ========================================================= */
.faq {
    background:#fff
}
.faq-grid {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px
}
.accordion details {
    padding:20px 0;
    border-bottom:1px solid var(--line)
}
.accordion summary {
    cursor:pointer;
    font-weight:800;
    font-size:17px
}
.accordion p {
    color:var(--muted)
}
/* =========================================================
   13. CONTATO / CTA FINAL
   ========================================================= */
.contact {
    padding:90px 0;
    background:var(--cream)
}
.contact-card {
    padding:60px;
    border-radius:30px;
    background:linear-gradient(125deg,
    var(--brown),
    #765038);
    color:#fff;
    display:grid;
    grid-template-columns:1.3fr .7fr;
    align-items:center;
    gap:50px
}
.contact h2 {
    font-size:clamp(36px,4vw,55px);
    line-height:1.12;
    margin:15px 0
}
.contact p {
    color:rgba(255,255,255,
    .75)
}
.light-btn {
    background:#fff;
    color:var(--brown)
}
/* =========================================================
   14. RODAPÉ
   ========================================================= */
.footer {
    padding:65px 0 25px;
    background:#21150f;
    color:rgba(255,255,255,
    .7)
}
.footer-grid {
    display:grid;
    grid-template-columns:1.25fr .75fr .85fr 1.05fr 1.25fr;
    gap:38px
}
.footer-grid>div {
    display:flex;
    flex-direction:column;
    gap:8px
}
.footer h4 {
    color:var(--gold);
    margin:0 0 10px
}
.footer a:hover {
    color:var(--gold)
}
.map-col iframe {
    width:100%;
    height:155px;
    border:0;
    border-radius:12px
}
.footer-bottom {
    margin-top:45px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,
    .1);
    display:flex;
    justify-content:space-between;
    font-size:11px
}
/* =========================================================
   15. BOTÃO FLUTUANTE WHATSAPP
   ========================================================= */
.whatsapp {
    position:fixed;
    right:22px;
    bottom:22px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#d8ae70;
    color:#2b1b12;
    display:grid;
    place-items:center;
    font-weight:900;
    z-index:999;
    box-shadow:0 15px 30px rgba(0,0,0,
    .25)
}
/* =========================================================
   16. MODAIS DAS ÁREAS DE ATENDIMENTO
   ========================================================= */
.modal {
    position:fixed;
    inset:0;
    z-index:2000;
    display:none;
    place-items:center;
    padding:20px
}
.modal.open {
    display:grid
}
.modal-backdrop {
    position:absolute;
    inset:0;
    background:rgba(22,13,9,
    .78);
    backdrop-filter:blur(6px)
}
.modal-box {
    position:relative;
    width:min(620px,100%);
    background:var(--ivory);
    padding:48px;
    border-radius:28px;
    box-shadow:0 30px 80px rgba(0,0,0,
    .3)
}
.modal-box h2 {
    font:42px "Playfair Display",
    serif;
    margin:12px 0
}
.modal-box p {
    color:var(--muted)
}
.modal-close {
    position:absolute;
    right:20px;
    top:15px;
    border:0;
    background:none;
    font-size:35px;
    cursor:pointer;
    color:var(--brown)
}
/* =========================================================
   17. ANIMAÇÕES
   ========================================================= */
.reveal {
    opacity:0;
    transform:translateY(25px);
    transition:.7s
}
.reveal.visible {
    opacity:1;
    transform:none
}
@media(max-width:1050px) {
    .main-nav {
        position:fixed;
        top:78px;
        left:20px;
        right:20px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        background:var(--coffee);
        padding:25px;
        border-radius:18px
    }
    .main-nav.open {
        display:flex
    }
    .menu-toggle {
        display:block
    }
    .hero-grid,
    .about-grid,
    .online-grid,
    .faq-grid,
    .contact-card {
        grid-template-columns:1fr
    }
    .hero-quote {
        display:none
    }
    .area-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-grid {
        grid-template-columns:repeat(2,1fr)
    }
}
@media(max-width:680px) {
    .container {
        width:min(100% - 28px,
        var(--container))
    }
    .hero {
        min-height:760px;
        padding-top:110px
    }
    .hero h1 {
        font-size:50px
    }
    .hero-actions,
    .hero-info {
        flex-direction:column
    }
    .section {
        padding:75px 0
    }
    .area-grid,
    .steps,
    .content-grid,
    .footer-grid {
        grid-template-columns:1fr
    }
    .photo {
        height:240px
    }
    .card-body p {
        min-height:auto
    }
    .portrait {
        height:480px
    }
    .online-art {
        height:350px
    }
    .contact-card {
        padding:38px 25px
    }
    .footer-bottom {
        flex-direction:column;
        gap:8px
    }
    .modal-box {
        padding:38px 25px
    }
}
.portrait {
    background:url('https://images.pexels.com/photos/6715992/pexels-photo-6715992.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat
}
.portrait-placeholder {
    display:none
}
.history {
    background:#fff
}
.history-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center
}
.history-collage {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    grid-template-rows:250px 250px;
    gap:12px
}
.history-collage img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:20px
}
.history-collage img:first-child {
    grid-row:1/3
}
.history-copy h2 {
    font:600 clamp(38px,4vw,58px)/1.1 "Playfair Display",
    serif;
    margin:12px 0 22px
}
.history-copy p {
    color:var(--muted);
    font-size:16px
}
/* =========================================================
   19. DEPOIMENTOS / EXPERIÊNCIAS
   ========================================================= */
.testimonials {
    background:#e9ddc9
}
.testimonial-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.testimonial {
    padding:34px;
    border-radius:22px;
    background:rgba(74,46,29,
    .82);
    color:#fff;
    position:relative
}
.testimonial:before {
    content:"“";
    font:70px "Playfair Display",
    serif;
    color:var(--gold);
    position:absolute;
    top:5px;
    left:22px;
    opacity:.8
}
.testimonial p {
    font-style:italic;
    padding-top:30px;
    color:rgba(255,255,255,
    .88)
}
.testimonial strong {
    display:block;
    margin-top:20px;
    color:var(--sand)
}
.testimonial small {
    color:rgba(255,255,255,
    .55)
}
.whatsapp {
    right:24px!important;
    bottom:24px!important
}
@media(max-width:1050px) {
    .history-grid {
        grid-template-columns:1fr
    }
    .testimonial-grid {
        grid-template-columns:1fr
    }
}
@media(max-width:680px) {
    .history-collage {
        grid-template-columns:1fr;
        grid-template-rows:280px 220px 220px
    }
    .history-collage img:first-child {
        grid-row:auto
    }
}
/* V3 — menu em cápsula semitransparente */
.site-header {
    padding:16px 0;
    background:transparent!important;
    box-shadow:none!important
}
.header-inner {
    width:min(1420px,
    calc(100% - 50px));
    padding:12px 18px 12px 22px;
    border:1px solid rgba(255,255,255,
    .14);
    border-radius:999px;
    background:rgba(34,22,16,
    .68);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:0 16px 45px rgba(20,12,8,
    .18);
}
.site-header.scrolled .header-inner {
    background:rgba(34,22,16,
    .86)
}
.main-nav {
    margin-left:auto
}
@media(max-width:1050px) {
    .header-inner {
        width:min(100% - 28px,1420px);
        border-radius:28px
    }
    .main-nav {
        top:88px
    }
}
/* V3 — áreas com fotos circulares */
.area-card {
    border:0;
    background:transparent;
    overflow:visible;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.area-card:hover {
    box-shadow:none
}
.area-card .photo {
    width:190px;
    height:190px;
    min-height:190px;
    border-radius:50%;
    border:6px solid #fff;
    box-shadow:0 15px 35px rgba(43,27,18,
    .17);
    transition:.3s;
}
.area-card:hover .photo {
    transform:scale(1.035)
}
.area-card .card-body {
    padding:18px 10px 8px
}
.area-card .card-body span {
    display:none
}
.area-card .card-body h3 {
    margin:2px 0 7px
}
.area-card .card-body p {
    min-height:70px
}
@media(max-width:680px) {
    .area-card .photo {
        width:220px;
        height:220px;
        min-height:220px
    }
}
/* V3 — carrossel de depoimentos */
.testimonials {
    overflow:hidden
}
.testimonial-carousel {
    position:relative;
    margin-top:8px
}
.testimonial-viewport {
    overflow:hidden;
    padding:8px 3px 20px
}
.testimonial-track {
    display:flex;
    gap:22px;
    transition:transform .55s cubic-bezier(.22,
    .61,
    .36,1)
}
.testimonial {
    flex:0 0 calc((100% - 44px)/3);
    min-height:330px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.testimonial-controls {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-top:22px
}
.carousel-btn {
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid rgba(74,46,29,
    .25);
    background:#fff;
    color:var(--brown);
    font-size:24px;
    cursor:pointer;
    transition:.25s
}
.carousel-btn:hover {
    background:var(--brown);
    color:#fff
}
.carousel-status {
    font-size:12px;
    letter-spacing:.12em;
    color:var(--muted);
    min-width:80px;
    text-align:center
}
@media(max-width:900px) {
    .testimonial {
        flex-basis:calc((100% - 22px)/2)
    }
}
@media(max-width:620px) {
    .testimonial {
        flex-basis:100%
    }
}