/* ==========================================================================
   Torque — Manutenção de Drones DJI Agras
   Sistema de design da plataforma (catálogo + curso + downloads + admin).

   Origem da paleta: a identidade Torque (verde-instrumento #0f7a52 sobre um
   neutro levemente esverdeado). A relação com os diagramas do curso se
   inverteu nesta etapa: antes a página seguia os SVGs; agora são os 53 SVGs
   que seguem a identidade — repintados por `npm run repaint-diagramas`.
   Mudar um token de cor aqui implica rodar esse script de novo.

   Público: técnico de manutenção, celular na mão, muitas vezes sol na tela.
   Consequências fixas em todo componente daqui pra baixo:
     - contraste alto (texto principal #0f1a14 sobre branco, nunca cinza claro);
     - alvo de toque mínimo de 44px em tudo que é clicável;
     - navegação principal ao alcance do polegar no celular (barra inferior);
     - nada depende de hover pra ser compreensível.

   Sumário
     1. Tokens
     2. Base e tipografia
     3. Layout (topo, navegação, página, rodapé)
     4. Componentes (botão, formulário, cartão, alerta, badge, tabela, chip)
     5. Catálogo e peça
     5b. Mapa visual do catálogo
     6. Curso (índice, capítulo, diagramas)
     7. Downloads
     8. Admin
     9. Utilitários e estados vazios
    10. Identidade Torque — ajustes de forma
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes auto-hospedadas — sem requisição a terceiros.
   Arquivos em public/fonts/ (variáveis, subset latin, licença OFL).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-variable.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Tinta — escala neutra levemente esverdeada ---- */
  --tinta-900: #0f1a14; /* texto principal · fundo da área do curso */
  --tinta-700: #1d3128; /* superfície elevada dentro de fundo escuro */
  --tinta-600: #3d463f; /* texto secundário */
  --tinta-500: #566159; /* texto fraco, rótulos */
  --tinta-400: #7c887f; /* rótulo mono, borda de alerta neutro */
  --tinta-300: #c4d4c9; /* borda forte de campo e botão secundário */
  --tinta-200: #dbe5de; /* borda padrão · trilho de progresso */
  --tinta-100: #f2f6f3; /* fundo da página · destaque do código de fábrica */
  --tinta-50:  #f7fbf8; /* cabeçalho de tabela · moldura de diagrama · hover */

  /* ---- Ação (verde-instrumento) — era o azul ---- */
  --acao:          #0f7a52;
  --acao-escuro:   #0b5c3e; /* hover e links de peça */
  --acao-profundo: #08402c; /* h2 do capítulo */
  --acao-fundo:    #e9f4ee;
  --acao-borda:    #bfe0cd;

  /* Apelidos: mantêm as ~1.900 linhas de regras abaixo funcionando sem edição.
     Regra pra código novo: usar --acao*, não --azul*. */
  --azul:          var(--acao);
  --azul-escuro:   var(--acao-escuro);
  --azul-profundo: var(--acao-profundo);
  --azul-fundo:    var(--acao-fundo);
  --azul-borda:    var(--acao-borda);

  /* ---- Âmbar — atenção, observação, medida ---- */
  --ambar:        #b45309;
  --ambar-escuro: #8a4109;
  --ambar-fundo:  #fffbeb;
  --ambar-borda:  #fde68a;

  /* ---- Verde — concluído, verificado ----
     Com o verde virando cor de marca, "o que age" e "o que está concluído"
     passaram a ser a mesma cor. Se a distinção fizer falta na conferência
     visual, trocar --verde por #1d6b8a (azul-petróleo) — é o único ponto a
     mudar, aqui e no mapa de repintura dos diagramas. */
  --verde:       var(--acao);
  --verde-fundo: var(--acao-fundo);
  --verde-borda: var(--acao-borda);

  /* ---- Vermelho — erro, recusa, revogação ---- */
  --vermelho:       #b3261e;
  --vermelho-fundo: #fdf2f1;
  --vermelho-borda: #f6cdc9;

  /* ---- Área do curso (produto separado, fundo escuro) ---- */
  --curso-fundo:      #0f1a14;
  --curso-superficie: #1d3128;
  --curso-texto:      #f2f6f3;
  --curso-suave:      #c9d6ce;
  --curso-acento:     #63d39c; /* 8,9:1 sobre --curso-fundo */

  /* ---- Superfícies ---- */
  --superficie:  #ffffff;
  --fundo:       var(--tinta-100);
  --borda:       var(--tinta-200);
  --borda-forte: var(--tinta-300);

  /* ---- Texto ---- */
  --texto:       var(--tinta-900);
  --texto-suave: var(--tinta-600);
  --texto-fraco: var(--tinta-500);

  /* ---- Tipografia ---- */
  --fonte: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono',
    Menlo, Consolas, 'Liberation Mono', monospace;

  /* Manrope tem eixo de peso largo: títulos sobem para 800 */
  --peso-titulo: 800;
  --tracking-titulo: -0.03em;

  /* ---- Escala tipográfica ---- */
  --txt-xs: 0.75rem;
  --txt-sm: 0.85rem;
  --txt-base: 0.95rem;
  --txt-md: 1.05rem;
  --txt-lg: 1.25rem;
  --txt-xl: 1.5rem;

  /* ---- Espaço — escala de 4px ---- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  /* ---- Raio — mais generoso; botões e chips viram pílula (seção 10) ---- */
  --raio-sm: 0.5rem;
  --raio: 0.75rem;
  --raio-lg: 1rem;
  --raio-pilula: 999px;

  /* ---- Sombra — discreta; a hierarquia vem de borda e cor ---- */
  --sombra-sm: 0 1px 2px rgba(15, 26, 20, 0.06);
  --sombra: 0 1px 3px rgba(15, 26, 20, 0.08), 0 1px 2px rgba(15, 26, 20, 0.04);
  --sombra-topo: 0 1px 0 rgba(15, 26, 20, 0.08);

  /* ---- Medidas ---- */
  --largura-pagina: 1120px;
  --largura-leitura: 44rem;
  --alvo-toque: 44px;
}

/* ==========================================================================
   2. Base e tipografia
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 650;
  line-height: 1.25;
  color: var(--texto);
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

a { color: var(--azul-escuro); }
a:hover { color: var(--azul-profundo); }

/* Foco visível e uniforme — o mesmo anel em link, botão e campo. */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

img, svg { max-width: 100%; }

code, .codigo, .mono {
  font-family: var(--fonte-mono);
  font-variant-ligatures: none;
}

/* Números alinhados em tabelas e contagens. */
table, .total, .codigo { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   3. Layout
   ========================================================================== */

/* --- Topo -------------------------------------------------------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  box-shadow: var(--sombra-topo);
}

.topo-interno {
  display: flex;
  align-items: center;
  gap: var(--e4);
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: var(--e2) var(--e4);
}

/* Marca — símbolo (losango com eixo) + nome. No celular a linha de apoio
   some e fica só "Torque", pra não competir com a navegação. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  text-decoration: none;
  color: var(--texto);
  min-height: var(--alvo-toque);
}
.marca-simbolo {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--azul);
}
.marca-nome {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.marca-nome b {
  font-size: var(--txt-md);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.marca-nome span {
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
  letter-spacing: 0.01em;
}

.topo-conta {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-left: auto;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.topo-conta form { margin: 0; }
.topo-email {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Navegação de áreas ------------------------------------------------ */
/* Desktop: abas no topo. Celular: barra fixa no rodapé, alcance do polegar. */
.nav-areas {
  display: flex;
  align-items: center;
  gap: var(--e1);
}
.nav-area {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--alvo-toque);
  padding: 0 var(--e3);
  border-radius: var(--raio);
  font-size: var(--txt-base);
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
}
.nav-area svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.nav-area:hover {
  background: var(--tinta-100);
  color: var(--texto);
}
.nav-area.ativo {
  background: var(--azul-fundo);
  color: var(--azul-escuro);
}
.nav-area-rotulo { white-space: nowrap; }

/* --- Página ------------------------------------------------------------ */
.pagina {
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: var(--e5) var(--e4) var(--e7);
}
.pagina-leitura { max-width: var(--largura-leitura); }

/* Página sem topo (login, definir senha): cartão centralizado. */
.pagina-central {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--e5) var(--e4);
}

.cabecalho-pagina { margin-bottom: var(--e5); }
.cabecalho-pagina h1 {
  font-size: var(--txt-xl);
  margin-bottom: var(--e1);
}
.cabecalho-pagina .subtitulo {
  margin: 0;
  font-size: var(--txt-base);
  color: var(--texto-suave);
  max-width: var(--largura-leitura);
}

.voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  min-height: var(--alvo-toque);
  margin-bottom: var(--e2);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
}
.voltar:hover { color: var(--azul-escuro); }

/* ==========================================================================
   4. Componentes
   ========================================================================== */

/* --- Botões ------------------------------------------------------------ */
.btn,
button[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--alvo-toque);
  padding: 0 var(--e4);
  font: inherit;
  font-size: var(--txt-base);
  font-weight: 600;
  color: var(--superficie);
  background: var(--azul);
  border: 1px solid var(--azul);
  border-radius: var(--raio);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover,
button[type='submit']:hover {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  color: var(--superficie);
}
.btn:active,
button[type='submit']:active { background: var(--azul-profundo); }

/* O seletor de elemento `button[type=submit]` acima tem a mesma especificidade
   de uma classe + elemento, então os modificadores precisam repetir `button`
   pra vencer — senão um <button type="submit" class="btn-secundario"> sairia
   azul. */
.btn-secundario,
button.btn-secundario {
  color: var(--texto);
  background: var(--superficie);
  border-color: var(--borda-forte);
}
.btn-secundario:hover,
button.btn-secundario:hover {
  color: var(--texto);
  background: var(--tinta-50);
  border-color: var(--tinta-400);
}

/* Ação destrutiva — texto vermelho sublinhado, nunca botão vermelho cheio:
   revogar/sair/excluir aparecem dentro de tabelas e barras, onde um bloco
   vermelho chamaria mais atenção que o conteúdo. */
.btn-perigo,
.link-sair,
button.btn-perigo,
button.link-sair {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding: 0 var(--e1);
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--vermelho);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.btn-perigo:hover,
.link-sair:hover,
button.btn-perigo:hover,
button.link-sair:hover {
  color: #8c1c16;
  background: none;
  border-color: transparent;
}

.btn-bloco { width: 100%; }

/* --- Formulários ------------------------------------------------------- */
.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.campo-form {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
}
.campo-form .dica {
  font-weight: 400;
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='search'],
select,
textarea {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--e2) var(--e3);
  font: inherit;
  font-size: 1rem; /* 16px evita o zoom automático do iOS ao focar */
  font-weight: 400;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}
textarea { line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texto-fraco); }
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--azul);
  outline-offset: 1px;
  border-color: var(--azul);
}

/* --- Cartão ------------------------------------------------------------ */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  padding: var(--e5);
}
.cartao + .cartao { margin-top: var(--e4); }
.cartao-titulo {
  font-size: var(--txt-md);
  margin-bottom: var(--e3);
}

/* Cartão de autenticação — login, definir senha, recuperar, sem acesso. */
.cartao-auth {
  width: 100%;
  max-width: 26rem;
}
.cartao-auth-largo { max-width: 34rem; }
.cartao-auth h1 {
  font-size: var(--txt-lg);
  margin-bottom: var(--e2);
}
.cartao-auth .apoio {
  font-size: var(--txt-base);
  color: var(--texto-suave);
  margin-bottom: var(--e4);
}
.marca-auth {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e5);
  color: var(--texto);
  text-decoration: none;
}
.marca-auth .marca-simbolo { width: 34px; height: 34px; }
.rodape-auth {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  font-size: var(--txt-sm);
  text-align: center;
}
.rodape-auth a { color: var(--texto-suave); }

/* --- Alertas ----------------------------------------------------------- */
.alerta {
  display: flex;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  border: 1px solid var(--borda-forte);
  border-left: 4px solid var(--tinta-400);
  border-radius: var(--raio-sm);
  background: var(--tinta-50);
  font-size: var(--txt-base);
  color: var(--texto-suave);
}
.alerta strong { color: var(--texto); }

.alerta-erro,
.erro {
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  background: var(--vermelho-fundo);
  border: 1px solid var(--vermelho-borda);
  border-left: 4px solid var(--vermelho);
  border-radius: var(--raio-sm);
  font-size: var(--txt-base);
  color: var(--vermelho);
}
.alerta-ok {
  background: var(--verde-fundo);
  border-color: var(--verde-borda);
  border-left-color: var(--verde);
  color: var(--acao-escuro);
}
.alerta-aviso,
.observacoes {
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  border-left: 4px solid var(--ambar);
  border-radius: var(--raio-sm);
  font-size: var(--txt-base);
  color: var(--ambar-escuro);
}
.observacoes strong { color: var(--ambar-escuro); }

/* --- Badges ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 0.15rem var(--e2);
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda-forte);
  background: var(--tinta-50);
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
}
.badge-ok,
.status-ok,
.badge-verificado {
  background: var(--verde-fundo);
  border-color: var(--verde-borda);
  color: var(--verde);
}
.badge-erro, .status-erro {
  background: var(--vermelho-fundo);
  border-color: var(--vermelho-borda);
  color: var(--vermelho);
}
.badge-aviso, .status-processando {
  background: var(--ambar-fundo);
  border-color: var(--ambar-borda);
  color: var(--ambar-escuro);
}
.status-ignorado {
  background: var(--tinta-100);
  border-color: var(--borda-forte);
  color: var(--texto-fraco);
}
/* Os .status-* aparecem em <span> soltos dentro de tabelas — recebem a
   mesma forma de pílula do .badge sem precisar da classe no HTML. */
.status-ok, .status-erro, .status-ignorado, .status-processando {
  display: inline-block;
  padding: 0.15rem var(--e2);
  border: 1px solid;
  border-radius: var(--raio-pilula);
  font-size: var(--txt-xs);
  font-weight: 600;
}
.badge-verificado {
  display: inline-flex;
  padding: 0.2rem var(--e3);
  border: 1px solid var(--verde-borda);
  border-radius: var(--raio-pilula);
  font-size: var(--txt-xs);
  font-weight: 600;
}

