/* Dra. Raquel Ribas · v1.1
   Paleta do Canva dela em padrão ZEITH. Um estilo por título (Newsreader romana);
   o único itálico da página é a assinatura dela no fechamento.
   Movimento: tese "primeiro, depois". Todo deslocamento mora dentro de
   prefers-reduced-motion: no-preference. Sem JavaScript, tudo fica visível. */

/* Paleta da Dra., aprovada pelo Founder em 17/09/2026 vendo a tela.
   O lilas de estudio saiu: os retratos agora sao recortes sem fundo sobre cashmere.
   O botao principal e champagne com texto grafite (contraste 5,84:1). Texto branco sobre
   champagne da 2,63:1 e foi recusado. */
:root{
  --paper:#F7F5F1;
  --paper-2:#EFEBE4;
  --sand:#DED6C9;
  --sand-2:#C9BFAE;
  --ink:#292421;
  --ink-2:#43362F;
  --caramel:#8A6F45;
  --caramel-ink:#6B5530;
  --caramel-light:#B69C73;
  --champagne-hi:#CBB68F;
  --night:#292421;
  --night-ink:#F7F5F1;
  --night-muted:#C9BFAE;
  --photo:#C9BFAE;
  --line:rgba(41,36,33,.14);
  --line-strong:rgba(41,36,33,.32);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --fs-display:clamp(2.55rem,1.1rem + 4.6vw,5.5rem);
  --fs-h2:clamp(2.2rem,1.3rem + 3vw,4rem);
  --fs-h3:clamp(1.75rem,1.35rem + 1.5vw,2.6rem);
  --fs-standfirst:clamp(1.6rem,1.1rem + 2vw,2.75rem);
  --fs-signature:clamp(1.75rem,1.2rem + 2vw,2.9rem);
  --fs-lead:clamp(1.08rem,1rem + .4vw,1.28rem);
  --fs-body-lg:clamp(1.06rem,1rem + .3vw,1.2rem);

  --wrap:1240px;
  --gutter:clamp(20px,5vw,56px);
  --section:clamp(96px,11vw,176px);
  /* cabecalho mais alto para a marca caber: o nome dentro do logotipo ocupa cerca de 1/5 da
     altura do arquivo, entao logotipo pequeno = nome ilegivel ao lado do menu */
  --header-h:clamp(80px,7.2vw,108px);
  --radius:24px;
  --radius-photo:22px;
  --arch:50% 50% var(--radius-photo) var(--radius-photo) / 40% 40% var(--radius-photo) var(--radius-photo);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-pen:cubic-bezier(.65,0,.35,1);

  interpolate-size:allow-keywords;
  scrollbar-color:var(--sand-2) var(--paper);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

/* sem scroll-behavior global: a rolagem suave fica só no clique das âncoras (site.js). Global, ela
   atrasava toda rolagem por script, inclusive a de ferramentas de captura, e escondia o fechamento. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 24px);
}
[tabindex="-1"]:focus{outline:none}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,p,ul,ol,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(51,38,31,.08)}
p{text-wrap:pretty}
::selection{background:var(--sand);color:var(--ink)}
:focus-visible{outline:2px solid var(--caramel-ink);outline-offset:3px;border-radius:6px}
.footer :focus-visible{outline-color:var(--caramel-light)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:absolute;left:12px;top:-80px;z-index:100;
  padding:14px 20px;border-radius:999px;
  background:var(--ink);color:var(--paper);
  font-weight:500;text-decoration:none;
}
.skip:focus{top:12px}

.wrap{
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.section{padding-block:var(--section)}
.tint{background:var(--paper-2)}
.center{text-align:center}

/* ---------- tipografia: um estilo por título ---------- */

.display,.h2,.h3,.standfirst,.brand-name,.quote,.signature,.addr,.f-brand,.proof strong,.step h3,.faq summary,.band-track{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-style:normal;
}

/* o título do topo nunca quebra a composição: o tamanho respeita a largura da coluna
   ("Depois o aparelho." mede 8,02em na Newsreader 300; com o recuo, cabe em 10,9cqi) */
.hero-copy{container-type:inline-size}
.display{
  margin-bottom:clamp(24px,2.6vw,36px);
  font-size:var(--fs-display);
  font-size:min(var(--fs-display),10.9cqi);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.032em;
}
.display .line{display:block}
.display .line-2{padding-left:.8em}
@media (max-width:767.98px){
  .display{font-size:min(var(--fs-display),11.6cqi)}
  .display .line-2{padding-left:.4em}
}

.h2{
  font-size:var(--fs-h2);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.h3{
  font-size:var(--fs-h3);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.018em;
  text-wrap:balance;
}

/* máscara de linha: o texto sobe de trás dela; o recuo vertical protege as descendentes e, em cima,
   o acento das maiúsculas (o "Á" de "Área" era cortado com a entrelinha .98 do título grande) */
.line{display:block;overflow-x:visible;overflow-y:clip;padding-top:.16em;margin-top:-.16em;padding-bottom:.12em;margin-bottom:-.12em}
.line-in{display:block}

.standfirst{
  font-size:var(--fs-standfirst);
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.018em;
  color:var(--ink-2);
  text-wrap:balance;
}

.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);max-width:34em}
.body-lg{font-size:var(--fs-body-lg);line-height:1.62}
.muted{color:var(--ink-2)}
p + p{margin-top:1.05em}

.list-title{
  font-family:var(--sans);font-size:.78rem;font-weight:500;line-height:1.4;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);text-wrap:balance;
}

/* ---------- botões e links ---------- */

.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  min-height:54px;padding:0 1.7em;
  border:1px solid transparent;border-radius:999px;
  font-family:var(--sans);font-size:1rem;font-weight:500;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .16s var(--ease-out);
}
.btn::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  transform:translateY(102%);
  transition:transform .28s var(--ease-out);
}
.btn svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease-out)}
/* Champagne com texto grafite: 5,84:1. No hover o champagne clareia e o texto NAO muda de cor:
   7,77:1. Trocar a cor do texto no hover criava um instante de 2,4:1 enquanto o preenchimento
   ainda subia. Branco sobre champagne (2,63:1) nao entra em lugar nenhum. */
