/* ==========================================================================
   Verbena Clinic · site
   Mobile-first. Areia + caramelo da marca, café nas camadas escuras.
   Fontes: Sorts Mill Goudy (no lugar da Californian FB, que é licenciada) + Montserrat.
   ========================================================================== */

:root{
  --bg:#EFE8DD; --bg2:#E6DCCC; --cream:#F8F4EE;
  --car:#A37450; --car-d:#86593A; --car-l:#C9A483;
  --ink:#2E2118; --mut:#6E6054;
  --esp:#2A1F17; --esp2:#382A20; --tx-d:#F3EBDD; --mut-d:#BFAF9C;
  --line:rgba(46,33,24,.14); --line-d:rgba(243,235,221,.14);
  --serif:'Sorts Mill Goudy','Californian FB',Georgia,serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:20px; --hdr:66px; --r:20px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
}
@media (min-width:600px){ :root{ --gut:32px } }
@media (min-width:1100px){ :root{ --gut:56px; --hdr:82px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 15.5px/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip }
img,video,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ cursor:pointer; background:none; border:0; padding:0 }
em{ font-style:italic }
::selection{ background:var(--car); color:var(--cream) }
:focus-visible{ outline:2px solid var(--car); outline-offset:3px; border-radius:4px }
[hidden]{ display:none !important }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:fixed; left:12px; top:-60px; z-index:2000; background:var(--car); color:var(--cream); padding:10px 14px; border-radius:6px }
.skip:focus{ top:12px }
.wrap{ width:100%; max-width:1360px; margin-inline:auto; padding-inline:var(--gut) }

/* ---------- Tipografia ---------- */
.eyebrow{ margin:0 0 14px; display:flex; align-items:center; gap:10px; font:500 10.5px/1.4 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--car-d) }
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor }
.h2{ margin:0; font:400 clamp(36px,9.6vw,78px)/1.02 var(--serif); letter-spacing:-.01em; text-transform:uppercase }
.h2 em{ text-transform:none; color:var(--car); }
.lead{ margin:0; color:var(--mut); font-size:15.5px; max-width:32em }
.fine{ margin:0; font-size:12px; line-height:1.55; color:var(--mut) }
.sec-head{ margin-bottom:30px }
.sec-head--row{ display:grid; gap:20px }
@media (min-width:900px){ .sec-head--row{ grid-template-columns:1fr auto; align-items:end } .sec-head{ margin-bottom:56px } }

/* ---------- Botões ---------- */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:rgba(46,33,24,.3);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px;
  border-radius:999px; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font:500 11.5px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--ink); transform:translateY(101%); transition:transform .6s var(--ease) }
@media (hover:hover){ .btn:hover::after{ transform:none } .btn:hover{ color:var(--cream); border-color:var(--ink) } }
.btn--solid{ --bg:var(--car); --fg:var(--cream); --bd:var(--car) }
.btn--line.btn--light{ --fg:var(--tx-d); --bd:rgba(243,235,221,.35) }
.btn--light::after{ background:var(--tx-d) }
@media (hover:hover){ .btn--light:hover{ color:var(--esp) } }
.btn--sm{ min-height:40px; padding:0 18px; font-size:10.5px }
.btn--block{ width:100% }
.link-arrow{ display:inline-flex; align-items:center; gap:10px; padding:8px 0; font:500 11px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--car-d); border-bottom:1px solid currentColor }
.link-arrow::after{ content:"→"; letter-spacing:0; transition:transform .5s var(--ease) }
@media (hover:hover){ .link-arrow:hover::after{ transform:translateX(4px) } }
.link-inline{ text-decoration:underline; text-underline-offset:3px; color:var(--car-d); font-size:inherit }

/* Arco (folha/arcada): topo em semicírculo */
.arch{ position:relative; overflow:hidden; border-radius:999px 999px 18px 18px; background:var(--bg2); isolation:isolate }
.arch img,.arch video{ width:100%; height:100%; object-fit:cover }
.arch--soft{ border-radius:48% 48% 16px 16px / 34% 34% 16px 16px }

/* ---------- Cursor (bolinha) ---------- */
.cursor{ display:none }
@media (hover:hover) and (pointer:fine){
  .js .cursor{ display:block; position:fixed; left:0; top:0; z-index:1400; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; border:1px solid var(--car); opacity:0; transition:opacity .3s }
  .cursor.is-on{ opacity:1 }
}

/* ---------- Cabeçalho ---------- */
.hdr{ position:fixed; inset:0 0 auto; z-index:900; height:var(--hdr); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 var(--gut); transition:transform .7s var(--ease) }
.hdr::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(239,232,221,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); opacity:0; transition:opacity .5s var(--ease) }
.hdr.is-solid::before{ opacity:1 }
.hdr.is-dark{ color:var(--tx-d) }
.hdr.is-dark::before{ background:rgba(42,31,23,.92); border-color:var(--line-d) }
.hdr.is-dark .logo img{ filter:brightness(0) invert(93%) sepia(10%) saturate(300%) }
.hdr.menu-open{ transform:none }
.hdr.menu-open::before{ opacity:0 }
.logo img{ height:30px; width:auto; transition:filter .5s }
.hdr__nav{ display:none }
.hdr__actions{ display:flex; align-items:center; gap:10px }
.burger{ position:relative; width:44px; height:44px; display:grid; place-items:center }
.burger span{ position:absolute; width:22px; height:1px; background:currentColor; transition:transform .6s var(--ease) }
.burger span:first-child{ transform:translateY(-4px) } .burger span:last-child{ transform:translateY(4px) }
.burger[aria-expanded="true"] span:first-child{ transform:rotate(45deg) } .burger[aria-expanded="true"] span:last-child{ transform:rotate(-45deg) }
@media (min-width:1100px){
  .logo img{ height:36px }
  .hdr__nav{ display:flex; gap:34px; position:absolute; left:50%; transform:translateX(-50%) }
  .hdr__nav a{ font:500 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; padding:10px 0; position:relative }
  .hdr__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease) }
  .hdr__nav a:hover::after{ transform:scaleX(1); transform-origin:left }
  .burger{ display:none }
}

/* ---------- Menu ---------- */
.menu{ position:fixed; inset:0; z-index:850; background:var(--bg); visibility:hidden; display:flex; flex-direction:column; gap:26px; overflow:auto;
  padding:calc(var(--hdr) + 16px) var(--gut) calc(24px + env(safe-area-inset-bottom)); clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease-io), visibility 0s .8s }
