/* ============================================================
   enemjuntos.com/blog — o jornal
   Em cima de style.css (tokens, nav, botões, caixas, rodapé).
   Mobile first até 320px: tudo empilha, nada rola de lado.
   ============================================================ */

.blog main{ padding-bottom:clamp(40px,6vw,88px); }
:where(.blog) section{ padding-block:0; }

/* ---------- nav do jornal ---------- */

.jornal-selo{
  font-family:var(--ff-mono); font-size:.58rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; border:2px solid var(--line); padding:3px 6px 2px; margin-left:2px;
}
.nav-links a[aria-current="page"]{ border-bottom-color:var(--azul); }
.nav-sub{ border-top:2px solid var(--line); background:var(--bg); }
.nav-sub-in{ display:flex; flex-wrap:wrap; gap:6px 16px; padding-block:9px; }
.nav-sub a{
  font-family:var(--ff-mono); font-size:.62rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; border-bottom:2px solid transparent;
}
.nav-sub a[aria-current="page"]{ border-bottom-color:var(--azul); }
@media (min-width:861px){ .nav-sub{ display:none; } }
@media (max-width:400px){
  .blog .nav .btn{ padding:9px 10px; font-size:.58rem; letter-spacing:.06em; }
  .blog .brand{ font-size:1.05rem; gap:7px; }
  .jornal-selo{ display:none; }
}

/* ---------- trilha (breadcrumb) ---------- */

.trilha ol{ list-style:none; margin:0; padding:18px 0 0; display:flex; flex-wrap:wrap; gap:4px 0; }
.trilha li{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-mute); }
.trilha li + li::before{ content:"/"; margin:0 8px; opacity:.5; }
.trilha a{ text-decoration:none; border-bottom:1px solid var(--cinza); }
.trilha a:hover{ border-bottom-color:var(--rosa); }

/* ---------- cabeçalho de página ---------- */

.pg-cab{ padding:22px 0 26px; max-width:860px; }
.kicker{ background:var(--fg); color:var(--bg); padding:5px 10px 4px; margin-bottom:16px; text-decoration:none; }
.h1-pg{ font-size:clamp(2rem,6.4vw,3.7rem); line-height:1; margin:14px 0 16px; font-stretch:100%;
  font-family:var(--ff-display); }
