/* curiosidades.css: o blog /curiosidades (design-system.md §8, "Curiosidades"). Só tokens; base.css e site.css vêm antes.
   Mobile primeiro. Breakpoints (§3.1): sm 480, md 768, lg 1024, xl 1280. As classes daqui são as finais: o E3 as leva
   para o Next.js como estão.
   Daqui saíram só o selo e a nota das pranchas; o admin (P7) fica para a etapa do painel.

   Uma medida sem token: a largura de leitura do texto longo (--leitura). É a mesma forma da coluna da /links
   (links.css, max-width em rem) e fica como proposta de token para a próxima revisão da DA (adendo §7, regra 4). */

:root { --leitura: 42rem; }

/* no menu, a seção onde a página está (artigo e categoria ficam dentro de Curiosidades) */
.menu__lista a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: .18em; text-decoration-color: var(--cor-destaque); text-underline-offset: .12em; }

/* ── trilha (breadcrumb) ───────────────────────────────────────────────────────────────────────────────────────── */
.trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); padding: 0; list-style: none; }
.trilha li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.trilha li + li::before { content: "/"; color: var(--cor-texto-suave); }
.trilha a, .trilha [aria-current] {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: var(--da-fonte-dados); font-weight: var(--fw-nav); font-size: var(--fs-nota); color: var(--cor-texto-suave);
}
.trilha a { text-underline-offset: 3px; }
.trilha [aria-current] { color: var(--cor-texto); }

/* ── cabeçalho das listas (biblioteca e categoria) ─────────────────────────────────────────────────────────────── */
.biblioteca__topo { display: grid; gap: var(--esp-3); padding-block: var(--esp-6) var(--esp-5); }
.biblioteca__topo .lead { max-width: var(--leitura); color: var(--cor-texto-suave); }
.biblioteca__contagem { color: var(--cor-texto-suave); }
@media (min-width: 1024px) { .biblioteca__topo { padding-block: var(--esp-7) var(--esp-6); } }

/* filtro por categoria: links (sem JavaScript), quebram linha; o atual leva aria-current */
.filtro { padding-bottom: var(--esp-5); border-bottom: var(--divisor) solid var(--cor-divisor); }
.filtro ul { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.filtro a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--esp-4);
  border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pilula); background-color: var(--cor-pagina);
  font-family: var(--da-fonte-dados); font-weight: var(--fw-nav); font-size: var(--fs-nota); text-decoration: none;
  transition: background-color var(--dur-micro) var(--curva-suave);
}
.filtro a[aria-current="page"] { background-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }
@media (hover: hover) and (pointer: fine) { .filtro a:not([aria-current]):hover { background-color: var(--cor-superficie); } }

/* ── cartão de artigo ──────────────────────────────────────────────────────────────────────────────────────────── */
.cartoes { display: grid; gap: var(--esp-6) var(--esp-5); padding-block: var(--esp-6); }
@media (min-width: 768px) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cartao { position: relative; display: grid; align-content: start; gap: var(--esp-3); }
.cartao__capa {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
  border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background-color: var(--cor-superficie);
}
.cartao__capa > .ilustracao { width: 34%; }
.cartao__capa > .capa { width: 100%; height: 100%; }
img.capa { display: block; object-fit: cover; }
.cartao__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-3); }
.categoria {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  font-family: var(--da-fonte-dados); font-weight: var(--fw-sobretitulo); font-size: var(--fs-sobretitulo);
  line-height: var(--lh-sobretitulo); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
}
/* alvo de toque de 24 px (WCAG 2.5.8) sem mudar o desenho da prancha: o padding cresce a área e a margem devolve o espaço */
.categoria { padding-block: var(--esp-1); margin-block: calc(-1 * var(--esp-1)); }
.categoria .icone { width: 1rem; height: 1rem; }
/* a categoria do card é link próprio: fica acima do link do título, que cobre o card */
.cartao__meta .categoria { position: relative; z-index: 1; }
.data { font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); font-size: var(--fs-dado); line-height: var(--lh-dado); color: var(--cor-texto-suave); }
.cartao__titulo { font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3); text-transform: none; }
.cartao__titulo a { text-decoration: none; }
/* o card inteiro é clicável pelo título (um link só por card, sem aninhar) */
.cartao__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); }
.cartao__resumo { color: var(--cor-texto-suave); }
@media (hover: hover) and (pointer: fine) {
  .cartao:hover .cartao__titulo a { text-decoration: underline; text-decoration-thickness: .1em; text-decoration-color: var(--cor-destaque); text-underline-offset: .12em; }
}
.cartao:focus-within { outline: var(--borda-forte) solid var(--cor-foco); outline-offset: 3px; border-radius: var(--raio); }
.cartao__titulo a:focus-visible { outline: none; }

