/* ============================================================
   INSTITUTO CRIANÇAS DE FUTURO — BLOG (MARCA V1)

   Depende de tokens.css e base.css. Só define o que o blog usa e
   o base não tem: o índice, a página de artigo e os blocos de
   corpo de texto.

   TRAVA HERDADA DO §33 (tokens.css)
   Teal, amarelo e coral REPROVAM como cor de texto sobre branco e
   sobre off-white. Aqui eles aparecem só como cor gráfica: régua,
   borda, marcador, fundo de tag, ícone. Todo texto é navy,
   txt-secondary ou branco sobre navy. Nenhuma exceção.

   LARGURA DE LEITURA
   O corpo do artigo é 720px, não os 820 do --container-text. A
   medida do documento mestre vale para bloco de página com título
   grande; para prosa corrida em Montserrat 17px, 820px passa de 90
   caracteres por linha e o olho perde a volta.
   ============================================================ */

/* ------------------------------------------------------------ índice */

.blog-topo {
  background: var(--navy);
  color: var(--white);
  padding-block: var(--s-13) var(--s-12);
}
.blog-topo h1 { color: var(--white); max-width: 16ch; }
.blog-topo .lead { color: rgba(255, 255, 255, .82); max-width: 54ch; }

/* Filtro por categoria. Sem JS: são âncoras para as seções da
   própria página, então funcionam com o script bloqueado. */
.blog-filtros {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-8);
}
.blog-filtros a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding-inline: var(--s-5);
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-small); font-weight: 500;
  transition: background var(--dur-state) ease, color var(--dur-state) ease,
              border-color var(--dur-state) ease;
}
.blog-filtros a:hover {
  background: var(--white); color: var(--navy); border-color: var(--white);
}

/* -------------------------------------------------------- destaque */

.destaque-artigo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-10);
  align-items: center;
  padding: var(--s-10);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}
.destaque-artigo h2 { font-size: var(--fs-h2); }
.destaque-artigo .lead { margin-top: var(--s-5); }
.destaque-numero {
  font-family: var(--font-head);
  font-size: clamp(4rem, 3rem + 5vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--off-white);
  text-align: center;
}
.destaque-numero span {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  margin-top: var(--s-4);
}

/* ------------------------------------------------------ cards do índice */

.grade-artigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-7);
  margin-top: var(--s-8);
}

.card-artigo {
  display: flex; flex-direction: column;
  padding: var(--s-7);
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--c, var(--teal));
  border-radius: var(--r-md);
  transition: box-shadow var(--dur-state) ease, transform var(--dur-state) ease;
}
.card-artigo:hover { box-shadow: var(--sh-hover); transform: translateY(-3px); }
.card-artigo:active { transform: translateY(-1px); transition-duration: 60ms; }

.card-artigo h3 {
  font-size: var(--fs-h4);
  line-height: var(--lh-title);
  margin-top: var(--s-4);
}
/* O card inteiro é clicável, mas quem carrega o link é o h3 — o
   ::after estica a área de clique sem criar um segundo destino para
   o leitor de tela nem aninhar <a> dentro de <a>. */
.card-artigo { position: relative; }
.card-artigo h3 a { color: inherit; }
.card-artigo h3 a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.card-artigo h3 a:hover { color: var(--navy); }
.card-artigo p {
  font-size: var(--fs-small);
  color: var(--txt-secondary);
  margin-top: var(--s-4);
}
.card-artigo .meta { margin-top: auto; padding-top: var(--s-6); }

/* Metadados: número do artigo, categoria, tempo de leitura. */
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-size: var(--fs-label);
  color: var(--txt-secondary);
  letter-spacing: .02em;
}
.meta .sep { color: var(--border); }
.meta .codigo {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--txt-muted);
  letter-spacing: .08em;
}

/* Tag de categoria: fundo de acento em opacidade baixa, texto navy.
   O acento é o fundo, nunca a letra. */
.tag-cat {
  display: inline-flex; align-items: center;
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c, var(--teal)) 16%, transparent);
  color: var(--navy);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Selo de pauta com data — separa o artigo de contexto do evergreen. */
.selo-pauta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-label); font-weight: 600;
  color: var(--txt-secondary);
}
.selo-pauta::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral);
}

