/* Instituto Verçosa — sistema visual
   Herdado do selo: preto onyx, ouro metálico, capitulares inscricionais.
   O filete duplo do medalhão é o dispositivo estrutural da página inteira. */

:root{
  /* tamanhos de letra em rem (16px = 1rem): seguem a fonte configurada no aparelho */
  --onyx:      #0A0A0A;
  --onyx-1:    #1A1613;
  --onyx-2:    #241E19;
  --onyx-3:    #2E261F;

  --gold:      #C9A54E;
  --gold-lt:   #E8D296;
  --gold-pale: #F3E7BE;
  --gold-dk:   #A0813A;

  --hair:      rgba(201,165,78,.52);
  --hair-soft: rgba(201,165,78,.40);

  --text:      #EAE4D6;
  --text-2:    #B9B09A;
  --muted:     #8B8371;

  --brick:     #C97A6E;
  --brick-dim: rgba(201,122,110,.14);

  --measure: 68ch;
  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1240px;

  --serif: "Cinzel", "Trajan Pro", Georgia, serif;
  --sans:  "Jost", "Avenir Next", system-ui, -apple-system, sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--onyx);
  color:var(--text);
  font-family:var(--sans);
  font-size:1.125rem;
  font-weight:400;
  line-height:1.72;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}

a{color:var(--gold-lt); text-decoration:none}
a:hover{color:var(--gold-pale)}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.narrow{max-width:820px; margin-inline:auto; padding-inline:var(--pad)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--onyx); padding:12px 18px;
  font-family:var(--sans); font-weight:500;
}
.skip:focus{left:12px; top:12px}

/* ---------------------------------------------------------------- tipografia */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  text-transform:uppercase;
  color:var(--gold-pale);
  margin:0;
  text-wrap:balance;
  line-height:1.14;
}

h1{ font-size:clamp(1.875rem,4.4vw,3.375rem); letter-spacing:.02em }
h2{ font-size:clamp(1.4375rem,2.9vw,2.125rem); letter-spacing:.045em }
h3{ font-size:clamp(1.0625rem,1.7vw,1.3125rem); letter-spacing:.075em; color:var(--gold) }
h4{ font-size:0.9375rem; letter-spacing:.09em; color:var(--gold) }

p{margin:0 0 1.05em; max-width:var(--measure)}
p:last-child{margin-bottom:0}

strong{font-weight:500; color:var(--gold-pale)}
em{font-style:italic; color:var(--text)}

.lede{
  font-size:clamp(1.1875rem,2vw,1.375rem);
  line-height:1.62;
  color:var(--text);
  font-weight:300;
  max-width:60ch;
}

.small{font-size:0.9375rem; line-height:1.66; color:var(--text-2)}

.label{
  font-family:var(--sans);
  font-size:0.7188rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

.data{font-variant-numeric:tabular-nums; letter-spacing:.06em}

/* ---------------------------------------------------------------- filete duplo */


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

.masthead{
  position:sticky; top:0; z-index:40;
  background:rgba(10,10,10,.9);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hair-soft);
}
.masthead__in{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:66px;
}
.brand{display:flex; align-items:center; flex:none; padding-block:3px}
.brand img{height:40px; width:auto}

.nav{display:none}
@media (min-width:980px){
  .nav{display:flex; align-items:center; gap:30px}
  .nav a{
    font-family:var(--sans); font-size:0.7812rem; font-weight:400;
    letter-spacing:.15em; text-transform:uppercase; color:var(--text-2);
    padding:6px 0; border-bottom:1px solid transparent;
  }
  .nav a:hover, .nav a[aria-current="page"], .nav a[aria-current="true"]{ color:var(--gold-lt); border-bottom-color:var(--hair) }
}

.navtoggle{
  display:flex; align-items:center; gap:9px; background:none; border:0; cursor:pointer;
  color:var(--gold-lt); font-family:var(--sans); font-size:0.75rem; letter-spacing:.16em;
  text-transform:uppercase; padding:10px 0;
}
@media (min-width:980px){ .navtoggle{display:none} }
.navtoggle svg{width:18px; height:18px}
.navtoggle{min-height:46px}

