/* C4 — camada das páginas de composto. Carrega DEPOIS de `conhecimento.css` e só acrescenta.
 *
 * Arquivo próprio, e não uma adição ao `conhecimento.css`, por uma razão de consequência: aquele
 * arquivo tem impressão de conteúdo no nome e é referido pelas 2.502 páginas já geradas. Mexer-lhe
 * mudava a impressão, e mudar a impressão obrigava a regerar as 2.502 — exactamente o que esta
 * entrega não pode fazer. Uma camada nova custa um pedido a mais e deixa o acervo intacto.
 *
 * Sem `@import` (seria um pedido em série) e sem tokens novos: as cores, o raio e a sombra são os
 * que já existem em `:root`. */

/* ── cabeçalho da ficha ────────────────────────────────────────────────────────────────────── */
.ent-cabeca { padding: 30px 0 22px; border-bottom: 1px solid var(--linha); }
.ent-cabeca h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem); margin: 6px 0 10px; }
.ent-cabeca .aka { color: var(--mudo); font-size: .94rem; margin: 0 0 14px; }
.ent-cabeca .aka b { color: var(--tinta-suave); font-weight: 600; }
.ent-selos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ent-resumo { font-size: 1.05rem; color: var(--tinta-suave); max-width: 68ch; margin: 0 0 18px; }
.ent-accoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── navegação por abas: âncoras que o JavaScript promove a abas ───────────────────────────── */
.ent-abas { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--linha);
  margin: 26px 0 0; padding-bottom: 0; scrollbar-width: thin; }
.ent-abas a { flex: 0 0 auto; padding: 11px 15px; font-size: .92rem; font-weight: 600;
  color: var(--tinta-suave); text-decoration: none; border-bottom: 3px solid transparent;
  white-space: nowrap; border-radius: 6px 6px 0 0; }
.ent-abas a:hover { background: var(--superficie-suave); color: var(--tinta); }
.ent-abas a[aria-current="true"] { color: var(--vermelho); border-bottom-color: var(--vermelho); }
.ent-abas a:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* ── secções ───────────────────────────────────────────────────────────────────────────────── */
.ent-secao { padding: 28px 0; border-bottom: 1px solid var(--linha); scroll-margin-top: calc(var(--ep-nav-fixa, 75px) + 12px); }
.ent-secao:last-of-type { border-bottom: 0; }
.ent-secao > h2 { font-size: 1.35rem; margin: 0 0 4px; }
.ent-secao > .nota { color: var(--mudo); font-size: .9rem; margin: 0 0 18px; max-width: 70ch; }
/* Com JavaScript as secções viram painéis de aba; sem ele ficam todas visíveis, umas a seguir às
 * outras, e a página continua a servir por inteiro. Esta é a única regra que o JS aciona. */
.ent-secao[hidden] { display: none; }

/* ── pares rótulo/valor ────────────────────────────────────────────────────────────────────── */
.ent-pares { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.ent-pares > div { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--linha); align-items: baseline; }
.ent-pares > div:last-child { border-bottom: 0; }
.ent-pares dt { color: var(--mudo); font-size: .87rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.ent-pares dd { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.ent-pares dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .93rem; }
.ent-pares dd.ausente { color: var(--mudo); font-style: italic; }

/* ── marcador de idioma de origem ──────────────────────────────────────────────────────────── */
/* Aparece ao lado de um valor cuja prosa está no idioma da fonte e não no da página. Não é
 * decoração: é a diferença entre o leitor saber e não saber que aquele texto não foi escrito para
 * ele. Vai a seguir ao valor, na mesma linha, e leva link para a variante no idioma original. */
.ent-origem { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px; background: var(--azul-fraco); color: var(--azul);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; vertical-align: middle; white-space: nowrap; }
.ent-origem:hover { background: #dbeafe; }
.ent-origem:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ── listas de segurança e de achados ──────────────────────────────────────────────────────── */
.ent-blocos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ent-bloco { border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px;
  background: var(--superficie); }
.ent-bloco h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mudo); margin: 0 0 10px; }
.ent-bloco.grave { border-color: #f3c9cf; background: var(--vermelho-fraco); }
.ent-bloco.grave h3 { color: var(--vermelho-escuro); }
.ent-bloco.atencao { border-color: #f6d9b0; background: var(--ambar-fraco); }
.ent-bloco.atencao h3 { color: var(--ambar); }
.ent-bloco ul { margin: 0; padding-left: 18px; }
.ent-bloco li { margin: 0 0 8px; color: var(--tinta-suave); font-size: .95rem; line-height: 1.55; }
.ent-bloco li:last-child { margin-bottom: 0; }

/* ── relações entre fichas ─────────────────────────────────────────────────────────────────── */
.ent-relacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ent-relacao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.ent-relacao .topo { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.ent-relacao .nome { font-weight: 700; color: var(--tinta); }
.ent-relacao a.nome { color: var(--vermelho); text-decoration: none; }
.ent-relacao a.nome:hover { text-decoration: underline; }
.ent-relacao .detalhe { margin: 8px 0 0; color: var(--tinta-suave); font-size: .94rem; line-height: 1.55; }

/* ── referências de pesquisa ───────────────────────────────────────────────────────────────── */
.ent-estudos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ent-estudo { border: 1px solid var(--linha); border-left: 3px solid var(--vermelho);
  border-radius: 0 var(--raio) var(--raio) 0; padding: 14px 18px; }
.ent-estudo p { margin: 0 0 10px; color: var(--tinta); line-height: 1.6; }
.ent-estudo .campos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: var(--mudo); }
.ent-estudo .campos b { color: var(--tinta-suave); font-weight: 600; }

/* ── índice de compostos ───────────────────────────────────────────────────────────────────── */
.ent-grupo { padding: 6px 0 26px; }
.ent-grupo > h2 { font-size: 1.1rem; margin: 22px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--linha); }
.ent-grupo > h2 .n { color: var(--mudo); font-weight: 600; font-size: .85rem; margin-left: 8px; }
.ent-cartoes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.ent-cartao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 17px 18px;
  background: var(--superficie); box-shadow: var(--sombra-leve); display: flex; flex-direction: column; gap: 8px; }
