/* Paleta oficial do manual de marca (id-dracamilaxisto.pdf):
   #605D4D oliva · #BBB39E sage · #A48775 terracota · #F7F2ED cru */
:root{
  --paper:#F7F2ED; --paper-2:#F0EAE1; --sand:#DFD7C8;
  --espresso:#4B4939; --ink:#605D4D; --body:#55514A; --muted:#6E6A5F;
  --gold:#A48775; --gold-2:#7A5F4E; --sage:#BBB39E;
  --line:#E7E1D6; --line-2:#DAD3C4;
  --serif:"Fraunces",Georgia,serif; --sans:"Kumbh Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;
  --cru-rgb:247,242,237;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--sans);color:var(--body);background:var(--paper);line-height:1.65;overflow-x:clip;max-width:100vw;-webkit-font-smoothing:antialiased}
img,iframe{max-width:100%;display:block}
em{font-style:italic;color:var(--gold);font-variation-settings:"opsz" 144}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:760px}
.wrap--wide{max-width:1320px}

/* tipografia */
.eyebrow{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);font-weight:600}
.eyebrow--muted{color:var(--muted)}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.04;letter-spacing:-.025em;color:var(--ink);text-wrap:balance;margin:.55rem 0 1rem}
.h2--light{color:var(--paper)}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:48ch}
.lead--center{margin:0 auto;text-align:center}
.lead--light{color:#DED8CB;max-width:54ch;margin:0 auto}

/* botoes */
.btn{font-family:var(--sans);font-weight:600;font-size:.96rem;border:0;border-radius:2px;padding:1rem 1.9rem;cursor:pointer;position:relative;overflow:hidden;transition:color .4s var(--ease);letter-spacing:.01em;display:inline-block}
.btn>*{position:relative;z-index:1}
.btn--primary{background:var(--espresso);color:var(--paper)}
.btn--primary::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .45s var(--ease);z-index:0}
.btn--primary:hover::before{transform:translateY(0)}
.btn--primary:hover{color:var(--espresso)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--full{width:100%;margin-top:.4rem}
/* CTA primario sobre secao escura: claro em repouso, dourado no hover */
.section--cta .btn--primary{background:var(--paper);color:var(--espresso)}

/* marca — o lockup e o símbolo do manual são PNG que nunca entrou no repositório:
   logo-lockup.png e logo-mark.png respondem 404 no ar. Como as duas classes usavam
   esses arquivos em mask-image, a máscara falhava e não pintava nada: a marca ficava
   invisível na nav, no rodapé e nos ornamentos das sete LPs. Enquanto o arquivo não
   chega, a marca é tipográfica, como a /clinica/ já faz em institucional.css.
   Quando o PNG entrar em assets/, devolva as linhas de mask-image e o
   background-color:currentColor, que é o desenho original. */
.logo{display:block;color:currentColor}
.logo--lockup{font-family:var(--serif);font-weight:300;font-size:1.42rem;line-height:1.05;
  letter-spacing:.01em;white-space:nowrap}
/* o nome vem do aria-label, que toda marcação já traz. role="img" torna o elemento
   folha para o leitor de tela, então o texto gerado não é anunciado duas vezes. */
.logo--lockup::before{content:attr(aria-label)}
/* losango, o mesmo ornamento que a /clinica/ usa no lugar do símbolo.
   A dupla classe é de propósito: .cta-final__mark e .success__mark declaram
   display mais abaixo nesta folha e, com um seletor só, venceriam o grid —
   o ::before voltava a ser inline e o losango saía como um risco vertical. */
.logo.logo--mark{width:44px;height:38px;display:grid;place-items:center}
.logo--mark::before{content:"";display:block;width:56%;height:56%;
  border:1px solid currentColor;transform:rotate(45deg)}
.logo--mark-lg{width:74px;height:64px}
/* no rodapé o nome já vem na linha do CRO, logo abaixo. Com o lockup em texto,
   ele apareceria duas vezes seguidas; com o PNG no lugar, não aparecia. Some. */
.logo.footer__brand{display:none}
@media(max-width:560px){.logo--lockup{font-size:1.2rem}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.nav__inner{max-width:var(--wrap);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.nav:not(.is-scrolled){background:linear-gradient(to bottom,rgba(var(--cru-rgb),.92),rgba(var(--cru-rgb),0))}
.nav.is-scrolled{background:rgba(var(--cru-rgb),.85);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.nav__brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink)}
.nav__actions{display:flex;align-items:center;gap:.85rem}
.nav__cta{color:var(--ink);border-color:var(--ink)}
.nav__cta:hover{color:var(--paper)}
.nav__ig{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;
  color:var(--ink);text-decoration:none;
  transition:color .35s var(--ease),background .35s var(--ease)}
.nav__ig svg{width:20px;height:20px}
.nav__ig:hover{color:var(--paper);background:var(--ink)}
@media(max-width:560px){.nav__cta{display:none}}

/* hero — mobile: foto no topo + texto embaixo no cru (sem cobrir o rosto)
          desktop: full-bleed com a Dra. a direita */
.hero{position:relative;display:block;background:var(--paper);isolation:isolate;overflow:hidden}
.hero__media{position:relative;height:46svh;min-height:270px;background-image:url("hero-mobile-v4.webp");
  background-size:cover;background-position:center 22%;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 76%,transparent 100%)}
.hero__overlay{display:none}
.hero__inner{padding:clamp(6px,2vw,16px) 24px clamp(46px,9vw,64px);max-width:var(--wrap);margin:0 auto;width:100%;position:relative;z-index:1}
.hero__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.35rem,8.4vw,3.4rem);line-height:1.06;letter-spacing:-.025em;color:var(--ink);text-wrap:balance;margin:.7rem 0 1rem;max-width:18ch}
.hero__sub{font-size:clamp(1.05rem,4.4vw,1.22rem);color:var(--body);max-width:40ch;margin-bottom:1.5rem}
.hero__actions{margin-bottom:1.2rem}
.hero__sign{font-size:.82rem;letter-spacing:.04em;color:var(--gold-2);font-weight:600}

