/* Dr. Fábio Arimura · Pneumologia · Doenças Intersticiais Pulmonares
   ---------------------------------------------------------------------------
   Design system v2.

   Tipografia: Newsreader nos títulos, Source Sans 3 no texto. As duas são SIL OFL
   e ficam hospedadas aqui, sem CDN: o site não faz pedido a terceiro nenhum.
   Foram instanciadas e subsetadas (Latin-1, eixo óptico fixo em 28 no Newsreader),
   caindo de 156 KB para 56 KB somadas.

   O serif nos títulos tem motivo: o site é 9.400 palavras de texto clínico longo
   em 16 páginas, assinado por um pesquisador com produção indexada. É publicação
   tanto quanto página de captação. O corpo continua em sans, que é o que se lê
   melhor em tela pequena, e o público aqui é 93% celular e muitas vezes idoso.

   Cor: um acento só, o pinho da marca. Antes o botão principal era verde WhatsApp,
   o que colocava dois verdes brigando e espalhava saturação por seis superfícies
   na home, até nenhuma chamar atenção. Agora o pinho é a ação e o verde WhatsApp
   fica só no botão flutuante, onde funciona como identificação de canal e não como
   marca. Para reverter, é só trocar --cta de volta para var(--wa).
   --------------------------------------------------------------------------- */

/* format("woff2") e não format("woff2-variations"): a segunda é sintaxe superada e,
   como há um src só por face, um agente que não reconheça o token descarta a fonte
   inteira e cai no Georgia sem avisar. format("woff2") vale para fonte variável. */
@font-face{
  font-family:"Source Sans 3";
  src:url("/fontes/sourcesans3-texto.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("/fontes/newsreader-display.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
/* Itálico de verdade. Sem esta face o navegador inclinava o romano por conta
   própria, e oblíquo sintético num serif de display entrega amadorismo justamente
   na palavra que o título destaca. Só a home usa, e só ela pré-carrega. */
@font-face{
  font-family:"Newsreader";
  src:url("/fontes/newsreader-display-italic.woff2") format("woff2");
  font-weight:400 700; font-style:italic; font-display:swap;
}

:root{
  /* Escala da marca. Usada como SUPERFÍCIE (fundo), nunca diretamente como cor de texto:
     texto usa os tokens semânticos abaixo, que invertem no modo escuro. */
  --pine-950:#16211c;
  --pine-900:#1c2b23;
  --pine-800:#22362b;
  --pine-700:#2e4a3f;   /* marca */
  --pine-600:#3a5c4d;
  --pine-500:#4d7562;
  --pine-100:#e4ebe6;
  --pine-50:#eef2ef;

  --paper:#f3f6f4;
  --paper-raised:#ffffff;
  --ink:#1c231f;
  --ink-soft:#4a5650;
  --ink-faint:#5f6d66;   /* 4.99:1 sobre --paper, mínimo AA para texto pequeno */
  --line:#dbe3de;

  /* Tokens semânticos de texto */
  --heading:#1c2b23;     /* títulos e rótulos fortes sobre superfície clara */
  --accent-text:#2e4a3f; /* verde da marca aplicado a texto e ícones */
  --on-dark:#ffffff;     /* texto sobre superfícies pinho */
  --on-dark-soft:rgba(255,255,255,0.78);
  --on-dark-faint:rgba(255,255,255,0.56);
  --accent-on-dark:#8ed4ae;  /* o acento clareado para virar texto sobre pinho, 7.3:1 */
  --dark-surface-line:transparent;

  --wa:#25d366;
  --wa-ink:#06371f;      /* 6.7:1 sobre --wa */

  /* Ação principal. Um token só governa todo CTA do site. */
  --cta:var(--pine-700);
  --cta-hover:var(--pine-800);
  --cta-ink:#ffffff;     /* 8.9:1 sobre --pine-700 */

  /* Forma: duas classes, e a regra é essa. Interativo é pílula, contêiner é 14px.
     Nada de terceiro raio aparecendo no meio do caminho. */
  --radius-card:14px;
  --radius-input:10px;
  --radius-pill:999px;
  --radius-media:20px;   /* só retrato e imagem grande */

  --shadow-sm: 0 1px 2px rgba(28,35,31,0.05), 0 1px 1px rgba(28,35,31,0.03);
  --shadow-md: 0 10px 30px rgba(22,33,28,0.07), 0 2px 6px rgba(22,33,28,0.04);
  /* Sombra ambiente, difusa e longa. Nunca sombra dura e preta: em superfície
     clara ela suja a cor em vez de sugerir altura. */
  --shadow-ambiente: 0 28px 64px -24px rgba(22,33,28,0.16), 0 8px 20px -12px rgba(22,33,28,0.08);
  --container: 1180px;

  /* Curva de movimento única do site. Desaceleração longa, com peso. */
  --curva: cubic-bezier(0.32, 0.72, 0, 1);

  /* Ritmo vertical. Uma escala, usada em todas as seções. */
  --gap-secao:clamp(56px, 8vw, 104px);
  --gap-secao-curta:clamp(36px, 5vw, 64px);

  --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#141a17;
    --paper-raised:#1b241f;
    --ink:#eef2ef;
    --ink-soft:#c3cec7;
    --ink-faint:#8fa196;
    --line:#2b3a32;
    --pine-50:#1c2a23;
    --pine-100:#233329;
    --heading:#e6eee9;
    --accent-text:#79c9a3;
    /* Superfícies pinho ficam próximas do fundo: precisam de contorno. */
    --dark-surface-line:rgba(255,255,255,0.10);
    /* O pinho da marca quase some contra o fundo escuro: o botão existe mas não
       se apresenta como botão. Um tom acima devolve presença sem trocar de cor. */
    --cta:#3f6a56;
    --cta-hover:#4a7b64;
    --shadow-ambiente: 0 28px 64px -24px rgba(0,0,0,0.55), 0 8px 20px -12px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.3);
  }
}