.btn-solid{background:var(--caramel-light);color:var(--ink)}
.btn-solid::before{background:var(--champagne-hi)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost::before{background:var(--ink)}
.btn-xl{min-height:62px;padding:0 2em;font-size:1.05rem}
/* telas muito estreitas: o rótulo quebra em vez de ser cortado pelo botão */
@media (max-width:379.98px){
  .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:.7em}
}
.btn:active{transform:scale(.97)}
@media (hover:hover){
  /* o preenchimento sobe sem pressa e sai rápido */
  .btn:hover::before{transform:none;transition-duration:.45s}
  .btn-ghost:hover{color:var(--paper);border-color:var(--ink)}
  .btn:hover svg{transform:rotate(-8deg) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .btn::before{transform:none;opacity:0;transition:opacity .3s}
  .btn:hover::before{opacity:1}
  .btn:hover svg{transform:none}
}
.actions{display:flex;flex-wrap:wrap;gap:12px}

.link-arrow{
  display:inline-flex;align-items:center;gap:.55em;
  min-height:44px;padding:4px 0;
  box-shadow:inset 0 -1px 0 var(--line-strong);
  font-weight:500;text-decoration:none;
  transition:box-shadow .35s var(--ease-out);
}
.link-arrow svg{width:19px;height:19px;flex:none;transition:transform .3s var(--ease-out)}
@media (hover:hover){
  .link-arrow:hover{box-shadow:inset 0 -1px 0 var(--ink)}
  .link-arrow:hover svg{transform:translateX(5px)}
}

/* ---------- cabeçalho ---------- */

.topbar{position:sticky;top:0;z-index:50}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(247,243,238,.9);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .4s var(--ease);
}
.topbar[data-scrolled]::before{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .topbar{transition:transform .42s var(--ease-out)}
  .topbar.is-hidden{transform:translateY(-100%);transition-duration:.26s}
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)}
.topbar-progress{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--caramel);transform-origin:0 50%;
  transform:scaleX(0);
  opacity:0;transition:opacity .4s var(--ease);
}
.topbar[data-scrolled] .topbar-progress{opacity:1}

.brand{display:flex;flex-direction:column;justify-content:center;min-height:48px;text-decoration:none;line-height:1}
/* Logotipo entregue em 17/09. Os arquivos vieram com fundo branco, e o site e porcelana:
   'multiply' faz o branco sumir sobre o fundo claro, sem caixa branca atras da marca. */
/* O nome dentro do arquivo mede cerca de 21% da altura da imagem. A 80px, ele sai com uns 17px:
   um pouco maior que o menu (.95rem), que e o que a marca precisa ser nesta linha. */
.brand-logo{display:block;height:clamp(54px,5.6vw,80px);width:auto;mix-blend-mode:multiply}
/* O rodape e grafite e o arquivo e preto sobre branco: 'multiply' fazia a marca sumir.
   'invert' vira marca branca sobre fundo preto, e 'screen' apaga esse preto contra o rodape.
   Resultado: logotipo branco, sem precisar de um arquivo invertido. */
.f-logo{display:block;height:72px;width:auto;filter:invert(1);mix-blend-mode:screen}
.brand-name{font-size:clamp(1.3rem,1.15rem + .5vw,1.55rem);font-weight:400;letter-spacing:-.012em;transition:color .3s var(--ease)}
@media (hover:hover){.brand:hover .brand-name{color:var(--caramel-ink)}}
.brand-role{margin-top:7px;font-size:.69rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

.nav ul{display:flex;align-items:center;gap:30px}
.nav ul a{position:relative;display:block;padding:12px 0;font-size:.95rem;text-decoration:none;color:var(--ink-2);transition:color .3s var(--ease)}
.nav ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .3s var(--ease-out);
}
.nav ul a[aria-current]{color:var(--ink)}
.nav ul a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}
@media (hover:hover){
  .nav ul a:hover{color:var(--ink)}
  .nav ul a:hover::after{transform:scaleX(1);transform-origin:0 50%}
}
.nav-cta{min-height:48px;padding:0 1.35em;font-size:.94rem}

.menu-toggle{
  display:none;position:relative;z-index:70;
  width:48px;height:48px;padding:0;
  border:1px solid var(--line-strong);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;
}
.bars,.bars::before,.bars::after{
  position:absolute;left:50%;width:18px;height:1px;background:currentColor;
  transition:transform .35s var(--ease-out),background-color .2s var(--ease);
}
.bars{top:50%;transform:translate(-50%,-50%)}
.bars::before,.bars::after{content:"";left:0}
.bars::before{top:-6px}
.bars::after{top:6px}