.ent-cartao:hover { border-color: #cfd5da; box-shadow: var(--sombra); }
.ent-cartao h3 { font-size: 1.08rem; margin: 0; }
.ent-cartao h3 a { color: var(--tinta); text-decoration: none; }
.ent-cartao h3 a::after { content: ""; position: absolute; inset: 0; }
.ent-cartao { position: relative; }
.ent-cartao:hover h3 a { color: var(--vermelho); }
.ent-cartao p { margin: 0; color: var(--tinta-suave); font-size: .9rem; line-height: 1.5; }
.ent-cartao .pe { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px;
  position: relative; z-index: 1; }

@media (max-width: 640px) {
  .ent-pares > div { grid-template-columns: 1fr; gap: 3px; }
  .ent-secao { padding: 22px 0; }
}

/* ── C5 · página da Eagle AI ───────────────────────────────────────────────────────────────── */
.ia-casca { padding-top: 22px; padding-bottom: 40px; max-width: 860px; }
.ia-contexto a { font-weight: 600; }

.ia-consentimento { border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); padding: 22px 24px; margin: 18px 0; box-shadow: var(--sombra-leve); }
.ia-consentimento h2 { font-size: 1.15rem; margin: 0 0 10px; }
.ia-consentimento p { margin: 0 0 10px; color: var(--tinta-suave); line-height: 1.6; }

.ia-sugestoes { margin: 18px 0 6px; }
.ia-sugestoes h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mudo); margin: 0 0 10px; }
.ia-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ia-sugestao { border: 1px solid var(--linha); background: var(--superficie); border-radius: 999px;
  padding: 9px 15px; font: inherit; font-size: .9rem; color: var(--tinta-suave); cursor: pointer;
  text-align: left; }
.ia-sugestao:hover { border-color: var(--vermelho); color: var(--vermelho); }
.ia-sugestao:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.ia-sugestao[aria-pressed="true"] { border-color: var(--vermelho); background: var(--vermelho);
  color: #fff; }
.ia-assistente { margin: 18px 0; padding: 18px; border: 1px solid var(--linha);
  border-radius: var(--raio); background: var(--superficie); }
.ia-assistente h2 { margin: 0 0 14px; font-size: 1.05rem; }
.ia-assistente p { margin: 13px 0 8px; color: var(--tinta-suave); font-weight: 600; }
.ia-assistente .botao { margin-top: 14px; }
.ia-assistente-estado:empty { display: none; }
.ia-assistente-estado { color: var(--vermelho) !important; font-size: .9rem; }

.ia-conversa { display: flex; flex-direction: column; gap: 14px; margin: 22px 0; }
.ia-conversa:empty { margin: 0; }
.ia-bolha { border-radius: var(--raio); padding: 14px 17px; max-width: 92%; }
.ia-bolha p { margin: 0; line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; }
.ia-eu { align-self: flex-end; background: var(--vermelho); color: #fff; }
.ia-bot { align-self: flex-start; background: var(--superficie); border: 1px solid var(--linha); }

/* O contador de caracteres acompanha o `maxlength` do campo: o visitante vê o teto antes de
   escrever demais, em vez de descobri-lo numa recusa depois do envio. */
.ia-contador { margin: 7px 0 0; color: var(--mudo); font-size: .82rem; }
.ia-contador:empty { display: none; }
.ia-contador.no-limite { color: var(--vermelho); font-weight: 700; }

.ia-fontes { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--linha); }
.ia-fontes-toggle { cursor: pointer; color: var(--azul); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; list-style-position: inside; }
.ia-fontes-toggle::marker { color: var(--mudo); }
.ia-fontes-toggle:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 3px; }
.ia-fontes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ia-fontes li { display: flex; gap: 8px; align-items: baseline; font-size: .9rem; }
.ia-tipo { flex: 0 0 auto; text-transform: uppercase; font-size: .68rem; font-weight: 700;
  letter-spacing: .05em; color: var(--mudo); border: 1px solid var(--linha); border-radius: 4px;
  padding: 1px 5px; }
.ia-fontes a { color: var(--azul); overflow-wrap: anywhere; }
.ia-sugestoes-catalogo { margin-top: 14px; padding-top: 13px; border-top: 2px solid var(--linha); display: grid; gap: 10px; }
.ia-sugestoes-titulo { margin: 0; font-size: .92rem; color: var(--tinta); }
.ia-sugestao-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie-suave); }
.ia-sugestao-imagem { width: 76px; height: 76px; border-radius: 8px; object-fit: cover; background: #fff; }
.ia-sugestao-corpo { min-width: 0; }
.ia-sugestao-nome { color: var(--azul); font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.ia-sugestao-razao, .ia-sugestao-aviso { margin: 5px 0 0 !important; font-size: .82rem; line-height: 1.42 !important; }
.ia-sugestao-aviso { color: var(--mudo); }

.ia-pensando { align-self: flex-start; display: flex; gap: 5px; padding: 16px 18px; }
.ia-pensando .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--mudo);
  animation: ia-pulsa 1.2s infinite ease-in-out; }
.ia-pensando .ponto:nth-child(2) { animation-delay: .18s; }
.ia-pensando .ponto:nth-child(3) { animation-delay: .36s; }
@keyframes ia-pulsa { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ia-pensando .ponto { animation: none; opacity: .55 } }