.menu.is-open{ visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path .8s var(--ease-io) }
.menu__nav{ display:flex; flex-direction:column }
.menu__nav a{ display:flex; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font:400 24px/1.15 var(--serif); transform:translateY(16px); opacity:0; transition:transform .7s var(--ease), opacity .7s var(--ease) }
.menu__nav a small{ font:500 10px/1 var(--sans); letter-spacing:.2em; color:var(--car) }
.menu.is-open .menu__nav a{ transform:none; opacity:1 }
.menu.is-open .menu__nav a:nth-child(2){ transition-delay:.05s } .menu.is-open .menu__nav a:nth-child(3){ transition-delay:.1s }
.menu.is-open .menu__nav a:nth-child(4){ transition-delay:.15s } .menu.is-open .menu__nav a:nth-child(5){ transition-delay:.2s }
.menu__foot{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px 22px; font:500 10.5px/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--mut) }

/* ==========================================================================
   1. ABERTURA
   ========================================================================== */
.hero{ position:relative; padding:calc(var(--hdr) + 26px) 0 0; overflow:hidden }
.hero__grid{ display:grid; gap:34px }
.hero__title{ margin:0 0 18px; font:400 clamp(36px,10.4vw,124px)/.98 var(--serif); text-transform:uppercase; letter-spacing:-.015em }
.hero__title .ln{ display:block }
.hero__title em{ text-transform:none; color:var(--car); letter-spacing:-.02em }
.hero__lead{ margin:0 0 24px; max-width:27em; color:var(--mut) }
.hero__ctas{ display:flex; flex-direction:column; gap:10px }
.hero__visual{ position:relative; justify-self:center; width:min(84vw,520px) }
.hero__arch{ aspect-ratio:4/5 }
.hero__img{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease); transform:scale(1.06) }
.hero__img.is-on{ opacity:1 }
.hero__tag{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); margin:0; z-index:2; padding:7px 14px; border-radius:999px; background:rgba(248,244,238,.82); backdrop-filter:blur(6px);
  font:500 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink); white-space:nowrap }
.badge{ position:absolute; z-index:3; left:-14px; top:38%; width:108px; height:108px; border-radius:50%; background:var(--cream); display:grid; place-items:center; box-shadow:0 18px 40px -20px rgba(46,33,24,.35) }
.badge svg{ position:absolute; inset:0; width:100%; height:100%; animation:spin 26s linear infinite }
.badge text{ font:500 12.5px var(--sans); letter-spacing:.2em; fill:var(--car-d) }
.badge img{ width:34px; height:auto }
@keyframes spin{ to{ transform:rotate(360deg) } }
.hero__strip{ list-style:none; margin:46px 0 0; padding:16px 0; display:flex; width:max-content; border-block:1px solid var(--line); animation:marq 34s linear infinite }
.hero__strip li{ display:flex; align-items:center; gap:26px; padding-right:26px; font:400 20px/1 var(--serif); white-space:nowrap; color:var(--ink) }
.hero__strip li::after{ content:""; width:14px; height:14px; background:url("../../img/marca/simbolo.png") center/contain no-repeat; opacity:.8 }
@keyframes marq{ to{ transform:translateX(-50%) } }
@media (min-width:600px){ .hero__ctas{ flex-direction:row } }
@media (min-width:1000px){
  .hero{ padding-top:calc(var(--hdr) + 40px) }
  .hero__grid{ grid-template-columns:1.1fr .9fr; align-items:center; gap:60px; min-height:calc(100vh - var(--hdr) - 140px) }
  .hero__title{ font-size:clamp(54px,5.3vw,96px) }
  .hero__visual{ width:100%; max-width:480px; justify-self:end }
  .badge{ width:136px; height:136px; left:-60px }
  .badge img{ width:42px }
}

/* ==========================================================================
   2. ESPECIALIDADES
   ========================================================================== */
.pillars{ padding:96px 0 110px }
.pillars__grid{ display:grid; gap:44px }
.pillar__media{ aspect-ratio:4/5 }
.pillar__body{ padding-top:20px }
.pillar__n{ margin:0 0 6px; font:500 10.5px/1 var(--sans); letter-spacing:.22em; color:var(--car) }
.pillar__title{ margin:0 0 10px; font:400 clamp(30px,8vw,46px)/1.05 var(--serif) }
.pillar__body p:not(.pillar__n){ margin:0 0 14px; color:var(--mut); max-width:30em }
@media (min-width:800px){
  .pillars{ padding:150px 0 170px }
  .pillars__grid{ grid-template-columns:1fr 1fr; gap:60px }
  .pillar:nth-child(2){ margin-top:120px }
  .pillar__media{ width:82% }
}

/* ==========================================================================
   3. RESULTADOS (camada café)
   ========================================================================== */
