/* ==========================================================================
   VITALIANO ODONTOLOGIA — design system
   Derivado de marca/01-manual-da-marca.md. O manual vence em qualquer conflito.

   REGRA DE OURO DA COR (manual §4.4):
     --verde        (#74A88C) DESENHA — simbolo, filete, grafismo, fundo chapado.
                    NUNCA cor de texto sobre fundo claro: 2,72:1, reprova WCAG AA.
     --verde-fundo  (#3C604D) ESCREVE — link, botao, titulo com acento, icone.
   ========================================================================== */

/* ---------- fontes auto-hospedadas (perf no 4G + LGPD) ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/CormorantGaramond-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/CormorantGaramond-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/Jost-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/Jost-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   TOKENS — estrutura editorial (canvas creme, tinta, cartão branco, sem sombra)
   sobre a paleta da marca. O acento CONTORNA, nunca preenche: ação é tinta.
   ========================================================================== */
:root{
  /* marca — inalterados, são os do logo e do manual */
  --verde:#74A88C; --verde-fundo:#3C604D; --preto:#000019;

  /* superfícies */
  --canvas:#EDEAE1;   /* creme: o papel */
  --linho:#F5F3EE;    /* banda alternada, barra de utilidade */
  --papel:#FFFFFF;    /* cartão que flutua no creme */
  --espresso:#232A26; /* barra de aviso */
  --tinta:var(--preto);

  /* texto e traço */
  --pedra:#6E6962;    /* texto secundário — 4,52:1 no creme */
  --fio:#DCD8CE;      /* borda de cartão, divisor */
  --cobble:#C9C4B8;

  /* semânticos */
  --bg:var(--canvas); --surface:var(--papel); --borda:var(--fio);
  --texto:var(--tinta); --texto-2:var(--pedra);
  --acento:var(--verde-fundo); --grafismo:var(--verde);

  --serif:'Cormorant Garamond','Times New Roman',Georgia,serif;
  --sans:'Jost','Century Gothic','Avant Garde',system-ui,-apple-system,sans-serif;

  --shell:min(1200px,100% - 3rem);
  --read:min(68ch,100% - 3rem);
  --s1:.25rem; --s2:.75rem; --s3:1.25rem; --s4:2rem;
  --s5:3rem; --s6:5rem; --s7:7rem;
  --barra-mobile:4.5rem;
  --r:2px;

  /* ---------- escala de texto: 6 passos fixos + 5 de display ----------
     Antes eram 22 valores crus. Entre 12,5px e 15,2px havia SEIS fazendo o
     mesmo trabalho (.78 / .8 / .8125 / .85 / .875 / .9375rem) — diferenca
     que ninguem percebe e que o sistema pagava seis vezes. Onde havia
     duvida entre dois vizinhos, subiu: o publico e 45+/55+. */
  --t-rotulo:.875rem;    /* 14px — olho, rotulo caixa alta, th. Unica excecao aos 17px (caixa alta) */
  --t-nota:1.0625rem;    /* 17px — legenda, meta, rodape legal (era 13px; publico 45+, auditoria 15/set) */
  --t-apoio:1.0625rem;   /* 17px — texto secundario, nav, botao (era 14px) */
  --t-corpo:1.0625rem;   /* 17px — corpo (era o que body ja usava) */
  --t-corpo-2:1.0625rem; /* 17px (era 15px) — corpo secundario em COLUNA ESTREITA.
     Existe porque colapsar isso em 17px foi longe demais: medido, o texto de
     cartao numa grade de 4 ficava com linha de ~30 caracteres, abaixo da faixa
     legivel. Passo a mais que se paga. */
  --t-lead:1.25rem;      /* 20px — lead, sub do hero, 1o paragrafo */
  --t-h3:1.5rem;         /* 24px */
  --d-1:clamp(2.6rem,7.2vw,6rem);              /* hero, .display */
  --d-2:clamp(2rem,4.6vw,3rem);                /* h1 de pagina e de artigo */
  --d-3:clamp(1.9rem,4.4vw,2.6rem);            /* h2 de pagina */
  --d-4:clamp(1.6rem,3.2vw,2.1rem);            /* h2 de artigo, destaque */
  --d-5:clamp(1.35rem,1rem + .85vw,1.6rem);    /* aspas do cartao */

  /* ---------- tinta sobre superficie ESCURA ----------
     O sistema so existia para o claro; no escuro cada tom foi decidido no
     lugar onde apareceu — oito cores para tres niveis de enfase. Medidos
     sobre a tinta #000019: 17,1:1 / 12,9:1 / 8,2:1. */
  --d-texto:#E7EAE8;
  --d-texto-2:#C7CEC9;
  --d-pedra:#9BA5A0;
  --d-fio:rgba(255,255,255,.14);   /* #2C3531 dava 1,64:1 — nao existia */
  --tinta-alta:#0E0E22;            /* hover do botao principal */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---------- terracota: NAO e cor da marca ----------
     Serve so ao marcador .pendente, que e anotacao de autoria. Fica nomeada
     aqui para nao voltar a ser hex solto no meio do arquivo, e fica com este
     comentario para ninguem a promover a segundo acento. Se aparecer numa
     pagina publicada, e bug — o build avisa. */
  --marca-pend:#A6402F;
  --marca-pend-txt:#8A3527;
  --marca-pend-esc:#E08A78;
  --marca-pend-esc-txt:#E8A697;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (max-width:768px){html{scroll-padding-bottom:6rem}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{margin:0;background:var(--bg);color:var(--texto);font-family:var(--sans);
  font-size:var(--t-corpo);line-height:1.5;letter-spacing:.01em;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:400}
p{margin:0 0 var(--s3)}
ul,ol{margin:0 0 var(--s3);padding-left:1.3rem}
li{margin-bottom:.35rem}
a{color:var(--acento);text-underline-offset:3px;text-decoration-thickness:1px}
/* O Jost chega até 500. Pedir 700 fazia o browser inventar negrito. */
strong,b{font-weight:500}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:var(--r)}
/* --acento e calibrado para fundo claro: sobre a tinta da 2,93:1 e sobre o
   espresso da 2,08:1, abaixo do minimo de 3:1 do SC 1.4.11. Em superficie
   escura o anel passa a ser branco. Sao 23 dos 63 focaveis da home. */