@media(min-width:880px){
  .hero{display:flex;align-items:center;min-height:100svh}
  .hero__media{position:absolute;inset:0;height:auto;min-height:0;
    background-image:url("hero-desktop-v3.webp");background-position:right center;z-index:-2;
    -webkit-mask-image:none;mask-image:none}
  .hero__overlay{display:block;position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to right,rgba(var(--cru-rgb),.97) 0%,rgba(var(--cru-rgb),.9) 30%,rgba(var(--cru-rgb),.5) 48%,rgba(var(--cru-rgb),.04) 66%)}
  .hero__inner{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:0 24px}
  .hero__title{font-size:clamp(3.2rem,4.6vw,4.9rem);max-width:16ch}
  .hero__sub{font-size:1.18rem}
}

/* secoes */
.section{padding:clamp(66px,9vw,124px) 0;position:relative}
.section--paper{background:var(--paper)}
.section--cream2{background:var(--paper-2)}
.section--marble{background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.section__head{text-align:center;max-width:760px;margin:0 auto clamp(38px,5vw,60px)}
.grid-2{display:grid;gap:clamp(30px,5vw,68px)}
@media(min-width:860px){.grid-2{grid-template-columns:1.05fr .95fr;align-items:center}.grid-2--rev>:first-child{order:2}}

/* secoes full-bleed (mesma linguagem cinematografica do hero) */
.fb{position:relative;min-height:92svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;background:var(--paper)}
.fb__media{position:absolute;inset:0;background-size:cover;background-position:center top;z-index:-2;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.fb__overlay{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(var(--cru-rgb),.99) 0%,rgba(var(--cru-rgb),.97) 36%,rgba(var(--cru-rgb),.62) 54%,rgba(var(--cru-rgb),0) 76%)}
.fb__inner{max-width:var(--wrap);margin:0 auto;width:100%;padding:0 24px calc(8vh + 16px)}
.fb__panel{max-width:34rem}

@media(min-width:880px){
  .fb{align-items:center;min-height:90svh}
  .fb__inner{display:flex;padding:56px 24px}
  .fb--left .fb__media{background-position:right center}
  .fb--left .fb__overlay{background:linear-gradient(to right,rgba(var(--cru-rgb),.98) 0%,rgba(var(--cru-rgb),.92) 30%,rgba(var(--cru-rgb),.52) 48%,rgba(var(--cru-rgb),.04) 66%)}
  .fb--left .fb__inner{justify-content:flex-start}
  .fb--right .fb__media{background-position:left center}
  .fb--right .fb__overlay{background:linear-gradient(to left,rgba(var(--cru-rgb),.98) 0%,rgba(var(--cru-rgb),.92) 30%,rgba(var(--cru-rgb),.52) 48%,rgba(var(--cru-rgb),.04) 66%)}
  .fb--right .fb__inner{justify-content:flex-end}
}

/* imagem por secao (mobile portrait / desktop landscape) */
.fb--sobre .fb__media{background-image:url("sobre-mobile-v4.webp")}
.fb--local .fb__media{background-image:url("torre-mobile-v1.webp");background-position:center 62%}
@media(min-width:880px){
  .fb--sobre .fb__media{background-image:url("sobre-desktop-v4.webp")}
  .fb--local .fb__media{background-image:url("torre-desktop-v1.webp");background-position:center 58%}
}

/* mobile: full-bleed reflow para imagem-banda no topo + texto embaixo no creme
   (texto longo nao cabe sobreposto sem invadir o rosto) */
@media(max-width:879px){
  .fb{display:block;min-height:0;align-items:stretch}
  .fb__media{position:relative;inset:auto;height:56svh;background-position:center;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%)}
  .fb__overlay{display:none}
  .fb__inner{padding:clamp(22px,5vw,32px) 24px clamp(44px,10vw,64px)}
  .fb__panel{max-width:none}
}


