:root{
  --brown:#573E3E;
  --cream:#EDE0D4;
  --sand:#E6CCB2;
  --caramel:#DDB892;
  --caramel-d:#B08968;
  --paper:#FAF5EF;
  --ink:#573E3E;
  --font-head:'Playfair Display',Georgia,serif;
  --font-body:'Montserrat',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:var(--font-body);font-weight:400;color:var(--ink);background:var(--paper);line-height:1.7;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);font-weight:400;font-style:italic;line-height:1.15}
h2{font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:1rem}
h3{font-size:1.35rem}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.narrow{width:min(760px,100% - 32px)}
.center{text-align:center}
.section{padding:clamp(72px,11vw,140px) 0}
.tint{background:var(--cream)}
.dark{background:var(--brown);color:var(--cream)}
.lead{max-width:560px;margin:0 auto 3rem;opacity:.85}
.eyebrow{font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--caramel-d);margin-bottom:.8rem;font-weight:500}
.dark .eyebrow{color:var(--caramel)}
.small{font-size:.85rem;opacity:.8}
.note{font-size:.8rem;opacity:.7;max-width:620px;margin:2.5rem auto 0}

/* botões */
.btn{display:inline-block;background:var(--brown);color:var(--cream);padding:15px 34px;border:1px solid var(--brown);text-decoration:none;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:background .3s,color .3s,transform .3s var(--ease)}
.btn:hover{background:var(--caramel-d);border-color:var(--caramel-d);transform:translateY(-2px)}
.btn-light{background:var(--cream);color:var(--brown);border-color:var(--cream)}
.btn-light:hover{background:var(--caramel);border-color:var(--caramel);color:var(--brown)}
.btn-outline{background:transparent;color:var(--brown)}
.btn-outline:hover{background:var(--brown);color:var(--cream);border-color:var(--brown)}
.btn-small{padding:10px 22px;font-size:.7rem}