.topo :focus-visible,.rodape :focus-visible,.utilidade :focus-visible,
.secao--escura :focus-visible,.hero--escuro :focus-visible{outline-color:#fff}
.pular{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;
  padding:.75rem 1.25rem;z-index:200}
.pular:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.shell{width:var(--shell);margin-inline:auto}
.read{width:var(--read);margin-inline:auto}
.secao{padding-block:var(--s6)}
.secao--densa{padding-block:var(--s5)}
.secao--nevoa{background:var(--linho);border-block:1px solid var(--fio)}
.secao--escura{background:var(--tinta);color:var(--d-texto)}
.secao--escura .olho{color:var(--grafismo)}
.secao--escura p{color:var(--d-texto-2)}
/* O cartao do plano e BRANCO mesmo dentro da secao escura. Sem isto,
   `.secao--escura p` (0,1,1) vence `.plano` (0,1,0) e pinta 6 blocos com a
   cor feita para fundo escuro: 1,60:1 sobre papel — inclusive a linha de
   identificacao do responsavel tecnico, que e obrigatoria por lei. */
.secao--escura .plano p{color:var(--texto)}
.secao--escura .plano .plano__rot,.secao--escura .plano .plano__sub,
.secao--escura .plano .mini,.secao--escura .plano .plano__ass{color:var(--pedra)}
.secao--escura h1,.secao--escura h2,.secao--escura h3{color:#fff}

/* ---------- tipografia editorial ---------- */
.olho{font-size:var(--t-rotulo);font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  color:var(--pedra);margin:0 0 var(--s3)}
h2.olho{font-family:var(--sans);line-height:1.5;max-width:none}
.display{font-family:var(--serif);font-weight:300;line-height:1.0;letter-spacing:-.01em;
  font-size:var(--d-1);margin-bottom:var(--s3)}
h2,.h2{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.01em;
  font-size:var(--d-3);margin-bottom:var(--s3);max-width:20ch}
h3,.h3{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);line-height:1.3;
  letter-spacing:.01em;margin-bottom:var(--s2)}
h4,.h4{font-family:var(--sans);font-weight:500;font-size:var(--t-lead);line-height:1.4;margin-bottom:.4rem}
.lead{font-size:var(--t-lead);line-height:1.4;color:var(--texto)}
.secao--escura .lead{color:var(--d-texto-2)}
.destaque{font-family:var(--serif);font-weight:300;font-size:var(--d-4);
  line-height:1.2;letter-spacing:-.005em;margin:var(--s5) 0;padding-left:var(--s3);
  border-left:1px solid var(--grafismo);color:var(--texto);max-width:26ch}
.mini{font-size:var(--t-apoio);line-height:1.5;color:var(--texto-2)}

/* ---------- filete ---------- */
.filete{display:flex;align-items:center;gap:.5rem;color:var(--grafismo);margin:var(--s5) auto}
.filete::before,.filete::after{content:"";flex:1;height:1px;background:currentColor;opacity:.5}
.filete i{width:6px;height:6px;background:currentColor;rotate:45deg;flex:none}
.filete b{width:3px;height:3px;background:currentColor;rotate:45deg;flex:none}

/* ---------- botões: ação é TINTA, o verde só contorna ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--sans);font-size:var(--t-apoio);font-weight:500;line-height:1.2;
  padding:.85rem 1.1rem;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  min-height:46px;letter-spacing:.01em}
.btn--principal{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.btn--principal:hover{background:var(--tinta-alta);border-color:var(--tinta-alta)}
.btn--secundario{background:transparent;color:var(--tinta);border-color:var(--tinta);font-weight:400}
.btn--secundario:hover{background:var(--tinta);color:#fff}
.secao--escura .btn--principal{background:#fff;color:var(--tinta);border-color:#fff}
.secao--escura .btn--principal:hover{background:var(--linho);border-color:var(--linho)}
.secao--escura .btn--secundario{color:#fff;border-color:rgba(255,255,255,.5)}
.secao--escura .btn--secundario:hover{background:#fff;color:var(--tinta);border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.seta{color:var(--grafismo)}

/* ---------- barra de aviso ---------- */
.utilidade{background:var(--espresso);color:#fff;font-size:var(--t-apoio)}
.utilidade__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.4rem var(--s4);padding-block:.5rem}
.utilidade a{color:var(--grafismo);text-decoration:none;display:inline-block;padding-block:.75rem;margin-block:-.75rem}
.utilidade a:hover{text-decoration:underline}
.utilidade b{color:var(--grafismo);font-weight:400}
@media (max-width:640px){.utilidade__in{justify-content:center;text-align:center}.utilidade__promo{display:none}}

/* ---------- navegação escura ---------- */
/* color explícito: o fundo é escuro, e texto herdado nasceria invisível */
.topo{background:var(--tinta);color:#fff;position:sticky;top:0;z-index:50}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:62px;padding-block:.5rem;flex-wrap:nowrap}
.topo__marca{display:flex;align-items:center;text-decoration:none;flex:none;min-width:0;padding-block:.2rem}
@media (max-width:400px){
  .topo__in{gap:.5rem}
  .topo__marca svg{width:clamp(104px,28vw,122px)}
}
.topo__marca svg{width:clamp(122px,32vw,158px);height:auto;display:block}
.topo__marca .sym{fill:var(--grafismo)}
.topo__marca .txt{fill:#fff}
.nav{display:flex;align-items:center;gap:var(--s4)}
.nav__links{display:contents}
.nav a:not(.btn){font-size:var(--t-apoio);color:rgba(255,255,255,.88);text-decoration:none;letter-spacing:.01em}
.nav a:not(.btn):hover{color:#fff}
.menu{display:none}
/* 1180px: com texto a 17px e o link Contato, os 8 links nao cabem abaixo disso. */
@media (max-width:1180px){
  .nav__links{display:none}
  .menu{display:block;position:relative}
  .menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
    min-height:46px;padding:.5rem .7rem;font-size:var(--t-apoio);color:#fff;
    border:1px solid rgba(255,255,255,.5);border-radius:var(--r)}
  .menu>summary::-webkit-details-marker{display:none}
  .menu>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--grafismo);
    border-bottom:1.5px solid var(--grafismo);rotate:45deg;translate:0 -2px;transition:rotate .2s}
  .menu[open]>summary::after{rotate:-135deg;translate:0 2px}
  .menu__painel{position:absolute;right:0;left:auto;top:calc(100% + .5rem);min-width:15rem;max-width:calc(100vw - 2rem);z-index:70;
    background:var(--papel);border:1px solid var(--fio);border-radius:var(--r);padding:.3rem}
  /* `.nav a:not(.btn)` vale (0,2,1) e pinta de branco para o cabecalho
     escuro. O painel do menu e BRANCO, entao sem subir a especificidade
     aqui os 7 links ficam branco no branco — 1,00:1, invisiveis. Media
     query nao soma especificidade. */
  .nav .menu__painel a{display:block;padding:.8rem .9rem;text-decoration:none;color:var(--texto)}
  .nav .menu__painel a:hover{background:var(--linho);color:var(--acento)}
}

/* ---------- WhatsApp flutuante (15/set/2026) ----------
   Substituiu o botao do cabecalho e a barra fixa do celular: um ponto so de
   WhatsApp, em todas as larguras. Verde Profundo com icone branco = 6,81:1
   (o verde do app, #25D366, daria 1,98:1 e reprova o SC 1.4.11). Enquanto o
   aviso de cookies esta aberto, o botao sobe para nao cobrir Aceitar/Recusar. */
.wa-flutuante{position:fixed;z-index:90;
  right:calc(1rem + env(safe-area-inset-right));bottom:calc(1rem + env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  background:var(--acento);color:#fff;text-decoration:none;
  transition:transform .2s var(--ease),background-color .2s var(--ease)}
.wa-flutuante svg{width:30px;height:30px;fill:currentColor}
.wa-flutuante:hover{background:var(--tinta);transform:translateY(-2px)}
.wa-flutuante:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:50%}
body:has(.lgpd) .wa-flutuante{bottom:calc(7.5rem + env(safe-area-inset-bottom))}
@media (max-width:768px){body:has(.lgpd) .wa-flutuante{bottom:calc(11rem + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.wa-flutuante{transition:none}.wa-flutuante:hover{transform:none}}

/* ---------- hero claro: a foto é a superfície ---------- */
.hero{position:relative;min-height:min(86vh,780px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--canvas)}
.hero__fundo{position:absolute;inset:0;z-index:0}
.hero__fundo picture,.hero__fundo img{width:100%;height:100%;display:block}
.hero__fundo img{object-fit:cover;object-position:74% center;opacity:1}
/* ---------- filme ambiente do hero ----------
   A FOTO continua sendo o elemento de LCP: o <video> nasce com preload="none"
   e opacity 0, e o JS so anexa as fontes depois do load, se o aparelho topar.
   Quem tem prefers-reduced-motion, Save-Data ou rede lenta nunca baixa o
   arquivo. E se o video falhar, o que fica na tela e a foto. */
.hero__filme{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:74% center;opacity:0;
  transition:opacity 1.4s var(--ease);pointer-events:none}
.hero__filme.no-ar{opacity:1}
.hero__pausa{position:absolute;z-index:3;top:var(--s3);right:var(--s3);min-height:44px;padding:.5rem .9rem;
  font:500 var(--t-apoio)/1.2 var(--sans);color:var(--texto);background:rgba(245,243,238,.92);
  border:1px solid var(--fio);border-radius:var(--r);cursor:pointer}
.hero__pausa:hover{background:var(--papel)}
.hero--escuro .hero__filme{object-position:68% center}
@media (prefers-reduced-motion:reduce){.hero__filme{display:none}}

.hero__veu{position:absolute;inset:0;z-index:1;
  background:linear-gradient(103deg,var(--canvas) 0%,rgba(237,234,225,.95) 32%,rgba(237,234,225,.55) 60%,rgba(237,234,225,.04) 100%)}
/* No estreito o texto desce sobre a foto: veu vertical, fechado onde o texto cai. */
@media (max-width:899px){.hero__veu{background:linear-gradient(to top,var(--canvas) 34%,rgba(237,234,225,.94) 58%,rgba(237,234,225,.6) 80%,rgba(237,234,225,.2) 100%)}}
.hero__in{position:relative;z-index:2;padding-block:var(--s6) var(--s5)}
.hero__grade,.hero__texto{max-width:none}
.hero .olho{color:var(--texto)}
/* h1 de pagina interna: menor que o hero. Existia INLINE em 11 paginas, com
   duas variantes que so diferiam no fator vw (4.6 e 4.2) — deriva de copiar
   e colar. Virou classe. */
.display--p{font-size:var(--d-2)}

.hero h1{color:var(--acento);margin-bottom:var(--s3);max-width:20ch;
  font-size:var(--d-1);overflow-wrap:break-word}
/* .hero h1 (0,1,1) vencia .display--p (0,1,0): as internas saiam no tamanho da home. */
.hero h1.display--p{font-size:var(--d-2)}
.hero__sub{font-size:var(--t-lead);line-height:1.4;color:var(--texto);max-width:44ch}
.hero__sub strong{font-weight:500}
.hero .btns{margin-top:var(--s4)}
.hero__micro{margin-top:var(--s3);font-size:var(--t-apoio);color:var(--texto);max-width:46ch}
.hero .foto-pendente{background:var(--papel);border-color:var(--fio);min-height:100%}
.hero .foto-pendente__o{color:var(--pedra)}

/* ---------- faixa de credenciais ---------- */
.tira{background:var(--linho);border-block:1px solid var(--fio)}
.tira__in{display:flex;flex-wrap:wrap;gap:.6rem var(--s5);justify-content:space-between;
  padding-block:var(--s3);font-size:var(--t-rotulo);letter-spacing:.02em;text-transform:uppercase;color:var(--pedra)}

/* ---------- grades ---------- */
.grade{display:grid;gap:1rem}
.grade--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5)}
.grade--3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media (min-width:900px){.grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grade--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ---------- cartões: brancos, raio zero, fio de cabelo, sem sombra ---------- */
.cartao{background:var(--papel);border:1px solid var(--fio);border-radius:0;
  padding:var(--s4);display:flex;flex-direction:column;position:relative;
  transition:border-color .15s}
.cartao:hover{border-color:var(--cobble)}
.grade > .cartao:first-child::before{content:"";position:absolute;top:var(--s2);left:var(--s2);
  width:6px;height:6px;background:var(--grafismo);border-radius:50%}
.cartao h3{margin-bottom:var(--s2)}
.cartao p{color:var(--texto-2);font-size:var(--t-corpo-2);line-height:1.5}
.cartao p:last-of-type{margin-bottom:var(--s3)}
.cartao__link{margin-top:auto;font-weight:400;font-size:var(--t-apoio);text-decoration:none;color:var(--texto);
  display:inline-block;align-self:flex-start;padding-block:.75rem;margin-bottom:-.75rem}
.cartao__link:hover{color:var(--acento);text-decoration:underline}
.cartao .porta__aspas{font-family:var(--serif);font-weight:400;
  font-size:var(--d-5);line-height:1.22;letter-spacing:.005em;
  color:var(--texto);margin:0 0 var(--s3);text-wrap:pretty}

/* ---------- passos ---------- */
.passo{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start;
  padding-block:var(--s4);border-top:1px solid var(--fio)}
.passo__n{font-family:var(--serif);font-weight:300;font-size:var(--d-3);line-height:1;
  color:var(--acento);min-width:2.4rem;font-variant-numeric:tabular-nums}
.passo p{margin-bottom:0;color:var(--texto-2)}

/* ---------- o plano ---------- */
.plano{background:var(--papel);color:var(--texto);border:1px solid var(--fio);
  border-radius:0;padding:clamp(var(--s3),4vw,var(--s6))}
.plano__cab{border-bottom:1px solid var(--fio);padding-bottom:var(--s3);margin-bottom:var(--s5)}
.plano__cab .t{font-size:var(--t-rotulo);font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--pedra)}
.plano__cab .n{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);margin-top:.3rem}
.plano__campos{display:flex;flex-wrap:wrap;gap:.5rem var(--s4);margin-top:var(--s2);
  font-size:var(--t-nota);color:var(--pedra)}