/* --- Tabelas ----------------------------------------------------------- */
/* Rolagem horizontal fica no wrapper: a página nunca rola de lado. */
.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--superficie);
  font-size: var(--txt-sm);
}
th, td {
  text-align: left;
  padding: var(--e3);
  border-bottom: 1px solid var(--borda);
}
th {
  background: var(--tinta-50);
  color: var(--texto-suave);
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: 1px solid var(--borda-forte);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--tinta-50); }
tr.linha-erro { background: var(--vermelho-fundo); }
tr.linha-erro:hover { background: #fae3e1; }

.codigo { white-space: nowrap; }
td.codigo { font-size: var(--txt-xs); color: var(--texto-suave); }

/* Celular: cada linha vira cartão, rótulo vem do data-label. */
@media (max-width: 700px) {
  .tabela-rolagem {
    border: none;
    background: none;
    box-shadow: none;
    overflow-x: visible;
  }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  table { background: none; font-size: var(--txt-base); }
  tbody tr {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sm);
    margin-bottom: var(--e3);
    padding: var(--e3);
  }
  tbody tr:hover { background: var(--superficie); }
  td {
    display: flex;
    gap: var(--e2);
    border: none;
    padding: var(--e1) 0;
  }
  td::before {
    content: attr(data-label);
    flex: 0 0 8.5rem;
    font-size: var(--txt-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--texto-fraco);
  }
  td:empty { display: none; }
  /* No cartão do celular o código não tem pra onde rolar: quebra em vez de
     estourar a largura da linha. */
  td.codigo { white-space: normal; word-break: break-all; }
}

/* --- Chips (facetas) --------------------------------------------------- */
.opcao {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--e3);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  font-size: var(--txt-sm);
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
}
.opcao:hover {
  border-color: var(--azul);
  color: var(--azul-escuro);
}
.opcao.selecionada {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--superficie);
  font-weight: 600;
}
.opcao.selecionada:hover { background: var(--azul-escuro); color: var(--superficie); }
.opcao.desabilitada {
  background: var(--tinta-100);
  border-color: var(--borda);
  color: var(--texto-fraco);
  cursor: not-allowed;
}

/* ==========================================================================
   5. Catálogo e peça
   ========================================================================== */
.busca { margin-bottom: var(--e4); position: relative; }
.busca input[type='search'] {
  min-height: 52px;
  padding-left: 2.75rem;
  font-size: 1rem;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}
.busca-icone {
  position: absolute;
  left: var(--e3);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--texto-fraco);
  pointer-events: none;
}

.facetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4) var(--e5);
  padding: var(--e4);
  margin-bottom: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}
.faceta { min-width: 0; }
.faceta h2 {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
  margin: 0 0 var(--e2);
}
.faceta ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* Painel de filtros escondido atrás de um botão no celular — técnica de
   checkbox + label, sem JS. Tentamos primeiro <details>/<summary> nativo,
   mas o Chromium moderno esconde o conteúdo fechado por um mecanismo interno
   (content-visibility num slot de sombra) que nenhuma regra de CSS no filho
   consegue desfazer — inclusive em telas largas, onde o painel deveria ficar
   sempre visível. Checkbox é mais verboso, mas o :checked é 100% nosso, sem
   comportamento de navegador pra contornar. Em telas largas o alternador
   nem aparece (ver .facetas, sem media query — já fica sempre visível). */
.facetas-alternador {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.facetas-resumo { display: none; }
.facetas-alternador:focus-visible + .facetas-resumo {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.resultado-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e3);
}
.total {
  margin: 0;
  font-size: var(--txt-base);
  font-weight: 600;
  color: var(--texto-suave);
}
.limpar {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--vermelho);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sem-resultado {
  padding: var(--e4);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  border-radius: var(--raio);
  font-size: var(--txt-base);
  color: var(--ambar-escuro);
  margin-bottom: var(--e4);
}

.link-peca {
  font-weight: 650;
  color: var(--azul-escuro);
  text-decoration: none;
}
.link-peca:hover { text-decoration: underline; }
.modelos {
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--texto-suave);
}

/* --- Página da peça ---------------------------------------------------- */
.peca {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  padding: var(--e5);
}
.peca h1 { font-size: var(--txt-xl); margin-bottom: var(--e1); }
.peca .nome-en {
  margin: 0 0 var(--e4);
  font-size: var(--txt-md);
  color: var(--texto-fraco);
}

/* O código de fábrica é o dado que o técnico veio buscar: destaque próprio,
   monoespaçado, com o botão de copiar colado nele. */
.codigo-linha {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.codigo-linha .codigo {
  font-size: var(--txt-md);
  font-weight: 600;
  color: var(--texto);
  background: var(--tinta-100);
  border: 1px solid var(--borda-forte);
  padding: var(--e2) var(--e3);
  border-radius: var(--raio);
  user-select: all;
}
.btn-copiar {
  min-height: var(--alvo-toque);
  padding: 0 var(--e3);
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--azul-escuro);
  background: var(--azul-fundo);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  cursor: pointer;
}
.btn-copiar:hover { background: #d7ebe0; }
.btn-copiar:active { background: var(--azul-borda); }

.foto {
  display: block;
  width: 100%;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: var(--e4);
}

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--e4);
  margin: var(--e4) 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}
.campo dt {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
  margin-bottom: var(--e1);
}
.campo dd {
  margin: 0;
  font-size: var(--txt-base);
  font-weight: 500;
  color: var(--texto);
}

.relacionadas { margin-top: var(--e5); }
.relacionadas h2 { font-size: var(--txt-md); margin-bottom: var(--e3); }
.relacionadas ul {
  list-style: none;
  margin: 0 0 var(--e3);
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.relacionadas li { border-bottom: 1px solid var(--borda); }
.relacionadas li:last-child { border-bottom: none; }
.relacionadas li a {
  display: block;
  min-height: var(--alvo-toque);
  padding: var(--e3) var(--e4);
  font-weight: 600;
  color: var(--azul-escuro);
  text-decoration: none;
}
.relacionadas li a:hover { background: var(--tinta-50); }
.relacionadas .cod {
  display: block;
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  font-weight: 400;
  color: var(--texto-fraco);
}

/* ==========================================================================
   5b. Mapa visual do catálogo
   --------------------------------------------------------------------------
   Segunda forma de achar a mesma peça: pela posição na aeronave, em vez do
   nome. Vem do catálogo interativo do T100 (catalogo-t100/), reescrito aqui
   com os tokens da plataforma — o app original trazia paleta e fonte
   próprias (Barlow do Google Fonts), que sairiam do padrão do resto e ainda
   fariam o texto depender de uma requisição a terceiro.

   O realce é a foto recortada pelo polígono, sobre a mesma foto esmaecida:
   destacar é devolver a cor da região, não pintar uma cor por cima — o
   técnico precisa reconhecer a peça na foto enquanto ela está destacada.
   ========================================================================== */

.alternador-modo {
  display: flex;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.alternador-modo .modo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--alvo-toque);
  padding: 0 var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: var(--txt-base);
  font-weight: 600;
  text-decoration: none;
}
.alternador-modo .modo svg { width: 18px; height: 18px; flex: none; }
.alternador-modo .modo:hover { border-color: var(--azul); color: var(--azul); }
.alternador-modo .modo.ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: #ffffff;
}

.mapa-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  grid-template-areas:
    'cabecalho cabecalho'
    'palco     painel'
    'vistas    painel';
  gap: var(--e4);
  align-items: start;
}
.mapa-app.carregando .mapa-palco { opacity: 0; }

.mapa-cabecalho {
  grid-area: cabecalho;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
.mapa-cabecalho .trilha {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--txt-base);
  color: var(--texto-suave);
  min-height: var(--alvo-toque);
}
.mapa-cabecalho .trilha button {
  min-height: var(--alvo-toque);
  padding: 0 var(--e2);
  border: 0;
  background: none;
  color: var(--azul);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.mapa-cabecalho .trilha button:hover { text-decoration: underline; }

/* ---- palco (foto + polígonos) ---- */
.mapa-palco {
  grid-area: palco;
  position: relative;
  transition: opacity 0.2s;
}
.mapa-quadro {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  background: var(--tinta-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}
.mapa-quadro.temAreas { cursor: pointer; }
.mapa-quadro svg { display: block; width: 100%; height: 100%; }

/* "Cor sobre cinza", o modo que o catálogo original trazia como padrão: a
   foto de base vai pra escala de cinza enquanto houver regiões mapeadas, e o
   realce é o recorte colorido por cima. Era uma das quatro opções num seletor;
   virou fixo aqui porque as outras três só variavam o efeito, e um seletor a
   mais na tela disputa espaço com o que o técnico veio fazer. */
.mapa-quadro #foto { transition: filter 0.18s; }
.mapa-quadro.temAreas #foto { filter: grayscale(1) contrast(0.8) brightness(1.02) opacity(0.55); }
.mapa-quadro image.realce { opacity: 0; transition: opacity 0.16s; pointer-events: none; }
.mapa-quadro image.realce.on { opacity: 1; }

/* O polígono NUNCA é desenhado — nem contorno, nem preenchimento, nem no
   hover, nem selecionado, nem com foco de teclado. Ele é só a área de clique.
   Quem marca a região é o filtro sobre o recorte da foto logo acima: como as
   fotos do drone são recortadas sem fundo, o limite do realce é a silhueta
   real da peça, muito melhor que o polígono traçado à mão por baixo (que é
   propositalmente folgado). Desenhar o polígono só denunciaria essa folga.

   pointer-events: all é o que mantém a região clicável mesmo sem nada pintado
   — sem isso um polígono totalmente transparente deixaria de receber o clique.
   Feedback de foco por teclado é dado acendendo o realce (ver os handlers de
   focus/blur em catalogo-mapa.js), não com outline. */
.mapa-quadro polygon.area {
  fill: none;
  stroke: none;
  pointer-events: all;
  cursor: pointer;
  outline: none;
}

.mapa-nome-vista {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  z-index: 2;
  padding: var(--e1) var(--e3);
  border-radius: var(--raio-pilula);
  background: rgba(15, 26, 20, 0.78);
  color: #ffffff;
  font-size: var(--txt-xs);
  font-weight: 600;
}
.mapa-rotulo {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -140%);
  padding: var(--e1) var(--e2);
  border-radius: var(--raio-sm);
  background: var(--tinta-900);
  color: #ffffff;
  font-size: var(--txt-xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.mapa-rotulo.on { opacity: 1; }

.mapa-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  display: grid;
  place-items: center;
  border: 1px solid var(--borda-forte);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tinta-900);
  font-size: var(--txt-xl);
  line-height: 1;
  cursor: pointer;
}
.mapa-seta.ant { left: var(--e2); }
.mapa-seta.prox { right: var(--e2); }
.mapa-seta:hover { border-color: var(--azul); color: var(--azul); }

/* ---- miniaturas das 7 vistas ---- */
.mapa-vistas {
  grid-area: vistas;
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  padding-bottom: var(--e2);
}
.mapa-vistas button {
  flex: none;
  width: 5.5rem;
  min-height: var(--alvo-toque);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e1);
  padding: var(--e2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: var(--txt-xs);
  font-weight: 600;
  cursor: pointer;
}
.mapa-vistas button img { width: 100%; height: 2.4rem; object-fit: contain; }
.mapa-vistas button[aria-current='true'] {
  border-color: var(--azul);
  background: var(--azul-fundo);
  color: var(--azul-profundo);
}

/* ---- painel de peças ---- */
.mapa-painel { grid-area: painel; min-width: 0; }
.mapa-bloco {
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}
.mapa-bloco h2 { margin: 0 0 var(--e1); font-size: var(--txt-md); }
.mapa-ajuda { margin: 0; font-size: var(--txt-sm); color: var(--texto-suave); }
.mapa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}
.mapa-chips button {
  min-height: var(--alvo-toque);
  padding: 0 var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--txt-sm);
  font-weight: 600;
  cursor: pointer;
}
.mapa-chips button:hover { border-color: var(--azul); color: var(--azul); }
.mapa-chips button[aria-pressed='true'] {
  background: var(--azul);
  border-color: var(--azul);
  color: #ffffff;
}

.mapa-rolagem { margin-top: var(--e3); }
.mapa-grupo {
  margin: var(--e4) 0 var(--e2);
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
}
.mapa-grupo:first-child { margin-top: 0; }
.mapa-lista { list-style: none; margin: 0; padding: 0; }
.mapa-peca {
  display: block;
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  margin-bottom: var(--e2);
  text-decoration: none;
  color: var(--texto);
}
.mapa-peca:hover { border-color: var(--azul); background: var(--azul-fundo); }
.mapa-peca-nome {
  display: block;
  font-weight: 600;
  font-size: var(--txt-base);
  line-height: 1.35;
}
.mapa-peca-en {
  display: block;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.mapa-peca-codigo {
  display: block;
  margin-top: var(--e1);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
}
.etiqueta-desgaste {
  display: inline-block;
  margin-left: var(--e2);
  padding: 0 var(--e2);
  border-radius: var(--raio-pilula);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  color: var(--ambar-escuro);
  font-size: var(--txt-xs);
  font-weight: 700;
  vertical-align: middle;
}
.mapa-vazio {
  margin: 0;
  padding: var(--e4);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  color: var(--texto-suave);
  font-size: var(--txt-sm);
}

/* No celular a foto vem primeiro e a lista de peças rola logo abaixo: o
   técnico toca na região e lê o resultado sem sair do polegar. */
@media (max-width: 900px) {
  .mapa-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'cabecalho'
      'palco'
      'vistas'
      'painel';
  }
}

/* ==========================================================================
   6. Curso
   ========================================================================== */

/* --- Progresso --------------------------------------------------------- */
.progresso-curso {
  padding: var(--e4) var(--e5) var(--e5);
  margin-bottom: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
}
.progresso-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e2);
}
.progresso-pct {
  font-size: var(--txt-lg);
  font-weight: 700;
  color: var(--verde);
  letter-spacing: -0.02em;
}
.progresso-barra {
  height: 0.6rem;
  background: var(--tinta-200);
  border-radius: var(--raio-pilula);
  overflow: hidden;
}
.progresso-barra-preenchida {
  height: 100%;
  background: var(--verde);
  border-radius: var(--raio-pilula);
  transition: width 0.3s ease;
}
/* A ação principal da página mora aqui: "continuar de onde parou" é o que o
   aluno quer em 9 de 10 visitas — a lista abaixo é pra voltar a um ponto
   específico, que é o caso menos frequente. */
.progresso-acao { margin-top: var(--e4); }
.progresso-nota {
  margin: var(--e2) 0 0;
  font-size: var(--txt-sm);
  color: var(--texto-fraco);
}

/* --- Sumário ----------------------------------------------------------- */
/* Duas linhas por capítulo (título + o que ele entrega) e o tempo de leitura
   à direita. Com só o título, os onze capítulos viravam onze linhas do mesmo
   tamanho — nada pra escolher por, e a página inteira lia como um bloco
   achatado. O resumo e o tempo são os dois dados que variam. */
.lista-capitulos {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.lista-capitulos li { border-bottom: 1px solid var(--borda); }
.lista-capitulos li:last-child { border-bottom: none; }
.lista-capitulos a {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4);
  color: var(--texto);
  text-decoration: none;
}
.lista-capitulos a:hover { background: var(--azul-fundo); }
.lista-capitulos .marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--tinta-100);
  border: 1px solid var(--borda-forte);
  font-size: var(--txt-base);
  font-weight: 700;
  color: var(--texto-suave);
}
.lista-capitulos .marca-vista {
  background: var(--verde-fundo);
  border-color: var(--verde-borda);
  color: var(--verde);
}