.drawer{
  display:none; border-top:1px solid var(--hair-soft); background:var(--onyx-1);
}
.drawer[data-open="true"]{display:block}
@media (min-width:980px){ .drawer{display:none !important} }
.drawer a{
  display:block; padding:15px var(--pad);
  font-family:var(--sans); font-size:0.8125rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2); border-bottom:1px solid var(--hair-soft);
}
.drawer a:last-child{border-bottom:0}

/* ---------------------------------------------------------------- hero
   O rosto lidera. A pergunta do site é "quem está na sala", e a resposta é uma
   pessoa com nome e registro, não um selo. A frase de abertura vem depois, menor:
   ela descreve o desejo, o retrato responde a dúvida. */

.hero{padding:clamp(28px,5vw,88px) 0 clamp(52px,8vw,96px); position:relative}
.hero__grid{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:clamp(26px,4vw,40px);
}
.hero__portrait{margin:0}
.hero__portrait img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:50% 16%;
  border:1px solid var(--hair); filter:saturate(.92);
}
.hero__portrait figcaption{
  display:flex; flex-direction:column; gap:4px; margin-top:14px;
  font-size:0.875rem; line-height:1.45; color:var(--text-2); letter-spacing:.02em;
}
.hero__portrait figcaption b{
  font-family:var(--serif); font-weight:600; font-size:1.0625rem; letter-spacing:.06em; color:var(--gold-lt);
}
.hero__inner{text-align:left}
.hero h1{
  font-size:clamp(1.625rem,3vw,2.5rem);
  letter-spacing:.03em;
  line-height:1.2;
  color:var(--gold-pale);
  margin-bottom:clamp(20px,3vw,30px);
  text-wrap:balance;
}
.hero h1 span{display:block}
.hero .lede{color:var(--text); max-width:52ch}
.hero__cta{margin-top:clamp(26px,3.5vw,36px)}

@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:center; gap:clamp(48px,6vw,96px)}
  .hero__portrait{order:2}
  .hero__portrait img{aspect-ratio:4/5; object-position:50% 12%; max-height:72vh}
}

/* ---------------------------------------------------------------- seções */

.section{padding:clamp(56px,8.5vw,112px) 0}
.section--tint{background:var(--onyx-1)}
.section__head{margin-bottom:clamp(28px,4vw,46px)}
.section__head p{color:var(--text-2); margin-top:14px}

/* dois pilares — blocos assimétricos, não cards iguais */
.pillars{display:grid; gap:clamp(38px,6vw,72px)}
@media (min-width:900px){ .pillars{grid-template-columns:1fr 1fr; gap:0} }
.pillar{padding-block:8px}
@media (min-width:900px){
  .pillar:first-child{padding-right:clamp(32px,4vw,60px)}
  .pillar:last-child{padding-left:clamp(32px,4vw,60px); border-left:1px solid var(--hair-soft)}
}
.pillar h3{margin-bottom:16px}
.pillar p{color:var(--text-2); font-size:1.0625rem}

.arrowlink{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  font-family:var(--sans); font-size:0.7812rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
  border-bottom:1px solid var(--hair); padding:8px 0 10px;
}
.arrowlink svg{width:15px; height:15px; transition:transform .4s cubic-bezier(.16,1,.3,1)}
.arrowlink:hover{color:var(--gold-pale)}
.arrowlink:hover svg{transform:translateX(4px)}

/* bloco-tese */
.thesis{border-bottom:1px solid var(--hair); padding-block:clamp(46px,7vw,84px)}
.thesis h2{margin-bottom:26px; max-width:20ch}
.thesis p{font-size:1.1875rem; color:var(--text-2)}
@media (min-width:900px){
  .thesis__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:start}
  .thesis h2{margin-bottom:0}
}

/* passos numerados — a ordem carrega informação real */
.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{
  counter-increment:s;
  display:grid; grid-template-columns:2.2em 1fr; gap:6px 22px;
  padding:22px 0; border-top:1px solid var(--hair-soft);
}
.steps li:first-child{border-top:0}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  grid-row:1/3;
  font-family:var(--sans); font-size:0.875rem; letter-spacing:.04em; font-variant-numeric:tabular-nums;
  color:var(--gold-dk); padding-top:5px;
}
.steps p{color:var(--text-2); font-size:1.0938rem; margin:0}