.plano__cols{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.plano__col{border-top:2px solid var(--acento);padding-top:.9rem}
.plano__col:last-child{border-top-color:var(--fio)}
.plano__rot{font-size:var(--t-rotulo);font-weight:500;letter-spacing:.02em;text-transform:uppercase;margin-bottom:.3rem}
.plano__sub{font-size:var(--t-nota);color:var(--pedra);margin-bottom:var(--s3);font-style:italic}
.plano__col ul{list-style:none;padding:0;margin:0;font-size:var(--t-corpo-2)}
.plano__col li{padding:.5rem 0;border-bottom:1px dotted var(--fio);margin:0}
.plano__desc{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--fio)}
.plano__ass{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--fio);
  font-size:var(--t-nota);color:var(--pedra);line-height:1.6}

/* ---------- foto pendente ---------- */
.foto-pendente{position:relative;display:grid;place-items:center;text-align:center;
  background:var(--linho);border:1px dashed var(--cobble);border-radius:0;
  padding:var(--s4) var(--s3);color:var(--texto-2);overflow:hidden}
.foto-pendente::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(116,168,140,.08) 14px 28px)}
.foto-pendente__rot{position:relative;font-size:var(--t-rotulo);font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;color:var(--acento);margin-bottom:.5rem}
.foto-pendente__o{position:relative;font-size:var(--t-corpo);line-height:1.45;max-width:34ch;margin:0}
.foto-pendente__spec{position:relative;margin-top:.6rem;font-size:var(--t-nota);color:var(--pedra)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--fio)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s4) 2rem var(--s4) 0;position:relative;
  font-family:var(--serif);font-weight:400;font-size:var(--t-lead);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.3rem;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--acento);border-bottom:1.5px solid var(--acento);
  translate:0 -60%;rotate:45deg;transition:rotate .2s}
.faq details[open] summary::after{rotate:-135deg;translate:0 -20%}
.faq details p{margin:0 0 var(--s4);color:var(--texto-2);max-width:70ch}

/* ---------- dados ---------- */
.dados{display:grid;gap:var(--s4) var(--s6);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.dados dt{font-size:var(--t-rotulo);font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  color:var(--pedra);margin-bottom:.35rem}
.dados dd{margin:0 0 var(--s4);line-height:1.55}

/* ---------- migalha, notas, listas ---------- */
.migalha{padding-block:var(--s3) 0;font-size:var(--t-nota);color:var(--pedra)}
.migalha a{color:var(--pedra);display:inline-block;padding-block:.75rem;margin-block:-.75rem}
.migalha a:hover{color:var(--acento)}
.migalha span[aria-hidden]{margin-inline:.3rem;color:var(--pedra)}
.nota-conduta{background:var(--papel);border:1px solid var(--fio);border-left:2px solid var(--grafismo);
  padding:var(--s4);border-radius:0}
.lista-artigos{list-style:none;padding:0;margin:0}
.lista-artigos li{border-bottom:1px solid var(--fio);margin:0}
.lista-artigos a{display:block;padding:var(--s4) 0;text-decoration:none;
  font-family:var(--serif);font-weight:400;font-size:var(--t-lead);line-height:1.3;color:var(--texto);
  transition:padding-left .18s}
.lista-artigos a:hover{color:var(--acento);padding-left:.5rem}

/* ---------- blog ---------- */
.artigo-cartao{display:flex;flex-direction:column;background:var(--papel);
  border:1px solid var(--fio);border-radius:0;padding:var(--s4);transition:border-color .15s}
.artigo-cartao:hover{border-color:var(--cobble)}
.artigo-cartao .cat{font-size:var(--t-rotulo);font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  color:var(--pedra);margin-bottom:var(--s3)}
.artigo-cartao h3{margin-bottom:var(--s2)}
.artigo-cartao h3 a{color:var(--texto);text-decoration:none}
.artigo-cartao h3 a:hover{color:var(--acento)}
.artigo-cartao p{color:var(--texto-2);font-size:var(--t-corpo-2)}
.artigo-cartao .assina{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--fio);
  font-size:var(--t-nota);color:var(--pedra)}
.artigo__cab{padding-block:var(--s5) var(--s4);border-bottom:1px solid var(--fio);margin-bottom:var(--s5)}
.artigo__cab h1{font-family:var(--serif);font-weight:300;line-height:1.05;letter-spacing:-.01em;
  font-size:var(--d-2);margin-bottom:var(--s3)}
.artigo__meta{display:flex;flex-wrap:wrap;gap:.4rem var(--s4);font-size:var(--t-nota);color:var(--pedra)}
.artigo__corpo>p:first-of-type{font-size:var(--t-lead);line-height:1.45;color:var(--texto)}
.artigo__corpo h2{font-size:var(--d-4);margin-top:var(--s6);max-width:24ch}
.artigo__corpo h3{margin-top:var(--s5)}
.artigo__rev{margin-top:var(--s6);padding:var(--s4);background:var(--papel);
  border:1px solid var(--fio);border-radius:0;font-size:var(--t-apoio);color:var(--texto-2)}
.artigo__rev strong{color:var(--texto)}

/* ---------- rodapé ---------- */
.rodape{background:var(--tinta);color:var(--d-pedra);padding-block:var(--s6) var(--s4);font-size:var(--t-apoio)}
.rodape a{color:var(--grafismo)}
.rodape__grade{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  padding-bottom:var(--s5);border-bottom:1px solid var(--d-fio)}
.rodape__marca svg{width:180px;height:auto}
.rodape__marca .sym{fill:var(--grafismo)}
.rodape__marca .txt{fill:#fff}
.rodape h3{color:#fff;font-family:var(--sans);font-size:var(--t-rotulo);font-weight:500;
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:var(--s3)}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:.25rem}
.rodape li a{display:inline-block;padding-block:.55rem}
.rodape__legal{padding-top:var(--s5);font-size:var(--t-nota);line-height:1.7;color:var(--d-pedra)}
.rodape__legal strong{color:var(--d-texto);font-weight:400}

/* ---------- pendente ---------- */
.pendente{display:inline;background:rgba(166,64,47,.1);border-bottom:1px dashed var(--marca-pend);
  color:var(--marca-pend-txt);padding:0 .18em}
.pendente::before{content:"⚠ ";font-size:.85em}
.secao--escura .pendente,.rodape .pendente{background:rgba(224,138,120,.16);
  border-bottom-color:var(--marca-pend-esc);color:var(--marca-pend-esc-txt)}

/* ---------- LGPD ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--papel);
  border-top:1px solid var(--fio);padding:var(--s3);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2) var(--s4)}
.lgpd__t{margin:0;font-size:var(--t-apoio);line-height:1.45;max-width:62ch;color:var(--texto-2)}
.lgpd__b{display:flex;gap:.5rem;flex:none}
.lgpd .btn{padding:.55rem 1rem;min-height:44px;font-size:var(--t-apoio)}
/* No estreito o banner tinha 156px: o texto quebrava em 3 linhas e os botoes
   iam para uma 4a. Somado a barra do WhatsApp, cobria 100% do CTA do hero —
   medido a 360x780. Aqui ele encolhe em vez de empilhar: a segunda frase sai,
   os botoes ficam na mesma linha do texto. */
@media (max-width:768px){
  .lgpd{bottom:0;padding:var(--s2) 1rem;gap:.6rem;
    flex-wrap:nowrap;align-items:center;text-align:left}
  .lgpd__t{font-size:var(--t-nota);line-height:1.35}
  .lgpd__mais{display:none}
  .lgpd__b{width:auto;flex:none;flex-direction:column;gap:.35rem}
  .lgpd__b .btn{flex:none;padding:.45rem .8rem;min-height:44px;font-size:var(--t-nota)}
}

/* ---------- mapa ---------- */
.mapa{position:relative;display:grid;place-items:center;text-align:center;aspect-ratio:16/9;
  background:var(--linho);border:1px solid var(--fio);border-radius:0;overflow:hidden;padding:var(--s3)}
.mapa::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--fio) 1px,transparent 1px) 0 0/100% 34px,
             linear-gradient(90deg,var(--fio) 1px,transparent 1px) 0 0/34px 100%;opacity:.5}