/* destaque da biblioteca: o artigo mais recente (ou o marcado como destaque) em largura total */
.cartao--destaque { padding-block: var(--esp-6) 0; }
.cartao--destaque .cartao__titulo { font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3-destaque); font-size: var(--fs-h3-destaque); line-height: var(--lh-h3-destaque); }
@media (min-width: 1024px) {
  .cartao--destaque {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: center; gap: var(--esp-6);
    margin-top: var(--esp-6); padding: var(--esp-6); background-color: var(--cor-superficie); border-radius: var(--raio);
  }
  .cartao--destaque .cartao__capa { grid-row: span 4; background-color: var(--cor-pagina); }
  .cartao--destaque .cartao__texto { display: grid; gap: var(--esp-3); }
}
.cartao__texto { display: grid; gap: var(--esp-3); }

/* ── paginação (/curiosidades/pagina/2) ────────────────────────────────────────────────────────────────────────── */
.paginacao { padding-bottom: var(--esp-8); }
.paginacao ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-2); }
.paginacao a, .paginacao [aria-current], .paginacao [aria-disabled] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-1); min-width: 2.75rem; min-height: 2.75rem; padding-inline: var(--esp-3);
  border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background-color: var(--cor-pagina);
  font-family: var(--da-fonte-dados); font-weight: var(--fw-nav); font-size: var(--fs-nav); text-decoration: none;
}
.paginacao [aria-current="page"] { background-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.paginacao [aria-disabled="true"] { border-color: var(--cor-divisor); color: var(--cor-texto-suave); background-color: var(--cor-superficie); }
.paginacao__pagina { display: none; }
@media (min-width: 480px) { .paginacao__pagina { display: list-item; } }
.paginacao__contagem { width: 100%; text-align: center; }
@media (min-width: 480px) { .paginacao__contagem { display: none; } }
@media (hover: hover) and (pointer: fine) { .paginacao a:hover { background-color: var(--cor-superficie); } }
/* anterior e próxima: chevron-left e chevron-right (Lucide, aprovados na E0b) */
.paginacao .icone { width: 1rem; height: 1rem; }

/* ── estado (lista vazia, categoria vazia, 404 e 503 do blog) ──────────────────────────────────────────────────── */
.estado { display: grid; justify-items: center; gap: var(--esp-4); padding-block: var(--esp-8); text-align: center; }
.estado .ilustracao { width: 8rem; }
.estado h1, .estado h2 { max-width: var(--leitura); }
.estado p { max-width: 32rem; color: var(--cor-texto-suave); }
.estado__botoes { display: grid; gap: var(--esp-3); width: 100%; margin-top: var(--esp-2); }
@media (min-width: 480px) { .estado__botoes { display: flex; flex-wrap: wrap; justify-content: center; width: auto; } }

/* ── artigo ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.artigo__cabeca { display: grid; gap: var(--esp-4); max-width: var(--leitura); margin-inline: auto; padding-block: var(--esp-4) var(--esp-6); }
.artigo__titulo { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.artigo__resumo { color: var(--cor-texto); }
.artigo__datas { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); }
.artigo__datas .data { font-size: var(--fs-nota); }
.artigo__autoria { color: var(--cor-texto-suave); }
/* o vídeo no começo: botão primário (inteiro no celular) e a duração ao lado */
.artigo__video { display: grid; gap: var(--esp-2); justify-items: stretch; align-items: center; }
.artigo__video-duracao { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--cor-texto-suave); }
.artigo__video-duracao svg { width: 1rem; height: 1rem; }
@media (min-width: 480px) { .artigo__video { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); } }
.artigo__capa { max-width: calc(var(--leitura) + 2 * var(--esp-9)); margin-inline: auto; }
.artigo__capa > .moldura { aspect-ratio: 16 / 9; overflow: hidden; border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background-color: var(--cor-superficie); }
.artigo__capa .capa { width: 100%; height: 100%; }
.artigo__capa figcaption, .bloco-ilustracao figcaption { margin-top: var(--esp-2); }