.results{ position:relative; z-index:2; background:var(--esp); color:var(--tx-d); padding:90px 0 96px; border-radius:28px 28px 0 0 }
.results .eyebrow{ color:var(--car-l) }
.results .h2 em{ color:var(--car-l) }
.results .fine{ color:var(--mut-d) }
.filters{ display:flex; gap:6px; flex-wrap:wrap }
.filters button{ min-height:38px; padding:0 16px; border-radius:999px; border:1px solid var(--line); font:500 10.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--mut); transition:all .4s var(--ease) }
.filters button.is-on{ background:var(--ink); border-color:var(--ink); color:var(--cream) }
.results .filters button{ border-color:var(--line-d); color:var(--mut-d) }
.results .filters button.is-on{ background:var(--tx-d); border-color:var(--tx-d); color:var(--esp) }
.results__grid{ display:grid; gap:18px }
.ba{ margin:0 }
.ba__frame{ position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--esp2); touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:ew-resize; --p:50% }
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; transition:opacity .45s var(--ease) }
.ba__frame.is-swap .ba__img{ opacity:0 }
.ba__clip{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p)) 0 0) }
.ba__tag{ position:absolute; top:12px; z-index:2; padding:6px 10px; border-radius:999px; font:500 9.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; background:rgba(42,31,23,.6); color:var(--tx-d); backdrop-filter:blur(6px); transition:opacity .3s }
.ba__tag--l{ left:12px } .ba__tag--r{ right:12px; background:var(--car); color:var(--cream) }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--p); z-index:3; width:1px; background:var(--cream); pointer-events:none }
.ba__handle span{ position:absolute; top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:50%; background:var(--cream); display:grid; place-items:center; box-shadow:0 8px 24px -8px rgba(0,0,0,.4); transition:transform .4s var(--ease) }
.ba__handle span::before{ content:""; width:20px; height:20px; background:url("../../img/marca/simbolo.png") center/contain no-repeat }
.ba__frame.is-drag .ba__handle span{ transform:scale(.88) }
.ba__range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; pointer-events:none }
.ba__frame:focus-within{ box-shadow:0 0 0 2px var(--car-l) }
.ba__cap{ display:flex; gap:12px; align-items:baseline; margin-top:14px; font:400 20px/1.2 var(--serif) }
.ba__cat{ font:500 10px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--car-l) }
.cases{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gut) * -1); padding:4px var(--gut) 8px }
.cases::-webkit-scrollbar{ display:none }
.case{ flex:0 0 auto; width:96px; text-align:left; opacity:.55; transition:opacity .4s var(--ease) }
.case img{ width:96px; height:120px; object-fit:cover; border-radius:48px 48px 12px 12px; margin-bottom:8px }
.case span{ display:block; font:500 9.5px/1.35 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--mut-d) }
.case.is-on{ opacity:1 }
.case.is-on img{ outline:1px solid var(--car-l); outline-offset:3px }
.lips{ margin-top:56px }
.lips__label{ margin:0 0 16px; font:500 10.5px/1.4 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--car-l) }
.lips__row{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) }
.lips__row::-webkit-scrollbar{ display:none }
.lips__row .arch{ flex:0 0 62vw; max-width:300px; aspect-ratio:4/5 }
.results__cta{ margin-top:48px; display:grid; gap:12px; justify-items:start }
@media (min-width:900px){
  .results{ padding:140px 0 150px }
  .results__grid{ grid-template-columns:1.6fr .9fr; gap:40px; align-items:start }
  .cases{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px 12px; margin:0; padding:0; overflow:visible }
  .case{ width:auto } .case img{ width:100%; height:auto; aspect-ratio:4/5 }
  .lips__row{ overflow:visible; margin:0; padding:0 }
  .lips__row .arch{ flex:1 1 0; max-width:none }
}

/* ==========================================================================
   4. ESSÊNCIA
   ========================================================================== */
.essence{ padding:96px 0; text-align:center }
.essence__sym{ width:44px; height:auto; margin:0 auto 26px }
.essence__text{ margin:0 auto; max-width:19em; font:400 clamp(28px,7.4vw,58px)/1.16 var(--serif) }
.essence__text em{ color:var(--car) }
@media (min-width:900px){ .essence{ padding:160px 0 } }

/* ==========================================================================
   5. TRATAMENTOS
   ========================================================================== */
.treat{ padding:90px 0 100px; background:var(--cream); border-radius:28px 28px 0 0; position:relative; z-index:3 }
.treat__grid{ display:grid; gap:40px }
.tlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.tlist li{ border-bottom:1px solid var(--line) }
.tlist li > button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; text-align:left; font:400 clamp(22px,6vw,34px)/1.15 var(--serif); transition:color .4s }
.tlist li > button i{ position:relative; flex:0 0 14px; height:14px }
.tlist li > button i::before,.tlist li > button i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--car); transition:transform .5s var(--ease) }
.tlist li > button i::after{ transform:rotate(90deg) }
.tlist li.is-open > button{ color:var(--car-d) }
.tlist li.is-open > button i::after{ transform:rotate(0) }
.tlist__body{ display:none; padding:0 0 22px }
.tlist li.is-open .tlist__body{ display:block }
.tlist__body p{ margin:0 0 12px; color:var(--mut); max-width:34em }
.tlist__img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px; margin-bottom:14px }
.treat__media{ display:none }
@media (min-width:900px){
  .treat{ padding:140px 0 150px }
  .treat__grid{ grid-template-columns:1.2fr .8fr; gap:80px; align-items:start }
  .treat__media{ display:block; position:sticky; top:calc(var(--hdr) + 40px) }
  .treat__media .arch{ aspect-ratio:4/5 }
  .tlist__img{ display:none }
}

/* ==========================================================================
   6. A CLÍNICA
   ========================================================================== */
.clinic{ padding:100px 0 110px; background:var(--cream); position:relative; z-index:3 }
.clinic__grid{ display:grid; gap:44px }
.clinic__media{ position:relative; padding-right:18%; padding-bottom:14% }
.clinic__main{ aspect-ratio:4/5 }
.clinic__small{ position:absolute; right:0; bottom:0; width:44%; aspect-ratio:1; border-radius:50%; overflow:hidden; border:6px solid var(--cream) }
.clinic__small img{ width:100%; height:100%; object-fit:cover }
.tag-proj{ position:absolute; left:12px; top:12px; padding:5px 10px; border-radius:999px; background:rgba(248,244,238,.85); font:500 9.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--mut) }
.clinic__copy .h2{ margin-bottom:18px }
.values{ list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--line) }
.values li{ display:grid; gap:2px; padding:14px 0; border-bottom:1px solid var(--line) }
.values strong{ font:400 22px/1.2 var(--serif); font-weight:400 }
.values span{ font-size:14px; color:var(--mut) }
.team{ margin:22px 0 0; font:400 11.5px/1.6 var(--sans); letter-spacing:.04em; color:var(--mut); opacity:.85 }
@media (min-width:900px){
  .clinic{ padding:140px 0 160px }
  .clinic__grid{ grid-template-columns:1fr 1fr; gap:90px; align-items:center }
}

/* ==========================================================================
   7. COMO FUNCIONA + DÚVIDAS
   ========================================================================== */