/* O tema explícito precisa vencer nos DOIS sentidos. Sem este bloco, quem está
   com o sistema em modo escuro fica preso nele: a media query acima continua
   valendo e data-theme="light" não sobrescreve nada. */
:root[data-theme="light"]{
  --paper:#f3f6f4;
  --paper-raised:#ffffff;
  --ink:#1c231f;
  --ink-soft:#4a5650;
  --ink-faint:#5f6d66;
  --line:#dbe3de;
  --pine-50:#eef2ef;
  --pine-100:#e4ebe6;
  --heading:#1c2b23;
  --accent-text:#2e4a3f;
  --dark-surface-line:transparent;
  --shadow-md: 0 10px 30px rgba(22,33,28,0.07), 0 2px 6px rgba(22,33,28,0.04);
}

:root[data-theme="dark"]{
  --paper:#141a17;
  --paper-raised:#1b241f;
  --ink:#eef2ef;
  --ink-soft:#c3cec7;
  --ink-faint:#8fa196;
  --line:#2b3a32;
  --pine-50:#1c2a23;
  --pine-100:#233329;
  --heading:#e6eee9;
  --accent-text:#79c9a3;
  --dark-surface-line:rgba(255,255,255,0.10);
  --cta:#3f6a56;
  --cta-hover:#4a7b64;
  --shadow-ambiente: 0 28px 64px -24px rgba(0,0,0,0.55), 0 8px 20px -12px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.3);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font);
  /* 17px: o público é majoritariamente idoso lendo no celular. */
  font-size:1.0625rem;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.62;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Sistema de ícones: todo glifo inline nasce com 1.15em e é sobrescrito por contexto. */
.ico{ width:1.15em; height:1.15em; flex:none; vertical-align:-0.16em; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* Título em Newsreader, subtítulo em sans. A troca de família marca a hierarquia
   melhor que só mudar corpo, e mantém h3 e h4 escaneáveis em lista. */
h1,h2{
  font-family:var(--font-display); font-weight:600; color:var(--heading);
  margin:0 0 0.42em; text-wrap:balance; font-synthesis-weight:none;
}
h3,h4{ font-family:var(--font); font-weight:700; color:var(--heading); margin:0 0 0.5em; letter-spacing:-0.005em; }
h1{ font-size:clamp(2.4rem, 6.6vw, 3.7rem); line-height:1.06; letter-spacing:-0.018em; }
h2{ font-size:clamp(1.75rem, 3.6vw, 2.4rem); line-height:1.14; letter-spacing:-0.012em; }
h3{ font-size:1.2rem; line-height:1.32; }
p{ margin:0 0 1em; color:var(--ink-soft); max-width:65ch; }
.lede{
  font-size:clamp(1.12rem, 2.1vw, 1.3rem); line-height:1.55;
  color:var(--ink-soft); max-width:54ch;
}
/* Onde há dígito em coluna, número alinhado. */
.stat-num, .pub-ano, .passo-num{ font-variant-numeric:tabular-nums; }

ul.plain{ list-style:none; margin:0; padding:0; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--pine-700); color:#fff;
  padding:12px 20px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Top bar (CFM identification) ---------- */
.topbar{
  background:var(--pine-950); color:#cfdbd4; font-size:0.78rem;
  padding:6px 0; line-height:1.4;
}
.topbar .container{ display:flex; justify-content:space-between; gap:16px; }
.topbar strong{ color:#fff; font-weight:600; }
.topbar-id{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 620px){
  /* Cabe em uma linha a 375px. Duas linhas custavam 14% da primeira tela do
     celular só em identificação, que o rodapé já repete por extenso. */
  .topbar{ font-size:0.66rem; padding:5px 0; letter-spacing:-0.005em; }
  .topbar .container{ padding:0 14px; }
  .topbar-tel{ display:none; }
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--heading); font-size:1.02rem; white-space:nowrap; }
.brand .mark{
  width:34px; height:34px; border-radius:50%;
  background:var(--pine-700); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:0.95rem; font-weight:700; flex:none;
}
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:0.94rem; font-weight:500; color:var(--ink-soft); transition:color .2s ease; }
.nav-links a:hover, .nav-links a:focus-visible{ color:var(--accent-text); }
.nav-links a[aria-current="page"]{ color:var(--accent-text); font-weight:700; }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none; border:none; background:none; padding:8px; cursor:pointer;
}
.nav-toggle .ico{ width:26px; height:26px; color:var(--heading); }
/* O estado já vive no aria-expanded, então a troca de glifo sai de graça no CSS. */
.nav-toggle .ico-fechar{ display:none; }
.nav-toggle[aria-expanded="true"] .ico-abrir{ display:none; }
.nav-toggle[aria-expanded="true"] .ico-fechar{ display:block; }

