/* ============================================================
   PALETA DEFINIDA PELO CLIENTE
   60-70% branco quente · 20-25% azul-marinho · 5-10% sálvia · 2-5% champagne
   O champagne nunca vira texto sobre branco (contraste insuficiente):
   ele vive sobre o azul-marinho e em fios finos.
   ============================================================ */
:root{
  --paper:#FAF7F2; --paper-2:#F3EEE6; --linen:#E6DFD3;
  --navy:#1C2B3F; --navy-2:#152232; --navy-soft:#2A3D55;
  --sage:#8FA88F; --sage-deep:#4E6B55; --sage-soft:#DFE7DC;
  --champagne:#D6C3A0; --champagne-soft:#F2E9D8;
  --ink:#1C2B3F; --ink-2:#4C5A6B; --ink-3:#8B94A1;
  --line:rgba(28,43,63,.14); --line-soft:rgba(28,43,63,.07);
  --serif:'Cormorant Garamond',Garamond,Georgia,serif;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --inset:clamp(0px,2.2vw,34px);
}
/* o palco fica em z-index 0 atras do conteudo; um background pintado no BODY
   cobriria o palco, entao a cor base fica no <html>. */
html{background:var(--paper);color-scheme:light only}
html,body{margin:0;padding:0}
body{background:transparent;font-family:var(--font);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,blockquote{margin:0}

/* ---------- palco fixo (so as faixas de fotografia usam) ---------- */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--navy)}
.stage .scene{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease,transform 2.6s var(--ease)}
.stage .scene.on{opacity:1;transform:scale(1)}
.stage .scene img{width:100%;height:100%;object-fit:cover}
.stage .vig{position:absolute;inset:0;background:linear-gradient(100deg,rgba(21,34,50,.74) 0%,rgba(21,34,50,.46) 44%,rgba(21,34,50,.32) 100%),linear-gradient(180deg,rgba(21,34,50,.40),rgba(21,34,50,.10) 40%,rgba(21,34,50,.52))}

.wrap{width:min(1240px,100%);margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
.sheet{background:var(--paper);position:relative;z-index:1;margin-inline:var(--inset)}
.block{padding-top:clamp(60px,9vw,124px);padding-bottom:clamp(60px,9vw,124px)}
.tint{background:var(--paper-2)}
.tint-sage{background:var(--sage-soft)}
.tint-champagne{background:var(--champagne-soft)}

.eyebrow{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-deep)}
.h-lg{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5.2vw,3.8rem);line-height:1.07;letter-spacing:-.01em}
.h-md{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.14}
.lead{font-size:clamp(1rem,2.2vw,1.13rem);color:var(--ink-2);max-width:60ch}
em{font-style:italic}
.rule{height:1px;background:var(--line);margin:clamp(28px,4vw,44px) 0}

.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv.on{opacity:1;transform:none}

/* ---------- botoes: salvia profunda (principal) e azul-marinho ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:15px 28px;transition:background .35s,color .35s,border-color .35s}
.btn-sage{background:var(--sage-deep);color:#fff;border:1px solid var(--sage-deep)}
.btn-sage:hover{background:#3E5745;border-color:#3E5745}
.btn-navy{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.btn-navy:hover{background:var(--navy-soft);border-color:var(--navy-soft)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ---------- cabecalho: bloco azul-marinho + fotografia ---------- */
.hero{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;min-height:100svh;background:var(--navy)}
.hero-in{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(26px,3.4vw,44px) clamp(24px,4.4vw,72px) clamp(34px,4vw,56px);color:#fff}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}
.mark{display:inline-block;padding:5px 0;min-height:46px;font-family:var(--serif);font-size:clamp(1.02rem,1.6vw,1.28rem);font-weight:400;line-height:1.15;color:#fff}
.mark span{display:block;font-family:var(--font);font-size:.58rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne);margin-top:6px}
.navlinks{display:flex;gap:26px;font-size:.76rem;letter-spacing:.05em;padding-top:5px}
.navlinks a{color:rgba(255,255,255,.78);transition:color .3s}
.navlinks a:hover{color:#fff}
.hero-mid{padding:clamp(40px,5.5vh,76px) 0}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:-.015em;max-width:14ch;color:#fff}
.hero .sub{margin-top:clamp(20px,2.6vw,28px);max-width:44ch;color:rgba(255,255,255,.82);font-size:clamp(.98rem,1.5vw,1.1rem)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,38px)}
.hero-foot{display:flex;flex-wrap:wrap;gap:8px 34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hero-img{position:relative;overflow:hidden;background:var(--navy-2);margin:0}
/* a imagem sai do fluxo: se ficar nele, uma foto mais estreita que a coluna estica
   o cabecalho inteiro (a foto do Dr. forcava 1000px numa tela de 900) e joga os
   dados do consultorio para fora da primeira tela. Absoluta, ela e cortada. */
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 16px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);background:linear-gradient(to top,rgba(21,34,50,.85),transparent)}

