/* ===========================================================================
   Sistema visual da plataforma de cursos — AD-015.

   A plataforma deixa de espelhar o layout do site institucional e passa a ter
   sistema próprio de aplicação: superfície clara, tipografia de interface
   auto-hospedada, componentes arredondados. A continuidade com iacreditar.org
   passa a ser de marca e de vínculo — mesma logo, mesmas três cores — e não de
   cópia de grade, tipografia e componentes.

   Ordem do arquivo: fonte → tokens → reset → tipografia base → shell →
   componentes → media queries e movimento reduzido.
   =========================================================================== */

/* A Inter servida do próprio domínio: nenhuma requisição ao Google Fonts,
   portanto nenhum dado do aluno saindo daqui. O build reescreve este caminho
   para a versão com o hash do conteúdo no nome — ver src/lib/assets.mjs. */
@font-face {
  font-family: Inter;
  src: url("/assets/inter-latin.3100e775e8.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marca — os três valores de iacreditar.org, preservados (AC-8). O amarelo
     deixa de ser área e vira assinatura; o azul assume a ação. */
  --brand-yellow: #f4e72d;
  --brand-blue: #175cff;
  --brand-ink: #090b10;

  /* Superfície */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;

  /* Texto */
  --text: #101423;
  --text-2: #525866;

  /* Ação */
  --accent: var(--brand-blue);
  --accent-hover: #0b39b8;
  --accent-soft: #eef3ff;

  /* Estado */
  --ok: #067647;
  --ok-soft: #ecfdf3;
  --warn: #b54708;
  --warn-soft: #fffaeb;
  --danger: #b3261e;
  --danger-soft: #fef3f2;

  /* Forma */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(16,20,35,.06);
  --shadow: 0 4px 16px rgba(16,20,35,.08);

  /* Medidas */
  --sidebar: 268px;
  /* Coluna de leitura. 880 px davam cerca de 150 caracteres por linha; 700
     dão cerca de 90, que é a medida em que o olho não perde a linha na
     volta. A grade de cartões continua em `--wide`. */
  --content: 700px;
  --wide: 1140px;
  --topbar: 56px;
  --font: Inter, "Segoe UI", system-ui, Arial, sans-serif;

  /* Ritmo: a distância entre dois blocos da página, e a margem lateral do
     conteúdo. `--respiro` é a única fonte da verdade do espaço vertical —
     antes eram 72 a 128 px herdados de `.section`, o que fazia a página
     inteira parecer um site de campanha. */
  --respiro: 40px;
  --margem: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }

/* Escala de interface: caixa normal em todo título, sem `text-transform`. */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--text);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem); font-weight: 660; }
h3 { font-size: 1.125rem; font-weight: 620; }
h4 { font-size: 1rem; font-weight: 620; }
p { margin: 0 0 1rem; }

/* AC-6: o anel de foco é azul da marca, que alcança 5,2:1 contra a superfície
   clara. O amarelo de antes ficava em 1,2:1 e era foco invisível. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  transform: translateY(-180%);
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--shadow);
}
.skip-link:focus { transform: translateY(0); }

/* ===========================================================================
   O app shell — SHELL-01, RESP-01, RESP-03.

   Escrito de fora para dentro: a base é a tela estreita, e a grade de duas
   colunas entra a partir de 1024 px. A navegação nasce em fluxo, acima do
   conteúdo; só a classe `.js` — que `js/site.mjs` põe no `<html>` — a
   transforma em gaveta. Sem JavaScript ela continua aberta e alcançável, que
   é o que mantém o robô do Ad Grants enxergando a navegação.
   =========================================================================== */

.app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.coluna { display: flex; flex-direction: column; min-width: 0; }
/* A pilha de blocos da página: um bloco por linha, sempre o mesmo respiro
   entre eles. O bloco não acrescenta espaço vertical próprio, então a
   distância entre dois blocos é exatamente `--respiro`. */
.coluna > main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--respiro);
  padding: var(--respiro) var(--margem);
}
.bloco { width: 100%; max-width: var(--wide); margin: 0 auto; }