.ia-aviso { border: 1px solid #f6d9b0; background: var(--ambar-fraco); border-radius: var(--raio);
  padding: 14px 17px; }
.ia-aviso p { margin: 0 0 10px; color: var(--ambar); line-height: 1.55; }
.ia-aviso p:last-child { margin-bottom: 0; }

.ia-form label { display: block; font-size: .87rem; font-weight: 600; color: var(--mudo);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.ia-linha { display: flex; gap: 10px; align-items: flex-end; }
.ia-linha textarea { flex: 1 1 auto; border: 1px solid var(--linha); border-radius: 11px;
  background: var(--superficie); padding: 12px 14px; font: inherit; font-size: 1rem;
  color: var(--tinta); resize: vertical; min-height: 52px; }
.ia-linha textarea:focus { outline: 3px solid var(--vermelho); outline-offset: 1px;
  border-color: var(--vermelho); }
.ia-linha .botao { flex: 0 0 auto; height: 52px; }
.ia-apagar { margin-top: 12px; }
.ia-saidas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

@media (max-width: 560px) {
  .ia-linha { flex-direction: column; align-items: stretch; }
  .ia-linha .botao { width: 100% }
  .ia-bolha { max-width: 100% }
}

/* O cabeçalho comum usa uma faixa horizontal rolável para os quatro destinos no celular.
 * `flex-shrink:0` vem do inline da loja; sem min-width:0 a faixa conservava a largura intrínseca e
 * fazia o documento ganhar 16px, mesmo tendo overflow próprio. A faixa continua rolável, mas já
 * não alarga a página inteira. */
@media (max-width: 768px) {
  /* ── 31/08/2026 · O `overflow-x:hidden` AQUI DESLIGAVA O CABEÇALHO FIXO ───────────────────
     `overflow-x: hidden` faz o navegador calcular `overflow-y: auto`, e isso transforma o
     `html` num CONTENTOR DE ROLAGEM. Um `position: sticky` posiciona-se em relação ao contentor
     de rolagem mais próximo — que passou a ser um elemento que não rola —, portanto o cabeçalho
     deixava de grudar. No celular, quem descia uma ficha ficava sem navegação nenhuma até
     rolar tudo de volta ao topo.
     Tirar a declaração devolveria a rolagem lateral que ela foi posta para matar. `clip` corta
     igual e NÃO cria contentor de rolagem — resolve os dois de uma vez. O `hidden` fica à frente
     como rede para navegador que não conheça `clip`: lá o cabeçalho volta a não grudar, mas a
     página continua sem escorregar de lado, que é o pior dos dois. */
  html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
  /* ── 31/08/2026 (G153) · E ERA ESTE QUE RECORTAVA O MENU A 65 PÍXEIS ─────────────────────
     A gaveta do menu (`.nav-area`) é `position:absolute; top:100%` e vive DENTRO deste
     `<header>`. Com `overflow-x: hidden`, o navegador calcula `overflow-y: auto` e o header
     passa a ser um contentor de rolagem — que tem a altura dele, ~65px. A gaveta abria e ficava
     recortada dentro dessa faixa: aparecia uma nesga e nenhuma opção de navegação. Reproduzido
     nas três línguas, em toda ficha de composto.
     A correção da mesma manhã tratou `html, body` e parou aqui, porque o defeito que eu tinha
     em mãos era o cabeçalho que não grudava. Este é o mesmo mecanismo, um nível abaixo.
     `clip` corta na horizontal — que é o que a faixa rolável do cabeçalho precisa — e deixa o
     eixo vertical VISÍVEL, porque `clip` é o único valor que não obriga o outro eixo a virar
     `auto`. A gaveta volta a poder crescer para fora do header. */
  header { width: 100%; overflow-x: hidden; overflow-x: clip; }
  header > div { min-width: 0; max-width: 100%; }
  header nav { min-width: 0; max-width: 100%; }
}

/* ── C6 · home guiada e navegação por categoria ────────────────────────────────────────────── */
.ini-vias { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 24px; }
.ini-via { position: relative; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); padding: 14px 16px; box-shadow: var(--sombra-leve); }
.ini-via:hover { border-color: #cfd5da; box-shadow: var(--sombra); }
.ini-via-icone { display: inline-flex; color: var(--vermelho); margin-bottom: 8px; }
/* O destino secundário do cartão fundido (ex.: combinações) fica clicável POR CIMA do overlay
   do link principal — sem o z-index o ::after do h2 engoliria o clique. */
.ini-via-extra { position: relative; z-index: 1; margin-top: 6px; }
.ini-via-extra a { color: var(--vermelho); font-weight: 700; font-size: .8rem; text-decoration: none; }
.ini-via-extra a:hover { text-decoration: underline; }
.ini-via h2 { font-size: 1rem; margin: 0 0 6px; }
.ini-via h2 a { color: var(--tinta); text-decoration: none; }
.ini-via h2 a::after { content: ""; position: absolute; inset: 0; }
.ini-via:hover h2 a { color: var(--vermelho); }
.ini-via p { margin: 0; color: var(--tinta-suave); font-size: .88rem; line-height: 1.45; }
.ini-via .ini-abrir { margin-top: 8px; color: var(--vermelho); font-weight: 700; font-size: .8rem; }

/* Cartões de funcionalidade compactos: sete caminhos têm de caber acima da dobra sem empurrar a
   busca por peptídeo para fora do tela. A coluna estreita e o texto encurtado fazem isso; a
   descrição continua a usar a largura toda do cartão, que é o que se pedia. */
.ini-vias-compactas { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.ini-vias-compactas .ini-via { padding: 12px 14px; }
.ini-vias-compactas .ini-via h2 { font-size: .95rem; margin: 0 0 4px; }
.ini-vias-compactas .ini-via p { font-size: .84rem; line-height: 1.4; }
.ini-vias-compactas .ini-via .ini-abrir { margin-top: 6px; font-size: .76rem; }

/* Filtros semânticos: ligações, para funcionarem sem JavaScript. O estado activo é `aria-current`
   e não só a cor — quem não distingue vermelho de cinzento tem de o saber na mesma. */
.ini-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.ini-filtro { display: inline-flex; align-items: center; gap: 7px; min-height: 38px;
  border: 1px solid var(--linha); border-radius: 999px; padding: 7px 14px;
  background: var(--superficie); color: var(--tinta); font-size: .87rem;
  font-weight: 600; text-decoration: none; cursor: pointer; }
.ini-filtro:hover { border-color: #cfd5da; }
.ini-filtro .n { color: var(--mudo); font-size: .8rem; font-weight: 700; }
.ini-filtro[aria-current="true"] { border-color: var(--vermelho); background: var(--vermelho);
  color: #fff; }
.ini-filtro[aria-current="true"] .n { color: #fff; }
.ini-filtro:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* Leituras relacionadas: fecho da home com o que se lê, depois de se ter escolhido o composto. */
.ini-leituras { margin: 30px 0 26px; }
.ini-leituras > h2 { margin: 0 0 6px; font-size: 1.35rem; }
.ini-leituras-grade { display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ini-leitura { min-width: 0; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie); box-shadow: var(--sombra-leve); }
.ini-leitura a { display: block; padding: 14px 16px; color: inherit; text-decoration: none; }
.ini-leitura:hover { border-color: var(--vermelho); }
.ini-leitura-marca { display: block; margin-bottom: 6px; color: var(--vermelho);
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ini-leitura h3 { margin: 0; font-size: .98rem; line-height: 1.4; color: var(--tinta);
  font-weight: 600; overflow-wrap: anywhere; }
.ini-leitura a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.ini-leituras-mais { margin: 16px 0 0; }

/* ── G237 · 02/09/2026 · A ÚLTIMA LINHA DEIXA DE FICAR ÓRFÃ ─────────────────────────────────
   Eram dez pastilhas em `flex-wrap`, empacotadas por largura de texto. Medido a 1352 e 1366 px:
   nove numa linha e «Sexual / estético» sozinho na segunda, em português e em inglês; em espanhol,
   oito e duas. Não é defeito funcional — é a lista a parecer cortada em vez de arrumada, e a
   varredura do olho a partir-se na última linha.
   Um `<br>` resolvido à mão fixaria a quebra a um idioma e a uma largura. A grelha resolve pela
   estrutura: colunas de largura igual que se auto-ajustam à caixa, em qualquer idioma e em
   qualquer largura. A última linha continua a ter menos itens — o que muda é que eles ficam
   ALINHADOS às colunas de cima, e uma coluna vazia lê-se como grelha, não como sobra.
   `minmax(10.5rem, 1fr)`: 10,5rem é o que a etiqueta mais longa («Crescimento / GH») pede sem
   quebrar palavra. */
.ent-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 8px; margin: 6px 0 4px; }
.ent-categorias a { border: 1px solid var(--linha); border-radius: 999px; padding: 8px 15px;
  font-size: .9rem; font-weight: 600; color: var(--tinta-suave); text-decoration: none;
  /* `flex` e não `inline-flex`: dentro da grelha a pastilha ocupa a coluna inteira, e o conteúdo
     centra-se nela. Com `inline-flex` cada pastilha encolhia ao texto e a grelha voltava a
     parecer uma linha desalinhada. */
  display: flex; align-items: baseline; justify-content: center;
  gap: 7px; background: var(--superficie); }
.ent-categorias a:hover { border-color: var(--vermelho); color: var(--vermelho); }
.ent-categorias a[aria-current="true"] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.ent-categorias a[aria-current="true"] .n { color: rgba(255,255,255,.8); }
.ent-categorias .n { font-size: .78rem; font-weight: 700; color: var(--mudo); }
.ent-categorias a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.ent-grupo[hidden] { display: none; }
.ent-vazio-categoria { margin: 24px 0; color: var(--mudo); }

/* ── C7 · comparador ───────────────────────────────────────────────────────────────────────── */
.cmp-casca { padding-top: 24px; padding-bottom: 40px; }
.cmp-escolha { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie);
  padding: 18px 20px; box-shadow: var(--sombra-leve); }
.cmp-escolha > div { flex: 1 1 210px; }
.cmp-escolha label { display: block; font-size: .82rem; font-weight: 600; color: var(--mudo);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 7px; }
.cmp-escolha select { width: 100%; height: 46px; border: 1px solid var(--linha); border-radius: 10px;
  background: var(--superficie); padding: 0 12px; font: inherit; font-size: 1rem; color: var(--tinta); }
.cmp-escolha select:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.cmp-escolha .botao { height: 46px; flex: 0 0 auto; }
.cmp-erro { margin: 16px 0 0; color: var(--vermelho-escuro); font-weight: 600; }
.cmp-existente-topo { margin-top: 18px; }

.cmp-resultado { margin: 22px 0 0; }
.cmp-resultado:empty { margin: 0; }
.cmp-tabela { width: 100%; border-collapse: collapse; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.cmp-tabela caption { text-align: left; font-family: 'Saira Condensed', 'Saira Condensed Recurso', sans-serif; font-weight: 800;
  font-size: 1.4rem; padding: 0 0 12px; color: var(--tinta); }
.cmp-tabela th, .cmp-tabela td { padding: 14px 16px; border-bottom: 1px solid var(--linha);
  vertical-align: top; text-align: left; }
.cmp-tabela thead th { background: var(--superficie-suave); font-size: 1.02rem; }
.cmp-tabela thead th a { color: var(--vermelho); text-decoration: none; }
.cmp-tabela tbody th { width: 20%; min-width: 130px; color: var(--mudo); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em; background: var(--superficie-suave); }
.cmp-tabela td { width: 40%; font-size: .95rem; line-height: 1.55; }
.cmp-tabela tr:last-child th, .cmp-tabela tr:last-child td { border-bottom: 0; }
.cmp-vazio { color: var(--mudo); font-style: italic; }
.cmp-seg > div + div { margin-top: 12px; }
.cmp-seg h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--mudo); margin: 0 0 5px; }
.cmp-seg ul, .cmp-tabela td > ul { margin: 0; padding-left: 17px; }
.cmp-seg li, .cmp-tabela td > ul li { margin-bottom: 5px; }
.cmp-seg p { margin: 0; }
.cmp-evid p { margin: 0 0 4px; }
.cmp-aviso { margin-top: 16px; }

.cmp-pares { margin-top: 34px; }
.cmp-pares h2 { font-size: 1.1rem; margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--linha); }
.cmp-pares ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cmp-par { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 15px;
  background: var(--superficie); }
.cmp-ir { font-weight: 700; color: var(--tinta); text-decoration: none; }
.cmp-ir:hover { color: var(--vermelho); }
.cmp-existente { font-size: .87rem; color: var(--mudo); }
.cmp-existente em { font-style: normal; font-weight: 600; }

@media (max-width: 700px) {
  .cmp-tabela, .cmp-tabela tbody, .cmp-tabela tr, .cmp-tabela td, .cmp-tabela th { display: block; width: auto; }
  /* G101 · ao transformar a tabela em bloco, a legenda conservava o algoritmo de `table-caption`
     e encolhia para 78px dentro de uma tabela de 460px. Como bloco de largura integral, ela pode
     quebrar entre palavras sem repartir cada palavra em várias linhas. */
  .cmp-tabela caption { display: block; width: 100%; box-sizing: border-box; word-break: normal; overflow-wrap: normal; }
  .cmp-tabela thead { display: none; }
  .cmp-tabela tbody th { border-bottom: 0; }
  .cmp-tabela td::before { content: attr(data-de); display: block; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--vermelho); margin-bottom: 5px; }
}

/* ── C8 · protocolos, exames, escore, combinações e calculadora ────────────────────────────── */
.ent-prosa { color: var(--tinta-suave); line-height: 1.65; max-width: 72ch; margin: 0 0 14px; }
/* F-11 (fase de design, 02/09) · `.ent-derivado` («contados na sequência acima») lê-se como nota
   ao lado do número, à maneira de `.ent-notacao` — não como texto do mesmo peso. */
.ent-notacao, .ent-derivado { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: var(--superficie-suave); border: 1px solid var(--linha); color: var(--mudo);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  vertical-align: middle; white-space: nowrap; cursor: help; }

.ent-protocolos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ent-protocolo { border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px;
  background: var(--superficie); }
.ent-protocolo h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--vermelho); margin: 0 0 10px; }
.ent-protocolo .ent-pares > div { grid-template-columns: minmax(80px, 30%) 1fr; padding: 8px 0; }