.faq{ padding:90px 0 100px; background:var(--bg); position:relative; z-index:3 }
.steps{ list-style:none; margin:0 0 80px; padding:0; display:grid; gap:0; border-top:1px solid var(--line) }
.steps li{ display:grid; grid-template-columns:52px 1fr; column-gap:8px; padding:18px 0; border-bottom:1px solid var(--line) }
.steps span{ grid-row:1 / span 2; font:400 34px/1 var(--serif); color:var(--car) }
.steps strong{ font:400 22px/1.2 var(--serif); font-weight:400 }
.steps p{ margin:2px 0 0; font-size:14px; color:var(--mut) }
.faq__grid{ display:grid; gap:28px }
.acc details{ border-bottom:1px solid var(--line) }
.acc details:first-child{ border-top:1px solid var(--line) }
.acc summary{ list-style:none; cursor:pointer; position:relative; padding:18px 36px 18px 0; font:400 20px/1.3 var(--serif) }
.acc summary::-webkit-details-marker{ display:none }
.acc summary::before,.acc summary::after{ content:""; position:absolute; right:4px; top:50%; width:14px; height:1px; background:var(--car); transition:transform .5s var(--ease) }
.acc summary::after{ transform:rotate(90deg) }
.acc details[open] summary::after{ transform:rotate(0) }
.acc__body{ overflow:hidden }
.acc__body p{ margin:0; padding:0 28px 20px 0; color:var(--mut); font-size:14.5px }
@media (min-width:900px){
  .faq{ padding:140px 0 150px }
  .steps{ grid-template-columns:repeat(3,1fr); gap:40px; border:0; margin-bottom:130px }
  .steps li{ grid-template-columns:1fr; border-top:1px solid var(--line); border-bottom:0; padding-top:24px }
  .steps span{ grid-row:auto; font-size:52px; margin-bottom:18px }
  .faq__grid{ grid-template-columns:1fr 1.3fr; gap:80px }
  .acc summary{ font-size:23px }
}

/* ==========================================================================
   Rodapé
   ========================================================================== */
.foot{ background:var(--esp); color:var(--tx-d); padding:90px 0 calc(96px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; position:relative; z-index:4 }
.foot__top{ display:grid; gap:28px; padding-bottom:50px; border-bottom:1px solid var(--line-d) }
.foot__title{ margin:0; font:400 clamp(36px,9.4vw,80px)/1.04 var(--serif); text-transform:uppercase }
.foot__title em{ text-transform:none; color:var(--car-l) }
.foot__ctas{ display:grid; gap:10px }
.foot__cols{ display:grid; gap:24px; padding-top:40px; padding-bottom:34px }
.foot__logo{ width:150px; height:auto }
.foot__cols p{ margin:0 0 4px; font-size:14px }
.foot__label{ font:500 10px/1.3 var(--sans) !important; letter-spacing:.22em; text-transform:uppercase; color:var(--mut-d) !important; margin-bottom:10px !important }
.foot__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:12px; color:var(--mut-d) }
.foot .link-inline{ color:var(--car-l) }
@media (min-width:600px){ .foot__ctas{ display:flex } }
@media (min-width:900px){ .foot{ padding-bottom:40px } .foot__top{ grid-template-columns:1fr auto; align-items:end } .foot__cols{ grid-template-columns:1.4fr 1fr 1fr; align-items:start } }

/* ==========================================================================
   Barra fixa no celular
   ========================================================================== */
.dock{ position:fixed; z-index:880; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr auto; gap:6px; padding:6px; border-radius:999px;
  background:rgba(248,244,238,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); box-shadow:0 16px 40px -14px rgba(46,33,24,.35);
  transform:translateY(150%); transition:transform .8s var(--ease) }
.dock.is-on{ transform:none }
.menu.is-open ~ .dock{ transform:translateY(150%) }
.dock > *{ display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:999px; font:500 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase }
.dock__cta{ background:var(--car); color:var(--cream) }
.dock__wa{ width:48px; border:1px solid var(--line); color:var(--ink) }
.dock__wa svg{ width:21px; height:21px; fill:currentColor }
@media (min-width:900px){ .dock{ left:auto; right:28px; bottom:28px; width:320px } }

/* ==========================================================================
   Folhas (pop-up)
   ========================================================================== */
.sheet{ padding:0; margin:0; border:0; width:100%; height:100%; max-width:none; max-height:none; background:transparent; color:var(--ink); overflow:hidden }
.sheet[open]{ display:flex; align-items:flex-end; justify-content:center }
.sheet::backdrop{ background:rgba(42,31,23,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.sheet__panel{ position:relative; width:100%; max-height:92svh; overflow:auto; overscroll-behavior:contain; background:var(--cream); border-radius:26px 26px 0 0;
  padding:10px 20px calc(22px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .7s var(--ease) }
.sheet.is-in .sheet__panel{ transform:none }
.sheet__grab{ width:42px; height:4px; border-radius:4px; background:var(--line); margin:0 auto 14px }
.sheet__head{ position:relative; padding-right:44px; margin-bottom:18px }
.sheet__head .eyebrow{ margin-bottom:8px }
.sheet__title{ margin:0; font:400 30px/1.05 var(--serif) }
.sheet__close{ position:absolute; right:-6px; top:-8px; width:44px; height:44px; font:300 32px/1 var(--serif) }
.sheet__text p{ color:var(--mut); margin:0 0 14px }
@media (min-width:700px){
  .sheet[open]{ align-items:center }
  .sheet__panel{ width:min(520px, calc(100% - 48px)); border-radius:26px; padding:20px 34px 30px; transform:translateY(30px) scale(.97); opacity:0; transition:transform .7s var(--ease), opacity .5s var(--ease) }
  .sheet.is-in .sheet__panel{ opacity:1 }
  .sheet__grab{ display:none }
}
.form__progress{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin:16px -44px 0 0 }
.form__progress i{ display:block; height:100%; width:33.33%; background:var(--car); transition:width .7s var(--ease) }
#bookingForm{ position:relative }
.fstep{ border:0; margin:0; padding:0; min-width:0; display:none }
.fstep.is-active{ display:block }
.fstep legend,.fstep .legend{ display:block; padding:0; margin:0 0 16px; font:400 25px/1.1 var(--serif) }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px }
.field > span{ font:500 10px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--mut) }
.field input,.field select,.field textarea{ width:100%; min-height:50px; padding:12px 14px; border-radius:12px; border:1px solid rgba(46,33,24,.18); background:#fff; color:var(--ink); font-size:16px; outline:none; -webkit-appearance:none; appearance:none; transition:border-color .3s }
.field select{ background-image:linear-gradient(45deg,transparent 50%,var(--car) 50%),linear-gradient(135deg,var(--car) 50%,transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px }
.field textarea{ resize:vertical; min-height:70px }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--car) }
.is-bad{ border-color:#c2573a !important }
.seg{ display:flex; flex-wrap:wrap; gap:8px }
.seg label{ position:relative; flex:1 1 auto; cursor:pointer }
.seg input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.seg span{ display:flex; align-items:center; justify-content:center; min-height:42px; padding:0 12px; border-radius:999px; border:1px solid rgba(46,33,24,.2); font-size:13.5px; transition:all .4s var(--ease) }
.seg input:checked + span{ background:var(--car); border-color:var(--car); color:var(--cream) }
.seg input:focus-visible + span{ outline:2px solid var(--car); outline-offset:2px }
.date-row{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line) }
.date-row .field{ margin-bottom:10px }
.link-add{ font-size:13px; color:var(--car-d); padding:6px 0 }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--mut); margin:4px 0; cursor:pointer }
.check input{ flex:0 0 22px; width:22px; height:22px; margin:1px 0 0; accent-color:var(--car) }
.review{ margin:0 0 14px; padding:16px; border-radius:12px; background:#fff; border:1px solid var(--line); white-space:pre-wrap; word-break:break-word; font:400 14px/1.6 var(--sans); max-height:300px; overflow:auto }
.form__error{ margin:0; color:#a8432a; font-size:13.5px }
.form__error:not(:empty){ margin:0 0 12px }
.form__nav{ display:flex; gap:10px; align-items:center; margin-top:8px }
.form__nav [data-next],.form__nav [data-send]{ flex:1 }
.form__privacy{ margin-top:14px }

/* Estados de animação */
.js:not(.ready):not(.no-anim) .hero__copy,
.js:not(.ready):not(.no-anim) .hero__visual{ opacity:0 }
.reduced .badge svg, .reduced .hero__strip{ animation:none }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important } }