/* AC-20: a marca é link de navegação, e a altura do quadrado da logo sozinha
   dava 34px. `min-height` leva o alvo a 44px sem mexer no desenho — o quadrado
   continua 34px, o que cresce é a área clicável em volta dele. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-yellow);
  color: var(--brand-ink);
  font-size: .8rem;
  font-weight: 700;
}
.brand-name { font-size: .95rem; }

/* Barra superior: existe só enquanto a navegação está recolhida (AC-16). */
.topbar {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: var(--topbar);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.topbar-menu {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.topbar-menu-traco {
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
html:not(.js) .topbar-menu { display: none; }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
/* A gaveta (AC-16 e AC-17): fechada em translateX(-100%), sobre o conteúdo. */
.js .sidebar {
  position: fixed;
  z-index: 60;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(var(--sidebar), calc(100% - 3rem));
  overflow-y: auto;
  border-right: 1px solid var(--border);
  border-bottom: 0;
  transform: translateX(-100%);
  transition: transform .22s ease;
}
.js .sidebar[data-aberta] { transform: translateX(0); }

.overlay {
  position: fixed;
  z-index: 50;
  inset: 0;
  background: rgba(16,20,35,.45);
}
.overlay[hidden] { display: none; }
.sem-rolagem { overflow: hidden; }

.nav { display: flex; flex-direction: column; gap: 1.25rem; }
.nav-titulo {
  margin: 0 0 .35rem;
  padding: 0 .75rem;
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.nav-lista { margin: 0; padding: 0; list-style: none; }
/* AC-20: 44 px é o piso de todo alvo de toque. */
.nav-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .75rem;
  border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-2); }
/* AC-3: barra à esquerda e peso do texto, além da cor — o indicador não
   depende de percepção cromática. A barra era amarela e alcançava 1,16:1
   contra este fundo: aparecia por matiz e sumia por luminância, em tela ruim
   ou para quem não distingue as duas. Em azul ela lê como um estado só com o
   texto, que já é azul. O amarelo segue na marca e no selo de gratuidade. */
.nav-item[aria-current="page"] {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.nav-icone { flex: none; }
.nav-rotulo { min-width: 0; }

.sidebar-pe { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }
.sessao { display: flex; align-items: center; gap: .6rem; }
.sessao-inicial {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--brand-yellow);
  color: var(--brand-ink);
  font-size: .78rem;
  font-weight: 700;
}
/* Nome longo trunca com reticências e mantém o inteiro no `title`. */
.sessao-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
.sessao-entrar {
  min-height: 44px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
  text-decoration: none;
}
.sessao-sair {
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: .85rem;
  cursor: pointer;
}

.page-head { padding: 0; }
.breadcrumb { margin: 0 0 .75rem; color: var(--text-2); font-size: .85rem; }
.breadcrumb a { color: var(--text-2); }
.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .5rem;
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: var(--r-full); background: var(--brand-yellow); }
.page-head h1 { margin: 0; max-width: var(--content); }
.page-head .lede { margin: .75rem 0 0; max-width: var(--content); color: var(--text-2); font-size: 1.05rem; }

.rodape {
  padding: 24px var(--margem) 40px;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: .85rem;
}
.rodape .bloco { display: flex; flex-wrap: wrap; gap: 0 1.5rem; justify-content: space-between; }
.rodape-legal { margin: 0; align-self: center; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.rodape-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--text-2); }

/* ===========================================================================
   Componentes — VIS-03, POL-01.

   O amarelo é assinatura, não área: ele marca o selo de gratuidade e o item
   ativo da navegação, e nada mais. Quem carrega a ação é o azul, que alcança
   5,2:1 com texto branco — o amarelo exigiria texto escuro e disputaria
   atenção com o próprio selo.
   =========================================================================== */

