/* Área de Conhecimento — Eagle Pharma Labs
   Identidade medida do próprio site: vermelho #C8102E, tinta #14171A, Saira Condensed + Barlow.
   A referência de densidade e navegação é o Aura; a marca e o desenho são Eagle. */

:root {
  --tinta: var(--ep-tinta);
  --tinta-suave: var(--ep-tinta-suave);
  --mudo: var(--ep-tinta-mudo);
  --linha: var(--ep-borda);
  --superficie: #fff;
  --superficie-suave: #f5f6f8;
  --superficie-escura: #111518;
  --vermelho: var(--ep-acento);
  --vermelho-escuro: var(--ep-vermelho-escuro);
  --vermelho-fraco: var(--ep-erro-fundo);
  --verde: var(--ep-sucesso);
  --ambar: var(--ep-aviso);
  --ambar-fraco: var(--ep-ambar-fraco);
  --azul-fraco: #eff6ff;
  --azul: var(--ep-azul);
  --sombra: var(--ep-sombra);  /* era 0 18px 44px rgba(20, 23, 26, .08) */
  --sombra-leve: var(--ep-sombra-leve);  /* era 0 2px 8px rgba(20, 23, 26, .06) */
  --raio: var(--ep-raio);  /* era 14px */
  --largura: var(--ep-largura-app);
}

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

body {
  margin: 0;
  font-family: Barlow, 'Barlow Recurso', "Segoe UI", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--superficie-suave);
  line-height: 1.6;
  font-size: 16px;
}
/* Pesos medidos no site real: 800 nos titulos de exibicao (hero, secao), 700 nos titulos de
   cartao/artigo (ex.: nome de produto). O global fica em 700 e o hero sobe para 800 abaixo. */
h1, h2, h3, h4 { font-family: "Saira Condensed", "Saira Condensed Recurso", "Arial Narrow", Barlow, 'Barlow Recurso', sans-serif; font-weight: 700; margin: 0; line-height: 1.15; }
a { color: var(--vermelho); }
button, input, select { font: inherit; }
img { max-width: 100%; height: auto; }

.casca { width: min(var(--largura), calc(100% - 40px)); margin-inline: auto; }
/* F-08 (fase de design, 02/09) · a casca travava em 1180px em qualquer janela: num Full HD
   sobravam 370px de cada lado e a mesma lista ficava 2× mais alta do que precisava. Decisão do
   dono: «usar a resolução padrão da maioria dos desktop HD ou FULL HD». Acima de 1680px a casca
   cresce para 1400px; em HD (1366) nada muda. As grelhas com `auto-fill` ganham a coluna sozinhas. */
@media (min-width: 1680px) { :root { --largura: 1400px; } }

/* Apoio persistente em todas as superfícies da Área: um único retorno, emitido no FIM do
   <main> — o breadcrumb no topo é o caminho hierárquico e a logo leva ao início. O formulário
   de busca que vivia aqui saiu: a busca de compostos está no cabeçalho do contrato, e as buscas
   contextuais (home guiada, ficha) continuam nas suas páginas. */
.area-apoio {
  display: flex; align-items: end; justify-content: flex-start; gap: 18px;
  padding: 26px 0 34px; flex-wrap: wrap;
}
.area-voltar { flex: 0 1 auto; max-width: 100%; white-space: normal; }