/* menu */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,4vw,48px);transition:background .4s,padding .4s,box-shadow .4s}
.nav.solid{background:rgba(87,62,62,.96);backdrop-filter:blur(8px);padding-block:10px;box-shadow:0 2px 24px rgba(0,0,0,.15)}
.nav-logo img{height:38px;width:auto}
.nav-menu{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.nav-menu a{color:var(--cream);text-decoration:none;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;position:relative}
.nav-menu a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--caramel);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-menu a:not(.btn):hover::after{transform:scaleX(1)}
.nav-menu .btn{background:var(--cream);color:var(--brown);border-color:var(--cream)}
.nav-toggle{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.nav-toggle span{position:absolute;left:8px;right:8px;height:2px;background:var(--cream);transition:transform .3s,top .3s}
.nav-toggle span:first-child{top:15px}.nav-toggle span:last-child{top:23px}
.nav-toggle[aria-expanded=true] span:first-child{top:19px;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] span:last-child{top:19px;transform:rotate(-45deg)}

/* hero: foto em tela cheia, com degradê marrom subindo por baixo */
.hero{position:relative;min-height:100svh;color:var(--cream);background:#3f2b2b;overflow:hidden}
.hero-photo{position:absolute;inset:0 0 14% 0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 30%;animation:heroIn 2.6s var(--ease) both;will-change:transform;filter:brightness(1.22) contrast(1.04) saturate(1.06)}
@keyframes heroIn{from{transform:scale(1.14);opacity:.4}to{transform:scale(1.04);opacity:1}}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,rgba(63,43,43,.7) 0,rgba(63,43,43,0) 22%),
  linear-gradient(to top,#3f2b2b 0,rgba(63,43,43,.95) 24%,rgba(63,43,43,.6) 44%,rgba(63,43,43,.15) 62%,rgba(63,43,43,0) 76%),
  rgba(87,62,62,.12)}
.hero-inner{position:absolute;left:0;right:0;bottom:0;padding:0 24px 96px;text-align:center}
.hero-logo{width:min(300px,62vw);margin:0 auto 1rem}
.hero-sub{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--caramel);margin-bottom:.9rem}
.hero-line{max-width:420px;margin:0 auto 1.8rem;opacity:.9;font-weight:300;font-size:.95rem}
.hero-scroll{position:absolute;left:50%;bottom:28px;width:26px;height:44px;border:1px solid rgba(237,224,212,.6);border-radius:14px;transform:translateX(-50%)}
.hero-scroll span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;background:var(--cream);border-radius:2px;animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@media (min-width:900px){
  .hero-photo{left:auto;width:60%;bottom:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
  .hero-photo img{object-position:50% 45%}
  .hero-shade{background:
    linear-gradient(to right,#3f2b2b 0,#3f2b2b 38%,rgba(63,43,43,.75) 52%,rgba(63,43,43,0) 74%),
    linear-gradient(to top,#3f2b2b 0,rgba(63,43,43,0) 22%),
    linear-gradient(to bottom,rgba(63,43,43,.6) 0,rgba(63,43,43,0) 18%)}
  .hero-inner{top:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:100px clamp(32px,6vw,96px) 80px;width:min(680px,58%)}
  .hero-logo{width:min(480px,100%);margin:0 0 1.6rem -6px}
  .hero-line{margin:0 0 2.2rem;font-size:1rem}
  .hero-scroll{left:clamp(32px,6vw,96px);transform:none}
}

/* blocos de duas colunas */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.split .text p{margin-bottom:1.1rem}
.photo-ph{aspect-ratio:4/5;background:linear-gradient(160deg,var(--sand),var(--caramel));display:grid;place-items:center;border-radius:200px 200px 6px 6px;color:var(--brown);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:20px;opacity:.9}
#contato .photo-ph{border-radius:6px 6px 200px 200px}
.quote{font-family:var(--font-head);font-style:italic;font-size:1.4rem;line-height:1.4;border-left:2px solid var(--caramel-d);padding-left:20px;margin-top:2rem}
.quote em{font-family:var(--font-body);font-size:.75rem;color:var(--caramel-d)}

/* pilares */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:3rem}
.pillar{padding:32px 28px;border-top:1px solid var(--caramel-d)}
.pillar h3{margin:.5rem 0 .7rem}
.num{font-family:var(--font-head);font-style:italic;font-size:1.1rem;color:var(--caramel-d)}

/* procedimentos */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;align-items:start}
.card{background:var(--cream);border:1px solid rgba(87,62,62,.12);transition:box-shadow .4s,transform .4s var(--ease),background .4s}
.card:hover{box-shadow:0 18px 40px -18px rgba(87,62,62,.4);transform:translateY(-4px)}
.card[open]{background:var(--sand)}
.card summary,.faq summary{list-style:none;cursor:pointer;display:block;position:relative}
.card summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.card summary{padding:28px 56px 28px 28px}
.card summary h3{margin:.3rem 0 .6rem}
.card summary p{font-size:.92rem;opacity:.85}
.chev{position:absolute;right:24px;top:30px;width:12px;height:12px;border-right:1.5px solid var(--brown);border-bottom:1.5px solid var(--brown);transform:rotate(45deg);transition:transform .35s var(--ease)}
details[open]>summary .chev{transform:rotate(225deg)}
.card dl{padding:0 28px 28px;font-size:.9rem;animation:open .5s var(--ease)}
.card dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--caramel-d);font-weight:600;margin-top:14px}
.card dd{margin-top:2px}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* antes e depois */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ba-grid figure figcaption{text-align:center;margin-top:12px;font-family:var(--font-head);font-style:italic;font-size:1.1rem}
.ba{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,var(--sand),var(--caramel));--pos:50%;user-select:none;touch-action:pan-y}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3;margin:0}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--cream);transform:translateX(-1px);z-index:2;pointer-events:none}
.ba-line::after{content:"↔";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px;border-radius:50%;background:var(--cream);color:var(--brown);display:grid;place-items:center;font-size:.9rem;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ba-tag{position:absolute;bottom:12px;z-index:2;background:rgba(87,62,62,.8);color:var(--cream);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;padding:4px 10px;pointer-events:none}
.ba-tag.l{left:12px}.ba-tag.r{right:12px}
.ba-ph{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;background:#fff;color:#a33;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:3px 9px;font-weight:600;pointer-events:none;white-space:nowrap}

/* faq */
.faq{margin-top:2.5rem;border-top:1px solid rgba(87,62,62,.25)}
.faq details{border-bottom:1px solid rgba(87,62,62,.25)}
.faq summary{padding:22px 40px 22px 0;font-weight:500}
.faq .chev{right:6px;top:28px}
.faq details p{padding:0 40px 22px 0;animation:open .5s var(--ease)}

/* contato */
.info{list-style:none;margin:1.5rem 0 2rem}
.info li{padding:14px 0;border-top:1px solid rgba(87,62,62,.18)}
.info span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--caramel-d);font-weight:600}
.info a{text-decoration:none;border-bottom:1px solid var(--caramel)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.cta{background:linear-gradient(135deg,var(--caramel-d),var(--brown));color:var(--cream);padding:clamp(64px,9vw,110px) 0}
.cta h2{max-width:720px;margin-inline:auto;margin-bottom:2rem}

.footer{background:#3f2b2b;color:var(--cream);text-align:center;padding:56px 0 90px}
.footer img{width:220px;margin:0 auto 1.4rem}
.footer p{margin-bottom:.3rem}
.footer .credit a{text-decoration:none;border-bottom:1px solid var(--caramel)}

.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--brown);color:var(--cream);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .3s var(--ease),background .3s}
.wa-float:hover{transform:scale(1.08);background:var(--caramel-d)}

/* efeitos de rolagem: repetem toda vez que entra e sai da tela */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.reveal.from-left{transform:translateX(-50px)}
.reveal.from-right{transform:translateX(50px)}
.reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-menu{position:fixed;inset:0 0 0 30%;background:var(--brown);flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);transition:transform .45s var(--ease)}
  .nav-menu.open{transform:none}
  .split{grid-template-columns:1fr}
  .split .photo{order:-1;max-width:380px;margin-inline:auto;width:100%}
  .trio{grid-template-columns:1fr}
  .ba-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-scroll span{animation:none}
  .hero-photo img{animation:none;transform:scale(1.04)}
}
.dark .small{margin:1.2rem 0 2rem}
.photo-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:200px 200px 6px 6px;box-shadow:0 24px 50px -24px rgba(87,62,62,.5)}