/* TÁ EXPLICADO — acervo de respostas.

   A paleta saiu do preto puro para um azul-noite profundo: preto liso
   lê como página vazia, o azul dá profundidade e passa a impressão de
   instrumento, não de blog. O amarelo da marca continua sendo o único
   acento forte; o verde entra só onde há fonte oficial verificada. */
:root{
  --fundo:#0A0E17;
  --superficie:#121826;
  --superficie-2:#171F30;
  --elevado:#1D2739;
  --amarelo:#FFD60A;
  --verde:#3DDC97;
  --texto:#F2F4F8;
  --texto-2:#A9B2C4;
  --texto-3:#78849B;
  --borda:rgba(255,255,255,.08);
  --borda-forte:rgba(255,255,255,.16);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* ── Escala de texto ─────────────────────────────────────────
     Eram 51 tamanhos escritos na mão, em 20 valores. Agora são 17 degraus
     nomeados aqui: mexer no "texto auxiliar" deixou de ser caça ao valor
     em seis lugares do arquivo.

     A vontade era reduzir para ~8 degraus. NÃO DÁ, e isso está medido, não
     suposto: testei cada fusão de valores vizinhos comparando a geometria
     de TODOS os elementos e o pixel de 3 páginas em 2 telas. Resultado:

        18.5 -> 18     desvio 0px, pixel idêntico   -> feita
        14.5 -> 14     desvio 9px, encolhe o menu   -> recusada
        20   -> 21     +1px e +2px de altura        -> recusada
        15.5 -> 15     desloca 63px                 -> recusada
        17   -> 16.5   desloca 103px                -> recusada

     Meio pixel de diferença muda onde o texto quebra a linha, e uma linha
     a mais na "resposta direta" aparece em 200 páginas. Se um dia valer a
     pena pagar esse preço, é decisão de dono, não de arrumação de CSS.

     Para mudar um tamanho: mude aqui e rode `python testar.py`. */
  --t-1:11px;      /* rótulo mono em caixa alta: tema do card, "resposta direta" */
  --t-2:11.5px;    /* selo do tema, rodapé do card, tema na sugestão */
  --t-3:12px;      /* rótulo "fonte oficial" */
  --t-4:12.5px;    /* ficha da resposta, contadores, base do rodapé */
  --t-5:13px;      /* trilha, dica da busca, numeração dos passos */
  --t-6:13.5px;    /* texto auxiliar: descrição de tema, texto da fonte */
  --t-7:14px;      /* resumo do card, botão de voltar */
  --t-8:14.5px;    /* menu do cabeçalho, botão de filtro */
  --t-9:15px;      /* sugestão da busca, título do card de tema */
  --t-10:15.5px;   /* pergunta do FAQ, caixa de destaque */
  --t-11:16px;     /* menu aberto no celular */
  --t-12:16.5px;   /* título do card de resposta */
  --t-13:17px;     /* corpo do texto */
  --t-14:18px;     /* resposta direta, subtítulo do artigo */
  --t-15:20px;     /* sinal de + do FAQ, título de "outras respostas" */
  --t-16:21px;     /* título de seção */
  --t-17:26px;     /* o número grande do card de tema */
  --largura:1120px;
  /* uma cor por tema — frias e vizinhas, para orientar sem poluir */
  --cat-dinheiro:#7CE38B;
  --cat-documentos:#8B93F2;
  --cat-tecnologia:#FFC93C;
  --cat-seguranca:#B084F0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--fundo);color:var(--texto);font-family:var(--sans);
  font-size:var(--t-13);line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--largura);margin:0 auto;padding:0 20px}
:focus-visible{outline:2px solid var(--amarelo);outline-offset:3px;border-radius:4px}


/* ── Ambiente do fundo ──────────────────────────────────────
   Sem foto: uma grade fina de linhas, como papel milimetrado de
   projeto, mais dois focos de luz nas laterais. Dá profundidade e
   ocupa o espaço em volta do conteúdo sem competir com o texto —
   e, por ser CSS, não pesa nada no carregamento. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 50% 22%, #000 12%, transparent 68%);
  -webkit-mask-image:radial-gradient(circle at 50% 22%, #000 12%, transparent 68%);
}
/* Os três focos de luz saem das cores que o site já tem: as dos temas
   Dinheiro e Segurança nas laterais, o amarelo da marca no meio. Antes
   estavam escritos na mão — trocar a cor de um tema no :root deixava o
   brilho com a cor velha.

   Sobre a ponta "transparent": corre por aí a regra de que um degradê até
   transparent pinta uma faixa cinza, porque transparent é preto com alfa 0.
   MEDIDO aqui em 02/09/2026, no navegador de verdade: nos motores atuais o
   pixel é IDÊNTICO ao de terminar na própria cor com alfa 0 — diferença 0
   em todos os pontos, porque a interpolação é em alfa pré-multiplicado.
   Então transparent fica, e é até melhor: não amarra cor nenhuma. Aquela
   regra só valia em navegador antigo. */
body::after{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(520px 420px at 8% 12%, color-mix(in srgb,var(--cat-dinheiro) 10%,transparent), transparent 62%),
    radial-gradient(560px 460px at 94% 26%, color-mix(in srgb,var(--cat-seguranca) 9%,transparent), transparent 64%),
    radial-gradient(700px 380px at 50% 0%, color-mix(in srgb,var(--amarelo) 7%,transparent), transparent 70%);
}

/* Arte do topo. A imagem tem o miolo escuro de propósito: as malhas
   ficam nas bordas e o texto passa por cima sem perder contraste.
   A máscara dissolve a base dela no fundo do site, para não ficar a
   linha reta de um banner colado. */