/* localizacao: a fachada tem ceu claro, entao o veu do lado do texto e mais forte */
.fb--local .fb__overlay{background:linear-gradient(to top,rgba(var(--cru-rgb),.995) 0%,rgba(var(--cru-rgb),.98) 40%,rgba(var(--cru-rgb),.7) 58%,rgba(var(--cru-rgb),.1) 80%)}
@media(min-width:880px){
  .fb--local .fb__overlay{background:linear-gradient(to right,rgba(var(--cru-rgb),.99) 0%,rgba(var(--cru-rgb),.96) 34%,rgba(var(--cru-rgb),.6) 52%,rgba(var(--cru-rgb),.12) 72%)}
}

/* passos empilhados (metodo, sobre o fundo full-bleed) */
.steps--stack{display:flex;flex-direction:column;gap:1.2rem;margin-top:1.6rem;max-width:33rem}
.steps--stack .step{padding:0;display:flex;gap:.95rem;align-items:flex-start}
.steps--stack .step__n{font-size:1.5rem;line-height:1;flex:none;margin-top:.1rem}
.steps--stack .step h3{font-family:var(--serif);font-weight:400;font-size:1.18rem;color:var(--ink);margin:0 0 .2rem}
.steps--stack .step p{font-size:.96rem;color:var(--muted)}

/* listas */
.ticks{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin-top:1.2rem}
.ticks li{position:relative;padding-left:1.8rem;color:var(--body);font-size:1.03rem}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;border-radius:50%;background:var(--gold)}

/* dores: linhas com marca dourada + filete (estilo da referencia), nao cards */
.pains{list-style:none;margin-top:1.7rem;max-width:32rem}
.pains li{position:relative;padding:1rem 0 1rem 1.9rem;border-bottom:1px solid var(--line);color:var(--body);font-size:1.05rem}
.pains li::before{content:"✦";position:absolute;left:0;top:1.05rem;color:var(--gold);font-size:.9rem}

/* dor — cards refinados + animados */
.pains-sec__head{max-width:820px;margin:0 0 clamp(36px,4.6vw,58px)}
.pains-sec__lead{margin-top:1.1rem}
.paincards{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px)}
@media(min-width:780px){.paincards{grid-template-columns:repeat(3,1fr)}}
.paincard{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(26px,2.6vw,40px);border:1px solid var(--line-2);border-radius:16px;
  background:linear-gradient(165deg,var(--paper-2),var(--paper));
  box-shadow:0 1px 2px rgba(75,73,57,.04)}