/* ---------- retrato do medico na dobra ---------- */
.retrato{margin:0;position:relative;overflow:hidden;background:var(--paper-2);border-bottom:3px solid var(--champagne);max-width:420px}
.retrato img{width:100%;height:auto}
@media (max-width:980px){.retrato{max-width:100%;margin-top:6px}}

/* ---------- faixa de fotografia ---------- */
.reveal{position:relative;z-index:1;min-height:78svh;display:flex;align-items:flex-end;color:#fff;padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(40px,7vh,84px)}
.reveal-in{display:grid;gap:15px;max-width:36ch}
.reveal .num{display:flex;align-items:center;gap:13px;font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.reveal .num::after{content:"";width:52px;height:1px;background:var(--champagne);opacity:.55}
.reveal .big{font-family:var(--serif);font-weight:300;color:#fff;letter-spacing:-.012em;line-height:1.06;font-size:clamp(1.85rem,5vw,3.6rem)}
.reveal p{color:rgba(255,255,255,.82);max-width:34ch}

/* ---------- faixa azul-marinho solida ---------- */
.band{position:relative;z-index:1;background:var(--navy);color:#fff;margin-inline:var(--inset);padding:clamp(56px,8vw,104px) 0;border-top:3px solid var(--champagne)}
.band .quote{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.5rem,4vw,2.9rem);line-height:1.18;color:#fff;max-width:20ch}
.band .by{margin-top:20px;font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.band .txt{color:rgba(255,255,255,.8);max-width:52ch;margin-top:clamp(24px,3vw,34px)}

/* ---------- grades ---------- */
.split{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,5.5vw,86px);align-items:start}
.split-head{position:sticky;top:clamp(24px,6vh,60px)}

.areas{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(32px,4.6vw,50px)}
.area{background:var(--paper);padding:clamp(22px,3.2vw,36px);display:flex;flex-direction:column;gap:10px;transition:background .4s}
.area:hover{background:var(--sage-soft)}
.area .n{font-size:.62rem;font-weight:500;letter-spacing:.2em;color:var(--sage-deep)}
.area h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2.3vw,1.55rem);line-height:1.2}
.area p{font-size:.92rem;color:var(--ink-2)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.8vw,32px);margin-top:clamp(32px,4.6vw,52px)}
.step{border-top:3px solid var(--champagne);padding-top:20px}
.step .n{font-family:var(--serif);font-size:1.45rem;color:var(--sage-deep);line-height:1}
.step h3{font-family:var(--serif);font-weight:400;font-size:1.22rem;margin-top:10px}
.step p{font-size:.89rem;color:var(--ink-2);margin-top:8px}

.score{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px;margin-top:26px;background:var(--champagne-soft);border-left:3px solid var(--champagne);padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,34px)}
.score b{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,5.6vw,3.8rem);line-height:1;color:var(--navy)}
.score .stars{color:var(--sage-deep);letter-spacing:.14em;font-size:1rem}
.score span{font-size:.85rem;color:var(--ink-2)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(15px,2.2vw,26px);margin-top:clamp(30px,4vw,46px)}
.review{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:11px}
.review p{font-family:var(--serif);font-size:1.1rem;line-height:1.42;color:var(--ink)}
.review .who{font-size:.64rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.src{margin-top:clamp(24px,3.2vw,34px);font-size:.79rem;color:var(--ink-3)}
.src a{border-bottom:1px solid var(--line)}
.src a:hover{border-color:var(--navy)}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);margin-top:clamp(28px,3.8vw,44px)}
.post{background:var(--paper);padding:clamp(20px,2.8vw,30px) clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:11px;min-height:200px;transition:background .4s}
.post:hover{background:var(--sage-soft)}
.post .tag{font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-deep)}
.post h3{font-family:var(--serif);font-weight:400;font-size:1.26rem;line-height:1.22}
.post .go{margin-top:auto;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

.info{display:grid;gap:20px;margin-top:6px}
.info div{border-top:1px solid var(--line);padding-top:13px}
.info dt{font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.info dd{margin:6px 0 0;font-family:var(--serif);font-size:1.2rem}

/* ---------- fechamento e rodape ---------- */
.close{position:relative;z-index:1;background:var(--sage-soft);color:var(--ink);margin-inline:var(--inset);padding:clamp(48px,6vw,86px) 0;text-align:center;border-top:4px solid var(--champagne)}
.close h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5vw,3.6rem);line-height:1.06;color:var(--navy);max-width:16ch;margin-inline:auto}
.close p{color:var(--ink-2);max-width:42ch;margin:20px auto 0}
.close .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.foot{background:var(--navy-2);color:rgba(255,255,255,.62);position:relative;z-index:1;margin-inline:var(--inset);padding:clamp(34px,4.6vw,54px) 0 clamp(28px,3.6vw,42px)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:flex-start}
.foot .mark2{font-family:var(--serif);font-size:1.14rem;color:#fff}
.foot .legal{font-size:.71rem;max-width:50ch;line-height:1.6}
.foot a{color:rgba(255,255,255,.8)}


/* ---------- acessibilidade: pular para o conteudo e foco visivel ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:13px 20px;font-size:.8rem}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.hero :focus-visible,.band :focus-visible,.reveal :focus-visible,.foot :focus-visible{outline-color:var(--champagne)}

/* ---------- barra de leitura ---------- */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--champagne);transform:scaleX(0);transform-origin:0 50%;z-index:90;pointer-events:none}

