/* ============================================================
   JANUSS — BLOG
   Complemento de assets/januss.css. Carregue os dois, nesta ordem:
   januss.css primeiro (tokens, .nav, .footer, .btn), blog.css depois.

   Nada de token novo aqui: todas as cores, sombras, raios e easings
   vem das variaveis do januss.css. Os valores literais que aparecem
   sao os do handoff que nao tem token proprio (o cinza #F0EEF7 do
   placeholder de figura e as alturas das barrinhas do medidor).

   PADRAO DE CONTEINER (leia antes de mexer)
   O padding horizontal fica na <section> (.blog-section) e o max-width
   num <div> interno (.blog-wrap / .article-wrap). Misturar os dois
   padroes na mesma pagina desalinha a borda esquerda. O header e o
   rodape reaproveitam .container do januss.css, entao aqui eles ganham
   um max-width somado ao padding — assim o content box dos tres bate
   exatamente em min(--blog-max, 100vw - 2 * --blog-pad).
   ============================================================ */

.blog-page {
  --blog-pad: 40px;
  --blog-max: 1200px;
  --blog-measure: 860px;
  background: var(--surface-page);
}

.blog-section {
  padding-left: var(--blog-pad);
  padding-right: var(--blog-pad);
}
.blog-wrap { max-width: var(--blog-max); margin: 0 auto; }
.article-wrap { max-width: var(--blog-measure); margin: 0 auto; }

/* Header e rodape usam .container (max-width E padding no mesmo elemento).
   Somando o padding ao max-width, o content box iguala o do .blog-wrap. */
.blog-page .nav .container,
.blog-page .footer .container,
.blog-page .footer-bottom {
  max-width: calc(var(--blog-max) + var(--blog-pad) * 2);
  padding-left: var(--blog-pad);
  padding-right: var(--blog-pad);
}

/* ============================================================
   HEADER DO BLOG
   Na landing a .nav e fixed e transparente, porque flutua sobre o
   hero escuro. No blog ela e sticky e opaca: o hero do blog comeca
   logo abaixo dela e nao ha o que deixar transparecer.
   ============================================================ */
.nav--blog {
  position: sticky;
  background: rgba(20, 13, 38, 0.92);
  backdrop-filter: blur(var(--blur-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel));
  border-bottom-color: var(--border-on-dark);
  /* Abaixo de ~360px o logo + EN + "Criar workspace" nao cabem, e o site nao
     tem menu mobile para recolher. Na landing isso passa despercebido porque
     a .nav e fixed e nao entra no scrollWidth; sendo sticky aqui, entraria e
     a pagina inteira ganharia rolagem lateral. O clip contem o excesso no
     mesmo elemento — comportamento identico ao da landing. Sem overflow-y:
     `clip` no eixo X e a unica forma de manter o outro eixo visivel, que a
     barra de progresso (bottom: -1px) precisa. */
  overflow-x: clip;
}
/* O link da propria secao fica em ambar, e nao muda no hover. */
.nav-links a.is-current,
.nav-links a.is-current:hover { color: var(--amber-400); }

/* Barra de progresso de leitura — so na pagina de artigo. */
.reading-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.reading-bar {
  width: 0;
  height: 100%;
  background: var(--amber-400);
  transition: width 90ms linear;
}

/* ============================================================
   HERO DA LISTAGEM
   ============================================================ */
.blog-hero {
  background: var(--grad-night);
  padding-top: 76px;
  padding-bottom: 84px;
}
.blog-hero .eyebrow { color: var(--iris-400); margin-bottom: 22px; }
.blog-hero-title {
  font-size: 50px;
  font-weight: var(--fw-extrabold);
  line-height: 1.06;
  letter-spacing: var(--ls-tight);
  color: var(--text-on-dark);
  max-width: 16ch;
  text-wrap: pretty;
}
.blog-hero-sub {
  font-size: 17.5px;
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--violet-300);
  max-width: 56ch;
  margin-top: 20px;
}

/* ============================================================
   CABECALHO DA LISTA + GRID DE CARDS
   ============================================================ */