/* índice de procedimentos */
.proclist{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair-soft)}
.proclist a{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px;
  padding:26px 0; border-bottom:1px solid var(--hair-soft); color:var(--text);
}
.proclist a:hover{color:var(--gold-pale)}
.proclist a:hover .proclist__go{transform:translateX(5px)}
.proclist__t{font-family:var(--sans); font-weight:500; font-size:clamp(1.125rem,2vw,1.375rem); letter-spacing:0; color:var(--gold-pale)}
.proclist__k{display:block; margin-top:7px}
.proclist__go{width:20px; height:20px; color:var(--gold-dk); transition:transform .4s cubic-bezier(.16,1,.3,1)}

/* ---------------------------------------------------------------- procedimento */

.prochead{padding:clamp(46px,7vw,92px) 0 clamp(30px,4vw,48px)}
.prochead h1{margin-bottom:24px}
.prochead .lede{max-width:64ch; color:var(--text-2)}

.facts{
  display:grid; gap:1px; margin-top:clamp(32px,5vw,52px);
  background:var(--hair-soft); border:1px solid var(--hair-soft);
}
@media (min-width:720px){ .facts{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .facts{grid-template-columns:repeat(4,1fr)} }
.facts div{background:var(--onyx); padding:20px 22px}
.facts dt{margin-bottom:7px}
.facts dd{margin:0; font-size:1.0312rem; color:var(--text)}

.prose h2{margin:clamp(46px,6vw,76px) 0 20px}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--text-2)}

/* indicação x contraindicação */
.twocol{display:grid; gap:clamp(34px,5vw,60px)}
@media (min-width:880px){ .twocol{grid-template-columns:1fr 1fr} }

.marklist{list-style:none; margin:0; padding:0}
.marklist li{
  position:relative; padding-left:30px; margin-bottom:14px;
  color:var(--text-2); font-size:1.0312rem; line-height:1.6;
}
.marklist li::before{
  position:absolute; left:0; top:.5em; width:14px; height:1px; content:"";
}
.marklist--yes li::before{background:var(--gold)}
.marklist--no li::before{background:var(--brick)}
.marklist--no li{color:var(--text-2)}

/* linha do tempo */
.tl{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair-soft)}
.tl > div{
  display:grid; gap:4px 26px; padding:19px 0;
  border-bottom:1px solid var(--hair-soft);
}
@media (min-width:640px){ .tl > div{grid-template-columns:132px 1fr; align-items:baseline} }
.tl dt{font-family:var(--serif); font-size:0.8438rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold)}
.tl dd{margin:0; color:var(--text-2); font-size:1.0312rem}

/* aviso */
.alert{
  border:1px solid var(--hair); background:var(--onyx-2);
  padding:clamp(24px,3.4vw,34px); margin:clamp(34px,5vw,54px) 0;
}
.alert h3{margin-bottom:14px; color:var(--gold-pale)}
.alert p{color:var(--text-2); font-size:1.0312rem; margin-bottom:0}

.note{
  border-left:1px solid var(--hair); padding-left:clamp(20px,3vw,30px);
  margin:clamp(30px,4vw,46px) 0;
}
.note p{color:var(--text-2); font-size:1.0312rem}

/* faq */
.faq{border-top:1px solid var(--hair-soft)}
.faq details{border-bottom:1px solid var(--hair-soft)}
.faq summary{
  cursor:pointer; list-style:none; padding:21px 40px 21px 0; position:relative;
  font-family:var(--sans); font-weight:500; font-size:1.0938rem; letter-spacing:0;
  color:var(--gold-pale); line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:calc(50% - 1px);
  width:15px; height:1px; background:var(--gold-dk);
}
.faq summary::before{
  content:""; position:absolute; right:13px; top:calc(50% - 8px);
  width:1px; height:15px; background:var(--gold-dk);
  transition:opacity .3s ease, transform .3s ease;
}
.faq details[open] summary::before{opacity:0; transform:rotate(90deg)}
.faq summary:hover{color:var(--gold)}
.faq .answer{padding:0 0 24px}
.faq .answer p{color:var(--text-2); font-size:1.0312rem; margin-bottom:0}