/* corpo: coluna de leitura; o ritmo vertical sai dos espaçamentos */
.artigo__corpo { max-width: var(--leitura); margin-inline: auto; padding-block: var(--esp-7) var(--esp-6); }
.artigo__corpo > * + * { margin-top: var(--esp-5); }
.artigo__corpo > h2 { margin-top: var(--esp-7); font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3-destaque); font-size: var(--fs-h3-destaque); line-height: var(--lh-h3-destaque); text-transform: none; }
.artigo__corpo > h3 { margin-top: var(--esp-6); }
.artigo__corpo > h4 { margin-top: var(--esp-5); font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); font-size: var(--fs-corpo); }
.artigo__corpo > :is(h2, h3, h4) + * { margin-top: var(--esp-3); }
.artigo__corpo p a, .artigo__corpo li a { text-underline-offset: 3px; }
.artigo__corpo > ul { display: grid; gap: var(--esp-3); }
.artigo__corpo > ul > li { position: relative; padding-left: var(--esp-5); }
.artigo__corpo > ul > li::before {
  content: ""; position: absolute; left: var(--esp-1); top: .6em; width: var(--esp-2); height: var(--esp-2);
  border-radius: var(--raio-pilula); background-color: var(--cor-destaque); box-shadow: 0 0 0 var(--divisor) var(--cor-borda);
}
.artigo__corpo > ol { padding-left: var(--esp-5); }

/* bloco Destaque: a frase que o leitor não pode perder */
.bloco-destaque {
  padding: var(--esp-5); border: var(--borda) solid var(--cor-borda); border-left-width: var(--esp-2); border-left-color: var(--cor-destaque);
  border-radius: var(--raio); background-color: var(--cor-superficie);
  font-size: var(--fs-lead); line-height: var(--lh-lead);
}
.bloco-destaque p + p { margin-top: var(--esp-3); }

/* bloco Ilustração: SVG do kit do site ou imagem enviada, com legenda */
.bloco-ilustracao .moldura { padding: var(--esp-5); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background-color: var(--cor-pagina); }
.bloco-ilustracao .moldura img { display: block; width: 100%; height: auto; }
.bloco-ilustracao svg { width: 100%; height: auto; }

/* bloco Passo a passo: lista numerada com o número em círculo */
.passos { display: grid; gap: var(--esp-4); padding: 0; list-style: none; counter-reset: passo; }
.passos > li { position: relative; padding-left: var(--esp-8); counter-increment: passo; min-height: 2.5rem; }
.passos > li::before {
  content: counter(passo); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pilula); background-color: var(--cor-destaque); color: var(--cor-sobre-destaque);
  font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); font-size: var(--fs-corpo); font-variant-numeric: tabular-nums;
}
.passos__titulo { font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); }
.conta { font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* bloco Tabela: rola dentro da própria moldura quando não cabe (a página nunca rola de lado) */
.tabela { overflow-x: auto; border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background-color: var(--cor-pagina); }
.tabela table { width: 100%; border-collapse: collapse; font-size: var(--fs-nota); line-height: var(--lh-nota); }
.tabela caption { padding: var(--esp-3) var(--esp-4); text-align: left; font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); font-size: var(--fs-nota); border-bottom: var(--divisor) solid var(--cor-divisor); }
.tabela th, .tabela td { padding: var(--esp-2) var(--esp-4); text-align: left; vertical-align: top; }
.tabela thead th { background-color: var(--cor-superficie); font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); border-bottom: var(--borda) solid var(--cor-borda); }
.tabela tbody tr + tr :is(th, td) { border-top: var(--divisor) solid var(--cor-divisor); }
.tabela tbody th { font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); font-variant-numeric: tabular-nums; }
.tabela .num { text-align: center; width: 1%; white-space: nowrap; }

/* bloco Citação */
.citacao { padding-left: var(--esp-5); border-left: var(--borda-forte) solid var(--cor-borda); }
.citacao p { font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.citacao footer { margin-top: var(--esp-2); }

/* bloco Nota de fonte: aponta para o item da seção Fontes */
.nota-fonte { display: flex; gap: var(--esp-2); align-items: flex-start; }
.nota-fonte .icone { width: 1rem; height: 1rem; margin-top: .2em; }
.nota-fonte a { text-underline-offset: 3px; }

/* ── depois do corpo ───────────────────────────────────────────────────────────────────────────────────────────── */
.artigo__depois { max-width: var(--leitura); margin-inline: auto; display: grid; gap: var(--esp-7); padding-bottom: var(--esp-8); }
.artigo__depois h2 { font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3-destaque); font-size: var(--fs-h3-destaque); line-height: var(--lh-h3-destaque); text-transform: none; margin-bottom: var(--esp-4); }