.blog-list { padding-top: 72px; padding-bottom: 24px; }
.blog-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 18px;
  margin-bottom: 44px;
}
.blog-list-head h2 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
}
.blog-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  color: var(--text-body);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.post-card:hover {
  color: var(--text-body);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-meta .sep { color: var(--violet-200); }
.post-card h3 {
  font-size: 23px;
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  margin-top: 20px;
  text-wrap: pretty;
}
.post-card-sub {
  font-size: 15px;
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 14px;
}
.post-card-foot { margin-top: auto; padding-top: 26px; }
.post-card-rule {
  height: 1px;
  background: var(--border-subtle);
  margin-bottom: 16px;
}
.post-card-more {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
/* Ambar como texto pequeno reprova em AA sobre fundo claro; aqui e glifo
   decorativo, e a palavra ao lado carrega o significado. */
.post-card-more .arrow { color: var(--amber-600); }

/* ============================================================
   PAGINACAO
   Pagina indisponivel e <span>, nunca <a>.
   ============================================================ */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
}
.pager-link,
.pager-link--off {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  white-space: nowrap;
}
.pager-link {
  background: var(--surface-card);
  color: var(--text-strong);
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.pager-link:hover {
  background: var(--violet-900);
  color: var(--surface-page);
  border-color: var(--violet-900);
}
.pager-link--off {
  color: var(--violet-200);
  border-color: var(--border-subtle);
  cursor: not-allowed;
}
.pager-now {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ============================================================
   HERO DO ARTIGO
   ============================================================ */
.article-hero {
  background: var(--grad-night);
  padding-top: 52px;
  padding-bottom: 64px;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.crumb a { color: var(--iris-400); }
.crumb a:hover { color: var(--iris-300); }
.crumb .sep { color: var(--violet-600); }
.crumb-cat { color: var(--amber-400); }

.article-title {
  font-size: 42px;
  font-weight: var(--fw-extrabold);
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  color: var(--text-on-dark);
  margin-top: 22px;
  max-width: 26ch;
  text-wrap: pretty;
}
.article-standfirst {
  font-size: 17.5px;
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--violet-300);
  margin-top: 18px;
  max-width: 60ch;
}
.article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-on-dark);
}
.article-byline-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-400);
}
.article-byline-meta .author { color: var(--violet-200); }
.article-byline-meta .sep { color: var(--violet-600); }

/* ============================================================
   COMPARTILHAR
   ============================================================ */
.share { display: flex; align-items: center; gap: 8px; }
.share a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--violet-200);
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.share a:hover { color: var(--amber-400); border-color: var(--amber-400); }

.share-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}
.share-foot-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.share--light a {
  width: 38px;
  height: 38px;
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-muted);
}
.share--light a:hover { border-color: var(--violet-400); color: var(--text-strong); }
/* Feedback do "copiar link": a marcacao dura o tempo do setTimeout no JS. */
.share--light a.is-copied { border-color: var(--iris-500); color: var(--iris-500); }

/* ============================================================
   CORPO DO ARTIGO
   ============================================================ */
.article-body { padding-top: 56px; max-width: var(--blog-measure); }
.article-body p {
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-body);
  margin-bottom: 22px;
}
.article-lead {
  font-size: 19.5px !important;
  font-weight: var(--fw-light);
  line-height: 1.6 !important;
  color: var(--text-strong) !important;
  margin-bottom: 26px !important;
}
.article-body h2 {
  font-size: 25px;
  font-weight: var(--fw-extrabold);
  line-height: 1.28;
  letter-spacing: var(--ls-tight);
  margin: 68px 0 22px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  scroll-margin-top: 140px;
  text-wrap: pretty;
}
.article-body ul,
.article-body ol {
  display: flex;
  flex-direction: column;
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-body);
}
.article-body ul { gap: 18px; padding-left: 22px; list-style: disc; }
.article-body ol { gap: 14px; padding-left: 24px; list-style: decimal; }
.article-body li { text-wrap: pretty; }
.article-body li::marker { color: var(--violet-400); }
.article-body strong { font-weight: var(--fw-bold); color: var(--text-strong); }

/* Link do corpo: violeta sozinho nao se distingue do texto ao redor
   (1,60:1) e ambar como texto reprova em AA. A combinacao resolve os dois.
   Restrito a paragrafo e item de lista de proposito: um `.article-body a`
   solto sublinhava tambem os botoes de compartilhar, o botao do CTA e os
   cards de "Leia em seguida", que sao blocos e nao links de texto. */
.article-body p a,
.article-body li a {
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: var(--amber-400);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-standard),
              text-decoration-color var(--dur-base) var(--ease-standard);
}
.article-body p a:hover,
.article-body li a:hover {
  color: var(--text-strong);
  text-decoration-color: var(--amber-600);
}

/* Termo tecnico dentro do paragrafo. */
.tt {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: var(--text-strong);
}
.article-body li strong.tt,
.article-body strong.tt { font-weight: 500; }