.paincards .paincard{transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease),opacity .75s var(--ease)}
.paincard[data-reveal]{opacity:0;transform:translateY(24px)}
.paincard[data-reveal].is-in{opacity:1;transform:none}
.paincard:hover{transform:translateY(-8px);box-shadow:0 26px 50px -22px rgba(75,73,57,.34);border-color:var(--gold)}
.paincard__num{position:absolute;top:.35rem;right:1.1rem;z-index:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,4.4vw,4.2rem);line-height:1;color:var(--sand);opacity:.75;pointer-events:none;
  transition:color .55s var(--ease),opacity .55s var(--ease)}
.paincard:hover .paincard__num{color:var(--gold);opacity:.4}
.paincard__icon{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;margin-bottom:1.4rem;
  color:var(--gold-2);border-radius:50%;background:#EAE4D8;box-shadow:inset 0 0 0 1px rgba(164,135,117,.16);
  transition:background .55s var(--ease),color .55s var(--ease),transform .55s var(--ease)}
.paincard:hover .paincard__icon{background:var(--gold-2);color:var(--paper);transform:scale(1.05)}
.paincard__icon svg{width:32px;height:32px}
.paincard__icon svg [pathLength]{stroke-dasharray:1}
.paincard.is-in .paincard__icon svg [pathLength]{animation:paincardDraw 1.1s var(--ease-out) .15s both}
@keyframes paincardDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.paincard__title{position:relative;z-index:1;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,1.7vw,1.5rem);color:var(--ink);line-height:1.1;margin-bottom:.55rem}
.paincard__title::after{content:"";display:block;width:34px;height:2px;background:var(--gold);
  margin-top:.85rem;border-radius:2px;transition:width .55s var(--ease)}
.paincard:hover .paincard__title::after{width:56px}
.paincard__text{position:relative;z-index:1;color:var(--body);font-size:1rem;line-height:1.6;max-width:32ch}
@media(prefers-reduced-motion:reduce){.paincard.is-in .paincard__icon svg [pathLength]{animation:none}}

/* método: passos */
.steps{list-style:none;display:grid;gap:22px;grid-template-columns:1fr;margin-top:.5rem}
@media(min-width:720px){.steps--3{grid-template-columns:repeat(3,1fr)}}
.step{padding:6px 0}
.step__n{font-family:var(--serif);font-size:2.4rem;font-weight:300;color:var(--gold);line-height:1;display:block}
.step h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--ink);margin:.6rem 0 .5rem}
.step p{font-size:1rem;color:var(--muted)}

/* compare antes/depois — slider grande */
.compare-wrap{max-width:1040px;margin:0 auto}
.compare{--pos:50%;position:relative;width:100%;aspect-ratio:1080/378;overflow:hidden;border-radius:6px;border:1px solid var(--line-2);box-shadow:0 30px 70px -34px rgba(75,73,57,.6);touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize;background:#000}
.compare__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare__divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--gold);transform:translateX(-1px);box-shadow:0 0 0 1px rgba(75,73,57,.12)}
.compare__handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(var(--cru-rgb),.96);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold-2);font-size:1.15rem;letter-spacing:-.1em;box-shadow:0 8px 22px -8px rgba(75,73,57,.55);pointer-events:none}
.compare__tag{position:absolute;bottom:14px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#fff;background:rgba(75,73,57,.62);backdrop-filter:blur(3px);padding:.32rem .7rem;border-radius:2px;pointer-events:none}
.compare__tag--before{left:14px}
.compare__tag--after{right:14px}
.compare__cap{text-align:center;margin-top:1.1rem;font-size:.86rem;letter-spacing:.04em;color:var(--muted)}
.compare__cap b{color:var(--gold-2);font-weight:600}

/* galeria de casos — um comparador por caso, um visível de cada vez */
.cases{max-width:860px;margin:0 auto}
.itero__grid .cases{max-width:none}
.case{display:none}
.case.is-active{display:block;animation:caseIn .5s var(--ease-out)}
@keyframes caseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cases__nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.6rem}
.cases__dots{display:flex;gap:.55rem}
.cases__dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--gold);background:transparent;
  padding:0;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease)}
.cases__dot[aria-current="true"]{background:var(--gold);transform:scale(1.25)}
.cases__arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:transparent;
  color:var(--gold-2);font-size:1.1rem;cursor:pointer;line-height:1;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.cases__arrow:hover{background:var(--gold);color:var(--paper);border-color:var(--gold)}
