/* ==========================================================================
   Cabeçalho e rodapé das páginas que NÃO usam css/paginas.css: os artigos e a
   política de privacidade (que usam tokens + base + componentes + campos).

   POR QUE EXISTE. O relatório de verificação de 30/09/2026 apontou que esses
   dois tipos de página tinham cabeçalho e rodapé diferentes do resto do site:
   sem o botão "Assessoria Científica", contêiner mais estreito, outro marcador
   de página ativa, e um rodapé com outros links e outros rótulos ("Atendimento
   clínico" onde o resto diz "Consulta", sem "Publicações"). A política tinha
   até uma linha de credencial diferente da dos artigos.

   COMO FOI FEITO. Cada regra abaixo é CÓPIA da regra de css/paginas.css (e das
   suas variações responsivas), com o prefixo `site-` nas classes. O prefixo é
   obrigatório, não estético: componentes.css — que também serve as propostas,
   e não pode mudar — já tem uma `.nav` com outro significado, e as duas
   brigariam no mesmo elemento.

   O QUE ISTO NÃO FAZ. Não toca em paginas.css, home.css, base.css nem
   componentes.css. Se o cabeçalho ou o rodapé mudarem em paginas.css, mude
   aqui também. scripts/verificar.mjs confere que o CONTEÚDO (links, rótulos,
   texto da marca) bate entre os dois sistemas; o visual, não — esse é por
   cópia, e a paridade foi medida no navegador (estilos calculados lado a lado).

   Seções: 1) base herdada de paginas.css · 2) regras copiadas ·
           3) o que é só destas páginas.
   ========================================================================== */

/* ---- 1. O que o cabeçalho/rodapé de paginas.css recebe "de graça" -----------
   Em paginas.css o body é Inter, sem line-height, com links sem sublinhado e
   sem margem em <p>. Nos artigos o body é serifado, com line-height 1.6, links
   sublinhados e <p>/<ul> com margem e largura máxima de leitura. Sem isto o
   mesmo markup sairia com outra cara. */