.ent-exames { margin-top: 20px; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px 18px; background: var(--superficie); }
.ent-exames h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mudo); margin: 0 0 10px; }
.ent-exames ul { margin: 0 0 12px; padding-left: 18px; }
.ent-exames li { margin-bottom: 5px; color: var(--tinta-suave); }

.ent-escore { border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px;
  background: var(--superficie-suave); margin: 0 0 20px; }
.ent-escore h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mudo); margin: 0 0 6px; }
.ent-escore-n { margin: 0 0 8px; font-family: 'Saira Condensed', 'Saira Condensed Recurso', sans-serif; }
.ent-escore-n strong { font-size: 2rem; font-weight: 800; color: var(--tinta); }
.ent-escore-n span { color: var(--mudo); font-size: 1rem; margin-left: 4px; }

.stk { border-top: 1px solid var(--linha); padding: 26px 0; scroll-margin-top: calc(var(--ep-nav-fixa, 75px) + 12px); }
.stk:first-of-type { border-top: 0; }
.stk h2 { font-size: 1.5rem; margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stk-full { color: var(--mudo); margin: 0 0 14px; }
.stk-comp { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stk-comp li { border: 1px solid var(--linha); border-radius: 999px; padding: 7px 14px;
  background: var(--superficie); font-weight: 600; font-size: .92rem; }
.stk-comp a { color: var(--vermelho); text-decoration: none; }
.stk p { color: var(--tinta-suave); line-height: 1.62; max-width: 74ch; }
.stk .sobrancelha { margin-top: 18px; }

.ferr-casca { padding-top: 24px; padding-bottom: 40px; max-width: 880px; }
/* O cartao passou a ser o `.ferr-bloco` que envolve o formulario; deixar a moldura aqui punha
   duas bordas concentricas em volta dos mesmos tres campos. */
.ferr-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 18px 0 0; }
.ferr-campo { flex: 1 1 170px; }
.ferr-campo label { display: block; font-size: .8rem; font-weight: 600; color: var(--mudo);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 7px; }
.ferr-campo input { width: 100%; height: 46px; border: 1px solid var(--linha); border-radius: 10px;
  padding: 0 12px; font: inherit; font-size: 1rem; color: var(--tinta); background: var(--superficie); }
.ferr-campo input:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.ferr-form .botao { height: 46px; flex: 0 0 auto; }
.ferr-erro { color: var(--vermelho-escuro); font-weight: 600; margin: 14px 0 0; }
/* `minmax(160px, …)` obrigava a UMA coluna a 390px (2x160+12 = 332 > os ~316 disponiveis) e os
   quatro cartoes empilhavam. A 132px cabem dois lado a lado em qualquer celular actual. */
.ferr-resultados { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin: 12px 0 0; }
/* Densidade: quatro numeros curtos nao podem custar meia tela. Medido a 390px antes de mexer:
   os quatro empilhados em coluna unica ocupavam ~450px — o usuário rolava para ler «5000»,
   «0.05», «5» e «40». O padding desceu de 14/16 para 11/13 e o valor de 1,7rem para 1,45rem: o
   numero continua a ser a coisa maior do cartao, sem lhe ficar folga a toda a volta. */
.ferr-res { border: 1px solid var(--linha); border-radius: var(--raio); padding: 11px 13px;
  background: var(--superficie); }
.ferr-res dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mudo);
  margin: 0 0 3px; line-height: 1.25; }