/* o menu completo só aparece a partir de 1200px: com a Área do Paciente, abaixo disso os itens quebravam em duas linhas */
@media (max-width:1199.98px){
  .menu-toggle{display:block}
  .no-js .menu-toggle{display:none}
  .no-js .nav ul{display:none}

  .js .nav{
    position:fixed;inset:0;z-index:60;
    display:flex;flex-direction:column;justify-content:center;gap:36px;
    padding:112px var(--gutter) 48px;
    background:var(--paper);
    overscroll-behavior:contain;
    visibility:hidden;opacity:0;
    transition:opacity .3s var(--ease),visibility 0s linear .3s;
  }
  .js .nav.is-open{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
  .js .nav ul{flex-direction:column;align-items:flex-start;gap:2px}
  .js .nav ul a{padding:8px 0;font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,1.3rem + 3.4vw,3rem);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
  .js .nav ul a::after{bottom:6px}
  .js .nav .nav-cta{align-self:flex-start;min-height:58px;padding:0 1.8em;font-size:1.02rem}

  body.menu-open{overflow:hidden}
  body.menu-open .bars{background:transparent}
  body.menu-open .bars::before{transform:translateY(6px) rotate(45deg)}
  body.menu-open .bars::after{transform:translateY(-6px) rotate(-45deg)}

  @media (prefers-reduced-motion:no-preference){
    /* abre em .5s, fecha em .3s: sair é resposta, não cena */
    .js .nav{clip-path:inset(0 0 100% 0);opacity:1;transition:clip-path .3s var(--ease-out),visibility 0s linear .3s}
    .js .nav.is-open{clip-path:inset(0);transition:clip-path .5s var(--ease-out)}
    .js .nav li,.js .nav .nav-cta{opacity:0;transform:translateY(24px);transition:opacity .2s var(--ease),transform .2s var(--ease-out)}
    .js .nav.is-open li,.js .nav.is-open .nav-cta{
      opacity:1;transform:none;
      transition:opacity .45s var(--ease),transform .6s var(--ease-out);
      transition-delay:calc(.1s + var(--i,0) * 50ms);
    }
  }
}

@media (min-width:1200px){
  .nav{display:flex;align-items:center;gap:36px}
  .nav ul a{white-space:nowrap}
}

/* ---------- topo ---------- */

.hero{padding-top:clamp(20px,3vw,48px);padding-bottom:clamp(64px,7vw,104px)}
.hero-grid{display:grid;gap:clamp(48px,7vw,80px);align-items:center}
@media (min-width:1120px){
  .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(48px,5vw,88px)}
  .display .line{white-space:nowrap}
}
.hero .lead{margin-bottom:34px}
.hero-meta{margin-top:24px;max-width:34em;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.hero-meta span{display:block}
@media (max-width:519.98px){
  .hero .actions .btn{flex:1 1 100%}
}

.hero-media{position:relative;width:100%;max-width:470px;justify-self:center}
@media (min-width:1120px){.hero-media{justify-self:end}}
.arch-line{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
  transform:translate(16px,-16px);
}
.arch-line path{fill:none;stroke:var(--caramel-light);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:0}
.arch{position:relative;overflow:hidden;aspect-ratio:4 / 5;background:var(--photo);border-radius:var(--arch)}
.arch img{width:100%;height:100%;object-fit:cover}

/* Retrato recortado, sem fundo. Aqui object-fit:cover nao serve: os recortes sao mais altos que
   o quadro 4:5 das fotos originais e o corte comia a cabeca dela. A imagem aparece inteira e ela
   se apoia na base da forma. Foto normal continua com cover; so o recorte usa isto. */
/* arco recebendo imagem clinica 4:3: a curva e em porcentagem, entao acompanha a proporcao */
.arch.clinica{aspect-ratio:4 / 3}
.is-cutout{aspect-ratio:3 / 4}
.is-cutout img{object-fit:contain;object-position:center bottom}
img.is-cutout{aspect-ratio:3 / 4;object-fit:contain;object-position:center bottom}

.proof{position:relative;margin-top:clamp(56px,7vw,96px);display:grid}
.proof::before{
  content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;
  background:var(--line);transform-origin:0 50%;
}
.proof li{padding:22px 0;border-bottom:1px solid var(--line)}
.proof a{display:block;text-decoration:none}
.proof strong{display:block;font-size:1.55rem;font-weight:400;line-height:1.15;letter-spacing:-.01em}
.proof span{display:block;margin-top:4px;font-size:.93rem;color:var(--ink-2);transition:color .3s var(--ease)}
.proof a span span{display:inline;margin:0}
@media (hover:hover){.proof a:hover span{color:var(--ink)}}
@media (min-width:820px){
  .proof{grid-template-columns:repeat(3,1fr)}
  .proof li{padding:30px 36px;border-bottom:0}
  .proof li:first-child{padding-left:0}
  .proof li + li{border-left:1px solid var(--line)}
  .proof li:last-child{padding-right:0}
}

/* ---------- manifesto ---------- */

.manifesto .wrap{text-align:center}
.manifesto-title{max-width:14em;margin-inline:auto}
.standfirst{max-width:22em;margin:clamp(18px,2vw,28px) auto 0}
.manifesto-p{max-width:36em;margin:clamp(36px,4vw,56px) auto 0;color:var(--ink-2)}
.quotes-wrap{margin-top:clamp(64px,8vw,104px)}
.quotes-wrap .list-title{margin-bottom:22px}
.quotes{display:grid;gap:14px;text-align:left}
@media (min-width:880px){.quotes{grid-template-columns:repeat(3,1fr);gap:18px}}
.quote{
  position:relative;
  padding:34px 30px 34px;
  border-radius:var(--radius);
  background:var(--paper);
  font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);
  font-weight:300;
  line-height:1.3;
  letter-spacing:-.01em;
}
.quote::before{
  content:"";display:block;width:28px;height:1px;margin-bottom:22px;background:var(--caramel);
}

.is-split .word{
  opacity:clamp(.2, calc(var(--p,0) * (var(--n,10) + 2) - var(--i,0)), 1);
  transition:opacity .3s linear;
}

/* ---------- sobre ---------- */

.about-grid{display:grid;gap:clamp(44px,5vw,64px);align-items:start}
@media (min-width:960px){
  .about-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(56px,7vw,112px)}
  .about-media{position:sticky;top:calc(var(--header-h) + 36px)}
}
.about-media img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--radius);background:var(--photo)}
.about-media img.is-cutout{aspect-ratio:3 / 4;object-fit:contain;object-position:center bottom}
.about .h2{margin-bottom:28px}
.about-copy p{max-width:36em}
.about .list-title{margin:clamp(44px,5vw,60px) 0 6px}