/* Liberado e ainda não concluído: bolinha vazia. É o estado "aberto, falta
   fazer" — o contraste com o ✓ ao lado é o que dá a leitura da lista num
   relance, sem precisar ler linha por linha. */
.lista-capitulos .marca-pendente {
  background: transparent;
  border-color: var(--borda-forte);
}

/* Cadeado dentro da bolinha, no lugar do número. Fonte um pouco menor porque
   o emoji ocupa mais caixa que um algarismo. */
.lista-capitulos .marca-trancada {
  font-size: 0.9rem;
  line-height: 1;
}

.capitulo-texto {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}
.capitulo-titulo {
  font-size: var(--txt-md);
  font-weight: 650;
  line-height: 1.3;
}
.capitulo-resumo {
  font-size: var(--txt-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--texto-suave);
}
/* Capítulo já lido recua um passo: o que falta ler é o que deve saltar. */
.capitulo-visto .capitulo-titulo { color: var(--texto-suave); font-weight: 600; }
.capitulo-visto .capitulo-resumo { color: var(--texto-fraco); }

.capitulo-tempo {
  flex-shrink: 0;
  padding-top: 0.15rem;
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--texto-fraco);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Visível só pra leitor de tela — completa "12 min" com "de leitura". */
.sr-apenas {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Capítulo ---------------------------------------------------------- */
.capitulo-conteudo {
  max-width: var(--largura-leitura);
  padding: var(--e5);
  margin-bottom: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  font-size: var(--txt-md);
  line-height: 1.7;
}
.capitulo-conteudo h1 {
  font-size: var(--txt-xl);
  line-height: 1.2;
  margin: 0 0 var(--e5);
  padding-bottom: var(--e3);
  border-bottom: 2px solid var(--borda);
}
.capitulo-conteudo h2 {
  font-size: var(--txt-lg);
  margin: var(--e6) 0 var(--e3);
  color: var(--azul-profundo);
}
.capitulo-conteudo h2:first-child { margin-top: 0; }
.capitulo-conteudo h3 {
  font-size: var(--txt-md);
  margin: var(--e5) 0 var(--e2);
}
.capitulo-conteudo h4 {
  font-size: var(--txt-sm);
  margin: var(--e4) 0 var(--e1);
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.capitulo-conteudo p { margin: 0 0 var(--e4); }
.capitulo-conteudo ul,
.capitulo-conteudo ol { margin: 0 0 var(--e5); padding-left: 1.35rem; }
.capitulo-conteudo li { margin-bottom: var(--e2); }
.capitulo-conteudo li > ul,
.capitulo-conteudo li > ol { margin: var(--e2) 0 0; }
.capitulo-conteudo hr {
  height: 1px;
  border: none;
  background: var(--borda);
  margin: var(--e6) 0;
}
.capitulo-conteudo code {
  padding: 0.1em 0.35em;
  font-size: 0.88em;
  background: var(--tinta-100);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}

/* Callout — todo blockquote do Markdown (a classe é adicionada em
   src/curso.js depois da renderização). Tratamento único de propósito: o
   conteúdo é prosa livre, sem marcação que declare subtipo. */
.capitulo-conteudo blockquote.callout {
  margin: 0 0 var(--e5);
  padding: var(--e4);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  border-left: 4px solid var(--ambar);
  border-radius: var(--raio-sm);
  font-size: var(--txt-base);
  color: var(--ambar-escuro);
}
.capitulo-conteudo blockquote.callout p { margin: 0 0 var(--e2); }
.capitulo-conteudo blockquote.callout p:last-child { margin-bottom: 0; }
.capitulo-conteudo blockquote.callout strong { color: var(--ambar-escuro); }

/* Tabelas do curso — escopadas pra não afetar a do catálogo. */
.capitulo-conteudo table {
  width: 100%;
  margin: 0 0 var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  font-size: var(--txt-sm);
}
.capitulo-conteudo th,
.capitulo-conteudo td { padding: var(--e2) var(--e3); }
.capitulo-conteudo tbody tr:nth-child(even) { background: var(--tinta-50); }
.capitulo-conteudo tbody tr:hover { background: var(--azul-fundo); }

@media (max-width: 700px) {
  .capitulo-conteudo tbody tr:nth-child(even) { background: var(--superficie); }
  .capitulo-conteudo tbody tr:hover { background: var(--superficie); }
}

/* Referência ao catálogo sem papel de assinante — o texto não vira link nem
   leva a um 403 no meio da leitura. */
.ref-catalogo-bloqueada {
  color: var(--texto-suave);
  border-bottom: 1px dashed var(--borda-forte);
  cursor: help;
}

/* --- Navegação entre capítulos ----------------------------------------- */
.navegacao-capitulos {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  max-width: var(--largura-leitura);
  margin-top: var(--e5);
}
.navegacao-capitulos a {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  flex: 1 1 0;
  min-height: var(--alvo-toque);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
  font-size: var(--txt-base);
  font-weight: 600;
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.navegacao-capitulos a:hover { border-color: var(--azul); color: var(--azul-escuro); }
.navegacao-capitulos .rotulo-nav {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
}
.nav-proximo { text-align: right; align-items: flex-end; }

/* --- Diagramas (Fase 3) ------------------------------------------------ */
/* SVG estático em <img> e componentes interativos (HTML + JS) usam a mesma
   moldura, injetada em src/diagramas.js. */
.diagrama-tecnico {
  margin: var(--e4) 0 var(--e5);
  padding: var(--e4);
  background: var(--tinta-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  text-align: center;
}
.diagrama-svg { width: 100%; max-width: 320px; height: auto; }
.diagrama-svg-largo { max-width: 460px; }
.diagrama-svg-vertical { max-width: 320px; }
.diagrama-tecnico figcaption {
  margin-top: var(--e3);
  padding-top: var(--e2);
  border-top: 1px solid var(--borda);
  font-size: var(--txt-sm);
  line-height: 1.5;
  color: var(--texto-suave);
  text-align: left;
}

.diagrama-tecnico-interativo { text-align: left; }
.diagrama-interativo-titulo {
  margin: 0 0 var(--e3);
  font-size: var(--txt-base);
  font-weight: 700;
  color: var(--texto);
}
.diagrama-interativo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e3);
}
.diagrama-interativo-botoes button {
  flex: 1 1 auto;
  min-height: var(--alvo-toque);
  padding: 0 var(--e4);
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
}
.diagrama-interativo-botoes button:hover { border-color: var(--azul); }
.diagrama-interativo-botoes button[aria-pressed='true'] {
  color: var(--superficie);
  background: var(--azul);
  border-color: var(--azul);
}
.diagrama-interativo-campo {
  display: block;
  margin-bottom: var(--e1);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto);
}
.diagrama-interativo-range {
  display: block;
  width: 100%;
  height: var(--alvo-toque);
  margin-bottom: var(--e3);
  accent-color: var(--azul);
}
.diagrama-interativo-svg {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}
.diagrama-interativo-entradas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-bottom: var(--e3);
}
.diagrama-interativo-entradas label {
  flex: 1 1 90px;
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--texto);
}
.diagrama-interativo-entradas label span { color: var(--texto-suave); font-weight: 400; }
.diagrama-interativo-entradas input { margin-top: var(--e1); }
.diagrama-interativo-passos {
  margin: 0 0 var(--e3);
  padding-left: 1.2rem;
  font-size: var(--txt-sm);
  line-height: 1.7;
}
.diagrama-interativo-passos code { font-size: 0.85em; color: var(--texto-suave); }
.diagrama-interativo-saida {
  margin: var(--e3) 0 0;
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: var(--txt-base);
  line-height: 1.5;
}

/* ==========================================================================
   7. Downloads
   ========================================================================== */
.lista-downloads {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.lista-downloads li { border-bottom: 1px solid var(--borda); }
.lista-downloads li:last-child { border-bottom: none; }
.item-download {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 60px;
  padding: var(--e3) var(--e4);
  color: var(--texto);
  text-decoration: none;
}
a.item-download:hover { background: var(--tinta-50); }
.item-download .icone-arquivo {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--azul);
}
.item-download-texto { min-width: 0; }
.titulo-download { display: block; font-weight: 650; font-size: var(--txt-base); }
.descricao-download {
  display: block;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.item-bloqueado { cursor: help; }
.item-bloqueado .icone-arquivo { color: var(--texto-fraco); }
.item-bloqueado .titulo-download { color: var(--texto-suave); }
.item-bloqueado .descricao-download { color: var(--texto-fraco); }

/* Um material tem mais de um formato desde 2026-09-21 (PDF para imprimir,
   HTML para consultar na tela), entao o item deixou de ser um <a> inteiro e
   os formatos viraram botoes proprios. Alvo de toque de 44px, como todo o
   resto: quem usa isso esta em campo, com uma mao. */
.formatos-download {
  display: flex;
  gap: var(--e2);
  margin-left: auto;
  flex-shrink: 0;
}
.formato-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  padding: 0 var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--acao);
  font-size: var(--txt-sm);
  font-weight: 700;
  font-family: var(--fonte-mono);
  letter-spacing: 0.3px;
  text-decoration: none;
}
.formato-download:hover { background: var(--acao-50, var(--tinta-50)); border-color: var(--acao); }
/* O codigo do modelo ao lado do titulo: e o que distingue um checklist de
   revisao do T100 do mesmo checklist de outro modelo, quando os demais
   entrarem. Mono pelo mesmo motivo do codigo de fabrica no catalogo. */
.badge-modelo {
  display: inline-block;
  margin-left: var(--e2);
  padding: 1px var(--e2);
  border: 1px solid var(--borda-forte, var(--borda));
  border-radius: var(--raio-sm, 4px);
  background: var(--tinta-50);
  color: var(--texto-suave);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  font-weight: 700;
  vertical-align: 2px;
}

@media (max-width: 560px) {
  /* Titulo e formatos empilham: lado a lado, "PDF HTML" empurra o titulo
     para duas ou tres linhas num celular. */
  .item-download { flex-wrap: wrap; }
  .formatos-download { margin-left: 38px; width: 100%; }
}

/* ==========================================================================
   8. Admin
   ========================================================================== */
/* Faixa escura própria: a área que revoga acesso e reimporta o catálogo não
   pode ser confundida com o catálogo em si num relance. */
.faixa-admin {
  background: var(--tinta-900);
  color: var(--tinta-300);
}
.faixa-admin-interno {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: var(--e2) var(--e4);
}
.faixa-admin-rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-400);
  white-space: nowrap;
}

.nav-admin {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}
.nav-admin a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 var(--e3);
  border-radius: var(--raio-pilula);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--tinta-300);
  text-decoration: none;
}
.nav-admin a:hover { background: var(--tinta-700); color: var(--superficie); }
.nav-admin a.ativo {
  background: var(--superficie);
  color: var(--tinta-900);
}
.nav-admin a:focus-visible { outline-color: var(--tinta-300); }

.busca-admin {
  display: flex;
  gap: var(--e2);
  margin-bottom: var(--e5);
  max-width: 32rem;
}
.busca-admin input { flex: 1; }

/* Formulário curto de admin (gerar link, sinônimos, editar peça). */
.formulario-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  max-width: 32rem;
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  margin-bottom: var(--e5);
}
.formulario-cartao button[type='submit'] { align-self: flex-start; }

/* Link gerado — precisa ser selecionável inteiro e quebrar linha. */
.link-gerado {
  display: block;
  padding: var(--e3);
  margin-top: var(--e2);
  font-family: var(--fonte-mono);
  font-size: var(--txt-sm);
  word-break: break-all;
  white-space: normal;
  background: var(--superficie);
  border: 1px solid var(--ambar-borda);
  border-radius: var(--raio-sm);
  user-select: all;
}

/* Tabelas do admin trazem formulários de uma ação só nas células. */
td form { margin: 0; }

.grade-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--e4);
}
.atalho-admin {
  display: block;
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  text-decoration: none;
  color: var(--texto);
}
.atalho-admin:hover { border-color: var(--azul); color: var(--texto); }
.atalho-admin b { display: block; font-size: var(--txt-base); }
.atalho-admin span {
  display: block;
  margin-top: var(--e1);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}

.resumo-importacao h3 {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
  margin: var(--e4) 0 var(--e1);
}
.resumo-importacao ul {
  margin: var(--e1) 0 var(--e4);
  padding-left: 1.2rem;
  font-size: var(--txt-sm);
  columns: 2;
}
@media (max-width: 520px) { .resumo-importacao ul { columns: 1; } }

/* Escolha de acessos na liberação manual — caixa de seleção com alvo de toque
   grande: é uma decisão que concede acesso pago, não pode depender de acertar
   um quadradinho de 13px no celular. */
.grupo-papeis {
  gap: var(--e2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4) var(--e4);
  margin: 0;
}
.grupo-papeis legend {
  padding: 0 var(--e1);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
}
.opcao-papel {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  min-height: var(--alvo-toque);
  padding: var(--e2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  font-size: var(--txt-base);
  font-weight: 400;
  color: var(--texto);
  cursor: pointer;
}
.opcao-papel:hover { border-color: var(--azul); background: var(--azul-fundo); }
.opcao-papel input {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--azul);
}
.opcao-papel:has(input:checked) {
  border-color: var(--azul);
  background: var(--azul-fundo);
}
.opcao-papel strong { font-weight: 650; }

/* ==========================================================================
   9. Utilitários e estados vazios
   ========================================================================== */
.vazio,
.nao-encontrada {
  padding: var(--e7) var(--e5);
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-lg);
  color: var(--texto-suave);
}
.nao-encontrada h1 { font-size: var(--txt-lg); margin-bottom: var(--e2); }

