/* ============================================================
     PROTÓTIPO DA PÁGINA DE ARTIGO — Base CEFOR/Ifes
     Reflete as decisões consolidadas até 2026-05-19 (Decisões 1-32)
     + Camadas 1 (Princípios Editoriais) e 4.5 (Padrões de Composição)
     Atualizações 2026-05-19:
       · Box de trilha agora é multi-trilha em acordeão (Decisão 30)
       · "Passo X de Y" trocado por "Artigo X de Y" (Decisão 29)
       · Chip dourado de percurso dentro do acordeão (Decisão 31)
       · Componente prev/next removido do rodapé (Decisão 32)
     Atualizações 2026-05-21 (Padrão 4.1 — Artigo encadeável):
       · Kicker "Categoria · Tipo" no topo do cabeçalho (Decisão 23)
       · Bloco de entrada explícito: pré-requisitos linkados + objetivo
         (Princípio 2; Checklist de Encadeabilidade critérios 3-4)
       · Bloco de saída: "O que você sabe fazer agora" + próximos
         caminhos plurais (Checklist critérios 5-6)
     Atualizações 2026-06-02 (acessibilidade e impressão):
       · prefers-reduced-motion: zera animações/transições + scroll
         instantâneo (CSS @media + guarda matchMedia no JS)
       · @media print: esconde a casca, revela audiodescrições,
         expõe URLs de links externos, evita quebras em blocos
       · Mobile: reset dos grid-* inline — conteúdo antes da sidebar
     Snapshot da versão anterior: prototipo-artigo-2026-05-13.html
     ============================================================ */

  :root {
    /* Cor da categoria deste artigo (v2 2026-05-29) —
       Gestão e Operação do Moodle → --art-teal (sistema-cards-catalogo.md) */
    --cat-color: #5ea9b2;
    --cat-color-soft: rgba(94,169,178,.10);
    /* ── Faixa de leitura (eixo único compartilhado) ──────────────────
       Mude --measure aqui e .shell, .masthead-inner, .prose, .article-actions
       e .libras-accordion acompanham. Não repita estes valores em outro lugar. */
    --measure: 660px;   /* largura da coluna de texto (~70–75 caracteres) */
    --rail: 300px;      /* largura da sidebar/TOC */
    --band-gap: 72px;   /* gutter entre texto e sidebar */
    --reading-band: calc(var(--measure) + var(--band-gap) + var(--rail));
  }

  /* Estilos estruturais, resets, skip links e tokens herdados do shell.css */

  /* Barra de progresso */
  .progress-rail {
    position: fixed; inset: 0 0 auto 0;
    height: 3px; z-index: 200;
    background: transparent;
  }
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cat-color), var(--gold));
    width: 0%;
    transition: width .15s ease-out;
  }

  /* Painel de acessibilidade e VLibras: estilos em a11y.css */

  /* ================ MASTHEAD ================ */
  /* Redesenho 2026-05-26: grid 2 colunas (conteúdo | meta lateral).
     Padding superior/inferior reduzido. Autor sai do topo (vai só no rodapé).
     Breadcrumb encerra na categoria; sem head-kicker. */
  .masthead {
    position: relative;
    padding: 56px 0 32px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
  .masthead::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(800px 400px at 12% 20%, var(--cat-color-soft), transparent 60%),
      radial-gradient(600px 300px at 85% 80%, rgba(176,133,68,.05), transparent 60%);
    pointer-events: none;
  }
  .masthead-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    position: relative;
    display: grid;
    /* Mesma geometria do .shell para que a régua do meta caia sobre o card do TOC
       e o título alinhe à esquerda com o texto (faixa de leitura centralizada). */
    grid-template-columns: minmax(0, var(--measure)) var(--rail);
    gap: var(--band-gap);
    justify-content: center;
    align-items: start;
  }
  @media (max-width: 900px) {
    .masthead-inner { grid-template-columns: 1fr; gap: 24px; }
    .cat-emblem-icon {
      width: 80px;
      height: 80px;
      border-radius: var(--r-lg);
    }
  }

  .masthead-content { min-width: 0; }

  /* ================ EMBLEMA DE CATEGORIA (v2 2026-05-29) ================
     Traz a identidade do card do catálogo (cor = categoria, ícone = grupo do
     tópico primário) para o topo do artigo, criando continuidade card → artigo.
     Ref.: output/sistema-cards-catalogo.md (Opção B-lite). */
  .cat-emblem {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
  }
  .cat-emblem-icon {
    width: 128px;
    height: 128px;
    border-radius: var(--r-xl);
    background: var(--cat-color);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
  }
  .cat-emblem-icon img {
    width: 56%;
    height: 56%;
    object-fit: contain;
  }

  /* Breadcrumb: estilos no shell.css compartilhado */

  .masthead h1 {
    font-family: var(--sans);
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
    margin: 0 0 16px;
    max-width: 900px;
    color: var(--ink);
  }
  .subtitle {
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
    max-width: 720px;
  }

  /* Meta lateral — direita no desktop, abaixo no mobile */
  .masthead-meta {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 28px;
    border-left: 1px solid var(--line);
    align-self: stretch;
  }
  @media (max-width: 900px) {
    .masthead-meta {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 18px 32px;
      padding-left: 0;
      padding-top: 18px;
      border-left: none;
      border-top: 1px solid var(--line);
    }
  }

  .meta-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .meta-block .meta-label {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .meta-block .meta-value {
    font-size: .93rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.35;
  }

  /* Vínculo de percurso no meta — cor reservada verde-profundo (Decisão 31).
     Renderizar SOMENTE quando o artigo integra trilha(s) de um percurso. */
  .meta-percurso .meta-label { color: var(--verde-profundo); }
  [data-theme="dark"] .meta-percurso .meta-label { color: var(--verde-claro); }
  .meta-percurso-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .95rem; font-weight: 700; color: var(--verde-profundo);
    text-decoration: none; line-height: 1.3;
  }
  [data-theme="dark"] .meta-percurso-link { color: var(--verde-claro); }
  .meta-percurso-link .mpl-ico { width: 16px; height: 16px; flex-shrink: 0; }
  .meta-percurso-link .mpl-chev { width: 12px; height: 12px; flex-shrink: 0; opacity: .7; transition: transform .15s; }
  .meta-percurso-link:hover { color: var(--verde-marca); }
  .meta-percurso-link:hover .mpl-chev { transform: translateX(2px); }
  .meta-block .meta-value a {
    color: var(--accent);
    text-decoration: none;
  }
  .meta-block .meta-value a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .meta-block.meta-time .meta-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .meta-block.meta-time .meta-value svg {
    width: 14px;
    height: 14px;
    color: var(--ink-3);
    flex-shrink: 0;
  }

  /* Meta-block "Compartilhar" — ação inline (texto+ícone) com aparência de link, não de botão */
  .meta-block.meta-share .meta-share-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: var(--sans);
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--accent);
    text-align: left;
    transition: color .15s;
  }
  .meta-block.meta-share .meta-share-action:hover .meta-share-text {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .meta-block.meta-share .meta-share-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
  }
  .meta-block.meta-share .meta-share-action svg {
    width: 14px;
    height: 14px;
    color: var(--ink-3);
    flex-shrink: 0;
    transition: color .15s;
  }
  .meta-block.meta-share .meta-share-action:hover svg,
  .meta-block.meta-share .meta-share-action.copied svg {
    color: var(--accent);
  }
  .meta-block.meta-share .meta-share-action.copied {
    color: var(--accent-deep);
  }

  /* ================ TOOLBAR DO ARTIGO — multimodal ================ */
  .article-actions {
    /* Alinha à faixa de leitura: borda esquerda dos botões = borda esquerda do
       texto/título; borda direita = borda direita da sidebar. */
    max-width: calc(var(--reading-band) + 2 * var(--pad-x));
    margin: 0 auto;
    padding: 20px var(--pad-x) 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    padding: 9px 14px;
    border-radius: 99px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: .86rem;
    font-weight: 500;
    transition: all .15s;
    text-decoration: none;
  }
  .action-btn:hover { border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .action-btn[aria-pressed="true"] { background: var(--accent); color: white; border-color: var(--accent); }
  .action-btn svg,
  .action-btn img { width: 16px; height: 16px; flex-shrink: 0; }
  #librasBtn .icon-libras-active {
    display: none;
  }
  [data-theme="dark"] #librasBtn .icon-libras-default,
  #librasBtn[aria-pressed="true"] .icon-libras-default {
    display: none;
  }
  [data-theme="dark"] #librasBtn .icon-libras-active,
  #librasBtn[aria-pressed="true"] .icon-libras-active {
    display: inline-block;
  }
  .action-btn .duration {
    margin-left: 4px;
    font-size: .72rem;
    color: var(--ink-3);
    font-family: var(--mono);
  }
  .action-btn[aria-pressed="true"] .duration { color: rgba(255,255,255,.75); }
  .article-actions .spacer { flex: 1; }

  /* Libras accordion */
  .libras-accordion {
    max-width: calc(var(--reading-band) + 2 * var(--pad-x));
    margin: 16px auto 0;
    padding: 0 var(--pad-x);
  }
  .libras-panel {
    background: var(--paper);
    border: 1px solid var(--accent);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: none;
  }
  .libras-panel.open { display: block; }
  .libras-panel .lp-head {
    padding: 12px 18px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    font-size: .92rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .libras-panel .lp-body { padding: 18px; }
  .libras-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    position: relative;
  }
  .libras-video::after {
    content: '';
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    display: block;
    position: absolute;
  }
  .libras-video span {
    position: absolute;
    bottom: 12px; left: 12px;
    background: rgba(0,0,0,.6);
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: .76rem;
    font-weight: 500;
  }

  /* ================ LAYOUT PRINCIPAL ================ */
  .shell {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 40px var(--pad-x) 80px;
    display: grid;
    /* Faixa de leitura centralizada: a coluna do texto tem a largura exata da medida
       (--measure), não estica. A sobra de largura vira margem simétrica nas bordas via
       justify-content:center — em vez de virar um "buraco" entre texto e sidebar. */
    grid-template-columns: minmax(0, var(--measure)) var(--rail);
    gap: var(--band-gap);
    justify-content: center;
    align-items: flex-start;
  }
  @media (max-width: 980px) {
    .shell { grid-template-columns: 1fr; gap: 32px; }
    /* Reset dos grid-* inline (aside usa grid-column:2; article fixa grid-row:1):
       no mobile o conteúdo deve vir PRIMEIRO e a sidebar (índice + trilha) depois,
       senão o leitor rola por todo o índice antes de chegar ao texto. */
    article.prose { grid-column: 1 !important; grid-row: 1 !important; }
    .sidebar { position: static !important; grid-column: 1 !important; grid-row: 2 !important; }
    .article-actions { padding-top: 16px; }
  }

  /* ================ SIDEBAR ================ */
  .sidebar {
    position: sticky;
    top: 80px;
    padding: 8px 0;
  }

  /* ================================================================
     Box de trilha — multi-trilha em acordeão (Decisão 30)
     Cada trilha vira um item; chip dourado de percurso (Decisão 31)
     aparece no topo do acordeão expandido quando aplicável.
     ================================================================ */
  /* Caixa restaurada (2026-05-29, revertendo o teste 2026-05-26) — moldura do box
     de trilha de volta; decisões sutis internas (badge de contagem, chip) preservadas. */
  .side-trilha {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 14px;
    background: var(--paper);
  }
  .side-trilha-head {
    padding: 14px 18px;
    background: transparent;
    border-bottom: 1px solid var(--line);
  }
  .side-trilha-head-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .side-trilha-count {
    background: transparent;
    color: var(--ink-3);
    font-size: .68rem;
    font-weight: 700;
    padding: 0;
    border-radius: 0;
    letter-spacing: 0;
  }

  /* Itens do acordeão (uma trilha por item) */
  .trilha-acc-item + .trilha-acc-item {
    border-top: 1px solid var(--line);
  }
  .trilha-acc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--sans);
    text-align: left;
    transition: color .15s;
  }
  .trilha-acc-toggle:hover .trilha-acc-name { color: var(--accent); }
  .trilha-acc-toggle:hover .trilha-acc-chev { color: var(--accent); }
  .trilha-acc-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }
  .trilha-acc-name {
    flex: 1;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
  }
  /* ícone de trilha (2 formas distintas) — reforça a gramática artigo→trilha→percurso */
  .trilha-acc-icon {
    width: 16px; height: 16px;
    color: var(--ink-3);
    flex-shrink: 0;
    transition: color .15s;
  }
  .trilha-acc-toggle:hover .trilha-acc-icon,
  .trilha-acc-toggle[aria-expanded="true"] .trilha-acc-icon { color: var(--accent); }
  .trilha-acc-pos {
    font-size: .72rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .trilha-acc-chev {
    width: 16px; height: 16px;
    color: var(--ink-3);
    flex-shrink: 0;
    transition: transform .25s;
  }
  .trilha-acc-toggle[aria-expanded="true"] .trilha-acc-chev {
    transform: rotate(180deg);
    color: var(--accent);
  }
  .trilha-acc-toggle[aria-expanded="true"] .trilha-acc-name {
    color: var(--accent);
  }
  .trilha-acc-body {
    padding: 4px 18px 16px;
    background: transparent;
    border-top: 0;
  }
  .trilha-acc-body[hidden] { display: none; }

  /* Barra de progresso estrutural (Decisão 29 — posição, não progresso pessoal) */
  .side-trilha-progress { margin-bottom: 14px; }
  .side-trilha-bar {
    height: 4px;
    background: var(--bg-3);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 6px;
  }
  .side-trilha-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
  }
  .side-trilha-pos {
    font-size: .78rem;
    color: var(--ink-3);
  }
  .side-trilha-pos b { color: var(--ink); font-weight: 700; }

  /* Lista numerada de artigos da trilha */
  .side-trilha-articles {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .side-trilha-articles li { margin: 0; }
  .side-trilha-articles li a {
    display: block;
    padding: 7px 0 7px 12px;
    border-left: 2px solid var(--line);
    font-size: .83rem;
    color: var(--ink-2);
    text-decoration: none;
    line-height: 1.4;
    transition: color .15s, border-color .15s;
  }
  .side-trilha-articles li a:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
  .side-trilha-articles li.current a {
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
  }

  /* TOC — caixa restaurada (2026-05-29, revertendo o teste 2026-05-26 que zerou fundo/borda) */
  .toc-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
  }
  .toc-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 14px;
  }
  .toc-list { list-style: none; margin: 0; padding: 0; }
  .toc-list li { margin: 0; }
  .toc-list a {
    display: block;
    padding: 8px 0 8px 14px;
    border-left: 2px solid var(--line);
    color: var(--ink-2);
    text-decoration: none;
    font-size: .88rem;
    line-height: 1.4;
    transition: color .15s, border-color .15s, padding-left .15s;
  }
  .toc-list a:hover { color: var(--ink); border-color: var(--ink-3); }
  .toc-list a.active {
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
    padding-left: 18px;
  }
  .toc-list .l-2 a {
    padding-left: 28px;
    font-size: .82rem;
    color: var(--ink-3);
  }
  .toc-list .l-2 a.active { padding-left: 32px; }

  /* ================ CONTEÚDO DO ARTIGO ================ */
  article.prose {
    font-family: var(--sans);
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--ink-2);
    /* Medida casada com a coluna do .shell (~70–75 caracteres). */
    max-width: var(--measure);
  }
  article.prose h2 {
    font-family: var(--sans);
    font-size: clamp(1.45rem, 2.2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.022em;
    color: var(--ink);
    margin: 56px 0 14px;
    scroll-margin-top: 90px;
  }
  article.prose h2:first-of-type { margin-top: 16px; }
  article.prose h3 {
    font-family: var(--sans);
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 36px 0 10px;
    scroll-margin-top: 90px;
  }
  article.prose p { margin: 0 0 18px; }
  article.prose strong { font-weight: 600; color: var(--ink); }
  article.prose em { font-style: italic; }
  article.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  article.prose .topic-chip,
  article.prose .related-card {
    text-decoration: none;
  }
  article.prose ul, article.prose ol { margin: 0 0 24px; padding-left: 24px; }
  article.prose li { margin-bottom: 8px; }
  article.prose code {
    font-family: var(--mono);
    font-size: .92em;
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 4px;
  }

  /* ============================================================
     Bloco de código / prompt (alinhado com catálogo #1 — ajuste 2026-05-26)
     Sem cabeçalho/título. Botão de copiar apenas com ícone, sutil,
     flutuante no canto superior direito; ganha presença ao hover do bloco.
     ============================================================ */
  .code-prompt-block {
    position: relative;
    margin: 24px 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg-2);
    transition: border-color .2s;
  }
  .code-prompt-block:hover { border-color: var(--line-2); }
  .code-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-3);
    border-radius: var(--r-sm);
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s, color .15s, background .15s, border-color .15s;
  }
  .code-prompt-block:hover .code-copy-btn { opacity: 1; }
  .code-copy-btn:hover,
  .code-copy-btn:focus-visible {
    color: var(--accent);
    background: var(--paper);
    border-color: var(--line-2);
    opacity: 1;
    outline: none;
  }
  .code-copy-btn:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft); }
  .code-copy-btn.copied {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
    opacity: 1;
  }
  .code-copy-btn > span { display: none; }
  .code-prompt-content {
    /* border/radius zeram o default do wp-block-code (tema clássico) — o
       pattern usa core/code dentro do wrapper, que já tem a borda do DS */
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 18px 48px 18px 18px;
    font-family: var(--mono);
    font-size: .82rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    overflow-x: auto;
    white-space: pre-wrap;
  }
  .code-prompt-content .code-comment {
    color: #615a4e;
    font-style: italic;
  }
  .code-prompt-content .code-variable {
    background: var(--sun-soft);
    color: var(--ink);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    border: 1px dashed var(--sun);
  }

  /* Callouts */
  .callout {
    margin: 28px 0;
    padding: 18px 22px;
    border-radius: var(--r-md);
    border-left: 4px solid;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.55;
  }
  .callout .c-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
  }
  .callout.nota { background: var(--sky-soft); border-color: var(--sky); }
  .callout.nota .c-label { color: var(--sky); }
  .callout.atencao { background: var(--sun-soft); border-color: var(--sun); }
  .callout.atencao .c-label { color: var(--sun); }
  .callout.critico { background: var(--rose-soft); border-color: var(--rose); }
  .callout.critico .c-label { color: var(--rose); }
  .callout.dica { background: var(--accent-soft); border-color: var(--accent); }
  .callout.dica .c-label { color: var(--accent); }

  /* Pullquote */
  .pullquote {
    margin: 48px -20px;
    padding: 36px 28px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.32;
    letter-spacing: -.018em;
    color: var(--accent);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
    position: relative;
  }
  .pullquote::before {
    content: '';
    width: 32px; height: 3px;
    border-radius: 2px;
    background: var(--gold);
    position: absolute;
    top: -2px; left: 50%;
    transform: translateX(-50%);
  }

  /* Figura com AD colapsável */
  .figure { margin: 32px 0; }
  .figure-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-size: .9rem;
    font-style: italic;
    margin-bottom: 8px;
  }
  .figure-caption {
    font-size: .85rem;
    color: var(--ink-3);
    margin: 0;
    line-height: 1.5;
    font-style: italic;
  }

  /* AD toggle */
  .ad-toggle-wrap { margin-top: 10px; }
  .ad-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-3);
    padding: 5px 12px;
    border-radius: 99px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: all .15s;
  }
  .ad-toggle:hover { border-color: var(--accent); color: var(--accent); }
  .ad-toggle[aria-expanded="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }
  .ad-toggle svg { width: 14px; height: 14px; }

  .figure-audiodesc {
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--bg-2);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ink-2);
  }
  .figure-audiodesc[hidden] { display: none; }

  /* Infográfico-resumo */
  .infographic {
    margin: 48px 0;
    background: linear-gradient(135deg, var(--accent-soft), var(--bg-2));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
  }
  .infographic-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .infographic-label::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--accent);
  }
  .infographic h3 {
    font-family: var(--sans);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .infographic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  @media (max-width: 600px) { .infographic-grid { grid-template-columns: 1fr; } }
  .infographic-step {
    background: var(--paper);
    border-radius: var(--r-md);
    padding: 16px;
    border: 1px solid var(--line);
  }
  .infographic-step-num {
    width: 28px; height: 28px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 10px;
  }
  .infographic-step strong {
    display: block;
    font-size: .95rem;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .infographic-step span {
    display: block;
    font-size: .82rem;
    color: var(--ink-3);
    line-height: 1.45;
  }
  .infographic-audiodesc {
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(255,255,255,.5);
    border-radius: var(--r-sm);
    font-size: .82rem;
    color: var(--ink-2);
    line-height: 1.5;
  }
  .infographic-audiodesc[hidden] { display: none; }
  [data-theme="dark"] .infographic-audiodesc { background: rgba(0,0,0,.25); }
  .infographic-audiodesc strong {
    color: var(--accent);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  /* ================ KICKER CATEGORIA · TIPO (Decisão 23) ================ */
  /* head-kicker, entry-block e outcome-block removidos em 2026-05-26.
     - head-kicker: redundante com a meta lateral (Categoria/Tipo agora vivem ali).
     - entry-block / outcome-block: deferidos para reavaliar na V3. */

  /* ================ FOOTER DO ARTIGO ================ */
  /* Reorganizado 2026-06-02: um único bloco de encerramento (autora · compartilhar ·
     tópicos) sob uma hairline, seguido dos artigos relacionados. Substitui a pilha de
     três divisórias do layout anterior (autor / tópicos / relacionados). */
  .article-foot { max-width: var(--maxw-read); margin-top: 64px; }

  /* ---- Bloco de encerramento ---- */
  .foot-meta {
    border-top: 1px solid var(--line);
    padding-top: 28px;
    margin-bottom: 44px;
  }
  .foot-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: 26px;
  }

  /* Tópicos */
  .topics-row { margin: 0; }
  .topics-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 12px;
  }
  .topics-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topic-chip {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    padding: 6px 14px;
    border-radius: 99px;
    text-decoration: none;
    font-size: .82rem;
    font-family: var(--sans);
    transition: all .15s;
  }
  .topic-chip:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }

  /* Botão compartilhar — inline com tópicos */
  .share-wrap { position: relative; }
  .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink-2);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--sans);
    transition: all .15s;
  }
  .share-btn svg { width: 16px; height: 16px; }
  .share-menu-sep { height: 1px; background: var(--line); margin: 4px 8px; }
  .share-btn:hover { border-color: var(--accent); color: var(--accent); }
  .share-btn[aria-expanded="true"] { background: var(--accent); color: white; border-color: var(--accent); }
  .share-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .share-menu[hidden] { display: none; }
  .share-menu button {
    background: transparent;
    border: 0;
    color: var(--ink);
    padding: 9px 12px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: var(--sans);
    font-size: .88rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .15s, color .15s;
  }
  .share-menu button svg { width: 15px; height: 15px; color: var(--ink-3); }
  .share-menu button:hover { background: var(--bg-2); color: var(--accent); }
  .share-menu button:hover svg { color: var(--accent); }

  /* ================ ARTIGOS RELACIONADOS ================ */
  /* Mini-cards que herdam a gramática dos cards do catálogo (cor = categoria):
     barra superior + dot na cor da família, badge de tipo neutro e tempo de leitura.
     Reforça a continuidade card → artigo (sistema-cards-catalogo.md). */
  .related {
    margin: 0;
    padding-top: 44px;
    border-top: 1px solid var(--line);
  }
  .related-head { margin-bottom: 22px; }
  .related h3 {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 0 4px;
    color: var(--ink);
    letter-spacing: -.018em;
  }
  .related-sub {
    color: var(--ink-3);
    font-size: .92rem;
    margin: 0;
  }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } }

  .related-card {
    --rc-color: var(--accent);
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 20px 18px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
  }
  .related-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--rc-color);
  }
  .related-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--rc-color);
  }
  /* Atribuição categoria → cor da família (espelha o catálogo) */
  .related-card[data-category="ferramentas"]    { --rc-color: var(--cat-ferramentas); }
  .related-card[data-category="gestao-moodle"]  { --rc-color: var(--cat-gestao-moodle); }
  .related-card[data-category="pedagogia"]      { --rc-color: var(--cat-pedagogia); }
  .related-card[data-category="acessibilidade"] { --rc-color: var(--cat-acessibilidade); }
  .related-card[data-category="conduta"]        { --rc-color: var(--cat-conduta); }
  .related-card[data-category="identidade"]     { --rc-color: var(--cat-identidade); }

  .related-card .r-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.3;
  }
  .related-card .r-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--rc-color);
    flex-shrink: 0;
  }
  .related-card h4 {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.04rem;
    line-height: 1.32;
    margin: 0;
    color: var(--ink);
    letter-spacing: -.01em;
    transition: color .15s;
  }
  .related-card:hover h4 { color: var(--accent); }
  .related-card .r-meta {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    color: var(--ink-3);
  }
  .related-card .r-badge {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 3px 10px;
    border-radius: 99px;
  }
  .related-card .r-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
  }
  .related-card .r-time svg { width: 13px; height: 13px; flex-shrink: 0; }

  /* Autor — dentro do bloco de encerramento (sem divisória própria) */
  .article-author {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .article-author .author-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: .92rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
  .article-author .author-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .author-byline-label {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .author-name-sm {
    font-size: .98rem;
    font-weight: 600;
    color: var(--ink);
  }
  .author-role-sm {
    font-size: .82rem;
    color: var(--ink-3);
  }

  /* Banner de protótipo */
  .proto-banner {
    background: var(--ink);
    color: var(--bg);
    padding: 8px 16px;
    text-align: center;
    font-size: .82rem;
    font-family: var(--sans);
  }
  .proto-banner strong { color: var(--accent); font-weight: 700; }

  /* Responsividade de header/a11y: nos componentes shell.css e a11y.css */
  /* Footer: estilos no shell.css compartilhado */
  @media (max-width: 600px) { :root { --pad-x: 20px; } }

  /* ================ MOVIMENTO REDUZIDO ================
     Respeita prefers-reduced-motion: zera animações/transições e troca o
     scroll suave por instantâneo (vestibular). O scrollIntoView do JS é
     guardado por matchMedia no script. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    .progress-fill { transition: none !important; }
  }

  /* ================ IMPRESSÃO ================
     Tutorial é um conteúdo que professores imprimem/salvam em PDF.
     Esconde a "casca" (header, toolbar, sidebar, share, progress), revela as
     audiodescrições ocultas e expõe a URL de links externos. */
  @media print {
    .proto-banner,
    .progress-rail,
    .site-header,
    .breadcrumb,
    .article-actions,
    .libras-accordion,
    .sidebar,
    .cat-emblem,
    .share-wrap,
    .meta-share,
    .site-footer,
    .skip-link,
    .a11y-bar, .a11y-panel,
    .vlibras-widget, [vw] { display: none !important; }

    html, body { background: #fff !important; color: #000 !important; }
    .masthead { padding: 0 0 16px; border-bottom: 1px solid #000; }
    .masthead::before { display: none !important; }
    .masthead-inner { display: block; padding: 0; }
    .masthead-meta { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; border: 0; padding: 8px 0 0; margin-top: 8px; }

    .shell { display: block !important; max-width: none; padding: 16px 0 0; }
    article.prose { max-width: none !important; grid-column: 1 !important; font-size: 11.5pt; line-height: 1.55; color: #000; }
    article.prose h1, article.prose h2, article.prose h3 { color: #000; }

    /* Mostrar audiodescrições e descrições normalmente ocultas */
    .figure-audiodesc[hidden], .infographic-audiodesc[hidden] { display: block !important; }

    /* Expor URLs de links externos (ignora âncoras internas e placeholders #) */
    article.prose a[href^="http"]::after { content: " <" attr(href) ">"; font-size: .85em; color: #333; word-break: break-all; }

    /* Evitar quebras de página no meio de blocos */
    article.prose h2, article.prose h3 { break-after: avoid; }
    .callout, .figure, .code-prompt-block, .pullquote, .infographic, .related-card, .article-author { break-inside: avoid; }
  }