/* ==========================================================================
   RODADA 2 · alto padrão (referência Lumière)
   Títulos em Cormorant Garamond fina, botões retos, capa em tela cheia,
   barra de diferenciais, cards de especialidades e clínica em foto cheia.
   ========================================================================== */
:root{ --serif:'Cormorant Garamond','Californian FB',Georgia,serif; --cream2:#F4EEE6 }
body{ font-weight:300; font-size:15px; letter-spacing:.01em }
body::before{ content:""; position:fixed; inset:0; z-index:1500; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }

.eyebrow{ font-weight:500; font-size:10px; letter-spacing:.32em; color:var(--mut) }
.eyebrow::before{ display:none }
.h2{ font-weight:300; font-size:clamp(38px,9.4vw,84px); line-height:1; letter-spacing:.005em }
.h2 em{ font-weight:300 }
.lead{ font-weight:300 }
.sec-head--center{ text-align:center }
.sec-head--center .eyebrow{ justify-content:center }
.sec-rule{ display:block; width:48px; height:1px; background:var(--car); margin:22px auto 0 }

.btn{ border-radius:2px; min-height:54px; padding:0 34px; font-size:10.5px; font-weight:500; letter-spacing:.24em }
.btn--sm{ min-height:40px; padding:0 20px; font-size:10px }
.btn--line{ --bd:rgba(46,33,24,.35) }
.btn--light-solid{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream) }
.btn--light-solid::after{ background:var(--car) }
@media (hover:hover){ .btn--light-solid:hover{ color:var(--cream); border-color:var(--car) } }
.link-arrow{ border-bottom:0; font-size:10.5px; letter-spacing:.22em; padding:6px 0 }
.dock{ border-radius:4px } .dock > *{ border-radius:2px }

/* Capa em tela cheia */
.hero{ position:relative; height:100vh; height:100svh; min-height:640px; padding:0; overflow:hidden; display:flex; align-items:flex-end; background:#C9A27E }
.hero__bg{ position:absolute; inset:0 }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:60% 20%; will-change:transform }
.hero__veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(239,232,221,.0) 30%, rgba(239,232,221,.55) 52%, rgba(239,232,221,.92) 70%, var(--bg) 88%) }
.hero__inner{ position:relative; z-index:2; padding-bottom:34px }
.hero__kicker{ margin:0 0 14px; font:500 10px/1.4 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--ink); opacity:.75 }
.hero__title{ margin:0; font:300 clamp(42px,12.4vw,104px)/.98 var(--serif); text-transform:uppercase; letter-spacing:.005em; color:var(--ink) }
.hero__title em{ text-transform:none; color:var(--car-d); font-weight:300 }
.hero__rule{ display:block; width:56px; height:1px; background:currentColor; opacity:.5; margin:22px 0 }
.hero__lead{ margin:0 0 24px; max-width:26em; color:var(--ink); opacity:.82 }
.hero .badge{ left:auto; right:var(--gut); top:calc(var(--hdr) + 18px); width:96px; height:96px; background:transparent; box-shadow:none }
.hero .badge text{ fill:var(--cream); font-size:13px; letter-spacing:.24em }
.hero .badge img{ width:30px }
.hero .badge::before{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(248,244,238,.55) }
@media (min-aspect-ratio:1/1){
  .hero{ align-items:center }
  .hero__bg img{ object-position:0% 35% }
  .hero__veil{ background:linear-gradient(90deg, rgba(0,0,0,0) 45%, rgba(214,180,148,.25) 70%, rgba(214,180,148,.35) 100%) }
  .hero__inner{ display:flex; justify-content:flex-end; padding-bottom:0 }
  .hero__copy{ width:min(46%,560px); margin-right:2vw }
  .hero__title{ font-size:clamp(56px,6.2vw,112px) }
  .hero__title em{ color:var(--ink) }
  .hero .badge{ top:auto; bottom:6vh; right:4vw; width:132px; height:132px }
  .hero .badge img{ width:40px }
}

/* Barra de diferenciais */
.values-bar{ list-style:none; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; padding-block:6px; border-bottom:1px solid var(--line) }
.values-bar li{ display:flex; align-items:center; gap:14px; padding:20px 4px }
.values-bar svg{ flex:0 0 28px; width:28px; height:28px; fill:none; stroke:var(--car); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round }
.values-bar span{ font:500 9.5px/1.5 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--ink) }
@media (min-width:900px){
  .values-bar{ grid-template-columns:repeat(4,1fr); padding-block:18px }
  .values-bar li{ justify-content:center; border-left:1px solid var(--line) }
  .values-bar li:first-child{ border-left:0 }
}