.lista-boas-vindas {
  list-style: none;
  margin: 0 0 var(--e5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.lista-boas-vindas li {
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--tinta-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: var(--txt-base);
  color: var(--texto-suave);
}
.lista-boas-vindas b { display: block; color: var(--texto); margin-bottom: var(--e1); }
.lista-boas-vindas .icone-area {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--azul);
}

.texto-apoio {
  max-width: var(--largura-leitura);
  font-size: var(--txt-base);
  color: var(--texto-suave);
}

.espaco-acima { margin-top: var(--e5); }

/* Empurra o badge de estado pro fim da linha (item de download fora do
   plano). */
.item-download .badge { margin-left: auto; }

.rodape {
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: var(--e5) var(--e4);
  border-top: 1px solid var(--borda);
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
}

/* ==========================================================================
   Celular — a navegação de áreas desce pro alcance do polegar
   ========================================================================== */
@media (max-width: 760px) {
  .topo-interno { padding: var(--e2) var(--e3); }
  .marca-nome span { display: none; }
  .topo-conta { font-size: var(--txt-xs); }
  .topo-email { max-width: 12ch; }

  .nav-areas {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    justify-content: space-around;
    gap: 0;
    padding: var(--e1) var(--e1) max(var(--e1), env(safe-area-inset-bottom));
    background: var(--superficie);
    border-top: 1px solid var(--borda-forte);
    box-shadow: 0 -1px 3px rgba(15, 26, 20, 0.08);
  }
  .nav-area {
    flex: 1 1 0;
    flex-direction: column;
    gap: 2px;
    min-height: 52px;
    padding: var(--e1);
    font-size: 0.7rem;
    font-weight: 600;
  }
  .nav-area svg { width: 22px; height: 22px; }
  .nav-area.ativo { background: none; }

  /* Espaço pra barra inferior não cobrir o fim do conteúdo. */
  body:has(.nav-areas) { padding-bottom: 68px; }

  .pagina { padding: var(--e4) var(--e3) var(--e6); }
  .cartao, .peca, .capitulo-conteudo, .formulario-cartao { padding: var(--e4); }
  .cabecalho-pagina h1, .peca h1 { font-size: var(--txt-lg); }
  /* Fechado por padrão: o painel só aparece quando o checkbox oculto está
     marcado (clique no botão "Filtros", que é o <label> dele). */
  .facetas { display: none; margin-bottom: 0; }
  .facetas-alternador:checked ~ .facetas { display: flex; padding: var(--e3); gap: var(--e3); margin-top: var(--e3); }
  .facetas-resumo {
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-height: 48px;
    padding: 0 var(--e4);
    margin-bottom: var(--e4);
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    font-size: var(--txt-base);
    font-weight: 600;
    color: var(--texto);
    cursor: pointer;
  }
  .facetas-resumo svg { width: 20px; height: 20px; color: var(--texto-suave); flex-shrink: 0; }
  .facetas-contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 999px;
    background: var(--azul);
    color: var(--superficie);
    font-size: var(--txt-xs);
    font-weight: 700;
  }
  .navegacao-capitulos { flex-direction: column; }
  .navegacao-capitulos .nav-proximo { text-align: left; align-items: flex-start; }
  .campos { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .campos { grid-template-columns: 1fr; }
  .nav-area-rotulo { font-size: 0.65rem; }
}

/* Impressão — checklists do curso vão pro campo em papel. */
@media print {
  .topo, .nav-areas, .navegacao-capitulos, .voltar, .faixa-admin, .nav-admin { display: none; }
  body { background: var(--superficie); }
  .capitulo-conteudo, .cartao, .peca {
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   10. Identidade Torque — ajustes de forma
   --------------------------------------------------------------------------
   Só as formas que a troca de tokens não resolve sozinha. Os seletores aqui
   usam os nomes de classe reais das views (o guia de implementação citava
   `.alternador a`, `.busca input` e `.barra-usuario-email`, que não existem
   nesta base — são `.alternador-modo .modo`, `.busca input[type='search']` e
   `.topo-email`).
   ========================================================================== */

/* --- 1. Títulos — Manrope pede peso maior e tracking mais fechado ------- */
h1, h2, h3,
.cabecalho-pagina h1,
.cartao-auth h1,
.marca-nome b {
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
}

/* --- 2. Botões e chips viram pílula ------------------------------------
   Repetindo o elemento nos modificadores por causa da especificidade de
   `button[type='submit']` — a mesma pegadinha da seção 4. */
.btn, button.btn, button[type='submit'],
.btn-secundario, button.btn-secundario,
.btn-copiar, button.btn-copiar,
.opcao,
.diagrama-interativo-botoes button {
  border-radius: var(--raio-pilula);
}

/* --- 3. Campo de busca do catálogo — pílula alta, ícone em verde -------- */
.busca input[type='search'] { border-radius: var(--raio-pilula); }
.busca-icone { color: var(--acao); }

/* --- 4. Área do curso — faixa escura ------------------------------------
   Aplicada em <body class="area-curso"> nas views de views/curso/. O curso é
   um produto separado do catálogo; a faixa é o que faz isso ser visível num
   relance. O admin continua escuro por outro motivo (é perigoso) e por isso
   ficou num tom distinto — ver item 7. */
.area-curso .topo {
  background: var(--curso-fundo);
  border-bottom-color: var(--curso-fundo);
  box-shadow: none;
}
/* `.marca` tem dois donos: o logotipo Torque no cabeçalho (views/_marca.ejs,
   dentro de `.topo`) e a bolinha de estado de cada capítulo no sumário
   (`.lista-capitulos .marca`). Sem o `.topo` no seletor, a cor clara do
   cabeçalho escuro vazava para as bolinhas do sumário — que ficam sobre
   fundo claro — e o ✓ do capítulo concluído era desenhado em branco sobre
   verde claro, invisível. Mesma especificidade da regra da lista, mas
   declarada depois: vencia por ordem. */
.area-curso .topo,
.area-curso .topo .marca,
.area-curso .topo-conta { color: var(--curso-texto); }
.area-curso .marca-nome span { color: var(--tinta-400); }
.area-curso .marca-simbolo { color: var(--curso-acento); }
.area-curso .topo-email { color: var(--curso-suave); }
.area-curso .link-sair,
.area-curso button.link-sair { color: #ff9d94; }
.area-curso .link-sair:hover,
.area-curso button.link-sair:hover { color: #ffc4be; }
.area-curso .nav-area { color: var(--curso-suave); }
.area-curso .nav-area:hover {
  background: var(--curso-superficie);
  color: var(--curso-texto);
}
.area-curso .nav-areas a[aria-current='page'] {
  background: var(--curso-acento);
  color: #08150e;
  font-weight: 800;
}
/* O acento claro só serve sobre a faixa escura. No corpo do capítulo, que
   segue branco, ele renderia um anel de foco de 2,3:1 — o anel verde padrão
   continua valendo lá. */
.area-curso .topo :focus-visible,
.area-curso .nav-areas :focus-visible { outline-color: var(--curso-acento); }

/* --- 5. Navegação no rodapé (≤760px) — herda a faixa escura no curso ---- */
@media (max-width: 760px) {
  .area-curso .nav-areas {
    background: var(--curso-fundo);
    border-top-color: var(--curso-superficie);
  }
  /* Na barra inferior o item ativo não ganha bloco (regra da seção 3): aqui
     ele se marca pela cor de acento, não por uma pílula cheia. */
  .area-curso .nav-areas a[aria-current='page'] {
    background: none;
    color: var(--curso-acento);
  }
}

/* --- 6. Progresso do curso — percentual na cor de marca ----------------- */
.progresso-pct { color: var(--acao); }
.progresso-barra-preenchida { background: var(--acao); }

/* --- 7. Faixa do admin — escura, mas distinta da do curso ---------------
   Com a tinta nova, --tinta-900 é exatamente o fundo da área do curso: as
   duas faixas sairiam idênticas. O admin fica um passo acima na escala, como
   o próprio guia previu. */
.faixa-admin { background: var(--tinta-700); }
.faixa-admin .nav-admin a:hover { background: rgba(255, 255, 255, 0.14); }
/* O rótulo "ADMIN" era --tinta-400 sobre a faixa quase preta antiga; sobre a
   faixa nova, um passo mais clara, isso cai pra 3,7:1. Este tom devolve
   5,6:1 e mantém o rótulo recuado em relação às abas (8,9:1). */
.faixa-admin-rotulo { color: #9aa89e; }

/* --- 8. Foco — mesmo anel de 3px, agora verde -------------------------- */
:focus-visible { outline-color: var(--acao); }

/* --- 9. Lockup da marca — nome em 800, apoio em mono versalete ---------- */
.marca-nome span {
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* --tinta-400 (o que o guia pedia) dá 3,7:1 sobre branco, abaixo de AA em
     texto de 12px. --tinta-500 dá 6,5:1 e mantém o mesmo papel visual. Na
     faixa escura do curso o 400 volta, onde ele rende 4,8:1. */
  color: var(--tinta-500);
}

/* ==========================================================================
   11. Prova do capítulo
   --------------------------------------------------------------------------
   Uma questão por vez (public/js/prova.js), gabarito só depois de concluir.
   Alvos de 44px em toda alternativa: a prova é respondida com o polegar, em
   campo, e marcar a alternativa errada por causa de alvo pequeno seria o
   pior jeito possível de reprovar alguém.

   Sem dependência de :hover em nada — o estado que importa (alternativa
   marcada, acerto, erro) é sempre visível por cor E por texto, nunca só por
   cor.
   ========================================================================== */

/* --- Chamada no fim do capítulo ---------------------------------------- */
.chamada-prova {
  margin: var(--e5) 0 var(--e4);
  padding: var(--e5);
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  border-radius: var(--raio-lg);
  text-align: center;
}

.chamada-prova-selo {
  margin: 0 0 var(--e2);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acao-escuro);
}

.chamada-prova-texto {
  margin: 0 auto var(--e4);
  max-width: 46ch;
  color: var(--tinta-600);
}

.chamada-prova-feita {
  background: var(--tinta-50);
  border-color: var(--borda);
}

/* --- Cabeçalho e passo -------------------------------------------------- */
.cabecalho-prova { text-align: center; }

.prova-capitulo {
  margin: 0 0 var(--e1);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.8rem;
  color: var(--texto-fraco);
}

.prova-aviso-aprovado {
  margin-top: var(--e3);
  color: var(--acao-escuro);
  font-weight: 600;
}

.prova-passo { margin-bottom: var(--e5); }

.prova-contador {
  margin: 0 0 var(--e2);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.8rem;
  color: var(--texto-fraco);
}

.prova-barra {
  height: 6px;
  background: var(--tinta-200);
  border-radius: var(--raio-pilula);
  overflow: hidden;
}

.prova-barra-preenchida {
  height: 100%;
  width: 20%;
  background: var(--acao);
  border-radius: var(--raio-pilula);
  transition: width 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .prova-barra-preenchida { transition: none; }
}

/* --- Questões ----------------------------------------------------------- */
.prova-questoes {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Sem JS as cinco aparecem empilhadas e precisam de separação visível. Com o
   passo a passo ligado, o JS marca o form e o separador some — senão a única
   questão visível herdaria uma borda de topo sem nada acima dela. */
.prova:not(.prova-passo-a-passo) .prova-questoes > li + li {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

.prova-numero {
  margin: 0 0 var(--e2);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.prova-questao fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.prova-enunciado {
  display: block;
  margin-bottom: var(--e4);
  padding: 0;
  font-size: 1.15rem;
  font-weight: var(--peso-titulo, 700);
  line-height: 1.45;
  color: var(--tinta-900);
}

.prova-enunciado:focus { outline: none; }

.prova-alternativa {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  min-height: 44px;
  margin-bottom: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
}

.prova-alternativa input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--acao);
}

.prova-letra {
  flex: none;
  font-family: var(--fonte-mono, monospace);
  font-weight: 700;
  color: var(--texto-fraco);
}

.prova-texto { flex: 1; }

.prova-alternativa:has(input:checked) {
  background: var(--acao-fundo);
  border-color: var(--acao);
  box-shadow: inset 0 0 0 1px var(--acao);
}

.prova-alternativa:has(input:checked) .prova-letra { color: var(--acao-escuro); }
.prova-alternativa:focus-within { outline: 2px solid var(--acao); outline-offset: 2px; }

.prova-alerta {
  margin: var(--e3) 0 0;
  padding: var(--e3) var(--e4);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  border-radius: var(--raio-sm);
  color: var(--ambar-escuro);
}

/* --- Ações -------------------------------------------------------------- */
.prova-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  margin-top: var(--e5);
}

.prova-acoes .btn,
.prova-acoes .btn-secundario,
.prova-acoes button {
  min-height: 44px;
}

.prova-acoes #prova-proxima,
.prova-acoes #prova-concluir { margin-left: auto; }

.prova-acoes button[disabled] { opacity: 0.45; cursor: not-allowed; }

.prova-cancelar {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--texto-fraco);
}

.prova-acoes-final { justify-content: space-between; }
.prova-acoes-final .btn { margin-left: 0; }

/* --- Resultado ---------------------------------------------------------- */
.prova-veredito {
  margin-bottom: var(--e5);
  padding: var(--e5);
  border-radius: var(--raio-lg);
  text-align: center;
}

.prova-veredito h1 { margin: 0 0 var(--e2); }

.prova-veredito.aprovado {
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
}

.prova-veredito.reprovado {
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
}

.prova-placar {
  margin: 0 0 var(--e3);
  font-size: 1.1rem;
  font-weight: 700;
}

.prova-veredito.aprovado .prova-placar { color: var(--acao-escuro); }
.prova-veredito.reprovado .prova-placar { color: var(--ambar-escuro); }

.prova-nota {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--tinta-600);
}

/* --- Gabarito ----------------------------------------------------------- */
.gabarito {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gabarito-questao {
  margin-bottom: var(--e5);
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda-forte);
  border-radius: var(--raio);
}

.gabarito-questao.certa { border-left-color: var(--acao); }
.gabarito-questao.errada { border-left-color: var(--vermelho); }

.gabarito-cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 var(--e3);
}

.gabarito-numero {
  font-family: var(--fonte-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.gabarito-selo { font-weight: 700; font-size: 0.9rem; }
.gabarito-questao.certa .gabarito-selo { color: var(--acao-escuro); }
.gabarito-questao.errada .gabarito-selo { color: var(--vermelho); }

.gabarito-enunciado {
  margin: 0 0 var(--e4);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
}

.gabarito-alternativas {
  list-style: none;
  margin: 0 0 var(--e4);
  padding: 0;
}

.gabarito-alternativas li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  align-items: baseline;
  margin-bottom: var(--e2);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  color: var(--tinta-600);
}

.gabarito-alternativas .alt-correta {
  background: var(--acao-fundo);
  border-color: var(--acao-borda);
  color: var(--tinta-900);
  font-weight: 600;
}

.gabarito-alternativas .alt-marcada-errada {
  background: var(--vermelho-fundo);
  border-color: var(--vermelho-borda);
  color: var(--tinta-900);
}

.gabarito-marca {
  flex: none;
  padding: 2px var(--e2);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--raio-pilula);
  background: var(--acao);
  color: #fff;
}

.gabarito-marca.marca-sua { background: var(--vermelho); }

.gabarito-branco {
  margin: calc(var(--e4) * -1) 0 var(--e4);
  font-size: 0.9rem;
  color: var(--vermelho);
}

.gabarito-justificativa {
  padding: var(--e4);
  background: var(--tinta-50);
  border-radius: var(--raio-sm);
}

.gabarito-justificativa p { margin: 0; color: var(--tinta-600); }

.gabarito-justificativa-titulo {
  margin-bottom: var(--e2) !important;
  font-family: var(--fonte-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco) !important;
}

.gabarito-secao { margin-top: var(--e3) !important; font-size: 0.9rem; }

/* --- Capítulo trancado -------------------------------------------------- */
.capitulo-trancado {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  text-align: center;
}

.trancado-selo { font-size: 2rem; margin: 0 0 var(--e2); }
.trancado-texto { margin: 0 auto var(--e5); max-width: 48ch; color: var(--tinta-600); }
.trancado-rodape { margin-top: var(--e5); }

.capitulo-trancado-item {
  display: flex;
  gap: var(--e4);
  align-items: center;
  padding: var(--e4);
  opacity: 0.62;
}

.marca-trancada {
  background: var(--tinta-100) !important;
  border-color: var(--borda) !important;
  color: var(--texto-fraco) !important;
}

.capitulo-pendencia {
  display: inline-block;
  margin-top: var(--e1);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ambar-escuro);
}

@media (max-width: 700px) {
  .prova-acoes { flex-direction: column; align-items: stretch; }
  .prova-acoes .btn,
  .prova-acoes .btn-secundario,
  .prova-acoes button,
  .prova-acoes .prova-cancelar { width: 100%; justify-content: center; text-align: center; }
  .prova-acoes #prova-proxima,
  .prova-acoes #prova-concluir { margin-left: 0; order: -1; }
  .prova-alternativa { padding: var(--e4); }
}

/* Aviso de que a conta admin ignora a trava de capítulos (views/curso/indice.ejs).
   Âmbar porque é "atenção, o que você está vendo não é o que o aluno vê" —
   não é erro nem confirmação. */
.aviso-admin-trava {
  margin: 0 0 var(--e5);
  padding: var(--e4);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  border-left: 4px solid var(--ambar);
  border-radius: var(--raio-sm);
  color: var(--ambar-escuro);
  font-size: 0.95rem;
  line-height: 1.5;
}

.aviso-admin-trava code {
  font-family: var(--fonte-mono, monospace);
  font-size: 0.9em;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

/* --- Exame final no sumário --------------------------------------------
   Cartão separado da lista de propósito: ele não é um capítulo, é o fecho do
   curso. Os três estados usam as mesmas cores do resto — verde para o que
   está disponível ou concluído, neutro apagado para o que ainda não abriu. */
.cartao-exame {
  margin-top: var(--e5);
  padding: var(--e5);
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  border-radius: var(--raio-lg);
  text-align: center;
}

.cartao-exame h2 {
  margin: 0 0 var(--e2);
  font-size: 1.25rem;
}

.exame-selo {
  margin: 0 0 var(--e2);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acao-escuro);
}

.exame-texto {
  margin: 0 auto var(--e4);
  max-width: 48ch;
  color: var(--tinta-600);
}

.cartao-exame.exame-trancado {
  background: var(--tinta-50);
  border-color: var(--borda);
  opacity: 0.75;
}

.cartao-exame.exame-trancado .exame-selo { color: var(--texto-fraco); }

.cartao-exame.exame-trancado .exame-texto { margin-bottom: 0; }

.cartao-exame.exame-feito {
  background: var(--verde-fundo);
  border-color: var(--verde-borda);
}

/* --- Dados do certificado na tela de definir senha ---------------------- */
.grupo-campos {
  margin: 0 0 var(--e5);
  padding: 0;
  border: 0;
}

.grupo-campos + .grupo-campos {
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.grupo-campos legend {
  padding: 0;
  margin-bottom: var(--e2);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.dica-grupo {
  margin: 0 0 var(--e4);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tinta-600);
}

.rotulo-opcional {
  font-weight: 400;
  color: var(--texto-fraco);
}

/* Erro por campo: o aviso no topo diz que há erro, este diz qual é. */
.erro-campo {
  display: block;
  margin-top: var(--e1);
  font-size: 0.85rem;
  color: var(--vermelho);
}

.campo-form input[aria-invalid='true'] {
  border-color: var(--vermelho);
  box-shadow: inset 0 0 0 1px var(--vermelho);
}

/* ==========================================================================
/* ==========================================================================
   12. Certificado de conclusão
   --------------------------------------------------------------------------
   O documento é a mesma marcação na página do aluno e na validação pública,
   para que o que se confere seja visualmente o que se imprime. A folha de
   impressão no fim da seção é o que transforma a página em PDF pelo
   navegador: sem ela, sairiam cabeçalho, botões e fundo cinza junto.

   Todo ornamento é CSS ou SVG inline. Nada de imagem externa: o documento
   precisa imprimir igual em qualquer máquina, inclusive offline, e uma
   imagem que não carrega deixaria buraco no meio de um certificado.
   ========================================================================== */

.pagina-certificado { background: var(--fundo); }

.cabecalho-certificado {
  max-width: 64rem;
  margin: 0 auto var(--e5);
  text-align: center;
}

.acoes-certificado { margin: var(--e4) 0 var(--e2); }

.dica-impressao {
  margin: 0;
  font-size: 0.9rem;
  color: var(--texto-fraco);
}

/* --- Folha e moldura ----------------------------------------------------- */
.certificado {
  max-width: 64rem;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 1px 3px rgba(15, 26, 20, 0.06);
  color: var(--tinta-900);
}

/* A moldura interna é o que dá cara de documento. Duas linhas: a externa em
   verde-instrumento, a interna fina, com um respiro entre elas. */
.certificado-moldura {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3.5rem);
  border: 2px solid var(--acao);
  outline: 1px solid var(--acao-borda);
  outline-offset: 5px;

  /* Textura de fundo: linhas finas a 45°, quase invisíveis, no lugar de papel
     branco liso. É o que dá o aspecto gravado de documento impresso sem
     concorrer com o texto. */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(15, 122, 82, 0.028) 0,
    rgba(15, 122, 82, 0.028) 1px,
    transparent 1px,
    transparent 7px
  );
}