.site-nav, .site-pular, footer.site-footer {
  --navy850: #102B45; --navy900: #0B2239; --navy950: #071724;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.site-nav, footer.site-footer {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.site-nav *, footer.site-footer * { box-sizing: border-box; }
/* :where() zera a especificidade, igual ao `a{...}` global de paginas.css —
   assim as regras copiadas (que são mais específicas) continuam ganhando. */
:where(.site-nav, .site-pular, footer.site-footer) a { color: inherit; text-decoration: none; }
:where(.site-nav) button { font: inherit; }
/* :where() de novo: com `footer.site-footer p` (0,1,2) este reset passava por
   cima de `.site-footer-brand p{max-width:620px}` e das margens da legenda das
   redes (0,1,1). A 0,0,1 ele empata com o `p` global de base.css e ganha só por
   vir depois — que é o papel de um reset. */
:where(footer.site-footer) p { margin: 1em 0; max-width: none; }
:where(footer.site-footer) ul { margin: 0; padding: 0; max-width: none; }
/* base.css dá `margin-bottom` a todo <li> (8px a mais na linha das redes), e
   componentes.css troca a fonte de TODO <p>/<li> da página em artigo de
   paciente: `[data-trilha="paciente"] :where(p, li)`. Sem isto o rodapé de um
   artigo de paciente sairia com a fonte do texto e o de um artigo "pro", não —
   o mesmo rodapé, duas caras, conforme o artigo. Esta regra é de propósito
   mais específica que aquela (0,1,2 contra 0,1,0). */
footer.site-footer :is(p, li) { font-family: var(--sans); }
.site-footer-redes__lista li { margin: 0; }
/* O link "Pular para o conteudo" e um <a> FORA do cabecalho, entao o reset de `a`
   acima (que e de descendente) nao o alcanca: nos artigos ele saia sublinhado,
   com a fonte serifada do corpo e com a entrelinha de 1.6 do texto. */
.site-pular { font-family: var(--sans); text-decoration: none; line-height: normal; }

/* ---- 2. Regras copiadas de css/paginas.css (prefixo site-) ----------------- */
.site-container{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.site-nav{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(7,23,36,.95);border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(18px);color:#fff}
.site-nav-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-brand{display:flex;flex-direction:column;line-height:1;gap:5px}
.site-brand strong{font-family:var(--serif);font-size:20px;font-weight:500}
.site-brand span{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.66)}
.site-nav-links{display:flex;align-items:center;gap:26px;font-size:13px;color:rgba(255,255,255,.80)}
.site-nav-links a:hover,.site-nav-links a.active{color:#fff}
.site-nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;transition:.24s ease}
.site-nav-cta{border:1px solid rgba(255,255,255,.32);color:#fff}
.site-nav-cta:hover{background:#fff;color:var(--navy900)}
.site-menu-btn{display:none;border:0;background:transparent;color:#fff;font-size:26px}
footer.site-footer{background:#05111C;color:rgba(255,255,255,.58);padding:54px 0 30px;font-size:13px}
.site-footer-top{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.10)}
.site-footer-brand strong{display:block;color:#fff;font-family:var(--serif);font-size:29px;font-weight:400;margin-bottom:12px}
.site-footer-brand p{line-height:1.75;max-width:620px}
.site-footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 36px;align-content:start}
.site-footer-nav a{color:rgba(255,255,255,.68)}
.site-footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:28px}
@media(max-width:980px){
  .site-container{width:min(100% - 48px,1180px)}
  .site-nav-links{display:none;position:absolute;top:82px;left:0;right:0;background:rgba(7,23,36,.98);padding:24px;flex-direction:column;align-items:flex-start;border-top:1px solid rgba(255,255,255,.1)}
  .site-nav-links.open{display:flex}
  .site-menu-btn{display:grid;place-items:center;min-width:44px;min-height:44px}
  .site-nav-cta{display:none}
  .site-footer-top{grid-template-columns:1fr}
}
@media(max-width:1230px){
  .site-nav-links{display:none;position:absolute;top:82px;left:0;right:0;background:rgba(7,23,36,.98);padding:24px;flex-direction:column;align-items:flex-start;border-top:1px solid rgba(255,255,255,.1)}
  .site-nav-links.open{display:flex}
  .site-menu-btn{display:grid;place-items:center;min-width:44px;min-height:44px}
  .site-nav-cta{display:none}
}
@media(max-width:680px){
  .site-nav-inner{height:72px}
  .site-footer-bottom{flex-direction:column}
  .site-footer-nav{grid-template-columns:1fr}
  .site-container{width:min(100% - 48px,1180px)}
}
.site-pular{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy950);
 color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;font-size:14px}
.site-pular:focus{left:0}
.site-brand{min-height:44px;display:inline-flex;flex-direction:column;justify-content:center}
.site-pular{min-height:44px;display:inline-flex;align-items:center}
.site-footer-nav a{display:flex;align-items:center;min-height:44px}
.site-brand{transition: opacity .18s ease;}
.site-brand:hover{opacity: .78;}
.site-menu-btn{transition: background .18s ease, color .18s ease; border-radius: 8px;}
.site-menu-btn:hover{background: rgba(255,255,255,.12);}
.site-footer-nav a{transition: color .18s ease, padding-left .18s ease;}
.site-footer-nav a:hover{color: #fff; padding-left: 5px;}
.site-pular:hover{background: var(--navy850);}
.site-nav-links a{transition: color .18s ease;}
.site-nav-links a:hover{color: #fff;}
@media (prefers-reduced-motion: reduce){
  .site-footer-nav a{transition: none; transform: none;}
  .site-footer-nav a:hover{padding-left: 0;}
}
.site-footer-redes{margin-top: 30px;}
.site-footer-redes__rotulo{font-size: 11px; text-transform: uppercase; letter-spacing: .2em;
  font-weight: 700; color: rgba(255,255,255,.5); margin: 0 0 14px;}
.site-footer-redes__lista{display: flex; gap: 10px; list-style: none; margin: 0; padding: 0;}
.site-footer-redes__link{display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.18);
  transition: background .18s, color .18s, border-color .18s, transform .18s;}
.site-footer-redes__link:hover{background: #fff; color: var(--navy900); border-color: #fff; transform: translateY(-2px);}
.site-footer-redes__link:focus-visible{outline: 2px solid #fff; outline-offset: 3px;}
@media (prefers-reduced-motion: reduce){
  .site-footer-redes__link{transition: none;}
  .site-footer-redes__link:hover{transform: none;}
}
.site-footer-top{grid-template-columns: 1.2fr .8fr auto;}
.site-footer-redes{margin-top: 0;}
@media (max-width: 980px){
  .site-footer-top{grid-template-columns: 1fr;}
  .site-footer-redes{margin-top: 6px;}
}

/* ---- 3. Só destas páginas -------------------------------------------------- */

/* Nos artigos o cabeçalho fica no fluxo (sticky), como o antigo `.topo`: o
   conteúdo começa abaixo dele. Em paginas.css ele é `fixed` porque o hero
   escuro passa por baixo; aqui não há hero. O resto é idêntico. */
header.site-nav { position: sticky; top: 0; }

/* Âncoras (#conteudo, #notas, …) não podem pousar sob o cabeçalho. Nos artigos e na
   política o base.css já cuida disso; aqui fica explícito porque o cabeçalho é
   o mesmo das páginas institucionais, onde paginas.css faz o mesmo. */
html { scroll-padding-top: 100px; }

/* Página atual no menu. paginas.css tem `.active`, mas nenhuma página o usa;
   aqui o aria-current (que o leitor de tela anuncia) ganha o mesmo destaque. */
.site-nav-links a[aria-current="page"] { color: #fff; }

/* Foco visível sobre o azul-escuro. A regra global de base.css pinta de âmbar
   com border-radius:2px; aqui o anel é branco. O raio fica o de cada elemento
   (sem `border-radius: inherit`, que herdaria o do PAI e arredondaria o anel de
   links retos ou achataria o dos botões redondos das redes). */
.site-nav :focus-visible, .site-pular:focus-visible, footer.site-footer :focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}

/* Menu aberto no celular/tablet: itens de 48px, largura total, linha fina entre
   eles — igual ao de paginas.css e ao da home. */
@media(max-width:1230px){
  /* top:100%: ver o mesmo ajuste em paginas.css — o 82px fixo deixava um vao de
     ~10px abaixo de 680px, onde a barra tem 72px. */
  .site-nav-links.open{top:100%;align-items:stretch;gap:0;padding:0;background:#071724;font-size:15px;
    /* Em celular deitado (altura de ~375px) os itens somam mais que a tela: sem
       teto, os ultimos ficavam fora de alcance, porque a barra e fixa e a pagina
       por baixo nao rola ate eles. 83px = barra de 82px + 1px de borda. */
    max-height:calc(100vh - 83px);max-height:calc(100dvh - 83px);overflow-y:auto;overscroll-behavior:contain}
  .site-nav-links.open a{display:block;padding:14px 24px;min-height:48px;color:rgba(255,255,255,.9);border-top:1px solid rgba(255,255,255,.07)}
  .site-nav-links.open a:first-child{border-top:0}
  .site-nav-links.open a:hover,.site-nav-links.open a:focus-visible{background:rgba(255,255,255,.08);color:#fff}
}

/* Aviso clínico do rodapé. Os artigos e a política carregam isto desde antes
   da unificação; as páginas institucionais não. Mantido: tirar um aviso de
   "não substitui consulta" de páginas de conteúdo clínico não é decisão de
   padronização visual. */
.site-footer-aviso { max-width: 780px; margin: 0; padding-top: 28px; font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,.5); }
.site-footer-aviso strong { color: rgba(255,255,255,.72); font-weight: 600; }

/* Cabecalho de computador (1231px para cima): o botao passou de "Assessoria Cientifica" para "Assessoria e
   Consultoria" (+28px) e o cabecalho em uma linha (marca + menu + botao = 1201px) passou do container de 1180px:
   a marca, tres itens do menu e o proprio botao quebravam em duas linhas. Itens do menu 6px mais proximos e botao
   com 4px a menos de cada lado deixam 17px de folga (antes da troca eram ~7px). O nowrap faz faltar espaco virar
   um aperto, nunca uma quebra de linha. Abaixo de 1231px o menu e o hamburguer e nada disto vale. */
@media(min-width:1231px){.site-nav-links{gap:20px}.site-nav-links a,.site-nav-cta,.site-brand span{white-space:nowrap}.site-nav-cta{padding:0 18px}}