/* autoria */
.byline{
  padding-top:26px;
  display:flex; flex-wrap:wrap; gap:8px 28px; align-items:baseline;
}
.byline b{font-family:var(--serif); font-weight:600; font-size:0.875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-pale)}

/* ---------------------------------------------------------------- equipe */

.doctors{display:grid; gap:clamp(40px,6vw,72px)}
.doctor{border-top:1px solid var(--hair); padding-top:clamp(26px,3.5vw,40px)}
.doctor h2{margin-bottom:6px; font-size:clamp(1.1875rem,2.4vw,1.6875rem)}
.doctor .creds{
  display:flex; flex-wrap:wrap; gap:6px 20px; margin:14px 0 22px;
  font-family:var(--sans); font-size:0.8125rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);
}
.doctor .creds .role{color:var(--muted); letter-spacing:.1em}
.doctor p{color:var(--text-2)}

/* ---------------------------------------------------------------- cta */

.cta{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--gold); color:var(--onyx);
  font-family:var(--sans); font-weight:500; font-size:0.8125rem;
  letter-spacing:.17em; text-transform:uppercase;
  padding:17px 30px; border:1px solid var(--gold);
  transition:background .3s ease, color .3s ease;
}
.cta:hover{background:var(--gold-pale); border-color:var(--gold-pale); color:var(--onyx)}
.cta svg{width:17px; height:17px}

.cta--ghost{background:transparent; color:var(--gold); border-color:var(--hair)}
.cta--ghost:hover{background:transparent; color:var(--gold-pale); border-color:var(--gold)}

.ctablock{text-align:center; padding:clamp(56px,8vw,104px) 0}
.ctablock h2{margin-bottom:20px}
.ctablock p{margin-inline:auto; color:var(--text-2); margin-bottom:32px}

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

.foot{border-top:1px solid var(--hair); background:var(--onyx-1); padding:clamp(48px,6vw,76px) 0 40px}
.foot__grid{display:grid; gap:clamp(32px,4vw,54px)}
@media (min-width:860px){ .foot__grid{grid-template-columns:1.3fr 1fr 1fr} }
.foot img{height:56px; width:auto; margin-bottom:22px}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:2px}
.foot a{font-size:0.9375rem; color:var(--text-2); display:inline-block; padding-block:11px}
.foot a:hover{color:var(--gold-lt)}
.foot p{font-size:1rem; color:var(--text-2)}

.legal{
  margin-top:clamp(40px,5vw,60px); padding-top:26px; border-top:1px solid var(--hair-soft);
  font-size:0.8125rem; line-height:1.75; color:var(--muted); max-width:none;
}
.legal p{font-size:0.875rem; color:var(--text-2); max-width:78ch; margin-bottom:.7em}
.legal b{color:var(--text-2); font-weight:500}

.todo{
  display:inline-block; padding:1px 7px; border:1px dashed var(--brick);
  color:var(--brick); font-size:0.75rem; letter-spacing:.08em; font-family:var(--sans);
  background:var(--brick-dim);
}

/* ---------------------------------------------------------------- cascata
   .nav a e .foot a têm especificidade maior que .cta e roubavam a cor do texto
   do botão, deixando-o ilegível sobre o ouro. Reafirmado aqui, no fim. */
.nav a.cta, .foot a.cta, .drawer a.cta{
  display:inline-flex;
  color:var(--onyx);
  border-bottom-color:var(--gold);
  font-weight:500;
}
.nav a.cta:hover, .foot a.cta:hover{ color:var(--onyx); border-bottom-color:var(--gold-pale) }
.foot .cta{padding:15px 26px; font-size:0.7812rem}
.nav a.cta{padding:12px 22px; font-size:0.75rem}

/* ---------------------------------------------------------------- trilha */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:20px;
  font-family:var(--sans); font-size:0.7188rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
}
.crumbs a{color:var(--muted); display:inline-block; padding-block:12px}
.crumbs a:hover{color:var(--gold)}
.crumbs span[aria-hidden]{color:var(--gold-dk)}
.crumbs .label{margin:0}

/* M2 — o <p> do CTA herdava max-width da medida de texto e centralizava
   dentro de uma caixa alinhada à esquerda: 200px fora do eixo no desktop. */