@media (max-width: 860px){
  .nav .container{ height:62px; gap:12px; padding:0 16px; }
  /* Ancorado no próprio nav, não na janela. O `backdrop-filter` do nav faz dele o
     bloco que contém qualquer descendente `fixed`, então `position:fixed` aqui media
     contra os 62px do nav e o painel nascia com altura zero. Com `absolute` o painel
     não depende de quanto da barra superior ainda está em tela. */
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper-raised); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-ambiente);
    flex-direction:column; align-items:stretch; padding:4px 20px 16px; gap:0;
    max-height:calc(100dvh - 62px); overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
    transition:opacity .22s ease, transform .28s cubic-bezier(.16,1,.3,1), visibility .28s;
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .nav-links a{ display:block; width:100%; padding:16px 4px; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav-links li:last-child a{ border-bottom:none; }
  .nav-toggle{ display:block; margin-right:-8px; }
  .nav-cta{ gap:4px; }
  .nav-cta .btn{ padding:11px 16px; font-size:0.9rem; }
  .btn-text-label{ display:none; }
  .brand span:not(.mark){ font-size:0.95rem; }
}
@media (max-width: 348px){
  .brand span:not(.mark){ display:none; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font); font-weight:600; font-size:0.98rem;
  padding:14px 26px; border-radius:var(--radius-pill);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px) scale(0.99); }
.btn .ico{ width:18px; height:18px; }
.btn-lg .ico{ width:20px; height:20px; }
/* Ação principal, no verde da marca. O glifo do WhatsApp continua dizendo por
   onde a conversa acontece, sem o site inteiro vestir a cor do aplicativo. */
.btn-wa{ background:var(--cta); color:var(--cta-ink); box-shadow:var(--shadow-sm); }
.btn-wa:hover{ background:var(--cta-hover); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; color:var(--heading); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--accent-text); color:var(--accent-text); }
.btn-ghost{ background:var(--pine-50); color:var(--heading); }
.btn-ghost:hover{ background:var(--pine-100); }
.btn-lg{ padding:17px 32px; font-size:1.05rem; }
.btn-block{ width:100%; }

/* Link de ação secundária. Substitui o segundo botão gigante que competia com o
   primeiro no herói: mesma informação, um quinto do peso visual. */
.link-acao{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; color:var(--accent-text);
  border-bottom:1.5px solid color-mix(in srgb, var(--accent-text) 30%, transparent);
  padding-bottom:2px; transition:border-color .15s ease, gap .15s ease;
}
.link-acao:hover{ border-bottom-color:var(--accent-text); gap:11px; }
.link-acao .ico{ width:16px; height:16px; }

/* Poço do ícone dentro do botão. O glifo do WhatsApp não fica solto ao lado do
   texto: senta num rebaixo circular, alinhado com o padding interno. Dá ao botão
   a leitura de peça montada em vez de retângulo com um desenho colado. */
.btn-wa .wa-poco{
  width:30px; height:30px; border-radius:50%; margin:-6px 2px -6px -12px;
  background:rgba(255,255,255,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18);
  display:grid; place-items:center; flex:none;
  transition:transform .6s var(--curva), background-color .3s var(--curva);
}
.btn-wa .wa-poco .ico{ width:17px; height:17px; }
.btn-wa:hover .wa-poco{ background:rgba(255,255,255,0.22); transform:scale(1.06); }
.btn-lg.btn-wa .wa-poco{ width:34px; height:34px; margin-left:-14px; }
.btn-lg.btn-wa .wa-poco .ico{ width:19px; height:19px; }

/* ---------- Moldura dupla ----------
   Bloco importante não encosta direto no fundo: fica numa bandeja com borda
   fina e respiro, e o conteúdo tem raio menor por dentro, calculado para as
   curvas ficarem concêntricas. É o que separa cartão de peça de hardware. */
.bezel{
  padding:7px; border-radius:calc(var(--radius-media) + 7px);
  background:color-mix(in srgb, var(--pine-700) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--pine-700) 9%, transparent);
}
.bezel-core{
  border-radius:var(--radius-media);
  background:var(--paper-raised);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), var(--shadow-ambiente);
  padding:clamp(22px, 3.4vw, 40px);
}
@media (prefers-color-scheme: dark){
  .bezel{ background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.09); }
  .bezel-core{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-ambiente); }
}
:root[data-theme="dark"] .bezel{ background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.09); }
:root[data-theme="dark"] .bezel-core{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-ambiente); }
:root[data-theme="light"] .bezel{ background:color-mix(in srgb, var(--pine-700) 5%, transparent); border-color:color-mix(in srgb, var(--pine-700) 9%, transparent); }
:root[data-theme="light"] .bezel-core{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), var(--shadow-ambiente); }

/* ---------- WhatsApp floating button ---------- */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:150;
  display:flex; align-items:center; gap:10px;
  background:var(--wa); color:var(--wa-ink); border-radius:var(--radius-pill);
  padding:14px 18px; box-shadow:0 10px 30px rgba(6,55,31,0.28);
  font-weight:700; font-size:0.92rem;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.wa-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(6,55,31,0.34); }