.ferr-res dd { margin: 0; font-family: 'Saira Condensed', 'Saira Condensed Recurso', sans-serif; font-weight: 800; font-size: 1.45rem;
  line-height: 1.15; color: var(--tinta); }
.ferr-res dd small { font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--mudo); }
/* ── D-CALC-01 · blocos titulados e o desenho da seringa ───────────────────────────────────── */
.ferr-bloco { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie);
  padding: 14px 18px 16px; margin: 16px 0 0; }
/* Primeiro cartao de cada coluna sem margem de topo: com ela, os dois cartoes lado a lado
   comecavam a alturas diferentes (299px e 286px medidos) e a fila lia-se torta. */
.ferr-numeros > .ferr-bloco:first-child, .ferr-explicacao > :first-child { margin-top: 0; }
.ferr-titulo { margin: 0 0 4px; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mudo); font-weight: 700; }
.ferr-entrada .ferr-form { margin-top: 12px; }
.ferr-bloco .ferr-resultados { margin-top: 12px; }
/* A dose e a sua unidade sao um campo so: separa-los deixava o `mcg` a parecer outra pergunta. */
.ferr-par { display: flex; gap: 8px; align-items: flex-end; flex: 1 1 240px; }
.ferr-par .ferr-campo { flex: 1 1 auto; }
.ferr-par .ferr-campo:last-child { flex: 0 0 92px; }
.ferr-campo select { width: 100%; height: 46px; border: 1px solid var(--linha); border-radius: 10px;
  padding: 0 10px; font: inherit; font-size: 1rem; background: var(--superficie); color: var(--tinta); }
