/* Viralatinha: a camada "a casa que recebe" para as classes que vivem no vl.css (18/09/2026)

   Carregada por último. Só reescreve superfície, moldura, raio e tipografia das peças do vl.css,
   sem mexer em comportamento nem em seletor que o site.js e o vl.js usam. Existe como arquivo
   separado porque o vl.css estava em edição por outra sessão no mesmo dia; quando ele estiver
   livre, isto deve ser fundido lá e este arquivo apagado.

   Princípio: cartão sem moldura. A borda de 1px vira transparente (o layout não se mexe), o
   raio sobe e a passagem do mouse aquece o fundo em vez de levantar sombra. */

/* ---------- superfícies sem moldura ---------- */
.ficha-bloco, .lado-caixa, .card-ferramenta, .card-especie, .serv-card, .serv-uf, .checklist-grupo,
.salvo, .vizinho, .caso, .criterio, .doar-card, .estudo, .planta, .castra-card, .calc, .cc-passo,
.caixa-metodo, .dado-caixa, .tempo, .lista-pauta li, .pin, .roteiro-itens li, .orientacao,
.lista-vazia, .historia-vazia, .aviso-vazio, .caixa-destaque, .proximo-passo, .cc-saida,
.bloco-secundario, .escada .degrau, .ficha-canal, .busca-global-botao, .salvar, .compartilhar,
.selo-req, .links-org a, .escada .degrau--atual { border-color: transparent; }
.card-ferramenta:hover, .card-especie:hover, .pin:hover { transform: translateY(-2px); box-shadow: none; background: var(--sol); }
.card-ferramenta:hover, .card-especie:hover { border-color: transparent; }
.estudo:hover { border-color: transparent; background: var(--sol); }
.ficha-bloco--aviso, .proximo-passo, .caixa-destaque, .calc-aviso, .lacunas, .bloco-envio { background: var(--sol); }
.ficha-bloco--fontes, .nao-informado { background: var(--areia); }
.lado-caixa--aviso { background: var(--azul-claro); }
.lista-vazia, .historia-vazia, .aviso-vazio, .bloco-secundario { background: var(--areia); border-style: solid; }
.busca-global-botao { background: var(--papel); }
.busca-global-botao:hover { background: var(--sol); color: var(--tinta); }
.salvar, .compartilhar { background: var(--papel); }
.salvar:hover, .compartilhar:hover { background: var(--sol); color: var(--tinta); }
.selo-req { background: var(--creme); }
.selo-req--bom { background: var(--teal-claro); }
.selo-req--aviso { background: var(--ambar-claro); }

/* ---------- títulos das peças em Fraunces macia ---------- */
.card-ferramenta :is(h2, h3), .card-especie-nome, .serv-card h3, .salvo h3, .vizinho h3,
.doar-card :is(h2, h3), .criterio h3, .tempo h3, .castra-card h3, .planta h3,
.checklist-grupo h2, .lado-caixa > strong, .ajuda-item h3 {
  font-family: var(--fonte-titulo); font-variation-settings: "SOFT" 100, "WONK" 0;
  font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
}
.card-ferramenta :is(h2, h3), .serv-card h3, .salvo h3, .vizinho h3, .doar-card :is(h2, h3),
.criterio h3, .castra-card h3, .planta h3 { font-size: 1.3rem; }
.card-especie-nome, .checklist-grupo h2 { font-size: 1.5rem; }
.lado-caixa > strong { font-size: 1.15rem; }
.card-ferramenta p, .card-especie-desc, .serv-onde, .serv-linha, .vizinho p, .criterio p, .tempo p { font-size: 1rem; }

/* ---------- ferramentas: o ícone numa pastilha de sol ---------- */
.card-ferramenta { gap: .6rem; padding: var(--pad-caixa-g); }
.card-ferramenta .ic { width: 52px; height: 52px; border-radius: 18px; background: var(--sol); color: var(--caramelo-escuro); margin-bottom: .4rem; }
.card-ferramenta .ic svg { width: 26px; height: 26px; }
.card-ferramenta:hover .ic { background: var(--papel); }

/* ---------- blog: as espécies com o pictograma dos três ----------
   O cartão de cães leva a Belinha; o de gatos leva o Zen e o Kai juntos, sempre lado a lado.
   Vai por CSS (e não pelo gerador) porque o vl_secoes.py estava fora do meu combinado de edição. */
.grade-especies .card-especie { padding: var(--pad-caixa-g); }
.grade-especies .card-especie::before {
  content: ""; display: block; height: 96px; width: 96px; margin-bottom: .8rem;
  background: no-repeat left center / contain;
}
.grade-especies .card-especie[href="/blog/caes/"]::before { background-image: url("/assets/img/picto-belinha.svg"); }
.grade-especies .card-especie[href="/blog/gatos/"]::before { background-image: url("/assets/img/picto-gatos.svg"); width: 172px; }
.grade-especies--compacta .card-especie::before { display: none; }
.card-especie .tag { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--caramelo-escuro); }