.cases__count{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* comparador em proporcao de retrato de sorriso */
.compare--smile{aspect-ratio:3/2;background:var(--sand)}
.compare--plan{aspect-ratio:1100/760;background:var(--sand)}

/* iTero — planejamento digital */
.itero__grid{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
.itero__grid .h2{font-size:clamp(2.2rem,3.4vw,3.1rem)}
@media(min-width:900px){.itero__grid{grid-template-columns:.85fr 1.15fr}}
.itero__note{margin-top:1.4rem;padding-left:1.1rem;border-left:2px solid var(--gold);
  font-size:.95rem;color:var(--muted);max-width:38ch}

/* ============ JORNADA DO PACIENTE ============
   fundo cinematografico + trilha que se desenha conforme a pagina rola */
.jornada{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(72px,10vw,132px) 0 clamp(80px,11vw,150px);background:var(--espresso)}
.jornada__media{position:absolute;inset:0;z-index:-2;background-size:cover;
  background-position:center 62%;background-image:url("jornada-mobile-v1.webp")}
.jornada__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(38,37,29,.86) 0%,rgba(38,37,29,.74) 42%,rgba(38,37,29,.9) 100%)}
@media(min-width:880px){
  .jornada__media{background-image:url("jornada-desktop-v1.webp");background-position:center 58%;
    background-attachment:fixed}
  .jornada__veil{background:linear-gradient(to right,rgba(38,37,29,.93) 0%,rgba(38,37,29,.82) 46%,rgba(38,37,29,.6) 100%)}
}
.jornada__inner{position:relative}
.jornada__head{max-width:44rem;margin-bottom:clamp(44px,6vw,72px)}
.jornada__head .h2{color:var(--paper)}
.jornada__head .lead{color:#D9D3C6;max-width:46ch}
.jornada__head .eyebrow{color:var(--sage)}

.trilha{--pad:52px;--rail:16px;list-style:none;position:relative;margin:0;padding:0 0 0 var(--pad);max-width:46rem}
.trilha__rail{position:absolute;left:var(--rail);top:.6rem;bottom:.6rem;width:2px;
  background:rgba(232,226,214,.2);border-radius:2px;overflow:hidden}
.trilha__fill{position:absolute;left:0;top:0;width:100%;height:0;display:block;
  background:linear-gradient(to bottom,var(--sage),var(--gold));
  transition:height .5s var(--ease-out)}
.trilha__step{position:relative;padding:0 0 clamp(32px,4.2vw,50px)}
.trilha__step:last-child{padding-bottom:0}
.trilha__dot{position:absolute;left:calc(var(--rail) - var(--pad) - 6px);top:.5rem;
  width:14px;height:14px;border-radius:50%;background:#2A291F;
  border:2px solid rgba(232,226,214,.32);
  transition:border-color .5s var(--ease),background .5s var(--ease),transform .5s var(--ease)}
.trilha__step.is-on .trilha__dot{background:var(--gold);border-color:var(--gold);transform:scale(1.2)}
.trilha__n{display:none}
.trilha__body{opacity:.42;transform:translateY(10px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.trilha__step.is-on .trilha__body{opacity:1;transform:none}
.trilha__body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.28rem,2.1vw,1.7rem);
  color:var(--paper);line-height:1.15;margin-bottom:.45rem}
.trilha__body p{color:#CFC9BC;font-size:clamp(.98rem,1.4vw,1.05rem);max-width:44ch}
@media(min-width:880px){
  .trilha{--pad:128px;--rail:70px}
  .trilha__n{display:block;position:absolute;left:calc(-1 * var(--pad));top:-.1rem;width:52px;
    text-align:right;font-family:var(--serif);font-weight:300;font-size:2rem;line-height:1;
    color:rgba(232,226,214,.28);transition:color .5s var(--ease)}
  .trilha__step.is-on .trilha__n{color:var(--gold)}
}
@media(prefers-reduced-motion:reduce){
  .trilha__body{opacity:1;transform:none}
  .trilha__fill{transition:none}
  .jornada__media{background-attachment:scroll}
}

/* galeria do equipamento */
.itero__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.itero__gallery figure{overflow:hidden;border-radius:8px;border:1px solid var(--line-2);background:var(--sand)}
.itero__gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.itero__gallery figure:hover img{transform:scale(1.03)}
.itero__gallery-main{grid-column:span 3}
.itero__gallery-main img{aspect-ratio:16/10}

/* carrossel dentro do detalhamento clinico */
.cases--clinical{max-width:none;margin-bottom:1.6rem}
.cases--clinical .compare{border-radius:5px}
.itero__slot{margin-top:1.6rem;padding:1rem 1.15rem;border:1px dashed var(--line-2);border-radius:10px;
  font-size:.84rem;color:var(--muted);background:rgba(var(--cru-rgb),.6)}

/* detalhamento clinico — recolhido por padrao */
.clinical{max-width:1040px;margin:clamp(34px,5vw,56px) auto 0;border-top:1px solid var(--line);padding-top:1.2rem}
.clinical summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.65rem 2px;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--gold-2)}
.clinical summary::-webkit-details-marker{display:none}
.clinical summary::after{content:"+";font-size:1.4rem;letter-spacing:0;transition:transform .3s var(--ease)}
.clinical[open] summary::after{transform:rotate(45deg)}
.clinical__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:1.2rem 0 .4rem}
@media(min-width:640px){.clinical__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.clinical__grid{grid-template-columns:repeat(5,1fr)}}
.clinical__grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;border:1px solid var(--line-2)}
.clinical__cap{font-size:.8rem;color:var(--muted);margin-bottom:.8rem}