.hero__inner > p{margin-inline:0}
/* M21 — traço da marklist acima do centro óptico da primeira linha */
.marklist li::before{top:.72em}

/* ---------------------------------------------------------------- pré-abertura
   A clínica abre em novembro. Declarar isso no topo, com sobriedade, é o que
   separa "site incompleto" de "clínica que ainda vai abrir". */
.statusbar{
  background:var(--onyx-2);
  border-bottom:1px solid var(--hair);
  font-family:var(--sans); font-size:0.75rem; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--text-2);
}
.statusbar__in{
  max-width:var(--maxw); margin-inline:auto; padding:11px var(--pad);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px;
  text-align:center;
}
.statusbar span[aria-hidden]{color:var(--gold)}
.statusbar a{
  color:var(--gold); border-bottom:1px solid var(--hair);
  display:inline-block; padding:13px 0 11px;
}
.statusbar a:hover{color:var(--gold-pale); border-bottom-color:var(--gold)}
@media (max-width:600px){
  .statusbar{letter-spacing:.1em; font-size:0.6875rem}
  .statusbar__in{gap:4px 10px; padding:9px var(--pad)}
  .statusbar span[aria-hidden]{display:none}
}

/* ================================================================ FILETE DUPLO
   M1 — o contrato nomeia o anel concêntrico do selo como dispositivo estrutural
   e o build entregava border-top de 1px. Aqui ele existe de fato: duas linhas
   de 1px separadas por 2px, a segunda mais fraca, como o anel externo e interno
   do medalhão. É a assinatura, então aparece só em fronteira de verdade. */
.drule{
  border:0; margin:0; height:4px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair-soft);
}
.section + .section > .wrap > .section__head{padding-top:0}

/* M8 — o aviso de vedação do CFM tinha o mesmo peso de uma ficha técnica.
   Recebe o filete duplo em brick: hierarquia, sem cor de alarme e sem ícone. */
.alert{
  border:0; border-top:1px solid var(--brick); border-bottom:1px solid var(--brick);
  position:relative; background:var(--onyx-2);
}
.alert::before,.alert::after{
  content:""; position:absolute; left:0; right:0; height:0;
  border-top:1px solid rgba(201,122,110,.38);
}
.alert::before{top:3px}
.alert::after{bottom:3px}

/* M5 — indicação e contraindicação diferiam só por 14px de matiz, o que some
   para daltonismo vermelho-verde. Agora diferem por FORMA: traço horizontal
   contra traço vertical, e a coluna negativa ganha moldura de filete duplo. */
.marklist--no li::before{
  width:1px; height:13px; top:.42em; background:var(--brick);
}
@media (min-width:880px){
  .twocol > div + div{
    padding-left:clamp(24px,3vw,34px); position:relative;
  }
  .twocol > div + div::before{
    content:""; position:absolute; left:0; top:2px; bottom:2px;
    border-left:1px solid var(--hair);
  }
  .twocol > div + div::after{
    content:""; position:absolute; left:3px; top:2px; bottom:2px;
    border-left:1px solid var(--hair-soft);
  }
}

/* M4 — réguas de 1112px sobre texto de 560px: o vazio lia como componente
   inacabado. Os componentes de leitura passam a respeitar a medida. */
.prose > .tl,
.prose > .steps,
.prose > .faq,
.prose > .marklist{max-width:76ch}

/* M19 — quatro credenciais distintas corriam juntas. O separador absoluto
   ficava órfão no começo da linha quando ela quebrava: cada credencial agora
   ocupa a sua linha, e a quebra deixa de ser um acidente. */
.doctor .creds{flex-direction:column; gap:5px}

/* M17 — os passos eram h4 sob seção h2, pulando o h3 */
.steps h3{
  font-family:var(--sans); font-weight:500; font-size:1.0938rem;
  letter-spacing:0; text-transform:none; color:var(--gold);
  margin:0 0 2px;
}
.foot h2{
  font-family:var(--serif); font-weight:600; font-size:0.9375rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gold);
  margin:0 0 16px;
}

/* M18 — o drawer só alternava aria-expanded */
.navtoggle[aria-expanded="true"] .navtoggle__open{display:none}
.navtoggle__close{display:none}
.navtoggle[aria-expanded="true"] .navtoggle__close{display:block}