/* Especialidades em cards */
.pillars{ padding:100px 0 110px }
.pillars__grid{ display:grid; gap:22px; max-width:1040px; margin:0 auto }
.pillar{ background:var(--cream2); display:flex; flex-direction:column }
.pillar__media{ aspect-ratio:4/3; overflow:hidden; border-radius:0; width:100% }
.pillar__media img{ width:100%; height:100%; object-fit:cover }
.pillar__body{ padding:26px 24px 28px; display:grid; grid-template-columns:34px 1fr; column-gap:16px; align-items:start }
.pillar__icon{ grid-row:1 / span 3; width:30px; height:30px; fill:none; stroke:var(--car); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; margin-top:4px }
.pillar__title{ margin:0 0 8px; font:400 28px/1.1 var(--serif); text-transform:uppercase; letter-spacing:.02em }
.pillar__body p{ margin:0 0 14px; color:var(--mut); font-size:14px }
.pillar__body .link-arrow{ justify-self:start; color:var(--ink) }
@media (min-width:800px){
  .pillars{ padding:150px 0 160px }
  .pillars__grid{ grid-template-columns:1fr 1fr; gap:28px }
  .pillar:nth-child(2){ margin-top:0 }
  .pillar__media{ width:100%; aspect-ratio:5/4 }
}

/* Resultados: abas sublinhadas */
.filters{ gap:22px }
.filters button{ min-height:auto; padding:0 0 8px; border:0; border-bottom:1px solid transparent; border-radius:0; letter-spacing:.24em }
.filters button.is-on{ background:none; color:var(--ink); border-color:var(--car) }
.results .filters button{ border:0; border-bottom:1px solid transparent }
.results .filters button.is-on{ background:none; color:var(--tx-d); border-color:var(--car-l) }
.ba__frame{ border-radius:4px }
.case img{ border-radius:2px }
.results .h2 em{ color:var(--car-l) }

/* Destaque em vídeo */
.feature{ position:relative; z-index:2; background:var(--bg2); padding:96px 0 100px }
.feature__grid{ display:grid; gap:40px; align-items:center }
.feature__media{ position:relative; margin:0; justify-self:center; width:min(78vw,440px); aspect-ratio:4/5; overflow:hidden; border-radius:999px 999px 4px 4px; background:var(--esp2) }
.feature__media video{ width:100%; height:100%; object-fit:cover }
.feature__media figcaption{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:8px 14px; background:rgba(248,244,238,.85); backdrop-filter:blur(6px);
  font:500 9.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--ink); white-space:nowrap }
.feature__media figcaption i{ width:26px; height:1px; background:var(--car) }
.feature__sym{ width:30px; height:auto; margin-bottom:22px }
.feature__title{ margin:0 0 18px; font:300 clamp(32px,8vw,60px)/1.08 var(--serif) }
.feature__title em{ color:var(--car-d) }
.feature__note{ margin:18px 0 26px; font:500 10px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--mut) }
@media (min-width:900px){
  .feature{ padding:150px 0 }
  .feature__grid{ grid-template-columns:1fr 1fr; gap:90px }
  .feature__media{ width:100%; max-width:460px; justify-self:end }
}

/* Tratamentos */
.treat{ background:var(--cream) }
.tlist li > button{ font-weight:400; font-size:clamp(22px,6vw,32px) }
.tlist__img{ border-radius:2px }
.treat__media .arch{ border-radius:999px 999px 4px 4px }

/* Clínica em foto cheia */
.clinic{ position:relative; z-index:3; min-height:92svh; padding:0; display:flex; align-items:flex-end; overflow:hidden; color:var(--tx-d); background:var(--esp) }
.clinic__bg{ position:absolute; inset:-8% 0 }
.clinic__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 40% }
.clinic::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(42,31,23,.15) 0%, rgba(42,31,23,.55) 45%, rgba(42,31,23,.92) 85%) }
.clinic .tag-proj{ left:auto; right:var(--gut); top:calc(var(--hdr) + 14px); z-index:2; background:rgba(42,31,23,.5); color:var(--tx-d) }
.clinic__copy{ position:relative; z-index:2; padding-block:120px 70px }
.clinic__kicker{ margin:0 0 16px; font:500 10px/1.4 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--car-l) }
.clinic .h2{ color:var(--tx-d) }
.clinic .h2 em{ color:var(--car-l) }
.clinic .hero__rule{ color:var(--tx-d) }
.clinic__lead{ margin:0 0 28px; max-width:30em; color:rgba(243,235,221,.85) }
.clinic .team{ margin-top:26px; color:rgba(243,235,221,.55); opacity:1 }
@media (min-width:900px){
  .clinic{ min-height:100vh; align-items:center }
  .clinic::after{ background:linear-gradient(90deg, rgba(42,31,23,.9) 0%, rgba(42,31,23,.6) 45%, rgba(42,31,23,.1) 100%) }
  .clinic__copy{ padding-block:140px }
  .clinic__copy > *{ max-width:560px }
}
.faq{ background:var(--bg) }
.steps span{ font-weight:300 }
.acc summary{ font-weight:400 }
.foot__title{ font-weight:300 }
@media (min-aspect-ratio:1/1){
  .hero__veil{ background:
    linear-gradient(180deg, rgba(239,232,221,.55) 0%, rgba(239,232,221,0) 16%),
    linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(214,180,148,.22) 75%, rgba(214,180,148,.32) 100%) }
  .hero__copy{ width:min(40%,540px); margin-right:3vw }
  .hero__title{ font-size:clamp(52px,5.4vw,100px) }
}
@media (min-aspect-ratio:1/1){
  .hero__veil{ background:
    radial-gradient(ellipse 22% 16% at 6% 3%, rgba(239,232,221,.82) 0%, rgba(239,232,221,0) 100%),
    linear-gradient(180deg, rgba(239,232,221,.5) 0%, rgba(239,232,221,0) 15%),
    linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(214,180,148,.22) 75%, rgba(214,180,148,.32) 100%) }
}
@media (min-width:900px){ .clinic__bg img{ object-position:100% 45% } }
@media (min-width:900px){
  .clinic__bg{ inset:-8% 0 -8% 44% }
  .clinic__bg img{ object-position:50% 45% }
  .clinic::after{ background:linear-gradient(90deg, var(--esp) 44%, rgba(42,31,23,.55) 52%, rgba(42,31,23,.08) 72%, rgba(42,31,23,0) 100%) }
}
/* Capa no celular: foto ocupa o topo inteira, texto embaixo na areia */
@media (max-aspect-ratio:1/1){
  .hero{ background:var(--bg) }
  .hero__bg{ bottom:auto; height:64% }
  .hero__bg img{ object-position:50% 30% }
  .hero__veil{ background:
    linear-gradient(180deg, rgba(239,232,221,.45) 0%, rgba(239,232,221,0) 12%, rgba(239,232,221,0) 40%, rgba(239,232,221,.7) 56%, var(--bg) 64%) }
  .hero__inner{ padding-bottom:30px }
  .hero__kicker{ font-size:9px; letter-spacing:.22em; white-space:nowrap; margin-bottom:12px }
  .hero__title{ font-size:clamp(38px,11.2vw,72px) }
  .hero__rule{ margin:16px 0 }
  .hero__lead{ font-size:14px; margin-bottom:20px }
  .hero .badge{ width:80px; height:80px; top:calc(var(--hdr) + 10px) }
  .hero .badge img{ width:24px }
}
@media (max-width:480px){
  .hero__ctas .btn--line{ display:none }
  .hero__ctas .btn--solid{ width:100% }
}
@media (max-aspect-ratio:1/1){
  .hero__veil{ background:
    radial-gradient(ellipse 60% 10% at 22% 4%, rgba(239,232,221,.8) 0%, rgba(239,232,221,0) 100%),
    linear-gradient(180deg, rgba(239,232,221,.4) 0%, rgba(239,232,221,0) 12%, rgba(239,232,221,0) 40%, rgba(239,232,221,.7) 56%, var(--bg) 64%) }
}
/* Clínica no celular: foto em cima, texto embaixo no café */
@media (max-width:899px){
  .clinic{ flex-direction:column; align-items:stretch; justify-content:flex-end; min-height:0 }
  .clinic__bg{ inset:0 0 auto 0; height:430px }
  .clinic__bg img{ object-position:50% 40% }
  .clinic::after{ background:linear-gradient(180deg, rgba(42,31,23,.25) 0px, rgba(42,31,23,0) 120px, rgba(42,31,23,0) 250px, var(--esp) 430px) }
  .clinic__copy{ padding-block:360px 70px }
}