.ferr-campo select:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }

.ferr-seringa { margin: 14px 0 0; border-top: 1px solid var(--linha); padding-top: 12px; }
.ferr-subtitulo { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mudo); font-weight: 700; }
.ferr-desenho { margin: 10px 0 0; }
.ferr-sr { display: block; width: 100%; height: auto; max-width: 480px; }
.ferr-sr-corpo { fill: var(--superficie-suave); stroke: var(--linha); stroke-width: 1.4; }
.ferr-sr-liquido { fill: var(--vermelho); opacity: .82; }
.ferr-sr-liquido.excede { fill: var(--vermelho-escuro); opacity: .5; }
.ferr-sr-haste, .ferr-sr-flange, .ferr-sr-agulha { fill: var(--mudo); opacity: .45; }
.ferr-sr-risco { stroke: var(--mudo); stroke-width: 1; opacity: .5; }
.ferr-sr-risco-maior { stroke: var(--tinta); stroke-width: 1.4; opacity: .65; }
.ferr-sr-num { fill: var(--mudo); font-size: 11px; text-anchor: middle;
  font-family: 'Saira Condensed', 'Saira Condensed Recurso', sans-serif; font-weight: 600; }
.ferr-sr-marca { stroke: var(--vermelho); stroke-width: 2; }
.ferr-sr-seta { fill: var(--vermelho); }
.ferr-seringa-txt { margin: 8px 0 0; color: var(--mudo); font-size: .9rem; }
/* No celular o botao partilhava a fila com o selector da seringa e cortava-lhe o rotulo —
   «Seringa de 100 UI (1 mL» sem fechar o parentese, medido a 390px. O botao passa a ter fila
   propria e o selector fica com a largura toda. */
@media (max-width: 640px) {
  .ferr-form .botao { flex: 1 1 100%; }
  /* O SVG encolhe com a coluna e leva o tipo e os tracos com ele. Subir aqui devolve ao olho o
     tamanho que o desenho tem no desktop: ~10px de numero e riscos que se veem. */
  .ferr-sr-num { font-size: 17px; }
  .ferr-sr-risco { stroke-width: 1.6; }
  .ferr-sr-risco-maior { stroke-width: 2.2; }
  .ferr-sr-marca { stroke-width: 3; }
  /* 2x2 tambem no celular — nunca a coluna unica que empurrava a seringa para fora do tela. */
  .ferr-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ferr-res dd { font-size: 1.3rem; }
}
.ferr-alertas:empty { display: none; }
.ferr-alerta { margin: 14px 0 0; padding: 12px 15px; border-radius: var(--raio);
  border: 1px solid #f6d9b0; background: var(--ambar-fraco); color: var(--ambar); }
.ferr-alerta.grave { border-color: #f3c9cf; background: var(--vermelho-fraco); color: var(--vermelho-escuro); }
.ferr-confere { margin: 14px 0 0; padding: 14px 17px; border-radius: var(--raio); border: 1px solid var(--linha); }
.ferr-confere h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mudo);
  margin: 0 0 6px; }