.wa-fab .ico{ width:24px; height:24px; }
.wa-fab .wa-fab-text{ display:none; }
@media (min-width:640px){ .wa-fab .wa-fab-text{ display:inline; } }
@media (max-width:639px){ .wa-fab{ padding:15px; } }
/* No desktop o botão da barra de navegação é fixo e está sempre à vista, então o
   flutuante seria um terceiro "Agendar consulta" na mesma tela. Fica só no celular,
   onde cobre o intervalo entre o botão do herói sair e a barra inferior entrar. */
@media (min-width:721px){ .wa-fab{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  padding:56px 0 72px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--pine-50) 0%, transparent 55%);
}
.hero .container{
  display:grid; grid-template-columns: 1.05fr 0.85fr; gap:56px; align-items:center;
}
/* Sobrancelha sem cápsula: um filete vertical na cor da marca. A pílula cheia
   competia com os botões, que também são pílulas, e empatava as duas hierarquias. */
/* Sem caixa alta de propósito: em português a frase é longa e a versida em
   maiúsculas quebrava em duas linhas gritando, ocupando mais que o próprio título. */
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:0.9rem; font-weight:600; letter-spacing:0;
  color:var(--accent-text); border-left:2.5px solid var(--accent-text);
  padding:2px 0 2px 12px; margin-bottom:22px;
}
.hero-eyebrow .ico{ width:17px; height:17px; }
.hero h1{ margin-bottom:18px; }
/* Ênfase dentro do título: mesma família, itálico do próprio Newsreader.
   leading e o respiro embaixo existem para o "p" de "pulmonar" não ser cortado. */
.hero h1 em{ font-style:italic; color:var(--accent-text); line-height:1.1; padding-bottom:0.04em; }
.hero-cta-row{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; margin-top:30px; }
.hero-portrait{
  position:relative; margin:0; border-radius:var(--radius-media); overflow:hidden;
  aspect-ratio:2/3; box-shadow:var(--shadow-md); background:var(--pine-800);
  /* Sem teto, o retrato 2:3 estica o herói para além da tela em monitor grande
     e empurra o botão para fora do primeiro olhar. */
  max-height:min(68vh, 620px); margin-left:auto;
}
.hero-portrait img{ width:100%; height:100%; object-fit:cover; }
/* Legenda dentro da moldura, no rodapé da foto. Não é rótulo decorativo colado
   sobre a imagem: é a identificação exigida pela Res. CFM 2.336/2023. */
.hero-portrait figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:38px 18px 16px; color:#fff; font-size:0.82rem; line-height:1.4;
  background:linear-gradient(to top, rgba(12,18,15,0.88) 30%, transparent);
}
.hero-portrait figcaption strong{ display:block; font-size:0.92rem; margin-bottom:2px; }

@media (max-width: 900px){
  .hero .container{ grid-template-columns:1fr; gap:28px; }
  .hero-portrait{ max-width:260px; }
  .hero{ padding:26px 0 40px; }
  .hero .lede{ font-size:1.06rem; }
  /* No celular o botão ocupa a linha e o link secundário desce, em vez de
     dois botões gigantes empilhados disputando o mesmo toque. */
  .hero-cta-row{ gap:18px; }
  .hero-cta-row .btn{ width:100%; }
}

/* ---------- Faixa de vínculos de pesquisa ----------
   Em texto, nunca em logotipo. Estampar a marca do HC-FMUSP ou da Rede D'Or aqui
   sugeriria vínculo institucional do consultório que não existe; citar por extenso
   é o que se pode afirmar. A nota ao final leva de volta ao consultório, porque
   estes são endereços de pesquisa e não de atendimento. */