/* M11 — no mobile o clamp travava no piso e os dois <span> de bloco impediam
   o text-wrap:balance de agir sobre a frase inteira: curta / longa / longuíssima. */
@media (max-width:520px){
  .hero h1{font-size:clamp(1.5rem,6.6vw,1.875rem)}
  .hero h1 span{display:inline}
}

/* REG-C — o .drule já marca a fronteira superior; o border-top do .thesis
   empilhava uma terceira linha (1-2-1-1 em vez de 1-2-1). */
.drule + .thesis{border-top:0}
/* M4 — o .alert ficou de fora do limite de medida e virou o componente
   mais largo da página justamente depois de M8 torná-lo mais presente. */
.prose > .alert{max-width:76ch}
/* REG-B — a manchete no mobile fundia as duas sentenças. O espaço entre os
   spans resolve; mantido word-spacing para o caso de o espaço colapsar. */
@media (max-width:520px){ .hero h1 span{display:inline; word-spacing:.12em} }

/* ---------------------------------------------------------------- retratos
   O slot existe no markup e só ganha superfície quando há arquivo: placeholder
   vazio em site no ar lê como inacabado, e foi exatamente o que derrubou a
   confiança das compradoras-teste na primeira rodada. */
.doctor--withphoto{display:grid; gap:clamp(22px,3.5vw,44px)}
@media (min-width:760px){
  .doctor--withphoto{grid-template-columns:minmax(0,240px) minmax(0,1fr); align-items:start}
}
.doctor__photo{margin:0}
.doctor__photo img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--hair);
  filter:saturate(.92);
}
.doctor__body > *:first-child{margin-top:0}

/* caminho alternativo ao WhatsApp */
.altpath{margin-top:22px; color:var(--muted)}
.altpath a{text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:4px}
.ctablock .altpath{margin-inline:auto}

/* ---------------------------------------------------------------- hero em três níveis
   Nível 1 o par de abertura, nível 2 a filosofia, nível 3 a linha administrativa.
   O erro do hero anterior era misturar registro emocional e administrativo no
   mesmo parágrafo; a separação é estrutural, não só de tamanho. */
.herosupport{
  margin:clamp(30px,4vw,44px) auto 0;
  max-width:62ch;
  font-size:0.9062rem; line-height:1.65; color:var(--muted);
}
.hero .altpath{margin-top:14px}

/* duas praças no rodapé, em registro neutro */
.pracas{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:13px}
.pracas li{display:flex; flex-direction:column; gap:3px}
.pracas b{
  font-family:var(--serif); font-weight:600; font-size:0.8125rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gold-lt);
}
.pracas span{font-size:0.9062rem; line-height:1.5; color:var(--text-2)}

/* ---------------------------------------------------------------- marca no topo
   38px deixava a assinatura do lockup em mancha ilegível e a marca tímida numa
   barra de 74px. O lockup do topo passou a ser a versão sem a linha de descritor
   (assets/brand-nav.png), o que libera altura para o nome sem engordar a barra. */
@media (min-width:980px){
  .brand img{height:52px}
  .masthead__in{min-height:88px}
}

/* medida de leitura fora do .prose: a home media 89 a 102 caracteres por linha */
.steps p, .note p, .doctor__body p, .section__head p{max-width:72ch}
.legal p{max-width:72ch}
/* rótulo acessível para seção sem título visível */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* retrato em ambiente (/o-instituto/): foto vertical, sem moldura de card */
.ambient{margin:clamp(46px,6vw,76px) 0 0; max-width:440px}
.ambient img{width:100%; height:auto; border:1px solid var(--hair); filter:saturate(.92)}
.ambient figcaption{margin-top:10px; color:var(--muted); letter-spacing:.04em}
.doctor__photo img{object-position:50% 18%}

/* quem conduz, no topo do procedimento: rosto e registro antes da leitura longa */
.conductor{display:inline-flex; max-width:100%; align-items:center; gap:16px; margin-top:clamp(22px,3vw,32px); color:inherit; text-decoration:none}
.conductor img{width:64px; height:80px; object-fit:cover; border:1px solid var(--hair); filter:saturate(.92); flex:none}
.conductor > span{display:flex; flex-direction:column; gap:3px}
.conductor .label{color:var(--muted)}
.conductor .data{color:var(--muted); display:block; letter-spacing:.02em}
.conductor:hover b{text-decoration:underline; text-underline-offset:3px}