/* ==========================================================================
   RODADA 3
   ========================================================================== */
:root{ --sand:#D8C1A6; --sand-a:216,193,166 }
/* Capa: esfumado em areia, do mesmo tom da parede */
.hero{ background:var(--sand) }
@media (max-aspect-ratio:1/1){
  .hero__veil{ background:
    radial-gradient(ellipse 60% 10% at 22% 4%, rgba(var(--sand-a),.85) 0%, rgba(var(--sand-a),0) 100%),
    linear-gradient(180deg, rgba(var(--sand-a),.35) 0%, rgba(var(--sand-a),0) 12%, rgba(var(--sand-a),0) 38%, rgba(var(--sand-a),.75) 54%, var(--sand) 64%) }
}
@media (min-aspect-ratio:1/1){
  .hero__veil{ background:
    radial-gradient(ellipse 22% 16% at 6% 3%, rgba(var(--sand-a),.85) 0%, rgba(var(--sand-a),0) 100%),
    linear-gradient(180deg, rgba(var(--sand-a),.5) 0%, rgba(var(--sand-a),0) 15%),
    linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(var(--sand-a),.18) 75%, rgba(var(--sand-a),.3) 100%) }
}
.values-bar{ position:relative; border-bottom:0; box-shadow:0 0 0 100vmax var(--sand); clip-path:inset(0 -100vmax); background:var(--sand) }
.values-bar li{ border-color:rgba(46,33,24,.14) }
.pillars{ background:linear-gradient(180deg, var(--sand) 0, var(--bg) 260px) }
.hdr .logo img{ transition:filter .5s var(--ease) }
.hdr:not(.is-solid):not(.is-dark) .logo img{ filter:brightness(.42) saturate(1.2) }

/* Especialidades: foto em arco, texto centralizado */
.pillar{ background:var(--cream2); padding:28px 22px 30px; align-items:center; text-align:center }
.pillar__media.arch{ width:min(100%,340px); aspect-ratio:4/5; border-radius:999px 999px 4px 4px; margin:0 auto }
.pillar__media.arch img{ object-position:50% 45% }
.pillar__body{ display:flex; flex-direction:column; align-items:center; padding:26px 4px 0; max-width:30em }
.pillar__icon{ margin:0 0 14px }
.pillar__body .link-arrow{ justify-self:auto }
@media (min-width:800px){
  .pillar{ padding:44px 40px 44px }
  .pillar__media.arch{ width:min(78%,360px); aspect-ratio:4/5 }
}

/* Casos: miniaturas redondas com borda esfumada */
.cases{ counter-reset:caso; gap:14px; padding-top:10px }
.case{ counter-increment:caso; width:92px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; opacity:.5 }
.case__img{ position:relative; display:block; width:84px; height:84px; border-radius:50% }
.case__img img{ width:100%; height:100%; object-fit:cover; border-radius:50%; margin:0; outline:0 !important;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 48%, rgba(0,0,0,.55) 62%, transparent 71%);
          mask-image:radial-gradient(circle at 50% 50%, #000 48%, rgba(0,0,0,.55) 62%, transparent 71%);
  transition:transform .6s var(--ease) }
.case__img::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--car-l); opacity:0; transform:scale(.9); transition:all .5s var(--ease) }
.case.is-on .case__img::after{ opacity:1; transform:none }
.case__txt{ display:grid; gap:4px }
.case__txt small{ font:500 8.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--car-l) }
.case__txt span{ font:400 15px/1.15 var(--serif); letter-spacing:0; text-transform:none; color:var(--tx-d) }
@media (hover:hover){ .case:hover{ opacity:.85 } .case:hover .case__img img{ transform:scale(1.06) } }
.case.is-on{ opacity:1 }
@media (min-width:900px){
  .cases{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-d) }
  .case{ width:100%; flex-direction:row; gap:20px; text-align:left; padding:14px 0; border-bottom:1px solid var(--line-d) }
  .case::before{ content:counter(caso, decimal-leading-zero); order:3; margin-left:auto; font:300 22px/1 var(--serif); color:var(--mut-d) }
  .case.is-on::before{ color:var(--car-l) }
  .case__img{ width:72px; height:72px; flex:0 0 72px }
  .case__txt span{ font-size:21px }
  .case img{ aspect-ratio:auto }
}

