/* aquacalc — estilos compartilhados (guias, calculadoras, hubs e páginas legais).
   Regras específicas de cada página permanecem nela e prevalecem pela cascata. */
:root{--petrol:#14557f;--petrol-esc:#0b2b45;--petrol-claro:#1e9e94;--verde:#1e9e94;--verde-esc:#157a72;--coral:#e85d3a;--coral-esc:#cf4a28;--coral-btn:#cf4a28;--cinza:#9ba1a6;--texto:#22343e;--agua:#eef7f8;--agua2:#f6fbfb;--sombra:0 12px 34px rgba(11,43,69,.12);}
*{box-sizing:border-box;margin:0;padding:0;}
/* .marca (wordmark) vive no tokens.css desde 12/08 — fonte unica da marca; nao redefinir aqui. */
body{font-family:'Bricolage Grotesque',system-ui,sans-serif;color:var(--texto);line-height:1.6;background:#fff;}
a{text-decoration:none;color:inherit;}
.container{max-width:860px;margin:0 auto;padding:0 24px;}
.btn{display:inline-block;padding:10px 22px;border-radius:12px;font-weight:700;font-size:14.5px;background:var(--coral-btn);color:#fff;box-shadow:0 8px 20px rgba(232,93,58,.28);}
.btn:hover{background:#b8401f;}
h1,h2{font-family:'Bricolage Grotesque',system-ui,sans-serif;}
h1{letter-spacing:-.4px;}
.migalha{font-size:13px;color:#6b7378;padding:18px 0 0;}
.migalha a{color:var(--petrol);}
.intro{color:#4c565c;font-size:16px;margin-bottom:20px;}
article{font-size:15px;color:#4c565c;}
article h2{font-size:22px;color:var(--petrol-esc);margin:36px 0 12px;}
article p{margin-bottom:12px;}
details{border:1px solid #e6ecee;border-radius:10px;padding:14px 18px;margin-bottom:10px;}
summary{font-weight:600;color:var(--petrol-esc);cursor:pointer;font-size:15px;}
details p{margin-top:8px;font-size:14.5px;}
.relacionadas{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0;}
.relacionadas a{background:var(--agua);color:var(--petrol);font-weight:600;font-size:13.5px;padding:8px 16px;border-radius:20px;}
@media(max-width:640px){h1{font-size:24px;}}
.meta{font-size:13px;color:#6b7378;margin-bottom:16px;}
.guia-capa{width:100%;height:auto;border-radius:16px;display:block;margin:4px 0 22px;}
.resumo{background:var(--agua2);border:1px solid #e0eaee;border-radius:14px;padding:20px 24px;margin-bottom:32px;}
.resumo>b{color:var(--petrol-esc);display:block;margin-bottom:6px;font-size:13.5px;text-transform:uppercase;letter-spacing:.5px;}
.resumo p b{color:var(--petrol-esc);}
.resumo p{font-size:14.5px;color:#4c565c;}
.erro{background:#fdf1ef;border:1px solid #f3c9c2;color:#7a2e22;padding:14px 18px;border-radius:10px;margin:16px 0;font-size:14.5px;}
/* MESMA correção feita no .resumo em 01/08, que não chegou aqui: o seletor era
   DESCENDENTE, então qualquer <b> no meio do texto virava rótulo em MAIÚSCULAS
   e quebrava a frase em blocos. O rótulo é sempre o primeiro filho (conferido nas
   88 caixas .erro do site); os demais <b> são ênfase inline. */
.erro>b:first-child{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.erro b{font-weight:700;color:inherit;}
.ferramenta{background:var(--agua);border:1px solid #c9e2ea;border-radius:12px;padding:16px 20px;margin:20px 0;font-size:14.5px;}
.ferramenta a{color:var(--petrol);font-weight:700;}
.ficha{width:100%;border-collapse:collapse;margin:12px 0 8px;}
.ficha th,.ficha td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid #e6ecee;line-height:1.55;font-size:14.5px;}
.ficha th{width:42%;color:var(--texto);font-weight:600;}
.ficha td{color:#4c565c;}
.ficha td b{color:var(--petrol-esc);}
/* diagnóstico em cartões (sintoma → tipo → causa) */
.diag{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 10px;}
.diag-item{border:1px solid #e0eaee;border-left:4px solid var(--petrol-claro);border-radius:12px;padding:15px 17px;background:var(--agua2);}
.diag-ver{font-size:14.5px;color:var(--petrol-esc);font-weight:600;line-height:1.45;margin-bottom:9px;}
.diag-diag{font-size:13.5px;color:#5b6469;line-height:1.5;border-top:1px solid #e6ecee;padding-top:9px;}
.diag-diag b{color:var(--petrol);font-weight:700;}
@media(max-width:760px){.diag{grid-template-columns:1fr;}}



/* Prévia estática da caixa de indicação (12/08): o conteúdo da caixa é montado por JS a
   partir do catálogo, então crawler e LLM sem execução de script viam uma div vazia — ~60
   páginas com o melhor conteúdo invisível. O <p class="ind-previa"> carrega a nota
   editorial da caixa e é substituído pelo JS quando ele roda. */
.indicacao-produto .ind-previa{font-size:14px;line-height:1.55;color:#4c565c;margin:0;}
.indicacao-produto .ind-previa a{color:#14557f;font-weight:600;}

/* ---- Campos de calculadora: componente único (12/08) ----
   18 páginas repetiam o mesmo bloco de .campo no <style> local e três não tinham nenhum —
   lotação, montar-kit e custo de energia mostravam input cru do navegador, sem caixa, sem
   rótulo estilizado. Aqui fica a definição canônica; quem já declara localmente sobrescreve
   com os mesmos valores, então nada muda nessas. O estado de foco não existia em lugar
   nenhum: campo numérico sem foco visível é problema de acessibilidade, não de gosto. */
.calc .linha{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;}
.campo{display:flex;flex-direction:column;gap:5px;}
.campo label{font-size:12.5px;font-weight:600;color:#5b6469;}
.campo input,.campo select{padding:11px 12px;border:1px solid #d5e0e5;border-radius:10px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--petrol-esc,#0b2b45);min-width:150px;}
.campo input:focus,.campo select:focus,.calc input:focus,.calc select:focus{
  outline:none;border-color:var(--petrol-claro,#1e9e94);box-shadow:0 0 0 3px rgba(30,158,148,.18);}
.campo input::placeholder{color:#9aa9b0;}
@media(max-width:640px){.campo{width:100%;}.campo input,.campo select{width:100%;min-width:0;}}

/* ---- Cartão de resultado da calculadora: a OUTRA metade do mesmo componente (03/09) ----
   O bloco de `.campo` acima nasceu em 12/08 porque 18 páginas repetiam o CSS local e três não
   tinham nenhum. A metade de baixo — o cartão petróleo onde o número aparece — ficou de fora, e
   repetiu a história inteira: 27 páginas copiam `.resultado{…}` no <style> local e OITO usam as
   classes sem que folha nenhuma as defina. Não é hipótese: medido com `getComputedStyle` no
   navegador em 03/09, o cartão dessas páginas vem `background: rgba(0,0,0,0)`, `padding: 0px`,
   `border-radius: 0px` — número solto no branco, no lugar do cartão.

       calculadora-custo-por-dkh · calculadora-evaporacao-ato · calculadora-fluxo-reef
       calculadora-salinidade-correcao · calculadora-volume-real-marinho   (o bloco inteiro)
       calculadora-lotacao-aquario · montar-kit-aquario (só `.calc`) · manual-lojista (só `.nota`)

   As cinco primeiras usam até `class="resultados"` e `class="resultado claro"` — que existiam numa
   página só. Nasceram de uma cópia que perdeu o <style> e ninguém viu, porque as outras 27 cópias
   faziam a página parecer normal por toda parte menos ali. É a mesma doença do `[hidden]` do
   §2aj, com outro nome: cópia por página é o defeito, não o conserto.

   Os valores abaixo são os MAJORITÁRIOS medidos, não escolhidos: `.calc` 26 de 30 iguais,
   `.resultado` 24 de 27, `.resultado b` 24 de 30, `.detalhe` 25 de 25, `.nota` 20 de 24.
   `.resultados` e `.resultado.claro` vinham da única página que os definia. Quem já declara local
   continua sobrescrevendo com os mesmos bytes — nada muda nas 27; muda nas 8.
   Guarda: `componente-do-resultado.test.js`. */
.calc{background:var(--agua2);border:1px solid #e0eaee;border-radius:18px;padding:28px;
  box-shadow:var(--sombra);margin-bottom:36px;}
.resultados{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
/* duas colunas a 414px espremem o número que a página existe para mostrar; quem já declarava
   `.resultados` local continua com o que declarou (o <style> da página vem depois desta folha). */
@media(max-width:640px){.resultados{grid-template-columns:1fr;}}
.resultado{background:var(--petrol);color:#fff;border-radius:14px;padding:20px 24px;margin-top:8px;}
/* 07/09 — O CARTÃO CLARO PASSOU PARA O --verde-esc, e o motivo é o texto pequeno.
   A passada de contraste de 02/09 (A11) arrumou os BOTÕES e não olhou este cartão, porque
   ele não é botão. Medido agora: branco sobre --petrol-claro (#1e9e94) dá 3,29 — o número
   grande (26px, bold) passa, porque texto grande exige 3,0; mas o `.detalhe` tem 13,5px e
   `opacity:.9`, e a opacidade EMPURRA PARA BAIXO: o efetivo é 2,95 contra os 4,5 exigidos.
   Opacidade em texto claro sobre fundo colorido não é enfeite, é perda de contraste — e é
   por isso que uma auditoria que olha só a cor declarada não vê este caso.
   O conserto não inventa cor: --verde-esc já existe nesta casa (#157a72) e dá 5,17 no branco
   e 4,53 no detalhe. A identidade não muda; o cartão fica um tom mais fundo. */
.resultado.claro{background:var(--verde-esc);}
.resultado b{font-size:26px;display:block;}
.resultado .detalhe{font-size:13.5px;opacity:.9;margin-top:6px;}
.nota{background:var(--agua);border:1px solid #c9e2ea;color:var(--petrol-esc);padding:10px 14px;
  border-radius:8px;font-size:13.5px;margin-top:12px;}

/* O VEREDITO da calculadora — o bloco que diz o que FAZER com o número, dentro do cartão de
   resultado (03/09). Nasceu na aclimatação por gotejamento e a segunda página apareceu no mesmo
   dia; duas ocorrências é onde a casa se decide, não a terceira. As cores saem dos tokens de
   severidade; o `.conselho b` existe porque `.resultado b` é 26px em bloco e o título do veredito
   é uma frase, não um número. */
.conselho{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.55;
  background:var(--sev-ok-fundo);border:1px solid var(--sev-ok-borda);color:var(--sev-ok-tinta);}
.conselho b{font-size:inherit;display:inline;}
.conselho.atencao{background:var(--sev-atencao-fundo);border-color:var(--sev-atencao-borda);color:var(--sev-atencao-tinta);}
.conselho.critico{background:var(--sev-critico-fundo);border-color:var(--sev-critico-borda);color:var(--sev-critico-tinta);}

/* Atalhos de ambiente (chips). Nasceram no hub de guias em 13/08 e viraram regra do
   estilo.css em 14/08, quando /peixes e /marinho passaram a apontar um para o outro:
   três páginas com o mesmo componente é onde duplicar CSS começa a divergir. */
.atalhos{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;}
.atalho{display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border:1px solid #d8e2e6;border-radius:20px;background:#fff;color:var(--petrol-esc);font-size:14px;font-weight:600;text-decoration:none;transition:.15s;}
.atalho:hover{border-color:var(--petrol-claro);background:var(--agua2);}
.atalho i{font-style:normal;font-size:12px;color:#6d777c;font-family:'JetBrains Mono',monospace;}
.atalho.ativo{background:var(--petrol-esc);border-color:var(--petrol-esc);color:#fff;}
.atalho.ativo i{color:#9fc3d4;}

/* Busca global na nav (14/08): a regra mudou de casa em 04/09 — mora no tokens.css, porque a
   home e o Pulso não carregam esta folha e saíam com o campo cru (a mesma lição do CTA). */

/* ── Contraste (14/08) ────────────────────────────────────────────────────────
   Auditoria de contraste rodada no ar, em três tipos de página. O coral da marca
   (#e85d3a) com texto branco dá 3,47:1 — abaixo do mínimo de 4,5:1 da WCAG AA para
   texto normal. A escolha aqui foi cirúrgica: o coral CONTINUA sendo a cor da marca em
   destaque e detalhe; só o fundo do BOTÃO passou para #cf4a28, que dá exatamente 4,5:1
   com branco. Mudar o token inteiro deslocaria a identidade por causa de um componente.

   O texto de apoio cinza (#70767b, 3,16:1) e o selo de dificuldade fácil também subiram.

   O que NÃO foi mexido, e por quê: o "calc" do logotipo, em verde sobre branco a 17px,
   fica em ~3:1 — a WCAG isenta logotipo justamente porque a marca é a marca. Fica
   registrado como decisão, não como item esquecido. */
.nota, .nota p, p.nota, .detalhe, .ind-previa, .fonte-ficha { color:#6b7378; }
.badge.dif-facil { color:#2a6e2c; }

/* Pular para o conteúdo (14/08). Quem navega por teclado ou leitor de tela atravessava os
   10 itens da nav em CADA uma das 600 páginas antes de chegar ao texto. O link fica fora da
   tela até receber foco — não muda nada para quem usa mouse, e economiza dez tabulações por
   página para quem não usa. */

/* TABELA LARGA NÃO ARRASTA A PÁGINA (22/08, revisão de fim de semana).
   No celular, tabela mais larga que a tela fazia a PÁGINA inteira deslizar para o lado: o
   texto saía do lugar e a última coluna ficava cortada pela metade. Medido em 8 páginas —
   a pior era a de suplementação reef, que perdia inteira a coluna do risco de cada método,
   justamente o que a pessoa foi ler. Conteúdo técnico se lê no celular, na frente do
   aquário; era ali que quebrava.
   Agora a tabela rola dentro da PRÓPRIA caixa. Só no celular: no desktop ela cabe, e
   tabela que cabe continua sendo tabela. */
@media (max-width: 720px) {
  main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* Onde comprar perto de você — o destaque do diretório nas quatro portas (aplicar-onde-comprar.py, 01/09).
   Mesma resposta do bloco da home, uma casa de estilo: mexer na cor aqui mexe nas quatro. */
.onde-comprar{background:linear-gradient(160deg,var(--petrol-esc) 0%,var(--petrol) 100%);color:#fff;border-radius:20px;padding:36px 32px;margin:40px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.onde-comprar h2{font-size:24px;font-weight:800;letter-spacing:-.3px;margin:0 0 6px;color:#fff;}
.onde-comprar p{opacity:.9;font-size:15.5px;max-width:520px;margin:0;color:#fff;}
.onde-comprar .btn{white-space:nowrap;}

/* DIAGRAMA DE COMPOSIÇÃO (05/09) — as três formas de layout do guia-iwagumi, desenhadas em SVG
   em vez de fotografadas: o que se quer mostrar é a DISTRIBUIÇÃO DA MASSA, e foto de aquário
   real mostra plantas, luz e peixe junto, que é ruído para essa pergunta. O `width:100%` com
   `height:auto` é o que faz o desenho encolher no celular em vez de empurrar a página para o
   lado — a varredura de estouro reprovaria o contrário. */
.fig-comp{margin:18px 0;}
.fig-comp svg{display:block;width:100%;height:auto;border:0;border-radius:8px;}
.fig-comp figcaption{font-size:13.5px;color:#5b6b73;margin-top:7px;line-height:1.55;}