/* Cantos: dois traços em L sobrepostos à moldura, como canto de diploma. */
.orn {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--acao);
}

.orn-se { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.orn-sd { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.orn-ie { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.orn-id { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* Marca d'água: símbolo da marca grande e apagado, atrás de tudo. */
.certificado-dagua {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--acao);
  opacity: 0.045;
}

.certificado-dagua svg {
  width: min(58%, 20rem);
  height: auto;
}

/* O conteúdo precisa ficar acima da marca d'água e da textura. */
.certificado-topo,
.certificado-corpo,
.certificado-rodape { position: relative; }

/* --- Cabeçalho ----------------------------------------------------------- */
.certificado-topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--acao-borda);
}

.certificado-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}

.certificado-marca .marca-simbolo { color: var(--acao); width: 34px; height: 34px; }

.certificado-tipo {
  margin: 0;
  font-family: var(--fonte-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acao-escuro);
}

/* --- Corpo --------------------------------------------------------------- */
.certificado-corpo {
  padding: clamp(1.5rem, 4vw, 2.75rem) 0;
  text-align: center;
}

.certificado-declara {
  margin: 0 0 var(--e3);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.certificado-nome {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.15;
  font-weight: var(--peso-titulo, 800);
  letter-spacing: var(--tracking-titulo, -0.03em);
  color: var(--acao-profundo);
}

/* Filete com losango ao centro, separando o nome do resto. */
.ornamento-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  margin: var(--e4) auto var(--e3);
  max-width: 22rem;
}

.ornamento-traco {
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--para, right), transparent, var(--acao-borda));
}

.ornamento-linha .ornamento-traco:last-child { --para: left; }

.ornamento-losango {
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--acao);
  transform: rotate(45deg);
}

.certificado-doc {
  margin: 0 0 var(--e5);
  font-family: var(--fonte-mono, monospace);
  font-size: 0.95rem;
  color: var(--tinta-600);
}

.certificado-texto {
  margin: 0 auto var(--e4);
  max-width: 56ch;
  font-size: 1.08rem;
  line-height: 1.7;
}

.certificado-amparo {
  margin: 0 auto;
  max-width: 64ch;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--texto-fraco);
}

/* --- Rodapé: selo, assinatura e autenticidade ---------------------------- */
.certificado-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5);
  justify-content: space-between;
  align-items: flex-end;
  padding-top: var(--e5);
  border-top: 1px solid var(--acao-borda);
}

/* Selo: carrega a carga horária, que é o dado que quem recebe procura
   primeiro — enfeite que também informa. */
.certificado-selo {
  position: relative;
  flex: none;
  width: 104px;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--acao);
  border-radius: 50%;
  color: var(--acao-escuro);
  background: var(--acao-fundo);
}

.selo-anel {
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--acao-borda);
  border-radius: 50%;
}

.selo-losango {
  width: 8px;
  height: 8px;
  margin-bottom: 3px;
  background: var(--acao);
  transform: rotate(45deg);
}

.selo-numero {
  font-size: 1.85rem;
  font-weight: var(--peso-titulo, 800);
  line-height: 1;
  letter-spacing: -0.02em;
}

.selo-unidade {
  font-family: var(--fonte-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acao-escuro);
}

.certificado-assinatura {
  flex: 1 1 18rem;
  text-align: center;
}

.assinatura-imagem {
  display: block;
  height: 4.2rem;
  width: auto;
  max-width: min(18rem, 100%);
  margin: 0 auto calc(var(--e1) * -1);
  object-fit: contain;
  mix-blend-mode: multiply;
}

.linha-assinatura {
  display: block;
  width: min(18rem, 100%);
  margin: 0 auto var(--e2);
  border-top: 1px solid var(--tinta-400);
}

.assinatura-nome { margin: 0; font-weight: 700; }

.assinatura-doc,
.assinatura-cargo {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}

.certificado-autenticidade {
  flex: 0 1 15rem;
  text-align: right;
}

.autenticidade-rotulo {
  margin: 0;
  font-family: var(--fonte-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.autenticidade-codigo {
  margin: 3px 0;
  padding: 3px 8px;
  display: inline-block;
  font-family: var(--fonte-mono, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--acao-escuro);
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  border-radius: var(--raio-sm);
}

.autenticidade-link,
.autenticidade-data {
  margin: 0;
  font-size: 0.76rem;
  color: var(--texto-fraco);
  word-break: break-all;
}

.rodape-certificado {
  max-width: 64rem;
  margin: var(--e5) auto 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--tinta-600);
}

/* --- Validação pública --------------------------------------------------- */
.selo-validacao {
  max-width: 64rem;
  margin: 0 auto var(--e5);
  padding: var(--e4) var(--e5);
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  border-radius: var(--raio);
  text-align: center;
}

.selo-validacao-titulo {
  margin: 0 0 var(--e1);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--acao-escuro);
}

.selo-validacao-texto {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--tinta-600);
}

.nota-validacao {
  max-width: 64rem;
  margin: var(--e4) auto 0;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}

@media (max-width: 760px) {
  .certificado { padding: 6px; }
  .certificado-moldura { padding: var(--e5) var(--e4); outline-offset: 3px; }
  .orn { width: 18px; height: 18px; }
  .certificado-rodape { gap: var(--e4); justify-content: center; text-align: center; }
  .certificado-autenticidade { flex-basis: 100%; text-align: center; }
  .certificado-selo { order: -1; }
}

/* --- Impressão -----------------------------------------------------------
   Paisagem, sem cromo do navegador e sem nada da interface.
   `print-color-adjust` é o que impede o navegador de descartar o verde da
   marca, a textura de fundo e o selo ao imprimir — por padrão ele remove
   fundos para economizar tinta, e o documento sairia em preto e branco. */
@page {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  .fora-da-impressao,
  .topo,
  .nav-areas,
  .selo-validacao,
  .nota-validacao { display: none !important; }

  body,
  .pagina-certificado { background: #fff !important; }

  .pagina { padding: 0 !important; margin: 0 !important; max-width: none !important; }

  .certificado {
    max-width: none;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .certificado-moldura,
  .certificado-selo,
  .autenticidade-codigo,
  .assinatura-imagem,
  .certificado-dagua {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Tamanhos fixos na impressão: `clamp()` depende da largura da viewport, e
     na folha ela não é a mesma da tela. */
  .certificado-moldura { padding: 2.2rem 2.6rem; }
  .certificado-corpo { padding: 2rem 0; }
  .certificado-nome { font-size: 2.6rem; }
  .certificado-texto { font-size: 1rem; }

  a[href]::after { content: none !important; }
}

/* ==========================================================================
/* ==========================================================================
   13. Home pública
   --------------------------------------------------------------------------
   Modelo 2b do IMPLEMENTAR-TORQUE.md: uma seção inteira por produto, catálogo
   em fundo claro e curso em fundo escuro — a mesma separação que o site faz
   depois do login.

   Mesma regra do resto do site: celular primeiro, alvo de toque de 44px, nada
   dependendo de hover, contraste que sobrevive a sol na tela.
   ========================================================================== */

.pagina-home { background: var(--superficie); }

/* --- Cabeçalho ----------------------------------------------------------- */
.topo-home {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.topo-home-interno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  justify-content: space-between;
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--e3) var(--e4);
}

.topo-home .marca { color: var(--texto); text-decoration: none; }
.topo-home .marca-simbolo { color: var(--acao); }

.topo-home-acoes {
  display: flex;
  gap: var(--e2);
  align-items: center;
}

.link-topo-home {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding: 0 var(--e3);
  color: var(--tinta-600);
}

/* --- Capa ---------------------------------------------------------------- */
.capa {
  padding: clamp(2rem, 6vw, 4.5rem) var(--e4);
  border-bottom: 1px solid var(--borda);
}

.capa-interna {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: center;
  max-width: 76rem;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .capa-interna { grid-template-columns: 1fr 1fr; }
}

.capa h1 {
  margin: 0 0 var(--e4);
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-titulo);
  color: var(--tinta-900);
}

.capa-texto {
  margin: 0 0 var(--e5);
  max-width: 46ch;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--tinta-600);
}

.capa-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}

.capa-acoes .btn,
.capa-acoes .btn-escuro {
  min-height: var(--alvo-toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Botão escuro: o par do verde, para o produto de fundo escuro. */
.btn-escuro,
a.btn-escuro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--e3) var(--e5);
  background: var(--curso-fundo);
  color: var(--curso-texto);
  border: 1px solid var(--curso-fundo);
  border-radius: var(--raio-pilula);
  font-weight: 600;
  text-decoration: none;
}

.capa-foto {
  margin: 0;
  padding: var(--e4);
  background: var(--tinta-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
}

.capa-foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Seção de produto ---------------------------------------------------- */
.produto-secao { padding: clamp(2.5rem, 7vw, 4.5rem) var(--e4); }

.secao-clara {
  background: var(--acao-fundo);
  border-bottom: 1px solid var(--acao-borda);
}

.secao-escura {
  background: var(--curso-fundo);
  color: var(--curso-texto);
}

.produto-secao-interna {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: start;
  max-width: 76rem;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .produto-secao-interna { grid-template-columns: 1fr 1fr; }
}

.produto-rotulo {
  margin: 0 0 var(--e3);
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acao-escuro);
}

.secao-escura .produto-rotulo { color: var(--curso-acento); }

.produto-secao h2 {
  margin: 0 0 var(--e4);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-titulo);
}

.secao-escura h2 { color: var(--curso-texto); }