.pull-quote {
  font-size: 21px !important;
  font-weight: var(--fw-light);
  line-height: 1.45 !important;
  letter-spacing: var(--ls-snug);
  color: var(--text-strong) !important;
  padding-left: 26px;
  border-left: 3px solid var(--amber-400);
  margin: 44px 0 !important;
}
.pull-quote--tight { margin: 8px 0 0 !important; }

/* --- Blocos de codigo --- */
.code-dark {
  background: var(--violet-950);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin: 0 0 24px;
}
.code-dark .code-label { color: var(--iris-400); }
.code-dark pre { color: var(--violet-100); }

.code-light {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 28px;
  margin: 0 0 24px;
}
.code-light .code-label { color: var(--text-muted); }
.code-light pre { color: var(--text-body); }

.code-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.code-dark pre,
.code-light pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
}

/* --- Card "Exemplo pratico" --- */
.example {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  margin: 0 0 24px;
  box-shadow: var(--shadow-sm);
}
.example-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--iris-500);
  margin: 0 0 14px !important;
}
.example p:last-child { margin-bottom: 0; }

/* --- Figura ---
   O <img> é o estado normal. Enquanto o arquivo da arte não existe, o
   blog.js marca a figura com .is-missing e a moldura tracejada volta no
   lugar dela, com a descrição do que a arte precisa mostrar. Assim a
   página nunca exibe ícone de imagem quebrada. */
.figure { margin: 0 0 32px; }
.figure--wide { margin-bottom: 40px; }
.fig-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.figure.is-missing .fig-img { display: none; }
.figure.is-missing figcaption { display: none; }
.fig-holder {
  display: none;
  border: 1px dashed var(--border-default);
  background: #F0EEF7;
  border-radius: var(--radius-lg);
  padding: 26px;
  text-align: center;
}
.figure.is-missing .fig-holder { display: block; }
.fig-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--iris-500);
  margin: 0 0 12px !important;
}
.fig-desc {
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.fig-desc .tt { font-size: 14px; }
.figure figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 12px;
}
.fig-cover { margin: 0 0 44px; }

/* ============================================================
   TABELA DE COMPARACAO
   Os valores sao icones. Toda <td> so-grafica leva title E aria-label
   com o valor por extenso — sem isso o leitor de tela nao le a celula.
   ============================================================ */
.table-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: auto;
  margin: 0 0 24px;
}
.cmp {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
/* Tres colunas cabem em menos: rolar aqui seria gratuito. */
.cmp--narrow { min-width: 520px; }
.cmp thead th {
  text-align: left;
  background: var(--surface-page);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.cmp td,
.cmp tbody th { padding: 14px; border-bottom: 1px solid var(--surface-page); }
.cmp tr:last-child td,
.cmp tr:last-child th { border-bottom: 0; }
/* Primeira coluna e <th scope="row">: o leitor de tela anuncia a linha
   junto com a celula, que e o que faz o aria-label das celulas graficas
   ("Volume alto") virar uma frase inteira. */
.cmp .row-name {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-strong);
}
.cmp .num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-body);
}
/* Célula que marca ausência: o ícone dá a leitura imediata, e o texto ao lado
   mantém a precisão — o que se sabe é que não consta no material público do
   concorrente, não que o recurso não exista. O title da <td> traz a frase
   inteira para quem passa o mouse e para o leitor de tela. */
.cmp .cell-no {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--coral-600);
}
.cmp .cell-no svg { flex: none; }

/* Tabela de texto (usada no artigo de CDC e no comparativo). */
.cmp .cell {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-body);
}
.cmp .cell .tt { font-size: 12.5px; }

/* Medidor de 4 barras: 0 a 4 preenchidas. */
.meter { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.meter i {
  display: block;
  width: 5px;
  border-radius: 2px;
  background: var(--border-subtle);
}
.meter i:nth-child(1) { height: 5px; }
.meter i:nth-child(2) { height: 8px; }
.meter i:nth-child(3) { height: 11px; }
.meter i:nth-child(4) { height: 14px; }
.meter i.on { background: var(--text-body); }
/* No pico do custo as quatro barras viram ambar — aqui e fundo, nao texto. */
.meter--peak i.on { background: var(--amber-500); }

/* Icone + rotulo, para o valor que perderia sentido so como simbolo. */
.icon-label { display: flex; align-items: center; gap: 7px; }
.icon-label span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Nota de rodapé da tabela: explica o ícone de ausência sem ocupar célula. */
.article-body .table-note {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--text-muted);
  margin: -8px 0 26px !important;
}
.article-body .table-note .cell-no-inline {
  font-weight: var(--fw-semibold);
  color: var(--coral-600);
}