.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--surface);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.button:hover { background: var(--accent-hover); }
.button.secondary { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
.button.secondary:hover { background: var(--surface-2); }
.button[disabled] { opacity: .6; cursor: progress; }

/* O bloco de conteúdo não tem respiro próprio: quem separa é o `gap` da
   pilha. `.section-alt` deixou de ser faixa de tela cheia e virou painel. */
.section { padding-block: 0; padding-inline: 0; }
.section-alt {
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.section-label { margin: 0 0 .35rem; color: var(--text-2); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.section-title { margin: 0 0 .6rem; }
.section-intro { max-width: var(--content); margin: 0 0 1.25rem; color: var(--text-2); }
.narrow { max-width: var(--content); }
.note { margin: 1rem 0 0; color: var(--text-2); font-size: .9rem; }

/* Selo: carga horária em tom neutro, gratuidade no amarelo da marca. */
.selos { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.selo {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 600;
}
.selo-gratis { background: var(--brand-yellow); color: var(--brand-ink); }

/* Pílula de situação: cor, forma e rótulo de texto juntos (AC-3). O ponto
   antes do rótulo garante que a distinção não dependa de percepção de cor. */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .65rem;
  border: 1px solid;
  border-radius: var(--r-full);
  font-size: .8125rem;
  font-weight: 600;
}
.pilula::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: var(--r-full); background: currentColor; }
.pilula-neutra { border-color: var(--border-strong); background: var(--surface-2); color: var(--text-2); }
.pilula-ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.pilula-atencao { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.pilula-erro { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: var(--r-full);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: .8125rem;
  font-weight: 700;
}
.tag::before { content: "\2713"; }

/* Grade de cartões: as colunas nascem da largura disponível, não de um número
   fixo. `max-width` no cartão impede que um curso só estique até a borda. */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  max-width: 30rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.card h3 { margin: 0; font-size: 1.05rem; font-weight: 620; letter-spacing: -.01em; }
/* AC-20: o título do cartão é o link principal dele e media 20px de altura.
   O par padding/margem negativa leva o alvo a 44px sem deslocar uma linha do
   layout — a caixa clicável cresce, a caixa desenhada não. */
.card h3 a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  color: var(--text);
  text-decoration: none;
}
.card h3 a:hover { color: var(--accent); }
.card p { margin: 0; color: var(--text-2); font-size: .95rem; }
.card-link { margin-top: auto; padding-top: .3rem; color: var(--accent); font-weight: 600; font-size: .95rem; }
.card-link a { color: inherit; text-decoration: none; }
.card-link a::after { content: "\00a0\2192"; }
.card-link a:hover { text-decoration: underline; }
/* Já inscrito não é ação: cor de estado, marca de forma e o rótulo escrito. */
.card-link[data-inscrito] { color: var(--ok); }
.card-link[data-inscrito]::before { content: "\2713\00a0"; }

/* Lista de linhas — uma inscrição por linha, com a situação em pílula. */
.lista { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.linha {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.linha-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.linha h3 { margin: 0; flex: 1 1 14rem; font-size: 1.02rem; font-weight: 620; }
.linha h3 a { color: var(--text); text-decoration: none; }
.linha h3 a:hover { color: var(--accent); }
.linha-data { color: var(--text-2); font-size: .85rem; }
.linha p { margin: 0; font-size: .95rem; }

/* Painel de dados: linhas divididas, rótulo à esquerda e valor à direita. */
.painel { margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.painel-linha { display: flex; flex-wrap: wrap; gap: .15rem 1rem; padding: .7rem 1.1rem; }
.painel-linha + .painel-linha { border-top: 1px solid var(--border); }
.painel dt { flex: 0 0 11rem; color: var(--text-2); font-size: .85rem; font-weight: 600; }
.painel dd { flex: 1 1 12rem; min-width: 0; margin: 0; font-weight: 600; overflow-wrap: break-word; }

/* Faixa de dados do curso — E3: os quatro dados numa faixa só, não numa
   grade 2×2 de caixas. */
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 1.25rem 0 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.fact { min-width: 0; padding: .7rem 1.1rem; }
.fact + .fact { border-top: 1px solid var(--border); }
.fact dt { margin: 0; color: var(--text-2); font-size: .8rem; font-weight: 600; }
.fact dd { margin: .15rem 0 0; font-size: .95rem; font-weight: 600; }

.notice, .aviso {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0;
  padding: .85rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--text);
  font-size: .95rem;
}
.notice p, .aviso p { margin: 0; }
.aviso { border-left-color: var(--warn); background: var(--warn-soft); }

/* Estado vazio: explicação e caminho de saída, nunca um contêiner vazio. */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  padding: 1.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-2);
}
.vazio a { font-weight: 600; }

/* Espaço reservado: as dimensões do que vem, sem salto quando o dado chega. */
.reservado { display: grid; gap: .6rem; margin: 0; }
.reservado span { display: block; height: 3.25rem; border-radius: var(--r); background: var(--surface-2); animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .55; } }

/* ===========================================================================
   Corpo de artigo — RESP-03, VIS-03.

   A coluna de leitura é mais estreita que a área disponível de propósito. A
   prévia do shell mediu parágrafo de 1077 px, cerca de 150 caracteres por
   linha: o dobro do que se lê sem perder a linha na volta. `--content` passa a
   valer para texto corrido, e a grade de cartões continua em `--wide`.

   Nenhuma regra daqui redefine o tamanho de um título. A escala do topo do
   arquivo governa sozinha, e é isso que mantém o `h2` menor que o `h1` da
   mesma página — a prévia mediu 36 px contra 72 px, invertidos.
   =========================================================================== */

.content { max-width: var(--content); }
.content h2 { margin: 2rem 0 .75rem; }
.content h3 { margin: 1.5rem 0 .5rem; }
.content blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.15rem; border-left: 3px solid var(--brand-yellow); color: var(--text-2); }
.content a { color: var(--accent); font-weight: 500; }
.article-body h2, .article-body h3 { scroll-margin-top: 5rem; }
.article-body hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--border); }
.article-body ul, .article-body ol { padding-left: 1.25rem; }
.article-body li + li { margin-top: .4rem; }

/* Índice do curso. Abaixo de 1280 px ele é um bloco de apoio antes da ementa;
   acima, a media query do fim do arquivo o fixa à direita (E3 do design). */