/* 3 passos: título curto e respiros menores no celular */
.steps__eyebrow{ margin:0 0 18px }
@media (max-width:899px){
  .faq{ padding:56px 0 80px }
  .steps{ margin-bottom:56px }
  .steps li{ padding:16px 0 }
  .clinic__copy{ padding-bottom:52px }
}
@media (min-width:900px){ .steps__eyebrow{ margin-bottom:28px } }
.pillar__media.arch img{ object-position:50% 100%; transform-origin:50% 100% }
.case[data-case^="testa"] .case__img img{ object-position:50% 72%; scale:1.5 }
.case[data-case="mandibula"] .case__img img{ object-position:50% 40% }
.case[data-case^="testa"] .case__img img{ object-position:50% 100%; scale:1 }
.case[data-case^="testa"] .case__img img{ object-position:50% 50% }

/* ==========================================================================
   RODADA 4
   ========================================================================== */
/* Capa em telas quase quadradas (iPad deitado, notebook pequeno): a foto anda para a esquerda para o texto não cobrir o rosto */
@media (min-aspect-ratio:1/1) and (max-aspect-ratio:3/2){
  .hero__bg{ left:-18% }
  .hero__copy{ width:min(40%,460px); margin-right:2vw }
  .hero__title{ font-size:clamp(44px,5vw,80px) }
}
@media (min-aspect-ratio:3/2) and (max-aspect-ratio:8/5){
  .hero__bg{ left:-8% }
}
/* Sorriso das especialidades: foto nova já vem centralizada */
.pillar__media.arch img[src*="hero-sorriso"]{ object-position:50% 50%; transform-origin:50% 60% }
/* Capa no celular: o texto começa sempre abaixo do queixo (a capa cresce se precisar) */
@media (max-aspect-ratio:1/1){
  .hero{ height:auto; min-height:0; padding-top:calc(64svh - 24px) }
  .hero__bg{ height:64svh }
  .hero__veil{ inset:0 0 auto 0; height:calc(64svh + 2px); background:
    radial-gradient(ellipse 60% 16% at 22% 6%, rgba(var(--sand-a),.85) 0%, rgba(var(--sand-a),0) 100%),
    linear-gradient(180deg, rgba(var(--sand-a),.35) 0%, rgba(var(--sand-a),0) 18%, rgba(var(--sand-a),0) 70%, rgba(var(--sand-a),.75) 88%, var(--sand) 100%) }
}

/* Tela de abertura (igual ao site do Dr. Edu, nas cores da Verbena) */
.loader{ display:none }
.js .loader{ position:fixed; inset:0; z-index:2000; background:var(--sand); display:grid; place-items:center; align-content:center; gap:20px; clip-path:inset(0 0 0 0) }
.no-anim .loader{ display:none }
.loader__sym{ width:52px; height:auto; clip-path:inset(100% 0 0 0) }
.loader__word{ width:min(52vw,210px); height:auto; clip-path:inset(0 100% 0 0) }
.loader__line{ width:110px; height:1px; margin-top:6px; background:rgba(42,31,23,.14); overflow:hidden }
.loader__line i{ display:block; height:100%; background:var(--car); transform:scaleX(0); transform-origin:left }
.seen .loader__sym, .seen .loader__word{ clip-path:none }
.seen .loader__line i{ transform:none }
/* Capa no celular: a foto se desfaz sozinha no areia (sem emenda quando ela se move) */
@media (max-aspect-ratio:1/1){
  .hero__bg{ overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%); mask-image:linear-gradient(180deg,#000 68%,transparent 100%) }
  .hero__veil{ background:
    radial-gradient(ellipse 60% 16% at 22% 6%, rgba(var(--sand-a),.85) 0%, rgba(var(--sand-a),0) 100%),
    linear-gradient(180deg, rgba(var(--sand-a),.35) 0%, rgba(var(--sand-a),0) 18%) }
}

.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0 }

/* Textos novos dos tratamentos de sorriso (10/11) */
.tlist__body p{ margin:0 0 12px }
.tlist__label{ margin:6px 0 8px !important; font:500 10px/1.3 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--car) }
.tlist__steps{ list-style:none; margin:0 0 14px; padding:0; border-top:1px solid var(--line) }
.tlist__steps li{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line) !important; font-size:13.5px; line-height:1.45 }
.tlist__steps li span:first-child{ font:400 19px/1.2 var(--serif); color:var(--ink) }
.tlist__steps li span:last-child{ opacity:.75; text-align:right }
.tlist__steps--stack li{ flex-direction:column; gap:4px }
.tlist__steps--stack li span:last-child{ text-align:left }
.tlist__more{ font-size:13.5px; opacity:.9 }

/* Endereço no rodapé */
.foot__cols p a{ line-height:1.6 }

/* Barra fixa (11/11): escondida de verdade enquanto não entra.
   No Safari novo do iPhone a página aparece por baixo da barra do navegador, então só empurrar para baixo deixava a barra à vista. */
.dock{ opacity:0; visibility:hidden; transition:transform .8s var(--ease), opacity .35s var(--ease), visibility 0s .8s }
.dock.is-on{ opacity:1; visibility:visible; transition:transform .8s var(--ease), opacity .35s var(--ease), visibility 0s }
.menu.is-open ~ .dock{ opacity:0; visibility:hidden }

/* Cabeçalho fixo no iPhone (11/11): o Safari novo mostra a página por baixo da faixa do relógio.
   1) a cor de fundo vai no próprio cabeçalho, que é de onde o Safari tira a cor dessa faixa;
   2) o fundo do cabeçalho também sobe além do topo da tela, para cobrir a faixa. */
.hdr{ transition:transform .7s var(--ease), color .5s var(--ease), background-color .5s var(--ease) }
.hdr::before{ top:-160px }
.hdr.is-solid:not(.menu-open){ background-color:#EFE8DD }
.hdr.is-solid.is-dark:not(.menu-open){ background-color:#2A1F17 }