.hero-arte{position:absolute;left:0;right:0;top:-64px;height:600px;
  z-index:-1;pointer-events:none;opacity:.9;
  background:url(imagens/hero.webp) center top/cover no-repeat;
  mask-image:linear-gradient(#000 52%,rgba(0,0,0,.35) 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(#000 52%,rgba(0,0,0,.35) 78%,transparent 100%)}
@media(max-width:980px){
  /* no retrato, o corte central da panorâmica esconderia justamente as
     malhas; então ela entra deitada na largura toda, como uma faixa */
  .hero-arte{top:-64px;height:290px;opacity:1;
    background-image:url(imagens/hero-m.webp);
    background-size:100% auto;background-position:center top;
    mask-image:linear-gradient(#000 46%,rgba(0,0,0,.3) 76%,transparent 100%);
    -webkit-mask-image:linear-gradient(#000 46%,rgba(0,0,0,.3) 76%,transparent 100%)}
}

/* ── Barra de filtros que gruda no topo ────────────────────
   Ela mora dentro da lista de respostas e cola logo abaixo do
   cabeçalho quando a pessoa desce. Assim dá para trocar de tema
   sem voltar aos cards lá de cima. Rola na horizontal no celular,
   onde os cinco botões não cabem lado a lado. */
.filtro-barra{position:sticky;top:63px;z-index:50;
  background:color-mix(in srgb,var(--fundo) 92%,transparent);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--borda);margin-bottom:22px}
.filtro-barra-in{display:flex;gap:8px;padding:11px 0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filtro-barra-in::-webkit-scrollbar{display:none}
.filtro-barra button{flex:none;white-space:nowrap;min-height:40px;
  padding:0 16px;border-radius:999px;font-size:var(--t-7);
  background:var(--superficie);border:1px solid var(--borda);color:var(--texto-2);
  transition:border-color .18s,color .18s,background .18s}
.filtro-barra button:hover{border-color:var(--borda-forte);color:var(--texto)}
.filtro-barra button[aria-pressed="true"]{color:var(--texto);
  border-color:var(--cor-tema,var(--amarelo));
  background:color-mix(in srgb,var(--cor-tema,var(--amarelo)) 15%,transparent)}
@media(max-width:820px){
  .filtro-barra button{min-height:42px;font-size:var(--t-8)}
}

/* ── Cabeçalho ─────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--fundo) 86%,transparent);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--borda)}
.header-in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.logo{display:block;line-height:0}
.logo svg{height:32px;width:auto;display:block}
nav.menu{display:flex;gap:24px;font-size:var(--t-8);color:var(--texto-2)}
nav.menu a:hover{color:var(--texto)}
.menu-btn{display:none;font-size:23px;padding:4px 8px}
@media(max-width:820px){
  nav.menu{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--superficie);border-bottom:1px solid var(--borda);padding:6px 20px 16px}
  nav.menu.aberto{display:flex}
  nav.menu a{padding:13px 0;border-bottom:1px solid var(--borda);font-size:var(--t-11)}
  .menu-btn{display:block}
}

/* ── Busca: o centro do site ───────────────────────────────── */
.hero{padding:74px 0 46px;text-align:center;position:relative}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* o amarelo vem do :root, como no body::after */
  background:radial-gradient(680px 340px at 50% -6%,color-mix(in srgb,var(--amarelo) 6%,transparent),transparent 72%)}
/* Caixa alta no título. O text-transform muda só o desenho: o HTML
   continua com a frase escrita normalmente, que é o que o Google lê.
   Em maiúsculas as letras se encostam, então o espaçamento negativo
   sai e entra um positivo pequeno. */
.hero h1{font-size:clamp(27px,4.9vw,47px);font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;
  line-height:1.1;max-width:19ch;margin:0 auto;text-wrap:balance}
.hero .sub{margin:18px auto 0;max-width:52ch;color:var(--texto-2);font-size:clamp(15px,2vw,18px)}

.busca{position:relative;max-width:660px;margin:34px auto 0;text-align:left}
.busca-campo{display:flex;align-items:center;gap:13px;height:62px;padding:0 22px;
  border-radius:16px;background:var(--superficie);border:1px solid var(--borda-forte);
  transition:border-color .18s,box-shadow .18s}
.busca-campo:focus-within{border-color:color-mix(in srgb,var(--amarelo) 55%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--amarelo) 9%,transparent)}
.busca-campo svg{flex:none;opacity:.5}
.busca-campo input{flex:1;background:none;border:0;outline:0;color:var(--texto);
  font-size:var(--t-13);font-family:inherit;min-width:0}
.busca-campo input::placeholder{color:var(--texto-3)}
.busca-dica{margin-top:12px;font-size:var(--t-5);color:var(--texto-3);text-align:center}

.sugestoes{position:absolute;top:70px;left:0;right:0;z-index:40;background:var(--superficie-2);
  border:1px solid var(--borda-forte);border-radius:16px;padding:7px;
  box-shadow:0 28px 70px rgba(0,0,0,.7)}
.sugestoes[hidden]{display:none}
.sugestoes a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;
  font-size:var(--t-9);color:var(--texto-2)}
.sugestoes a:hover,.sugestoes a:focus{background:var(--elevado);color:var(--texto)}
.sugestoes .cat{margin-left:auto;font-size:var(--t-2);color:var(--texto-3);
  font-family:var(--mono);white-space:nowrap}
.sugestoes .vazio{padding:16px 14px;font-size:var(--t-8);color:var(--texto-3)}

.atalhos{display:flex;flex-wrap:nowrap;justify-content:center;gap:8px;margin-top:24px;
  overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.atalhos::-webkit-scrollbar{display:none}
.atalhos a{flex:none;font-size:var(--t-6);padding:7px 15px;border-radius:999px;
  background:var(--superficie);border:1px solid var(--borda);color:var(--texto-2);
  white-space:nowrap;transition:border-color .18s,color .18s}
.atalhos a:hover{border-color:var(--borda-forte);color:var(--texto)}
@media(max-width:700px){.atalhos{justify-content:flex-start;
  padding-left:2px;-webkit-overflow-scrolling:touch}}


/* ── Seções ────────────────────────────────────────────────── */
section{padding:46px 0}
.titulo-secao{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:22px}
.titulo-secao h2{font-size:var(--t-16);font-weight:750;text-transform:uppercase;letter-spacing:.5px}
.titulo-secao .conta{font-family:var(--mono);font-size:var(--t-4);color:var(--texto-3)}

/* grade de respostas */
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.grade{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grade{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:9px;padding:20px;border-radius:15px;
  background:var(--superficie);border:1px solid var(--borda);
  transition:border-color .18s,transform .18s,background .18s}
.card:hover{border-color:var(--borda-forte);background:var(--superficie-2);transform:translateY(-3px)}
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--cor-tema,var(--amarelo));opacity:.75}
.card .cat{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--cor-tema,var(--amarelo))}
.card h3{font-size:var(--t-12);font-weight:650;letter-spacing:-.3px;line-height:1.34}
.card p{font-size:var(--t-7);color:var(--texto-3);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .rodape{margin-top:auto;padding-top:4px;font-family:var(--mono);
  font-size:var(--t-2);color:var(--texto-3);display:flex;gap:10px;align-items:center}

/* categorias
   A caixa embrulha o botão de filtro e o link para a página do tema. Eles
   são irmãos porque <a> dentro de <button> é HTML inválido — e porque o
   JavaScript do filtro pega qualquer [data-filtro], então o link, que não
   tem esse atributo, fica de fora dele sem precisar de exceção. */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
@media(max-width:880px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.cats{grid-template-columns:1fr}}
.cat-caixa{display:flex;flex-direction:column;gap:7px}
.cat-caixa .cat-card{flex:1}  /* cards da mesma linha ficam da mesma altura */
.cat-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:2px 4px;font-size:var(--t-6);color:var(--texto-3);
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.cat-link span{transition:transform .18s}
.cat-link:hover{color:var(--cor-tema);border-bottom-color:var(--cor-tema)}
.cat-link:hover span{transform:translateX(3px)}
.cat-card{padding:22px;border-radius:15px;background:var(--superficie);
  border:1px solid var(--borda);display:flex;flex-direction:column;gap:6px;
  transition:border-color .18s,transform .18s}
.cat-card{cursor:pointer;text-align:left;width:100%;font-family:inherit;position:relative}
.cat-card:hover{border-color:var(--cor-tema);transform:translateY(-3px)}
.cat-card[aria-pressed="true"]{border-color:var(--cor-tema);
  background:color-mix(in srgb,var(--cor-tema) 11%,var(--superficie))}
.cat-card .n{font-family:var(--mono);font-size:var(--t-17);font-weight:600;color:var(--cor-tema);
  line-height:1;margin-bottom:6px}
.filtro-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.limpar{font-size:var(--t-5);color:var(--texto-3);text-decoration:underline;
  text-underline-offset:3px;background:none;border:0;padding:0}
.limpar:hover{color:var(--texto)}
.limpar[hidden]{display:none}
.cat-card h3{font-size:var(--t-9);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.cat-card p{font-size:var(--t-6);color:var(--texto-3);line-height:1.5}

/* faixa de confiança */
.confianca{border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  background:var(--superficie);padding:30px 0}
.confianca .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:760px){.confianca .wrap{grid-template-columns:1fr;gap:20px}}
.confianca .item{display:flex;gap:13px;align-items:flex-start}
.confianca .ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--verde) 12%,transparent);border:1px solid color-mix(in srgb,var(--verde) 26%,transparent);
  color:var(--verde);font-size:var(--t-9)}
.confianca b{display:block;font-size:var(--t-9);font-weight:650;margin-bottom:2px}
.confianca span{font-size:var(--t-6);color:var(--texto-3);line-height:1.5}

/* ── Página de tema (/tema/dinheiro/ e as outras três) ───────
   Ela é uma página de BUSCA, não de leitura: fica no escuro, como a home.
   A folha clara é só para quem já escolheu a resposta. Sem barra de filtro
   e sem campo de busca — quem chegou aqui já filtrou pelo endereço. */
.tema-topo{max-width:730px;margin:26px 0 34px}
.tema-topo h1{font-size:clamp(26px,4.4vw,40px);font-weight:800;letter-spacing:-1.2px;
  line-height:1.14;margin:14px 0 16px;text-wrap:balance}