.mapa__in{position:relative;max-width:44ch}
.mapa__end{font-weight:500;line-height:1.5;margin:0 0 .3rem}
.mapa__nota{font-size:var(--t-apoio);color:var(--texto-2);margin:0 0 var(--s3);line-height:1.45}
.mapa__acoes{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.mapa .btn{padding:.65rem 1rem;min-height:42px}
@media (max-width:600px){.mapa{aspect-ratio:4/5}}

/* ---------- fotos reais ---------- */
.foto{margin:0}
.foto picture{display:block;width:100%;overflow:hidden;border-radius:0}
.foto img{display:block;width:100%;height:100%;object-fit:cover}
.foto figcaption{margin-top:.6rem;color:var(--texto-2);font-size:var(--t-nota);line-height:1.5}
.foto.retrato picture{width:100%}
.foto.retrato img{width:100%;height:100%;object-fit:cover}

/* ---------- tabela ---------- */
.tw{overflow-x:auto;margin:var(--s3) 0 var(--s4)}
table{border-collapse:collapse;width:100%;font-size:var(--t-corpo-2)}
th,td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--fio);vertical-align:top}
th{font-weight:500;font-size:var(--t-rotulo);letter-spacing:.02em;text-transform:uppercase;color:var(--pedra)}
@media (max-width:600px){
  .tw--pilha{overflow:visible}
  .tw--pilha table,.tw--pilha tbody,.tw--pilha tr,.tw--pilha th,.tw--pilha td{display:block;width:auto}
  .tw--pilha thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tw--pilha tr{border-bottom:1px solid var(--fio);padding-block:.75rem}
  .tw--pilha th,.tw--pilha td{border:0;padding:.35rem 0}
  .tw--pilha td::before{content:attr(data-rotulo);display:block;font-weight:500;color:var(--texto)}
}

/* ==========================================================================
   MOVIMENTO — o estado padrão é VISÍVEL; o JS adiciona .js-anim e só então
   o CSS esconde para revelar. prefers-reduced-motion não adiciona a classe,
   então nenhuma regra de esconder chega a casar.
   ========================================================================== */
.js-anim .secao > .read > *,
.js-anim .secao > .shell > *,
.js-anim .grade > *,
.js-anim .passo,
.js-anim .plano__col,
.js-anim .destaque{
  transition:opacity .5s var(--ease) var(--atraso,0ms),
             transform .5s var(--ease) var(--atraso,0ms)}
.js-anim .secao > .read > *:not(.vis),
.js-anim .secao > .shell > *:not(.vis),
.js-anim .grade > *:not(.vis),
.js-anim .passo:not(.vis),
.js-anim .plano__col:not(.vis),
.js-anim .destaque:not(.vis){opacity:0;transform:translateY(10px)}

.js-anim .filete::before,.js-anim .filete::after{transition:transform .7s var(--ease)}
.js-anim .filete:not(.vis)::before,.js-anim .filete:not(.vis)::after{transform:scaleX(0)}
.js-anim .filete::before{transform-origin:right center}
.js-anim .filete::after{transform-origin:left center}
.js-anim .filete i,.js-anim .filete b{transition:opacity .4s var(--ease) .45s}
.js-anim .filete:not(.vis) i,.js-anim .filete:not(.vis) b{opacity:0}

.js-anim .plano__cols .plano__col:nth-child(1){--atraso:0ms}
.js-anim .plano__cols .plano__col:nth-child(2){--atraso:220ms}

.js-anim .hero .olho:not(.entra),.js-anim .hero__sub:not(.entra),
.js-anim .hero .btns:not(.entra),.js-anim .hero__micro:not(.entra),
.js-anim .hero .foto-pendente:not(.entra){opacity:0}
.js-anim .hero .entra{animation:vit-entra .55s var(--ease) var(--atraso,0ms) both}
@keyframes vit-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js-anim .secao > .read > *,.js-anim .secao > .shell > *,.js-anim .grade > *,
  .js-anim .passo,.js-anim .plano__col,.js-anim .destaque,
  .js-anim .secao > .read > *:not(.vis),.js-anim .secao > .shell > *:not(.vis),
  .js-anim .grade > *:not(.vis),.js-anim .passo:not(.vis),
  .js-anim .plano__col:not(.vis),.js-anim .destaque:not(.vis),
  .js-anim .hero .olho:not(.entra),.js-anim .hero__sub:not(.entra),
  .js-anim .hero .btns:not(.entra),.js-anim .hero__micro:not(.entra),
  .js-anim .hero .foto-pendente:not(.entra){
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .js-anim .filete::before,.js-anim .filete::after,
  .js-anim .filete:not(.vis)::before,.js-anim .filete:not(.vis)::after{transform:scaleX(1)!important}
  .js-anim .filete i,.js-anim .filete b,
  .js-anim .filete:not(.vis) i,.js-anim .filete:not(.vis) b{opacity:1!important}
  .cartao:hover,.artigo-cartao:hover{border-color:var(--fio)}
}

/* ---------- hero escuro: para quando a imagem pede fundo preto ----------
   Usado na endodontia, onde o dente retroiluminado só existe contra o escuro.
   O véu inverte, o texto clareia, e o acento passa a ser o verde de marca —
   que sobre o Preto Vitaliano mede 7,62:1 e finalmente pode falar. */
.hero--escuro{background:var(--tinta)}
/* O dente ocupa 17%-43% da largura da imagem e a metade direita e preta
   vazia: a foto foi composta para receber o texto A DIREITA. Entao aqui, e
   so aqui, o hero inverte a mao — dente na esquerda, texto na direita, sem
   um pisar no outro. O veu acompanha: transparente onde o dente esta,
   fechando para o preto onde o texto vai cair. */
.hero--escuro .hero__veu{
  background:linear-gradient(80deg,rgba(0,0,25,0) 30%,rgba(0,0,25,.55) 44%,rgba(0,0,25,.88) 56%,rgba(0,0,25,.96) 72%)}
@media (min-width:900px){
  .hero--escuro .hero__texto{margin-left:auto;max-width:min(46ch,52%)}
}
/* No estreito o corte vira horizontal e o object-position passa a valer:
   puxa para o dente (28%) em vez do enquadramento padrao (74%), que cairia
   no preto vazio e entregaria um hero sem assunto. O texto desce para
   baixo do dente, sobre um veu vertical. */
