/* 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. */

/* ═══════════════════════════════════════════════════════════════
   11. REFORMA DE UX — 25/09/2026
   Junta a avaliação crítica de UX com a auditoria externa. O que
   mudou na estrutura está no gerar.py e nos moldes; aqui fica só a
   aparência das peças novas. Tudo usa as variáveis da paleta atual
   (escura, com turquesa) e a escala --t-*. Para desfazer o visual,
   apague deste bloco até o fim do arquivo.
   ═══════════════════════════════════════════════════════════════ */
:root{ --t-leitura:17px; }   /* o Radar baixou --t-13 para 15px; leitura volta a 17 */

/* ── 1. Acessibilidade: pular para o conteúdo e foco visível ─────── */
.pular{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;
  border-radius:999px;background:var(--turquesa);color:var(--turquesa-tinta);
  font-weight:700;font-size:var(--t-8);transition:top .15s}
.pular:focus{top:10px}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:2px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}

/* ── 2. Cabeçalho com busca pequena (páginas internas) ──────────── */
.busca-mini{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;
  margin:0 auto 0 28px;padding:0 12px;min-height:40px;border-radius:12px;
  background:var(--superficie);border:1px solid var(--borda-forte);color:var(--texto-3)}
.busca-mini:focus-within{border-color:var(--turquesa)}
.busca-mini svg{flex:none}
.busca-mini input{flex:1;min-width:0;background:none;border:0;outline:0;
  color:var(--texto);font:inherit;font-size:16px}   /* 16px: menos que isso, o iPhone dá zoom */
.busca-mini input::placeholder{color:var(--texto-3)}
.busca-mini input::-webkit-search-cancel-button{filter:invert(.6)}
.busca-mini.grande{max-width:560px;margin:18px 0 0;min-height:52px;padding:0 16px}
@media(max-width:820px){
  /* com a busca na segunda linha o cabeçalho fica alto demais para ficar
     grudado no topo da tela do celular; ele rola junto (há o botão de voltar ao topo) */
  body:has(.header-in .busca-mini) header{position:static}
  .header-in{flex-wrap:wrap;height:auto;min-height:64px;padding-top:10px;padding-bottom:10px;row-gap:10px}
  .header-in .busca-mini{order:3;flex-basis:100%;max-width:none;margin:0}
}

/* ── 3. Topo da home: os quatro temas são links ─────────────────── */
a.cat-caixa{color:inherit;text-decoration:none}
a.cat-caixa:hover .cat-link{color:var(--amarelo-300)}
.hero .busca,.hero .busca-dica{display:block}
.cats .cat-link{display:inline-flex;align-items:center;min-height:32px}
.hero .cats{margin-top:30px}
/* no celular os quatro temas viram uma grade 2x2 compacta: empilhados, eles
   empurravam as respostas em destaque para a quarta tela */