.tema-topo p{color:var(--texto-2);margin:0 0 13px}
.tema-topo .conta{display:block;margin-top:18px;font-family:var(--mono);
  font-size:var(--t-4);color:var(--texto-3)}

.tema-outros{margin:52px 0 0;padding-top:30px;border-top:1px solid var(--borda)}
.tema-outros h2{font-size:var(--t-16);font-weight:750;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:16px}
.tema-links{display:flex;flex-wrap:wrap;gap:10px}
.tema-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:0 18px;border-radius:999px;background:var(--superficie);
  border:1px solid var(--borda);color:var(--texto-2);font-size:var(--t-8);
  transition:border-color .18s,color .18s,transform .18s}
.tema-link span{font-family:var(--mono);font-size:var(--t-4);color:var(--cor-tema)}
.tema-link:hover{border-color:var(--cor-tema);color:var(--texto);transform:translateY(-2px)}

/* ── Página de resposta ────────────────────────────────────── */
.trilha{font-size:var(--t-5);color:var(--texto-3);padding:20px 0 0;font-family:var(--mono)}
.trilha a:hover{color:var(--amarelo)}
.trilha span{margin:0 8px;opacity:.45}

article{max-width:730px;margin:0 auto;padding:8px 0 40px}
.selo-cat{display:inline-block;font-family:var(--mono);font-size:var(--t-2);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cor-tema,var(--amarelo));
  background:color-mix(in srgb,var(--cor-tema,var(--amarelo)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--cor-tema,var(--amarelo)) 30%,transparent);
  padding:5px 12px;border-radius:7px}
article h1{font-size:clamp(28px,4.8vw,43px);font-weight:800;letter-spacing:-1.4px;
  line-height:1.12;margin:16px 0 14px;text-wrap:balance}
.ficha{display:flex;flex-wrap:wrap;gap:7px 18px;font-family:var(--mono);font-size:var(--t-4);
  color:var(--texto-3);padding-bottom:22px;border-bottom:1px solid var(--borda)}

/* resposta direta: o atalho */
.direta{margin:28px 0 0;padding:24px 26px;border-radius:16px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--amarelo) 10%,transparent),color-mix(in srgb,var(--amarelo) 3%,transparent));
  border:1px solid color-mix(in srgb,var(--amarelo) 30%,transparent)}
.direta .rot{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--amarelo);margin-bottom:9px}
.direta p{font-size:var(--t-14);line-height:1.6;color:var(--texto);margin:0}
.direta b{font-weight:650}

/* fonte oficial */
.fonte{margin:14px 0 0;padding:15px 18px;border-radius:13px;background:var(--superficie);
  border:1px solid color-mix(in srgb,var(--verde) 22%,transparent);display:flex;gap:13px;align-items:flex-start}
.fonte .ico{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--verde) 13%,transparent);color:var(--verde);font-size:var(--t-5)}
.fonte .txt{font-size:var(--t-6);color:var(--texto-3);line-height:1.55}
.fonte .txt b{color:var(--verde);font-weight:600;display:block;font-size:var(--t-3);
  letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);margin-bottom:3px}
.fonte a{color:var(--texto-2);text-decoration:underline;text-underline-offset:3px}
.fonte a:hover{color:var(--texto)}

article h2{font-size:clamp(21px,3.2vw,27px);font-weight:750;letter-spacing:-.7px;
  line-height:1.22;margin:42px 0 13px}
article h3{font-size:var(--t-14);font-weight:650;letter-spacing:-.25px;margin:28px 0 9px}
article p{margin:0 0 16px;color:var(--texto-2)}
article p b,article li b{color:var(--texto);font-weight:650}
article a[href]{color:var(--amarelo);text-decoration:underline;text-underline-offset:3px}
article ul,article ol{margin:0 0 20px;padding-left:22px;color:var(--texto-2)}
article li{margin-bottom:9px}
article ol{counter-reset:n;list-style:none;padding-left:0}
article ol>li{counter-increment:n;position:relative;padding-left:42px;margin-bottom:13px}
article ol>li::before{content:counter(n);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:9px;background:var(--elevado);
  border:1px solid var(--borda-forte);color:var(--amarelo);font-family:var(--mono);
  font-size:var(--t-5);font-weight:600;display:flex;align-items:center;justify-content:center}

.box{background:var(--superficie);border:1px solid var(--borda);
  border-left:3px solid var(--amarelo);border-radius:0 13px 13px 0;
  padding:17px 21px;margin:0 0 21px;font-size:var(--t-10);color:var(--texto-2)}
.check{list-style:none;padding:0;margin:0 0 21px}
.check li{position:relative;padding-left:32px;margin-bottom:11px;color:var(--texto-2)}
.check li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;
  border-radius:5px;border:2px solid color-mix(in srgb,var(--amarelo) 45%,transparent)}

details{border:1px solid var(--borda);border-radius:13px;background:var(--superficie);
  overflow:hidden;margin-bottom:8px}
details[open]{border-color:var(--borda-forte)}
summary{list-style:none;cursor:pointer;padding:15px 19px;font-size:var(--t-10);font-weight:600;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:var(--t-15);font-weight:300;color:var(--amarelo);flex:none;line-height:1}
details[open] summary::after{content:"\2212"}
details p{padding:0 19px 16px;font-size:var(--t-9);margin:0}

.aviso{font-size:var(--t-5);color:var(--texto-3);border-top:1px solid var(--borda);
  padding-top:19px;margin-top:38px;line-height:1.6}
.relacionados{margin:48px 0 0}
.relacionados h2{font-size:var(--t-15);margin-bottom:15px}


/* ── Voltar ─────────────────────────────────────────────────
   A trilha discreta não resolvia: quem chega por um atalho e quer
   voltar precisa de um alvo óbvio, não de um link de 13px. */
.voltar{display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;
  padding:9px 16px 9px 13px;border-radius:999px;background:var(--superficie);
  border:1px solid var(--borda);color:var(--texto-2);font-size:var(--t-7);
  transition:border-color .18s,color .18s,transform .18s}
.voltar:hover{border-color:var(--borda-forte);color:var(--texto);transform:translateX(-2px)}
.voltar span{font-size:var(--t-11);line-height:1}

/* ── Rodapé ────────────────────────────────────────────────── */
footer{border-top:1px solid var(--borda);padding:40px 0 30px;margin-top:56px}
.rodape-topo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-bottom:26px}
.rodape-topo p{font-size:var(--t-6);color:var(--texto-3);max-width:36ch;margin-top:11px}
footer .logo svg{height:38px}
.rodape-links{display:flex;flex-wrap:wrap;gap:18px;font-size:var(--t-6);color:var(--texto-2)}
.rodape-links a:hover{color:var(--amarelo)}
.rodape-base{border-top:1px solid var(--borda);padding-top:19px;font-size:var(--t-4);
  color:var(--texto-3);line-height:1.7}

/* ── Página de leitura (respostas e política) ───────────────
   A home é o instrumento de busca: escura, densa, cheia de cards.
   A página de resposta é outra coisa — é para LER, muitas vezes no
   celular, na rua, com o problema na mão. Então ela vira uma folha
   clara sobre fundo cinza, com o texto em preto. Cabeçalho e rodapé
   seguem escuros, para a marca não se perder no caminho.

   Truque que evita reescrever o site inteiro: os tokens de cor são
   redefinidos aqui em cima e devolvidos ao valor escuro dentro do
   header e do footer. Como variável CSS é herdada, cada regra do
   site continua igual e só muda de cor conforme onde está. */
body.leitura{
  --fundo:#ECEFF5; --superficie:#FFFFFF; --superficie-2:#F6F8FC; --elevado:#EEF1F7;
  --texto:#0F1623; --texto-2:#39424F; --texto-3:#5F6776;
  --borda:rgba(15,22,35,.10); --borda-forte:rgba(15,22,35,.20);
  background:var(--fundo);color:var(--texto)
}
body.leitura::before,body.leitura::after{display:none}
body.leitura header,body.leitura footer{
  --fundo:#0A0E17; --superficie:#121826; --superficie-2:#171F30; --elevado:#1D2739;
  --texto:#F2F4F8; --texto-2:#A9B2C4; --texto-3:#78849B;
  --borda:rgba(255,255,255,.08); --borda-forte:rgba(255,255,255,.16);
  color:var(--texto)
}
body.leitura footer{background:var(--fundo);margin-top:64px}
body.leitura .rodape-links a:hover{color:var(--amarelo)}