.instituicoes{ background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; }
.instituicoes .container{ display:flex; align-items:center; gap:clamp(20px, 3vw, 44px); flex-wrap:wrap; }
.inst-rotulo{
  font-size:0.76rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--ink-faint); flex:none;
}
.inst-lista{ display:flex; align-items:center; gap:clamp(18px, 2.6vw, 36px); flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.inst-lista li{
  font-family:var(--font-display); font-size:clamp(1rem, 1.5vw, 1.22rem);
  font-weight:600; color:var(--heading); line-height:1.2;
}
.inst-lista li span{ display:block; font-family:var(--font); font-size:0.78rem; font-weight:400; color:var(--ink-faint); letter-spacing:0; }
.inst-nota{ flex:1 0 100%; margin:14px 0 0; font-size:0.84rem; color:var(--ink-faint); }
@media (max-width: 760px){
  .instituicoes{ padding:20px 0; }
  .instituicoes .container{ gap:12px; }
  .inst-lista{ gap:8px 18px; }
  .inst-lista li{ font-size:0.98rem; }
  .inst-lista li span{ display:inline; font-size:0.76rem; }
  .inst-lista li span::before{ content:", "; }
}

/* ---------- Credenciais na home ----------
   Bento assimétrico: os números à esquerda, os três grupos à direita. Os números
   existem porque credencial em lista longa não é lida, é pulada; em bloco curto
   ela é vista. A lista completa continua logo abaixo, para quem quiser conferir. */
.cred-bento{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:14px; align-items:stretch; }
.cred-numeros{ display:grid; grid-template-rows:repeat(3, 1fr); gap:14px; }
.cred-numero .bezel-core{ padding:clamp(18px, 2.4vw, 26px); height:100%; display:flex; flex-direction:column; justify-content:center; }
.cred-numero strong{
  display:block; font-family:var(--font-display); font-size:clamp(2rem, 3.4vw, 2.7rem);
  font-weight:600; line-height:1; color:var(--accent-text); font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}
.cred-numero span{ display:block; margin-top:6px; font-size:0.92rem; color:var(--ink-soft); }
.cred-grupos .bezel-core{ height:100%; }
.cred-grupos h3{ font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; }
/* O espaço entre grupos fica na própria lista; o último não precisa dele porque
   o link abaixo traz a margem. Antes isso era `ul:last-child`, que parou de casar
   quando o link entrou depois das listas e deixou o intervalo por colapso. */
.cred-grupos h3 + ul{ margin-bottom:26px; }
.cred-grupos .cred-linhas:last-of-type{ margin-bottom:0; }
.cred-linhas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cred-linhas li{ display:grid; grid-template-columns:auto 1fr; gap:11px; padding:9px 0; font-size:0.98rem; color:var(--ink-soft); line-height:1.45; }
.cred-linhas li + li{ border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.cred-linhas .ico{ width:17px; height:17px; color:var(--accent-text); margin-top:4px; }
.cred-mais{ margin:22px 0 0; }
@media (max-width: 900px){
  .cred-bento{ grid-template-columns:1fr; }
  /* Três colunas a 390px espremem o rótulo em seis linhas. Vira linha, com o
     número à esquerda: ocupa metade da altura e se lê de relance. */
  .cred-numeros{ grid-template-rows:none; grid-template-columns:1fr; gap:10px; }
  .cred-numero .bezel-core{
    padding:14px 18px; display:grid; grid-template-columns:auto 1fr;
    gap:16px; align-items:center; text-align:left;
  }
  .cred-numero strong{ font-size:1.9rem; min-width:2.6ch; text-align:center; }
  .cred-numero span{ margin-top:0; font-size:0.92rem; line-height:1.35; }
  .cred-linhas li{ font-size:0.94rem; padding:8px 0; }
}

/* ---------- Sections ---------- */
section{ padding:var(--gap-secao) 0; }
.section-tight{ padding:var(--gap-secao-curta) 0; }
.section-head{ max-width:640px; margin-bottom:clamp(28px, 4vw, 44px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Condition stack (bento) ---------- */
.condition-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows:auto auto; gap:16px;
}
.condition-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:26px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.condition-card:hover{ border-color:var(--pine-500); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.condition-card.featured{ grid-row: span 2; background:var(--pine-800); border-color:var(--dark-surface-line); color:var(--on-dark); justify-content:space-between; }
.condition-card.featured h3, .condition-card.featured p{ color:#fff; }
.condition-card.featured p{ color:var(--on-dark-soft); }
.condition-tag{ font-size:0.76rem; font-weight:700; color:var(--accent-text); text-transform:uppercase; letter-spacing:0.06em; }
.condition-card.featured .condition-tag{ color:var(--accent-on-dark); }
.condition-card h3{ margin:0; }
.condition-card p{ font-size:0.92rem; margin:0; }
.condition-card .go{ margin-top:auto; padding-top:6px; font-size:0.88rem; font-weight:700; color:var(--accent-text); display:inline-flex; align-items:center; gap:6px; }
.condition-card .go .ico{ width:16px; height:16px; transition:transform .2s ease; }
.condition-card:hover .go .ico{ transform:translateX(3px); }
.condition-card.featured .go{ color:#fff; }

@media (max-width: 980px){
  .condition-grid{ grid-template-columns:1fr 1fr; }
  .condition-card.featured{ grid-column:span 2; grid-row:auto; }
}
/* No celular a grade continua em duas colunas, com o card enxuto: só a tag e o
   nome da doença. Empilhar nove cards completos custava 2,1 telas de rolagem
   numa seção cujo trabalho é deixar o paciente achar o próprio diagnóstico.
   A descrição some porque o nome já identifica, e o card inteiro é o link.
   O card em destaque mantém o texto e ocupa a largura toda: é a porta de
   entrada da seção, não mais um item da lista. */
@media (max-width: 620px){
  .condition-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .condition-card{ padding:15px 14px; gap:5px; justify-content:flex-start; }
  .condition-card h3{ font-size:1rem; line-height:1.25; }
  .condition-card p, .condition-card .go{ display:none; }
  .condition-tag{ font-size:0.68rem; letter-spacing:0.05em; }
  .condition-card.featured{ grid-column:span 2; padding:22px 20px; gap:9px; }
  .condition-card.featured h3{ font-size:1.25rem; }
  .condition-card.featured p{ display:block; font-size:0.95rem; }
  .condition-card.featured .go{ display:inline-flex; }
}

/* ---------- Seção dividida: título fixo à esquerda, lista à direita ----------
   Família de layout própria, para não repetir a grade de cards duas seções
   seguidas. No desktop o título acompanha a rolagem da lista; no celular
   vira uma coluna só. As linhas usam um filete apenas ENTRE itens: régua em
   cima e embaixo de cada linha vira gaiola. */
.secao-dividida .container{
  display:grid; grid-template-columns:minmax(240px, 0.8fr) 1.4fr; gap:clamp(32px, 6vw, 88px);
  align-items:start;
}
.dividida-titulo{ position:sticky; top:96px; }
.dividida-titulo h2{ margin-bottom:14px; }
.dividida-titulo p{ font-size:1rem; margin:0; }

.linha-lista{ display:flex; flex-direction:column; }
.linha-lista li{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:22px 0;
}
.linha-lista li + li{ border-top:1px solid var(--line); }
.linha-lista li:first-child{ padding-top:0; }
.linha-lista li:last-child{ padding-bottom:0; }
.linha-lista .ico{
  width:26px; height:26px; color:var(--accent-text); margin-top:2px;
}
.linha-lista h3{ margin:0 0 5px; font-size:1.08rem; }
.linha-lista p{ margin:0; font-size:0.98rem; }

@media (max-width: 900px){
  .secao-dividida .container{ grid-template-columns:1fr; gap:26px; }
  .dividida-titulo{ position:static; }
  .linha-lista li{ padding:18px 0; gap:14px; }
  .linha-lista .ico{ width:22px; height:22px; }
}

/* ---------- Lista de tópicos em chips (evita 10 cards empilhados no celular) ---------- */
.topic-list{ display:flex; flex-wrap:wrap; gap:10px; }
.topic-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:12px 20px; font-size:0.96rem; font-weight:600; color:var(--heading);
  transition:border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.topic-pill:hover{ border-color:var(--pine-500); background:var(--pine-50); transform:translateY(-2px); }
.topic-pill .ico{ width:15px; height:15px; color:var(--accent-text); transition:transform .18s ease; }
.topic-pill:hover .ico{ transform:translateX(3px); }
/* No celular a seta some e o chip encolhe: com ela, cada tópico ocupava a linha
   inteira e os oito viravam 477px de rolagem. Sem ela cabem dois por linha. */
@media (max-width: 620px){
  .topic-list{ gap:8px; }
  .topic-pill{ padding:9px 15px; font-size:0.9rem; }
  .topic-pill .ico{ display:none; }
}

/* ---------- Info list (o que é / sintomas / etc.) ---------- */
.info-block{ padding:32px 0; border-top:1px solid var(--line); scroll-margin-top:96px; }
.info-block:first-of-type{ border-top:none; }
.info-block ul{ color:var(--ink-soft); max-width:65ch; padding-left:20px; }
.info-block li{ margin-bottom:10px; }
.info-block strong{ color:var(--ink); }
.info-block-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.info-block-num{ font-size:0.82rem; font-weight:700; color:var(--accent-text); }
.symptom-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; width:100%; }
.symptom-tag{
  background:var(--pine-50); border:1px solid var(--pine-100); color:var(--heading);
  font-size:0.86rem; font-weight:600; padding:8px 14px; border-radius:var(--radius-pill);
}

/* ---------- Layout de artigo com painel fixo ---------- */
.doc-layout{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:56px; align-items:start; }
.doc-aside{ position:sticky; top:92px; display:flex; flex-direction:column; gap:16px; }
.aside-card{
  background:var(--pine-800); border:1px solid var(--dark-surface-line); color:var(--on-dark); border-radius:var(--radius-card); padding:24px;
}
.aside-card h3{ color:#fff; font-size:1.05rem; margin-bottom:8px; }
.aside-card p{ color:var(--on-dark-soft); font-size:0.88rem; margin-bottom:18px; }
.aside-card .btn{ width:100%; }
.aside-card .aside-note{ margin:14px 0 0; font-size:0.78rem; color:var(--on-dark-faint); }
.aside-index{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-card); padding:22px 24px;
}
.aside-index h4{
  font-size:0.76rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-faint);
  margin:0 0 14px; font-weight:700;
}
.aside-index ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; counter-reset:s; }
.aside-index a{
  display:block; padding:8px 0; font-size:0.9rem; color:var(--ink-soft); font-weight:500;
  border-bottom:1px solid var(--line); transition:color .15s ease;
}
.aside-index li:last-child a{ border-bottom:none; }
.aside-index a:hover{ color:var(--accent-text); }

@media (max-width: 980px){
  .doc-layout{ grid-template-columns:1fr; gap:32px; }
  .doc-aside{ position:static; }
  .aside-index{ display:none; }
}

/* ---------- FAQ ---------- */
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 4px; font-size:1rem; font-weight:600; color:var(--heading);
  list-style:none;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q .ico{ width:20px; height:20px; color:var(--accent-text); transition:transform .25s ease; }
.faq-item[open] .faq-q .ico{ transform:rotate(45deg); }
.faq-a{ padding:0 4px 22px; }
.faq-a p{ margin:0; font-size:0.95rem; }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--pine-800); border:1px solid var(--dark-surface-line); color:var(--on-dark); border-radius:var(--radius-media); padding:48px;
  display:grid; grid-template-columns:1.3fr auto; gap:32px; align-items:center;
}
.cta-band h2{ color:#fff; margin-bottom:8px; }
.cta-band p{ color:var(--on-dark-soft); margin-bottom:0; }
@media (max-width:760px){ .cta-band{ grid-template-columns:1fr; padding:32px 24px; text-align:left; } }

/* ---------- Cards grid generic ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:860px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.plain-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-card); padding:24px;
  display:flex; flex-direction:column; align-items:flex-start;
}
a.plain-card{ transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
a.plain-card:hover{ border-color:var(--pine-500); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.plain-card > .ico{ width:28px; height:28px; color:var(--accent-text); margin-bottom:14px; vertical-align:0; }
.plain-card p:last-child{ margin-bottom:0; }
.plain-card h3 .ico{ width:16px; height:16px; color:var(--accent-text); transition:transform .2s ease; }
a.plain-card:hover h3 .ico{ transform:translateX(3px); }
.plain-card .go{ margin-top:auto; padding-top:10px; font-size:0.88rem; font-weight:700; color:var(--accent-text); display:inline-flex; align-items:center; gap:6px; }
.plain-card .go .ico{ width:16px; height:16px; }
.plain-card .btn{ margin-top:auto; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--pine-950); border-top:1px solid var(--dark-surface-line); color:#c7d3cc; padding:56px 0 96px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px; }
.footer-grid h4{ color:#fff; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ font-size:0.9rem; color:#c7d3cc; transition:color .15s ease; }
.footer-grid a:hover{ color:#fff; }
.footer-brand p{ color:#9fb0a6; font-size:0.88rem; max-width:32ch; }
.footer-cfm{
  border-top:1px solid rgba(255,255,255,0.12); padding-top:22px; font-size:0.78rem; color:#8fa196;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:0.84rem; color:var(--ink-faint); padding:20px 0 0; }
.breadcrumb a{ color:var(--ink-faint); }
.breadcrumb a:hover{ color:var(--accent-text); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ padding:28px 0 48px; }
.page-hero .hero-eyebrow{ margin-bottom:16px; }
.page-hero h1{ max-width:20ch; }
.page-hero .lede{ margin-top:14px; }
@media (max-width: 900px){
  .page-hero{ padding:20px 0 36px; }
  .page-hero h1{ font-size:clamp(1.7rem, 6.6vw, 2.2rem); }
  .page-hero .lede{ font-size:1rem; }
  .page-hero .hero-cta-row .btn{ flex:1 1 auto; }
}

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
/* O conteúdo nasce visível. Só depois que o JS assume o controle, marcando o
   <html>, é que ele começa escondido para poder entrar animado. Assim uma falha
   de JS, um bloqueador ou uma aba em segundo plano deixam o texto na tela em vez
   de uma seção em branco. Mesmo princípio já adotado nos contadores. */
.reveal{ transition:opacity .6s var(--curva), transform .6s var(--curva); }
.js-reveal .reveal{ opacity:0; transform:translateY(18px); }
.js-reveal .reveal.in{ opacity:1; transform:none; }
/* Movimento reduzido não precisa de regra aqui: o site.js simplesmente não marca
   o <html> com .js-reveal nesse caso, e sem a classe nada é escondido. */

/* ---------- Guias em destaque (asma / DPOC) ---------- */
.guide-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:28px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.guide-card::after{
  content:""; position:absolute; inset:auto -30% -60% auto; width:220px; height:220px; border-radius:50%;
  background:var(--pine-50); opacity:0; transition:opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
  transform:scale(.6); z-index:0;
}
.guide-card:hover{ border-color:var(--pine-500); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.guide-card:hover::after{ opacity:1; transform:scale(1); }
.guide-card > *{ position:relative; z-index:1; }
.guide-card h3{ margin:0; font-size:1.35rem; }
.guide-card p{ margin:0; font-size:0.95rem; }
.guide-card .go{ margin-top:auto; padding-top:8px; font-size:0.9rem; font-weight:700; color:var(--accent-text); display:inline-flex; align-items:center; gap:6px; }
.guide-card .go .ico{ width:16px; height:16px; transition:transform .2s ease; }
.guide-card:hover .go .ico{ transform:translateX(4px); }

/* ---------- Credenciais ---------- */
.cred-group{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-card); padding:26px; }
.cred-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.cred-list li{ display:flex; gap:12px; align-items:flex-start; font-size:0.95rem; color:var(--ink-soft); line-height:1.45; }
.cred-list .ico{ width:18px; height:18px; color:var(--accent-text); margin-top:3px; vertical-align:0; }

/* ---------- Números animados ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px; }
.stat{ border-left:2px solid var(--pine-100); padding-left:18px; }
.stat-num{ display:block; font-size:clamp(2.2rem,4vw,3rem); font-weight:700; color:var(--accent-text); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.stat-label{ display:block; margin-top:8px; font-size:0.88rem; color:var(--ink-faint); max-width:22ch; }
@media (max-width:700px){
  .stat-row{ grid-template-columns:1fr; gap:16px; }
  .stat{ display:flex; align-items:baseline; gap:12px; }
  .stat-num{ font-size:2rem; }
  .stat-label{ margin-top:0; max-width:none; }
}

/* ---------- Lista de publicações ---------- */
.pub-list{ list-style:none; margin:0; padding:0; counter-reset:pub; }
.pub{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px 28px; align-items:baseline;
  padding:20px 0; border-top:1px solid var(--line);
}
.pub:last-child{ border-bottom:1px solid var(--line); }
.pub-meta{ display:flex; flex-direction:column; gap:4px; }
.pub-year{ font-size:0.95rem; font-weight:700; color:var(--heading); font-variant-numeric:tabular-nums; }
.pub-tema{ font-size:0.8rem; color:var(--accent-text); font-weight:600; }
.pub-title{ font-size:1rem; font-weight:600; color:var(--heading); line-height:1.4; transition:color .18s ease; }
.pub-title:hover{ color:var(--accent-text); }
.pub-title .ico{ width:14px; height:14px; color:var(--accent-text); opacity:0; transition:opacity .18s ease, transform .18s ease; }
.pub-title:hover .ico{ opacity:1; transform:translateX(3px); }
.pub-journal{ grid-column:2; font-size:0.86rem; color:var(--ink-faint); font-style:italic; }
.pub-note{ margin-top:22px; font-size:0.92rem; }
.pub-note a{ color:var(--accent-text); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.pub-note .ico{ width:15px; height:15px; }
@media (max-width:760px){
  .pub{ grid-template-columns:1fr; gap:6px; padding:18px 0; }
  .pub-meta{ flex-direction:row; align-items:baseline; gap:10px; }
  .pub-journal{ grid-column:1; }
}

/* ---------- Instagram ---------- */
.ig-block{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-media); padding:32px;
  display:grid; grid-template-columns:300px minmax(0,1fr); gap:32px; align-items:center;
}
.ig-block .ig-intro{ align-self:start; }
.ig-block-solo{ grid-template-columns:1fr; max-width:720px; }
.ig-block-solo .ig-intro{ align-self:center; }
.ig-intro > .ico{ width:30px; height:30px; color:var(--accent-text); margin-bottom:12px; vertical-align:0; }
.ig-intro h2{ margin-bottom:8px; }
.ig-intro p{ font-size:0.95rem; }
.ig-intro .btn .ico{ width:18px; height:18px; }
.ig-carousel{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; scrollbar-width:thin;
}
.ig-slide{ flex:0 0 320px; scroll-snap-align:start; position:relative; }
/* Duas correções ao embed oficial:
   1. o script do Instagram aplica position:absolute no iframe, o que tira o slide do fluxo
      e colapsa o carrossel. Devolvido ao fluxo com !important.
   2. min-height reserva o espaço enquanto o script carrega, e evita buraco no layout
      se o visitante bloquear scripts de terceiros. */
.ig-slide .instagram-media{
  position:static !important;
  min-width:0 !important; width:100% !important; margin:0 !important;
  min-height:400px; background:var(--pine-50); border-radius:var(--radius-card) !important;
}
.ig-carimbo{ margin:10px 0 0; font-size:0.8rem; color:var(--ink-faint); }
@media (max-width:860px){
  .ig-block{ grid-template-columns:1fr; padding:24px; gap:24px; }
  .ig-slide{ flex-basis:260px; }
}

/* ---------- Barra de progresso de leitura ---------- */
.read-progress{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:120;
  background:var(--cta); transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .read-progress{ display:none; } }

/* ---------- Barra de CTA fixa no celular ---------- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  display:none; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.mobile-cta.show{ transform:translateY(0); }
.mobile-cta .btn{ flex:1; }
@media (max-width:720px){
  .mobile-cta{ display:flex; }
  /* Com a barra visível, o botão flutuante vira redundante e, pior, cobre o
     rótulo dela. A classe vem do JS, no body: o seletor de irmão não servia,
     porque o flutuante é escrito antes da barra no documento. */
  body.com-barra-cta .wa-fab{ opacity:0; pointer-events:none; transform:translateY(12px); }
  footer.site-footer{ padding-bottom:120px; }
}

/* Três grupos de credenciais: colunas iguais no desktop, empilhadas no celular. */
.cred-grid{ align-items:start; }
@media (max-width:1000px) and (min-width:861px){ .cred-grid{ grid-template-columns:repeat(2,1fr); } }

/* Feed ao vivo via serviço de widget (LightWidget, SnapWidget, Elfsight). */
.ig-feed{ min-width:0; }
.ig-feed iframe{
  width:100% !important; border:0; display:block; border-radius:var(--radius-card);
  min-height:320px; background:var(--pine-50);
}

/* ---------- Aviso médico (Res. CFM 2.336/2023) ---------- */
.aviso-medico{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--paper-raised); border:1px solid var(--line);
  border-left:3px solid var(--accent-text); border-radius:0 var(--radius-card) var(--radius-card) 0;
  padding:22px 26px;
}
.aviso-medico > .ico{ width:22px; height:22px; color:var(--accent-text); flex:none; margin-top:2px; vertical-align:0; }
.aviso-medico strong{ display:block; color:var(--heading); font-size:0.96rem; margin-bottom:6px; }
.aviso-medico p{ margin:0; font-size:0.9rem; color:var(--ink-soft); max-width:70ch; }
@media (max-width:620px){ .aviso-medico{ padding:18px 20px; gap:12px; } }