/* o espaco */
.space{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){
  .space{grid-template-columns:repeat(2,1fr)}
  .space__item--wide{grid-column:span 2}
}
.space figure{position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--line-2)}
.space img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s var(--ease)}
.space__item--wide img{aspect-ratio:21/9}
.space figure:hover img{transform:scale(1.03)}
.space figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.2rem .95rem;
  font-size:.82rem;letter-spacing:.06em;color:#fff;
  background:linear-gradient(to top,rgba(48,46,37,.72),rgba(48,46,37,0))}


/* CTA depois dos casos */
.casos-cta{margin-top:clamp(38px,5vw,58px);text-align:center;
  padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line)}
.casos-cta p{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);
  color:var(--ink);margin-bottom:1.3rem}

/* telefone e instagram visiveis na localizacao */
.contato{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;margin-top:1.1rem}
.contato__link{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  color:var(--gold-2);font-weight:600;font-size:.95rem;
  transition:color .3s var(--ease)}
.contato__link svg{width:17px;height:17px;flex:none}
.contato__link:hover{color:var(--ink)}
.contato__sep{color:var(--line-2)}
@media(max-width:420px){.contato{flex-direction:column;align-items:flex-start;gap:.5rem}.contato__sep{display:none}}

/* secao do instagram: grid de posts reais linkando pro perfil */
.insta__head{margin-bottom:clamp(30px,4vw,44px)}
.insta__mark{margin:0 auto .9rem;color:var(--gold)}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:640px){.ig-grid{grid-template-columns:repeat(3,1fr);gap:10px}}
@media(min-width:960px){.ig-grid{grid-template-columns:repeat(6,1fr);gap:12px}}
.ig-grid__item{position:relative;display:block;overflow:hidden;border-radius:8px;
  border:1px solid var(--line-2);background:var(--sand);text-decoration:none;
  aspect-ratio:1;isolation:isolate}
.ig-grid__item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.ig-grid__item:hover img{transform:scale(1.06)}
.ig-grid__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(48,46,37,.78),rgba(48,46,37,.05) 62%);
  opacity:0;transition:opacity .45s var(--ease)}
