/* Shared across every page (homepage nav/footer + all /artigos pages).
   Edit here once, every page picks it up on next load -- no rebuild. */

:root{
  --ink:#0e0e0e; --muted:#6d6d6d; --line:#ececec; --panel:#f2f2f2;
  --navy:#0c171f; --navy-2:#152430; --accent:#8fd0ee;
  --grad:linear-gradient(135deg,#2a8ec4,#1d6f9c,#15516f);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:#1d6f9c;text-decoration:none}
a:hover{color:#15516f}

/* ---------- shared nav ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(17,32,43,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.site-nav .inner{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,2vw,24px);flex-wrap:wrap;row-gap:10px}
.site-nav .wordmark{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:17px;letter-spacing:-.02em;color:#fff;display:flex;flex-direction:column;line-height:1.15}
.site-nav .wordmark span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}
.site-nav .nav-right{display:flex;align-items:center;gap:clamp(12px,2vw,28px);flex:1 1 auto;min-width:0;justify-content:flex-end}
.site-nav [data-nav-links]{display:flex;align-items:center;gap:clamp(12px,2vw,26px);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;max-width:100%}
.site-nav [data-nav-links] a{font-size:14px;font-weight:500;white-space:nowrap;color:rgba(255,255,255,.78)}
.site-nav [data-nav-links] a:hover{color:#fff}
.site-nav .cta{background:var(--grad);color:#fff;font-size:14px;font-weight:500;padding:10px clamp(14px,3vw,20px);border-radius:999px;white-space:nowrap;transition:box-shadow .3s,transform .3s}
.site-nav .cta:hover{box-shadow:0 8px 26px rgba(42,142,196,.45);transform:translateY(-1px);color:#fff}
.nav-toggle-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;width:38px;height:38px;flex-shrink:0}
.nav-toggle-btn span{display:block;width:22px;height:2px;background:#fff;margin:5px auto;border-radius:2px;transition:transform .2s,opacity .2s}

@media (max-width:1024px){
  /* .site-nav has backdrop-filter, which creates a new containing block for
     position:fixed descendants -- a fixed-positioned dropdown here would be
     fixed relative to the (short) nav bar, not the viewport, and get clipped
     to its height. Solution: let the panel be normal-flow content that makes
     the already-fixed nav bar itself grow taller when open. */
  .site-nav .inner{flex-wrap:wrap!important}
  [data-nav-links]{
    display:none!important;position:static!important;flex-direction:column!important;
    align-items:stretch!important;flex-basis:100%!important;order:10!important;
    width:100%!important;max-width:none!important;gap:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;max-height:calc(100vh - 64px);
    padding:8px 0 4px;border-top:1px solid rgba(255,255,255,.1);margin-top:12px;
    background:rgba(12,23,31,.99);
  }
  body.ng-nav-open [data-nav-links]{display:flex!important}
  [data-nav-links] a{font-size:16px;padding:14px 4px;width:100%;border-bottom:1px solid rgba(255,255,255,.08);white-space:normal!important}
  .nav-toggle-btn{display:block}
}

/* Celular: abaixo de ~470px a nav nao cabe em uma linha e quebra. Em vez de deixar o
   wordmark preso a esquerda e o botao solto a direita, assume a quebra e centraliza tudo. */
@media (max-width:560px){
  .site-nav .inner{justify-content:center}
  .site-nav .wordmark{align-items:center;text-align:center;flex:1 1 100%}
  .site-nav .nav-right{flex:1 1 100%;justify-content:center}
  [data-nav-links] a{text-align:center;padding:14px 8px}
  body.ng-nav-open .nav-toggle-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.ng-nav-open .nav-toggle-btn span:nth-child(2){opacity:0}
  body.ng-nav-open .nav-toggle-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- shared footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:56px 0 40px}
.site-footer .inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:34px}
.site-footer .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.site-footer .brand{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.site-footer .brand small{display:block;color:var(--muted);font-size:14px;margin:6px 0 0;font-weight:400}
.site-footer .links{display:flex;flex-wrap:wrap;gap:22px;font-size:14px}
.site-footer .links a{color:var(--muted)}
.site-footer .links a:hover{color:var(--ink)}
.site-footer .legal{border-top:1px solid var(--panel);padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.site-footer .legal p{font-size:12px;color:#9a9a9a;margin:0}
.whatsapp-fab{position:fixed;bottom:24px;right:24px;z-index:90;width:58px;height:58px;border-radius:999px;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(37,211,102,.4);animation:floaty 3s ease-in-out infinite;color:#fff}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- artigos (blog) pages ---------- */
.page-hero{background:var(--navy);padding:clamp(150px,18vw,170px) 24px clamp(56px,8vw,90px)}
.page-hero .inner{max-width:1200px;margin:0 auto}
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.page-hero .eyebrow span{width:32px;height:1px;background:var(--accent);display:block}
.page-hero h1{font-family:'Inter Tight',sans-serif;font-weight:500;color:#fff;font-size:clamp(28px,5vw,46px);line-height:1.1;letter-spacing:-.03em;margin:0}
.page-hero p{color:rgba(255,255,255,.65);font-size:16px;line-height:1.7;margin:14px 0 0;max-width:640px}

.artigos-wrap{max-width:1200px;margin:0 auto;padding:56px 24px 90px}
/* Alvenaria (masonry). Só 3 dos 20 posts têm capa: num grid comum o card sem imagem
   esticava até a altura do vizinho com imagem e sobrava um vazio enorme dentro dele.
   Base sem JS: grid com align-items:start -- ordem correta e sem vazio dentro do card.
   Com JS (.masonry): colunas de verdade, preenchidas em rodízio para que a ordem de
   leitura continue da esquerda para a direita, e não de cima para baixo por coluna. */
.artigos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;align-items:start}
.artigos-grid.masonry{display:flex;align-items:flex-start}
.artigos-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:28px}
.artigo-card{display:flex;flex-direction:column;margin:0;text-decoration:none;color:inherit;border-radius:16px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:box-shadow .25s,transform .25s}
.artigo-card:hover{box-shadow:0 14px 34px rgba(14,23,31,.1);transform:translateY(-2px)}
.artigo-card .capa{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--panel)}
.artigo-card .corpo{display:flex;flex-direction:column;gap:12px;padding:22px 24px 24px}
.artigo-card .date{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.artigo-card h2{font-family:'Inter Tight',sans-serif;font-size:19px;font-weight:500;margin:0;color:var(--ink);line-height:1.35}
.artigo-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.6}
.artigo-card .read-more{margin-top:auto;font-size:13px;font-weight:600;color:#1d6f9c;display:inline-flex;align-items:center;gap:6px}

/* padding-top precisa livrar a nav fixa: 104px quando ela quebra em duas linhas
   (telas estreitas) e 63px na versao de uma linha. Por isso o valor MAIOR fica no
   mobile -- o inverso do que um clamp por largura faria. */
/* ---------- páginas de autoridade (/especialidades, /doencas, /tratamentos, /sobre) ---------- */
/* Parágrafo de abertura da /sobre: maior, para separar da leitura corrida. */
.artigo-body .lead{font-size:19px;line-height:1.7;color:var(--ink)}
.pagina-sobre{max-width:820px}
.pagina-sobre .artigo-body h2{margin-top:44px}

/* "Veja também": distribui o leitor para as páginas irmãs. É o que dá liga
   à estrutura de autoridade -- cada página empurra para as vizinhas. */
.relacionados{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.relacionados h2{font-family:'Inter Tight',sans-serif;font-size:18px;font-weight:600;margin:0 0 16px;color:var(--ink)}
.relacionados ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.relacionados li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.relacionados a{font-size:15px;font-weight:500;color:#1d6f9c}
.relacionados a:hover{text-decoration:underline}
.relacionados .secao{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}

/* Botão "saber mais" das seções-resumo da home */
.btn-secao{display:inline-flex;align-items:center;gap:10px;background:var(--grad);color:#fff;font-weight:500;font-size:15px;padding:14px 28px;border-radius:999px;transition:box-shadow .3s,transform .3s;margin-top:34px}
.btn-secao:hover{box-shadow:0 10px 30px rgba(42,142,196,.42);transform:translateY(-2px);color:#fff}
.btn-secao.claro{background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff}
.btn-secao.claro:hover{background:rgba(255,255,255,.1)}

/* ---------- CTA intercalado na rolagem dos artigos ---------- */
.artigos-lotes{display:flex;flex-direction:column}
.sentinela{height:1px}
/* Linha com texto ao centro, avisando que a lista continua depois do CTA.
   O JS remove este aviso no último CTA, onde não há mais lote pela frente. */
.aviso-mais{display:flex;align-items:center;gap:18px;margin:48px 0 26px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.aviso-mais::before,.aviso-mais::after{content:"";flex:1;height:1px;background:var(--line)}
.aviso-mais span{flex:0 0 auto}

.cta-faixa{background:var(--navy);border-radius:20px;padding:clamp(34px,5vw,56px) clamp(24px,4vw,52px);margin:12px 0 40px;position:relative;overflow:hidden}
.cta-faixa::after{content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(42,142,196,.35),transparent 70%);pointer-events:none}
.cta-conteudo{position:relative;z-index:1;max-width:720px}
.cta-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.cta-eyebrow span{width:32px;height:1px;background:var(--accent);display:block}
.cta-faixa h2{font-family:'Inter Tight',sans-serif;font-weight:500;color:#fff;font-size:clamp(24px,3.6vw,36px);line-height:1.15;letter-spacing:-.02em;margin:0 0 14px}
.cta-faixa p{color:rgba(255,255,255,.7);font-size:clamp(15px,1.6vw,17px);line-height:1.7;margin:0 0 28px}
.cta-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cta-botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--grad);color:#fff;font-weight:600;font-size:16px;padding:16px 32px;border-radius:999px;transition:box-shadow .3s,transform .3s}
.cta-botao:hover{box-shadow:0 12px 34px rgba(42,142,196,.5);transform:translateY(-2px);color:#fff}
.cta-whats{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:500;font-size:15px;padding:15px 26px;border-radius:999px;transition:background .3s}
.cta-whats:hover{background:rgba(255,255,255,.1);color:#fff}

.artigo-post{max-width:760px;margin:0 auto;padding:136px 24px 90px}
@media (min-width:1025px){ .artigo-post{padding-top:114px} }
.artigo-post .meta{font-size:13px;color:var(--muted);margin-bottom:8px}
/* Capa: as originais sao retrato (1080x1350). Limitamos pela altura da viewport para
   nao empurrar o texto para fora da primeira tela; width:auto deixa a imagem no seu
   proprio aspecto e centralizada, sem tarjas laterais de preenchimento. */
.artigo-capa{display:block;width:auto;max-width:100%;max-height:min(62vh,560px);margin:0 auto 30px;border-radius:12px}
.artigo-post h1{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:clamp(26px,4vw,38px);line-height:1.2;letter-spacing:-.02em;margin:10px 0 28px;color:var(--ink)}
.artigo-body{font-size:17px;line-height:1.8;color:#2b2b2b}
.artigo-body p{margin:0 0 22px}
.artigo-body h2{font-family:'Inter Tight',sans-serif;font-size:23px;font-weight:500;margin:38px 0 16px;color:var(--ink)}
.artigo-body img{margin:26px 0;border-radius:10px}
.artigo-body ul,.artigo-body ol{margin:0 0 22px;padding-left:22px}
.artigo-body li{margin-bottom:8px}
.artigo-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#1d6f9c;margin-bottom:28px}

/* Referências: bloco à parte, tipografia menor, com recuo pendurado. As URLs de DOI
   são longas e sem espaços -- precisam quebrar, senão estouram a largura no celular. */
.artigo-refs{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.artigo-refs h2{font-family:'Inter Tight',sans-serif;font-size:18px;font-weight:600;margin:0 0 16px;color:var(--ink);letter-spacing:.01em}
.artigo-refs ol{margin:0;padding-left:22px;font-size:14px;line-height:1.65;color:var(--muted)}
.artigo-refs li{margin-bottom:12px;padding-left:2px;overflow-wrap:anywhere}
.artigo-refs a{color:#1d6f9c;font-weight:500;overflow-wrap:anywhere}
.artigo-refs a:hover{text-decoration:underline}
.artigo-cta{margin-top:48px;padding:32px;border-radius:16px;background:var(--navy-2);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.artigo-cta p{color:#fff;font-family:'Inter Tight',sans-serif;font-size:18px;margin:0;font-weight:500}
.artigo-cta a{background:var(--grad);color:#fff;font-weight:500;font-size:14px;padding:12px 22px;border-radius:999px;white-space:nowrap}