/* lista de espera no menu móvel: botão, não mais um item igual a "Equipe" */
.drawer a.cta{display:flex; justify-content:center; margin:16px var(--pad) 20px; border-bottom:0}

/* índice da página de procedimento */
.toc{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:clamp(20px,2.6vw,28px); font-size:0.9375rem}
.toc a{color:var(--text-2); text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:5px; padding:8px 0}
.toc a:hover{color:var(--gold-lt); text-decoration-color:currentColor}

/* FAQ em blocos */
.faq__group{
  font-family:var(--serif); font-weight:600; font-size:1rem; letter-spacing:.05em;
  margin:clamp(30px,4vw,44px) 0 10px; color:var(--gold-lt);
}
.faq__group:first-child{margin-top:0}

/* botão fixo do celular: só aparece no meio da leitura longa */
.stickycta{display:none}
@media (max-width:1099px){
  .stickycta:not([hidden]){
    display:flex; align-items:center; justify-content:center; gap:10px;
    position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:40;
    min-height:50px; padding:0 20px;
    background:var(--gold); color:var(--onyx);
    font-size:0.8125rem; letter-spacing:.12em; text-transform:uppercase;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
  }
  .stickycta svg{width:17px; height:17px}
}

/* /o-instituto/: retrato ao lado das duas primeiras seções */
.instsplit{display:grid; gap:clamp(36px,5vw,64px)}
.instsplit .ambient{margin:0}
@media (min-width:900px){
  .instsplit{grid-template-columns:minmax(0,1fr) minmax(0,380px); align-items:start}
  .instsplit .ambient{position:sticky; top:120px}
}
.instsplit + .prose > h2:first-child{margin-top:clamp(46px,6vw,76px)}

/* FAQ: o primeiro bloco não encosta no filete de cima */
.faq__group:first-child{margin-top:22px}

/* o que acontece depois do toque, junto de cada botão */
.replynote{margin-top:14px; color:var(--text-2); max-width:46ch}
.ctablock .replynote{margin-inline:auto}
.copybtn{
  font:inherit; font-size:0.8125rem; color:var(--gold); background:none; cursor:pointer;
  border:1px solid var(--hair); padding:6px 12px; margin-left:6px; vertical-align:baseline;
}
.copybtn:hover{border-color:var(--gold)}
.heroshortcut{margin-top:clamp(26px,3.5vw,36px); color:var(--text-2); font-size:1rem}
.heroshortcut a{display:inline-flex; align-items:center; gap:8px; color:var(--gold-lt); text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:5px; padding:6px 0}
.heroshortcut svg{width:15px; height:15px}

/* rodapé: contato em texto; o botão fica no bloco final da página */
.footcontact{display:flex; flex-direction:column; gap:6px; margin:18px 0 6px}
.footcontact a{color:var(--gold-lt); text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:4px}

/* é o seu caso? antes do WhatsApp */
.mycase{text-align:left; max-width:560px; margin:0 auto 32px; padding:22px 24px; border:1px solid var(--hair-soft)}
.mycase h3{font-family:var(--sans); font-weight:500; font-size:1rem; letter-spacing:0; text-transform:none; margin:0 0 10px; color:var(--gold-lt)}
.mycase .marklist{margin:0}
.mycase .marklist li{font-size:1rem}
.mycase p{margin:12px 0 0; font-size:0.9375rem}
.mycase p a{color:var(--gold-lt); text-decoration:underline; text-underline-offset:4px}

/* coluna lateral fixa no desktop: resumo, quem conduz e ação sempre à mão */
.rail{display:none}
@media (min-width:1100px){
  .procgrid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(48px,5vw,80px); align-items:start}
  .rail{
    display:block; position:sticky; top:120px; margin-top:clamp(40px,6vw,72px);
    padding:24px; border:1px solid var(--hair-soft);
  }
  .rail .cta{width:100%; justify-content:center; margin-top:20px; padding:16px 14px; letter-spacing:.1em; font-size:0.7812rem}
  .rail .replynote{font-size:0.8438rem}
}
.rail__t{font-size:1.0625rem; margin:0 0 16px}
.rail dl{margin:0; display:grid; gap:12px}
.rail dt{margin-bottom:2px}
.rail dd{margin:0; font-size:0.9688rem; line-height:1.45}
.rail__who{display:flex; flex-direction:column; gap:2px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--hair-soft); font-size:0.875rem; line-height:1.45}
.rail__who b{font-weight:500; font-size:0.9688rem}