.ig-grid__item:hover .ig-grid__veil,.ig-grid__item:focus-visible .ig-grid__veil{opacity:1}
.ig-grid__cap{position:absolute;left:0;right:0;bottom:0;padding:.85rem .7rem .7rem;
  font-size:.74rem;line-height:1.35;color:#fff;
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ig-grid__item:hover .ig-grid__cap,.ig-grid__item:focus-visible .ig-grid__cap{opacity:1;transform:none}
.insta__foot{text-align:center;margin-top:clamp(28px,4vw,42px)}
.insta__btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.insta__btn svg{width:19px;height:19px;flex:none}
/* no toque nao existe hover: legenda sempre visivel, mais discreta */
@media(hover:none){
  .ig-grid__veil{opacity:1;background:linear-gradient(to top,rgba(48,46,37,.72),rgba(48,46,37,0) 58%)}
  .ig-grid__cap{opacity:1;transform:none;font-size:.68rem}
}

/* prova social */
.proof{text-align:center;max-width:680px;margin:0 auto}
.proof__stars{color:var(--gold);font-size:1.9rem;letter-spacing:.24em;line-height:1}
.proof__score{font-family:var(--serif);font-weight:300;font-size:clamp(4rem,13vw,6.5rem);color:var(--ink);line-height:1;margin:.5rem 0 .25rem;letter-spacing:-.02em}
.proof__label{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600}
.proof__note{margin-top:1.5rem;font-size:1.1rem;color:var(--muted);max-width:50ch;margin-left:auto;margin-right:auto}

/* localizacao */
.addr{margin-top:1.2rem;font-weight:600;color:var(--ink)}
.hours{margin-top:.5rem;color:var(--muted);font-size:.98rem}
.map{border-radius:5px;overflow:hidden;border:1px solid var(--line);min-height:320px;margin-top:clamp(30px,5vw,52px)}
.map iframe{width:100%;height:100%;min-height:320px;border:0}

/* faq */
.faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;padding:20px 2px;font-family:var(--serif);font-size:1.2rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.5rem;transition:transform .3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 20px;color:var(--muted)}

/* cta final */
.section--cta{background:var(--espresso)}
.cta-final{text-align:center}
.cta-final__mark{color:var(--gold);font-size:1.7rem;display:block;margin-bottom:1rem}
.cta-final .lead{margin:0 auto 2rem}