/* ── acessibilidade ─────────────────────────────────────────────────────────────────────── */
.saltar {
  position: fixed; left: 16px; top: -80px; z-index: 100;
  background: var(--vermelho); color: #fff; padding: 12px 18px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }
/* ── 06/09/2026 · LOJA-FOCO/ACESSIBILIDADE-04 · O FOCO USAVA A COR DO ERRO ────────────────────
   O anel de foco global da Área pintava `--vermelho`, o MESMO tom da seleção do filtro e das
   mensagens de erro (`.aviso.erro`, `.gd-filtros-erro`) — quem navegava por teclado não tinha
   como distinguir "o Tab chegou aqui" de "isto está selecionado ou errado". A calculadora de
   peptídeos já resolveu o mesmo problema com `--azul` (G027, 04/09) — que já é o token que
   `.ent-origem:focus-visible` usa em `scripts/conhecimento/entidades.css`; reaproveita-se aqui
   em vez de inventar uma quinta cor. `--azul` resolve para `--ep-azul` (#1D4ED8), 6,4:1 sobre o
   branco desta folha (`--superficie`) — acima do piso de 3:1 para indicadores de foco. */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── cabeçalho ──────────────────────────────────────────────────────────────────────────── */
/* O cabeçalho e a barra de topo NÃO têm regras aqui: vêm do contrato único de navegação
   (scripts/conhecimento/nav-contrato.mjs) e o estilo — incluindo o responsivo com hambúrguer —
   vive em nav.css, publicado como /assets/nav.<hash>.css e carregado pelo próprio topo. As
   media queries genéricas (`header > div`, `header nav`) que compensavam o antigo cabeçalho
   inline saíram: interferiam no cabeçalho novo, e o problema que resolviam já não existe. */
@media (max-width: 768px) {
  .area-apoio { align-items: stretch; padding-top: 14px; }
}
@media (max-width: 430px) {
  .area-apoio { width: calc(100% - 28px); }
}

/* ── hero da Guia de Uso ────────────────────────────────────────────────────────────────── */
.hero { background: var(--superficie-escura); color: #fff; padding: 24px 0 0; }
/* Eyebrow medido no site real: Barlow 700 (nao Saira Condensed — era o erro aqui), 13px,
   letter-spacing 2.34px (~.18em a este tamanho), sempre vermelho — nao ha variante muda no site. */
.sobrancelha {
  margin: 0 0 10px; font-family: Barlow, 'Barlow Recurso', "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--vermelho);
}
/* No fundo escuro do hero, o vermelho da marca não chega ao contraste mínimo para texto pequeno. */
.hero .sobrancelha { color: var(--ep-vermelho-texto-esc); }
/* Titulo de exibicao medido: Saira Condensed 800, 64px no desktop, letter-spacing .32px. */
.hero h1 { font-weight: 800; font-size: clamp(2rem, 6vw, 4rem); text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
.hero p.intro { color: #c8ced4; max-width: 62ch; margin: 14px 0 0; }
/* ── 31/08/2026 · A ÚLTIMA LINHA DO TEXTO DE ABERTURA MORRIA NA ARESTA DA FAIXA PRETA ───────
   O `.hero` fecha com `padding-bottom: 0` e o parágrafo não tem margem de baixo: onde ele é o
   último filho — 9 páginas por idioma, 27 ao todo —, a linha final encosta no corte da faixa e as
   descidas das letras (g, p, q) ficam rentes à borda, com ar de texto cortado. O `:last-child`
   preserva o hub, onde as abas vêm logo a seguir e devem continuar coladas. Os 34 px são os que
   `.abas` já usa como respiro — nenhuma medida nova entra. */
.hero p.intro:last-child { margin-bottom: 20px; }

.abas { display: flex; gap: 4px; margin-top: 34px; flex-wrap: wrap; }
.abas a {
  padding: 13px 22px; text-decoration: none; color: #aeb6bd; font-weight: 700;
  border-radius: 10px 10px 0 0; border: 1px solid transparent; border-bottom: none;
}
.abas a[aria-current="page"] { background: var(--superficie-suave); color: var(--tinta); }
.abas a:not([aria-current="page"]):hover { color: #fff; background: #1b2126; }

/* ── avisos ─────────────────────────────────────────────────────────────────────────────── */
.aviso {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--raio); padding: 14px 16px; margin: 20px 0; font-size: .92rem;
  border: 1px solid var(--linha); background: var(--superficie);
}
.aviso .icone { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #fff; }
.aviso p { margin: 0; }
.aviso.info { background: var(--azul-fraco); border-color: #bfdbfe; }
.aviso.info .icone { background: var(--azul); }
.aviso.atencao { background: var(--ambar-fraco); border-color: #fed7aa; }
.aviso.atencao .icone { background: var(--ambar); }
.aviso.travado { background: var(--vermelho-fraco); border-color: #f6c9cf; }
.aviso.travado .icone { background: var(--vermelho); }
.aviso a { font-weight: 700; }

/* ── métricas ───────────────────────────────────────────────────────────────────────────── */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 26px 0; }
.metricas div { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; }
.metricas strong { display: block; font-family: "Saira Condensed", "Saira Condensed Recurso", sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--vermelho); }
.metricas span { display: block; margin-top: 6px; color: var(--mudo); font-size: .82rem; font-weight: 600; }

/* ── busca e filtros ────────────────────────────────────────────────────────────────────── */
.painel-busca { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra-leve); }
/* ── 31/08/2026 (G104) · ESTA REGRA ESTAVA A COLAR O NÚMERO AO NOME DA FACETA ─────────────
   As pastilhas de filtro são `<label class="marcador">` e vivem dentro de `.painel-busca`.
   `.painel-busca label` tem especificidade (0,1,1) e `.marcador` tem (0,1,0) — logo o
   `display:block` daqui vencia o `inline-flex` de lá, e com ele morria o `gap: 6px` que
   separava o nome da contagem. O resultado na tela era «ARTIGO636», «MC4R3»,
   «GLP-1 RECEPTOR2»: o número fundido ao nome químico, a ponto de parecer parte dele.
   `:not(.marcador)` devolve as pastilhas ao estilo que elas próprias declaram, sem mudar
   nada para o rótulo do campo de busca, que é quem esta regra sempre quis vestir. */
.painel-busca label:not(.marcador) { display: block; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mudo); margin-bottom: 8px; }
.linha-busca { display: flex; gap: 10px; flex-wrap: wrap; }
.linha-busca input[type="search"] {
  flex: 1 1 320px; height: 48px; padding: 0 16px; border: 1px solid var(--linha);
  border-radius: 10px; background: var(--superficie-suave);
}
.linha-busca input[type="search"]:focus { background: #fff; border-color: var(--azul); }

.filtros { margin-top: 18px; display: grid; gap: 14px; }
.filtro summary {
  cursor: pointer; font-weight: 700; font-size: .84rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-suave); padding: 8px 0; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.filtro summary::-webkit-details-marker { display: none; }
.filtro summary::before { content: "▸"; color: var(--vermelho); transition: transform .15s; }
.filtro[open] summary::before { transform: rotate(90deg); }
.filtro .opcoes { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 0 10px; }
.marcador {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha);
  background: var(--superficie-suave); border-radius: 999px; padding: 6px 12px;
  font-size: .82rem; cursor: pointer; user-select: none;
}
/* O input está escondido de PROPÓSITO: quem recebe o toque e pinta o estado é o rótulo
   `.marcador`, que já é bem maior que o dedo. A regra de alvo mínimo do design system
   (`input[type="checkbox"] { min-width: 24px; min-height: 24px }`, atrás de `pointer: coarse`)
   não sabe disso e voltava a dar-lhe 24×24 — 156 caixas invisíveis a ocupar espaço nesta
   página. Aqui o componente declara que o alvo não é ele. */
.marcador input { position: absolute; opacity: 0; width: 0; height: 0; min-width: 0; min-height: 0; }
.marcador:has(input:checked) { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.marcador:has(input:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }
.marcador .n { opacity: .65; font-size: .74rem; font-variant-numeric: tabular-nums; }
/* Seleccionado, o contador precisa de branco opaco para continuar legível sobre o vermelho. */
.marcador:has(input:checked) .n { opacity: 1; }

.barra-resultados { display: flex; align-items: center; gap: 14px; margin: 24px 0 14px; flex-wrap: wrap; }
/* 31/08/2026 (G104) — a contagem e o rótulo eram `<b>834</b>` mais um NÓ DE TEXTO que
   começava por espaço, e apareceram colados («834resultados»). Um espaço em nó de texto é
   frágil por natureza: colapsa conforme o que estiver à volta. Passa a ser separação
   declarada, com `gap`, que não depende de espaço nenhum. */
.barra-resultados .conta { font-weight: 700; display: inline-flex; align-items: baseline; gap: 6px; }
/* A Biblioteca rola até esta contagem depois da busca. Só esse alvo precisa somar a altura da
   faixa fixa ao offset global do cabeçalho; âncoras de outras páginas mantêm a posição delas. */
#biblioteca #conta { scroll-margin-top: var(--ep-faixa-fixa); }
.barra-resultados .conta b { font-family: "Saira Condensed", "Saira Condensed Recurso", sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--vermelho); }
.botao {
  border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta);
  border-radius: 9px; padding: 9px 16px; font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; font-size: 1rem;
}
.botao:hover { border-color: var(--vermelho); color: var(--vermelho); }
/* Gradiente medido no botao "Ver Catalogo" do site real, nao um vermelho chapado. */
.botao.forte { background: var(--ep-vermelho-grad); border-color: transparent; color: #fff; }
.botao.forte:hover { background: var(--ep-vermelho-grad-fundo); color: #fff; }
.botao[disabled] { opacity: .45; pointer-events: none; }

/* ── catálogo ───────────────────────────────────────────────────────────────────────────── */
/* 27/08 — `minmax(310px, 1fr)` é um mínimo FIXO: num ecrã de 320 px, com a margem da página, a
   coluna não cabe e o cartão passa 10 px da direita. O `min()` deixa o mínimo ceder quando não há
   espaço, e mantém os 310 px onde há. Encontrado ao varrer as 16 telas do site em 320/360/390,
   varredura que não existia — e que só se fez depois de o dono ver o portão partido no telemóvel. */
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 16px; }
.ficha {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative;
}
.ficha:hover { border-color: var(--vermelho); box-shadow: var(--sombra-leve); }
.ficha .classe { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--vermelho); }
.ficha h2 { font-size: 1.12rem; }
.ficha h2 a { color: var(--tinta); text-decoration: none; }
.ficha h2 a::after { content: ""; position: absolute; inset: 0; }
.ficha:hover h2 a { color: var(--vermelho); }
.ficha p { margin: 0; color: var(--tinta-suave); font-size: .9rem; }
/* Nome renomeado: colidia com o `.rodape` do site inteiro (rodape escuro, ver mais abaixo) — a
   regra deste cartao nunca definia `background`, e a unica declaracao que sobrava para essa
   propriedade era a do rodape do site, que pintava a barra de etiquetas de preto em TODOS os
   cartoes. Achado comparando o HTML renderizado contra a folha de estilos, nao por inspecao visual. */
.ficha-rodape { margin-top: auto; padding-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.etiqueta { font-size: .72rem; background: var(--superficie-suave); border: 1px solid var(--linha); border-radius: 999px; padding: 3px 10px; color: var(--tinta-suave); }
.etiqueta.idioma { border-color: #bfdbfe; background: var(--azul-fraco); color: var(--azul); font-weight: 700; }
/* `.traducao` substitui a antiga `.revisao`: o que a etiqueta assinala é uma propriedade da
   tradução (símbolos científicos alterados, original a um clique), não o estado do nosso processo
   editorial. A regra antiga fica por não haver garantia de que nenhuma cópia em cache do HTML a
   deixe de pedir durante a validade do `immutable`. */
.etiqueta.revisao,
.etiqueta.traducao { border-color: #fed7aa; background: var(--ambar-fraco); color: var(--ambar); font-weight: 700; }

.vazio { grid-column: 1 / -1; text-align: center; padding: 56px 20px; color: var(--mudo); background: var(--superficie); border: 1px dashed var(--linha); border-radius: var(--raio); }
/* G497/G499 · o botão de tentar de novo dentro da caixa de erro, e a nota que explica por que a
   busca foi alargada. Sem estilo próprio o botão colava no texto e a nota lia-se como parte da
   contagem. */
.vazio .botao { margin-top: 14px; }
.vazio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.aviso-largura { color: var(--mudo); font-weight: 400; }
[aria-busy="true"] #resultados { opacity: .7; }
.vazio strong { display: block; font-family: "Saira Condensed", "Saira Condensed Recurso", sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--tinta); margin-bottom: 8px; }

.paginacao { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 32px 0 12px; flex-wrap: wrap; }
.paginacao .pag { font-variant-numeric: tabular-nums; color: var(--mudo); font-size: .9rem; }

/* ── artigo ─────────────────────────────────────────────────────────────────────────────── */
.trilha { font-size: .82rem; color: var(--mudo); padding: 18px 0; }
/* Fase de design (06/09) · o link da trilha (Início / Conhecimento) media 30×16px de área
   clicável — abaixo do alvo mínimo de 24×24px (WCAG 2.5.8). A margem negativa cancela a
   folga que o padding acrescenta na composição, para o tipo continuar do mesmo tamanho e a
   trilha não empurrar o que vem depois dela: só a área de toque cresce. */
.trilha a { color: var(--tinta-suave); text-decoration: none; display: inline-block;
  padding: 4px 3px; margin: -4px -3px; min-height: 24px; box-sizing: border-box; }
.trilha a:hover { color: var(--vermelho); }
.trilha span { margin: 0 7px; opacity: .5; }

.artigo { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; padding-bottom: 60px; }
@media (max-width: 940px) { .artigo { grid-template-columns: 1fr; } }

.artigo-corpo { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 34px; min-width: 0; }
.artigo-corpo, .ent-descricao, .ent-resumo { max-width: none; }
/* Fase de design (06/09) · faltava aqui o `text-wrap: balance` que `.hero h1` já tinha desde
   02/09 — os títulos importados são longos (até 285 caracteres) e, sem balanceamento, a última
   palavra («Science», «Mechanisms», «Biology», …) ficava sozinha na última linha, medido em
   várias larguras em vários artigos. */
.artigo-corpo h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 14px; text-wrap: balance; }
/* A marcação actual não emite artigo-meta; evita-se conservar uma regra sem destino. */

.prosa { font-size: 1.02rem; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.prosa h2 { font-size: 1.5rem; margin: 34px 0 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.prosa h3 { font-size: 1.2rem; margin: 24px 0 10px; }
.prosa h4 { font-size: 1.05rem; margin: 18px 0 8px; color: var(--tinta-suave); }
.prosa p { margin: 0 0 14px; }
.prosa ul, .prosa ol { margin: 0 0 16px; padding-left: 22px; }
.prosa li { margin-bottom: 6px; }
.prosa a { text-decoration: underline; text-underline-offset: 2px; }
.prosa strong { font-weight: 700; }
.prosa blockquote { margin: 18px 0; padding: 12px 18px; border-left: 3px solid var(--vermelho); background: var(--superficie-suave); border-radius: 0 8px 8px 0; }
.prosa code { background: var(--superficie-suave); padding: 2px 6px; border-radius: 5px; font-size: .9em; }
.prosa pre { background: var(--superficie-escura); color: #e6e9ec; padding: 14px; border-radius: 10px; overflow-x: auto; }
.prosa figure { margin: 20px 0; }
.prosa figcaption { font-size: .84rem; color: var(--mudo); margin-top: 6px; }
.prosa hr { border: none; border-top: 1px solid var(--linha); margin: 26px 0; }

/* tabelas largas rolam dentro de si, o corpo da página nunca rola na horizontal */
.rolagem { overflow-x: auto; margin: 18px 0; border: 1px solid var(--linha); border-radius: 10px; }
.prosa table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 460px; }
.prosa th { text-align: left; background: var(--superficie-suave); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mudo); padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.prosa td { padding: 10px 12px; border-bottom: 1px solid #f0f2f4; vertical-align: top; }
.prosa tr:last-child td { border-bottom: none; }

/* ── coluna lateral ─────────────────────────────────────────────────────────────────────── */
.lado { display: grid; gap: 16px; position: sticky; top: 96px; }
@media (max-width: 940px) { .lado { position: static; } }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.cartao h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); margin-bottom: 12px; }
.cartao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cartao li a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .92rem; display: block; }
.cartao li a:hover { color: var(--vermelho); }
.cartao li small { display: block; color: var(--mudo); font-weight: 400; font-size: .8rem; margin-top: 2px; }
.cartao .dupla { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .86rem; }
.cartao .dupla dt { color: var(--mudo); }
.cartao .dupla dd { margin: 0; font-weight: 600; }

/* Só o nível baixo é publicado; variantes sem emissor não devem manter CSS inerte. */
.nivel { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.nivel.baixo { background: var(--superficie-suave); color: var(--mudo); }

/* ── rodapé ─────────────────────────────────────────────────────────────────────────────── */
.rodape { background: var(--superficie-escura); color: #aeb6bd; margin-top: 40px; padding: 40px 0 30px; font-size: .88rem; }
.rodape .grelha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.rodape strong { display: block; color: #fff; font-family: "Saira Condensed", "Saira Condensed Recurso", sans-serif; letter-spacing: .06em; margin-bottom: 8px; text-transform: uppercase; }
.rodape p { margin: 0; }
/* ── 31/08/2026 · OS ÚNICOS LINKS DO RODAPÉ NÃO PARECIAM LINKS, E NÃO CABIAM NO DEDO ────────
   Eram três âncoras de 17 px de altura, distinguidas do texto ao lado só pela cor — o que deixa
   de fora quem não separa esses dois cinzentos. Sublinhado devolve a pista não-cromática que o
   resto do site já usa dentro de texto corrido, e o `inline-block` com respiro vertical leva o
   alvo de 17 para 29 px sem mexer no desenho da letra nem abrir buraco entre as linhas. */
.rodape a { color: #d9dee2; text-decoration: underline; display: inline-block; padding: 6px 2px; }
.rodape .fina { margin-top: 26px; padding-top: 18px; border-top: 1px solid #23292e; font-size: .8rem; color: #7d868d; }

/* Estados sem emissor saíram; hidden continua porque é consumido pelo HTML actual. */
[hidden] { display: none !important; }

/* Tooltip acessível para os seletores de idioma: title continua como fallback nativo. */
.bandeira-idioma { position: relative; }
.bandeira-idioma::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 5px 8px;
  border-radius: 4px;
  background: #1d252c;
  color: #fff;
  font-size: .72rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.bandeira-idioma:hover::after,
.bandeira-idioma:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Alvo de toque nas LISTAS DE NAVEGAÇÃO dos cartões (artigos relacionados, «Outros idiomas»,
   compostos). Medidas no telemóvel: 17px nas ligações de idioma, 28px nas de artigo. Nenhuma
   REPROVA a WCAG 2.5.8 — o espaçamento entre linhas dispensa-as —, mas 17px é desconfortável para
   o polegar e o design system fixa 44px como o piso do toque. A regra é só para `pointer: coarse`:
   no desktop, onde o rato aponta, nada muda. Fica de fora o texto corrido, que não é lista. */
@media (pointer: coarse) {
  .cartao ul li > a { display: flex; align-items: center; min-height: var(--ep-toque, 44px); }
}

/* ── Guia de Dosagem ────────────────────────────────────────────────────────────────────────
   Nenhuma cor, raio ou sombra nova: tudo sai das variáveis que a folha já define. Uma página
   que introduz o seu próprio azul é uma página que deixa de pertencer ao site.

   A grelha é de cartões e não de tabela, e é decisão. Uma tabela obriga a mesma coluna a
   significar a mesma coisa em todas as linhas — e aqui não significa: um composto traz «Dose
   FDA», o outro «Dose (comunidade)». No cartão, cada valor carrega o seu próprio rótulo. */
.gd-filtros { position: sticky; top: 0; z-index: 5; padding: 14px 0 12px;
  background: var(--superficie); border-bottom: 1px solid var(--linha); margin-bottom: 18px; }
.gd-filtros input[type="search"] { width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--linha); border-radius: 10px; font: inherit; font-size: 15px;
  background: var(--superficie); color: var(--tinta); }
.gd-filtros input[type="search"]:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.gd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.gd-chip { border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta-suave);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px; cursor: pointer; }
.gd-chip:hover { border-color: var(--mudo); }
.gd-chip[aria-pressed="true"] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; font-weight: 600; }
.gd-contador { margin: 10px 0 0; font-size: 13px; color: var(--mudo); }
.gd-limpar { margin-top: 8px; border: 0; background: none; color: var(--vermelho); font: inherit;
  font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px 2px; }

.gd-letra { grid-column: 1 / -1; margin: 22px 0 2px; font-size: 15px; letter-spacing: .12em;
  color: var(--mudo); border-bottom: 1px solid var(--linha); padding-bottom: 6px; }
.gd-letra:first-child { margin-top: 0; }
.gd-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }

.gd-card { border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 16px 13px;
  background: var(--superficie); box-shadow: var(--sombra-leve); display: flex; flex-direction: column; min-width: 0; }
.gd-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gd-card-topo h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.gd-card-topo h3 a { color: inherit; text-decoration: none; }
.gd-card-topo h3 a:hover { color: var(--vermelho); }
.gd-cat { flex: 0 0 auto; font-size: 11.5px; color: var(--mudo); border: 1px solid var(--linha);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.gd-alias { margin: 5px 0 0; font-size: 12.5px; color: var(--mudo); }

.gd-linhas { margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.gd-linha { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; align-items: baseline; }
.gd-linha dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mudo); }
.gd-linha dd { margin: 0; grid-column: 2; font-size: 14.5px; line-height: 1.4; }
/* O rótulo que a ficha usou. Discreto, mas presente: é o que separa uma dose de bula de uma
   dose relatada por comunidade, e essa diferença não pode desaparecer na normalização. */
.gd-rot-orig { font-size: 11.5px; color: var(--mudo); white-space: nowrap; }
.gd-sem { margin: 12px 0 0; font-size: 14px; color: var(--mudo); font-style: italic; }

.gd-prot { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 10px; }
.gd-prot summary { cursor: pointer; font-size: 13px; color: var(--vermelho); padding: 4px 0; }
.gd-prot-lista { margin: 9px 0 0; display: flex; flex-direction: column; gap: 8px; }
.gd-prot-lista > div { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; }
.gd-prot-lista dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mudo); }
.gd-prot-lista dd { margin: 0; font-size: 14px; line-height: 1.4; }
.gd-prot-nota { display: block; margin-top: 3px; font-size: 12.5px; color: var(--mudo); }
/* F-11 (fase de design, 02/09) · «Sem protocolo estabelecido» substituiu a gaveta de protocolos e
   herdava o parágrafo: lê-se agora como a nota discreta que é, na mesma linha de base da gaveta. */
.gd-prot-vazio { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 10px; font-size: 13px; color: var(--mudo); }

/* `margin-top: auto` e nao `12px`: os cartoes de uma fila tem a mesma altura (o grid estica-os),
   mas o conteudo nao — um composto com quatro linhas de dose e outro com sete deixavam o link a
   alturas diferentes na mesma fila. Empurrado para o fundo, a fila fecha alinhada. */
.gd-ficha { margin-top: auto; font-size: 13px; color: var(--vermelho); text-decoration: none;
  display: inline-block; padding: 16px 0 4px; }
.gd-ficha:hover { text-decoration: underline; }
.gd-vazio { padding: 42px 0; text-align: center; color: var(--mudo); }
.gd-vazio h2 { margin: 0 0 6px; font-size: 19px; color: var(--tinta); }

@media (max-width: 640px) {
  /* A 320px, 96px de rótulo deixa 190px para o valor — «250–500 mcg/dia SC» parte ao meio.
     Empilhado, o valor fica com a largura toda. */
  .gd-linha, .gd-prot-lista > div { grid-template-columns: 1fr; gap: 1px; }
  .gd-linha dd, .gd-prot-lista dd { grid-column: 1; }
  .gd-filtros { position: static; }
}