/* ---------- texto de apoio sobre a faixa de areia da capa ----------
   --tinta-3 dá 4,04:1 sobre areia e reprova; dentro de .topo tudo que era tinta-3 vira tinta-2,
   e o teal do selo de atividade vira o teal-texto, mais escuro. */
.topo .ficha-onde, .topo .atalhos span, .topo .escada .degrau b, .topo .ordem-nota,
.topo .artigo-meta, .topo .ficha-nota { color: var(--tinta-2); }
.topo .ficha-frescor { color: var(--teal-texto); }
.topo .escada .degrau { background: var(--papel); color: var(--tinta-2); }
.topo .escada .degrau--atual { background: var(--tinta); color: #fff; }
.topo .escada .degrau--atual b { color: rgba(255, 255, 255, .8); }
.topo .escada .degrau + .degrau::before { color: var(--tinta-2); }
.topo .orientacao { background: var(--papel); }
.topo .chip { background: var(--papel); }
.topo .chip:hover { background: var(--sol); }
.topo .tipo { margin-bottom: .6rem; display: inline-block; }

/* ---------- ficha: blocos alternando papel e areia ---------- */
.ficha-bloco { border-radius: var(--raio); }
.ficha-bloco h2 { font-size: 1.5rem; }
.lado-caixa { border-radius: var(--raio); padding: var(--pad-caixa); }
.ficha-canal { background: var(--creme); border-radius: var(--raio-p); }
a.ficha-canal:hover { background: var(--sol); border-color: transparent; }
.ajuda-item { background: var(--creme); }
.vizinho { padding: var(--pad-caixa); }

/* ---------- diretório: filtros e listas ---------- */
.filtros-mais > summary b { background: var(--sol); }
.pilula { background: var(--tinta); }
.limpar-filtros:hover { background: var(--sol); }
details.grupo-uf { border-bottom-color: var(--linha); }
details.grupo-uf > summary h2 { font-size: 1.5rem; }

/* ---------- serviços, plantas, estudos, dados ---------- */
.serv-uf h3 { font-family: var(--fonte-texto); font-size: .9rem; color: var(--tinta-3); }
.dado-caixa strong { font-family: var(--fonte-titulo); font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 2.25rem; color: var(--azul-texto); }
.planta { border-left-width: 6px; }
.planta--irritacao { border-left-color: var(--areia-2); }
.barra-uf .trilho, .barra { background: var(--areia); }
.estudo-ano { font-variation-settings: "SOFT" 100, "WONK" 0; }
.checklist-itens input { accent-color: var(--caramelo-escuro); }
.cc-opcao { background: var(--creme); }
.cc-opcao:hover { background: var(--sol); border-color: transparent; }

/* ---------- galeria ---------- */
.pin-capa { background: var(--areia); }
.pin-capa span { color: var(--caramelo-escuro); }

/* ---------- roteiro e mensagem ---------- */
.roteiro-itens li { background: var(--papel); }
.roteiro-itens li::before { background: var(--sol); }
.mensagem { background: var(--creme); }

/* ---------- respiro entre a capa e o conteúdo, onde o vl.css põe o wrap direto ---------- */
.topo + .wrap { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* ---------- contraste em fundo sol e areia ----------
   --tinta-3 dá 4,23:1 sobre sol e 4,04:1 sobre areia. Onde a superfície é uma dessas, o texto de
   apoio sobe para --tinta-2 (6,07:1 e 5,7:1), inclusive nos estados de passagem. */
.estudo:hover .estudo-meta, .pin:hover .pin-rede, .pin:hover .pin-local,
.ficha-bloco--aviso .ficha-nota, .ficha-bloco--aviso summary, .ficha-bloco--aviso .req-linha dt,
.ficha-bloco--fontes .ficha-nota, .ficha-bloco--fontes .ficha-evidencia, .ficha-bloco--fontes summary,
.proximo-passo .ficha-nota, .caixa-destaque .ficha-nota, .bloco-secundario .tag,
.lista-vazia small, .historia-vazia small, .aviso-vazio small, .aviso-vazio p,
.lacunas p, .lacunas li, .calc-aviso small { color: var(--tinta-2); }

/* ---------- o azul do Kai nas peças de dado ---------- */
.dado-caixa { background: var(--ceu-papel); }
.painel-dados .dado-caixa strong { color: var(--azul-texto); }
.barra-uf .trilho span { background: var(--azul); }
.lado-caixa--aviso { background: var(--ceu-papel); }
.lado-caixa--aviso p { color: var(--tinta-2); }
.serv-uf { background: var(--ceu-papel); }
/* Medido em pixel nas 27 caixas de /servicos/: com a caixa em --ceu-papel, a contagem e o nome da
   cidade sem página herdavam --tinta-3 e caíam para 4,32:1. Sobem para --tinta-2 (6,20:1). */
.serv-uf h3, .serv-uf .serv-cidades li span, .serv-uf .serv-cidades b { color: var(--tinta-2); }