.produto-descricao {
  margin: 0 0 var(--e5);
  max-width: 48ch;
  line-height: 1.65;
  color: var(--tinta-600);
}

.secao-escura .produto-descricao { color: var(--curso-suave); }

.produto-preco {
  margin: 0 0 var(--e4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: baseline;
}

.produto-preco strong {
  font-size: clamp(1.75rem, 4.5vw, 2.4rem);
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  color: var(--acao-escuro);
}

.produto-preco span {
  font-size: 0.95rem;
  color: var(--tinta-600);
}

.produto-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-toque);
}

.secao-escura .produto-cta {
  background: var(--curso-acento);
  color: var(--curso-fundo);
  border-color: var(--curso-acento);
}

.produto-microtexto,
.produto-preco-linha {
  margin: var(--e2) 0 0;
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
}

.secao-escura .produto-preco-linha { color: var(--curso-suave); }

.produto-nota {
  margin: var(--e5) 0 0;
  max-width: 44ch;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--texto-fraco);
}

.produto-compra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  margin-top: var(--e5);
}

.produto-compra .produto-preco-linha { margin: 0; }

.produto-embreve {
  margin: 0;
  padding: var(--e3) var(--e5);
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-pilula);
}

.secao-escura .produto-embreve {
  color: var(--curso-suave);
  border-color: var(--curso-superficie);
}

/* --- Cartões de destaque -------------------------------------------------- */
.cartoes-grade {
  display: grid;
  gap: var(--e4);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .cartoes-grade { grid-template-columns: 1fr 1fr; }
}

.cartoes-compactos { margin-top: var(--e5); }

/* Contagem ímpar de cartões: o último ocupa a linha inteira em vez de ficar
   sozinho ao lado de um vazio. Entrou quando o cartão do fórum fez os
   argumentos do curso virarem cinco. */
@media (min-width: 560px) {
  .cartoes-grade > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.cartao-destaque {
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.secao-escura .cartao-destaque {
  background: var(--curso-superficie);
  border-color: transparent;
}

.cartao-numero {
  margin: 0 0 var(--e1);
  font-size: 1.9rem;
  line-height: 1;
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--acao-escuro);
}

.cartao-titulo {
  margin: 0 0 var(--e2);
  font-weight: 700;
  line-height: 1.3;
}

.secao-escura .cartao-titulo { color: var(--curso-acento); }

.cartao-texto {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tinta-600);
}

.secao-escura .cartao-texto { color: var(--curso-suave); }

/* --- Amostra do curso ----------------------------------------------------- */
.amostra-curso {
  margin: 0;
  padding: var(--e4);
  background: var(--superficie);
  border-radius: var(--raio-lg);
}

.amostra-curso img {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  margin: 0 auto;
}

.amostra-curso figcaption {
  margin-top: var(--e3);
  text-align: center;
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* --- Faixa de conferência de certificado ---------------------------------- */
/* --- Quem escreveu o curso -----------------------------------------------
   Fica entre a seção escura do curso e a faixa clara do certificado. Fundo
   --fundo (e não --superficie, da faixa seguinte) para as duas não virarem
   um bloco claro só: a leve diferença é o que separa "quem escreveu" de
   "conferir certificado", que são assuntos e públicos diferentes.

   Sem foto por ora: o bloco é centrado com medida de leitura limitada, em
   vez de uma coluna estreita ao lado de um espaço vazio — assim a ausência
   da foto não parece defeito de carregamento. */
.secao-autoria {
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--e4);
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

.secao-autoria-interna {
  max-width: 46rem;
  margin: 0 auto;
}

.autoria-nome {
  margin: var(--e5) 0 var(--e1);
  font-size: var(--txt-lg);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--acao-escuro);
}

.autoria-apoio {
  margin: 0 0 var(--e5);
  max-width: 52ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

/* Medida de leitura: linha longa demais faz o olho perder a volta, e são
   quatro parágrafos seguidos. */
.autoria-texto { max-width: 62ch; }

.autoria-texto p {
  margin: 0 0 var(--e4);
  line-height: 1.65;
}

.autoria-texto p:last-child { margin-bottom: 0; }

.faixa-certificado {
  padding: clamp(2rem, 6vw, 3.5rem) var(--e4);
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.faixa-certificado-interna {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.faixa-certificado h2 {
  margin: 0 0 var(--e2);
  font-size: clamp(1.25rem, 3.5vw, 1.6rem);
}

.faixa-certificado p {
  margin: 0 auto var(--e4);
  max-width: 52ch;
  line-height: 1.6;
  color: var(--tinta-600);
}

.busca-certificado {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: center;
}

.busca-certificado input {
  flex: 1 1 15rem;
  max-width: 20rem;
  min-height: var(--alvo-toque);
  padding: var(--e3) var(--e4);
  font-family: var(--fonte-mono);
  font-size: 1rem; /* abaixo de 16px o iOS dá zoom sozinho ao focar */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
}

.busca-certificado button { min-height: var(--alvo-toque); }

/* --- Rodapé --------------------------------------------------------------- */
.rodape-home { padding: clamp(1.5rem, 4vw, 2.5rem) var(--e4); }

.rodape-home-interno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  align-items: center;
  justify-content: space-between;
  max-width: 76rem;
  margin: 0 auto;
}

.rodape-ja-comprou {
  margin: 0;
  color: var(--tinta-600);
}

.rodape-home-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e4);
  align-items: center;
}

.rodape-home-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  color: var(--tinta-600);
}

.rodape-entrar { font-weight: 600; color: var(--acao-escuro) !important; }

.rodape-home-nota {
  max-width: 76rem;
  margin: var(--e4) auto 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  font-size: 0.82rem;
  color: var(--texto-fraco);
}

/* --- Consulta de certificado ---------------------------------------------- */
.cartao-consulta {
  max-width: 34rem;
  margin: clamp(2rem, 6vw, 4rem) auto;
}

.cartao-consulta input[name='codigo'] {
  font-family: var(--fonte-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nota-consulta {
  margin: var(--e5) 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

/* --- Preço com promoção (home) e tela de preços (admin) ------------------- */
.bloco-preco {
  margin: 0 0 var(--e4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: baseline;
}

.bloco-preco strong {
  font-size: clamp(1.75rem, 4.5vw, 2.4rem);
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  color: var(--acao-escuro);
}

.bloco-preco span { font-size: 0.95rem; color: var(--tinta-600); }

.secao-escura .bloco-preco strong { color: var(--curso-acento); }
.secao-escura .bloco-preco span { color: var(--curso-suave); }

.bloco-preco-promo { display: block; }

.preco-antes {
  margin: 0 0 var(--e1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: center;
  font-size: 1rem;
  color: var(--texto-fraco);
}

.secao-escura .preco-antes { color: var(--curso-suave); }

/* --- Garantia e parcelamento, logo abaixo do preço ------------------------
   Encostados no valor de propósito: a promessa só tranquiliza se for lida
   junto com o preço, não como rodapé solto três blocos abaixo. `:has()`
   evita marcar a view com uma classe extra só para acertar o espaço — mesmo
   recurso do `body:has(.nav-areas)` da barra inferior.

   Nenhuma cor nova aqui: o texto usa os mesmos tokens do `.produto-microtexto`
   que já fica logo abaixo (--texto-fraco no claro, --curso-suave no escuro),
   então não há par de contraste novo para conferir. */
.bloco-preco:has(+ .produto-preco-linha),
.bloco-preco:has(+ .garantia),
.programa-preco:has(+ .produto-preco-linha),
.programa-preco:has(+ .garantia) {
  margin-bottom: var(--e2);
}

.garantia {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin: var(--e2) 0 0;
  max-width: 46ch;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--texto-fraco);
}

.garantia-icone {
  flex: none;
  width: 16px;
  height: 16px;
  /* Alinha o escudo com a primeira linha do texto, não com o topo da caixa. */
  margin-top: 0.15em;
  color: var(--acao);
}

/* Seção escura do curso na home. */
.secao-escura .garantia { color: var(--curso-suave); }
.secao-escura .garantia-icone { color: var(--curso-acento); }

/* O fecho da ementa (/curso/programa) é escuro e centralizado, mas NÃO usa a
   classe .secao-escura — tem fundo próprio. Daí as regras repetidas. */
.programa-fecho .garantia {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  color: var(--curso-suave);
}
.programa-fecho .garantia-icone { color: var(--curso-acento); }
.programa-fecho .produto-preco-linha { color: var(--curso-suave); }

/* --- WhatsApp: link abaixo da compra e botão flutuante -------------------
   Fundo em --acao (verde da marca), glifo branco: é o mesmo par do botão
   primário, já medido em 5,35:1. O verde oficial do WhatsApp (#25D366) com
   glifo branco fica em torno de 1,8:1 e reprovaria a régua do projeto, que
   não aceita par abaixo de AA. Quem faz o botão ser reconhecido é o desenho
   do balão, não o tom exato do verde. */
.link-wpp {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  /* Alvo de toque: o link vive logo abaixo de um botão de compra, e dedo
     grande em tela pequena não pode errar de um para o outro. */
  min-height: var(--alvo-toque);
  font-size: 0.88rem;
  color: var(--acao-escuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-wpp-icone { flex: none; width: 18px; height: 18px; }

.secao-escura .link-wpp { color: var(--curso-acento); }
.programa-fecho .link-wpp { justify-content: center; color: var(--curso-acento); }

.wpp-flutuante {
  position: fixed;
  right: var(--e4);
  /* env() para não cair embaixo da barra de gestos do iPhone. */
  bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--acao);
  color: #fff;
  box-shadow: 0 6px 20px rgb(15 26 20 / 28%);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.wpp-flutuante svg { width: 28px; height: 28px; }

/* Escondido enquanto um botão de compra está na tela — quem decide é o
   IntersectionObserver de public/js/whatsapp-flutuante.js. visibility junto
   com opacity para o botão sumir do alcance do toque, não só da vista. */
.wpp-flutuante-oculto {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .wpp-flutuante { transition: none; }
}

/* --- Linha de suporte no rodapé ------------------------------------------ */
.rodape-suporte {
  margin: var(--e4) 0 0;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}

.rodape-suporte a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rodape-suporte a:hover { color: var(--acao); }

.selo-desconto {
  padding: 2px var(--e2);
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--vermelho);
  border-radius: var(--raio-pilula);
}

.preco-agora {
  margin: 0 0 var(--e3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: baseline;
}

.preco-agora strong {
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  color: var(--acao-escuro);
}

.preco-agora span { font-size: 0.95rem; color: var(--tinta-600); }

.secao-escura .preco-agora strong { color: var(--curso-acento); }
.secao-escura .preco-agora span { color: var(--curso-suave); }

.contador-promo {
  margin: 0 0 var(--e4);
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: baseline;
  padding: var(--e2) var(--e3);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  border-radius: var(--raio-sm);
}

.contador-rotulo {
  font-size: 0.8rem;
  color: var(--ambar-escuro);
}

.contador-valor {
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: 0.95rem;
  /* Largura fixa por dígito: sem isso o bloco todo pula a cada segundo,
     porque "1" é mais estreito que "8" na maioria das fontes. */
  font-variant-numeric: tabular-nums;
  color: var(--ambar-escuro);
}

/* Admin --------------------------------------------------------------- */
.cartao-preco {
  max-width: 62rem;
  margin: 0 auto var(--e5);
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
}

.cartao-preco-topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}

.cartao-preco-topo h2 { margin: 0 0 var(--e1); font-size: 1.25rem; }

.cartao-preco-sufixo {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.etiqueta-estado {
  display: inline-block;
  padding: var(--e1) var(--e3);
  font-size: 0.85rem;
  border-radius: var(--raio-pilula);
  background: var(--tinta-100);
  color: var(--tinta-600);
}

.etiqueta-promo {
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  color: var(--acao-escuro);
  font-weight: 600;
}

.etiqueta-pendente {
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  color: var(--ambar-escuro);
}

.form-preco-campos {
  display: grid;
  gap: var(--e4);
  margin-bottom: var(--e4);
}

@media (min-width: 760px) {
  .form-preco-campos { grid-template-columns: repeat(3, 1fr); }
}

.form-preco-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e4);
  align-items: center;
}

.form-preco-nota {
  margin: 0;
  flex: 1 1 18rem;
  font-size: 0.85rem;
  color: var(--texto-fraco);
}

/* ==========================================================================
   14. Fórum da comunidade
   ==========================================================================
   Duas coisas mandam nas escolhas daqui, e nenhuma é estética:

   1. O público lê e escreve do celular, em campo, com uma mão. Então: lista em
      coluna única, alvo de toque de 44px em tudo que é clicável, e o texto do
      post com medida de leitura — não largura de tela.
   2. O conteúdo é de terceiro. Post não pode "desenhar" a página: o corpo
      renderizado vive num contêiner com limites próprios (sem título, sem
      imagem, sem tabela — ver src/forum-markdown.js), e palavra longa demais
      (um código de peça colado, uma URL crua) quebra em vez de esticar a
      coluna e forçar rolagem horizontal.
   ========================================================================== */

/* --- Linha de ações do topo (buscar + abrir tópico) --------------------- */
.forum-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e5);
}
.forum-busca-form {
  display: flex;
  gap: var(--e2);
  flex: 1 1 18rem;
}
.forum-busca-form input[type='search'] { flex: 1 1 auto; min-width: 0; }
.forum-busca-form button { flex-shrink: 0; }
.forum-busca-larga { margin-bottom: var(--e5); }

/* --- Painel de quem responde (mentor/admin) ----------------------------- */
.forum-painel {
  padding: var(--e4);
  margin-bottom: var(--e5);
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  border-radius: var(--raio-lg);
}
.forum-painel h2 {
  font-size: var(--txt-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acao-escuro);
  margin-bottom: var(--e2);
}
.forum-painel p { font-size: var(--txt-base); }
.forum-painel a { color: var(--acao-escuro); font-weight: 600; }
.forum-painel .alerta { margin-top: var(--e3); margin-bottom: 0; }
.forum-painel code { font-family: var(--fonte-mono); font-size: var(--txt-xs); }

/* --- Seções e títulos --------------------------------------------------- */
.forum-secao { margin-bottom: var(--e6); }
.forum-secao > h2 {
  font-size: var(--txt-md);
  margin-bottom: var(--e3);
}
.forum-secao .texto-apoio { margin-bottom: var(--e3); }

/* --- Lista de categorias ------------------------------------------------ */
.forum-categorias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.forum-categorias > li > a,
.forum-cat-trancada {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--alvo-toque);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  text-decoration: none;
  color: inherit;
}
.forum-categorias > li > a:hover {
  border-color: var(--acao-borda);
  background: var(--tinta-50);
}
.forum-cat-trancada {
  border-style: dashed;
  background: var(--tinta-50);
  color: var(--texto-fraco);
}
.forum-cat-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.forum-cat-titulo { font-weight: 700; font-size: var(--txt-base); }
.forum-cat-descricao {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  /* Duas linhas no máximo: a descrição orienta, não é conteúdo. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.forum-cat-numeros {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-shrink: 0;
}
.forum-cat-total {
  font-family: var(--fonte-mono);
  font-size: var(--txt-sm);
  color: var(--texto-fraco);
}

/* --- Lista de tópicos --------------------------------------------------- */
.forum-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.forum-linha > a {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid transparent;
  border-radius: var(--raio);
  text-decoration: none;
  color: inherit;
}
.forum-linha > a:hover { border-color: var(--acao-borda); background: var(--tinta-50); }
.forum-linha.tem-novidade > a { border-left-color: var(--acao); }
.forum-linha-atrasada > a { border-left-color: var(--vermelho); }

.forum-linha-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
}
.forum-linha-topo:empty { display: none; }
.forum-linha-categoria {
  font-size: var(--txt-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
}
.forum-ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acao);
}
.forum-linha-titulo {
  font-weight: 700;
  font-size: var(--txt-md);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.forum-linha-resumo {
  font-size: var(--txt-sm);
  color: var(--texto-suave);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.forum-linha-meta {
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}
.forum-resultados mark {
  background: var(--ambar-fundo);
  color: var(--ambar-escuro);
  padding: 0 2px;
  border-radius: 2px;
}

.forum-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e4);
}
.forum-paginacao-estado { font-size: var(--txt-sm); color: var(--texto-fraco); }