/* nota de correção: o que mudou e quando; fica logo depois do texto */
.correcao { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-4); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background-color: var(--cor-pagina); }
.correcao .icone { margin-top: .15em; }
.correcao strong { font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); }

/* fontes: lista numerada, primárias e secundárias separadas */
.fontes h3 { margin-block: var(--esp-5) var(--esp-3); font-family: var(--da-fonte-dados); font-weight: var(--fw-sobretitulo); font-size: var(--fs-sobretitulo); text-transform: uppercase; letter-spacing: .04em; }
.fontes h2 + h3 { margin-top: 0; }
.fontes ol { display: grid; gap: var(--esp-3); padding-left: var(--esp-5); font-size: var(--fs-nota); line-height: var(--lh-nota); }
.fontes li::marker { font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); color: var(--cor-texto-suave); }
.fontes a { font-weight: var(--fw-dado); font-family: var(--da-fonte-dados); text-underline-offset: 3px; }
.fontes .nota { display: block; }
.fontes li:target { background-color: var(--cor-superficie); }

/* chamada do vídeo: thumb e link, sem player (proposta §4.1) */
.chamada-video { display: grid; gap: var(--esp-4); padding: var(--esp-4); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background-color: var(--cor-superficie); }
.chamada-video__texto { display: grid; gap: var(--esp-2); justify-items: stretch; }
.chamada-video__titulo { font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3); font-size: var(--fs-h3); line-height: var(--lh-h3); }
@media (min-width: 480px) { .chamada-video__texto { justify-items: start; } }
@media (min-width: 768px) { .chamada-video { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--esp-5); padding: var(--esp-5); } }

/* compartilhar por link: copia o endereço (JavaScript); sem ele, o endereço fica à vista para copiar */
.compartilhar { display: grid; gap: var(--esp-3); }
.compartilhar__linha { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }
.compartilhar__endereco {
  flex: 1 1 14rem; min-width: 0; min-height: 3rem; padding: 0 var(--esp-4);
  border: var(--borda) solid var(--cor-borda-campo); border-radius: var(--raio); background-color: var(--cor-pagina);
  font-family: var(--da-fonte-dados); font-size: var(--fs-nota); color: var(--cor-texto-suave);
}
.compartilhar__linha .botao { flex: 1 0 auto; }
@media (min-width: 480px) { .compartilhar__linha .botao { flex: none; } }

/* relacionados: até três cartões menores */
.relacionados .cartoes { padding-block: 0; }
@media (min-width: 1024px) {
  .artigo__depois--largo { max-width: none; }
}

/* ── prévia (P4): faixa de rascunho com a impressão digital, presa ao pé da tela (o topo já é sticky) ────────────── */
.faixa-previa {
  position: sticky; bottom: 0; z-index: 60;
  background-color: var(--cor-faixa-inversa); color: var(--cor-sobre-inversa);
}
.faixa-previa__dentro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-4); padding-block: var(--esp-2); }
.faixa-previa strong { font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); }
.faixa-previa .icone { width: 1rem; height: 1rem; }
.faixa-previa__estado { display: inline-flex; align-items: center; gap: var(--esp-2); }
.faixa-previa__digital { font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); font-size: var(--fs-dado); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.faixa-previa__nota { font-size: var(--fs-nota); line-height: var(--lh-nota); opacity: 1; }

/* ── capa e diagrama do CPF (SVG inline: classes → tokens) ─────────────────────────────────────────────────────── */
.capa text, .diagrama text { font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); }
.capa .t-titulo, .diagrama .t-titulo { font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3); }
.capa .f-texto, .diagrama .f-texto { fill: var(--da-cor-texto); }

/* rodapé com quatro links (o do site tem três): no celular e no tablet, as redes sobem ao lado da marca e a navegação
   ganha a linha inteira; a partir de lg, volta a ser uma linha só, como no site.css */
.rodape__linha { grid-template-areas: "marca redes" "nav nav"; align-items: start; }
@media (min-width: 1024px) { .rodape__linha { grid-template-areas: "marca nav redes"; align-items: center; } }