/* ------------------------------------------------------- artigo: topo */

.artigo-topo { padding-block: var(--s-12) var(--s-9); background: var(--off-white); }
.artigo-topo .wrap-leitura { max-width: 720px; }
.artigo-topo h1 { font-size: var(--fs-h1); }
.artigo-topo .lead { margin-top: var(--s-6); max-width: 60ch; }
.artigo-topo .meta { margin-top: var(--s-7); }

/* Migalha. Um nível só: o blog não tem hierarquia profunda e
   migalha de três níveis num site de cinco páginas é teatro. */
.migalha {
  font-size: var(--fs-small);
  color: var(--txt-secondary);
  margin-bottom: var(--s-6);
}
.migalha a { color: var(--txt-secondary); box-shadow: inset 0 -1px 0 var(--border); }
.migalha a:hover { color: var(--navy); box-shadow: inset 0 -1px 0 var(--navy); }

/* ------------------------------------------------------ artigo: corpo */

.artigo-corpo {
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--s-10);
}
.artigo-corpo > * + * { margin-top: var(--s-6); }

.artigo-corpo p {
  font-size: var(--fs-body-lg);
  line-height: 1.72;
  color: var(--txt-primary);
}
.artigo-corpo h2 {
  font-size: var(--fs-h3);
  margin-top: var(--s-12);
  scroll-margin-top: var(--s-12);
}
.artigo-corpo h3 {
  font-size: var(--fs-h4);
  margin-top: var(--s-9);
  scroll-margin-top: var(--s-12);
}
.artigo-corpo h2 + p, .artigo-corpo h3 + p { margin-top: var(--s-5); }

.artigo-corpo strong { font-weight: 600; color: var(--navy); }
.artigo-corpo a {
  color: var(--navy);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--teal) 55%, transparent);
  transition: box-shadow var(--dur-state) ease;
}
.artigo-corpo a:hover { box-shadow: inset 0 -2px 0 var(--teal); }

/* Sumário. Renderizado a partir dos h2 pelo gerador, não pelo
   navegador: link de índice que só existe com JS é link que o
   Google não segue. */
.sumario {
  padding: var(--s-7);
  background: var(--surface-soft);
  border-radius: var(--r-md);
  border-left: 4px solid var(--teal);
}
.sumario h2 {
  font-size: var(--fs-label);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-secondary);
  margin: 0;
}
.sumario ol { margin-top: var(--s-5); padding-left: var(--s-5); }
.sumario li { font-size: var(--fs-body); margin-top: var(--s-3); }
.sumario a { color: var(--navy); }
.sumario a:hover { box-shadow: inset 0 -2px 0 var(--teal); }

/* Listas do corpo. */
.artigo-corpo ul.itens { display: grid; gap: var(--s-4); }
.artigo-corpo ul.itens li {
  position: relative;
  padding-left: var(--s-7);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
}
.artigo-corpo ul.itens li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; border-radius: 2px;
  background: var(--teal);
}
.artigo-corpo ol.passos { display: grid; gap: var(--s-5); counter-reset: passo; }
.artigo-corpo ol.passos li {
  position: relative;
  padding-left: var(--s-10);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  counter-increment: passo;
}
.artigo-corpo ol.passos li::before {
  content: counter(passo);
  position: absolute; left: 0; top: -2px;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-head); font-size: var(--fs-small); font-weight: 600;
}

/* Bloco de dado. Fundo navy porque é o único lugar onde os acentos
   passam como texto — e o número é o elemento que precisa gritar. */
.dado {
  padding: var(--s-8);
  background: var(--navy);
  border-radius: var(--r-lg);
  color: var(--white);
}
.dado .numero {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--yellow);
}
.dado p { color: rgba(255, 255, 255, .88); margin-top: var(--s-4); font-size: var(--fs-body); }
.dado .fonte {
  display: block;
  margin-top: var(--s-5);
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, .58);
}

/* Destaque de tese. Sem aspas decorativas: é afirmação do texto,
   não citação de terceiro. */
