/* Estilo das páginas secundárias (conteúdo e política).
   O app em index.html continua com CSS próprio inline — não importe isto lá.
   Os tokens abaixo são uma cópia dos de index.html: se mudar cor por lá, mude aqui. */
:root{
  --asfalto:#2A2E35;
  --concreto:#E6E7EA;
  --papel:#FFFFFF;
  --tinta:#1D2026;
  --tinta-suave:#555B66;
  --espuma:#A9A4FF;
  --espuma-forte:#6C63E8;
  --faixa:#F2C230;
  --alerta:#D8452F;
  --linha:#C9CCD2;
  --bg:var(--concreto);
  --card:var(--papel);
  --text:var(--tinta);
  --muted:var(--tinta-suave);
  --border:var(--linha);
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow","Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1E23; --card:#262A31; --text:#EEF0F3; --muted:#AEB4BE;
    --border:#3A3F48; --espuma-forte:#A9A4FF;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.6}
:focus-visible{outline:3px solid var(--espuma-forte);outline-offset:2px}
.wrap{max-width:680px;margin:0 auto;padding:20px 18px 64px}

/* Marca */
.marca{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:32px}
.marca a{color:inherit;text-decoration:none}
.logo{font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:-.5px}
.logo span{display:inline-block;transform:skewX(-12deg)}
.marca small{color:var(--muted);font-size:14px}

/* Migalhas */
.migalhas{font-size:14px;color:var(--muted);margin:0 0 18px}
.migalhas a{color:var(--muted)}

/* Texto */
h1{font-family:var(--f-display);font-weight:800;font-size:clamp(38px,9vw,58px);line-height:.95;margin:0 0 14px;letter-spacing:-1px}
h2{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,6vw,34px);line-height:1.05;margin:40px 0 10px}
h3{font-family:var(--f-display);font-weight:700;font-size:24px;line-height:1.1;margin:28px 0 8px}
p{margin:0 0 16px}
a{color:var(--espuma-forte)}
.resumo{font-size:19px;color:var(--muted);margin:0 0 8px}
.publicado{font-size:14px;color:var(--muted);margin:0 0 28px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin:0 0 8px}
strong{font-weight:600}

/* Componentes */
.destaque{background:var(--card);border:2px solid var(--border);border-radius:16px;padding:18px 20px;margin:0 0 24px}
.destaque :last-child{margin-bottom:0}
.aviso{border-left:4px solid var(--alerta);background:var(--card);padding:14px 16px;border-radius:6px;margin:0 0 24px}
.aviso :last-child{margin-bottom:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 26px;font-weight:600;cursor:pointer;background:var(--faixa);color:#1D2026;text-decoration:none;min-height:50px}
.chamada{background:var(--card);border:2px solid var(--border);border-radius:16px;padding:22px;margin:36px 0;text-align:center}
.chamada h2{margin-top:0}
.chamada p{color:var(--muted)}

/* Tabela */
.tabela-rolagem{overflow-x:auto;margin:0 0 22px}
table{border-collapse:collapse;width:100%;font-size:16px;min-width:420px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-weight:600;font-family:var(--f-body)}
caption{caption-side:bottom;font-size:14px;color:var(--muted);padding-top:10px;text-align:left}

/* Navegação entre artigos */
.leia-mais{margin:40px 0 0}
.leia-mais ul{list-style:none;padding:0}
.leia-mais li{margin:0 0 10px}
.leia-mais a{display:block;padding:14px 16px;border-radius:14px;background:var(--card);border:2px solid var(--border);color:var(--text);text-decoration:none;font-weight:600}
.leia-mais a small{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:2px}

.rodape{margin-top:48px;padding-top:18px;border-top:2px solid var(--border);font-size:14px;color:var(--muted)}
.rodape p{margin:0 0 8px}
.rodape a{color:var(--muted)}

/* Caixa de lojas de afiliado — mesmo visual do bloco "Pesquisando o próximo
   par" em index.html. Fica hidden por padrão; só aparece se afiliados.js
   encontrar algum link em window.KM_COMPARTILHADO.lojas. */
.nota{font-size:14px;color:var(--muted)}
.lojas{display:flex;flex-direction:column;gap:10px;margin:10px 0 0}
.lojas a{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:var(--card);border:2px solid var(--border);color:var(--text);text-decoration:none;font-weight:600}