body.leitura .voltar{background:#fff}
body.leitura .trilha a:hover{color:#1A6AB0}

/* a folha */
body.leitura article,body.leitura .legal{
  background:#fff;border-radius:20px;padding:36px 44px 46px;margin-top:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 16px 40px rgba(16,24,40,.07)}
body.leitura article h1{letter-spacing:-1.2px}
body.leitura article a[href]{color:#1A6AB0}
/* os cards de 'outras respostas' também são <a> dentro do artigo:
   sem esta linha eles herdavam o azul sublinhado dos links de texto */
body.leitura .relacionados a.card{color:var(--texto);text-decoration:none}
/* as cores dos temas são claras de propósito, para brilhar no escuro.
   Sobre a folha branca elas somem, então aqui elas entram misturadas
   com o preto do texto — mesma família de cor, contraste de leitura. */
body.leitura article{--cor-forte:color-mix(in srgb,var(--cor-tema,#8A6B00) 55%,#0B1220)}
body.leitura .selo-cat,body.leitura .relacionados .card .cat,
body.leitura summary::after{color:var(--cor-forte)}
body.leitura article ol>li::before{
  background:color-mix(in srgb,var(--cor-tema,#B98900) 12%,#fff);
  border-color:color-mix(in srgb,var(--cor-tema,#B98900) 34%,transparent);
  color:var(--cor-forte)}
body.leitura .selo-cat{background:color-mix(in srgb,var(--cor-tema,#B98900) 12%,#fff);
  border-color:color-mix(in srgb,var(--cor-tema,#B98900) 32%,transparent)}

/* a resposta rápida continua sendo o amarelo da marca, só que legível
   sobre branco: fundo creme e rótulo em mostarda escura */
body.leitura .direta{background:#FFF8DC;border-color:#EBCC48}
body.leitura .direta .rot{color:#8A6B00}
body.leitura .direta p{color:#1A2130}

body.leitura .fonte{background:#F0FBF5;
  border-color:rgba(17,140,84,.24)}
body.leitura .fonte .ico{background:rgba(17,140,84,.13);color:#0E7A47}
body.leitura .fonte .txt b{color:#0E7A47}
body.leitura .fonte a{color:#39424F}
body.leitura .fonte a:hover{color:#0F1623}

body.leitura .box{background:#F6F8FC;border-color:rgba(15,22,35,.09);
  border-left-color:var(--cor-tema,#EBCC48)}
body.leitura .check li::before{border-color:color-mix(in srgb,var(--cor-tema,#B98900) 55%,transparent)}
body.leitura details{background:#fff}
body.leitura .relacionados .card{background:#fff}

@media(max-width:820px){
  /* no celular a folha ocupa a largura toda: margem lateral dupla
     (a do .wrap mais a do cartão) rouba espaço demais de linha */
  body.leitura article,body.leitura .legal{
    padding:26px 22px 34px;border-radius:16px;margin-left:-4px;margin-right:-4px}
}

/* ── Ajustes para celular e tablet ──────────────────────────
   Dois problemas que o teste apontou:
   1. Rótulos de 10px são pequenos demais no celular — e o público
      deste site inclui gente de 40+ que já não enxerga bem de perto.
   2. Links e botões abaixo de 44px de altura são difíceis de acertar
      com o dedo. Apple recomenda 44px, Google 48px. */
@media(max-width:820px){
  body{font-size:16.5px}

  /* nada de letrinha ilegível */
  .card .cat,.selo-cat{font-size:var(--t-3)}
  .direta .rot{font-size:var(--t-2)}
  .conta,.busca-dica,.card .rodape,.trilha,.ficha{font-size:var(--t-5)}
  .cat-card p,.card p{font-size:var(--t-7)}
  .confianca span,.fonte .txt{font-size:var(--t-7)}
  .rodape-base,.rodape-topo p{font-size:var(--t-5)}

  /* alvo de toque confortável */
  .rodape-links{gap:4px 22px}
  .rodape-links a{display:inline-flex;align-items:center;min-height:44px}
  .atalhos a{min-height:42px;display:inline-flex;align-items:center}
  .trilha a{display:inline-flex;align-items:center;min-height:40px}
  summary{min-height:52px}
  .menu-btn{min-width:44px;min-height:44px;display:grid;place-items:center}
  nav.menu a{min-height:48px;display:flex;align-items:center}

  /* respiro: leitura no celular pede mais espaço entre blocos */
  article h2{margin-top:36px}
  section{padding:38px 0}
}

/* telas bem estreitas: o hero domina demais */
@media(max-width:400px){
  .hero{padding:52px 0 34px}
  .hero h1{font-size:29px;letter-spacing:-1px}
  .busca-campo{height:56px;padding:0 18px}
  .busca-campo input{font-size:16px}  /* menos de 16px faz o iPhone dar zoom sozinho */
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}}

/* ═══════════════════════════════════════════════════════════════
   REVISÃO VISUAL — aprovada em 04/09/2026.
   Este bloco fica no fim de propósito: dá para ler tudo o que muda
   de uma vez, e apagar de uma vez.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. O preto da marca ────────────────────────────────────────
   O site usava #0A0E17, azulado. O logo usa #0A0A0A, neutro.
   Além de estar fora da marca, quase-preto tingido é um dos tiques
   mais reconhecíveis de página gerada automaticamente.
   Os cinzas subiram junto: o resumo do card estava em 4,71:1, que
   passa no AA por 0,21 e some para quem tem vista cansada. */
:root{
  --fundo:#0A0A0A;
  --superficie:#141414;
  --superficie-2:#1A1A1A;
  --elevado:#212121;
  --texto:#F5F5F5;
  --texto-2:#C4C4C4;   /* 10,6:1 */
  --texto-3:#A0A0A0;   /* 7,0:1  — era #78849B, 4,7:1 */
  --borda:rgba(255,255,255,.09);
  --borda-forte:rgba(255,255,255,.20);
}
body.leitura header,body.leitura footer{
  --fundo:#0A0A0A; --superficie:#141414; --superficie-2:#1A1A1A; --elevado:#212121;
  --texto:#F5F5F5; --texto-2:#C4C4C4; --texto-3:#A0A0A0;
}
body.leitura{ --texto-3:#5A626E; }   /* 6,2:1 sobre a folha branca */

/* ── 2. A assinatura: a resposta é o balão ──────────────────────
   A marca é um balão de fala que diz "TÁ". O conteúdo do site é
   uma resposta. Eram a mesma coisa, e o site não usava isso.
   Agora a resposta direta É o balão: amarelo da marca, tinta preta,
   rabicho no mesmo ângulo do logo. É o elemento mais forte da
   página, e é justamente o que a pessoa veio buscar. */
.direta{
  position:relative;margin:30px 0 26px;padding:22px 26px 24px;
  background:var(--amarelo);border:0;border-radius:20px;
  color:#0A0A0A;                                   /* 14,0:1 */
  box-shadow:none}
.direta::after{
  content:"";position:absolute;left:30px;bottom:-17px;width:0;height:0;
  border-top:18px solid var(--amarelo);border-right:22px solid transparent}
.direta .rot{
  font-family:var(--sans);font-size:var(--t-4);font-weight:700;
  letter-spacing:0;text-transform:none;color:rgba(10,10,10,.62);margin-bottom:7px}
.direta p{color:#0A0A0A}
.direta b{font-weight:750}
/* especificidade: a regra da linha 459 é `body.leitura .direta` (0,2,1) e
   ganha de `.direta` (0,1,0). Precisa ser repetida no mesmo nível. */
body.leitura .direta{background:var(--amarelo);border:0;color:#0A0A0A}
body.leitura .direta p{color:#0A0A0A}
body.leitura .direta .rot{color:rgba(10,10,10,.62)}

/* ── 3. Fim da caixa alta decorativa ────────────────────────────
   Eram 409 elementos em maiúsculas. Caixa alta em rótulo é o tique
   mais comum de template. Hierarquia agora vem de peso e cor. */
.hero h1{text-transform:none;letter-spacing:-1.4px}
.titulo-secao h2{text-transform:none;letter-spacing:-.6px}
.cat-card h3{text-transform:none;letter-spacing:-.2px;font-size:var(--t-12)}
.tema-outros h2{text-transform:none;letter-spacing:-.6px}
.card .cat{text-transform:none;letter-spacing:0;font-family:var(--sans);
  font-size:var(--t-3);font-weight:600}
.selo-cat{text-transform:none;letter-spacing:0;font-family:var(--sans);
  font-size:var(--t-4);font-weight:600}
.fonte .txt b{text-transform:none;letter-spacing:0;font-family:var(--sans);
  font-size:var(--t-4);font-weight:700}

/* ── 4. A monoespaçada volta a ser dado ─────────────────────────
   Eram 807 elementos em JetBrains Mono, quase todos texto corrido
   pequeno — o formato mais difícil de ler que existe. Ela fica só
   onde é número. */
.card .rodape,.trilha,.ficha,.atalhos .rot,.tema-link span,
.titulo-secao .conta,.tema-topo .conta{font-family:var(--sans)}
.cat-card .n{font-family:var(--mono)}   /* o número grande continua */

/* ── 5. Três raios, não um ──────────────────────────────────────
   Eram 404 elementos com o mesmo 15px. Curva igual em tudo apaga a
   hierarquia: o balão da resposta e um chip de filtro não são a
   mesma coisa. */
.card,.cat-caixa,.grade .card{border-radius:12px}
.box{border-radius:0 8px 8px 0}
details{border-radius:10px}
.fonte{border-radius:10px}
body.leitura article,body.leitura .legal{border-radius:14px}

/* ── 6. Linha de leitura no celular ─────────────────────────────
   Media 34 caracteres por linha, contra 72 no computador. A folha
   passa a ocupar a largura toda e o respiro lateral cai de 22 para
   16px: chega a ~40, que é o teto realista numa tela de 375px sem
   encolher a letra. */
@media(max-width:820px){
  body.leitura article,body.leitura .legal{
    padding:24px 16px 32px;border-radius:0;
    margin-left:-20px;margin-right:-20px;width:auto}
  .direta{padding:20px 18px 22px}
  .direta::after{left:22px}
}

/* ── 7. O rótulo que não precisa existir ────────────────────────
   "BUSCAS FREQUENTES" acima dos atalhos é rótulo decorativo: os
   próprios chips já dizem o que são. Está com estilo embutido no
   molde/home.html, por isso o !important aqui — na versão final
   a linha sai do molde e este trecho deixa de ser necessário. */
.hero > p[style]{display:none!important}

/* ── 8. Os cinzas da folha também eram azulados ─────────────────
   #ECEFF5, #0F1623, #39424F, #5F6776 puxavam para o azul, como o
   fundo antigo. Neutralizados, e o texto auxiliar sobe de 5,7 para
   6,9 de contraste. */
body.leitura{
  --fundo:#EDEDED; --superficie:#FFFFFF; --superficie-2:#F7F7F7; --elevado:#F0F0F0;
  --texto:#0A0A0A; --texto-2:#3A3A3A; --texto-3:#5A5A5A;
  --borda:rgba(10,10,10,.10); --borda-forte:rgba(10,10,10,.20);
}
body.leitura .box{background:#F7F7F7;border-color:rgba(10,10,10,.09)}
body.leitura details{background:#fff}

/* ═══ MARCA NA HOME — segunda rodada ═══════════════════════════
   A home usava amarelo só no logo e num chip. O resto era preto,
   cinza e as quatro cores de tema — que não são da marca.
   Aqui o amarelo passa a carregar a estrutura, e as cores de tema
   recuam para o papel de etiqueta. */

/* ── A pergunta também é um balão ───────────────────────────────
   Se a resposta é o balão amarelo cheio, a pergunta é o balão
   vazado: mesma forma, mesmo rabicho, contorno amarelo. O campo de
   busca é literalmente onde a pessoa fala. */
.busca{overflow:visible}
.busca-campo{
  border-radius:20px;border:2px solid color-mix(in srgb,var(--amarelo) 55%,transparent);
  background:#111}
.busca-campo:focus-within{
  border-color:var(--amarelo);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--amarelo) 14%,transparent)}
.busca-campo::after{
  content:"";position:absolute;left:30px;bottom:-15px;width:0;height:0;
  border-top:16px solid color-mix(in srgb,var(--amarelo) 55%,transparent);
  border-right:20px solid transparent}
.busca-campo:focus-within::after{border-top-color:var(--amarelo)}
.busca-campo svg{opacity:1;color:var(--amarelo)}
.busca-dica{margin-top:22px}

/* ── O amarelo assume a estrutura ───────────────────────────────
   O filete de 3px na lateral de cada card era da cor do tema. São
   400 cards: passando a amarelo, a marca aparece na página inteira
   sem acrescentar nenhum elemento novo. A cor do tema continua na
   etiqueta de texto, que é onde ela informa. */
.card::before{background:var(--amarelo);opacity:1;width:4px}
.card:hover{border-color:color-mix(in srgb,var(--amarelo) 45%,transparent)}

/* título de seção com o rabicho do balão */
.titulo-secao h2{position:relative;padding-left:20px}
.titulo-secao h2::before{
  content:"";position:absolute;left:0;top:.15em;width:10px;height:22px;
  border-radius:3px 3px 3px 0;background:var(--amarelo)}
.titulo-secao .conta{color:var(--amarelo);opacity:.85}

/* contadores e números da página de tema */
.tema-topo .conta{color:var(--amarelo);opacity:.85}

/* chips de atalho: contorno amarelo discreto no hover */
.atalhos a:hover{border-color:color-mix(in srgb,var(--amarelo) 60%,transparent);
  color:var(--amarelo)}

/* faixa de confiança: os ícones eram verdes, cor que não é da marca */
.confianca .ico{
  background:color-mix(in srgb,var(--amarelo) 13%,transparent);
  border-color:color-mix(in srgb,var(--amarelo) 32%,transparent);
  color:var(--amarelo)}

/* cards de tema: a cor do tema fica no número; o amarelo entra na
   borda ativa, para o estado selecionado ser da marca */
.cat-card:hover{border-color:color-mix(in srgb,var(--amarelo) 50%,transparent)}
.cat-card[aria-pressed="true"]{
  border-color:var(--amarelo);
  background:color-mix(in srgb,var(--amarelo) 9%,var(--superficie))}
.cat-link:hover{color:var(--amarelo);border-bottom-color:var(--amarelo)}

/* botão de filtro ativo já era amarelo — reforçado */
.filtro-barra [aria-pressed="true"],.filtro-barra .ativo{
  border-color:var(--amarelo)}

/* ── correções da rodada anterior ───────────────────────────────
   1. o rabicho do balão de busca ancorava no .busca (que inclui a
      dica embaixo) e caía solto. O ::after precisa de um pai
      posicionado: é o próprio campo.
   2. o rótulo "buscas frequentes" é irmão do .busca, não filho do
      .hero — o seletor anterior não o alcançava. */
.busca-campo{position:relative}
.hero p[style]{display:none!important}

/* ── A arte do topo ─────────────────────────────────────────────
   A malha azul-esverdeada era o maior elemento da home e não tem
   nada da marca: puxa para "produto de tecnologia" num site que é
   utilidade pública, e briga com o preto neutro.
   Sai a foto, entra a própria marca: o balão, em escala grande e
   quase apagado, com o brilho amarelo por trás. */
.hero-arte{
  background:none;opacity:1;height:520px;top:-64px;
  mask-image:none;-webkit-mask-image:none}
.hero-arte::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(760px 380px at 50% 8%, color-mix(in srgb,var(--amarelo) 9%,transparent), transparent 70%),
    radial-gradient(420px 260px at 84% 30%, color-mix(in srgb,var(--amarelo) 4%,transparent), transparent 72%)}
/* A silhueta grande do balão atrás do título saiu: em tamanho de
   tela cheia ela lia como uma caixa cinza por trás da frase, não
   como marca. Fica só o brilho. */
@media(max-width:980px){
  .hero-arte{height:340px;background-image:none}
}

/* ═══ CORREÇÃO DE TOM E DO RABICHO ═════════════════════════════ */

/* ── 1. O oliva ─────────────────────────────────────────────────
   Medido no pixel: o canto do topo estava em rgb(16,24,29) — azul —
   e o miolo em rgb(48,42,7) — oliva. Duas causas somadas:
     • os focos de luz laterais usam --cat-dinheiro (azul) e
       --cat-seguranca (roxo), que são cores de tema, não da marca;
     • amarelo #FFD60A com alfa baixo sobre preto não dá amarelo:
       dá cáqui. O matiz do amarelo é esverdeado (~50°), e diluído
       ele puxa para oliva.
   Os laterais saem. O do meio fica, mais quente (âmbar ~38°) e mais
   fraco: acende sem tingir. */
body::after{
  background:
    radial-gradient(820px 420px at 50% -4%,
      rgba(255,176,32,.055), transparent 68%);
}
.hero-arte::before{
  background:
    radial-gradient(760px 360px at 50% 6%, rgba(255,176,32,.05), transparent 70%);
}

/* ── 2. O rabicho ───────────────────────────────────────────────
   Estava sólido embaixo de uma caixa vazada: parecia adesivo colado.
   Balão de contorno pede rabicho de contorno — dois triângulos, o de
   fora na cor da borda e o de dentro na cor do fundo, deslocado, com
   o topo entrando 2px na caixa para apagar a linha da borda embaixo
   dele. E a borda passa a ser o amarelo cheio: o color-mix a 55%
   virava mostarda, não a cor da marca. */
.busca-campo{border-color:var(--amarelo)}
.busca-campo::before{
  content:"";position:absolute;left:26px;bottom:-19px;width:0;height:0;
  border-top:19px solid var(--amarelo);
  border-right:24px solid transparent}
.busca-campo::after{
  content:"";position:absolute;left:28px;bottom:-14px;width:0;height:0;
  border-top:14px solid #111;
  border-right:18px solid transparent}

/* ── Os dois balões do topo ─────────────────────────────────────
   No lugar da silhueta, a promessa do site encenada em duas falas:
   a dúvida de um lado, a resposta do outro. O verbo da pergunta
   volta na resposta — é literalmente o que cada página faz.
   Os dois códigos visuais já existem no site: contorno = campo
   vazio esperando você digitar; amarelo cheio = a resposta direta.
   Decorativos (aria-hidden) e escondidos abaixo de 1200px, onde
   não cabem sem espremer o título. */
.fala{position:absolute;top:92px;width:max-content;max-width:205px;
  padding:14px 18px;
  font-size:15px;line-height:1.35;text-align:left;z-index:1;
  border-radius:18px;pointer-events:none}
.fala::before,.fala::after{content:"";position:absolute;width:0;height:0}

.fala-q{left:5.6%;background:var(--superficie);
  border:1px solid var(--borda-forte);color:var(--texto-2)}
.fala-q::before{left:23px;bottom:-15px;
  border-top:15px solid var(--borda-forte);
  border-right:19px solid transparent}
.fala-q::after{left:24px;bottom:-13px;
  border-top:15px solid var(--superficie);
  border-right:19px solid transparent}

.fala-a{right:5.6%;background:var(--amarelo);color:#0A0A0A;font-weight:600}
.fala-a::before{display:none}
.fala-a::after{right:24px;bottom:-14px;
  border-top:15px solid var(--amarelo);
  border-left:19px solid transparent}

@media(max-width:1200px){.fala{display:none}}

/* ── O peso da lista ────────────────────────────────────────────
   Com 600 cards na home, o custo não é só de bytes: é de layout.
   O navegador calcula e pinta 600 blocos que ninguém vê de uma vez.
   content-visibility manda pular esse trabalho enquanto o card está
   fora da tela, e contain-intrinsic-size diz que altura reservar
   para a barra de rolagem não pular. O card continua no HTML — o
   Google lê tudo, e a busca e o filtro continuam achando. */
.grade .card{
  content-visibility:auto;
  contain-intrinsic-size:auto 208px}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT RADAR — 17/09/2026, a pedido do Bruno.
   Alinha o TÁ EXPLICADO ao Radar de Ofertas: mesma paleta azul-marinho,
   mesmo topo de quatro cards, mesma faixa de contadores, mesma barra de
   filtro com busca e ordenação juntas.
   Bloco no fim de propósito: apagar daqui para baixo devolve o preto.
   O backup do arquivo anterior está em fonte/estilo-preto.css.bak.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. A paleta do Radar ───────────────────────────────────────
   Valores lidos do próprio radardeoffer.com.br, não estimados.
   Os cinzas foram escolhidos para manter o piso de contraste que a
   revisão anterior conquistou: texto-2 em 10,2:1 e texto-3 em 7,5:1
   sobre o fundo. */
:root{
  --fundo:#0f1b47;        /* --color-bg do Radar */
  --superficie:#16255c;   /* --color-section */
  --superficie-2:#14225a; /* --navy */
  --elevado:#1b2c69;
  --navy-ink:#0b1436;
  --amarelo:#ffc907;      /* --color-accent — 10,7:1 sobre o fundo */
  --amarelo-300:#ffdc5c;
  --texto:#eef1fa;        /* 14,7:1 */
  --texto-2:#c3cbe4;      /* 10,2:1 */
  --texto-3:#a3aed0;      /*  7,5:1 */
  --borda:rgba(255,255,255,.14);
  --borda-forte:rgba(255,255,255,.28);
  --t-13:15px;            /* base do Radar */
}
body.leitura header,body.leitura footer{
  --fundo:#0f1b47; --superficie:#16255c; --superficie-2:#14225a;
  --texto:#eef1fa; --texto-2:#c3cbe4; --texto-3:#a3aed0;
  --borda:rgba(255,255,255,.14); --borda-forte:rgba(255,255,255,.28);
}

/* ── 2. O topo: quatro cards, como no Radar ─────────────────────
   Sai o título gigante com a busca no meio; entra uma linha curta de
   contexto e os quatro temas lado a lado. O h1 fica, menor: é o que o
   Google lê, e a página não pode perder isso. Os balões laterais e a
   arte de fundo saem — no layout do Radar não há espaço para eles. */
.hero{padding:34px 0 30px;text-align:left;
  background:linear-gradient(180deg,#0f1b47 0%,#101d4e 100%);
  border-bottom:1px solid var(--borda)}
.hero::before{content:none}
.hero-arte,.fala{display:none!important}
.hero h1{font-size:clamp(21px,2.6vw,27px);font-weight:800;letter-spacing:-.5px;
  line-height:1.24;max-width:none;margin:0;text-align:left}
.hero .sub{margin:8px 0 0;max-width:62ch;font-size:var(--t-7);
  color:var(--texto-3);text-align:left}
.hero .busca,.hero .atalhos,.hero p[style]{display:none}

/* os quatro cards, no lugar onde ficava a busca */
.hero .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.cat-caixa{display:flex;flex-direction:column;
  background:var(--superficie);border:1px solid var(--borda);border-radius:14px;
  padding:16px 18px 14px;transition:border-color .18s,transform .18s}
.cat-caixa:hover{border-color:var(--amarelo);transform:translateY(-2px)}
.cat-card{flex:1;display:block;width:100%;text-align:left;background:none;
  border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.cat-card .n{display:inline-block;font-family:var(--mono);font-size:var(--t-2);
  font-weight:700;color:var(--amarelo);letter-spacing:.06em;margin-bottom:9px}
.cat-card .n::after{content:" RESPOSTAS"}
.cat-card h3{font-size:var(--t-12);font-weight:750;color:var(--texto);
  letter-spacing:-.2px;margin:0 0 7px}
.cat-card p{font-size:var(--t-6);color:var(--texto-3);line-height:1.5;margin:0}
.cat-link{margin-top:13px;font-size:var(--t-6);font-weight:650;color:var(--amarelo);
  border:0;padding:0}
.cat-link:hover{color:var(--amarelo-300);border:0}
@media(max-width:900px){.hero .cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hero .cats{grid-template-columns:1fr}
  .hero{padding:24px 0 22px}}

/* ── 3. A faixa de contadores ───────────────────────────────────
   O equivalente da "faixa-rank" do Radar: uma frase e um punhado de
   números que dizem o que o site é, em pílulas. */
.faixa{background:var(--superficie-2);border-bottom:1px solid var(--borda);
  padding:20px 0}
.faixa .wrap{text-align:center}
.faixa .diz{font-size:var(--t-7);color:var(--texto-2);margin-bottom:13px}
.faixa .diz b{color:var(--texto);font-weight:700}
.faixa .pilulas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.faixa .pil{display:inline-flex;align-items:center;gap:9px;
  background:var(--fundo);border:1px solid var(--borda);border-radius:999px;
  padding:8px 8px 8px 16px;font-size:var(--t-7);color:var(--texto-2)}
.faixa .pil b{font-family:var(--mono);font-size:var(--t-4);font-weight:700;
  background:var(--amarelo);color:var(--navy-ink);
  border-radius:999px;padding:3px 10px}
@media(max-width:560px){.faixa .pil{font-size:var(--t-5);padding-left:13px}}

/* ── 4. A barra de filtro: chips + busca + ordenação ────────────
   No Radar tudo isso vive numa linha só, colada na lista. A busca sai
   do topo e vem para cá. */
.filtro-barra{position:sticky;top:65px;z-index:20;
  background:rgba(15,27,71,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);
  padding:12px 0;margin:0 0 22px}
.filtro-barra-in{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  overflow:visible}
.filtro-barra button[data-filtro]{flex:0 0 auto;
  background:var(--superficie);border:1px solid var(--borda);border-radius:999px;
  padding:8px 15px;font-size:var(--t-8);font-weight:600;color:var(--texto-2);
  cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.filtro-barra button[data-filtro]:hover{border-color:var(--borda-forte);color:var(--texto)}
/* a regra da linha 145 é `.filtro-barra button[aria-pressed="true"]` (0,2,1)
   e ganha de `.filtro-barra [aria-pressed]` (0,2,0). Tem de ser repetida no
   mesmo nível — é a mesma armadilha que o balão da resposta já pregou. */
.filtro-barra button[aria-pressed="true"]{background:var(--amarelo);
  color:var(--navy-ink);border-color:var(--amarelo);font-weight:700}

/* a busca, agora aqui dentro */
.barra-busca{flex:1 1 auto;min-width:160px;position:relative;display:flex;
  align-items:center;gap:10px;background:#fff;border:1px solid var(--borda);
  border-radius:999px;padding:0 16px;height:40px}
.barra-busca svg{flex:0 0 auto;color:#6b7492}
.barra-busca input{flex:1;border:0;background:none;outline:none;
  font-family:var(--sans);font-size:var(--t-8);color:#0b1436;height:100%}
.barra-busca input::placeholder{color:#7b839c}
.barra-busca:focus-within{border-color:var(--amarelo);
  box-shadow:0 0 0 3px rgba(255,201,7,.22)}

/* a ordenação */
.ordena{flex:0 0 auto;background:var(--superficie);color:var(--texto-2);
  border:1px solid var(--borda);border-radius:999px;height:40px;padding:0 14px;
  font-family:var(--sans);font-size:var(--t-8);font-weight:600;cursor:pointer}
.ordena:focus{outline:none;border-color:var(--amarelo)}

/* a lista de sugestões passa a pendurar na barra */
.filtro-barra .sugestoes{position:absolute;top:46px;left:0;right:0;z-index:40;
  background:var(--superficie);border:1px solid var(--borda-forte);
  border-radius:14px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.5)}

@media(max-width:820px){
  .filtro-barra{top:62px}
  .filtro-barra-in{flex-wrap:wrap}
  .barra-busca{order:-1;flex:1 0 100%;min-width:0}
  .ordena{flex:1 1 auto}
}

/* ── 5. Superfícies gerais no azul ──────────────────────────────*/
header,.filtro-barra,footer{background-color:var(--fundo)}
header{border-bottom:1px solid var(--borda)}
.grade .card{background:var(--superficie);border:1px solid var(--borda)}
.grade .card:hover{border-color:var(--amarelo)}
.confianca{background:var(--superficie-2);border-top:1px solid var(--borda);
  border-bottom:0}
.busca-campo{background:#fff}
body::after{content:none}

/* ── 6. A busca volta para o topo ───────────────────────────────
   17/09, a pedido do Bruno: o campo grande com o rabicho de balão
   volta para o começo da página, no formato que tinha antes. Ele
   fica entre o subtítulo e os quatro cards de tema.
   A busca pequena saiu da barra de filtro: dois campos com o mesmo
   id quebram o JS, e o balão é o que ele quer ver primeiro. */
.hero .busca{display:block;max-width:660px;margin:22px auto 0;text-align:left}
.hero .busca-dica{text-align:center}
.hero .cats{margin-top:26px}
.busca-campo{background:#111a3d;border:2px solid var(--amarelo);border-radius:20px}
.busca-campo input{color:var(--texto)}
.busca-campo input::placeholder{color:var(--texto-3)}
.busca-campo svg{color:var(--amarelo);opacity:1}
/* o rabicho, na cor do fundo novo */
.busca-campo::after{border-top-color:#111a3d}
.busca-campo:focus-within{border-color:var(--amarelo);
  box-shadow:0 0 0 4px rgba(255,201,7,.18)}
.sugestoes{background:var(--superficie);border-color:var(--borda-forte)}

/* com a busca centralizada de volta, o título centraliza junto: título à
   esquerda e campo no meio ficava desalinhado sem motivo. Os quatro cards
   seguem como estavam. */
.hero h1,.hero .sub{text-align:center;margin-left:auto;margin-right:auto}
.hero .sub{max-width:58ch}

/* a barra de filtro fica só com os chips e a ordenação */
.barra-busca{display:none}
.filtro-barra .sugestoes{position:absolute}

/* ═══════════════════════════════════════════════════════════════
   PALETA RGF-BIZDOC — 18/09/2026, a pedido do Bruno.
   Cores amostradas no pixel do print do rgf-bizdoc, não estimadas.
   Backup do azul-Radar em fonte/estilo-azul.css.bak.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. As cores, e a regra que elas impõem ─────────────────────
   O vermelho da marca (#c00d1e) dá 3,11:1 sobre o fundo escuro:
   REPROVA como texto, em qualquer tamanho. Branco sobre ele dá
   6,33:1 e passa.

   O próprio RGF-BIZDOC já trabalha assim — lá o vermelho é botão,
   logo e ponto; o texto do eyebrow é cinza-claro, não vermelho.
   Então aqui vale a mesma regra, e ela está escrita para não se
   perder:

     --vermelho        SÓ em preenchimento, com texto branco por cima
     --vermelho-claro  quando o acento precisa ser TEXTO (7,15:1)

   A variável --amarelo continua existindo porque é usada em umas
   trinta regras acima; ela agora aponta para o vermelho. Renomear
   as trinta não melhoraria nada e quebraria alguma. */
:root{
  --vermelho:#c00d1e;         /* preenchimento */
  --vermelho-claro:#ff6b78;   /* texto — 7,15:1 sobre o fundo */
  --amarelo:var(--vermelho);
  --amarelo-300:var(--vermelho-claro);
  --fundo:#070b14;
  --superficie:#121a29;
  --superficie-2:#0f1626;
  --elevado:#1c2230;          /* o charcoal da barra do topo */
  --navy-ink:#070b14;
  --texto:#ffffff;            /* 19,7:1 */
  --texto-2:#cfd3dc;          /* 13,1:1 */
  --texto-3:#9aa0ae;          /*  7,5:1 — mantém o piso de sempre */
  --borda:rgba(255,255,255,.10);
  --borda-forte:rgba(255,255,255,.24);
}
body.leitura header,body.leitura footer{
  --fundo:#070b14; --superficie:#121a29; --superficie-2:#0f1626; --elevado:#1c2230;
  --texto:#ffffff; --texto-2:#cfd3dc; --texto-3:#9aa0ae;
  --borda:rgba(255,255,255,.10); --borda-forte:rgba(255,255,255,.24);
}

/* ── 2. Onde o acento é TEXTO, entra o vermelho claro ───────────*/
.cat-card .n,.cat-link,.busca-campo svg,.sugestoes a .cat,
.cat-link:hover,.tema-link span{color:var(--vermelho-claro)}
.cat-link:hover{color:#ff8a94}

/* ── 3. Onde é preenchimento, entra o vermelho da marca ─────────*/
.filtro-barra button[aria-pressed="true"]{background:var(--vermelho);
  color:#fff;border-color:var(--vermelho);font-weight:700}
.faixa .pil b{background:var(--vermelho);color:#fff}
.cat-caixa:hover{border-color:var(--vermelho)}
.grade .card:hover{border-color:var(--vermelho)}
.card::before{background:var(--vermelho)}

/* ── 4. O topo, no charcoal do RGF ──────────────────────────────*/
header{background-color:var(--elevado);border-bottom:1px solid var(--borda)}
.hero{background:linear-gradient(180deg,#121a29 0%,#0a101d 62%,#070b14 100%);
  border-bottom:1px solid var(--borda)}
.faixa{background:var(--fundo);border-top:1px solid var(--borda)}
.filtro-barra{background:rgba(7,11,20,.94)}
body.leitura header{background-color:var(--elevado)}

/* ── 5. A busca: o balão fica, o vermelho não ───────────────────
   Contorno vermelho em campo de digitação lê como "deu erro" em
   qualquer lugar da internet. O que identifica a busca é a FORMA
   do balão, não a cor — então o contorno vira neutro e o vermelho
   aparece no anel de foco, quando é resposta a uma ação sua. */
.busca-campo{background:#0d1422;border:2px solid var(--borda-forte)}
.busca-campo::after{border-top-color:#0d1422}
.busca-campo::before{border-top-color:var(--borda-forte)}
.busca-campo:focus-within{border-color:#ffffff;
  box-shadow:0 0 0 4px rgba(192,13,30,.34)}
.busca-campo:focus-within::after{border-top-color:#0d1422}

/* ── 6. A resposta rápida ───────────────────────────────────────
   Era o balão amarelo com tinta preta (14:1). No vermelho da marca
   com texto branco dá 6,33:1 — passa com folga e fica sendo o
   elemento mais forte da página, que é o que ele tem de ser.
   O rabicho acompanha. */
.direta,body.leitura .direta{background:var(--vermelho);color:#fff;border:0}
.direta::after{border-top-color:var(--vermelho)}
.direta p,body.leitura .direta p{color:#fff}
.direta .rot,body.leitura .direta .rot{color:rgba(255,255,255,.72)}
.direta b{color:#fff;font-weight:750}
.direta a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ── 7. O que o auditor de contraste pegou ──────────────────────
   Varri o DOM das três páginas comparando cor do texto com o fundo
   real (subindo a árvore até achar fundo opaco). Três lugares ainda
   usavam o vermelho de preenchimento como texto pequeno:
     .conta        3,11:1  — "800 publicadas · novas toda semana"
     a (sugerir)   3,11:1  — "Sugira o tema"
     .ico          3,31:1  — os três sinais da faixa de confiança
   Todos passam para o vermelho claro, que dá 7,15:1. */
.titulo-secao .conta,.tema-topo .conta{color:var(--vermelho-claro)}
#semResultado a{color:var(--vermelho-claro)}
.confianca .ico{color:var(--vermelho-claro)}

/* ── 8. O acento vira turquesa ──────────────────────────────────
   18/09: o vermelho saiu. Escolha do Bruno depois de ver as três
   opções lado a lado.

   Ganho técnico: 9,22:1 como texto sobre o fundo, contra 3,11:1 do
   vermelho. Some a necessidade de ter duas variáveis — o mesmo tom
   serve para preenchimento e para texto, e a tinta escura por cima
   dá 8,82:1. Volta a ser um acento só, como deve ser.

   A colisão que isso criava — #3FC4BD era também a cor do tema
   "Celular e PC" — foi resolvida no bloco 9: aquele tema passou
   para amarelo. */
:root{
  --turquesa:#3FC4BD;
  --turquesa-tinta:#06131a;
  --vermelho:var(--turquesa);
  --vermelho-claro:var(--turquesa);
  --amarelo:var(--turquesa);
  --amarelo-300:#6ad9d3;
}
.filtro-barra button[aria-pressed="true"]{background:var(--turquesa);
  color:var(--turquesa-tinta);border-color:var(--turquesa);font-weight:700}
.faixa .pil b{background:var(--turquesa);color:var(--turquesa-tinta)}
.cat-card .n,.cat-link,.busca-campo svg,.titulo-secao .conta,.tema-topo .conta,
#semResultado a,.confianca .ico{color:var(--turquesa)}
.cat-link:hover{color:#6ad9d3}
.cat-caixa:hover,.grade .card:hover{border-color:var(--turquesa)}
.card::before{background:var(--turquesa)}

/* a resposta rápida volta a ser fundo claro com tinta escura, que era
   como funcionava melhor: 8,82:1, contra 6,33:1 do branco no vermelho */
.direta,body.leitura .direta{background:var(--turquesa);color:var(--turquesa-tinta)}
.direta::after{border-top-color:var(--turquesa)}
.direta p,body.leitura .direta p{color:var(--turquesa-tinta)}
.direta .rot,body.leitura .direta .rot{color:rgba(6,19,26,.66)}
.direta b{color:var(--turquesa-tinta)}
.direta a{color:var(--turquesa-tinta)}
.busca-campo:focus-within{border-color:var(--turquesa);
  box-shadow:0 0 0 4px rgba(63,196,189,.26)}

/* ── 9. Celular e PC vira amarelo ───────────────────────────────
   18/09, a pedido do Bruno. Com o acento turquesa, o tema "Celular
   e PC" usava exatamente a mesma cor e deixava de se distinguir.

   Escolhido #FFC93C: 12,81:1 sobre o fundo, matiz 43° — fica a 134°
   da turquesa, a maior separação possível dentro da paleta, e não
   repete o 50° exato do logo, que continua sendo só dele.

   A cor mora em três lugares e os três foram trocados: a constante
   CORES do gerar.py (que escreve o --cor-tema em cada card), o chip
   do filtro no molde, e a variável --cat-tecnologia aqui. */
:root{ --cat-tecnologia:#FFC93C; }

/* ── 10. Dinheiro vira verde ─────────────────────────────────────
   19/09, a pedido do Bruno. Dinheiro era azul (#4EA8DE) e o azul
   não diz nada sobre o assunto; verde diz. Escolhido #7CE38B:
   12,39:1 sobre o fundo, matiz 129° — fica a 48° da turquesa do
   destaque e a 85° do amarelo de Celular e PC, e é o verde que
   melhor se separa dos outros para quem enxerga cor de forma
   diferente (dE 31 na simulação de protanopia; abaixo de 25 já
   começa a confundir).

   A cor mora em três lugares e os três foram trocados:
     gerar.py  →  CORES["Dinheiro"]      (selo dos 250 cards)
     home.html →  chip do filtro
     aqui      →  --cat-dinheiro (linha 60), que também tinge o
                  foco de luz do canto superior esquerdo do fundo.
   Para voltar ao azul: trocar #7CE38B por #4EA8DE nos três. */