.destaque-texto {
  padding: var(--s-7) var(--s-8);
  background: var(--off-white);
  border-left: 4px solid var(--yellow);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.destaque-texto p {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: var(--ls-title);
  color: var(--navy);
}

/* Caixa prática: passo a passo, checklist, "o que fazer hoje". */
.caixa {
  padding: var(--s-8);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
.caixa > h3 {
  margin: 0 0 var(--s-5);
  font-size: var(--fs-h4);
  display: flex; align-items: center; gap: var(--s-3);
}
.caixa > h3::before {
  content: ""; width: 8px; height: 24px; border-radius: 4px;
  background: var(--c, var(--teal)); flex: none;
}

/* Aviso — usado para limite de escopo e alerta de segurança. */
.aviso {
  padding: var(--s-6) var(--s-7);
  background: var(--bg-teen);
  border: 1px solid color-mix(in srgb, var(--coral) 30%, var(--border));
  border-radius: var(--r-md);
}
.aviso p { font-size: var(--fs-body); color: var(--txt-secondary); }
.aviso strong { color: var(--navy); }

/* --------------------------------------------------- isca (CTA de fim) */

.isca {
  margin-top: var(--s-12);
  padding: var(--s-10);
  background: var(--navy);
  border-radius: var(--r-lg);
  color: var(--white);
}
.isca .eyebrow { color: var(--teal); }
.isca h2 { color: var(--white); font-size: var(--fs-h3); margin-top: var(--s-4); }
.isca p { color: rgba(255, 255, 255, .82); margin-top: var(--s-5); font-size: var(--fs-body); }
.isca .lista-check { margin-top: var(--s-6); }
.isca form { margin-top: var(--s-7); display: grid; gap: var(--s-4); }
.isca .campo-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); }
.isca input {
  min-height: 52px;
  padding-inline: var(--s-5);
  border-radius: var(--r-btn);
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.isca input::placeholder { color: rgba(255, 255, 255, .55); }
.isca input:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 2px;
  background: rgba(255, 255, 255, .14);
}
.isca .privacidade { font-size: var(--fs-label); color: rgba(255, 255, 255, .58); margin-top: var(--s-4); }

/* ------------------------------------------------------------ fontes */

.fontes {
  margin-top: var(--s-10);
  padding-top: var(--s-7);
  border-top: 1px solid var(--border);
}
.fontes h2 {
  font-size: var(--fs-label);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-secondary);
}
.fontes ol { margin-top: var(--s-5); padding-left: var(--s-5); }
.fontes li { font-size: var(--fs-small); color: var(--txt-secondary); margin-top: var(--s-3); line-height: 1.6; }
.fontes a { color: var(--navy); }
.fontes a:hover { box-shadow: inset 0 -1px 0 var(--navy); }

/* Assinatura institucional. */
.assinatura {
  display: flex; align-items: center; gap: var(--s-5);
  margin-top: var(--s-9);
  padding: var(--s-6) var(--s-7);
  background: var(--surface-soft);
  border-radius: var(--r-md);
}
.assinatura img { width: 52px; height: auto; flex: none; }
.assinatura p { font-size: var(--fs-small); color: var(--txt-secondary); line-height: 1.6; }
.assinatura strong { display: block; color: var(--navy); font-family: var(--font-head); }

/* ------------------------------------------------------ relacionados */

.relacionados { background: var(--background); padding-block: var(--sec-gap); }

/* ------------------------------------------------------------ mobile */

@media (max-width: 900px) {
  .destaque-artigo { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-7); }
  .destaque-numero { text-align: left; font-size: 4rem; }
  .rodape .colunas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .artigo-corpo { padding-block: var(--s-8); }
  .artigo-corpo p, .artigo-corpo ul.itens li, .artigo-corpo ol.passos li { font-size: var(--fs-body); }
  .isca { padding: var(--s-7); }
  .isca .campo-linha { grid-template-columns: 1fr; }
  .dado, .caixa { padding: var(--s-6); }
  .grade-artigos { grid-template-columns: 1fr; }
  .rodape .colunas { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* Impressão: o pai que quer levar o passo a passo para o celular do
   filho não deveria imprimir o menu e o CTA. */
@media print {
  .topo, .isca, .relacionados, .blog-filtros, .rodape { display: none; }
  .artigo-corpo { max-width: 100%; }
  .dado { background: none; color: #000; border: 1px solid #999; }
  .dado .numero { color: #000; }
  .dado p, .dado .fonte { color: #333; }
}