.forum-rodape {
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  font-size: var(--txt-sm);
  color: var(--texto-fraco);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}

/* --- Post (abertura do tópico e respostas) ------------------------------ */
.forum-topico-selos {
  display: flex;
  gap: var(--e2);
  margin-bottom: var(--e2);
}
.forum-topico-selos:empty { display: none; }
.forum-topico-meta { font-size: var(--txt-sm); }

.forum-post {
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
}
.forum-post-abertura { border-color: var(--borda-forte); }
.forum-post-solucao {
  border-color: var(--acao-borda);
  background: var(--acao-fundo);
}
.forum-post-removido {
  border-style: dashed;
  background: var(--tinta-50);
}
.forum-post-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e3);
}
.forum-autor { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.forum-autor-nome { font-weight: 700; }
.forum-selo-tecnico {
  background: var(--acao-fundo);
  border-color: var(--acao-borda);
  color: var(--acao-escuro);
}
.forum-post-data { font-size: var(--txt-xs); color: var(--texto-fraco); white-space: nowrap; }

.forum-marca-solucao {
  font-size: var(--txt-sm);
  font-weight: 700;
  color: var(--acao-escuro);
  margin-bottom: var(--e2);
}
.forum-removido-aviso {
  font-size: var(--txt-sm);
  font-style: italic;
  color: var(--texto-fraco);
}

/* Corpo do post: medida de leitura, e palavra longa quebra em vez de
   empurrar a coluna (código de peça colado, URL crua). */
.forum-post-corpo {
  max-width: var(--largura-leitura);
  font-size: var(--txt-md);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.forum-post-corpo > * + * { margin-top: var(--e3); }
.forum-post-corpo ul,
.forum-post-corpo ol { padding-left: var(--e5); }
.forum-post-corpo li + li { margin-top: var(--e1); }
.forum-post-corpo blockquote {
  padding: var(--e2) var(--e4);
  border-left: 3px solid var(--borda-forte);
  background: var(--tinta-50);
  border-radius: var(--raio-sm);
  color: var(--texto-suave);
}
.forum-post-corpo code {
  font-family: var(--fonte-mono);
  font-size: 0.9em;
  background: var(--tinta-100);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
.forum-post-corpo pre {
  padding: var(--e3);
  background: var(--tinta-100);
  border-radius: var(--raio-sm);
  overflow-x: auto;
}
.forum-post-corpo pre code { background: none; padding: 0; }

/* --- Ações do post ------------------------------------------------------ */
.forum-post-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
}
.forum-post-acoes form { display: inline-flex; }
/* O elemento REPETIDO nos seletores não é redundância: `button[type='submit']`
   (o botão primário do projeto) empata em especificidade com `.classe` +
   elemento, e sem repetir `button` aqui o "Remover" do post saía como botão
   primário verde, gritando mais que a própria conversa. É a mesma pegadinha já
   documentada para `.btn-secundario` — terceira vez que ela aparece. */
.forum-acao,
button.forum-acao {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding: 0 var(--e2);
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
  cursor: pointer;
}
.forum-acao:hover,
button.forum-acao:hover { color: var(--acao-escuro); text-decoration: underline; }
.forum-acao-perigo:hover,
button.forum-acao-perigo:hover { color: var(--vermelho); }

.forum-denuncia { width: 100%; }
.forum-denuncia > summary { list-style: none; width: max-content; }
.forum-denuncia > summary::-webkit-details-marker { display: none; }
.forum-denuncia form {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  align-items: flex-start;
  margin-top: var(--e2);
  padding: var(--e3);
  background: var(--tinta-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  max-width: 28rem;
}
.forum-denuncia .campo-form { width: 100%; }

/* --- Barra de moderação no tópico --------------------------------------
   Âmbar, não verde: é ação que muda o que os outros veem, e o projeto já usa
   âmbar para "isto exige atenção". */
.forum-moderacao-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e4);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  border-radius: var(--raio);
}
.forum-moderacao-rotulo {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ambar-escuro);
  margin-right: var(--e2);
}

/* --- Atalho para a solução --------------------------------------------- */
.forum-atalho-solucao {
  padding: var(--e4);
  margin-bottom: var(--e5);
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  border-radius: var(--raio-lg);
}
.forum-atalho-solucao p { font-size: var(--txt-base); color: var(--acao-profundo); }
.forum-atalho-trecho { color: var(--texto-suave) !important; margin: var(--e2) 0 var(--e3); }

.forum-titulo-respostas {
  font-size: var(--txt-md);
  margin: var(--e6) 0 var(--e3);
}
.forum-responder { margin-top: var(--e6); }
.forum-responder h2 { font-size: var(--txt-md); margin-bottom: var(--e3); }

/* --- Tópicos parecidos (HTMX no formulário de novo tópico) -------------- */
.forum-parecidos {
  padding: var(--e3) var(--e4);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  border-radius: var(--raio);
}
.forum-parecidos-titulo {
  font-size: var(--txt-sm);
  font-weight: 700;
  color: var(--ambar-escuro);
  margin-bottom: var(--e2);
}
.forum-parecidos ul { list-style: none; margin: 0; padding: 0; }
.forum-parecidos li + li { margin-top: var(--e2); }
.forum-parecidos a { font-weight: 600; }
.forum-parecidos-meta {
  display: block;
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
}

/* --- Perfil ------------------------------------------------------------- */
.forum-perfil-local { display: flex; gap: var(--e3); }
.forum-perfil-local .campo-form { flex: 1 1 auto; }
.campo-uf { flex: 0 0 5.5rem; }
.forum-fieldset {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
}
.forum-fieldset legend {
  font-size: var(--txt-sm);
  font-weight: 700;
  padding: 0 var(--e2);
}
.forum-check {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--alvo-toque);
  font-size: var(--txt-base);
}
.forum-check input[type='checkbox'] { width: 20px; height: 20px; }

/* --- Regras ------------------------------------------------------------- */
.forum-regras {
  max-width: var(--largura-leitura);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: var(--e5);
}
.forum-regras h2 {
  font-size: var(--txt-base);
  margin-top: var(--e5);
  margin-bottom: var(--e2);
}
.forum-regras h2:first-child { margin-top: 0; }
.forum-regras p { font-size: var(--txt-base); color: var(--texto-suave); }

/* --- Moderação: denúncias ---------------------------------------------- */
.forum-denuncia-item { list-style: none; }
.forum-denuncia-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
}
.forum-denuncia-quando { font-size: var(--txt-xs); color: var(--texto-fraco); }
.forum-denuncia-motivo { margin: var(--e2) 0; overflow-wrap: anywhere; }
.forum-denuncia-alvo { font-size: var(--txt-sm); margin-bottom: var(--e3); }

/* --- Categoria trancada (tela cheia) ----------------------------------- */
.forum-trancada { max-width: 34rem; }
.forum-selo-trancada {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
  margin-bottom: var(--e2);
}
.forum-trancada h1 { font-size: var(--txt-lg); margin-bottom: var(--e3); }
.forum-trancada p { font-size: var(--txt-base); color: var(--texto-suave); }
.forum-trancada-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e5);
}

/* --- Celular ------------------------------------------------------------ */
@media (max-width: 760px) {
  .forum-acoes { gap: var(--e2); }
  .forum-acoes .btn { width: 100%; justify-content: center; }
  .forum-post { padding: var(--e4) var(--e3); }
  .forum-post-corpo { font-size: var(--txt-base); }
  .forum-post-acoes { gap: var(--e2); }
  .forum-regras { padding: var(--e4); }
  .forum-perfil-local { flex-wrap: wrap; }
  .campo-uf { flex: 1 1 5.5rem; }
  .forum-paginacao { font-size: var(--txt-sm); }

  /* Cinco itens na barra do polegar (catálogo, curso, fórum, downloads,
     admin) só acontece em conta de admin. O rótulo encurta um pouco para
     nenhum deles quebrar em duas linhas e empurrar a altura da barra. */
  .nav-areas:has(.nav-area:nth-child(5)) .nav-area-rotulo { font-size: 0.62rem; }
  .nav-areas:has(.nav-area:nth-child(5)) .nav-area { padding-inline: 2px; }
}

/* --------------------------------------------------------------------------
   14b. Facetas do fórum (modelo e sistema) — Fase A.1
   --------------------------------------------------------------------------
   O equipamento é faceta, não sala: os chips abaixo são o que substitui uma
   categoria por modelo. Por isso eles precisam parecer navegação de verdade —
   alvo de toque cheio, estado ativo óbvio, contagem ao lado — e não enfeite de
   filtro avançado que ninguém usa no celular.
   -------------------------------------------------------------------------- */
.forum-facetas {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.forum-faceta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
}
.forum-faceta-rotulo {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
  min-width: 4.5rem;
}
.forum-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  min-height: 34px;
  padding: 0 var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  background: var(--superficie);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
  white-space: nowrap;
}
.forum-chip:hover { border-color: var(--acao); color: var(--acao-escuro); }
.forum-chip.ativo {
  background: var(--acao);
  border-color: var(--acao);
  color: #fff;
}
.forum-chip-n { font-family: var(--fonte-mono); font-size: var(--txt-xs); opacity: 0.75; }

/* Etiqueta do modelo na linha e no topo do tópico. Mono porque é designação de
   equipamento (T40, T70P), a mesma família usada no código de fábrica. */
.forum-etiqueta-modelo {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem var(--e2);
  border-radius: var(--raio-sm);
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  font-weight: 700;
  color: var(--acao-escuro);
  white-space: nowrap;
}
.forum-etiqueta-secao {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem var(--e2);
  border-radius: var(--raio-sm);
  background: var(--tinta-100);
  border: 1px solid var(--borda);
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--texto-suave);
}

/* Escolha de modelo no formulário: caixas grandes, porque é campo obrigatório
   preenchido com o polegar, em pé, ao lado do drone. */
.forum-modelos { margin-bottom: var(--e3); }
.forum-modelos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e2);
}
.forum-modelo-opcao {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--alvo-toque);
  padding: 0 var(--e3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-mono);
  font-size: var(--txt-sm);
  font-weight: 700;
  color: var(--texto-suave);
  cursor: pointer;
}
.forum-modelo-opcao input { width: 18px; height: 18px; }
.forum-modelo-opcao:has(input:checked) {
  border-color: var(--acao);
  background: var(--acao-fundo);
  color: var(--acao-escuro);
}

/* Barra de estado do caso. Neutra de propósito: não é moderação (âmbar) nem
   ação principal (verde) — é o andamento do atendimento. */
.forum-estado-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  margin-bottom: var(--e3);
  background: var(--tinta-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

/* Orientação da sala: o que se discute ali. Fica acima da lista porque é a
   informação que evita a pergunta pela metade — e pergunta pela metade custa um
   dia de conversa antes da primeira resposta útil. */
.forum-orientacao {
  padding: var(--e3) var(--e4);
  margin-top: var(--e3);
  background: var(--tinta-50);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--acao);
  border-radius: var(--raio-sm);
  max-width: var(--largura-leitura);
}
.forum-orientacao-rotulo {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
  margin-bottom: var(--e1);
}
.forum-orientacao p:last-child {
  font-size: var(--txt-base);
  color: var(--texto-suave);
  line-height: 1.5;
}

/* --- Admin: categorias de conversa -------------------------------------- */
.admin-categoria + .admin-categoria { margin-top: var(--e4); }
.admin-categoria-cabeca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e3);
}
.admin-categoria-cabeca code {
  font-family: var(--fonte-mono);
  font-size: var(--txt-sm);
  background: var(--tinta-100);
  padding: 0.1rem var(--e2);
  border-radius: var(--raio-sm);
}
.admin-categoria-campos { display: flex; gap: var(--e3); }
.admin-categoria-campos .campo-form { flex: 1 1 auto; }
.campo-ordem { flex: 0 0 6rem; }
.admin-categoria-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
}
.admin-categoria-mover { display: flex; gap: var(--e2); flex: 1 1 18rem; }
.admin-categoria-mover select { flex: 1 1 auto; min-width: 0; }
.admin-categoria-arquivada { opacity: 0.72; border-style: dashed; }
/* Sem isto o "Salvar" de cada categoria estica a largura inteira do cartão e
   compete com a ação principal da tela, que é criar. */
.admin-categoria .formulario button[type='submit'] { align-self: flex-start; }

@media (max-width: 760px) {
  .forum-facetas { padding: var(--e3); }
  .forum-faceta-rotulo { min-width: 100%; }
  .admin-categoria-campos { flex-wrap: wrap; }
  .campo-ordem { flex: 1 1 6rem; }
  .admin-categoria-mover { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   15. Amostra pública do catálogo (mapa do T100 na home)
   --------------------------------------------------------------------------
   É a peça de conversão mais forte que o projeto tem: em vez de dizer que o
   catálogo é bom, deixa a pessoa usar. O que fica de fora é só o código de
   fábrica — ver src/routes/vitrine.js.

   O mapa em si reusa a seção 5b (mesma marcação, mesmo CSS). Aqui ficam só a
   moldura na home, a capa que adia o download e o aviso do que é pago.
   -------------------------------------------------------------------------- */
.secao-amostra {
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  padding: var(--e7) var(--e4);
}
.amostra-interna {
  max-width: var(--largura-pagina);
  margin: 0 auto;
}
.secao-amostra h2 {
  font-size: var(--txt-xl);
  margin: var(--e2) 0 var(--e3);
}
.amostra-texto {
  max-width: var(--largura-leitura);
  font-size: var(--txt-md);
  line-height: 1.6;
  color: var(--texto-suave);
  margin-bottom: var(--e5);
}
.amostra-texto strong { color: var(--texto); }

/* Capa: a foto real, com o botão por cima. Mostrar a foto de verdade (e não um
   ícone) é o que faz a pessoa querer tocar — e ela já carrega em lazy. */
.amostra-abrir {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--tinta-100);
}
.amostra-abrir img {
  display: block;
  width: 100%;
  height: auto;
  /* Cinza como no mapa: destacar lá é devolver a cor da região tocada, e a
     capa já antecipa esse contraste. */
  filter: grayscale(0.55) contrast(1.02);
}
.amostra-abrir .btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px rgba(15, 26, 20, 0.28);
}