/* é o seu caso: duas colunas de mesmo peso */
.mycase{max-width:820px; display:grid; gap:22px}
.mycase > p{grid-column:1/-1}
@media (min-width:640px){ .mycase{grid-template-columns:1fr 1fr} }
/* faixa de pré-abertura em uma linha no celular: a praça já está no rodapé */
@media (max-width:520px){
  .statusbar__in > span:nth-child(3), .statusbar__in > span:nth-child(4){display:none}
}

/* motivo dos relacionados: frase, não rótulo */
.proclist__why{display:block; margin-top:4px; color:var(--text-2); font-size:0.9375rem; letter-spacing:0; text-transform:none}

/* "Quem atende" na home: miniatura, o retrato grande já está no topo */
.doctor--thumb{display:grid; grid-template-columns:80px minmax(0,1fr); gap:clamp(18px,3vw,32px); align-items:start}
.doctor__thumb{width:80px; height:100px; object-fit:cover; border:1px solid var(--hair); filter:saturate(.92)}

/* índice da coluna lateral */
.rail__toc{display:flex; flex-direction:column; gap:2px; margin:0 0 4px; font-size:0.9062rem}
.rail__toc a{padding:5px 0 5px 12px; border-left:2px solid transparent; color:var(--text-2)}
.rail__toc a[aria-current="location"]{border-left-color:var(--gold); color:var(--gold-lt)}

.replynote a{color:inherit; text-decoration:underline; text-underline-offset:3px}

/* topo da home no celular: retrato em linha compacta, para o botão caber na primeira tela */
@media (max-width:899px){
  .hero__portrait{display:grid; grid-template-columns:128px minmax(0,1fr); gap:18px; align-items:center}
  .hero__portrait img{width:128px; height:160px; aspect-ratio:auto; object-position:50% 20%}
  .hero__portrait figcaption{margin-top:0}
}

/* bloco final: uma linha */
.mycase-line{max-width:560px; margin:0 auto 30px; color:var(--text-2)}
.mycase-line a{color:var(--gold-lt); text-decoration:underline; text-underline-offset:4px}
/* como é o dia: 2 x 2 no desktop */
@media (min-width:900px){
  .procbody .steps{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(28px,4vw,48px)}
  .procbody .steps li:nth-child(2){border-top:0}
}

/* topo: onde atende */
.heroplace{margin-top:14px; color:var(--text-2); font-size:1rem}
/* pilar de cirurgia: atalhos diretos */
.pillar__links{margin-top:14px; font-size:1.0312rem}
.pillar__links a{text-decoration:underline; text-underline-offset:4px}
/* quem já aplicou PMMA/bioplastia: bloco próprio, discreto */
.pmmablock{padding:clamp(40px,6vw,64px) 0; border-top:1px solid var(--hair-soft)}
.pmmablock h2{font-size:clamp(1.25rem,2.4vw,1.625rem); margin-bottom:14px}
.pmmablock p{max-width:62ch; color:var(--text-2)}

/* topo: o que a clínica faz, uma linha por frente */
.heroservices{list-style:none; padding:0; margin:-4px 0 clamp(14px,2vw,20px); display:flex; flex-direction:column; gap:4px;
  font-size:clamp(1rem,1.5vw,1.125rem); color:var(--gold-lt); letter-spacing:.01em}
.heroservices a{color:inherit; text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:5px}
.heroservices a:hover{text-decoration-color:currentColor}
.hero .heroplace{margin:0 0 clamp(20px,3vw,28px); color:var(--text)}

/* links que abrem o WhatsApp levam o ícone, como os botões */
.arrowlink--wa svg:first-child{width:17px; height:17px}
.arrowlink--wa:hover svg:first-child{transform:none}