/* ─────────────────────────────────────────────────────────────
   OPDS — site público.
   Direção visual de 25/09/2026 (GUIA-DE-ESTILO): gramática editorial, não de template.
   Hierarquia pela tipografia (serifa nos títulos), seções separadas por réguas,
   link sublinhado e com seta, cantos retos, nenhuma sombra fora do que flutua.
   Celular primeiro; nada de rolagem lateral.
   Tema: modo claro padrão; [data-theme] no <html> vem de /assets/js/tema.js.
   ───────────────────────────────────────────────────────────── */

/* Interface: Atkinson Hyperlegible Next (Braille Institute; SIL OFL 1.1 — /assets/fonts/OFL-Atkinson.txt).
   Desenhada para quem lê com dificuldade: letras que não se confundem (I l 1, O 0, b d).
   Subconjunto latino, cobre o português. sha256 18b2a1a3…e0e1bbaf (regular) e 4a5037bf…f9f08106 (itálico). */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/assets/fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url("/assets/fonts/AtkinsonHyperlegibleNext-Variable-Italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
/* Mono só onde tem função: o texto do prompt, que é para copiar. (Geist Mono 1.7.2, SIL OFL 1.1 — /assets/fonts/OFL.txt) */
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Títulos e corpo do artigo: Literata v40 (SIL OFL 1.1 — /assets/fonts/OFL-Literata.txt).
   sha256 7478e192…f09b58 (regular) e 88716d1d…8d9265 (itálico). */
@font-face{font-family:"Literata";src:url("/assets/fonts/Literata-Variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("/assets/fonts/Literata-Variable-Italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

/* Tokens — claro */
:root{
  --bg:#f7f5f0;--bg-2:#efebe2;--card:#fffdf8;--text:#1b1a17;--muted:#57534a;--line:#dcd6c8;--line-2:#b3ab99;
  /* Azul-tinta: a cor dos links e da marca. Os acentos de assunto aparecem só em rótulo, régua e sublinhado. */
  --blue:#1a4f8b;--blue-2:#0f3a6a;--blue-soft:#e4ebf3;
  --vinho:#8a2c3b;--cyan:#146b6b;--green:#3f6b1f;--amber:#8f6310;--amber-soft:#f6eedb;
  --code:#1b1a17;--code-text:#f1ede4;
  /* Faixas de página (rodapé, convites): tinta quente, não azul-marinho. */
  --superficie:#26241f;--superficie-funda:#1f1d19;
  --text-on-dark:#ffffff;--blue-on-dark:#a9c6ec;--muted-on-dark:#b4ada0;--line-on-dark:#3a372f;
  --sans:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --raio:2px;--raio-g:3px;--largura:1120px;--leitura:720px;--gutter:16px;
  --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;--e7:48px;
  /* Sombra só no que flutua (paleta de busca, menu aberto, dica do glossário). */
  --sombra:none;--sombra-suave:none;--sombra-flutua:0 12px 32px rgb(27 26 23 / .18);
  color-scheme:light;
}
/* Tokens — escuro (escolhido no botão) */
:root[data-theme="dark"]{
  --bg:#161512;--bg-2:#1e1d19;--card:#1c1b17;--text:#ece8df;--muted:#aaa397;--line:#35332c;--line-2:#57534a;
  --blue:#9fc2ec;--blue-2:#c6dbf5;--blue-soft:#1d2733;
  --vinho:#eba1ae;--cyan:#72caca;--green:#acd07f;--amber:#e5b96b;--amber-soft:#2b2411;
  --code:#0e0d0b;--code-text:#f1ede4;--superficie:#0f0e0c;--superficie-funda:#0b0a09;
  --sombra-flutua:0 12px 32px rgb(0 0 0 / .5);
  color-scheme:dark;
}
/* Tokens — escuro (sistema, quando o leitor ainda não escolheu) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#161512;--bg-2:#1e1d19;--card:#1c1b17;--text:#ece8df;--muted:#aaa397;--line:#35332c;--line-2:#57534a;
  --blue:#9fc2ec;--blue-2:#c6dbf5;--blue-soft:#1d2733;
  --vinho:#eba1ae;--cyan:#72caca;--green:#acd07f;--amber:#e5b96b;--amber-soft:#2b2411;
  --code:#0e0d0b;--code-text:#f1ede4;--superficie:#0f0e0c;--superficie-funda:#0b0a09;
  --sombra-flutua:0 12px 32px rgb(0 0 0 / .5);
  color-scheme:dark;
}}
@media (min-width:768px){:root{--gutter:24px}}

/* Cor de cada assunto (--acento). Só pinta rótulo, régua e sublinhado — nunca fundo grande. */
.pilar-aprender-ia{--acento:var(--blue)}
.pilar-inteligencia-artificial{--acento:var(--vinho)}
.pilar-commodities-do-futuro{--acento:var(--cyan)}
.pilar-mercado-de-trabalho{--acento:var(--green)}
.pilar-investimentos{--acento:var(--amber)}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:18px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:anywhere}
body > main{flex:1 0 auto}
h1,h2,h3,h4,p,ul,ol,pre,figure,blockquote{margin:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:650;letter-spacing:-.01em;line-height:1.2}
h1{font-size:clamp(32px,6.4vw,50px);font-weight:700;line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(25px,4.6vw,34px)}
h3{font-size:clamp(20px,3vw,23px);line-height:1.3}
h4{font-size:18px}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--blue-2);text-decoration-thickness:2px}
code,kbd,pre{font-family:var(--mono);font-size:.9em}
pre{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
::selection{background:var(--blue-soft);color:var(--text)}
/* Foco bem visível: amarelo com tinta, como nos serviços públicos (GOV.UK). */
:focus-visible{outline:3px solid #f2c200;outline-offset:0;box-shadow:0 0 0 6px var(--text)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Estrutura */
.wrap{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}
.leitura{max-width:var(--leitura)}
.pular{position:absolute;left:var(--gutter);top:-100px;z-index:100;background:var(--text);color:var(--bg);padding:10px 16px;font-weight:700;text-decoration:none}
.pular:focus{top:8px;color:var(--bg)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Utilitários de texto */
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.resumo{color:var(--muted);font-size:20px;line-height:1.5;max-width:52ch}
.meta{font-size:15px;line-height:1.45;color:var(--muted)}

/* Etiqueta de assunto (uso antigo; o site novo usa .linha-rotulo). A marca >_ fica só no logo. */
.tag{font-size:15px;font-weight:700;line-height:1.4;color:var(--acento,var(--blue))}
.tag a{color:inherit;text-decoration:none}
.tag a:hover{text-decoration:underline}
.tag-invest{color:var(--amber)}

/* Link com seta: "vá para lá". A seta é texto, sempre visível (não depende de passar o mouse). */
.link-seguir{display:inline-block;padding-block:10px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
.link-seguir::after{content:"→";margin-left:.35em}

/* Caixa */
.box{background:var(--card);border:1px solid var(--line-2);border-radius:var(--raio);padding:20px}
/* Estado vazio: diz o que está acontecendo e aponta um caminho */
.vazio{display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted)}
.vazio strong{color:var(--text);font-size:19px}

/* Botões: retângulo, texto forte, uma ação por bloco */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font:700 17px/1.2 var(--sans);
  border-radius:var(--raio);padding:10px 20px;border:2px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-primario{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-primario:hover{background:var(--blue);border-color:var(--blue);color:#fff}
/* Sobre azul claro (tema escuro) o branco some: o texto vira a cor do fundo. */
:root[data-theme="dark"] :is(.btn-primario:hover,.chip[aria-current="true"]){color:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.btn-primario:hover,.chip[aria-current="true"]){color:var(--bg)}}
.btn-secundario{background:transparent;color:var(--text);border-color:var(--text)}
.btn-secundario:hover{background:var(--text);color:var(--bg)}
.btn-grande{min-height:56px;padding:0 28px;font-size:18px}

/* Aviso de investimento */
.aviso-invest{border-left:4px solid var(--amber);background:var(--amber-soft);color:var(--text);padding:10px 14px;font-size:16px}

/* ── Cabeçalho ──────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line-2)}
.topo-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 19px/1.2 var(--serif);letter-spacing:-.01em;color:var(--text);text-decoration:none;white-space:nowrap;min-width:0}
.logo:hover{color:var(--text);text-decoration:none}
.logo span{font:600 16px var(--mono);color:var(--blue)}
.topo-acoes{display:flex;align-items:center;gap:8px;flex:none}
.topo-botao{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--raio);
  background:transparent;color:var(--text);font:700 16px/1 var(--sans);text-decoration:none;cursor:pointer}
.topo-botao:hover{border-color:var(--text);color:var(--text);text-decoration:none}
.topo-botao svg{width:18px;height:18px;flex:none}
kbd{font:500 12px/1 var(--mono);color:var(--muted);border:1px solid var(--line-2);border-radius:var(--raio);padding:3px 5px}
.busca-atalho{display:none}
.btn-exclusivo{display:none}
.tema{display:none;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-2);border-radius:var(--raio);background:transparent;color:var(--text);cursor:pointer}
.tema:hover{border-color:var(--text)}
.tema svg{width:18px;height:18px}
.tema .icone-sol{display:none}
:root[data-theme="dark"] .tema .icone-sol{display:block}
:root[data-theme="dark"] .tema .icone-lua{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema .icone-sol{display:block}
  :root:not([data-theme="light"]) .tema .icone-lua{display:none}
}
/* Celular: o nome inteiro do site cabe ao lado de "Buscar" e "Menu" (nunca com reticências). */
@media (max-width:479px){
  .topo-linha{gap:6px}
  .logo{font-size:17px}
  .logo span{display:none}
  .topo-botao{padding:0 10px;gap:5px}
  .topo-acoes{gap:6px}
}
@media (max-width:339px){.topo-botao svg{display:none}}

/* Menu (sem JavaScript: <details>) */
.menu-movel summary{list-style:none}
.menu-movel summary::-webkit-details-marker{display:none}
.menu-movel[open] summary{background:var(--text);color:var(--bg);border-color:var(--text)}
.menu-movel-painel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:2px solid var(--text);box-shadow:var(--sombra-flutua);
  max-height:calc(100dvh - 64px);overflow-y:auto}
.menu-movel-painel ul{list-style:none;margin:0 auto;padding:4px var(--gutter) 12px;max-width:var(--largura)}
.menu-movel-painel a,.menu-tema{display:flex;align-items:center;width:100%;min-height:52px;color:var(--text);font:700 18px/1.3 var(--sans);text-decoration:none;
  border:0;border-bottom:1px solid var(--line);background:none;padding:0;cursor:pointer;text-align:left}
.menu-movel-painel a::after{content:"›";margin-left:auto;font-size:24px;color:var(--muted)}
.menu-movel-painel a:hover{color:var(--blue)}
.menu-movel-painel a[aria-current="page"]{color:var(--blue);text-decoration:underline;text-underline-offset:.25em}
.menu-tema{color:var(--muted);font-weight:400;border-bottom:0}

/* Faixa dos assuntos: só no computador (≥1024px). Abaixo disso, os assuntos ficam no "Menu". */
.pilares{display:none;border-top:1px solid var(--line)}
.pilares ul{display:flex;gap:0 20px;list-style:none;margin:0 auto;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pilares li{flex:none}
.pilares a{display:inline-flex;align-items:center;min-height:48px;color:var(--text);text-decoration:none;font-size:16px;font-weight:700;
  border-bottom:4px solid transparent;padding-top:4px}
.pilares a:hover{border-bottom-color:var(--line-2);color:var(--text)}
.pilares a[aria-current="page"]{border-bottom-color:var(--acento,var(--text))}

@media (min-width:640px){
  .tema{display:inline-grid}
  .btn-exclusivo{display:inline-flex}
  .busca-atalho{display:inline-block}
}
@media (min-width:1024px){
  .menu-movel{display:none}
  .pilares{display:block}
  .pilares ul{overflow:visible;flex-wrap:wrap}
}
/* Âncoras (#conteudo, #passo-N) param abaixo do cabeçalho fixo: só a linha do logo no celular, logo + assuntos no computador. */
#conteudo,.passo{scroll-margin-top:84px}
@media (min-width:1024px){#conteudo,.passo{scroll-margin-top:130px}}

/* ── Paleta de busca (Ctrl K) ───────────────────────────────── */
.paleta{width:min(640px,calc(100% - 2 * var(--gutter)));max-height:min(560px,calc(100vh - 96px));max-height:min(560px,calc(100dvh - 96px));margin:72px auto auto;padding:0;
  border:2px solid var(--text);border-radius:var(--raio);background:var(--bg);color:var(--text);box-shadow:var(--sombra-flutua);overflow:auto}
.paleta::backdrop{background:rgb(27 26 23 / .5)}
.paleta-form{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line-2)}
.paleta-form svg{width:18px;height:18px;color:var(--muted);flex:none}
.paleta-form input{flex:1;min-width:0;min-height:56px;border:0;outline:0;background:transparent;color:var(--text);font:18px var(--sans)}
.paleta-form input::placeholder{color:var(--muted)}
.paleta-titulo{padding:12px 16px 4px;font-size:14px;font-weight:700;color:var(--muted)}
.paleta-lista{list-style:none;margin:0;padding:0 8px 8px}
.paleta-lista li[hidden]{display:none}
.paleta-lista a{display:flex;align-items:center;min-height:48px;padding:0 10px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.paleta-lista a:hover,.paleta-lista a:focus-visible{background:var(--blue-soft);color:var(--blue)}
.paleta-rodape{padding:10px 16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* ── Página de busca ────────────────────────────────────────── */
.pagina{padding-block:32px 64px;display:grid;gap:16px;align-content:start}
.busca-form{display:flex;gap:0;flex-wrap:nowrap;max-width:640px}
.busca-form input{flex:1 1 auto;min-width:0;min-height:56px;padding:0 14px;border:2px solid var(--text);border-right:0;border-radius:var(--raio) 0 0 var(--raio);background:var(--card);color:var(--text);font:18px var(--sans)}
.busca-form .btn{border-radius:0 var(--raio) var(--raio) 0;min-height:56px}
.resultados{list-style:none;margin:8px 0 0;padding:0;display:grid}
.resultados li{padding:18px 0;border-top:1px solid var(--line);display:grid;gap:4px}
.resultados h2{font-size:21px;line-height:1.3}
.resultados h2 a{color:var(--text);text-decoration-color:var(--line-2)}
.resultados h2 a:hover{color:var(--blue);text-decoration-color:currentColor}

/* ── Rodapé ─────────────────────────────────────────────────── */
.rodape{margin-top:64px;background:var(--superficie-funda);color:var(--code-text);font-size:16px}
.rodape .logo,.rodape .rodape-base p{color:#fff}
.rodape .logo:hover{color:#fff}
.rodape .logo span{color:var(--blue-on-dark)}
.rodape .muted,.rodape .meta,.rodape .rodape-nota{color:var(--muted-on-dark)}
.rodape-grade{display:grid;gap:32px;padding-block:40px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rodape-marca{grid-column:1 / -1;display:grid;gap:8px;align-content:start}
.rodape-titulo{font:700 15px/1.4 var(--sans);color:var(--muted-on-dark);margin-bottom:8px}
.rodape ul{list-style:none;margin:0;padding:0;display:grid}
.rodape nav a{display:inline-flex;align-items:center;min-height:44px;color:#f1ede4;text-decoration:underline;text-decoration-color:var(--line-on-dark);text-underline-offset:.25em}
.rodape nav a:hover{color:#fff;text-decoration-color:currentColor}
.rodape-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:16px 32px;border-top:1px solid var(--line-on-dark);font-size:14px}
@media (min-width:768px){
  .rodape-grade{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}
  .rodape-marca{grid-column:auto}
}

/* ── Peças comuns de conteúdo ───────────────────────────────── */
.selo{display:flex;flex-wrap:wrap;gap:2px 0;font-size:15px;line-height:1.5;color:var(--muted)}
.selo > span + span::before{content:"·";margin-inline:8px}
.capa{display:block;text-decoration:none;overflow:hidden;border-radius:var(--raio);background:var(--bg-2)}
.capa-3x2{aspect-ratio:3 / 2}
.capa img{width:100%;height:100%;object-fit:cover}
article h2 a,article h3 a{color:var(--text)}
article h2 a:hover,article h3 a:hover{color:var(--blue)}

/* Seções: régua grossa em cima, título grande. É o que separa um bloco do outro — não uma caixa. */
.secao{display:grid;gap:12px;border-top:4px solid var(--text);padding-top:16px}
.secao-titulo{font-size:clamp(24px,4.4vw,30px)}
.secao-cabecalho{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.secao-explica{color:var(--muted);max-width:60ch}

/* ── Listas editoriais (o formato padrão de listar conteúdo) ─── */
.linhas{list-style:none;margin:0;padding:0;display:grid}
.linhas > li{border-bottom:1px solid var(--line)}
.linhas > li:last-child{border-bottom:0}
.linha{display:grid;gap:4px;padding-block:16px;min-width:0}
.linha-rotulo{font-size:15px;font-weight:700;line-height:1.4;color:var(--acento,var(--muted))}
.linha-titulo{font-size:clamp(20px,3.4vw,23px);line-height:1.3}
/* O título é o link: sublinhado sempre visível (no celular não existe "passar o mouse"). */
.linha-titulo a{color:var(--text);text-decoration-color:color-mix(in srgb,var(--acento,var(--blue)) 55%,transparent);text-decoration-thickness:2px}
.linha-titulo a:hover{color:var(--acento,var(--blue));text-decoration-color:currentColor}
.linha-resumo{color:var(--muted);font-size:17px;line-height:1.5;max-width:62ch}
.linha-meta{font-size:15px;color:var(--muted)}
.linha-aviso{font-size:14px;color:var(--amber)}
.linha-grande .linha-titulo{font-size:clamp(26px,5vw,36px);line-height:1.15;letter-spacing:-.015em}
.linha-grande .linha-resumo{font-size:19px}
.linha-capa{width:100%;aspect-ratio:3 / 2;object-fit:cover;border-radius:var(--raio);margin-bottom:8px}
@media (min-width:900px){
  .linha-grande:has(.linha-capa){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:32px;align-items:start}
  .linha-grande:has(.linha-capa) .linha-capa{grid-row:1 / span 5;margin:0}
}

/* Lista de entradas: uma linha = um link, com seta à direita (padrão GOV.UK). */
.entradas,.assuntos{list-style:none;margin:0;padding:0;display:grid}
.entradas > li,.assuntos > li{border-bottom:1px solid var(--line)}
.entrada,.assunto{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;min-height:64px;padding-block:14px;
  color:var(--text);text-decoration:none}
.entrada::after,.assunto::after{content:"›";grid-column:2;grid-row:1 / span 2;font:400 34px/1 var(--sans);color:var(--acento,var(--blue))}
.entrada-nome,.assunto-nome{font-weight:700;font-size:20px;line-height:1.3;color:var(--acento,var(--blue));text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.entrada-exemplos,.assunto-chamada{grid-column:1;color:var(--text);font-size:17px;line-height:1.45}
.entrada:hover .entrada-nome,.assunto:hover .assunto-nome{text-decoration-thickness:3px}
.entrada:hover,.assunto:hover{color:var(--text);text-decoration:none;background:color-mix(in srgb,var(--acento,var(--blue)) 5%,transparent)}

/* ── Home ─────────────────────────────────────────────────────
   Abertura sem caixa (só a busca é para tocar), depois três listas. */
.home{padding-block:32px 8px;display:grid;gap:48px}
.abertura{display:grid;gap:14px;max-width:760px}
.abertura-texto{font-size:clamp(19px,2.6vw,22px);line-height:1.5;color:var(--muted);max-width:46ch}
.busca-home{display:grid;gap:8px;margin-top:10px;max-width:640px}
.busca-home-rotulo{font-weight:700;font-size:19px}
.busca-home-campo{display:flex;min-width:0}
.busca-home-campo input{flex:1;min-width:0;min-height:56px;padding:0 14px;border:2px solid var(--text);border-right:0;border-radius:var(--raio) 0 0 var(--raio);
  background:var(--card);color:var(--text);font:18px var(--sans)}
.busca-home-campo input::placeholder{color:var(--muted)}
.busca-home-campo .btn{min-height:56px;border-radius:0 var(--raio) var(--raio) 0}
@media (max-width:374px){.busca-home-campo .btn{padding-inline:14px}}
.home-secao{display:grid;gap:4px;align-content:start;border-top:4px solid var(--text);padding-top:16px}
.home-secao h2{margin-bottom:4px}
.home-secao > p{margin-top:8px}
/* Computador: as duas listas curtas lado a lado (a seta fica perto do texto); os novos em duas colunas. */
@media (min-width:1024px){
  .home{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
  .abertura,.home-recentes{grid-column:1 / -1}
  .home-recentes .linhas{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
  .home-recentes .linhas > li:nth-last-child(2):nth-child(odd){border-bottom:0}
}

/* "Comece por aqui": lista numerada de guias */
.lista-links{list-style:none;margin:0;padding:0;display:grid;counter-reset:passo}
.lista-links > li{border-bottom:1px solid var(--line);counter-increment:passo}
.lista-links a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 14px;min-height:64px;padding-block:12px;text-decoration:none;color:var(--text)}
.lista-links a::before{content:counter(passo);grid-row:1 / span 2;font:700 30px/1 var(--serif);color:var(--blue);min-width:24px}
.lista-links a::after{content:"›";grid-column:3;grid-row:1 / span 2;font:400 34px/1 var(--sans);color:var(--blue)}
.lista-links-titulo{font-weight:700;font-size:19px;line-height:1.35;color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.lista-links-meta{grid-column:2;font-size:15px;color:var(--muted)}
.lista-links a:hover .lista-links-titulo{text-decoration-thickness:3px}

.assunto-texto{display:grid;gap:2px;min-width:0}
.assunto-total{grid-column:2;grid-row:1 / span 2;font-size:15px;color:var(--muted);text-align:right;white-space:nowrap}
.assunto{grid-template-columns:minmax(0,1fr) auto auto}
.assunto::after{grid-column:3}
@media (max-width:479px){
  .assunto{grid-template-columns:minmax(0,1fr) auto}
  .assunto::after{grid-column:2;grid-row:1 / span 3}
  .assunto-total{grid-column:1;grid-row:auto;text-align:left}
}
.convite{border-top:1px solid var(--line);padding-top:16px}
.sobre-assunto .prosa{max-width:var(--leitura)}

/* ── Navegação: onde estou, como volto ──────────────────────── */
/* Trilha discreta acima do título (substitui o "← Voltar" grande). Link com 44px de altura para o dedo. */
.trilha-nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-size:15px;color:var(--muted)}
.trilha-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);font-weight:700;text-decoration:none}
.trilha-nav a:hover{text-decoration:underline;text-underline-offset:.2em}
.trilha-sep{color:var(--line-2)}
.voltar-linha{margin:0}
.voltar{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:17px;font-weight:700;color:var(--blue)}
.voltar span{font-size:20px;line-height:1;text-decoration:none;display:inline-block}

.filtro-ativo{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:16px}
.filtro-ativo-rotulo{color:var(--muted)}
.filtro-ativo strong{color:var(--text)}
.filtro-limpar{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--text);border-radius:var(--raio);
  color:var(--text);font-weight:700;font-size:15px;text-decoration:none}
.filtro-limpar:hover{background:var(--text);color:var(--bg)}

.saidas{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;padding-top:16px;border-top:1px solid var(--line);font-size:17px}
.saidas-rotulo{color:var(--muted);flex-basis:100%}
.saidas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px}
.saidas a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}

/* Escolha de ferramenta, profissão ou objetivo: mesma lista de entradas */
.escolhas{list-style:none;margin:0;padding:0;display:grid;column-gap:32px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.escolhas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.escolhas > li{border-bottom:1px solid var(--line)}
.escolhas a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding-block:10px;text-decoration:none;color:var(--text)}
.escolhas a::after{content:"›";font-size:28px;line-height:1;color:var(--blue)}
.escolha-nome{font-weight:700;color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;margin-right:auto}
.escolha-conta{font-size:15px;color:var(--muted)}
.escolha-vazia .escolha-nome{color:var(--muted);text-decoration-color:var(--line-2)}

/* ── Hubs e páginas de assunto ──────────────────────────────── */
.pagina-larga{padding-block:24px 8px;display:grid;gap:32px;align-content:start}
.hub-topo{display:grid;gap:10px;max-width:var(--leitura)}
.hub-acao{margin:8px 0 0}
.hub-acao .btn{white-space:normal;text-align:left;justify-content:flex-start}
.temas{display:grid;gap:8px}
.temas-rotulo{font-weight:700;font-size:16px}
.grade{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grade{grid-template-columns:repeat(3,minmax(0,1fr))}.grade-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grade > li{display:grid}

/* Cartão: só onde há conteúdo para usar ali mesmo (prompt com Copiar, planos). Borda, sem sombra. */
.card{position:relative;background:var(--card);border:1px solid var(--line-2);border-radius:var(--raio);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card:hover{border-color:var(--text)}
.card h3 a::after{content:"";position:absolute;inset:0}
.card .prompt-copiar{position:relative;z-index:1}
.card:focus-within{border-color:var(--text)}
.card h3{font-size:20px;line-height:1.3}
.card h3 a{color:var(--text);text-decoration-color:var(--line-2);text-decoration-thickness:2px}
.card h3 a:hover{color:var(--blue);text-decoration-color:currentColor}
.card > .muted{font-size:16px}
.card-rodape{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}

.badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0;font-size:15px;color:var(--muted)}
.badge + .badge::before{content:"·";margin-inline:6px}
.badge-nivel{color:var(--text);font-weight:700}

.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--raio);
  color:var(--text);background:transparent;text-decoration:none;font-size:16px;font-weight:700}
.chip:hover{border-color:var(--text);color:var(--text)}
.chip[aria-current="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.filtro-grupo{display:grid;gap:8px}
.filtro-titulo{font-size:16px;font-weight:700;color:var(--text)}

.filtros-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.filtro-campo{display:grid;gap:4px;flex:1 1 180px}
.filtro-campo select{min-height:48px;padding:0 12px;border:2px solid var(--text);border-radius:var(--raio);background:var(--card);color:var(--text);font:17px var(--sans)}
.paginacao{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ── Página de conteúdo ─────────────────────────────────────── */
.conteudo{max-width:calc(var(--leitura) + 2 * var(--gutter));margin-block:24px 8px;display:grid;gap:28px}
.conteudo > *{min-width:0}
.conteudo-topo{display:grid;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.conteudo-topo h1{font-size:clamp(32px,6vw,46px)}
.conteudo-capa{margin:0}
.conteudo-rodape{display:grid;gap:32px;padding-top:8px}
.conteudo-nota{padding-top:16px;border-top:1px solid var(--line)}
.relacionados{display:grid;gap:8px}
.relacionados-lista{list-style:none;margin:0;padding:0}
.relacionados-lista li{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.relacionados-lista a{color:var(--text);font:600 20px/1.35 var(--serif);text-decoration-color:var(--line-2);text-decoration-thickness:2px}
.relacionados-lista a:hover{color:var(--blue);text-decoration-color:currentColor}

/* Texto do conteúdo (HTML do MarkdownRenderer) */
.prosa{display:grid;gap:18px;font-family:var(--serif);font-size:19px;line-height:1.75}
.prosa > *{margin:0;min-width:0}
.prosa h2{font-size:clamp(25px,4vw,30px);margin-top:16px}
.prosa h3{font-size:22px;margin-top:8px}
.prosa ul,.prosa ol{padding-left:24px;display:grid;gap:6px}
.prosa blockquote{border-left:3px solid var(--line-2);padding-left:16px;color:var(--muted)}
.prosa :not(pre) > code{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--raio);padding:1px 5px;font-size:.85em}
.prosa pre{background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:var(--raio);padding:14px 16px;font-size:15px;line-height:1.6}
/* Tabela larga rola sozinha; a página nunca ganha rolagem lateral. */
.prosa table{display:block;width:100%;max-width:100%;overflow-x:auto;font-size:16px;font-family:var(--sans)}
.prosa th,.prosa td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
/* Print de tela do passo a passo: largura toda, borda fina para separar a tela do fundo da página. */
.prosa img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--raio);background:var(--card)}
.prosa a.externo::after{content:" ↗";font-size:.8em}

/* Blocos :::  — régua à esquerda, sem caixa */
.bloco{padding:2px 0 2px 18px;border-left:4px solid var(--line-2);display:grid;gap:8px;font-size:18px}
.bloco > *{margin:0}
.bloco ul,.bloco ol{padding-left:22px}
.bloco-titulo{font:700 16px/1.4 var(--sans);color:var(--text)}
.bloco-dica{border-left-color:var(--green)}
.bloco-dica .bloco-titulo{color:var(--green)}
.bloco-aviso{border-left-color:var(--amber);background:var(--amber-soft);padding-block:12px;padding-right:14px}
.bloco-aviso .bloco-titulo{color:var(--amber)}
.bloco-resultado{border-left-style:dashed}
.bloco-exclusivo{background:var(--superficie);color:var(--code-text);border-left-color:var(--blue-on-dark);padding:16px 18px}
.bloco-exclusivo .bloco-titulo{color:var(--blue-on-dark)}
.bloco-exclusivo a{color:var(--blue-on-dark)}
.bloco-cta{font-weight:700}
.bloco-fontes{font-size:16px;font-family:var(--sans)}
.bloco-fontes time{color:var(--muted);font-size:15px}

/* Passo a passo: número grande na serifa, régua fina ligando os passos */
/* Índice do guia, logo abaixo do título: botão de começar + lista dos passos (cada um leva ao passo). */
.passos-indice{display:grid;gap:10px;justify-items:start;max-width:var(--leitura);margin:4px 0 8px;padding:16px;border:1px solid var(--line);
  border-left:4px solid var(--blue);background:var(--card);border-radius:var(--raio)}
.passos-comecar{width:100%}
@media (min-width:640px){.passos-comecar{width:auto}}
.passos-indice-titulo{margin:6px 0 0;font-weight:700;font-size:16px}
.passos-lista{margin:0;padding-left:1.4em;display:grid;gap:0}
.passos-lista li{padding-left:4px}
.passos-lista a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);font-size:17px}
.passo{position:relative;padding:0 0 8px 46px;display:grid;gap:10px}
.passo-titulo{display:flex;align-items:baseline;gap:14px;font-size:22px;margin-left:-46px}
.passo-n{flex:none;display:inline-block;min-width:32px;color:var(--blue);font:700 34px/1 var(--serif);text-align:left}

/* Prompt: o texto para copiar. Mono aqui tem função — é o que vai ser colado na ferramenta. */
.bloco-prompt{background:var(--card);color:var(--text);border:1px solid var(--line-2);border-left:4px solid var(--blue);border-radius:var(--raio);overflow:hidden}
.prompt-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-bottom:1px solid var(--line);font:700 15px var(--sans);color:var(--muted)}
.prompt-copiar{min-height:44px;font:700 16px var(--sans);color:var(--bg);background:var(--text);border:0;border-radius:var(--raio);padding:0 18px;cursor:pointer}
.prompt-copiar:hover{background:var(--blue);color:#fff}
.bloco-prompt pre{margin:0;padding:14px;background:none;white-space:pre-wrap;font:15px/1.65 var(--mono);color:var(--text);border:0;border-radius:0}
.bloco-prompt code{background:none;border:0;padding:0;color:inherit;font:inherit}
.bloco-prompt mark.var{background:var(--blue-soft);color:var(--blue);border-radius:var(--raio);padding:0 3px;font-weight:700}
.bloco-prompt-curto pre{max-height:9.9em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}

.tabela-rolagem{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--raio)}
.comparativo{width:100%;min-width:480px;font-size:16px}
.comparativo th,.comparativo td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.comparativo thead th{background:var(--bg-2);font-weight:700}
.comparativo tbody th{font-weight:700}
.comparativo tr:last-child > *{border-bottom:0}

/* Trilha */
.trilha-lista{list-style:none;margin:16px 0 0;padding:0;display:grid}
.trilha-lista li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.trilha-lista li > div{display:grid;gap:4px}
.trilha-lista h3{font-size:21px;line-height:1.3}
.trilha-lista h3 a{color:var(--text);text-decoration-color:var(--line-2);text-decoration-thickness:2px}
.trilha-lista h3 a:hover{color:var(--blue);text-decoration-color:currentColor}
.trilha-n{font:700 30px/1 var(--serif);color:var(--blue)}

/* ── Glossário ──────────────────────────────────────────────── */
.letras{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.letras a{display:grid;place-items:center;min-width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--raio);font:700 18px var(--serif);text-decoration:none;color:var(--text)}
.letras a:hover{border-color:var(--text);background:var(--text);color:var(--bg)}
.glossario{display:grid;gap:28px}
.glossario-letra{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;scroll-margin-top:130px;border-top:4px solid var(--text);padding-top:12px}
.glossario-letra-titulo{font:700 32px/1 var(--serif);color:var(--text)}
.glossario dl,.glossario-relacionados{margin:0;display:grid}
.glossario-item{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.glossario-item:last-child{border-bottom:0}
.glossario-item dt a{font:600 20px/1.35 var(--serif);color:var(--text);text-decoration-color:var(--line-2);text-decoration-thickness:2px}
.glossario-item dt a:hover{color:var(--blue);text-decoration-color:currentColor}
.glossario-item dd{margin:0;font-size:17px;color:var(--muted)}

/* Link automático: sublinhado pontilhado; definição curta ao passar o mouse ou focar pelo teclado.
   No toque, o link abre a página do termo (que começa pela definição). */
a.termo{color:inherit;text-decoration:underline dotted var(--blue);text-decoration-thickness:2px;text-underline-offset:.22em;position:relative;cursor:help}
a.termo:hover{color:var(--blue)}
a.termo::after{content:attr(data-definicao);display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:40;width:max-content;max-width:min(300px,70vw);
  padding:10px 12px;border-radius:var(--raio);background:var(--code);color:var(--code-text);font:400 15px/1.45 var(--sans);box-shadow:var(--sombra-flutua);white-space:normal;pointer-events:none}
@media (hover:hover){a.termo:hover::after{display:block}}
a.termo:focus-visible::after{display:block}

/* ── Área Exclusiva ─────────────────────────────────────────── */
.exclusivo-inclui .card h3{font-size:20px}
.planos{list-style:none;margin:16px 0 8px;padding:0;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.planos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plano{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 20px;border:1px solid var(--line-2);border-radius:var(--raio);background:var(--card)}
.plano h3{font-size:24px}
.plano-preco{font-size:16px;font-weight:700;color:var(--muted);margin-top:auto;padding-top:8px}
.plano .btn[disabled]{opacity:.6;cursor:not-allowed}
.card-escuro-tag{font-size:14px;font-weight:700;color:var(--blue-on-dark)}

.avise-me{display:grid;gap:24px;padding:24px;border-radius:var(--raio);background:var(--superficie);color:var(--code-text);scroll-margin-top:130px}
@media (min-width:900px){.avise-me{grid-template-columns:repeat(2,minmax(0,1fr));padding:32px;align-items:start}}
.avise-texto{display:grid;gap:10px}
.avise-texto h2{color:#fff;font-size:clamp(24px,4vw,30px)}
.avise-form{display:grid;gap:10px}
.avise-rotulo{font-weight:700;color:#fff}
.avise-form input[type="email"]{min-height:52px;padding:0 14px;border:2px solid var(--line-on-dark);border-radius:var(--raio);background:#12110e;color:#fff;font:18px var(--sans)}
.avise-form input[type="email"]:focus{border-color:var(--blue-on-dark)}
.avise-form input[aria-invalid="true"]{border-color:#f0a3a3}
.avise-consentimento{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:16px;line-height:1.5;margin-top:4px}
.avise-consentimento input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--blue-on-dark)}
.avise-consentimento a{color:var(--blue-on-dark)}
.avise-form .btn{justify-self:start;margin-top:6px;background:#fff;color:var(--superficie);border-color:#fff}
.avise-form .btn:hover{background:var(--blue-on-dark);border-color:var(--blue-on-dark);color:var(--superficie)}
.avise-erro{color:#f0a3a3;font-size:16px}
.conteudo .avise-erro{color:var(--amber)}
.avise-ok{display:grid;gap:6px;padding:16px;border-radius:var(--raio);border-left:4px solid var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.avise-me .avise-ok{color:#fff}
/* Campo-isca fora da tela (sem display:none, que alguns robôs detectam) */
.isca{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Página "Peça um guia" (/quero-aprender) ────────────────── */
.pagina-estreita{padding-block:24px 16px;display:grid;gap:24px;align-content:start;max-width:var(--leitura)}
.pedido-topo{display:grid;gap:12px}
.pedido-topo h1{font-size:clamp(28px,5vw,38px);line-height:1.15}
.pedido-credito{padding:12px 16px;border-left:4px solid var(--blue);background:var(--blue-soft);font-size:17px;line-height:1.55}
.pedido-form{display:grid;gap:6px;padding-top:20px;border-top:4px solid var(--text)}
.form-rotulo{font-weight:700;font-size:18px;margin-top:16px}
.pedido-form > .form-rotulo:first-of-type{margin-top:0}
.form-obrigatorio,.form-opcional{font-weight:400;font-size:15px;color:var(--muted)}
.form-ajuda{font-size:16px;line-height:1.5;color:var(--muted);margin-bottom:2px}
.pedido-form textarea,.pedido-form input[type="text"],.pedido-form input[type="email"],.pedido-form select{
  width:100%;padding:12px 14px;border:2px solid var(--text);border-radius:var(--raio);background:var(--card);color:var(--text);font:18px/1.5 var(--sans)}
.pedido-form input[type="text"],.pedido-form input[type="email"],.pedido-form select{min-height:52px;padding-block:0}
.pedido-form textarea{resize:vertical;min-height:120px}
.pedido-form [aria-invalid="true"]{border-color:var(--amber)}
.form-erro{color:var(--amber);font-size:16px;font-weight:700;margin-top:2px}
.pedido-form .btn{justify-self:start;margin-top:20px}
.pedido-form .meta{margin-top:10px}
/* Depois de enviar: confirmação com cara de recibo, não de alerta. */
.recebido{display:grid;gap:12px;padding:20px 0 20px 20px;border-left:4px solid var(--green)}
.recebido-marca{font-size:15px;font-weight:700;color:var(--green)}
.recebido h1{font-size:clamp(26px,4.4vw,34px);line-height:1.2}
.recebido-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}