.amostra-mapa { margin-top: var(--e2); }

/* O painel da amostra rola por dentro em vez de esticar a home.
   Sem isto, tocar num braço do T100 (que tem dezenas de peças) fazia a página
   passar de 7.800 px e empurrava o produto seguinte para fora do alcance de
   quem está decidindo comprar. Na tela do catálogo, que é dedicada ao mapa,
   o painel continua crescendo à vontade. */
.amostra-mapa .mapa-painel {
  max-height: min(60vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.amostra-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}
.amostra-rodape p {
  flex: 1 1 22rem;
  font-size: var(--txt-base);
  color: var(--texto-suave);
  margin: 0;
}
.amostra-rodape strong { color: var(--texto); }

/* Peça na amostra: mesma linha do catálogo, sem link e sem código. O lugar do
   código diz o que falta — é o único momento em que a amostra cobra algo, e
   ele precisa ser honesto em vez de parecer erro de carregamento. */
.mapa-peca-amostra { cursor: default; }
.mapa-peca-amostra:hover { background: none; }
.mapa-peca-bloqueada {
  color: var(--texto-fraco) !important;
  font-family: var(--fonte) !important;
  font-style: italic;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .secao-amostra { padding: var(--e6) var(--e3); }
  .secao-amostra h2 { font-size: var(--txt-lg); }
  .amostra-abrir .btn { width: min(88%, 20rem); justify-content: center; text-align: center; }
  .amostra-rodape .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   16. Audiência (admin)
   ==========================================================================
   Um gráfico e quatro tabelas. Regras que valem aqui e que não são estética:

   - Uma série só no gráfico. Visitantes e cliques no botão de compra têm
     ordens de grandeza diferentes; no mesmo eixo o menor vira uma linha
     colada no chão. O clique aparece na dica da barra e na tabela.
   - O que separa uma barra da vizinha é o respiro de 2px, não um contorno.
     Contorno é tinta que não é dado.
   - Todo texto do gráfico usa cor de texto, nunca o verde das barras: verde
     como tinta de rótulo some no branco e confunde rótulo com dado.
   - O gráfico rola na horizontal no celular (30 barras não cabem em 360px),
     dentro do próprio contêiner — a página nunca rola de lado.
   ========================================================================== */

.audiencia-topo {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: var(--e4);
  margin-bottom: var(--e5);
}
@media (max-width: 760px) {
  .audiencia-topo { grid-template-columns: 1fr; }
}

/* Contador ao vivo. Fundo de ação porque é o único bloco da página que muda
   sozinho — quem abre o painel precisa saber onde olhar. */
.cartao-agora {
  padding: var(--e4) var(--e5);
  background: var(--acao-fundo);
  border: 1px solid var(--acao-borda);
  border-radius: var(--raio-lg);
}
.agora-numero {
  margin: 0;
  font-size: 3rem;       /* o número principal da tela, e só existe um */
  font-weight: var(--peso-titulo);
  line-height: 1;
  letter-spacing: var(--tracking-titulo);
  color: var(--acao-profundo);
}
.agora-legenda {
  margin: var(--e1) 0 var(--e3);
  font-size: var(--txt-base);
  font-weight: 600;
  color: var(--texto);
}
.agora-legenda span {
  display: block;
  font-size: var(--txt-sm);
  font-weight: 400;
  color: var(--texto-suave);
}
.agora-detalhe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e4);
  margin: 0 0 var(--e3);
  padding: 0;
  list-style: none;
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.agora-detalhe b { color: var(--texto); font-variant-numeric: tabular-nums; }

.agora-titulo-lista {
  margin: 0 0 var(--e1);
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
}
.agora-paginas {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--txt-sm);
}
.agora-paginas li {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  padding: 2px 0;
  border-top: 1px solid var(--acao-borda);
}
.agora-paginas code {
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  overflow-wrap: anywhere;
}
.agora-paginas span { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.agora-vazio { margin: 0; font-size: var(--txt-sm); color: var(--texto-suave); }

.audiencia-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3);
}
.tile-audiencia {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}
.tile-rotulo {
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
}
.tile-valor {
  font-size: var(--txt-xl);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
  line-height: 1.1;
}
.tile-apoio { font-size: var(--txt-sm); color: var(--texto-suave); }

.bloco-audiencia {
  padding: var(--e5);
  margin-bottom: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}
.bloco-audiencia h2 { margin: 0; font-size: var(--txt-lg); }
.bloco-audiencia .titulo-segundo { margin-top: var(--e6); }
.bloco-audiencia-apoio {
  margin: var(--e1) 0 var(--e4);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.bloco-audiencia-apoio b { color: var(--texto); }
.bloco-audiencia-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
}

.escala-audiencia { display: flex; gap: var(--e1); }
.escala-audiencia a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  padding: 0 var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-pilula);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
}
.escala-audiencia a.ativo {
  background: var(--acao);
  border-color: var(--acao);
  color: #fff;
}

/* 30 barras não cabem em 360px de tela. A rolagem fica aqui dentro; a página
   em si nunca rola de lado. */
.grafico-rolagem {
  overflow-x: auto;
  padding-bottom: var(--e2);
}
.grafico-visitas { display: block; max-width: none; }

.grafico-barra { fill: var(--acao); }
.grafico-alvo { fill: transparent; }
.grafico-grade { stroke: var(--borda); stroke-width: 1; }
.grafico-eixo { stroke: var(--borda-forte); stroke-width: 1; }
.grafico-tique,
.grafico-rotulo {
  font-family: var(--fonte-mono);
  font-size: 10px;
  fill: var(--texto-fraco);
}
.grafico-valor {
  font-family: var(--fonte);
  font-size: 11px;
  font-weight: 700;
  fill: var(--texto);   /* nunca o verde da barra: rótulo não é dado */
}

.tabela-do-grafico { margin-top: var(--e4); }
.tabela-do-grafico summary {
  cursor: pointer;
  min-height: var(--alvo-toque);
  display: flex;
  align-items: center;
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--acao-escuro);
}
.tabela-do-grafico table { margin-top: var(--e3); }

.audiencia-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--e4);
  align-items: start;
}

/* A etiqueta de campanha fica guardada atrás de um resumo, não num aviso
   fixo: pedir todo dia algo que o dono decidiu não fazer é o que ensina a
   ignorar aviso — e aí o aviso que importa também passa batido. */
.detalhe-etiqueta {
  margin-top: var(--e5);
  padding: var(--e3) var(--e4);
  background: var(--tinta-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.detalhe-etiqueta summary {
  cursor: pointer;
  min-height: var(--alvo-toque);
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--acao-escuro);
}
.detalhe-etiqueta p { margin: var(--e2) 0 0; }
.detalhe-etiqueta b { color: var(--texto); }

/* ==========================================================================
   17. Ementa pública (/curso/programa)
   ==========================================================================
   A página que um cliente recebe por link antes de comprar, e a única do site
   com texto denso o bastante para o Google indexar (o mapa do T100 é JS).

   Duas regras que não são estética:

   - A numeração dos capítulos é informação, não enfeite: o curso foi escrito
     para ser lido em ordem e os capítulos se referenciam. Por isso o trilho
     numerado, e por isso o número do capítulo que não tranca (introdução e
     glossário) sai em cinza, não em verde.
   - Nem tudo vira cartão. Capítulo é separado por fio; só avaliação, materiais
     e o fecho de compra ganham superfície elevada — se tudo fosse cartão, a
     hierarquia sumiria e nada se destacaria.
   ========================================================================== */

.pagina-programa {
  max-width: 54rem;
  margin: 0 auto;
  padding-inline: var(--e4);
  padding-block: var(--e6) var(--e7);
}

.programa-cabecalho { margin-bottom: var(--e7); }

.programa-eyebrow {
  margin: 0 0 var(--e2);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.pagina-programa h1 {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 2.6rem);
  line-height: 1.1;
  text-wrap: balance;
}
.programa-chamada {
  margin: var(--e4) 0 0;
  max-width: 60ch;
  font-size: var(--txt-md);
  color: var(--texto-suave);
}

/* Ficha técnica: os números que o cliente confere. Grade de 1px — o fio entre
   as células vem do fundo, não de borda em cada uma. */
.programa-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1px;
  margin: var(--e5) 0 0;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.programa-ficha div {
  background: var(--superficie);
  padding: var(--e3) var(--e4);
}
.programa-ficha dt {
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
  line-height: 1.3;
}
.programa-ficha dd {
  margin: 2px 0 0;
  font-family: var(--fonte-mono);
  font-size: var(--txt-lg);
  font-weight: 700;
  color: var(--acao-profundo);
  font-variant-numeric: tabular-nums;
}

.programa-modelos {
  margin: var(--e4) 0 0;
  padding: var(--e3) var(--e4);
  background: var(--acao-fundo);
  border-radius: var(--raio);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.programa-modelos code {
  font-family: var(--fonte-mono);
  font-weight: 500;
  color: var(--acao-profundo);
}

.programa-secao-titulo {
  margin: var(--e7) 0 0;
  padding-bottom: var(--e2);
  border-bottom: 2px solid var(--acao);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.programa-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.programa-capitulo {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 var(--e5);
  padding: var(--e5) 0;
  border-bottom: 1px solid var(--borda);
}
.programa-capitulo:last-child { border-bottom: 0; }

.programa-num {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--acao);
  font-variant-numeric: tabular-nums;
}
/* Capítulo sem prova nunca tranca — o cinza diz isso sem precisar de legenda. */
.programa-num.livre { color: var(--tinta-400); }
.programa-tempo {
  display: block;
  margin-top: var(--e1);
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.programa-corpo h3 {
  margin: 0 0 var(--e2);
  font-size: var(--txt-lg);
  line-height: 1.25;
  text-wrap: balance;
}
.programa-contexto {
  margin: 0 0 var(--e3);
  max-width: 62ch;
  font-size: var(--txt-base);
  color: var(--texto-suave);
}

.programa-aprende {
  margin: 0 0 var(--e3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e1);
}
.programa-aprende li {
  position: relative;
  padding-left: var(--e5);
  max-width: 62ch;
  font-size: var(--txt-base);
  color: var(--texto-suave);
}
.programa-aprende li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.65em;
  width: 8px;
  height: 2px;
  background: var(--acao);
}

.programa-secoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
}
.programa-secoes span {
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  padding: 3px var(--e2);
  background: var(--tinta-50);
  border-radius: var(--raio-sm);
  color: var(--texto-fraco);
}

.programa-prova {
  margin: var(--e3) 0 0;
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ambar);
}

.programa-bloco {
  margin-top: var(--e4);
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
}

.programa-passos {
  margin: 0;
  padding: 0 0 0 var(--e5);
  display: grid;
  gap: var(--e3);
  font-size: var(--txt-base);
  color: var(--texto-suave);
}
.programa-passos li::marker {
  font-family: var(--fonte-mono);
  font-weight: 700;
  color: var(--acao);
}
.programa-passos b { color: var(--texto); }

.programa-materiais {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--e4);
}
.programa-materiais li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e3);
  align-items: baseline;
  font-size: var(--txt-base);
  color: var(--texto-suave);
}
.programa-qtd {
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  font-weight: 700;
  padding: 3px var(--e2);
  background: var(--acao-fundo);
  border-radius: var(--raio-sm);
  color: var(--acao-profundo);
  white-space: nowrap;
}
.programa-materiais b { color: var(--texto); }

.programa-aviso {
  margin: var(--e4) 0 0;
  padding: var(--e4);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-borda);
  border-radius: var(--raio);
  font-size: var(--txt-sm);
  color: var(--texto-suave);
}
.programa-aviso b { color: var(--texto); }

/* Fecho: o único momento da página em que o visitante já sabe o que vai
   aprender. É aqui que o botão pode aparecer sem parecer interrupção. */
.programa-fecho {
  margin-top: var(--e7);
  padding: var(--e6) var(--e5);
  background: var(--curso-fundo);
  border-radius: var(--raio-lg);
  color: var(--curso-texto);
  text-align: center;
}
.programa-fecho h2 {
  margin: 0;
  font-size: var(--txt-xl);
  color: var(--curso-texto);
}
.programa-fecho p {
  margin: var(--e3) auto 0;
  max-width: 48ch;
  font-size: var(--txt-base);
  color: var(--curso-suave);
}
.programa-preco {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--e3);
  margin-top: var(--e4);
}
.programa-preco s { color: var(--curso-suave); font-size: var(--txt-base); }
.programa-preco b {
  font-size: var(--txt-xl);
  font-weight: var(--peso-titulo);
  color: var(--curso-acento);
}
.programa-fecho .produto-cta { margin-top: var(--e4); }
.programa-embreve {
  margin-top: var(--e4);
  font-family: var(--fonte-mono);
  font-size: var(--txt-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--curso-suave);
}

.programa-nota {
  margin: var(--e5) 0 0;
  max-width: 62ch;
  font-size: var(--txt-sm);
  color: var(--texto-fraco);
}
.programa-nota b { color: var(--texto-suave); }

/* --- Seção compacta na home: os capítulos em uma linha cada ------------- */
.curso-programa {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.curso-programa h3 {
  margin: 0 0 var(--e4);
  font-size: var(--txt-md);
  color: var(--curso-texto);
}
.curso-programa-lista {
  margin: 0 0 var(--e4);
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e2) var(--e5);
}
.curso-programa-lista li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--e2);
  align-items: baseline;
  padding: var(--e1) 0;
  font-size: var(--txt-sm);
  color: var(--curso-suave);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.curso-programa-lista b {
  font-family: var(--fonte-mono);
  font-size: var(--txt-xs);
  font-weight: 700;
  color: var(--curso-acento);
  font-variant-numeric: tabular-nums;
}
.curso-programa-lista span { color: var(--curso-texto); }
.curso-programa-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
  font-size: var(--txt-base);
  font-weight: 600;
  color: var(--curso-acento);
}

@media (max-width: 600px) {
  .programa-capitulo {
    grid-template-columns: 1fr;
    gap: var(--e2);
  }
  .programa-trilho {
    display: flex;
    align-items: baseline;
    gap: var(--e3);
  }
  .programa-num { font-size: var(--txt-lg); }
  .programa-tempo { margin-top: 0; }
}