.credentials li{position:relative;display:grid;gap:2px;padding:16px 0}
.credentials li::before,.credentials li:first-child::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:0 50%;
}
.credentials li::before{bottom:0}
.credentials li:first-child::after{top:0}
.credentials li span:first-child{font-weight:500}
.credentials li span:last-child{font-size:.95rem;color:var(--ink-2)}
@media (min-width:640px){
  .credentials li{grid-template-columns:1fr auto;gap:28px;align-items:baseline}
  .credentials li span:last-child{text-align:right}
}

/* ---------- tratamentos ---------- */

.sec-head{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,64px)}
@media (min-width:960px){
  /* 'end' alinha a caixa, nao a linha de base: com entrelinha .98 no titulo e 1.65 no texto,
     a ultima linha do paragrafo caia abaixo da base do titulo. 'last baseline' alinha o que
     o olho le. Fallback em 'end' onde a palavra-chave nao existir. */
  .sec-head{grid-template-columns:1fr 1fr;align-items:end;gap:48px}
  @supports (align-items:last baseline){
    .sec-head{align-items:last baseline}
  }
}
.sec-intro{color:var(--ink-2);max-width:30em}

.stack{position:relative;display:grid;gap:16px}
@media (min-width:900px){.stack{gap:24px}}
.panel{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(28px,4vw,56px);
  border-radius:var(--radius);
  background:var(--sand);
  transform-origin:50% 0;
}
/* luz quente que segue o cursor, com atraso curto para ter peso (propriedades registradas transitam) */
@property --mx{syntax:"<length-percentage>";inherits:false;initial-value:50%}
@property --my{syntax:"<length-percentage>";inherits:false;initial-value:50%}
.panel::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(560px circle at var(--mx) var(--my),rgba(255,251,245,.62),rgba(255,251,245,0) 62%);
  opacity:0;transition:opacity .5s var(--ease),--mx .35s var(--ease-out),--my .35s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.panel:hover::before{opacity:1}}
/* o painel se abre enquanto chega: o JavaScript escreve o transform direto no painel, e a transição
   curta segura o passo da rolagem (sobe e cresce até o tamanho real; a foto nunca é cortada) */
@media (prefers-reduced-motion:no-preference){
  .panel{transition:transform .5s var(--ease-out)}
}
.panel .h3{margin-bottom:18px}
.panel p{color:var(--ink-2)}
.panel .body-lg{color:var(--ink)}
.panel .link-arrow{margin-top:24px;color:var(--ink)}

.panel-feature{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
.panel-media img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:18px;background:var(--photo)}
.panel-media img.is-cutout{aspect-ratio:3 / 4;object-fit:contain;object-position:center bottom}
/* imagem clinica no painel: 4:3 nativo, sem corte */
.panel-media img.clinica{aspect-ratio:4 / 3}
@media (max-width:899.98px){.panel-media{max-width:380px;width:100%;margin-inline:auto}}
@media (min-width:900px){
  .panel-feature{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .panel-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
  .panel-row .h3{margin-bottom:0}
  .panel-row .panel-text{max-width:34em}
}

.also{margin-top:clamp(28px,3vw,40px);text-align:center;color:var(--ink-2);font-size:.98rem}
.also span{font-weight:500;color:var(--ink)}

/* ---------- imagens do tratamento (selecao final de 17/09) ----------
   Regra da casa: cada imagem mostra exatamente o assunto do texto ao lado.
   Sistema unico de moldura: TODAS sao 4:3, que e a proporcao nativa dos arquivos, entao
   nenhuma e cortada. So a largura muda, conforme o peso da secao. */

.figura{margin:0}
.figura img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;
  border-radius:18px;background:var(--photo)}

/* largura media, centrada: momentos de respiro no meio do texto */
.figura-media{max-width:min(520px,100%);margin-inline:auto}

/* dentro de uma coluna de painel ou de secao */
@media (max-width:899.98px){.figura-col{max-width:420px;margin-inline:auto}}
@media (min-width:900px){
  /* mesma origem de alinhamento do panel-row: tudo comeca no topo */
  .panel-row.tem-figura{grid-template-columns:minmax(0,.72fr) minmax(0,1fr) minmax(0,.78fr);gap:40px;align-items:start}
}

/* espaco acima quando a figura fecha um bloco de texto */
.figura-fim{margin-top:clamp(28px,3.5vw,44px)}

figcaption{margin-top:10px;font-size:.86rem;color:var(--ink-2);line-height:1.45;max-width:46ch}
.figura-media figcaption{text-align:center;margin-inline:auto}

/* ---------- a consulta ---------- */

.consult-grid{display:grid;gap:clamp(44px,6vw,72px)}
@media (min-width:960px){
  .consult-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(56px,8vw,128px);align-items:start}
  .consult-head{position:sticky;top:calc(var(--header-h) + 48px)}
}
.consult-head .h2{margin-bottom:24px}
.consult-head p{max-width:30em}

.steps{position:relative;--fill:1}
.js .steps{--fill:0}
.steps::before,.steps::after{content:"";position:absolute;left:20px;top:22px;bottom:24px;width:1px}
.steps::before{background:var(--sand-2)}
.steps::after{background:var(--caramel);transform-origin:50% 0;transform:scaleY(var(--fill))}

.step{position:relative;padding:0 0 clamp(32px,3.6vw,48px) 68px}
.step:last-child{padding-bottom:0}
.step-n{
  position:absolute;left:0;top:0;z-index:1;
  display:grid;place-items:center;width:41px;height:41px;
  border:1px solid var(--caramel);border-radius:50%;background:var(--paper);
  font-size:.76rem;font-weight:600;letter-spacing:.04em;color:var(--caramel-ink);
  font-variant-numeric:tabular-nums;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.step.is-lit .step-n{background:var(--caramel-ink);border-color:var(--caramel-ink);color:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  .steps::after{transition:transform .35s var(--ease-out)}
  .step-n{transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .45s var(--ease-out)}
  .step.is-lit .step-n{transform:scale(1.08)}
}
.step h3{margin:5px 0 8px;font-size:clamp(1.45rem,1.2rem + .8vw,1.75rem);font-weight:400;line-height:1.15;letter-spacing:-.012em;text-wrap:balance}
.step p{color:var(--ink-2);max-width:32em}

/* ---------- avaliações do Google ----------
   Fundo cashmere, o mesmo do fechamento: a seção é um respiro de cor no meio da página, e não
   quebra a alternância porcelana/creme das outras. Tudo que usa champagne fica DENTRO do cartão
   porcelana: champagne sobre cashmere dá 3,89:1 e reprova para texto; sobre porcelana dá 6,50:1. */

.reviews{background:var(--sand-2)}
.rev-head{display:grid;gap:clamp(28px,3.4vw,44px);align-items:center}
@media (min-width:900px){
  .rev-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,5vw,80px)}
}
.rev-intro{margin-top:22px;color:var(--ink-2);max-width:34em}