.cmp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cmp-legend span { display: flex; align-items: center; gap: 7px; }
.cmp-legend .meter { height: 14px; }
.cmp-legend .meter i { width: 4px; }

/* --- Lista de fontes ---
   Nao estava no handoff. Entra porque o comparativo com concorrente e
   o guia de RDS so se sustentam com a citacao da pagina de origem. */
.article-body .source-list {
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ============================================================
   PAINEL CTA + LEIA EM SEGUIDA
   ============================================================ */
.blog-cta {
  background: var(--grad-night);
  border-radius: var(--radius-xl);
  padding: 52px;
  margin-top: 48px;
}
/* Zera o filete e o respiro que .article-body h2 impoe: aqui o titulo
   abre um painel, nao uma secao do texto. */
.blog-cta h2 {
  font-size: 30px;
  font-weight: var(--fw-extrabold);
  line-height: 1.14;
  letter-spacing: var(--ls-tight);
  color: var(--text-on-dark);
  max-width: 22ch;
  margin: 0;
  padding-top: 0;
  border-top: 0;
  text-wrap: pretty;
}
.blog-cta p {
  font-size: 16px !important;
  font-weight: var(--fw-light);
  line-height: 1.6 !important;
  color: var(--violet-300) !important;
  margin: 16px 0 30px !important;
  max-width: 46ch;
}
.blog-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.blog-cta-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--violet-400);
}

.next-read { margin-top: 72px; }
.next-read h2 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  margin: 0 0 24px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.next-list { display: flex; flex-direction: column; gap: 14px; }
.next-card {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  color: var(--text-body);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
/* Sem translate aqui — so o card da listagem se levanta. */
.next-card:hover { color: var(--text-body); box-shadow: var(--shadow-lg); }
.next-card .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px !important;
}
.next-card h3 {
  font-size: 20px;
  font-weight: var(--fw-extrabold);
  line-height: 1.22;
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}

.blog-tail { height: 96px; }

/* ============================================================
   RESPONSIVO
   Breakpoints alinhados com o januss.css. Trocar --blog-pad ajusta
   secao, header e rodape de uma vez: o content box continua igual.
   ============================================================ */
@media (max-width: 1024px) {
  .blog-page { --blog-pad: 24px; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .article-title { max-width: none; }
  .article-body { padding-top: 40px; }
}

@media (max-width: 940px) {
  .blog-page { --blog-measure: none; }
  .article-wrap, .article-body { max-width: none; }
}

@media (max-width: 640px) {
  .blog-page { --blog-pad: 20px; }
  .post-grid { grid-template-columns: 1fr; }
  .blog-hero-title { font-size: 34px; }
  .article-title { font-size: 30px; }
  .article-body h2 { font-size: 22px; margin-top: 52px; }
  .pull-quote { font-size: 19px !important; }
  .blog-cta { padding: 34px; }
  .pager { flex-direction: column; align-items: stretch; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card:hover { transition: none; transform: none; }
  .reading-bar { transition: none; }
}


/* ============================================================
   ÍNDICE DO ARTIGO
   Existe por dois motivos: o leitor pula direto para a seção que
   interessa, e o buscador usa as âncoras como jump links no
   resultado. Os seletores começam em `.article-body` de propósito
   — `.article-body p` e `.article-body ol` já valem aqui dentro e
   ganhariam de um seletor de classe só.
   ============================================================ */
.article-body .article-toc {
  margin: 0 0 30px;
  padding: 22px 26px 24px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--amber-400);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.article-body .article-toc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.4;
}
.article-body .article-toc ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 15.5px;
  line-height: 1.5;
}
.article-body .article-toc li::marker {
  color: var(--violet-400);
  font-family: var(--font-mono);
  font-size: 13px;
}

/* O link do índice não usa o sublinhado âmbar do link de texto: numa
   lista de oito itens ele vira uma cerca. Vale para o índice do
   artigo e para o sumário numerado do texto sobre API e Power BI. */
.article-body .article-toc a,
.article-body .toc-list a {
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.article-body .toc-list a { color: var(--text-strong); }
.article-body .article-toc a:hover,
.article-body .toc-list a:hover {
  color: var(--text-strong);
  border-bottom-color: var(--amber-400);
}

@media (max-width: 640px) {
  .article-body .article-toc { padding: 18px 20px 20px; }
  .article-body .article-toc ol { grid-template-columns: 1fr; gap: 11px; }
}