/* footer */
.footer{background:var(--espresso);color:#D9D3C6;padding:58px 0}
.footer__inner{display:grid;gap:28px}
@media(min-width:760px){.footer__inner{grid-template-columns:1fr 1fr;align-items:start}}
.footer__brand{color:var(--paper);display:inline-flex}
.footer__line{margin-top:.7rem;font-size:.92rem}
.footer__muted{color:#B6AF9F}
.footer__legal p{font-size:.8rem;line-height:1.6;color:#C6BFAE;margin-bottom:.6rem}

/* modal */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal__overlay{position:absolute;inset:0;background:rgba(48,46,37,.6);backdrop-filter:blur(4px)}
.modal__dialog{position:relative;background:var(--paper);border-radius:6px;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;padding:clamp(26px,5vw,40px);box-shadow:0 30px 80px rgba(0,0,0,.34);animation:modalIn .4s var(--ease-out)}
@keyframes modalIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal__close{position:absolute;top:12px;right:14px;background:transparent;border:0;font-size:1.7rem;color:var(--muted);cursor:pointer;line-height:1}
.modal__title{font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--ink);margin:.4rem 0 1.2rem}
.modal__sub{color:var(--muted)}
body.is-locked{overflow:hidden}

/* form */
.form{display:flex;flex-direction:column;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.45rem;border:0}
.field>span,.field legend{font-size:.82rem;font-weight:600;color:var(--ink);letter-spacing:.01em}
.field input[type=text],.field input[type=tel]{font-family:var(--sans);font-size:1rem;padding:.9rem .95rem;border:1px solid var(--line-2);border-radius:3px;background:#fff;color:var(--body)}
.field input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.opt{display:flex;align-items:center;gap:.6rem;font-size:.96rem;color:var(--body);cursor:pointer;padding:.15rem 0}
.opt input{accent-color:var(--gold-2);width:18px;height:18px}
.form__err{color:#a3402f;font-size:.85rem}
.form__legal{font-size:.72rem;color:var(--muted);line-height:1.5}
.success__mark{color:var(--gold);font-size:2rem;display:block}
.success__wa{margin-top:1.4rem;display:block;width:100%;text-align:center;text-decoration:none}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* Botão flutuante de WhatsApp — o caminho de fuga de quem não quer preencher
   formulário nenhum. Fica acima do sticky bar do mobile. */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: transform .2s ease;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.06); }
@media (max-width: 640px) {
  .whatsapp-float { bottom: 84px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } }


/* Widget de conversa do WhatsApp — molde CliniAmp
   ------------------------------------------------------------------
   Nasceu na LP do Dr. João Quirino e virou molde em 01/09/2026. Substitui o
   modal de sucesso: em vez de abrir um popup por cima da página, a pessoa
   digita o WhatsApp dentro de uma conversa que já parece começada.

   Todas as cores saem de variáveis com valor de reserva, então o arquivo
   funciona em LP que não tem design system nenhum. Para casar com a marca do
   cliente, defina --wa-marca e --wa-marca-texto no :root da LP.             */

:root {
  --wa-verde: #25D366;
  --wa-marca: var(--brand-navy, var(--cta-primary, #111827));
  --wa-marca-texto: var(--text-on-navy, #fff);
  --wa-fundo: var(--bg-primary, #fff);
  --wa-texto: var(--text-primary, #1f2937);
  --wa-balao-in: var(--bg-secondary, #f3f4f6);
}

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wa-verde);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  transition: transform .2s ease;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.06); }

.wa-chat {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 61;
  width: min(340px, calc(100vw - 40px));
  background: var(--wa-fundo);
  color: var(--wa-texto);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.wa-chat.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.wa-chat__head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  background: var(--wa-marca);
  color: var(--wa-marca-texto);
}
.wa-chat__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .15);
  display: inline-flex; align-items: center; justify-content: center;
}
.wa-chat__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
/* Nem toda LP tem logo em arquivo. A inicial evita o ícone de imagem quebrada. */
.wa-chat__inicial { font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; }
.wa-chat__ident { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.wa-chat__ident strong { font-size: .95rem; font-weight: 600; }
.wa-chat__ident small { font-size: .72rem; opacity: .75; display: flex; align-items: center; gap: .35rem; }
.wa-chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-verde); display: inline-block; }
.wa-chat__close {
  background: none; border: 0; color: inherit;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  opacity: .65; padding: 0 .15rem;
}
.wa-chat__close:hover { opacity: 1; }

.wa-chat__body {
  padding: 1rem;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--wa-fundo);
}
.wa-chat__msg {
  max-width: 85%;
  padding: .55rem .7rem .35rem;
  border-radius: 12px;
  font-size: .87rem;
  line-height: 1.4;
  position: relative;
}
.wa-chat__msg p { margin: 0; }
.wa-chat__msg--in { align-self: flex-start; background: var(--wa-balao-in); border-bottom-left-radius: 4px; }
.wa-chat__msg--out { align-self: flex-end; background: #d9fdd3; color: #111b21; border-bottom-right-radius: 4px; }
.wa-chat__hora { display: block; text-align: right; font-size: .62rem; opacity: .5; margin-top: .15rem; }

.wa-chat__typing { display: inline-flex; gap: 3px; padding: .2rem 0; }
.wa-chat__typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: wa-pulso 1.2s infinite;
}
.wa-chat__typing i:nth-child(2) { animation-delay: .18s; }
.wa-chat__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes wa-pulso { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .85; } }

.wa-chat__cta {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .5rem; padding: .5rem .7rem;
  border-radius: 10px;
  background: var(--wa-verde); color: #fff;
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.wa-chat__cta svg { width: 17px; height: 17px; }

.wa-chat__aviso { margin: 0; padding: 0 1rem .5rem; font-size: .68rem; opacity: .6; }
.wa-chat__erro { margin: 0; padding: 0 1rem .4rem; font-size: .75rem; color: #b91c1c; }

.wa-chat__form { display: flex; gap: .5rem; padding: .75rem 1rem 1rem; align-items: center; }
.wa-chat__input {
  flex: 1 1 auto; min-width: 0;
  padding: .6rem .75rem;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 999px;
  font-size: .9rem;
  font-family: inherit;
  color: var(--wa-texto);
  background: var(--wa-fundo);
}
.wa-chat__input:focus { outline: 2px solid var(--wa-verde); outline-offset: 1px; }
.wa-chat__send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: var(--wa-verde); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.wa-chat__send svg { width: 19px; height: 19px; }
.wa-chat__send:disabled { opacity: .55; cursor: default; }

@media (max-width: 640px) {
  .whatsapp-float { bottom: 84px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
  .wa-chat { bottom: 148px; right: 12px; }
  .wa-chat__body { max-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float, .wa-chat { transition: none; }
  .wa-chat__typing i { animation: none; }
}