.rev-card{background:var(--paper);border-radius:var(--radius);padding:clamp(26px,3vw,40px)}
.rev-grade{display:grid;gap:6px;justify-items:start}
.rev-n{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,20px);flex-wrap:wrap}
.rev-n strong{
  font-family:var(--serif);font-weight:300;font-size:clamp(3.2rem,2.2rem + 3.4vw,4.6rem);
  line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.rev-stars{font-size:clamp(1rem,.9rem + .5vw,1.28rem);letter-spacing:.14em;color:var(--caramel-ink)}
.rev-vol{font-size:var(--fs-body-lg);color:var(--ink-2)}

.rev-list{margin-top:clamp(32px,4vw,56px);display:grid;gap:clamp(16px,1.8vw,22px);list-style:none}
@media (min-width:760px){.rev-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* O nome vem logo abaixo da fala, e nao empurrado para o pe do cartao: a grade ja iguala a altura
   dos cartoes, e buraco entre a fala e quem assinou e pior do que sobra no fim do cartao. */
.rev-item{display:flex;flex-direction:column;gap:14px}
.rev-item blockquote{margin:0}
.rev-item blockquote p{color:var(--ink-2);text-wrap:pretty}
.rev-item blockquote p + p{margin-top:12px}
.rev-who{margin-top:2px;font-size:.95rem;color:var(--ink)}
.rev-who cite{font-style:normal;font-weight:500}

.rev-foot{margin-top:clamp(32px,4vw,52px);text-align:center}
.rev-foot .btn-ghost{border-color:rgba(41,36,33,.38)}
@media (hover:hover){.rev-foot .btn-ghost:hover{border-color:var(--ink)}}

/* ---------- dúvidas ---------- */

.faq-grid{display:grid;gap:clamp(36px,5vw,56px)}
@media (min-width:960px){
  .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(48px,7vw,112px);align-items:start}
  .faq-aside{position:sticky;top:calc(var(--header-h) + 48px)}
}
.faq-aside .h2{margin-bottom:22px}
.faq-aside p{color:var(--ink-2);max-width:26em}
.faq-aside .btn{margin-top:26px}

.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:44px;padding:24px 0;cursor:pointer;list-style:none;
  font-size:clamp(1.22rem,1.08rem + .6vw,1.5rem);font-weight:400;line-height:1.25;letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{color:var(--caramel-ink)}}
.plus{
  position:relative;flex:none;width:32px;height:32px;
  border:1px solid var(--line-strong);border-radius:50%;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.plus::before,.plus::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);
}
.plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease-out)}
details[open] .plus{background:var(--ink);border-color:var(--ink);color:var(--paper)}
details[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.answer{padding:0 0 26px;color:var(--ink-2);max-width:42em}
@media (prefers-reduced-motion:no-preference){
  .faq details::details-content{
    block-size:0;overflow-y:clip;
    transition:block-size .55s var(--ease-out),content-visibility .55s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
}

/* ---------- consultório ---------- */

/* O mapa ficava DENTRO da coluna da esquerda, e como ele é alto a coluna da direita terminava no
   meio e sobrava um vazio grande ao lado. Agora o mapa é uma faixa própria, abaixo das duas
   colunas: em cima, endereço e informações lado a lado, ambos curtos; embaixo, a ilustração. */
.place-grid{display:grid;gap:clamp(40px,5vw,64px)}
@media (min-width:960px){
  .place-grid{grid-template-columns:1fr 1fr;gap:clamp(56px,7vw,112px) clamp(56px,7vw,112px);align-items:start}
  .place-map{grid-column:1 / -1}
}
.place-map{max-width:760px;margin-inline:auto}
.place-map a{display:block;border-radius:var(--radius-photo);overflow:hidden;transition:transform .5s var(--ease)}
@media (hover:hover){.place-map a:hover{transform:scale(1.012)}}
@media (prefers-reduced-motion:reduce){.place-map a{transition:none}.place-map a:hover{transform:none}}
.addr{margin:28px 0 12px;font-size:clamp(1.6rem,1.25rem + 1.3vw,2.2rem);font-weight:300;line-height:1.3;letter-spacing:-.012em}
.place .actions{margin-top:34px}
.info-block{padding:24px 0;border-bottom:1px solid var(--line)}
.info-block:first-child{border-top:1px solid var(--line)}
.info-block h3{
  margin-bottom:10px;font-family:var(--sans);font-size:.76rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.amen li{position:relative;padding-left:22px}
.amen li + li{margin-top:4px}
.amen li::before{content:"";position:absolute;left:0;top:.82em;width:10px;height:1px;background:var(--caramel)}

/* ---------- faixa de valores ---------- */

.band{
  display:flex;justify-content:center;overflow:hidden;
  padding-block:clamp(40px,6vw,88px);
  border-top:1px solid var(--line);
}
.band-track{
  display:flex;flex:none;gap:.42em;white-space:nowrap;
  font-size:clamp(3rem,1.5rem + 6.2vw,8.25rem);font-weight:300;line-height:1;letter-spacing:-.035em;
  color:#CDBBA3;
}
.band-track span{display:inline-flex;align-items:center;gap:.42em}
.band-track span::after{content:"";width:.11em;height:.11em;border-radius:50%;background:var(--caramel-light)}
@media (prefers-reduced-motion:no-preference){
  .band-track{transition:transform .9s var(--ease-out)}
}

/* ---------- fechamento ---------- */

/* O respiro de baixo desta secao somava com o de cima do rodape e virava um vazio grande,
   que na rolagem parece fim de pagina. A abertura continua ampla; so o fecho encurta. */
.final{background:var(--sand);padding-top:var(--section);padding-bottom:clamp(56px,6vw,88px)}
.final-grid{display:grid;gap:clamp(44px,5vw,72px);align-items:center}
@media (min-width:900px){
  .final-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(48px,7vw,104px)}
}
.final-media{width:100%;max-width:420px;justify-self:center}
.final .body-lg{margin-top:24px;color:var(--ink-2);max-width:30em}
.signature > span,.sig-line{display:block}
.signature{
  margin-top:clamp(26px,3vw,40px);max-width:17em;
  font-size:var(--fs-signature);font-style:italic;font-weight:300;line-height:1.18;letter-spacing:-.01em;
  color:var(--caramel-ink);
}
.final-actions{margin-top:clamp(32px,3.4vw,44px)}
.phone{margin-top:16px;font-size:.95rem;color:var(--ink-2)}

/* ---------- rodapé ---------- */

.footer{background:var(--night);color:var(--night-ink);padding:clamp(64px,8vw,104px) 0 32px}
/* A barra fixa do WhatsApp flutua sobre o fim da pagina. Sem esta reserva ela cobria a ultima
   linha de texto no celular, que e justamente o que a regra da casa proibe. */
@media (max-width:1023.98px){
  .footer{padding-bottom:calc(32px + 56px + max(24px,env(safe-area-inset-bottom)))}
}
.footer a{text-decoration:none}
@media (hover:hover){.footer a:hover{text-decoration:underline}}
.footer-grid{display:grid;gap:40px}
@media (min-width:860px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr;gap:48px}}
.f-brand{font-size:2rem;font-weight:300;line-height:1.1;letter-spacing:-.015em;color:var(--paper)}
.f-line{margin-top:10px}
.f-small{margin-top:14px;color:var(--night-muted);max-width:26em}
.f-h{
  margin-bottom:10px;font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--night-muted);
}
.footer li a,.footer p a,.footer-base a{display:inline-flex;align-items:center;min-height:44px}
.footer-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 32px;
  margin-top:clamp(48px,6vw,72px);padding-top:16px;
  border-top:1px solid rgba(233,225,214,.16);
  font-size:.85rem;color:var(--night-muted);
}
.footer-base p + p{margin-top:0}
@media (max-width:759.98px){.footer{padding-bottom:104px}}