.ferr-confere p { margin: 0; font-weight: 600; }
.ferr-confere.ok { border-color: #bfe3c9; background: #f2fbf4; }
.ferr-confere.ok p { color: var(--verde); }
.ferr-confere.falha { border-color: #f3c9cf; background: var(--vermelho-fraco); }
.ferr-confere.falha p { color: var(--vermelho-escuro); }
.ferr-frascos, .ferr-formula { margin-top: 30px; }
.ferr-frascos h2, .ferr-formula h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mudo); margin: 0 0 12px; }

/* ── passo 2 · referências verificadas e lacunas de evidência ──────────────────────────────── */
.ent-verificadas { border: 1px solid #bfe3c9; background: #f6fbf7; border-radius: var(--raio);
  padding: 18px 20px; margin: 0 0 18px; }
.ent-verificadas > h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--verde); margin: 0 0 6px; }
.ent-verificadas > .nota { margin: 0 0 14px; }
.ent-estudo.verificada { border-left-color: var(--verde); background: var(--superficie); }
.ent-estudo.verificada > p:first-child { margin-bottom: 2px; }
.ent-fonte-meta { color: var(--mudo); font-size: .88rem; margin: 0 0 10px !important; }
.ent-estudo.verificada .ent-pares > div { grid-template-columns: minmax(90px, 26%) 1fr; padding: 7px 0; }
.ent-lacuna { margin: 0 0 18px; align-items: flex-start; }
.ent-lacuna code { display: inline-block; margin-top: 4px; font-size: .8rem; word-break: break-all;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 5px; padding: 2px 6px; }
.ent-descricao { margin: 0 0 18px; }
.ent-descricao > p:last-child { font-size: 1.05rem; line-height: 1.65; color: var(--tinta); max-width: 72ch; margin: 0; }
.ent-descricao.propria { border-left: 3px solid var(--verde); padding-left: 16px; }
.ent-autoria { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.ent-autoria .etiqueta { border-color: #bfe3c9; background: #f2fbf4; color: var(--verde); }
.ent-autoria .nota { color: var(--mudo); font-size: .85rem; line-height: 1.5; flex: 1 1 300px; margin: 0; }
.ent-lacuna-topo { align-items: flex-start; }
.ent-lacuna-topo a { white-space: nowrap; font-weight: 600; }

/* Entrada peptídeo-primeiro e busca contextual */
.ini-peptideos-wrap, .ini-explorar { margin-top: 28px; }
.ini-peptideos-wrap > h2, .ini-explorar > h2 { margin: 0 0 6px; font-size: 1.35rem; }
.ini-peptideos-nota { margin: 0 0 18px; color: var(--mudo); }
.ini-busca { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: 18px 20px; box-shadow: var(--sombra-leve); }
.ini-busca label, .ent-busca label { display: block; margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mudo); }
.ini-busca-linha, .ent-busca-linha { display: flex; gap: 10px; align-items: center; }
.ini-busca input, .ent-busca input { min-width: 0; flex: 1; height: 46px; border: 1px solid var(--linha); border-radius: 10px; padding: 0 13px; font: inherit; color: var(--tinta); background: var(--superficie); }
.ini-busca input:focus-visible, .ent-busca input:focus-visible { outline: 3px solid var(--azul); outline-offset: 1px; }
.ini-busca .botao, .ent-busca .botao { flex: 0 0 auto; }
.ini-busca-ajuda { margin: 10px 0 0; color: var(--mudo); font-size: .9rem; line-height: 1.5; }
.ini-busca-status, .ent-busca-status { margin: 10px 0 0; color: var(--mudo); font-size: .86rem; }
.ini-peptideos { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 14px; margin-top: 18px; }
.ini-peptideo { min-width: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra-leve); transition: border-color .15s ease, transform .15s ease; }
.ini-peptideo:hover, .ini-peptideo:focus-within { border-color: var(--vermelho); transform: translateY(-2px); }
.ini-peptideo-link { display: flex; height: 100%; flex-direction: column; padding: 17px 18px 15px; color: inherit; text-decoration: none; }
.ini-peptideo-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; color: var(--mudo); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ini-peptideo-meta .revisao { color: var(--ambar); }
.ini-peptideo h3 { margin: 13px 0 4px; font-size: 1.24rem; color: var(--tinta); }
.ini-peptideo-full { margin: 0 0 10px; color: var(--mudo); font-size: .86rem; }
.ini-peptideo-summary { flex: 1; margin: 5px 0 15px; color: var(--tinta-suave); font-size: .92rem; line-height: 1.5; }
.ini-peptideo-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--linha); color: var(--vermelho); font-size: .83rem; font-weight: 700; }
.ini-peptideo-vazio { margin: 18px 0 0; padding: 16px; border: 1px dashed var(--linha); border-radius: var(--raio); color: var(--mudo); }
.ent-busca { margin: 0 0 18px; padding: 15px 17px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie-suave); }
.ent-busca-status { min-height: 1.2em; }
.ent-busca-vazio { margin: 12px 0; }
/* Secções que casam com a busca: âncoras, não conteúdo escondido. */
.ent-busca-secoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ent-busca-secoes-titulo { color: var(--mudo); font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.ent-busca-secoes a { border: 1px solid var(--linha); border-radius: 999px; padding: 5px 12px;
  background: var(--superficie); color: var(--tinta); font-size: .85rem; text-decoration: none; }
.ent-busca-secoes a:hover { border-color: var(--vermelho); color: var(--vermelho); }
.ent-busca-secoes a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

@media (max-width: 620px) {
  .ini-busca-linha, .ent-busca-linha { align-items: stretch; flex-direction: column; }
  /* ── 31/08/2026 · O CAMPO DE BUSCA VIRAVA UM FILETE NO CELULAR ─────────────────────────
     A linha passa a `flex-direction: column` aqui, e o `flex: 1` do campo — escrito para a
     tela larga, onde o eixo principal é horizontal — passa a valer no eixo VERTICAL. Com ele
     vem `flex-basis: 0`, que anula o `height: 46px`, e o campo encolhe para a altura que
     sobrar: 21 px medidos. Ficava mais baixo que o próprio texto que se digita nele.
     `flex: 0 0 auto` devolve a altura declarada, que é a mesma do botão ao lado em tela
     larga. Vale também para a busca do índice da Área, que partilha a regra. */
  .ini-busca input, .ent-busca input { flex: 0 0 auto; }
  .ini-busca .botao, .ent-busca .botao { width: 100%; }
  .ini-peptideos { grid-template-columns: 1fr; }
}

/* Revelação progressiva na Área — portada do widget do produto a 23/08.
   NÃO é fluxo do servidor: o validador de dose tem de ver a resposta inteira antes de a publicar,
   portanto o texto já está validado e é só desvendado do lado do cliente.

   PORQUE AQUI E NÃO NO `conhecimento.css`: aquela folha alimenta uma impressão fixada por 2647
   páginas do acervo, que este gerador não escreve — acrescentar-lhe uma regra criava uma terceira
   cópia de 22 KB que essas páginas nunca apanhariam. Esta folha é do gerador e só as páginas que
   ele escreve a carregam, que são exactamente as três onde a revelação corre.

   O cursor fica na BOLHA e não na palavra em curso: posto na palavra, o `::after` ocuparia meia
   letra no meio de texto já composto e empurrava a cada passo tudo o que vem depois. */
.ia-revelando::after {
  content: ""; display: inline-block; vertical-align: -.14em;
  width: .5em; height: 1.05em; margin-left: 3px;
  background: var(--vermelho, currentColor); border-radius: 1px;
  animation: ia-cursor 1s steps(1, end) infinite;
}
@keyframes ia-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Movimento reduzido não é uma versão lenta da animação: é a ausência dela. O comportamento nem
   chega a partir o texto em palavras; isto apaga o cursor para quem lá chegue por outra via. */
@media (prefers-reduced-motion: reduce) {
  .ia-revelando::after { display: none; animation: none; }
}

/* Os chips de continuação dentro de uma bolha reutilizam a `.ia-chips`/.ia-sugestao` que a página
   já tem — só o respiro em relação ao texto da resposta é novo, e fica aqui escopado à bolha para
   não mexer nos chips do assistente, que vivem fora da conversa. */
.ia-bolha .ia-chips { margin-top: 10px; }

/* O texto da espera longa no indicador de pensamento: aparece aos 12 s com as mesmas palavras que
   o leitor de tela ouve nos mesmos marcos. Vazio, não ocupa lugar — os três pontos bastam até o
   tempo começar a pesar. */
.ia-pensando-texto { font-style: normal; font-size: .8rem; color: var(--mudo); margin-left: 8px; }
.ia-pensando-texto:empty { display: none; }

/* O aviso de resposta fora da vista — o par do salto condicionado: quem rolou para cima a reler
   estava a ler, e a chegada da resposta informa sem arrastar. Some ao clicar ou quando a pessoa
   chega ao fim por si. */
.ia-nova-abaixo {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 30; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--vermelho); border-radius: 999px;
  color: #fff; background: var(--vermelho);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.ia-nova-abaixo:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }


/* Piso do toque (44px) nos controlos desta área. Nenhum deles REPROVA a WCAG 2.5.8 — o
   espaçamento entre eles dispensa-os —, mas medidos no celular davam 38px nos filtros de
   categoria (que já declaram `min-height: 38px`, um valor escolhido antes de haver sistema),
   21px no campo de busca e 43px nos chips de dose. Quarenta e três: um pixel abaixo do piso que
   o próprio sistema fixa, e ninguém repararia sem medir. Só em `pointer: coarse` — no desktop,
   onde o mouse aponta, nada muda. */
@media (pointer: coarse) {
  .ini-filtro { min-height: var(--ep-toque, 44px); }
  .ini-busca-linha input { min-height: var(--ep-toque, 44px); }
  .ia-sugestao { min-height: var(--ep-toque, 44px); }
}

/* ── D-SC-06 · duas colunas a partir do desktop ──────────────────────────────────────────────
   Decisão do dono (opção A): «os números de um lado, a explicação e a linha do tempo do outro;
   no celular continua empilhado». O defeito, nas palavras dele: «é preciso descer bastante a
   tela enquanto o lado direito fica praticamente por usar em parte do resultado».
   Medido a 1440px antes: página de 1 784px — duas telas — com o bloco da fórmula a ocupar
   300px à esquerda e cerca de 600px vazios à direita.
   O contentor era de 880px dentro de 1440: o espaço à direita que o dono viu estava, em parte,
   na própria largura da casca. Ela cresce só onde há duas colunas. */
.ferr-duas { display: grid; gap: 22px; }
@media (min-width: 1100px) {
  .ferr-casca { max-width: 1180px; }
  .ferr-duas { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px; align-items: start; }
  /* Quatro números em 2×2 na coluna esquerda: em fila única a esta largura ficariam com
     160px cada e o número perdia o tamanho que o torna legível de relance. */
  .ferr-duas .ferr-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* O primeiro bloco de cada coluna alinha pelo topo: sem isto a margem de 30px do
     `.ferr-frascos` empurrava a coluna direita para baixo dos números. */
  .ferr-duas .ferr-explicacao > :first-child { margin-top: 0; }
}