/* ---------- botao flutuante de WhatsApp ---------- */
.wa{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:60;display:inline-flex;align-items:center;gap:10px;background:var(--sage-deep);color:#fff;padding:14px 22px;border-radius:999px;font-size:.78rem;font-weight:500;letter-spacing:.06em;box-shadow:0 14px 34px rgba(21,34,50,.3);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s}
.wa.on{opacity:1;transform:none;pointer-events:auto}
.wa:hover{background:#3E5745}
.wa svg{flex:none}
@media (max-width:520px){.wa span{display:none}.wa{padding:15px;border-radius:50%}}

/* ---------- entrada do titulo, linha por linha ---------- */
/* as linhas do titulo sao bloco em QUALQUER largura: se ficarem inline,
   nao ha espaco entre </span><span> e as palavras colam ("queenxerga"). */
.hero h1 .ln{display:block}
.hero h1 .ln i{display:block;font-style:normal}
@media (min-width:981px){
  .hero h1 .ln{overflow:hidden}
  .hero h1 .ln i{transform:translateY(106%);transition:transform 1.05s var(--ease);transition-delay:var(--d,0s)}
  .hero h1.on .ln i{transform:none}
  .hero h1.rv{opacity:1;transform:none}
}

/* ---------- como chegar ---------- */
.chegar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);margin-top:clamp(30px,4vw,46px)}
.chegar dl{display:grid;gap:18px;margin:0}
.chegar dl>div{border-top:1px solid var(--line);padding-top:13px}
.chegar dt{font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.chegar dd{margin:6px 0 0;font-size:1rem;color:var(--ink)}
.chegar .nota{background:var(--paper-2);border-left:3px solid var(--sage);padding:clamp(20px,2.6vw,28px);font-size:.95rem;color:var(--ink-2);align-self:start}
.chegar .nota b{color:var(--ink);display:block;margin-bottom:6px}
@media (max-width:900px){.chegar{grid-template-columns:1fr}}

/* ---------- cartao de artigo sem link ainda ---------- */
.post[aria-disabled="true"]{cursor:default}
.post-nota{margin-top:18px;font-size:.8rem;color:var(--ink-3)}


/* ---------- navegacao fixa do topo ----------
   Uma navegacao so no site inteiro: os mesmos tres links no cabecalho e nesta
   barra. O menu sanfona saiu em set/2026 porque o cliente abriu a previa no
   celular e nao achou como mudar de pagina: navegacao que precisa ser
   descoberta nao e navegacao. */
.barra{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.16);transform:translateY(-102%);transition:transform .42s var(--ease)}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .barra{background:rgba(21,34,50,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.barra.on{transform:none}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,34px)}
.barra-mark{flex:none;font-family:var(--serif);font-size:1.02rem;line-height:1;color:#fff;white-space:nowrap;padding:18px 0}
.barra-links{display:flex;align-items:stretch;gap:clamp(16px,2.2vw,30px)}
.barra-links a{display:inline-flex;align-items:center;min-height:56px;font-size:.78rem;letter-spacing:.05em;color:rgba(255,255,255,.76);border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.barra-links a:hover{color:#fff}
.barra-links a.atual{color:#fff;border-bottom-color:var(--champagne)}
.barra-cta{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;background:var(--sage-deep);color:#fff;font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:background .3s}
.barra-cta:hover{background:#3E5745}

/* a barra cobre o alvo de uma ancora: reservar a altura dela na rolagem */
section[id],header[id]{scroll-margin-top:clamp(62px,8vw,78px)}

@media (max-width:980px){
  .rolar{display:flex}
  /* a barra de agendar cobre o rodape: sobra espaco no fim da pagina */
  .foot{padding-bottom:calc(clamp(28px,3.6vw,42px) + 74px)}
}

/* ---------- no celular o botao vira barra larga, alvo de toque cheio ---------- */
@media (max-width:600px){
  .wa{left:12px;right:12px;bottom:12px;border-radius:4px;justify-content:center;padding:17px;box-shadow:0 -6px 24px rgba(21,34,50,.18),0 10px 26px rgba(21,34,50,.26)}
  .wa span{display:inline}
}

/* ---------- alvos de toque: nenhum link abaixo de 44px ---------- */
@media (max-width:980px){
  .src a,.chegar dd a,.foot a{display:inline-block;padding:11px 0;min-height:44px}
  .hero-foot{gap:6px 26px}
}

/* ---------- convite para rolar ---------- */
.rolar{display:none;align-items:center;gap:11px;margin-top:22px;font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.rolar i{display:block;width:34px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.rolar i::after{content:"";position:absolute;inset:0;background:var(--champagne);transform:translateX(-100%);animation:puxa 2.6s var(--ease) infinite}
@keyframes puxa{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.rolar i::after{animation:none;transform:none}}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-img{height:46vh;order:2}
  .hero-mid{padding:clamp(40px,6vh,64px) 0}
  .split{grid-template-columns:1fr;gap:24px}
  .split-head{position:static}
  .areas{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .hero-foot{gap:7px 22px;font-size:.6rem}
  .hero .ctas .btn{flex:1 1 100%}
}


@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .stage .scene{transition:opacity .2s}
  .stage .scene.on{transform:none}
}


/* ============================================================
   PAGINAS INTERNAS (o site tem 3 paginas, nao e uma pagina unica)
   ============================================================ */
.hero-int{position:relative;z-index:1;background:var(--navy);color:#fff;padding:clamp(24px,3.2vw,40px) 0 clamp(52px,7vw,104px)}
.hero-int .topo{display:flex;align-items:flex-start;justify-content:space-between;gap:22px}
.hero-int .trilha{margin-top:clamp(40px,6vh,76px);font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.hero-int h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.05;letter-spacing:-.015em;max-width:17ch;margin-top:16px;color:#fff}
.hero-int .sub{margin-top:clamp(16px,2.2vw,24px);max-width:48ch;color:rgba(255,255,255,.82);font-size:clamp(.98rem,1.5vw,1.08rem)}

/* estado da pagina atual na navegacao */
.navlinks a.atual{color:#fff;border-bottom:1px solid var(--champagne);padding-bottom:4px}

/* link que leva para outra pagina do site */
.leva{display:inline-flex;align-items:center;min-height:46px;gap:11px;margin-top:clamp(22px,3vw,30px);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:9px;transition:border-color .3s,gap .3s}
.leva:hover{border-color:var(--navy);gap:16px}
.leva svg{flex:none}

/* resumo das frentes na pagina inicial (a versao completa vive em o-medico.html) */
.frentes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(30px,4vw,44px)}
.frente{background:var(--paper);padding:clamp(20px,2.8vw,30px);display:flex;flex-direction:column;gap:8px;transition:background .4s}
.frente:hover{background:var(--sage-soft)}
.frente .n{font-size:.6rem;font-weight:500;letter-spacing:.2em;color:var(--sage-deep)}
.frente h3{font-family:var(--serif);font-weight:400;font-size:1.22rem;line-height:1.22}
@media (max-width:900px){.frentes{grid-template-columns:1fr}}

/* lista de artigos */
.artigos-lista{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(30px,4vw,46px)}
.artigo{background:var(--paper);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(22px,3vw,32px) clamp(18px,2.6vw,28px);transition:background .4s}
.artigo:hover{background:var(--sage-soft)}
.artigo .data{font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);min-width:9ch}
.artigo h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.14rem,2.2vw,1.42rem);line-height:1.26}
.artigo .tag{font-size:.6rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-deep);white-space:nowrap}
@media (max-width:760px){.artigo{grid-template-columns:1fr;gap:9px}.artigo .data{min-width:0}}

.vazio{border:1px dashed var(--line);background:var(--paper-2);padding:clamp(28px,4vw,44px);margin-top:clamp(28px,3.6vw,42px);max-width:58ch}
.vazio b{display:block;font-family:var(--serif);font-weight:400;font-size:1.36rem;color:var(--navy);margin-bottom:10px}
.vazio p{font-size:.97rem;color:var(--ink-2)}
.vazio p + p{margin-top:12px}


/* ============================================================
   PISO DE LEGIBILIDADE NO CELULAR
   Medido em 390px: havia texto a 9,3px (o CRM no topo) e varios a 9,6px.
   Abaixo de 11px o texto secundario fica ilegivel no telefone, que e
   onde a maior parte dos pacientes abre o site. Nada aqui muda o desktop.
   ============================================================ */
@media (max-width:980px){
  .mark span{font-size:.7rem}
  .hero-foot{font-size:.7rem;letter-spacing:.12em}
  .hero-img figcaption{font-size:.7rem}
  .eyebrow,.hero-int .trilha{font-size:.74rem}
  .band .by{font-size:.74rem}
  .reveal .num{font-size:.72rem}
  .info dt,.chegar dt{font-size:.7rem}
  .review .who,.post .tag,.frente .n,.area .n,.artigo .data,.artigo .tag,.step .n{font-size:.7rem}
  .src,.post-nota{font-size:.86rem}
  .foot .legal{font-size:.79rem}
  .foot .wrap>div{font-size:.86rem}
}


/* ============================================================
   O CONSULTORIO (dobra de valor sobre o espaco, na pagina do medico)
   ============================================================ */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(30px,4vw,46px)}
.galeria figure{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
.galeria img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
@media (hover:hover){.galeria figure:hover img{transform:scale(1.04)}}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(to top,rgba(21,34,50,.88),transparent)}

.conforto{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,3.6vw,44px)}
.conforto div{background:var(--paper);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:9px}
.conforto h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.16rem,2.2vw,1.42rem);line-height:1.22;color:var(--navy)}
.conforto p{font-size:.93rem;color:var(--ink-2)}
.conforto .tel{font-family:var(--serif);font-size:1.3rem;color:var(--navy);margin-top:2px}
.conforto .tel a{display:inline-block;min-height:44px;padding:8px 0}
.conforto .tel a{border-bottom:1px solid var(--line)}
.conforto .tel a:hover{border-color:var(--navy)}

@media (max-width:900px){
  .galeria{grid-template-columns:1fr;gap:12px}
  .galeria figcaption{font-size:.72rem}
  .galeria figure{max-height:62vh}
  .conforto{grid-template-columns:1fr}
}

/* ---------- no celular a navegacao e visivel, nunca escondida ----------
   Os tres links viram abas de largura igual embaixo da assinatura, e a mesma
   barra fixa do topo aparece assim que o cabecalho sai da tela. */
@media (max-width:980px){
  .hero-top,.hero-int .topo{flex-direction:column;align-items:stretch;gap:0}
  .navlinks{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}
  .navlinks a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;text-align:center;
    min-height:46px;padding:0 6px;font-size:.78rem;letter-spacing:.02em;
    color:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.32);white-space:nowrap}
  .navlinks a.atual{background:var(--champagne);color:var(--navy);border-color:var(--champagne);padding-bottom:0}

  .barra .wrap{padding-inline:0;gap:0}
  .barra-mark,.barra-cta{display:none}
  .barra-links{flex:1 1 auto}
  .barra-links a{flex:1 1 0;justify-content:center;min-height:54px;font-size:.8rem;white-space:nowrap}
  .barra-links a.atual{background:rgba(255,255,255,.07)}
}
@media (max-width:360px){
  .navlinks a,.barra-links a{font-size:.72rem;letter-spacing:0}
}