/* ---------- área do paciente ---------- */

.page-head .lead{margin-bottom:14px}
.page-keep{margin-bottom:34px;font-size:.98rem;color:var(--ink-2);max-width:34em}
.page-head .hero-meta{max-width:32em;font-size:.9rem}
.page-media{max-width:420px}
@media (max-width:767.98px){.page-media{max-width:300px}}
.arch-pending{display:grid;place-items:center;background:var(--sand)}
.pending-note{padding:0 28px;font-size:.85rem;line-height:1.4;text-align:center;color:var(--ink-2)}

.guide{padding-top:clamp(56px,6vw,96px);border-top:1px solid var(--line)}
.guide-grid{display:grid;gap:clamp(48px,6vw,72px)}
@media (min-width:1024px){
  .guide-grid{grid-template-columns:minmax(220px,.3fr) minmax(0,1fr);gap:clamp(64px,7vw,120px);align-items:start}
  .guide-index{position:sticky;top:calc(var(--header-h) + 48px)}
}

.guide-index-t{
  margin-bottom:10px;font-family:var(--sans);font-size:.78rem;font-weight:500;line-height:1.4;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
}
.guide-index ol{position:relative;display:grid;column-gap:32px}
@media (min-width:560px) and (max-width:1023.98px){.guide-index ol{grid-template-columns:1fr 1fr}}
.guide-index a{
  position:relative;display:flex;align-items:center;min-height:44px;padding:6px 0 6px 26px;
  font-size:.98rem;line-height:1.3;text-decoration:none;color:var(--ink-2);
  transition:color .3s var(--ease);
}
.guide-index a::before{
  content:"";position:absolute;left:0;top:50%;z-index:1;width:9px;height:9px;margin-top:-4.5px;
  border:1px solid var(--sand-2);border-radius:50%;background:var(--paper);
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.guide-index .is-past a::before{border-color:var(--caramel)}
.guide-index a[aria-current]{color:var(--ink);font-weight:500}
.guide-index a[aria-current]::before{border-color:var(--caramel-ink);background:var(--caramel-ink)}
@media (hover:hover){.guide-index a:hover{color:var(--ink)}}
/* no celular o índice não acompanha a leitura: vira lista de travessões, sem marcador de estado */
@media (max-width:1023.98px){
  .guide-index a::before{width:12px;height:1px;margin-top:0;border:0;border-radius:0;background:var(--caramel)}
  .guide-index a{padding-left:24px}
}
@media (min-width:1024px){
  .guide-index ol::before,.guide-index ol::after{content:"";position:absolute;left:4px;top:22px;bottom:22px;width:1px}
  .guide-index ol::before{background:var(--sand-2)}
  .guide-index ol::after{background:var(--caramel);transform-origin:50% 0;transform:scaleY(var(--fill,0))}
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .guide-index ol::after{transition:transform .5s var(--ease-out)}
  .guide-index a::before{transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .45s var(--ease-out)}
  .guide-index a[aria-current]::before{transform:scale(1.25)}
}

.chapter{padding-block:clamp(56px,6vw,96px);border-top:1px solid var(--line)}
.chapter:first-child{padding-top:0;border-top:0}
.chapter:last-child{padding-bottom:0}
.h-chapter{
  max-width:18em;margin-bottom:clamp(20px,2.4vw,30px);
  font-family:var(--serif);font-optical-sizing:auto;font-size:var(--fs-h3);font-weight:400;
  line-height:1.08;letter-spacing:-.018em;text-wrap:balance;
}
.chapter-text{max-width:36em}
.chapter-text p:not(.body-lg),.chapter-text li{color:var(--ink-2)}
.chapter-text .dash,.chapter-text .dash + p,.chapter-text .avoid + .body-lg{margin-top:1.2em}

.dash li{position:relative;padding-left:26px}
.dash li + li{margin-top:8px}
.dash li::before{content:"";position:absolute;left:0;top:.84em;width:12px;height:1px;background:var(--caramel)}

.chapter-visual{display:grid;gap:clamp(36px,5vw,56px)}
@media (min-width:760px){.chapter-visual{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.ring{position:relative;width:min(232px,64vw);justify-self:center}
.ring svg{display:block;width:100%;height:auto;overflow:visible}
.ring-track,.ring-arc{fill:none;stroke-width:5}
.ring-track{stroke:var(--sand)}
.ring-arc{stroke:var(--caramel);stroke-linecap:round;stroke-dasharray:22 24;stroke-dashoffset:0}
.ring figcaption{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.ring-n{font-family:var(--serif);font-size:3.4rem;font-weight:300;line-height:1;letter-spacing:-.03em}
.ring-l{max-width:9em;margin-top:8px;font-size:.84rem;line-height:1.35;color:var(--ink-2)}

.h-how{font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.4;color:var(--ink)}
.how{display:grid;gap:32px;max-width:54em;margin-block:clamp(32px,4vw,44px)}
@media (min-width:720px){.how{grid-template-columns:1fr 1fr;gap:44px}}
.how-col{padding-top:20px;border-top:1px solid var(--line-strong)}
.how-col .h-how{margin-bottom:16px}
.how-steps{counter-reset:passo}
.how-steps li{position:relative;padding-left:42px;color:var(--ink-2);counter-increment:passo}
.how-steps li + li{margin-top:16px}
.how-steps li::before{
  content:counter(passo);position:absolute;left:0;top:.08em;
  display:grid;place-items:center;width:26px;height:26px;
  border:1px solid var(--caramel);border-radius:50%;
  font-size:.74rem;font-weight:600;color:var(--caramel-ink);font-variant-numeric:tabular-nums;
}

.chapter-text .h-how{margin-top:1.8em}
.avoid{margin-top:12px}
.avoid li{display:flex;align-items:flex-start;gap:14px}
.avoid li + li{margin-top:10px}
.avoid svg{flex:none;width:20px;height:20px;margin-top:.22em;fill:none;stroke:var(--caramel-ink);stroke-width:1.5;stroke-linecap:round}
.avoid strong{font-weight:600;color:var(--ink)}

.cal{margin-top:clamp(36px,4vw,52px);padding:clamp(24px,4vw,44px);border-radius:var(--radius);background:var(--sand)}
.h-cal{font-family:var(--serif);font-size:clamp(1.5rem,1.25rem + .8vw,1.9rem);font-weight:400;line-height:1.15;letter-spacing:-.012em}
.cal-head p{max-width:34em;margin-top:10px;color:var(--ink-2)}
.cal-fields{display:grid;gap:20px 22px;margin-top:28px}
@media (min-width:640px){.cal-fields{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:6px;align-content:start}
.field label{font-size:.95rem;font-weight:500;line-height:1.35}
.field input{
  width:100%;min-height:52px;padding:0 16px;
  border:1px solid var(--line-strong);border-radius:14px;background:var(--paper);
  color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;accent-color:var(--caramel-ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
@media (hover:hover){.field input:hover{border-color:var(--ink-2)}}
.field input:focus-visible{outline:none;border-color:var(--caramel-ink);box-shadow:0 0 0 3px rgba(122,90,58,.24)}
.field-help{font-size:.86rem;line-height:1.4;color:var(--ink-2)}
.cal-out{margin-top:28px;padding-top:24px;border-top:1px solid var(--line-strong)}
.cal-empty{color:var(--ink-2)}
.cal-empty a{color:var(--ink)}
.cal-dates{display:grid;gap:8px}
@media (min-width:640px){.cal-dates{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.cal-dates{grid-template-columns:repeat(3,1fr)}}
.cal-dates li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 16px;border-radius:14px;background:var(--paper)}
.cal-n{font-weight:500}
.cal-d{color:var(--ink-2);font-variant-numeric:tabular-nums}
.cal-dates .is-next{background:var(--ink);color:var(--paper)}
.cal-dates .is-next .cal-d{color:var(--night-ink)}
.cal-note{margin-top:18px;font-size:.88rem;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .cal-dates.is-fresh li{animation:fade-up .5s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
}

.issues{margin-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.issue{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:760px){.issue{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px}}
.issue dt{font-family:var(--serif);font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);line-height:1.3;letter-spacing:-.008em}
.issue dd{margin:0;color:var(--ink-2)}
.issue-urgent{margin-top:14px;padding:22px 24px;border-bottom:0;border-radius:18px;background:var(--sand)}
.issue-urgent dt{display:flex;align-items:flex-start;gap:12px}
.issue-urgent svg{flex:none;width:22px;height:22px;margin-top:.12em;fill:none;stroke:var(--caramel-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.issue-urgent dd{color:var(--ink);font-weight:500}
.issues-note{max-width:36em;margin-top:26px;font-size:.95rem;color:var(--ink-2)}

.help-in{text-align:center}
.help .h2{max-width:14em;margin-inline:auto}
.help .body-lg{max-width:30em;margin:22px auto 34px;color:var(--ink-2)}
.f-page{margin-top:14px}

/* ---------- página não encontrada ---------- */

.notfound{min-height:calc(100vh - var(--header-h));display:flex;align-items:center}
.notfound .h2{max-width:12em}
.notfound-lead{margin:24px 0 36px}

/* ---------- pagina legal ----------
   Coluna unica e estreita: e texto para ler, nao para varrer. */

.legal .wrap{max-width:760px}
.legal .lead{margin-bottom:clamp(36px,4vw,52px)}
.h-legal{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);
  line-height:1.2;letter-spacing:-.008em;
  margin:clamp(36px,4vw,52px) 0 14px;
}
.legal p{max-width:66ch;margin:0 0 14px}
.legal .dash{margin-bottom:14px}
.legal .actions{margin-top:clamp(40px,5vw,64px)}
.legal-date{color:var(--ink-2);font-size:.92rem}

/* ---------- botão flutuante ---------- */

/* Ancorado a direita tambem no celular. Como barra de largura total, ele cobria uma faixa da
   leitura na pagina inteira, e nao so no fim: numa pagina de instrucao isso engole linha. */
.wa-float{
  position:fixed;z-index:40;right:16px;bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--paper);
  font-weight:500;text-decoration:none;
  visibility:hidden;opacity:0;
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.wa-float svg{width:22px;height:22px;flex:none}
/* Celular estreito: so o icone. O rotulo sai da tela mas continua no nome acessivel, entao o
   botao nao engole linha de instrucao numa largura de 390px. */
@media (max-width:559.98px){
  .wa-float{padding:0;width:56px}
  .wa-float span:not(.sr-only){position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
.wa-float.is-visible{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
body.menu-open .wa-float{visibility:hidden;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .wa-float{opacity:1;transform:translateY(160%);transition:transform .3s var(--ease-out),visibility 0s linear .3s}
  .wa-float.is-visible{transform:none;transition:transform .5s var(--ease-out)}
  body.menu-open .wa-float{transform:translateY(160%)}
}
@media (min-width:760px){
  .wa-float{left:auto;right:24px;bottom:24px;padding:0 26px}
}
@media (min-width:1024px){
  .wa-float{display:none}
}

/* ---------- movimento (só com prefers-reduced-motion: no-preference) ---------- */

@media (prefers-reduced-motion:no-preference){

  /* momento autoral 1: o topo, ao carregar */
  .js .hero .arch-line path{animation:draw 1.8s var(--ease-out) .05s both}
  .js .hero .arch{animation:curtain 1.25s var(--ease-out) .1s both}
  .js .hero .line-in{animation:line-up 1.05s var(--ease-out) .15s both}
  .js .hero .line-2 .line-in{animation-delay:.47s}
  .js .hero-in{animation:fade-up .9s var(--ease-out) both}
  .js .hero-in-1{animation-delay:.72s}
  .js .hero-in-2{animation-delay:.79s}
  .js .hero-in-3{animation-delay:.86s}
  .js .proof::before{animation:rule 1.1s var(--ease-out) .9s both}
  .js .proof li{animation:fade-up .9s var(--ease-out) both}
  .js .proof li:nth-child(1){animation-delay:.98s}
  .js .proof li:nth-child(2){animation-delay:1.05s}
  .js .proof li:nth-child(3){animation-delay:1.12s}

  /* o arco acompanha a rolagem e a moldura assenta sobre a foto (transform escrito pelo JavaScript) */
  .hero-media,.arch-line{transition:transform .45s var(--ease-out)}

  /* entradas na rolagem (a classe .reveal só existe quando o JavaScript rodou) */
  .reveal [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-out)}
  .reveal [data-reveal].is-in{opacity:1;transform:none}

  .reveal [data-title] .line-in{transform:translateY(108%);transition:transform 1.15s var(--ease-out)}
  .reveal [data-title].is-in .line-in{transform:none}

  /* o recorte fica no filho: recorte no próprio alvo zera a interseção e o observador nunca dispara */
  .reveal [data-curtain] > *{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease-out)}
  .reveal [data-curtain].is-in > *{clip-path:inset(0 0 0 0)}

  .reveal [data-stagger] > *{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
  .reveal [data-stagger].is-in > *{opacity:1;transform:none}

  .reveal [data-lines] li::before,.reveal [data-lines] li:first-child::after{transform:scaleX(0);transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
  .reveal [data-lines] li > span{opacity:0;transition:opacity .8s var(--ease);transition-delay:calc(.12s + var(--i,0) * 80ms)}
  .reveal [data-lines].is-in li::before,.reveal [data-lines].is-in li:first-child::after{transform:none}
  .reveal [data-lines].is-in li > span{opacity:1}

  /* área do paciente: o arco das 22 horas se desenha uma vez, quando chega */
  .reveal [data-ring] .ring-arc{stroke-dashoffset:22;transition:stroke-dashoffset 1.6s var(--ease-pen) .15s}
  .reveal [data-ring].is-in .ring-arc{stroke-dashoffset:0}

  /* momento autoral 2: a assinatura dela, escrita da esquerda para a direita */
  .reveal [data-sign] > span{clip-path:inset(-12% 100% -24% -2%);transition:clip-path 1.3s var(--ease-pen) .15s}
  .reveal [data-sign].is-in > span{clip-path:inset(-12% -2% -24% -2%)}
}

/* impressão e salvar como PDF: nada fica escondido esperando rolagem */
@media print{
  .topbar,.wa-float,.band,.skip{display:none !important}
  .reveal [data-reveal],.reveal [data-stagger] > *,.reveal [data-lines] li > span,.is-split .word{opacity:1 !important;transform:none !important}
  .reveal [data-title] .line-in,.reveal [data-lines] li::before,.reveal [data-lines] li:first-child::after,.panel,.hero-media{transform:none !important}
  .reveal [data-curtain] > *,.reveal [data-sign] > span{clip-path:none !important}
  .reveal [data-ring] .ring-arc{stroke-dashoffset:0 !important}
  .guide-index,.cal{display:none !important}
}

@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes curtain{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes line-up{from{transform:translateY(108%)}to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}