.toc { margin: 0 0 1.5rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.toc h2 { margin: 0 0 .5rem; color: var(--text-2); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc li + li { margin-top: .35rem; }
.toc a { color: var(--text-2); font-size: .9rem; text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

/* AC-21: tabela e bloco de código rolam dentro do próprio elemento. Sem o
   `max-width`, o conteúdo largo empurra a coluna e produz rolagem horizontal
   no documento inteiro, que é o que AC-19 proíbe. */
.table-wrap { overflow-x: auto; max-width: 100%; margin: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table-wrap th, .table-wrap td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--border); }
.table-wrap th { background: var(--surface-2); color: var(--text); font-size: .8125rem; font-weight: 600; }
.table-wrap tr:last-child td { border-bottom: 0; }
pre.code { overflow-x: auto; max-width: 100%; margin: 1.5rem 0; padding: 1rem 1.15rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r); background: var(--surface-2); color: var(--text); }
pre.code code { padding: 0; background: none; font-family: Consolas, "Courier New", monospace; font-size: .9rem; line-height: 1.6; white-space: pre; }
.content code { padding: .1rem .35rem; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-family: Consolas, "Courier New", monospace; font-size: .92em; }

.steps { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.step-number {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .95rem;
  font-weight: 700;
}
.steps h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 620; }
.steps p { margin: 0; color: var(--text-2); font-size: .95rem; }

.form {
  padding: clamp(1.15rem, 3vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.form h2, .form h3 { margin: 0 0 .4rem; }
.form h3 { margin-top: 1.5rem; }
.form > p { margin: 0 0 1.15rem; color: var(--text-2); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; margin-bottom: .35rem; font-size: .9rem; font-weight: 600; }
.field .optional { color: var(--text-2); font-weight: 400; }
/* AC-20: o campo é alvo de toque como qualquer botão. */
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field .hint { margin: .35rem 0 0; color: var(--text-2); font-size: .85rem; }
/* Erro: cor, marca de forma e a mensagem escrita — nunca só a cor (AC-3). */
.field .erro, .form-status.error {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  color: var(--danger);
  font-size: .88rem;
  font-weight: 600;
}
.field .erro::before, .form-status.error::before {
  content: "!";
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--danger);
  color: var(--surface);
  font-size: .72rem;
  font-weight: 700;
}
.field .erro[hidden] { display: none; }
.field-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; margin-bottom: 1.5rem; }
/* A caixa em si é pequena; quem recebe o toque é o rótulo, que a aciona. */
.field-check input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: .55rem; }
.field-check label { min-height: 44px; display: flex; align-items: center; font-size: .92rem; font-weight: 400; }
.form button { width: 100%; }
.form-status { margin: 1rem 0 0; min-height: 1.5rem; font-weight: 600; }
.form-status.ok { color: var(--ok); }
.form-legal { margin: 0 0 1.15rem; color: var(--text-2); font-size: .88rem; }

/* Corte de 600 px: o conteúdo ganha respiro lateral e a ficha do curso vira
   faixa horizontal (RESP-03, E3). */
@media (min-width: 600px) {
  :root { --margem: 24px; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fact + .fact { border-top: 0; border-left: 1px solid var(--border); }
  .form button { width: auto; min-width: 12rem; }
}

/* Corte de 1024 px: a navegação deixa de ser gaveta e vira coluna fixa ao lado
   do conteúdo (AC-15). Uma declaração de `grid-template-columns` governa a
   largura inteira do shell — `--sidebar` é a única fonte de verdade. */
@media (min-width: 1024px) {
  .app { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .topbar, .overlay { display: none; }
  .sidebar, .js .sidebar {
    position: sticky;
    top: 0;
    left: auto;
    width: auto;
    height: 100dvh;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    transform: none;
  }
  :root { --margem: 40px; }
}

/* Corte de 1280 px — E3 do design: só aqui sobra largura para o índice viver
   fora da coluna de leitura. Ele é o primeiro irmão na marcação, e `order` o
   manda para a direita sem que a ordem do documento mude: quem navega por
   teclado e quem lê sem CSS continuam encontrando o índice antes da ementa. */
@media (min-width: 1280px) {
  .curso-corpo > .bloco { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 0 2.5rem; align-items: start; }
  .curso-corpo > .bloco > .content { order: 1; }
  .curso-corpo > .bloco > .toc { order: 2; position: sticky; top: 1.5rem; max-height: calc(100dvh - 3rem); overflow-y: auto; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reservado span { animation: none; }
}

/* Título de curso sem espaço quebra a palavra em vez de estourar o bloco:
   `break-word` só age quando a linha não cabe de outro jeito, e `word-break:
   normal` impede que ele passe a cortar palavra que caberia. */
.page-head h1, .section-title, .card h3, .linha h3, .article-body h2, .article-body h3 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}