@media(max-width:560px){
  .hero .cats{grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
  .hero .cat-caixa{padding:14px 14px 10px}
  .hero .cat-card p{display:none}
  .hero .cat-card h3{font-size:var(--t-9);margin:0}
  .hero .cat-card .n{margin-bottom:5px}
  .hero .cat-link{margin-top:6px;font-size:var(--t-5)}
}

/* ── 4. Seção de destaques e o link para todas ──────────────────── */
.destaques{padding:40px 0 48px}
.titulo-secao{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ver-todas{font-weight:650;font-size:var(--t-8);color:var(--turquesa);
  display:inline-flex;align-items:center;min-height:44px}
.ver-todas:hover{color:var(--amarelo-300)}

/* ── 5. O card de resposta: tema, título, resumo, fonte e data ──── */
.card .cat{font-family:var(--sans);font-size:var(--t-4);font-weight:650;
  letter-spacing:0;text-transform:none}
.card::before{background:var(--cor-tema,var(--turquesa))}
.card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .rodape{font-family:var(--sans);font-size:var(--t-4);flex-wrap:wrap;gap:2px 0;
  line-height:1.5}
.card .rodape span{white-space:nowrap}
.card .rodape span:first-child{white-space:normal;overflow-wrap:anywhere}
.card .rodape span+span::before{content:"·";margin:0 7px;opacity:.6}
/* a data vai para a linha de baixo: separador no começo de linha fica feio */
.card .rodape span:last-child{flex-basis:100%}
.card .rodape span:last-child::before{content:none}

/* ── 6. Sugestões da busca: título, tema e resumo de uma linha ──── */
.sugestoes{max-height:min(70vh,520px);overflow-y:auto}
.sugestoes a.sug{display:block;padding:11px 14px;border-radius:11px}
.sugestoes a.sug[aria-selected="true"],.sugestoes a.sug:hover{background:var(--elevado);color:var(--texto)}
.sug-topo{display:flex;align-items:baseline;gap:10px}
.sug-tit{flex:1;min-width:0;font-weight:600;color:var(--texto);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sugestoes .sug .cat{flex:none;margin-left:auto;font-size:var(--t-4);font-family:var(--sans);
  text-transform:none;letter-spacing:0;color:var(--texto-3)}
.sug-res{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--t-6);color:var(--texto-3);margin-top:2px}
.sugestoes .aviso{padding:10px 14px 6px;font-size:var(--t-6);color:var(--texto-2)}
.sugestoes a.sug-todas{display:block;padding:11px 14px;margin-top:4px;border-top:1px solid var(--borda);
  font-weight:650;font-size:var(--t-6);color:var(--turquesa)}
.sugestoes .vazio a{color:var(--turquesa);text-decoration:underline}

/* ── 7. Paginação ─────────────────────────────────────────────── */
.paginacao{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:30px 0 8px}
.paginacao a,.paginacao .pag-atual{min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 12px;border-radius:12px;
  border:1px solid var(--borda);background:var(--superficie);font-weight:600;font-size:var(--t-8)}
.paginacao a:hover{border-color:var(--turquesa)}
.paginacao .pag-atual{background:var(--turquesa);color:var(--turquesa-tinta);border-color:var(--turquesa)}
.paginacao .pag-pulo{padding:0 4px;color:var(--texto-3)}
@media(max-width:560px){.paginacao a:not(.pag-seta):not([aria-label="Página 1"]),.paginacao .pag-pulo{display:none}}

/* ── 8. Páginas de lista: tema e todas ────────────────────────── */
.todas-topo .busca{position:relative;max-width:640px;margin:16px 0 4px}
.todas-topo .busca-campo{margin:0}
.pagina-todas .titulo-secao{margin:26px 0 16px}
.pagina-todas .conta{font-family:var(--mono);font-size:var(--t-4);color:var(--texto-3)}
.sem-resultado{grid-column:1/-1;color:var(--texto-2);padding:10px 0}
.sem-resultado a{color:var(--turquesa);text-decoration:underline}
.erro-404 .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.lista-temas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 20px}
@media(max-width:900px){.erro-404 .cats,.lista-temas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.erro-404 .cats,.lista-temas{grid-template-columns:1fr}}
.volta-inicio{margin:26px 0 10px}
.volta-inicio a{color:var(--turquesa);font-weight:650}

/* ── 9. Página de resposta ────────────────────────────────────── */
@media(min-width:821px){ body.leitura article{font-size:var(--t-leitura);line-height:1.7} }
.autoria{margin-top:10px;font-size:var(--t-5);color:var(--texto-3)}
.fonte .txt{flex:1 1 auto;min-width:0}
.fonte-botao{flex:none;align-self:center;margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 16px;border-radius:999px;font-weight:650;font-size:var(--t-6);
  background:#0E7A47;color:#fff!important;text-decoration:none!important}
.fonte-botao:hover{background:#0B6239}
@media(max-width:560px){
  .fonte{flex-wrap:wrap}
  .fonte .txt{flex-basis:calc(100% - 44px)}
  .fonte-botao{margin-left:40px}
}
.enviar-wa{display:inline-flex;align-items:center;gap:8px;margin:14px 0 6px;min-height:44px;
  padding:0 16px;border-radius:999px;border:1px solid var(--borda-forte);
  font-weight:600;font-size:var(--t-6);color:var(--texto)!important;text-decoration:none!important}
.enviar-wa svg{color:#1C8B4C}
.enviar-wa:hover{border-color:#1C8B4C}
.relacionados .grade{grid-template-columns:repeat(2,1fr)}
@media(max-width:600px){.relacionados .grade{grid-template-columns:1fr}}
.mais-tema{margin-top:16px}
.mais-tema a{font-weight:650}
body.leitura .relacionados .card .rodape{color:var(--texto-3)}

/* ── 10. Voltar ao topo ───────────────────────────────────────── */
.topo{position:fixed;right:18px;bottom:18px;z-index:70;width:48px;height:48px;border-radius:50%;
  background:var(--turquesa);color:var(--turquesa-tinta);font-size:22px;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
.topo[hidden]{display:none}

/* ── 11. Sobre ────────────────────────────────────────────────── */
.sobre h2{margin-top:30px}
.sobre ul{padding-left:20px}
.sobre li{margin-bottom:12px}
.paginacao[hidden]{display:none}

/* ── 12. O que o Lighthouse apontou na página de resposta ─────────
   Três textos pequenos ficavam abaixo de 4,5:1 (já era assim antes
   desta reforma): o selo do tema e o tema dos cards relacionados, na
   cor de Dinheiro misturada a 55% (4,14:1 e 4,38:1), e o rótulo
   "Resposta rápida" com tinta a 66% (4,31:1). A mistura passa a 42%
   (≈6:1 sobre branco) e o rótulo usa a tinta cheia (8,8:1). */
body.leitura article{--cor-forte:color-mix(in srgb,var(--cor-tema,#8A6B00) 42%,#0B1220)}
.direta .rot,body.leitura .direta .rot{color:var(--turquesa-tinta)}

/* os títulos dos quatro temas viraram h2 (h1 -> h3 pulava um nível) */
.cat-card h2{font-size:var(--t-12);font-weight:750;color:var(--texto);
  letter-spacing:-.2px;line-height:1.3;margin:0 0 7px}
@media(max-width:560px){ .hero .cat-card h2{font-size:var(--t-9);margin:0} }
/* título que só o leitor de tela lê (mantém a ordem h1 > h2 > h3) */
.so-leitor{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* content-visibility:auto existia porque a home tinha 1.000 cards. Agora
   nenhuma página passa de 20: o ganho acabou e ele só atrapalhava print
   de página inteira e a leitura de alguns leitores de tela. */
.grade .card{content-visibility:visible;contain-intrinsic-size:none}
/* dentro da folha de leitura, os cards relacionados herdavam a margem dos
   h3 e p do texto (28px em cima do título) */
body.leitura .relacionados .card h3,body.leitura .relacionados .card p{margin:0}


/* ═══════════════════════════════════════════════════════════════
   13. KITS — 26/09/2026
   O site ganhou produtos digitais (kits em PDF), decisão do Bruno:
   o acervo continua gratuito e é a isca; a venda é dos kits, um por
   dor grande (Anti-Golpe, Nome Limpo, Documentos em Ordem). O HTML
   sai do gerar.py (lista KITS no topo) e dos moldes kits.html e
   kit.html; aqui é só a aparência. Tudo usa a paleta e a escala
   --t-* atuais. Para desfazer o visual, apague deste bloco até o
   fim do arquivo (o conteúdo some tirando os kits do gerar.py).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. A capa 3D: um livro de CSS puro ──────────────────────────
   O Bruno pediu imagem 3D e movimento para dar credibilidade. Capa
   de verdade custaria ~100 KB por kit e uma foto que não existe;
   isto aqui custa zero byte de imagem: perspective + gradiente na
   cor do tema, lombada em pseudo-elemento, um brilho que atravessa
   a capa e uma flutuação lenta. Quem pediu menos movimento no
   aparelho (prefers-reduced-motion) vê a capa parada. */
.kit-capa{perspective:900px;display:grid;place-items:center;padding:18px 6px 14px}
.kit-livro{position:relative;width:150px;height:205px;border-radius:6px 14px 14px 6px;
  transform:rotateY(-16deg) rotateX(4deg);transform-style:preserve-3d;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--cor-tema,var(--turquesa)) 52%,#0A0A0A),
    color-mix(in srgb,var(--cor-tema,var(--turquesa)) 16%,#0A0A0A));
  border:1px solid color-mix(in srgb,var(--cor-tema,var(--turquesa)) 45%,transparent);
  box-shadow:-16px 20px 32px rgba(0,0,0,.42);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:16px 14px;transition:transform .25s ease;
  animation:kit-flutua 5.5s ease-in-out infinite}
.kit-livro::before{content:"";position:absolute;left:-7px;top:3px;bottom:3px;width:7px;
  border-radius:4px 0 0 4px;transform:rotateY(-42deg);transform-origin:right;
  background:color-mix(in srgb,var(--cor-tema,var(--turquesa)) 28%,#0A0A0A)}
.kit-livro::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.13) 46%,transparent 60%);
  background-size:240% 100%;background-position:120% 0;
  animation:kit-brilho 5.5s ease-in-out infinite}
.kit-livro-marca{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.14em;
  color:color-mix(in srgb,#fff 72%,transparent)}
.kit-livro-titulo{font-weight:800;font-size:var(--t-16);line-height:1.15;color:#fff;
  letter-spacing:.02em}
.kit-livro-pdf{font-size:var(--t-2);font-weight:600;
  color:color-mix(in srgb,#fff 80%,transparent)}
.kit-capa.mini .kit-livro{width:116px;height:158px;padding:12px 11px}
.kit-capa.mini .kit-livro-titulo{font-size:var(--t-12)}
.kit-capa.mini .kit-livro-pdf{display:none}
@keyframes kit-flutua{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes kit-brilho{0%,55%{background-position:120% 0}90%,100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
  .kit-livro,.kit-livro::after{animation:none}
}

/* ── 2. O card do kit (vitrine /kits/ e home) ──────────────────── */
.kits-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:10px 0}
@media(max-width:980px){.kits-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.kits-grade{grid-template-columns:1fr}}
.kit-cardp{display:flex;flex-direction:column;color:inherit;text-decoration:none;
  background:var(--superficie);border:1px solid var(--borda);border-radius:18px;
  overflow:hidden;transition:border-color .15s,transform .15s}
.kit-cardp .kit-capa{background:
  radial-gradient(120% 90% at 50% 10%,color-mix(in srgb,var(--cor-tema) 10%,transparent),transparent 70%)}
.kit-cardp:hover{border-color:color-mix(in srgb,var(--cor-tema) 60%,transparent);transform:translateY(-2px)}
.kit-cardp:hover .kit-livro{transform:rotateY(-7deg) rotateX(2deg) scale(1.04)}
.kit-cardp-txt{padding:2px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.kit-cardp .cat{color:var(--cor-tema);font-size:var(--t-4);font-weight:650}
.kit-cardp h3{margin:0;font-size:var(--t-12);line-height:1.35;color:var(--texto)}
.kit-cardp p{margin:0;font-size:var(--t-7);line-height:1.55;color:var(--texto-2)}
.kit-cardp-rodape{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:10px}
.kit-cardp-rodape b{font-size:var(--t-10);color:var(--texto)}
.kit-tag{font-size:var(--t-4);font-weight:600;color:var(--texto-3);
  border:1px solid var(--borda-forte);border-radius:999px;padding:3px 10px}
.kits-sub{margin:6px 0 18px;max-width:70ch;color:var(--texto-2)}
.kits-home{padding:6px 0 46px}
.kits-aviso{margin:18px 0 30px;font-size:var(--t-6);color:var(--texto-3)}

/* ── 3. A página de venda (/kits/<slug>/) ──────────────────────── */
.kit-pagina{padding-bottom:26px}
.kit-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:26px;align-items:center;padding:22px 0 6px}
.kit-hero .kit-livro{width:190px;height:260px}
.kit-hero .kit-livro-titulo{font-size:var(--t-17)}
.kit-hero h1{margin:10px 0 0}
.kit-promessa{margin:12px 0 0;font-size:var(--t-14);line-height:1.65;color:var(--texto-2)}
@media(max-width:820px){
  .kit-hero{grid-template-columns:1fr;gap:8px}
  .kit-hero .kit-capa{order:2}
}
.kit-cta{margin-top:22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.kit-lanca{font-size:var(--t-4);font-weight:650;color:var(--turquesa);
  border:1px solid color-mix(in srgb,var(--turquesa) 45%,transparent);
  border-radius:999px;padding:4px 12px}
.kit-preco{font-size:var(--t-16);font-weight:800;color:var(--texto)}
.kit-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;
  border-radius:999px;font-weight:700;font-size:var(--t-8);
  background:var(--cor-tema,var(--turquesa));color:#0A0A0A!important;text-decoration:none!important}
.kit-btn:hover{background:color-mix(in srgb,var(--cor-tema,var(--turquesa)) 82%,#fff)}
.kit-btn.grande{min-height:52px;padding:0 26px;font-size:var(--t-11)}
.kit-nota{margin:2px 0 0;max-width:52ch;font-size:var(--t-5);line-height:1.6;color:var(--texto-3)}
.kit-pagina section{margin-top:34px}
.kit-pagina section h2{margin:0 0 14px}
.kit-itens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:640px){.kit-itens{grid-template-columns:1fr}}
.kit-item{background:var(--superficie);border:1px solid var(--borda);border-radius:16px;padding:18px}
.kit-item h3{margin:0 0 8px;font-size:var(--t-12);color:var(--cor-tema)}
.kit-item p{margin:0;font-size:var(--t-7);line-height:1.6;color:var(--texto-2)}
.kit-para-quem ul{margin:0;padding-left:20px;color:var(--texto-2)}
.kit-para-quem li{margin:8px 0;line-height:1.6}
.kit-faq details{background:var(--superficie);border:1px solid var(--borda);
  border-radius:12px;padding:12px 16px;margin:10px 0}
.kit-faq summary{cursor:pointer;font-weight:650;font-size:var(--t-10);color:var(--texto);
  min-height:28px}
.kit-faq details p{margin:10px 0 2px;color:var(--texto-2);line-height:1.65}
.kit-gratis{margin:36px 0 14px;color:var(--texto-2)}
.kit-gratis a{color:var(--turquesa);font-weight:650}

/* ── 4. O convite no fim da resposta (página de leitura) ─────────
   A página de resposta é folha branca; o convite entra como um
   cartão escuro na cor do tema — a mesma lógica do cabeçalho e do
   rodapé, que seguem escuros dentro da leitura. O texto diz com
   todas as letras que a resposta acima é completa e gratuita:
   a home prometia "sem venda no fim do texto", e a promessa nova
   tem de ser tão clara quanto a antiga. */
.kit-oferta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;
  align-items:center;margin:34px 0 8px;padding:22px 24px;border-radius:18px;
  background:color-mix(in srgb,var(--cor-tema,var(--turquesa)) 13%,#0A0A0A);
  border:1px solid color-mix(in srgb,var(--cor-tema,var(--turquesa)) 35%,transparent)}
.kit-oferta .rot{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,#fff 68%,transparent)}
.kit-oferta h2{margin:8px 0 6px;color:#fff}
.kit-oferta p{margin:0 0 14px;color:color-mix(in srgb,#fff 82%,transparent);
  font-size:var(--t-10);line-height:1.6}
.kit-oferta-nota{margin:12px 0 0!important;font-size:var(--t-5)!important;
  color:color-mix(in srgb,#fff 62%,transparent)!important}
.kit-oferta .kit-capa{padding:0}
@media(max-width:640px){
  .kit-oferta{grid-template-columns:1fr;padding:20px 18px}
  .kit-oferta .kit-capa{display:none}  /* no celular o cartão fica curto: texto e botão */
}


/* ═══════════════════════════════════════════════════════════════
   14. CONTA, COMPRA E AURORA — 26/09/2026 (madrugada, carta branca)
   O site ganhou o aplicativo de conta e compra (pasta app-site/, em
   PHP: /conta/, /comprar.php, /obrigado.php, /admin/). Aqui ficam:
   1) o visual dessas páginas (body.pagina-app), reusando os tokens;
   2) a lista de confiança do CTA do kit;
   3) a "aurora" da home: movimento suave no fundo do hero, pedido
      do Bruno (site com mais vida). prefers-reduced-motion desliga.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Páginas do aplicativo ───────────────────────────────────── */
.logo-txt{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo-txt img{display:block}
.logo-txt span{font-weight:800;font-size:var(--t-12);letter-spacing:.01em;color:#fff}
.logo-txt i{font-style:normal;color:var(--amarelo)}
.app-caixa{max-width:540px;margin:26px auto 60px}
.app-caixa.larga{max-width:900px}
.app-caixa .cartao{background:var(--superficie);border:1px solid var(--borda);
  border-radius:18px;padding:24px 26px;margin-bottom:16px}
.app-caixa h1{font-size:var(--t-16);margin:0 0 10px}
.app-caixa h2{font-size:var(--t-12)}
.app-migalha{margin:0 0 10px;font-size:var(--t-5);color:var(--texto-3)}
.app-migalha a{color:var(--turquesa)}
.app-preco{font-size:var(--t-14);font-weight:800;margin:2px 0 14px}
.app-preco small{font-weight:500;color:var(--texto-3);font-size:var(--t-6)}
.form-linha{margin:14px 0}
.form-linha label{display:block;font-weight:650;font-size:var(--t-8);margin-bottom:6px}
.form-linha input,.form-linha select{width:100%;min-height:46px;padding:0 14px;
  border-radius:12px;border:1px solid var(--borda-forte);background:var(--fundo);
  color:var(--texto);font:inherit;font-size:16px}   /* 16px: senão o iPhone dá zoom */
.form-linha input:focus,.form-linha select:focus{border-color:var(--turquesa);outline:none}
.form-linha small{display:block;margin-top:6px;font-size:var(--t-5);color:var(--texto-3);line-height:1.5}
.form-linha .aceite,.app-marcas label{display:flex;gap:10px;align-items:flex-start;
  font-weight:500;font-size:var(--t-7);line-height:1.5}
.form-linha .aceite input,.app-marcas input{width:auto;min-height:0;margin-top:3px}
.app-marcas label{margin:8px 0}
.app-formas{border:1px solid var(--borda);border-radius:12px;padding:12px 16px}
.app-formas legend{font-weight:650;font-size:var(--t-8);padding:0 6px}
.app-formas label{display:flex;gap:10px;align-items:center;margin:8px 0;font-size:var(--t-9)}
.app-formas input{width:auto;min-height:0}
.aviso{border-radius:12px;padding:12px 16px;margin:12px 0;font-size:var(--t-8);line-height:1.55}
.aviso-ok{background:color-mix(in srgb,var(--turquesa) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--turquesa) 40%,transparent)}
.aviso-erro{background:color-mix(in srgb,#FF6B78 12%,transparent);
  border:1px solid color-mix(in srgb,#FF6B78 45%,transparent)}
.app-tabela{width:100%;border-collapse:collapse;font-size:var(--t-7)}
.app-tabela th{text-align:left;color:var(--texto-3);font-weight:650;font-size:var(--t-4)}
.app-tabela th,.app-tabela td{padding:10px 10px 10px 0;border-bottom:1px solid var(--borda);vertical-align:top}
.app-tabela .ok{color:var(--verde,#7CE38B)}
.app-tabela small{color:var(--texto-3)}
.link-botao{background:none;border:0;padding:0;color:var(--turquesa);font:inherit;
  font-weight:650;text-decoration:underline;cursor:pointer;min-height:44px}
.app-downloads{display:flex;flex-wrap:wrap}
.pagina-app .nota{font-size:var(--t-6);color:var(--texto-3);line-height:1.6;margin-top:14px}
.pagina-app .nota a,.app-caixa .cartao a{color:var(--turquesa)}
.pagina-app .kit-btn{color:#0A0A0A!important}

/* ── 2. A lista de confiança no CTA do kit ─────────────────────── */
.kit-confia{margin:6px 0 0;padding:0;list-style:none;max-width:56ch}
.kit-confia li{position:relative;padding-left:26px;margin:7px 0;
  font-size:var(--t-6);line-height:1.55;color:var(--texto-2)}
.kit-confia li::before{content:"\2713";position:absolute;left:0;top:0;
  font-weight:800;color:var(--cor-tema,var(--turquesa))}

/* ── 3. A aurora da home ────────────────────────────────────────
   Dois focos de luz (turquesa e âmbar) que deslizam devagar atrás
   do hero. Transform-only (compositor, não repinta a página) e
   fraco de propósito: movimento é tempero, não prato. */
.pagina-home .hero{position:relative;overflow:hidden}
.pagina-home .hero>.wrap{position:relative;z-index:1}
.pagina-home .hero::before{content:"";position:absolute;inset:-25%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 30% at 28% 22%, color-mix(in srgb,var(--turquesa) 10%,transparent), transparent 70%),
    radial-gradient(32% 26% at 76% 14%, color-mix(in srgb,var(--amarelo) 7%,transparent), transparent 70%);
  animation:aurora 18s ease-in-out infinite alternate;
  will-change:transform}
@keyframes aurora{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  to{transform:translate3d(2.5%,2%,0) scale(1.07)}
}
@media (prefers-reduced-motion:reduce){.pagina-home .hero::before{animation:none}}
.kit-ver{font-size:var(--t-5);font-weight:650;color:var(--cor-tema,var(--turquesa));margin-left:auto}

/* ── 5. Quatro kits: a grade acompanha (26/09) ──────────────────── */
@media(min-width:1080px){.kits-grade{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* ═══════════════════════════════════════════════════════════════
   15. TRILHAS, COMBO, AMOSTRA, "ISSO AJUDOU" E BOLETIM — 26/09/2026
   O pacote "todos" aprovado pelo Bruno. Peças novas:
   trilhas (/trilhas/), a faixa do Kit Completo, o botão de amostra
   grátis, o voto "isso te ajudou?" nas respostas e os depoimentos
   (entram quando existirem). Tudo nos tokens e na escala --t-*.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Trilhas ─────────────────────────────────────────────────── */
.trilhas-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:10px 0 30px}
@media(max-width:760px){.trilhas-grade{grid-template-columns:1fr}}
.trilha-card{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none;
  background:var(--superficie);border:1px solid var(--borda);border-radius:18px;
  padding:20px 22px;transition:border-color .15s,transform .15s;
  border-top:3px solid color-mix(in srgb,var(--cor-tema) 70%,transparent)}
.trilha-card:hover{border-color:color-mix(in srgb,var(--cor-tema) 60%,transparent);transform:translateY(-2px)}
.trilha-card .cat{color:var(--cor-tema);font-size:var(--t-4);font-weight:650}
.trilha-card h2{margin:0;font-size:var(--t-13);line-height:1.3;color:var(--texto)}
.trilha-card p{margin:0;font-size:var(--t-7);line-height:1.55;color:var(--texto-2)}
.trilha-n{margin-top:auto;padding-top:8px;font-weight:650;font-size:var(--t-6);color:var(--cor-tema)}
.trilha-pagina{padding:6px 0 40px}
.trilha-intro{max-width:70ch;font-size:var(--t-14);line-height:1.65;color:var(--texto-2);margin:12px 0 4px}
.trilha-conta{font-family:var(--mono);font-size:var(--t-4);color:var(--texto-3);margin:0 0 8px}
.trilha-passos{list-style:none;counter-reset:passo;margin:18px 0 0;padding:0;max-width:680px}
.trilha-passos .trilha-passo{counter-increment:passo;position:relative;margin:0 0 22px;padding-left:54px}
.trilha-passo::before{content:counter(passo);position:absolute;left:0;top:0;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:var(--t-10);color:#0A0A0A;
  background:var(--cor-tema,var(--turquesa))}
.trilha-passo::after{content:"";position:absolute;left:19px;top:44px;bottom:-16px;width:2px;
  background:color-mix(in srgb,var(--cor-tema,var(--turquesa)) 30%,transparent)}
.trilha-passo:last-child::after{content:none}
.trilha-passo .porque{margin:6px 0 10px;font-size:var(--t-9);line-height:1.55;color:var(--texto-2)}
.trilha-passo .card{display:block}
.trilha-kit{margin-top:34px}
.trilha-kit-um{grid-template-columns:minmax(0,420px)!important}
@media(max-width:560px){
  .trilha-passos .trilha-passo{padding-left:46px}
  .trilha-passo::before{width:34px;height:34px}
  .trilha-passo::after{left:17px}
}

/* ── 2. A faixa do Kit Completo ─────────────────────────────────── */
.combo-faixa{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:20px 0 6px;
  padding:22px 26px;border-radius:18px;color:inherit;text-decoration:none;
  background:linear-gradient(120deg,color-mix(in srgb,var(--turquesa) 16%,#0A0A0A),
    color-mix(in srgb,var(--turquesa) 6%,#0A0A0A));
  border:1px solid color-mix(in srgb,var(--turquesa) 45%,transparent);
  transition:border-color .15s,transform .15s}
.combo-faixa:hover{border-color:var(--turquesa);transform:translateY(-2px)}
.combo-faixa .rot{font-family:var(--mono);font-size:var(--t-1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--turquesa)}
.combo-faixa h2{margin:6px 0 6px;font-size:var(--t-14);color:#fff}
.combo-faixa p{margin:0;max-width:52ch;font-size:var(--t-7);line-height:1.55;
  color:color-mix(in srgb,#fff 80%,transparent)}
.combo-faixa>div:first-child{flex:1;min-width:240px}
.combo-preco{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.combo-preco s{color:var(--texto-3);font-size:var(--t-8)}
.combo-preco b{font-size:var(--t-17);color:#fff;line-height:1}
.combo-preco .kit-btn{margin-top:4px}

/* ── 3. Amostra e o par de botões do CTA ────────────────────────── */
.kit-botoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kit-btn.vazado{background:transparent;border:1.5px solid var(--cor-tema,var(--turquesa));
  color:var(--cor-tema,var(--turquesa))!important}
.kit-btn.vazado:hover{background:color-mix(in srgb,var(--cor-tema,var(--turquesa)) 14%,transparent)}
.kit-combo{margin:14px 0 0;font-size:var(--t-7);color:var(--texto-2)}
.kit-combo a{color:var(--turquesa)}

/* ── 4. "Esta resposta te ajudou?" (página de leitura) ──────────── */
.ajudou{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 4px;
  padding:14px 18px;border-radius:14px;border:1px solid var(--borda);
  background:color-mix(in srgb,var(--fundo) 55%,transparent)}
.ajudou-p{font-weight:650;font-size:var(--t-8)}
.ajudou button{min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--borda-forte);background:transparent;color:var(--texto);
  font:inherit;font-size:var(--t-7);font-weight:600}
.ajudou button:hover{border-color:var(--turquesa)}
.ajudou-ok{font-weight:650;font-size:var(--t-7);color:#0E7A47}

/* ── 5. Depoimentos (entram quando existirem de verdade) ────────── */
.kit-depos .depo{margin:14px 0;padding:16px 20px;border-radius:14px;
  background:var(--superficie);border:1px solid var(--borda)}
.kit-depos blockquote{margin:0;font-size:var(--t-10);line-height:1.6;color:var(--texto)}
.kit-depos figcaption{margin-top:8px;font-size:var(--t-5);color:var(--texto-3)}

/* ── 6. Atalhos de kits e trilhas nas sugestões da busca (26/09) ── */
.sug-atalho{display:flex;align-items:baseline;gap:10px;padding:11px 14px;margin-top:4px;
  border-top:1px dashed var(--borda);border-radius:0 0 11px 11px;text-decoration:none}
.sug-atalho:first-of-type{margin-top:6px}
.sug-atalho[aria-selected="true"],.sug-atalho:hover{background:var(--elevado)}
.atalho-tipo{flex:none;font-size:var(--t-2);font-weight:700;padding:2px 9px;border-radius:999px;
  color:#0A0A0A;background:var(--cor-tema,var(--turquesa))}
.atalho-tit{font-weight:650;color:var(--texto);font-size:var(--t-8)}
.atalho-des{margin-left:auto;font-size:var(--t-4);color:var(--texto-3);white-space:nowrap}
@media(max-width:560px){.atalho-des{display:none}}

/* ── 7. A faixa "você está numa trilha" na resposta (26/09) ─────── */
.faixa-trilha{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 6px;
  padding:12px 16px;border-radius:14px;font-size:var(--t-7);line-height:1.5;
  background:color-mix(in srgb,var(--cor-tema,var(--turquesa)) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--cor-tema,var(--turquesa)) 35%,transparent)}
.ft-n{flex:none;font-family:var(--mono);font-weight:700;font-size:var(--t-4);
  padding:4px 10px;border-radius:999px;color:#0A0A0A;
  background:var(--cor-tema,var(--turquesa))}
.faixa-trilha a{font-weight:650;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
body.leitura .faixa-trilha{color:var(--tinta,inherit)}

/* ── 8. Trilhas na home (26/09) ─────────────────────────────────── */
.trilhas-home{padding:6px 0 10px}
.trilhas-home .trilhas-grade{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:8px}
.trilhas-home .trilha-card h3{margin:0;font-size:var(--t-10);line-height:1.35;color:var(--texto)}
@media(max-width:980px){.trilhas-home .trilhas-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.trilhas-home .trilhas-grade{grid-template-columns:1fr}}

/* ── 9. A home cabe no celular (pente-fino de UX, 26/09) ──────────
   Medido: a home tinha 8,9 telas no celular e as trilhas só na 4ª.
   Três cortes: as trilhas subiram para antes dos destaques (no
   molde), os destaques mostram 6 no celular (o "ver todas" está no
   título da seção), e kits e trilhas viram carrossel deslizante —
   as capas 3D ficam, as 4 telas de pilha vão embora. */
@media(max-width:560px){
  .destaques .grade .card:nth-child(n+7){display:none}
}
@media(max-width:640px){
  .trilhas-home .trilhas-grade,.kits-home .kits-grade{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .trilhas-home .trilha-card{min-width:74%;scroll-snap-align:start}
  .kits-home .kit-cardp{min-width:80%;scroll-snap-align:start}
}

/* ── 10. O fecho e a barra fixa da página do kit (26/09) ──────────
   Medido: os botões de compra só existiam no topo. Agora o fim da
   página repete a decisão, e no celular uma barra fixa aparece
   quando o botão do topo sai da tela (e some quando o fecho chega). */
.kit-fecho{margin-top:40px;padding:26px 28px;border-radius:18px;text-align:left;
  background:color-mix(in srgb,var(--cor-tema,var(--turquesa)) 10%,var(--superficie));
  border:1px solid color-mix(in srgb,var(--cor-tema,var(--turquesa)) 40%,transparent)}
.kit-fecho h2{margin:0 0 8px}
.kit-fecho p{margin:0 0 16px;color:var(--texto-2);max-width:60ch}
.kit-barra{display:none}
@media(max-width:820px){
  .kit-barra:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--fundo) 94%,transparent);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-top:1px solid color-mix(in srgb,var(--cor-tema,var(--turquesa)) 45%,transparent);
    animation:kb-sobe .2s ease-out}
  .kb-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
  .kb-txt b{font-size:var(--t-7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kb-txt span{font-size:var(--t-8);font-weight:800;color:var(--cor-tema,var(--turquesa))}
  .kit-barra .kit-btn{flex:none}
  body:has(.kit-barra:not([hidden])) .topo{bottom:84px}
}
@keyframes kb-sobe{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.kit-barra{animation:none!important}}