@media (max-width:899px){
  .hero--escuro .hero__fundo img{object-position:28% center}
  .hero--escuro .hero__veu{
    background:linear-gradient(to top,rgba(0,0,25,.97) 46%,rgba(0,0,25,.86) 62%,rgba(0,0,25,.3) 84%,rgba(0,0,25,0) 100%)}
}
.hero--escuro .olho{color:var(--grafismo)}
.hero--escuro h1{color:#fff}
.hero--escuro .hero__sub{color:var(--d-texto-2)}
.hero--escuro .hero__micro{color:var(--d-pedra)}
.hero--escuro .btn--principal{background:#fff;color:var(--tinta);border-color:#fff}
.hero--escuro .btn--principal:hover{background:var(--linho);border-color:var(--linho)}
.hero--escuro .btn--secundario{color:#fff;border-color:rgba(255,255,255,.5)}
.hero--escuro .btn--secundario:hover{background:#fff;color:var(--tinta);border-color:#fff}
.hero--escuro + .migalha,.hero--escuro .migalha{color:var(--d-pedra)}

/* ---------- figura de artigo ----------
   Imagem no corpo do texto so entra se carregar argumento. Por isso a
   legenda e obrigatoria no padrao: ela diz o que a foto prova. E como as
   imagens sao ilustrativas e nao casos da clinica, a legenda precisa dizer
   isso — caso clinico apresentado como ilustracao e o tipo de coisa que o
   CEO art. 44 trata como publicidade enganosa. */
.figura{margin:var(--s5) 0;display:flex;flex-direction:column;gap:.75rem}
.figura img{width:100%;height:auto;display:block;border:1px solid var(--fio)}
.figura figcaption{font-size:var(--t-apoio);line-height:1.5;color:var(--pedra);
  padding-left:var(--s3);border-left:2px solid var(--verde)}
.figura figcaption b{color:var(--texto);font-weight:500}

/* ==========================================================================
   BLOG REVISTA (15/set/2026) — destaque com imagem, grade de cards com capa,
   faixa de autores. Mesmo sistema: creme, cartao branco, raio zero, sem sombra.
   O link do titulo cobre o cartao inteiro (::after), entao ha UM alvo por
   artigo para teclado e leitor de tela, e o cartao todo e clicavel.
   ========================================================================== */
.revista__topo .lead{max-width:62ch}
.rev-cat{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;margin:0 0 var(--s2);
  font-size:var(--t-rotulo);font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--pedra)}
.rev-cat b{color:var(--acento);font-weight:500}
.rev-titulo{margin:0 0 var(--s2)}
.rev-titulo a{color:var(--texto);text-decoration:none}
.rev-titulo a::after{content:"";position:absolute;inset:0;z-index:1}
.rev-titulo a:hover{color:var(--acento)}
.rev-resumo{color:var(--texto-2)}
.rev-assina{display:flex;align-items:center;gap:.7rem;margin:auto 0 0;padding-top:var(--s3);
  border-top:1px solid var(--fio);font-size:var(--t-nota);color:var(--pedra);line-height:1.35}
.rev-assina img{width:44px;height:44px;object-fit:cover;flex:none}
.rev-destaque,.rev-cartao{position:relative;background:var(--papel);border:1px solid var(--fio);transition:border-color .15s}
.rev-destaque:hover,.rev-cartao:hover{border-color:var(--cobble)}
.rev-destaque:focus-within,.rev-cartao:focus-within{border-color:var(--acento)}
.rev-destaque__img,.rev-cartao__img{overflow:hidden;background:var(--linho)}
.rev-destaque__img picture,.rev-cartao__img picture{display:block;height:100%}
.rev-destaque__img img,.rev-cartao__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rev-destaque:hover img,.rev-cartao:hover .rev-cartao__img img{transform:scale(1.03)}
.rev-destaque{display:grid}
.rev-destaque__img{aspect-ratio:3/2}
.rev-destaque__txt{display:flex;flex-direction:column;padding:var(--s4)}
.rev-destaque .rev-titulo{font-size:var(--d-3);line-height:1.1}
@media (min-width:900px){
  .rev-destaque{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .rev-destaque__img{aspect-ratio:auto;min-height:26rem}
  .rev-destaque__txt{padding:var(--s5)}
}
.rev-grade{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.rev-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rev-cartao{display:flex;flex-direction:column}
.rev-cartao__img{aspect-ratio:16/9}
.rev-cartao__txt{display:flex;flex-direction:column;flex:1;padding:var(--s4)}
.rev-cartao .rev-titulo{font-size:var(--d-5);line-height:1.22}
.rev-nota{margin-top:var(--s4)}
.rev-autores{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);margin-top:var(--s4)}
@media (min-width:760px){.rev-autores{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rev-autor{position:relative;display:flex;align-items:center;gap:var(--s3);background:var(--papel);
  border:1px solid var(--fio);padding:var(--s3)}
.rev-autor img{width:88px;height:110px;object-fit:cover;flex:none}
.rev-autor a{font-family:var(--serif);font-size:var(--t-h3);line-height:1.2;color:var(--texto);text-decoration:none}
.rev-autor a::after{content:"";position:absolute;inset:0}
.rev-autor a:hover{color:var(--acento)}
.rev-autor .mini{margin:.2rem 0 0}
.artigo__capa{margin:0 0 var(--s5)}
.artigo__capa picture{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--linho)}
.artigo__capa img{display:block;width:100%;height:100%;object-fit:cover}
.artigo__capa figcaption{margin-top:.5rem;font-size:var(--t-nota);color:var(--pedra)}
@media (prefers-reduced-motion:reduce){
  .rev-destaque__img img,.rev-cartao__img img{transition:none}
  .rev-destaque:hover img,.rev-cartao:hover .rev-cartao__img img{transform:none}
}

/* ==========================================================================
   TITULOS MAIS FORTES (15/set/2026, pedido do Nathan)
   Os titulos estavam em Cormorant 300 (Light). Agora: titulo de pagina e de
   artigo em 600 (semibold); subtitulos, FAQ, cards e citacoes em 500 (medium).
   Arquivos estaticos do Google com NOME NOVO: /fonts/ tem cache immutable de 1 ano.
   ========================================================================== */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/CormorantGaramond-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/CormorantGaramond-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/CormorantGaramond-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/CormorantGaramond-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
.display,.hero h1,.artigo__cab h1{font-weight:600}
h2,.h2,h3,.h3,.destaque,.cartao .porta__aspas,.faq summary,.lista-artigos a,
.rev-titulo,.rev-autor a,.plano__cab .n,.passo__n{font-weight:500}

/* ---------- hero da recepção (A clínica, 15/set/2026) ----------
   No desktop o corte é quase só vertical: 72% mantém o logo da parede no quadro,
   com o texto sobre a parede clara da esquerda. No estreito o corte vira
   horizontal: 52% trouxe o quadro e o banner e perdeu o logo — 88% centraliza no
   logo da parede e no sofá, que é o que identifica a clínica. */
.hero--recepcao .hero__fundo img{object-position:72% center}
@media (max-width:899px){.hero--recepcao .hero__fundo img{object-position:88% center}}

/* ---------- hero da home: o Dr. na recepção (15/set/2026) ----------
   Pedido do Nathan: SEM transparência. Sem o véu, o contraste do texto passa a
   depender da parede clara da esquerda — por isso o enquadramento trava nela.
   Desktop mostra a cena inteira; no estreito puxa para a parede e o corpo dele. */
.hero--recepcao-dr .hero__fundo img{object-position:50% center}
@media (max-width:899px){.hero--recepcao-dr .hero__fundo img{object-position:36% center}}

/* ---------- hero da endodontia (15/set/2026) ----------
   A foto ja traz a palavra "ENDODONTIA" impressa na parede, no MESMO lugar onde
   entram o olho e o H1 do site — dois rotulos iguais na mesma tela. O
   palavra foi cortada NO ARQUIVO (endo-hero-v2): em tela larga o hero quase nao
   corta na horizontal, entao object-position nao dava conta. Quem nomeia a
   pagina e o HTML, que o leitor de tela e o Google leem. */
.hero--espera .hero__fundo img{object-position:52% center}
@media (max-width:899px){.hero--espera .hero__fundo img{object-position:76% center}}
.hero--dr-recepcao .hero__fundo img{object-position:56% center}
@media (max-width:899px){.hero--dr-recepcao .hero__fundo img{object-position:72% center}}
.hero--dr-mesa .hero__fundo img{object-position:50% 46%}
@media (max-width:899px){.hero--dr-mesa .hero__fundo img{object-position:56% 42%}}
.hero--blog-mesa .hero__fundo img{object-position:62% center}
@media (max-width:899px){.hero--blog-mesa .hero__fundo img{object-position:70% center}}
.hero--mesa .hero__fundo img{object-position:50% center}
@media (max-width:899px){.hero--mesa .hero__fundo img{object-position:62% center}}
.hero--endo-espera .hero__fundo img{object-position:52% center}
@media (max-width:899px){.hero--endo-espera .hero__fundo img{object-position:78% center}}

/* ==========================================================================
   LAYOUT NOVO (28/set/2026) — referência: mockup de 10 telas enviado pelo Nathan.
   Mesma marca (creme, verde, Cormorant + Jost). O que muda: cabeçalho claro com
   botão verde, hero dividido (texto | foto), ícones de linha, cartões com raio,
   faixas verdes no lugar das pretas, FAQ em caixas. Esta camada vem por último
   e sobrepõe o que existia; o que não é sobreposto continua valendo.
   Regra de conteúdo que NÃO mudou com o visual: textos, equipe, CROs e as
   decisões do Dr. Arthur são os do site no ar — o mockup só deu a forma.
   ========================================================================== */
:root{
  --fundo:#F7F5F0;      /* página: creme mais claro que o canvas antigo */
  --areia:#EFEBE3;      /* cartão de ícone, banda alternada */
  --mata:#2B4A3C;       /* botão e faixa: verde da marca escurecido. Branco sobre ele = 9,6:1 */
  --mata-alta:#213A2F;  /* hover e rodapé */
  --r2:8px;             /* raio de cartão e foto */
  --r-btn:4px;
  --d-1:clamp(2.35rem,1.5rem + 2.9vw,3.7rem);
  --d-2:clamp(2.1rem,1.45rem + 2.1vw,3.1rem);
  --d-3:clamp(1.85rem,1.35rem + 1.5vw,2.5rem);
  --bg:var(--fundo);
}
body{background:var(--fundo)}
h1,h2,h3{font-weight:500}
.display,.hero h1,.artigo__cab h1{font-weight:500}
h2,.h2{max-width:24ch}

/* ícone de linha — o sprite fica no _base.html */
.ic{width:1.75rem;height:1.75rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;color:var(--acento)}
.ic--p{width:1.25rem;height:1.25rem}

/* ---------- botões ---------- */
.btn{border-radius:var(--r-btn)}
.btn--principal{background:var(--mata);border-color:var(--mata);color:#fff}
.btn--principal:hover{background:var(--mata-alta);border-color:var(--mata-alta)}
.btn--secundario{color:var(--mata);border-color:var(--mata)}
.btn--secundario:hover{background:var(--mata);color:#fff}
.btn--pilula{border-radius:999px;padding:.7rem 1.3rem;min-height:44px}
.btn--wa{width:48px;min-width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;
  background:transparent;border:1px solid var(--mata);color:var(--mata)}
.btn--wa svg{width:22px;height:22px}
.btn--wa:hover{background:var(--mata);color:#fff}
.btn--claro{background:#fff;color:var(--mata);border-color:#fff}
.btn--claro:hover{background:var(--areia);border-color:var(--areia);color:var(--mata)}
.link-seta{display:inline-flex;align-items:center;gap:.4rem;font-weight:500;color:var(--mata);text-decoration:none;
  padding-block:.6rem;margin-block:-.6rem}
.link-seta .ic{width:1.1rem;height:1.1rem;transition:transform .2s var(--ease)}
.link-seta:hover .ic{transform:translateX(3px)}

/* ---------- cabeçalho claro ---------- */
.topo{background:rgba(247,245,240,.97);color:var(--texto);border-bottom:1px solid var(--fio)}
@supports (backdrop-filter:blur(8px)){.topo{background:rgba(247,245,240,.88);backdrop-filter:saturate(1.3) blur(10px)}}
.topo__in{min-height:78px}
.topo__marca .txt{fill:var(--tinta)}
.topo :focus-visible{outline-color:var(--acento)}
.nav{gap:var(--s4)}
.nav__links{display:flex;align-items:center;gap:1.75rem}
.nav a:not(.btn),.sub>summary{font-size:var(--t-apoio);color:var(--texto);text-decoration:none}
.nav a:not(.btn):hover,.sub>summary:hover{color:var(--acento)}
.nav a[aria-current]{color:var(--acento)}
.sub{position:relative}
.sub>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;padding-block:.6rem}
.sub>summary::-webkit-details-marker{display:none}
.sub>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  rotate:45deg;translate:0 -2px;transition:rotate .2s}
.sub[open]>summary::after{rotate:-135deg;translate:0 2px}
.sub__painel{position:absolute;top:calc(100% + .6rem);left:-1rem;min-width:17rem;z-index:70;
  background:var(--papel);border:1px solid var(--fio);border-radius:var(--r2);padding:.4rem;
  box-shadow:0 12px 32px -12px rgba(35,42,38,.22)}
.nav .sub__painel a{display:block;padding:.7rem .9rem;border-radius:var(--r-btn);color:var(--texto)}
.nav .sub__painel a:hover{background:var(--fundo);color:var(--acento)}
.nav .sub__painel a:first-child{border-bottom:1px solid var(--fio);border-radius:var(--r-btn) var(--r-btn) 0 0;margin-bottom:.25rem;font-weight:500}
@media (max-width:1180px){
  .nav__links{display:none}
  .menu>summary{color:var(--texto);border-color:var(--cobble)}
  .menu__painel{max-height:calc(100vh - 6rem);overflow:auto;border-radius:var(--r2);box-shadow:0 12px 32px -12px rgba(35,42,38,.22)}
  .menu__grupo{margin:.5rem .9rem .1rem;font-size:var(--t-rotulo);font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--pedra)}
}
/* No celular o CTA do cabeçalho sai: o WhatsApp flutuante já está na tela. */
@media (max-width:640px){.topo .btn--pilula{display:none}}

/* ---------- hero dividido: texto no creme | foto sangrando à direita ---------- */
.hero-d{position:relative;background:var(--fundo);overflow:hidden}
.hero-d__foto picture,.hero-d__foto img{display:block;width:100%;height:100%}
.hero-d__foto img{object-fit:cover}
.hero-d__in{position:relative;z-index:2;padding-block:var(--s5)}
.hero-d .migalha{padding:0 0 var(--s3)}
.hero-d h1{font-family:var(--serif);font-weight:500;font-size:var(--d-1);line-height:1.05;letter-spacing:-.01em;
  color:var(--texto);margin:0 0 var(--s3);max-width:16ch}
.hero-d h1.display--p{font-size:var(--d-2);max-width:18ch}
.hero-d .olho{color:var(--acento)}
.hero-d__sub{font-size:var(--t-lead);line-height:1.45;color:var(--texto-2);max-width:42ch}
.hero-d__sub strong{color:var(--texto)}
.hero-d .btns{margin-top:var(--s4);align-items:center}
.hero-d__micro{margin-top:var(--s3);font-size:var(--t-apoio);color:var(--texto-2);max-width:44ch}
@media (min-width:900px){
  .hero-d{min-height:min(640px,78vh);display:flex;align-items:center}
  .hero-d__foto{position:absolute;top:0;right:0;bottom:0;width:56%}
  .hero-d__foto::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,var(--fundo) 0%,rgba(247,245,240,.55) 14%,rgba(247,245,240,0) 34%)}
  .hero-d__in{padding-block:var(--s6)}
  .hero-d__txt{max-width:min(46%,34rem)}
}
@media (max-width:899px){
  .hero-d__foto{aspect-ratio:16/10;position:relative}
  .hero-d__foto::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;
    background:linear-gradient(to top,var(--fundo),rgba(247,245,240,0))}
  .hero-d__in{padding-block:var(--s3) var(--s5)}
}
/* variante banner: foto inteira atrás, véu escuro, texto branco (página de tratamentos) */
.hero-d--banner{color:#fff}
.hero-d--banner .hero-d__foto{position:absolute;inset:0;width:auto;aspect-ratio:auto}
.hero-d--banner .hero-d__foto::after{content:"";position:absolute;inset:0;height:auto;
  background:linear-gradient(90deg,rgba(24,33,28,.78) 0%,rgba(24,33,28,.55) 45%,rgba(24,33,28,.12) 100%)}
.hero-d--banner h1,.hero-d--banner .olho{color:#fff}
.hero-d--banner .hero-d__sub{color:rgba(255,255,255,.9)}
.hero-d--banner .migalha,.hero-d--banner .migalha a{color:rgba(255,255,255,.85)}
.hero-d--banner :focus-visible{outline-color:#fff}
@media (max-width:899px){.hero-d--banner .hero-d__in{padding-block:var(--s6)}
  .hero-d--banner .hero-d__foto::after{background:rgba(24,33,28,.66)}}

/* ---------- selos: faixa de 4 ícones abaixo do hero ---------- */
.selos{list-style:none;margin:0 auto;padding:var(--s4) 0;display:grid;gap:var(--s3) var(--s4);
  grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--fio)}
@media (min-width:900px){.selos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.selos li{display:flex;align-items:center;gap:.9rem;margin:0;font-size:var(--t-apoio);line-height:1.3;color:var(--texto)}

/* ---------- cabeçalho de seção ---------- */
.cab{margin-bottom:var(--s5)}
.cab--centro{text-align:center}
.cab--centro h2,.cab--centro .lead{margin-inline:auto}
.cab .lead{max-width:60ch;color:var(--texto-2)}

/* ---------- "Como podemos te ajudar?": cartões de ícone ---------- */
.ajuda{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.ajuda{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.ajuda{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ajuda__item{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:var(--s4);
  background:var(--areia);border:1px solid transparent;border-radius:var(--r2);color:var(--texto);text-decoration:none;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.ajuda__item:hover{background:var(--papel);border-color:var(--fio);transform:translateY(-2px)}
.ajuda__item .ic{margin-bottom:.4rem}
.ajuda__t{font-family:var(--serif);font-size:var(--d-5);line-height:1.2;font-weight:500}
.ajuda__r{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:var(--t-apoio);color:var(--texto-2)}
.ajuda__r .ic{width:1.1rem;height:1.1rem;margin:0;transition:transform .2s var(--ease)}
.ajuda__item:hover .ajuda__r .ic{transform:translateX(3px)}
.ajuda-nota{margin-top:var(--s4);text-align:center;color:var(--texto-2)}

/* ---------- faixa verde com foto (princípio, missão, CTA) ---------- */
.faixa{display:grid;grid-template-columns:minmax(0,1fr);background:var(--mata);color:#fff;
  border-radius:var(--r2);overflow:hidden}
@media (min-width:900px){.faixa{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.faixa__txt{padding:clamp(var(--s4),5vw,var(--s6));display:flex;flex-direction:column;justify-content:center}
.faixa__txt h2{color:#fff;font-size:var(--d-3);max-width:20ch}
.faixa__txt p{color:rgba(255,255,255,.86);max-width:48ch}
.faixa__txt .olho{color:var(--verde)}
.faixa__txt .btns{margin-top:var(--s3)}
.faixa__foto{min-height:18rem}
.faixa__foto picture,.faixa__foto img{display:block;width:100%;height:100%;object-fit:cover}
.faixa :focus-visible{outline-color:#fff}
.faixa--cta{grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.faixa--cta{grid-template-columns:minmax(0,1fr) auto}
  .faixa--cta .btns{padding-right:clamp(var(--s4),5vw,var(--s6));margin:0}}
.faixa--cta .btns{padding:0 clamp(var(--s4),5vw,var(--s6)) clamp(var(--s4),5vw,var(--s6))}
@media (min-width:900px){.faixa--cta .btns{padding-bottom:0}}
.faixa blockquote{margin:0;font-family:var(--serif);font-size:var(--d-4);line-height:1.25;color:#fff}
.faixa blockquote .ic{color:var(--verde);width:2rem;height:2rem;display:block;margin-bottom:var(--s3)}
.faixa cite{display:block;margin-top:var(--s3);font-style:normal;font-family:var(--sans);font-size:var(--t-apoio);color:rgba(255,255,255,.75)}

/* ---------- linha de ícones com rótulo (diferenciais) ---------- */
.icones{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4) var(--s3);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.icones{grid-template-columns:repeat(4,minmax(0,1fr))}}
.icones--3{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.icones--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.icones li{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.icones li .ic{width:2.4rem;height:2.4rem;padding:.55rem;box-sizing:content-box;border:1px solid var(--fio);border-radius:50%;background:var(--papel)}
.icones b{font-weight:500;line-height:1.3}
.icones span{font-size:var(--t-apoio);color:var(--texto-2);line-height:1.4;max-width:26ch}

/* ---------- divisão texto | foto ---------- */
.split{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6)}
  .split--inv>:first-child{order:2}}
.split__foto{margin:0}
.split__foto picture{display:block;border-radius:var(--r2);overflow:hidden;aspect-ratio:4/3}
.split__foto img{display:block;width:100%;height:100%;object-fit:cover}
.split__foto figcaption{margin-top:.6rem;font-size:var(--t-nota);color:var(--texto-2)}

/* ---------- lista com check ---------- */
.checklist{list-style:none;padding:0;margin:0 0 var(--s3)}
.checklist li{position:relative;padding:.55rem 0 .55rem 2.1rem;margin:0;border-bottom:1px solid var(--fio)}
.checklist li:last-child{border-bottom:0}
.checklist li::before{content:"";position:absolute;left:0;top:.72rem;width:1.3rem;height:1.3rem;background:var(--acento);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.5 9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.5 9'/%3E%3C/svg%3E") center/contain no-repeat}
.checklist b{font-weight:500}

/* ---------- linha do tempo horizontal (etapas) ---------- */
.etapas{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);counter-reset:etapa}
@media (min-width:900px){.etapas{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s3)}}
.etapas li{position:relative;margin:0;counter-increment:etapa;padding-left:3.6rem}
@media (min-width:900px){.etapas li{padding:3.9rem 0 0}}
.etapas li::before{content:counter(etapa);position:absolute;left:0;top:0;width:2.6rem;height:2.6rem;border-radius:50%;
  display:grid;place-items:center;background:var(--mata);color:#fff;font-family:var(--serif);font-size:1.3rem;font-weight:500;z-index:1}
@media (min-width:900px){.etapas li::after{content:"";position:absolute;top:1.3rem;left:2.6rem;right:0;height:1px;background:var(--cobble)}
  .etapas li:last-child::after{display:none}}
@media (max-width:899px){.etapas li::after{content:"";position:absolute;left:1.3rem;top:2.6rem;bottom:calc(-1 * var(--s4));width:1px;background:var(--cobble)}
  .etapas li:last-child::after{display:none}}
.etapas h3{font-family:var(--sans);font-size:var(--t-lead);font-weight:500;margin-bottom:.35rem}
.etapas p{margin:0;color:var(--texto-2);font-size:var(--t-corpo-2)}

/* ---------- passos verticais: número em círculo ---------- */
.passo{grid-template-columns:auto 1fr;gap:var(--s3);border-top:0;padding-block:var(--s3)}
.passo__n{width:2.8rem;height:2.8rem;min-width:0;border-radius:50%;display:grid;place-items:center;
  background:var(--mata);color:#fff;font-size:1.3rem;font-weight:500}
.passo h3{font-family:var(--sans);font-size:var(--t-lead);font-weight:500;margin:.45rem 0 .35rem}

/* ---------- cartões ---------- */
.cartao{border-radius:var(--r2);border-color:var(--fio)}
.grade > .cartao:first-child::before{display:none}
.cartao .ic{margin-bottom:var(--s3)}
.cartao h3{font-size:var(--d-5)}

/* ---------- seções ---------- */
.secao--nevoa{background:var(--areia);border-block:0}
.secao--escura{background:var(--mata);color:#fff}
.secao--escura p,.secao--escura .lead{color:rgba(255,255,255,.86)}
.secao--escura .olho{color:var(--verde)}
.secao--escura .btn--principal{background:#fff;color:var(--mata);border-color:#fff}
.secao--escura .btn--principal:hover{background:var(--areia);border-color:var(--areia);color:var(--mata)}
.secao--escura .btn--secundario:hover{color:var(--mata)}
.secao--escura .mini{color:rgba(255,255,255,.75)!important}
.olho{color:var(--acento)}

/* ---------- FAQ em caixas ---------- */
.faq details{background:var(--papel);border:1px solid var(--fio);border-radius:var(--r2);margin-bottom:.6rem;padding-inline:var(--s3)}
.faq summary{font-family:var(--sans);font-size:var(--t-corpo);font-weight:500;padding:1.05rem 2.2rem 1.05rem 0}
.faq summary::after{border:0;rotate:0deg;width:14px;height:14px;right:0;translate:0 -50%;
  background:linear-gradient(var(--acento),var(--acento)) center/14px 1.5px no-repeat,
             linear-gradient(var(--acento),var(--acento)) center/1.5px 14px no-repeat;transition:transform .2s}
.faq details[open] summary::after{rotate:0deg;translate:0 -50%;transform:rotate(45deg)}
.faq details p{margin:0 0 var(--s3)}
.faq details[open]{border-color:var(--cobble)}

/* ---------- equipe ---------- */
.doutor{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);background:var(--papel);
  border:1px solid var(--fio);border-radius:var(--r2);overflow:hidden}
@media (min-width:800px){.doutor{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0}}
.doutor__foto picture{display:block;height:100%;aspect-ratio:4/5}
@media (min-width:800px){.doutor__foto picture{aspect-ratio:auto;min-height:26rem}}
.doutor__foto img{display:block;width:100%;height:100%;object-fit:cover}
.doutor__txt{padding:clamp(var(--s4),4vw,var(--s5));display:flex;flex-direction:column;justify-content:center}
.doutor__txt h2,.doutor__txt h3{margin-bottom:.3rem}
.doutor__cro{font-size:var(--t-apoio);color:var(--texto-2);margin-bottom:var(--s3)}
.doutor__area{font-weight:500;color:var(--acento);margin-bottom:var(--s3)}
.pessoas{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);margin-top:var(--s5)}
@media (min-width:640px){.pessoas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.pessoas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pessoa{margin:0;background:var(--papel);border:1px solid var(--fio);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column}
.pessoa picture{display:block;aspect-ratio:4/5;overflow:hidden}
.pessoa img{display:block;width:100%;height:100%;object-fit:cover}
.pessoa__txt{padding:var(--s3) var(--s3) var(--s4)}
.pessoa__txt h3{font-size:var(--d-5);margin-bottom:.2rem}
.pessoa__txt p{margin:0 0 .6rem;color:var(--texto-2);font-size:var(--t-corpo-2)}
.pessoa__txt .doutor__area{margin-bottom:.6rem}

/* ---------- fotos em faixa (a clínica) ---------- */
.galeria{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
@media (min-width:900px){.galeria{grid-template-columns:repeat(4,minmax(0,1fr))}}
.galeria figure{margin:0}
.galeria picture{display:block;aspect-ratio:4/3;border-radius:var(--r2);overflow:hidden}
.galeria img{display:block;width:100%;height:100%;object-fit:cover}
.galeria figcaption{margin-top:.5rem;font-size:var(--t-nota);color:var(--texto-2)}

/* ---------- canais de contato ---------- */
.canais{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:800px){.canais{grid-template-columns:repeat(3,minmax(0,1fr))}}
.canais li{margin:0;display:flex;gap:1rem;align-items:flex-start;padding:var(--s4);background:var(--papel);
  border:1px solid var(--fio);border-radius:var(--r2)}
.canais b{display:block;font-weight:500;font-size:var(--t-lead);margin-bottom:.2rem}
.canais a{text-decoration:none;color:var(--texto)}
.canais a:hover{color:var(--acento)}
.canais span{display:block;font-size:var(--t-apoio);color:var(--texto-2)}

/* ---------- formulário que abre o WhatsApp ----------
   Nada é gravado neste site: o envio monta a mensagem e abre o wa.me. Sem
   backend, sem banco, sem dado de saúde guardado — e a recepção atende no
   mesmo canal de sempre. */
.form-wa{display:grid;gap:.9rem}
.form-wa label{display:block;font-size:var(--t-apoio);font-weight:500;margin-bottom:.35rem}
.form-wa input,.form-wa select,.form-wa textarea{width:100%;font:inherit;font-size:var(--t-corpo);color:var(--texto);
  background:#fff;border:1px solid var(--cobble);border-radius:var(--r-btn);padding:.8rem .9rem;min-height:48px}
.form-wa textarea{min-height:7.5rem;resize:vertical}
.form-wa input:focus,.form-wa select:focus,.form-wa textarea:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:var(--acento)}
.form-wa__dupla{display:grid;gap:.9rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.form-wa__dupla{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form-wa .btn{width:100%}
.form-wa__nota{font-size:var(--t-nota);color:var(--texto-2);margin:0}
.painel{background:var(--papel);border:1px solid var(--fio);border-radius:var(--r2);padding:clamp(var(--s4),4vw,var(--s5))}
.painel--verde{background:var(--mata);border-color:var(--mata);color:#fff}
.painel--verde h2,.painel--verde h3{color:#fff}
.painel--verde p,.painel--verde .form-wa__nota{color:rgba(255,255,255,.82)}
.painel--verde label{color:#fff}
.painel--verde .btn--principal{background:#fff;color:var(--mata);border-color:#fff}
.painel--verde .btn--principal:hover{background:var(--areia);border-color:var(--areia)}
.painel--verde :focus-visible,.painel--verde input:focus,.painel--verde select:focus,.painel--verde textarea:focus{outline-color:#fff}

/* ---------- vitrine de tratamentos (cartão com foto) ---------- */
.vitrine{display:grid;gap:var(--s4) 1.25rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.vitrine{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.vitrine{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vitrine__item{position:relative;display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--fio);
  border-radius:var(--r2);overflow:hidden;transition:border-color .2s var(--ease)}
.vitrine__item:hover{border-color:var(--cobble)}
.vitrine__item picture{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--areia)}
.vitrine__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vitrine__item:hover img{transform:scale(1.03)}
.vitrine__txt{padding:var(--s3) var(--s3) var(--s4);display:flex;flex-direction:column;flex:1}
.vitrine__txt h3{font-size:var(--d-5);margin-bottom:.4rem}
.vitrine__txt h3 a{color:var(--texto);text-decoration:none}
.vitrine__txt h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.vitrine__txt p{color:var(--texto-2);font-size:var(--t-corpo-2);margin-bottom:var(--s3)}
.vitrine__txt .link-seta{margin-top:auto}
@media (prefers-reduced-motion:reduce){.vitrine__item img,.ajuda__item{transition:none}.vitrine__item:hover img{transform:none}.ajuda__item:hover{transform:none}}

/* ---------- plano em duas colunas: cartão com raio ---------- */
.plano{border-radius:var(--r2)}

/* ---------- blog ---------- */
.rev-destaque,.rev-cartao,.rev-autor{border-radius:var(--r2);overflow:hidden}
.rev-busca{display:flex;align-items:center;gap:.6rem;background:var(--papel);border:1px solid var(--cobble);
  border-radius:999px;padding:.35rem .5rem .35rem 1rem;max-width:34rem;margin-top:var(--s4)}
.rev-busca input{flex:1;border:0;background:transparent;font:inherit;font-size:var(--t-corpo);min-height:40px;color:var(--texto)}
.rev-busca input:focus{outline:none}
.rev-busca:focus-within{outline:2px solid var(--acento);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s3)}
.chip{font:inherit;font-size:var(--t-apoio);padding:.5rem 1rem;min-height:44px;border-radius:999px;border:1px solid var(--cobble);
  background:transparent;color:var(--texto);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--mata);border-color:var(--mata);color:#fff}
.chip:hover{border-color:var(--mata)}
.rev-vazio{display:none;margin-top:var(--s4);color:var(--texto-2)}
[hidden]{display:none!important}

/* artigo com coluna lateral (sumário + chamada), montada pelo build */
.artigo-grade{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr);width:var(--shell);margin-inline:auto}
@media (min-width:1000px){.artigo-grade{grid-template-columns:minmax(0,1fr) 18.5rem;gap:var(--s6)}}
.artigo-grade>.read{width:auto;max-width:44rem;margin:0}
.artigo-lado{display:flex;flex-direction:column;gap:var(--s3)}
@media (min-width:1000px){.artigo-lado{position:sticky;top:6.5rem;align-self:start;padding-top:var(--s5)}}
.artigo-lado .painel{padding:var(--s4)}
.artigo-lado h2{font-family:var(--sans);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--pedra);margin-bottom:var(--s2)}
.sumario{margin:0;padding-left:1.2rem}
.sumario li{margin:0 0 .5rem;font-size:var(--t-apoio);line-height:1.35}
.sumario a{color:var(--texto);text-decoration:none}
.sumario a:hover{color:var(--acento);text-decoration:underline}
.artigo-lado .painel--verde h2{color:#fff;font-family:var(--serif);font-size:var(--d-5);letter-spacing:0;text-transform:none}
@media (max-width:999px){.artigo-lado .painel:first-child{display:none}}

/* ---------- rodapé verde ---------- */
.rodape{background:var(--mata-alta);color:rgba(255,255,255,.72)}
.rodape a{color:#CFE0D6}
.rodape__legal{color:rgba(255,255,255,.66)}
.rodape__legal strong{color:rgba(255,255,255,.9)}
.rodape__grade{border-bottom-color:rgba(255,255,255,.14)}

/* ---------- animação dos componentes novos (mesmo contrato do .js-anim) ---------- */
.js-anim .ajuda > *,.js-anim .icones > *,.js-anim .etapas > *,.js-anim .vitrine > *,.js-anim .pessoas > *{
  transition:opacity .5s var(--ease) var(--atraso,0ms),transform .5s var(--ease) var(--atraso,0ms)}
.js-anim .ajuda > *:not(.vis),.js-anim .icones > *:not(.vis),.js-anim .etapas > *:not(.vis),
.js-anim .vitrine > *:not(.vis),.js-anim .pessoas > *:not(.vis){opacity:0;transform:translateY(10px)}
.js-anim .hero-d .olho:not(.entra),.js-anim .hero-d__sub:not(.entra),.js-anim .hero-d .btns:not(.entra),
.js-anim .hero-d__micro:not(.entra){opacity:0}
.js-anim .hero-d .entra{animation:vit-entra .55s var(--ease) var(--atraso,0ms) both}
@media (prefers-reduced-motion:reduce){
  .js-anim .ajuda > *,.js-anim .icones > *,.js-anim .etapas > *,.js-anim .vitrine > *,.js-anim .pessoas > *,
  .js-anim .hero-d .olho,.js-anim .hero-d__sub,.js-anim .hero-d .btns,.js-anim .hero-d__micro{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}
@media (min-width:1100px){.rev-grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pessoas--4{margin-top:0}
@media (min-width:1100px){.pessoas--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mapa{border-radius:var(--r2)}
@media (min-width:900px){.mapa{aspect-ratio:21/8}}
@media (max-width:639px){.ajuda__item{padding:var(--s3);gap:.4rem}.ajuda__item .ic{margin-bottom:0}}
/* ---- _extra-hub.css ---- */
/* hub de tratamentos: grupo ("Primeiro: o que preserva") dentro do cartão */
.vitrine__grupo{margin:0 0 .4rem!important;font-size:var(--t-rotulo)!important;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--acento)!important}
/* ---- _extra-tratamentos-b.css ---- */
/* etapas em grade (estética restauradora: 6 degraus em 2 linhas de 3).
   Sem isto o fio que liga um número ao próximo atravessa a borda direita no
   fim de cada linha. */
@media (min-width:900px){
  .etapas--grade{row-gap:var(--s5)}
  .etapas--grade li:nth-child(3n)::after{display:none}
}

/* ---------- mais ilustrado (28/set/2026, pedido do Nathan) ----------
   Fotos de banco reais (Freepik, sem IA) de pessoas, nunca boca em close,
   instrumental ou cadeira (Res. CFO-196). Não são pacientes da clínica. */
.ajuda--fotos .ajuda__item{padding:0;overflow:hidden;background:var(--papel);border-color:var(--fio)}
.ajuda--fotos .ajuda__item>*:not(.ajuda__foto){margin-inline:var(--s4)}
.ajuda--fotos .ajuda__item>:last-child{margin-bottom:var(--s4)}
.ajuda__foto{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--areia);margin-bottom:.4rem}
.ajuda__foto picture,.ajuda__foto img{display:block;width:100%;height:100%;object-fit:cover}
.ajuda__foto img{transition:transform .6s var(--ease)}
.ajuda--fotos .ajuda__item:hover .ajuda__foto img{transform:scale(1.04)}
.ajuda--fotos .ajuda__item>.ic{margin-top:-1.9rem;position:relative;z-index:1;width:2.6rem;height:2.6rem;padding:.55rem;
  box-sizing:border-box;background:var(--papel);border:1px solid var(--fio);border-radius:50%}
@media (max-width:639px){.ajuda--fotos .ajuda__item>*:not(.ajuda__foto){margin-inline:var(--s3)}
  .ajuda--fotos .ajuda__item>:last-child{margin-bottom:var(--s3)}}
@media (prefers-reduced-motion:reduce){.ajuda__foto img{transition:none}.ajuda--fotos .ajuda__item:hover .ajuda__foto img{transform:none}}
.faixa--foto .faixa__txt .btns{margin-top:var(--s4)}
.faixa--foto .btn--secundario{color:#fff;border-color:rgba(255,255,255,.6)}
.faixa--foto .btn--secundario:hover{background:#fff;color:var(--mata)}
.faixa--foto .btn--principal{background:#fff;color:var(--mata);border-color:#fff}

/* ---------- hero com troca de fotos (home) ----------
   Troca lenta por esmaecimento, com pausa visível (WCAG 2.2.2) e parada total
   para quem pede menos movimento. A 1ª foto é o LCP e nasce visível. */
.hero-d__foto--slides .hero-d__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-d__foto--slides .hero-d__slide.is-on{opacity:1}
.hero-d__foto--slides .hero-d__slide picture,.hero-d__foto--slides .hero-d__slide img{display:block;width:100%;height:100%;object-fit:cover}
.hero-d__foto--slides::after{z-index:1;pointer-events:none}
.hero-d__ctrl{position:absolute;z-index:3;right:var(--s3);bottom:var(--s3);display:flex;align-items:center;gap:.35rem;
  background:rgba(247,245,240,.9);border-radius:999px;padding:.25rem .4rem}
.hero-d__dot{width:28px;height:28px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.hero-d__dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cobble);transition:background .2s,transform .2s}
.hero-d__dot[aria-current="true"]::before{background:var(--mata);transform:scale(1.25)}
.hero-d__pausa{min-width:32px;height:28px;border:0;background:transparent;cursor:pointer;color:var(--mata);font-size:.7rem;letter-spacing:-.05em}
.hero-d__ctrl :focus-visible{outline:2px solid var(--acento);outline-offset:1px;border-radius:999px}
@media (max-width:899px){.hero-d__ctrl{bottom:var(--s2);right:var(--s2)}}
@media (prefers-reduced-motion:reduce){.hero-d__foto--slides .hero-d__slide{transition:none}}

/* ---------- mosaico de fotos (home) ---------- */
.mosaico{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.mosaico figure{margin:0;border-radius:var(--r2);overflow:hidden;background:var(--areia)}
.mosaico picture,.mosaico img{display:block;width:100%;height:100%;object-fit:cover}
.mosaico__txt{grid-column:1/-1;padding-bottom:var(--s3)}
.mosaico__txt h2{max-width:18ch}
.mosaico__a{grid-column:1/-1;aspect-ratio:16/10}
.mosaico__b,.mosaico__c{aspect-ratio:1}
@media (min-width:900px){
  .mosaico{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.75fr);grid-template-rows:1fr 1fr;min-height:30rem}
  .mosaico__txt{grid-column:1;grid-row:1/3;align-self:center;padding:0 var(--s4) 0 0}
  .mosaico__a{grid-column:2;grid-row:1/3;aspect-ratio:auto}
  .mosaico__b{grid-column:3;grid-row:1;aspect-ratio:auto}
  .mosaico__c{grid-column:3;grid-row:2;aspect-ratio:auto}
}

/* ---------- ícones no padrão do guia (28/set/2026) ----------
   Traço de 2px no tamanho de exibição (1.6 na grade de 24 a ~30px) e o ícone
   dentro de um círculo branco com sombra suave, como na Biblioteca de Ícones. */
.ic{stroke-width:1.6}
.selos .ic,.cartao>.ic,.icones li .ic,.ajuda__item>.ic,.canais .ic,.doutor .ic{
  width:3.1rem;height:3.1rem;padding:.72rem;box-sizing:border-box;flex:none;
  background:#fff;border:0;border-radius:50%;color:var(--acento);
  box-shadow:0 1px 2px rgba(35,42,38,.06),0 6px 18px -6px rgba(35,42,38,.14)}
.icones li .ic{width:3.6rem;height:3.6rem;padding:.85rem}
.ajuda--fotos .ajuda__item>.ic{margin-top:-2.1rem;width:3.1rem;height:3.1rem;padding:.72rem;border:0}
.secao--nevoa .selos .ic,.secao--nevoa .icones li .ic{background:#fff}
.faixa .ic{box-shadow:none}