.h2-pg{ font-size:clamp(1.3rem,3.2vw,1.8rem); line-height:1.08; margin:0 0 14px; }
.pg-cab .lead{ margin:0 0 10px; }
.meta{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-mute); margin:0; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:var(--ff-mono); font-size:.62rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border:2px solid var(--line); padding:4px 8px 3px; background:var(--surface);
}
/* As cores de área do app (validadas para daltonismo, brain: paleta_dos_graficos). */
.chip-LC,.ponto-LC{ --area:#0072B2; } .chip-CH,.ponto-CH{ --area:#D55E00; }
.chip-CN,.ponto-CN{ --area:#009E73; } .chip-MT,.ponto-MT{ --area:#8E44AD; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .chip-LC, :root:not([data-theme="light"]) .ponto-LC{ --area:#4A8FC7; }
  :root:not([data-theme="light"]) .chip-CH, :root:not([data-theme="light"]) .ponto-CH{ --area:#D07526; }
  :root:not([data-theme="light"]) .chip-CN, :root:not([data-theme="light"]) .ponto-CN{ --area:#22A87C; }
  :root:not([data-theme="light"]) .chip-MT, :root:not([data-theme="light"]) .ponto-MT{ --area:#9E63C9; } }
.chip[class*="chip-"]{ background:var(--area); border-color:var(--area); color:#fff; }
.ponto{ display:inline-block; width:.62em; height:.62em; background:var(--area); border:2px solid var(--line); margin-right:.4em; vertical-align:.06em; }

/* ---------- a questão ---------- */

.questao-pg{ max-width:900px; }
.prova{ margin-bottom:30px; }
.prova-corpo{ padding:clamp(16px,3vw,28px); overflow-wrap:anywhere; }
.prova-corpo p{ max-width:none; }
.prova-corpo img{ max-width:100%; height:auto; margin:14px auto; background:#fff; }
.prova-corpo blockquote,.texto blockquote{ margin:14px 0; padding:4px 0 4px 14px; border-left:4px solid var(--amarelo); }
.comando{ font-weight:600; margin-top:18px; }
.alts{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; }
.alts li{ display:flex; gap:12px; align-items:flex-start; border:2px solid var(--line); padding:10px 12px; background:var(--bg); }
.alts li > div{ min-width:0; flex:1; }
.alts img{ margin:0; max-height:260px; width:auto; }
.letra{
  flex:none; width:28px; height:28px; display:grid; place-items:center;
  font-family:var(--ff-mono); font-weight:800; font-size:.8rem; border:2px solid var(--line); background:var(--surface);
}
.lista-md{ margin:10px 0; padding-left:20px; }

.resposta{ margin-bottom:34px; }
.dica-antes{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-mute); margin:0 0 10px; }
.resposta details{ border:var(--bw) solid var(--line); background:var(--surface); box-shadow:var(--hard); }
.resposta summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 16px; background:var(--amarelo); color:#14121A;
  font-family:var(--ff-mono); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.resposta summary::-webkit-details-marker{ display:none; }
.resposta details[open] summary{ border-bottom:var(--bw) solid var(--line); }
.resposta details[open] summary .arw{ transform:rotate(180deg); }
.resp-corpo{ padding:clamp(16px,3vw,28px); }
.resp-corpo .h2-pg{ margin-top:26px; font-size:clamp(1.15rem,2.6vw,1.4rem); }
.gabarito{ font-size:1.15rem; margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.gabarito strong{ font-family:var(--ff-display); font-size:2rem; line-height:1; color:var(--verde); }
.fonte-gab{ font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); }
.texto p{ max-width:68ch; }
.alts-coment{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.alts-coment li{ display:flex; gap:12px; align-items:flex-start; }
.alts-coment li p{ margin:2px 0 0; min-width:0; }
.alts-coment li.certa .letra{ background:var(--verde); color:#fff; border-color:var(--verde); }
.lembrar{ margin:26px 0 0; padding:14px 16px; border:2px solid var(--line); background:var(--bg); max-width:none; }
.lembrar .label{ display:block; margin-bottom:6px; color:var(--fg-mute); }
.assinatura{ margin:20px 0 0; font-size:.86rem; color:var(--fg-mute); }

/* ---------- chamada para o app ---------- */

.cta-q{ padding:clamp(20px,4vw,34px); margin:34px 0; background:var(--azul); color:#fff; }
.cta-q .label{ background:#fff; color:#14121A; padding:5px 10px 4px; margin-bottom:14px; }
.cta-q p{ color:rgba(255,255,255,.9); margin-bottom:20px; }
.cta-q .btn{ border-color:#14121A; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cta-q{ background:#2A3BB0; } }

/* ---------- cartões e listas ---------- */

.cartoes,.grade-anos{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:600px){ .cartoes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .grade-anos{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:600px) and (max-width:959px){ .grade-anos{ grid-template-columns:repeat(2,1fr); } }
.cartao{
  display:flex; flex-direction:column; gap:6px; height:100%; padding:14px 16px; text-decoration:none;
  border:var(--bw) solid var(--line); background:var(--surface); box-shadow:var(--hard-sm);
  transition:transform .13s ease, box-shadow .13s ease;
}
.cartao:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line); }
.cartao .label{ color:var(--fg-mute); }
.cartao-tit{ font-family:var(--ff-display); font-weight:700; font-size:1.08rem; line-height:1.2; }
.cartao-pe{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-mute); margin-top:auto; }
.cartao-ano{ font-family:var(--ff-display); font-weight:800; font-size:2.4rem; line-height:1; }
.parecidas{ margin:34px 0; }

.anos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.anos a{ font-family:var(--ff-mono); font-size:.72rem; font-weight:700; text-decoration:none; border:2px solid var(--line); padding:5px 9px 4px; background:var(--surface); }
.anos a:hover{ background:var(--amarelo); color:#14121A; }
.anos a[aria-current="page"]{ background:var(--fg); color:var(--bg); }

.area-bloco{ margin:30px 0 10px; }
.area-bloco .h2-pg{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.conta{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); font-weight:700; }
.lista-q{ list-style:none; margin:0; padding:0; border-top:2px solid var(--line); }
.lista-q li{ border-bottom:1px solid var(--cinza); }
.lista-q a{ display:flex; gap:12px; align-items:baseline; padding:10px 2px; text-decoration:none; }
.lista-q a:hover .tit{ text-decoration:underline; text-decoration-color:var(--rosa); text-decoration-thickness:2px; }
.lista-q .num{ flex:none; width:3.2em; font-weight:700; font-size:.8rem; }
.lista-q .num small{ display:block; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); }
.lista-q .tit{ flex:1; min-width:0; line-height:1.35; }
.lista-q .dif{ flex:none; font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-mute); }
@media (max-width:420px){
  .lista-q a{ flex-wrap:wrap; }
  .lista-q .tit{ flex-basis:calc(100% - 3.2em - 12px); }
  .lista-q .dif{ margin-left:calc(3.2em + 12px); }
}

.vizinhas{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:30px; }
@media (min-width:600px){ .vizinhas{ grid-template-columns:1fr 1fr 1fr; } }
.vizinhas a{ display:flex; flex-direction:column; gap:2px; text-decoration:none; border:2px solid var(--line); padding:10px 12px; background:var(--surface); font-weight:600; }
.vizinhas a .label{ color:var(--fg-mute); }
.vizinhas .prox{ text-align:right; }
@media (max-width:599px){ .vizinhas span:empty{ display:none; } .vizinhas .prox{ text-align:left; } }

/* ---------- artigo ---------- */

.artigo-pg{ max-width:860px; }
.artigo-texto{ font-size:1.06rem; }
.artigo-texto h2{ font-size:clamp(1.4rem,3.4vw,2rem); line-height:1.1; margin:40px 0 14px; }
.artigo-texto h3{ margin:28px 0 10px; }
.artigo-texto p,.artigo-texto li{ max-width:68ch; }
.artigo-texto ul,.artigo-texto ol{ padding-left:22px; margin:0 0 1em; }
.artigo-texto li{ margin-bottom:6px; }
.artigo-texto a{ text-decoration-color:var(--rosa); text-decoration-thickness:2px; text-underline-offset:3px; }
/* Link sem espaco (um DOI, uma URL) nao cabe em 320px e estoura a margem: quebra onde precisar. */
.artigo-texto a{ overflow-wrap:anywhere; }
.tabela{ margin:18px 0 22px; border:2px solid var(--line); background:var(--surface); }
.tabela table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tabela th,.tabela td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--cinza); vertical-align:top; }
.tabela th{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; background:var(--bg-2); }
/* Tabela em card na tela estreita: cada linha empilha, rótulo em cima do valor. */
@media (max-width:600px){
  .tabela thead{ display:none; }
  .tabela tr{ display:block; padding:8px 10px; border-bottom:2px solid var(--line); }
  .tabela tr:last-child{ border-bottom:0; }
  .tabela td{ display:block; padding:2px 0; border:0; }
  .tabela td:first-child{ font-weight:700; }
  .tabela td[data-rotulo]{ padding-top:6px; }
  .tabela td[data-rotulo]::before{ content:attr(data-rotulo); display:block; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); }
}

.lista-artigos{ list-style:none; margin:0; padding:0; border-top:var(--bw) solid var(--line); }
.lista-artigos li{ border-bottom:2px solid var(--line); }
.lista-artigos a{ display:flex; flex-direction:column; gap:6px; padding:18px 0; text-decoration:none; }
.lista-artigos .label{ color:var(--fg-mute); }
.la-tit{ font-family:var(--ff-display); font-weight:800; font-size:clamp(1.25rem,3vw,1.7rem); line-height:1.1; }
.lista-artigos a:hover .la-tit{ text-decoration:underline; text-decoration-color:var(--rosa); }
.la-fina{ color:var(--fg-mute); max-width:68ch; }

/* ---------- capa do jornal ---------- */

.cabeca-jornal{ text-align:center; padding:26px 0 20px; border-bottom:var(--bw) solid var(--line); }
.data-jornal{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); margin:0 auto 14px; max-width:none; }
.data-jornal strong{ color:var(--fg); }
.nome-jornal{ font-size:clamp(2.3rem,9vw,6rem); line-height:.95; font-stretch:92%; }
.nome-jornal em{ font-style:normal; color:var(--azul); }
.linha-jornal{ margin:14px auto 0; max-width:52ch; color:var(--fg-mute); }

.manchete{ border-bottom:var(--bw) solid var(--line); }
.manchete-link{ display:block; padding:28px 0 30px; text-decoration:none; max-width:900px; }
.manchete-tit{ font-size:clamp(1.9rem,5.6vw,3.6rem); line-height:1; margin:6px 0 14px; }
.manchete-link:hover .manchete-tit{ text-decoration:underline; text-decoration-color:var(--rosa); text-decoration-thickness:4px; text-underline-offset:6px; }
.manchete .lead{ margin-bottom:20px; }

.colunas{ display:grid; grid-template-columns:1fr; border-bottom:var(--bw) solid var(--line); }
@media (min-width:760px){ .colunas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .colunas{ grid-template-columns:repeat(4,1fr); } }
.coluna{ padding:22px 0; border-bottom:2px solid var(--line); }
.coluna:last-child{ border-bottom:0; }
@media (min-width:760px){
  .coluna{ padding:22px 20px; border-bottom:0; border-left:2px solid var(--line); }
  .coluna:nth-child(2n+1){ border-left:0; padding-left:0; }
  .colunas .coluna:nth-child(-n+2){ border-bottom:2px solid var(--line); }
}
@media (min-width:1100px){
  .coluna:nth-child(2n+1){ border-left:2px solid var(--line); padding-left:20px; }
  .coluna:first-child{ border-left:0; padding-left:0; }
  .colunas .coluna:nth-child(-n+2){ border-bottom:0; }
}
.coluna-tit{ font-size:clamp(1.2rem,2.4vw,1.45rem); margin-bottom:12px; }
.coluna-tit a{ text-decoration:none; border-bottom:4px solid var(--rosa); }
.coluna ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.coluna li a{ display:flex; flex-direction:column; gap:4px; text-decoration:none; }
.col-tit{ font-family:var(--ff-display); font-weight:700; font-size:1.06rem; line-height:1.2; }
.coluna li a:hover .col-tit{ text-decoration:underline; text-decoration-color:var(--rosa); }
.col-fina{ font-size:.9rem; color:var(--fg-mute); line-height:1.4; }

.bloco-questoes{ padding:26px 0 6px; }
.bq-cab p{ color:var(--fg-mute); margin:0; }
.bq-sub{ margin:28px 0 4px; }
.bq-nota{ font-size:.88rem; color:var(--fg-mute); margin:0 0 10px; }