/* ═══════════════════════════════════════════════════════════════════════════
   LP Projeto Cartório — Curso Registrando
   Marca: ~/.claude/skills/registrando-brand (Brand Guide . 2025)

   Cascata explícita em 9 blocos numerados, sem @layer: não há CSS de terceiros
   para domar (o CSS do Active Campaign fica deliberadamente de fora) e camadas
   surpreendem quem for editar depois.

   01 RESET E BASE      05 DISPOSITIVOS DE MARCA   09 RESPONSIVO E PREFERÊNCIAS
   02 TOKENS DA LP      06 COMPONENTES
   03 TIPOGRAFIA        07 SEÇÕES
   04 LAYOUT            08 UTILITÁRIOS

   Nomes em pt-BR, BEM-lite: bloco = substantivo (.cartao), elemento __,
   modificador --, estado sem prefixo (.em-erro, .enviando).
   O prefixo reg- pertence às classes que já vêm de tokens.css (.reg-duotone*,
   .reg-botao) e não é renomeado.

   Regra de contraste desta marca, que decide metade do arquivo:
   #5497E3 sobre branco = 2.89:1 e branco sobre #5497E3 = 2.89:1. Os dois
   reprovam. Azul claro é superfície e preenchimento, nunca texto e nunca
   recebe texto branco. Texto secundário sobre navy é #B0D4FF (11.20:1).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 01 RESET E BASE ══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  background: var(--reg-branco);
  color: var(--reg-azul-escuro);
  font-family: var(--reg-fonte);
  font-size: var(--fs-corpo);
  font-weight: var(--reg-peso-corpo);
  line-height: 1.6;
  letter-spacing: var(--reg-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* `svg { display: block }` acima vence o `hidden` do folha do navegador, que
   tem especificidade menor. Sem esta linha o sprite de ícones — um <svg hidden>
   — vira um bloco vazio no topo da página. */
[hidden] { display: none !important; }
img { height: auto; }

input, button, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }

button { background: none; border: 0; }

a { color: inherit; }

ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 { font-weight: var(--reg-peso-titulo); line-height: 1.15; text-wrap: balance; }

p { text-wrap: pretty; }

/* Nome comprido, e-mail sem espaço e URL colada não podem estourar o container:
   quebram dentro da palavra em vez de empurrar a caixa. */
body { overflow-wrap: break-word; }

/* âncora precisa desencostar do rail grudado, que agora existe em toda largura */
:target { scroll-margin-block-start: 9rem; }

/* Anel de foco. O azul claro só serve sobre fundo escuro: sobre o branco da
   marca ele dá 2.89:1, abaixo do piso de 3:1 do SC 1.4.11 — o mesmo número que
   este arquivo proíbe para texto. Sobre claro o anel é navy. */
:focus-visible {
  outline: 3px solid var(--reg-azul-claro);
  outline-offset: 3px;
}

.secao--claro :focus-visible,
.secao--bebe :focus-visible,
.cartao:not(.cartao--escuro) :focus-visible,
.pular-para-conteudo:focus-visible {
  outline-color: var(--reg-azul-escuro);
}

/* ═══ 02 TOKENS DA LP ══════════════════════════════════════════════════════
   Só o que não existe em tokens.css. Nada de --reg-* aqui.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Escala tipográfica — modular 1.25 ancorada em 18px de corpo.
     O guia dá 72/36/30pt impressos; estes clamps são a leitura em tela. */
  --fs-display:  clamp(2rem, 1.68rem + 1.35vw, 2.875rem);
  --fs-h2:       clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
  --fs-h3:       clamp(1.1875rem, 1.08rem + 0.45vw, 1.5rem);
  --fs-lead:     clamp(1.0625rem, 0.95rem + 0.47vw, 1.375rem);
  --fs-corpo:    clamp(1rem, 0.955rem + 0.19vw, 1.125rem);
  --fs-botao:    clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);
  --fs-eyebrow:  0.8125rem;
  --fs-legenda:  0.875rem;

  /* Tracking. O guia especifica 0 em todos os níveis de texto, e aqui é 0
     mesmo — inclusive no display. O positivo do eyebrow e do botão é outra
     coisa: caixa alta em corpo pequeno precisa de ar entre as letras. */
  --tracking-eyebrow: 0.14em;
  --tracking-botao:   0.06em;
  --tracking-display: 0;

  /* Espaçamento, base 4px */
  --esp-1: 0.25rem;  --esp-2: 0.5rem;   --esp-3: 0.75rem;  --esp-4: 1rem;
  --esp-5: 1.5rem;   --esp-6: 2rem;     --esp-7: 3rem;     --esp-8: 4rem;
  --esp-9: 6rem;     --esp-10: 8rem;
  --pad-secao: clamp(4rem, 2.5rem + 5vw, 8rem);

  /* Larguras */
  --largura-max:      75rem;
  --largura-prosa:    44rem;
  --largura-estreita: 38rem;
  --gutter: clamp(1.25rem, 1rem + 1.2vw, 2.5rem);

  /* Movimento */
  --dur-rapido: 160ms;
  --dur-medio:  320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Cores derivadas. O guia não tem cinza; texto fraco é a própria cor do
     contexto rebaixada, o que mantém tudo dentro da paleta. */
  --texto-fraco-claro:  color-mix(in srgb, var(--reg-azul-escuro) 74%, transparent);
  --texto-fraco-escuro: var(--reg-azul-bebe);
  --linha-clara:  color-mix(in srgb, var(--reg-azul-escuro) 14%, transparent);
  --linha-escura: color-mix(in srgb, var(--reg-branco) 16%, transparent);
  /* Branco a 18% sobre navy. Estava em 7%, que media 1.19:1 contra o campo — os
     quatro .publico__item liam como lista de duas colunas, não como as quatro
     situações em que o leitor tinha de se reconhecer. A 18% o cartão dá 1.69:1
     e o texto branco em cima dele ainda dá 9.6:1. */
  --superficie-card:  color-mix(in srgb, var(--reg-branco) 18%, transparent);
  --superficie-clara: color-mix(in srgb, var(--reg-azul-claro) 10%, transparent);
  /* Branco puro é superfície elevada, não o branco da marca: um cartão em
     #F5FAFF sobre .secao--claro, que também é #F5FAFF, desapareceria. */
  --superficie-elevada: #fff;
  --sombra-cta: 0 10px 28px color-mix(in srgb, var(--reg-azul-escuro) 30%, transparent);
  /* Duas camadas: contato + ambiente. A camada única de 40px de blur que estava
     aqui não tinha contato nenhum — hairline de 1px mais uma névoa larga é o
     desenho de cartão que todo gerador de interface entrega, e o cartão
     flutuava em vez de pousar. A linha curta de 1px prende o cartão à
     superfície; a de 14px é só a sombra ambiente. */
  --sombra-cartao: 0 1px 2px color-mix(in srgb, var(--reg-azul-escuro) 16%, transparent),
                   0 6px 14px color-mix(in srgb, var(--reg-azul-escuro) 10%, transparent);
}

/* ═══ 03 TIPOGRAFIA ════════════════════════════════════════════════════════
   Os elementos h1..h4 não recebem tamanho: só as classes .t-* dão escala.
   Nível semântico e tamanho visual são decisões separadas.
   ═════════════════════════════════════════════════════════════════════════ */

/* Trecho em destaque dentro do título. O amarelo do CTA aparece aqui como
   texto — exceção à regra "laranja só no botão", pedida pelo cliente e medida:
   #FECD61 sobre o navy do hero dá 11.53:1, AAA. O <em> é semântico: quem usa
   leitor de tela ouve a ênfase que o vidente vê. */
.destaque-amarelo {
  color: var(--reg-cta-fim);
  font-style: normal;
}

.t-display {
  font-size: var(--fs-display);
  font-weight: var(--reg-peso-titulo);
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
}

.t-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--reg-peso-titulo);
  line-height: 1.12;
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--reg-peso-titulo);
  line-height: 1.25;
}

.t-lead {
  font-size: var(--fs-lead);
  font-weight: var(--reg-peso-corpo);
  line-height: 1.5;
}

.t-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--reg-peso-titulo);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: 1.3;
}

.t-legenda {
  font-size: var(--fs-legenda);
  line-height: 1.5;
}

.prosa > * + * { margin-block-start: var(--esp-4); }
.prosa strong { font-weight: var(--reg-peso-titulo); }

/* ═══ 04 LAYOUT ════════════════════════════════════════════════════════════ */

.wrap {
  width: min(100%, var(--largura-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--prosa    { max-width: calc(var(--largura-prosa) + var(--gutter) * 2); }
.wrap--estreita { max-width: calc(var(--largura-estreita) + var(--gutter) * 2); }

.centro { text-align: center; }

.secao {
  position: relative;
  overflow: hidden;
  padding-block: var(--pad-secao);
}

/* Quatro tratamentos de seção. A ordem em que se alternam é o ritmo da página;
   duas seções do mesmo tratamento nunca se encostam. */
.secao--gradiente {
  background: var(--reg-gradiente-azul);
  color: var(--reg-texto-sobre-escuro);
}

.secao--escuro {
  background: var(--reg-azul-escuro);
  color: var(--reg-texto-sobre-escuro);
}

.secao--claro {
  background: var(--reg-branco);
  color: var(--reg-azul-escuro);
}

/* Azul bebê: o único fundo colorido que aceita texto navy com folga (11.20:1).
   É o que o azul claro #5497E3 não pode ser. */
.secao--bebe {
  background: var(--reg-azul-bebe);
  color: var(--reg-azul-escuro);
}

.secao--escuro .t-lead,
.secao--gradiente .t-lead { color: var(--texto-fraco-escuro); }

.secao--claro .t-lead,
.secao--bebe .t-lead { color: var(--texto-fraco-claro); }

/* ═══ 05 DISPOSITIVOS DE MARCA ═════════════════════════════════════════════
   A marca é um balão de fala com óculos. Três dispositivos saem daí e
   costuram a página inteira: o filete, o balão-marcador e a marca d'água.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── A. Logotipo
   Os SVGs de assets/img trazem o wordmark em currentColor: a cor vem do
   contexto. Sobre escuro herda branco, sobre claro herda #303031. */
.marca { display: block; height: auto; }
.marca--rail   { width: clamp(9rem, 7rem + 6vw, 12.5rem); }
.marca--rodape { width: 11rem; margin-inline: auto; }

/* ── B. Filete de abertura
   4px de azul claro no topo da página. É o único lugar em que #5497E3
   aparece sozinho em cima de navy — como matéria, não como texto. */
.rail__filete {
  height: 4px;
  background: var(--reg-gradiente-azul-claro);
}

/* ── C. Balão como marcador de lista
   Recorte do símbolo: retângulo arredondado com um rabicho no canto inferior
   esquerdo. Substitui bullet, check e ícone — um só sinal na página toda. */
.balao {
  position: relative;
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.125rem;
  border-radius: 0.5rem 0.5rem 0.5rem 0.125rem;
  background: var(--reg-azul-claro);
}

.balao::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0.1875rem;
  border-inline-start: 0.375rem solid var(--reg-azul-claro);
  border-block-end: 0.375rem solid transparent;
}

.balao--forte { background: var(--reg-azul-escuro); }
.balao--forte::after { border-inline-start-color: var(--reg-azul-escuro); }

.secao--escuro .balao--forte,
.secao--gradiente .balao--forte { background: var(--reg-azul-bebe); }
.secao--escuro .balao--forte::after,
.secao--gradiente .balao--forte::after { border-inline-start-color: var(--reg-azul-bebe); }

/* ── C2. Ícones
   Lucide, licença ISC: traço de 2px, cantos arredondados, mesma grade de 24.
   Herdam a cor do contexto, como o logotipo, e por isso funcionam sobre navy e
   sobre claro sem variante.

   Onde eles entraram, o balão saiu: numa lista em que cada item tem assunto
   próprio, o marcador repetido só dizia "item", e o ícone diz o quê. O balão
   ficou onde é assinatura — no nome da campanha e no divisor. */
.ico {
  flex: none;
  inline-size: var(--ico-tam, 1.5rem);
  block-size: var(--ico-tam, 1.5rem);
  color: var(--reg-azul-claro);
  /* O Lucide carrega estes quatro no <svg> raiz, e o <symbol> não os herda: sem
     eles os traços viram preenchimento preto sólido. Ficam aqui, num lugar só,
     em vez de repetidos em cada símbolo. */
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.secao--escuro .ico,
.secao--gradiente .ico { color: var(--reg-azul-bebe); }

/* No rótulo da campanha o ícone acompanha a altura da caixa alta de 13px: nos
   24px padrão ele viraria o assunto da linha, e o assunto é o nome. */
.campanha .ico { --ico-tam: 1.125rem; }

/* ── D. Marca d'água
   O ícone do balão em escala grande, baixíssimo contraste, sangrando pela
   borda. Dá profundidade sem introduzir cor nova. */
.marca-dagua {
  position: absolute;
  z-index: 0;
  inline-size: min(38rem, 60vw);
  opacity: 0.06;
  pointer-events: none;
}

.marca-dagua--dir { inset-block-start: -6rem; inset-inline-end: -10rem; }
.marca-dagua--esq { inset-block-end: -8rem; inset-inline-start: -12rem; }

.secao > .wrap { position: relative; z-index: 1; }

/* ── E. Divisor
   Três balõezinhos centrados fecham um movimento sem virar régua. */
.divisor {
  display: flex;
  justify-content: center;
  gap: var(--esp-2);
  margin-block: var(--esp-7);
}

/* 0.5 e não 0.35. A 0.35 os três pontos mediam 2.21:1 sobre .secao--claro:
   decorativos e aria-hidden, então conformes, mas perto do invisível — e um
   fecho de movimento que ninguém vê não fecha nada. A 0.5 dão 3.36:1 sobre o
   branco de marca e 3.02:1 sobre o azul bebê, sem virar régua. */
.divisor span {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 0.1875rem 0.1875rem 0.1875rem 0;
  background: currentColor;
  opacity: 0.5;
}

/* ═══ 06 COMPONENTES ═══════════════════════════════════════════════════════ */

/* ── Botões
   O gradiente laranja é herdado do CP Iuris e só existe aqui: um botão por
   dobra, nada mais na página é laranja. Rótulo sempre navy — branco sobre
   laranja reprova em contraste. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 3.5rem;
  padding-inline: var(--esp-6);
  padding-block: var(--esp-2);
  border-radius: var(--reg-raio-botao);
  font-size: var(--fs-botao);
  font-weight: var(--reg-peso-titulo);
  letter-spacing: var(--tracking-botao);
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  /* "QUERO MINHA VAGA" mede 170px em caixa alta a 15px e cabe em uma linha em
     todas as larguras que a página atende. O balance fica como rede para o
     zoom de texto e para qualquer rótulo futuro mais longo: quando quebrar,
     quebra equilibrado, e a pílula cresce a partir do min-height em vez de
     apertar o texto contra a borda. */
  text-wrap: balance;
  cursor: pointer;
  transition: filter var(--dur-rapido) var(--ease),
              transform var(--dur-rapido) var(--ease),
              box-shadow var(--dur-rapido) var(--ease);
}

.botao--acento {
  background: var(--reg-gradiente-cta);
  color: var(--reg-texto-sobre-cta);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--reg-azul-escuro) 18%, transparent);
}

.botao--fantasma {
  border: 2px solid currentColor;
  color: inherit;
}

/* Botão de largura total não precisa dos 2rem laterais: a largura vem do
   container, e num rótulo centrado o padding lateral só serve de piso de folga
   contra a curva da pílula.

   Medido, com o cartão em 390/375/360/320px de viewport:
     padding 2rem  → 237 / 220 / 205 / 166px úteis
     padding esp-3 → 275 / 260 / 245 / 206px úteis
     padding esp-2 → 283 / 268 / 253 / 214px úteis
   O rótulo antigo, "QUERO GARANTIR MINHA VAGA", media 262px e não cabia em
   nenhuma dessas linhas abaixo de 390px. O rótulo virou "QUERO MINHA VAGA",
   170px, e passa em todas — inclusive nos 166px de padding 2rem. O esp-2 fica
   porque a folga extra é o que segura o zoom de texto e um rótulo maior no
   futuro; a decisão de largura não depende mais dele. */
.botao--bloco {
  display: flex;
  inline-size: 100%;
  padding-inline: var(--esp-2);
}

/* Havia aqui um .botao--grande de 4rem, aplicado só no submit do #form-final.
   Dois tamanhos para a mesma ação, com o mesmo rótulo e o mesmo destino, e o
   maior deles no formulário secundário: o do hero é o primário no desktop,
   ao lado da headline. Tamanho é hierarquia, e essa hierarquia estava
   invertida. Os dois submits agora são o mesmo botão, 3.5rem — a altura de
   alvo que este sistema declara para ação. */

.botao:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--sombra-cta); }
.botao:active { transform: translateY(0); }

.botao[disabled],
.form-inscricao.enviando .botao { opacity: 0.55; pointer-events: none; }

/* ── Campos e formulário
   O rótulo mora dentro do campo, como sugestão que some ao digitar — decisão do
   cliente, e é o que o modelo aprovado faz.

   O custo é real e fica registrado: placeholder desaparece quando o campo tem
   conteúdo, então quem for conferir o que preencheu, ou for interrompido no
   meio, perde a referência do que aquele campo pedia. Por isso o <label>
   continua existindo em todo campo, em .sr-only: o leitor de tela anuncia
   normalmente, e o autofill do navegador continua casando os campos. O que se
   perdeu é a pista visual depois do preenchimento, não a semântica. */
.form-inscricao {
  display: grid;
  gap: var(--esp-4);
}

.campo { display: grid; gap: var(--esp-2); }

/* Placeholder é texto de interface, não decoração: 4.5:1 contra o branco do
   campo. O cinza claro de fábrica dos navegadores fica em 2.8:1. */
.campo__entrada::placeholder { color: var(--texto-fraco-claro); opacity: 1; }

.campo__label { display: flex; align-items: baseline; gap: var(--esp-2); }

.campo__opcional {
  font-size: 0.6875rem;
  font-weight: var(--reg-peso-medio);
  letter-spacing: 0.08em;
  opacity: 0.7;
  text-transform: none;
}

.campo__entrada,
.campo__select {
  inline-size: 100%;
  min-height: 3.25rem;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--linha-clara);
  border-radius: var(--reg-raio-pequeno);
  background: var(--superficie-elevada);
  color: var(--reg-azul-escuro);
  font-size: var(--fs-corpo);
  transition: border-color var(--dur-rapido) var(--ease),
              box-shadow var(--dur-rapido) var(--ease);
}

/* Campo focado. O `outline: none` que estava aqui vencia por especificidade os
   dois :focus-visible acima e deixava o indicador só na borda de 1px + halo, que
   somados dão ~1.35:1 contra o cartão branco. Agora o anel do sistema fica, e a
   borda mais grossa é reforço, não substituto. */
.campo__entrada:focus-visible,
.campo__select:focus-visible {
  border-color: var(--reg-azul-escuro);
  outline: 3px solid var(--reg-azul-escuro);
  outline-offset: 2px;
}

.cartao--escuro .campo__entrada:focus-visible,
.cartao--escuro .campo__select:focus-visible {
  border-color: var(--reg-azul-claro);
  outline-color: var(--reg-azul-bebe);
}

/* foco por mouse: sem anel, só a borda reforçada */
.campo__entrada:focus:not(:focus-visible),
.campo__select:focus:not(:focus-visible) {
  border-color: var(--reg-azul-escuro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--reg-azul-claro) 30%, transparent);
  outline: none;
}

.campo__select {
  appearance: none;
  padding-inline-end: var(--esp-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23001848' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-4) center;
  background-size: 0.75rem;
}

/* placeholder do select fica mais fraco enquanto nada foi escolhido */
.campo__select:has(option[value=""]:checked) { color: var(--texto-fraco-claro); }

.campo.em-erro .campo__entrada,
.campo.em-erro .campo__select { border-color: #B3261E; }

.campo__erro {
  color: #B3261E;
  font-size: var(--fs-legenda);
  font-weight: var(--reg-peso-medio);
}

/* O nó tem `role="alert"`. `display: none` o tirava da árvore de
   acessibilidade justamente no frame em que o texto é escrito, e NVDA/JAWS não
   anunciam conteúdo injetado num nó que estava oculto. Colapsado em altura
   zero ele continua na árvore, não ocupa espaço e o alerta dispara. */
.campo__erro:empty {
  display: block;
  block-size: 0;
  margin: 0;
  overflow: hidden;
}

/* dentro de cartão escuro o erro precisa de cor que passe sobre navy */
.cartao--escuro .campo__erro { color: #FFB4AB; }
.cartao--escuro .campo__label { color: var(--reg-branco); }

.form__lgpd {
  margin-block-start: var(--esp-1);
  font-size: var(--fs-legenda);
  opacity: 0.8;
}

/* ── Modal de inscrição
   O formulário deixou de ocupar meia dobra em dois lugares e passou a morar num
   <dialog>. Não é modal por gosto: é a tarefa que a página inteira existe para
   entregar, ela exige atenção protegida, e o nativo dá foco preso, Esc para
   fechar e inerte no resto da página sem uma linha de JS de acessibilidade.

   Sem JavaScript o <dialog> não abre — mas sem JavaScript o formulário também
   nunca enviou nada (ver bloco 1 do main.js). O <noscript> dentro dele continua
   sendo a única mensagem honesta nesse caso. */
.modal {
  /* O `* { margin: 0 }` do reset apaga o `margin: auto` que o <dialog> usa para
     se centralizar. Sem esta linha o modal nasce grudado na quina superior
     esquerda da tela. */
  margin: auto;
  inline-size: min(100% - 2rem, 32rem);
  max-block-size: min(90dvh, 46rem);
  padding: 0;
  border: 0;
  border-radius: var(--reg-raio);
  background: transparent;
  overflow: visible;
}

.modal::backdrop {
  background: color-mix(in srgb, var(--reg-preto) 72%, transparent);
  backdrop-filter: blur(2px);
}

.modal .form-inscricao {
  max-block-size: min(90dvh, 46rem);
  overflow-y: auto;
  margin: 0;
}

/* O X fica na quina do cartão, sobre ele, e tem alvo de 44px como qualquer
   outro controle da página. */
.modal__fechar {
  position: absolute;
  inset-block-start: var(--esp-3);
  inset-inline-end: var(--esp-3);
  z-index: 1;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-content: center;
  border-radius: 50%;
  color: var(--reg-azul-bebe);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.modal__fechar:hover { background: var(--superficie-card); color: var(--reg-branco); }

/* ── Estados de indisponibilidade
   Um controle que não funciona precisa dizer isso antes de ser clicado. Estes
   dois estados existem para o intervalo entre publicar a página e plugar o
   Active, o link do grupo e o da pesquisa — intervalo em que a alternativa é
   um botão mudo que o visitante lê como site quebrado. */
.form__aviso,
.passos__nota {
  display: block;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid currentColor;
  border-radius: var(--reg-raio-pequeno);
  font-size: var(--fs-legenda);
  font-weight: var(--reg-peso-medio);
  line-height: 1.45;
}

.form__aviso[hidden],
.passos__nota[hidden] { display: none; }

.passos__nota { margin-block-start: var(--esp-3); }

/* sobre navy o aviso é azul bebê (11.20:1); sobre claro, navy */
.form__aviso { color: var(--reg-azul-escuro); background: var(--superficie-clara); border-color: transparent; }
.cartao--escuro .form__aviso,
.secao--escuro .form__aviso,
.secao--gradiente .form__aviso,
.secao--gradiente .passos__nota {
  color: var(--reg-azul-bebe);
  background: var(--superficie-card);
}

/* botão desarmado: continua legível e focável, mas não finge ser clicável */
.botao--indisponivel {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.botao--indisponivel:hover { filter: grayscale(0.6); transform: none; box-shadow: none; }

/* ── Cartões e painéis
   Nunca cartão dentro de cartão. */
.cartao {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--linha-clara);
  border-radius: var(--reg-raio);
  background: var(--superficie-elevada);
  box-shadow: var(--sombra-cartao);
}

/* Mesma correção da --sombra-cartao, um degrau mais forte porque este cartão
   pousa sobre o gradiente e não sobre o branco: 0 24px 56px era névoa sem
   contato. */
.cartao--escuro {
  border-color: var(--linha-escura);
  background: color-mix(in srgb, var(--reg-azul-escuro) 82%, var(--reg-preto));
  color: var(--reg-branco);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--reg-preto) 45%, transparent),
              0 10px 15px color-mix(in srgb, var(--reg-preto) 30%, transparent);
}

.painel {
  max-inline-size: 56rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  border-radius: var(--reg-raio);
  background: var(--reg-azul-escuro);
  color: var(--reg-branco);
}

.nota {
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--reg-raio-pequeno);
  background: var(--superficie-clara);
  font-size: var(--fs-legenda);
}

.secao--escuro .nota,
.secao--gradiente .nota {
  background: var(--superficie-card);
  color: var(--texto-fraco-escuro);
}

/* ── Listas com balão */
.lista-balao { display: grid; gap: var(--esp-4); }

.lista-balao > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  align-items: start;
}

.lista-balao .balao { margin-block-start: 0.3em; }
.lista-balao .ico { --ico-tam: 1.75rem; margin-block-start: -0.125rem; }

/* ── Rail de abertura
   Gruda no topo em qualquer largura e leva a faixa de anúncio junto: data,
   horário e bônus acompanham a página inteira, não só a primeira tela.

   O custo no celular é real — a barra grudada come altura útil de leitura. Por
   isso ela encolhe assim que o hero sai da tela: a faixa passa a uma linha
   apertada e o selo dá lugar ao botão. */
.rail {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  background: var(--reg-azul-escuro);
  color: var(--reg-branco);
}

.rail__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-4);
}

/* Faixa de anúncio: a primeira linha da página. Data, hora e o que vem junto,
   antes de qualquer rolagem. Azul bebê sobre o navy médio dá 8.6:1.

   Some no rail compacto: depois do hero a barra grudada tem de ser fina, e a
   informação já foi lida. */
.anuncio {
  padding: var(--esp-2) var(--gutter);
  background: var(--reg-azul-medio);
  color: var(--reg-azul-bebe);
  font-size: var(--fs-legenda);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.anuncio b { color: var(--reg-branco); font-weight: var(--reg-peso-titulo); }

/* No compacto a faixa continua, mais apertada: é ela que tem de acompanhar a
   rolagem, e a barra grudada não pode crescer enquanto a pessoa lê. */
.rail--compacto .anuncio {
  padding-block: var(--esp-1);
  font-size: 0.8125rem;
}

.rail--compacto .rail__grid { padding-block: var(--esp-3); }
.rail--compacto .marca--rail { width: clamp(7.5rem, 6rem + 4vw, 9.5rem); }

.rail__logo { display: block; line-height: 0; }

.rail__grid--solo { justify-content: center; }

/* O CTA do rail só entra quando o hero — e o formulário que vive nele — saem
   da tela. Enquanto o formulário está visível, um segundo botão apontando para
   ele seria ruído. O main.js liga isso com IntersectionObserver. */
.rail__cta {
  min-height: 2.75rem;
  padding-inline: var(--esp-5);
  font-size: var(--fs-eyebrow);
}

.rail:not(.rail--compacto) .rail__cta { display: none; }
.rail--compacto .selo-data { display: none; }



/* ── Chip
   Fato solto, do tamanho de uma etiqueta: data, hora, canal. Substitui três
   linhas de lista por uma faixa que se lê de relance — e no celular economiza
   a altura que a primeira tela não tem para dar. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--linha-escura);
  border-radius: var(--reg-raio-pequeno);
  background: var(--superficie-card);
  font-size: var(--fs-legenda);
  line-height: 1.3;
}

.chip b { color: var(--reg-branco); font-weight: var(--reg-peso-titulo); }

.chips { display: flex; flex-wrap: wrap; gap: var(--esp-3); }

/* ── Barra de credenciais
   Quem assina a aula, numa linha só, logo abaixo da promessa. É a prova que o
   hero devia carregar e que antes ocupava dois itens de lista. */
/* Tarja entre o hero e a primeira dobra: faixa inteira, cor própria, uma linha
   de altura, deslizando devagar.

   Como funciona: a lista é escrita uma vez no HTML e duplicada pelo JS. As duas
   cópias andam juntas 50% para a esquerda e a animação recomeça — como a
   segunda cópia entra exatamente onde a primeira saiu, o corte é invisível e a
   faixa parece infinita. A cópia é `aria-hidden`: quem usa leitor de tela ouve
   os dois nomes uma vez, não duas.

   Movimento é preferência, não decisão nossa: em `prefers-reduced-motion` a
   faixa para e vira uma linha estática. E ela para no hover e no foco, porque
   ninguém consegue ler — nem clicar — um texto que foge. */
.tarja {
  background: var(--reg-azul-medio);
  color: var(--reg-branco);
  overflow: hidden;
}

.tarja__trilho {
  display: flex;
  inline-size: max-content;
  animation: tarja-desliza 38s linear infinite;
}

.tarja:hover .tarja__trilho,
.tarja:focus-within .tarja__trilho { animation-play-state: paused; }

@keyframes tarja-desliza {
  from { translate: 0 0; }
  to   { translate: -50% 0; }
}

.credenciais {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2) var(--esp-5);
  padding-block: var(--esp-4);
  padding-inline-end: var(--esp-5);
  font-size: var(--fs-legenda);
  color: var(--reg-azul-bebe);
  white-space: nowrap;
}

.credenciais__rotulo {
  font-size: var(--fs-eyebrow);
  font-weight: var(--reg-peso-titulo);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--reg-azul-bebe);
  opacity: 0.75;
}

.credenciais b { color: var(--reg-branco); font-weight: var(--reg-peso-titulo); }

/* ── Citação com barra
   Uma frase que fecha um argumento. A barra à esquerda é o único filete
   colorido da página, e existe porque a frase precisa parar o olho sem virar
   um cartão dentro de outro. */
.citacao {
  border-inline-start: 1px solid var(--reg-azul-claro);
  padding-inline-start: var(--esp-5);
}

.citacao p { margin-block-start: var(--esp-2); color: var(--texto-fraco-claro); }

.secao--escuro .citacao p,
.secao--gradiente .citacao p { color: var(--texto-fraco-escuro); }

/* ── Destaque
   Caixa de prova: a trajetória que sustenta o argumento da seção. Azul bebê
   com texto navy (11.20:1) — o único fundo colorido da marca que aceita
   texto escuro com folga. */
.destaque {
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border-radius: var(--reg-raio);
  background: var(--reg-azul-bebe);
  color: var(--reg-azul-escuro);
}

.destaque b { font-weight: var(--reg-peso-titulo); }

/* ── Selo de data
   Cartório sela documento. O selo aqui é a data da aula, e é um botão: abre o
   modal de inscrição. Por isso ele pode usar o amarelo — a regra da marca é
   "laranja só no botão", e este é um. Rótulo navy, como manda o contraste
   (branco sobre laranja reprova).

   Ele e o .rail__cta nunca aparecem juntos: um é o estado de topo, o outro o
   estado compacto. Não há dois botões amarelos na mesma barra. */
.selo-data {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 2.75rem;
  padding-block: var(--esp-2);
  padding-inline: var(--esp-4);
  border: 0;
  border-radius: var(--reg-raio-botao);
  background: var(--reg-gradiente-cta);
  color: var(--reg-texto-sobre-cta);
  font-size: var(--fs-eyebrow);
  font-weight: var(--reg-peso-titulo);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--reg-azul-escuro) 24%, transparent);
  transition: filter var(--dur-rapido) var(--ease), transform var(--dur-rapido) var(--ease);
}

.selo-data:hover { filter: brightness(1.05); transform: translateY(-1px); }
.selo-data b { color: inherit; }

/* O selo é um <a> para o #form-topo, não uma etiqueta. Sem estado ele era lido
   como legenda decorativa — e no celular chegou a ser o único alvo tocável da
   primeira tela. O véu de azul bebê sobe de 12% para 22% e a borda de 45% para
   75%: mais matéria, nenhuma cor nova, e o texto continua azul bebê sobre navy. */
.selo-data {
  transition: background-color var(--dur-rapido) var(--ease),
              border-color var(--dur-rapido) var(--ease);
}

/* ── Slot de foto
   Toda foto entra em duotone navy (o tratamento da página 12 do guia). */
.foto-slot {
  border-radius: var(--reg-raio);
  background: color-mix(in srgb, var(--reg-azul-escuro) 92%, var(--reg-preto));
  aspect-ratio: 4 / 5;
}

.foto-slot > img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Sem foto ainda: o slot vira placeholder legível em vez de buraco branco.

   O texto fica em camada absoluta, e não no fluxo: no fluxo, uma legenda mais
   comprida ("Foto · Catarina Marino") quebrava em mais linhas que a curta e
   empurrava o slot para além do aspect-ratio — dois retratos lado a lado
   saíam de tamanhos diferentes. Absoluto, a legenda nunca decide a altura. */
.foto-slot--vazio {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--esp-2);
  padding: var(--esp-5);
  border: 1px dashed color-mix(in srgb, var(--reg-azul-bebe) 40%, transparent);
  color: var(--reg-azul-bebe);
  text-align: center;
}

.foto-slot--vazio > * {
  position: absolute;
  inset-inline: var(--esp-4);
  inset-block-start: 50%;
  translate: 0 -50%;
  text-align: center;
}

/* ── Pesquisa em etapas (página de obrigado)
   Uma pergunta por tela. A etapa ativa é a única no fluxo; as outras saem com
   `display: none`, o que também as tira da ordem de tabulação — quem navega por
   teclado não passeia por 15 perguntas escondidas.

   `html.js` é posto por um script inline no <head>, antes do primeiro paint.
   Sem JavaScript a classe nunca entra, nenhuma etapa é escondida e a pesquisa
   vira um formulário corrido — mais longo, mas inteiro e funcional. */
html.js .form-pesquisa .etapa:not(.etapa--ativa) { display: none; }

.form-pesquisa { display: grid; gap: var(--esp-5); }

.etapas__topo { display: grid; gap: var(--esp-2); }
.etapas__topo[hidden] { display: none; }

.progresso {
  block-size: 0.375rem;
  border-radius: 999px;
  background: var(--superficie-clara);
  overflow: hidden;
}

.progresso__preenchimento {
  display: block;
  block-size: 100%;
  inline-size: var(--progresso, 0%);
  border-radius: inherit;
  background: var(--reg-azul-claro);
  transition: inline-size var(--dur-medio) var(--ease);
}

.pergunta { border: 0; padding: 0; margin: 0; min-inline-size: 0; }

/* legend não aceita display:grid de forma confiável; o título vira bloco. */
.pergunta__titulo { display: block; padding: 0; }
.pergunta__apoio { margin-block-start: var(--esp-2); color: var(--texto-fraco-claro); font-size: var(--fs-legenda); }

.opcoes { display: grid; gap: var(--esp-3); margin-block-start: var(--esp-5); }

/* A opção inteira é o alvo, não o círculo de 18px: 3.25rem de altura, o mesmo
   piso dos campos do formulário de inscrição. */
.opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  align-items: center;
  min-block-size: 3.25rem;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--linha-clara);
  border-radius: var(--reg-raio-pequeno);
  background: var(--superficie-elevada);
  cursor: pointer;
  transition: border-color var(--dur-rapido) var(--ease),
              background-color var(--dur-rapido) var(--ease);
}

.opcao:hover { border-color: var(--reg-azul-claro); }

.opcao input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--reg-azul-escuro); margin: 0; }

/* O anel de foco vive no rótulo, não no rádio de 18px: o alvo visível é a
   caixa inteira, e é ela que precisa mostrar onde o teclado está. */
.opcao:has(input:focus-visible) {
  outline: 3px solid var(--reg-azul-escuro);
  outline-offset: 2px;
}

.opcao:has(input:checked) {
  border-color: var(--reg-azul-escuro);
  background: var(--superficie-clara);
}

.etapas__nav { display: flex; gap: var(--esp-3); }
.etapas__nav[hidden] { display: none; }
.etapas__nav .botao { flex: 1; }

.pesquisa__intro { margin-block: var(--esp-4) var(--esp-6); }

/* Fim da pesquisa: a seção inteira sai e o agradecimento reaparece no topo do
   bloco do grupo, que é o que ainda falta fazer. */
.pesquisa[hidden] { display: none; }

.grupo__recebido {
  margin-block-end: var(--esp-7);
  padding-block-end: var(--esp-6);
  border-block-end: 1px solid var(--linha-escura);
}

.grupo__recebido[hidden] { display: none; }
.grupo__recebido p + p { margin-block-start: var(--esp-3); color: var(--texto-fraco-escuro); }

/* ── Grupo de WhatsApp (página de obrigado)
   O selo só aparece depois da pesquisa respondida: antes dela o grupo está na
   página, mas não se anuncia como o próximo passo. */
.grupo__selo {
  display: block;
  margin-block-end: var(--esp-4);
  color: var(--reg-azul-bebe);
}

.grupo__selo[hidden] { display: none; }

.grupo__acao { margin-block-start: var(--esp-6); }

/* ── Passos numerados (página de obrigado) */
.passos { display: grid; gap: var(--esp-5); counter-reset: passo; }

.passos > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-4);
  align-items: start;
  counter-increment: passo;
}

.passos > li::before {
  content: counter(passo);
  display: grid;
  place-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--reg-azul-claro);
  color: var(--reg-azul-escuro);
  font-weight: var(--reg-peso-titulo);
}

.passos__titulo { margin-block-end: var(--esp-2); }
.passos__acao { margin-block-start: var(--esp-4); }

/* ── Rodapé */
.rodape {
  padding-block: var(--esp-7);
  background: var(--reg-azul-escuro);
  color: var(--reg-azul-bebe);
  text-align: center;
}

/* Os dois links legais mediam 150x17 e 98x17 e ficavam colados, separados por um
   "·" — abaixo do mínimo de 24x24 do SC 2.5.8 e sem folga entre um alvo e outro.
   Agora cada um é uma caixa de 2.75rem, a mesma altura de alvo que o .selo-data
   usa para link secundário, com esp-5 de folga entre eles. O separador saiu: com
   44px de altura e 24px de intervalo, o espaço já separa.
   A margem própria zera porque o padding interno do alvo passou a ser a folga
   ótica que o esp-3 dava — sem isso o rodapé abriria um buraco de 25px. */
.rodape__legais {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--esp-5);
  font-size: var(--fs-legenda);
}

.rodape__legais a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--esp-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.rodape > .wrap > * + * { margin-block-start: var(--esp-3); }

/* O alvo de 2.75rem já embute ~13px acima do texto; somar esp-3 abriria um vão
   de 25px entre a linha de copyright e os links. */
.rodape > .wrap > .rodape__legais { margin-block-start: 0; }

/* ── Skip link */
.pular-para-conteudo {
  position: fixed;
  z-index: 10;
  inset-block-start: var(--esp-3);
  inset-inline-start: var(--esp-3);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--reg-raio-pequeno);
  background: var(--reg-branco);
  color: var(--reg-azul-escuro);
  font-weight: var(--reg-peso-titulo);
  text-decoration: none;
  translate: 0 -150%;
  transition: translate var(--dur-rapido) var(--ease);
}

.pular-para-conteudo:focus-visible { translate: 0 0; }

/* ═══ 07 SEÇÕES ════════════════════════════════════════════════════════════
   S0 rail · S1 hero · S2 por que agora · S3 é para você · S4 o que você
   entende · S5 quem conduz · S6 fechamento · S7 rodapé
   ═════════════════════════════════════════════════════════════════════════ */

/* ── S1 · Hero */

/* O rail e o hero são a mesma superfície navy (ver a Regra da Emenda
   Invisível): o --pad-secao de 64px no topo não separa duas seções, abre um vão
   entre a pílula de data e a headline. No celular esse vão é 8% da primeira
   tela. Fica em esp-6 até 40em e volta ao --pad-secao acima disso, onde a
   página tem altura de sobra. */
/* O hero é a foto. A camada de cor por cima existe porque texto branco sobre
   fotografia crua não tem contraste garantido em canto nenhum: o degradê fecha
   em navy quase opaco à esquerda, onde mora a headline, e abre à direita, onde
   só há imagem. Sem a foto no lugar, o degradê sozinho entrega o mesmo navy de
   antes — a página não quebra enquanto o arquivo não chega.

   TODO(7): salvar o retrato em /assets/img/hero-fundo.jpg (recorte largo, as
   duas à direita do quadro, 2000px de largura). O url() abaixo já aponta para
   ele; enquanto o arquivo não existir o navegador ignora essa camada. */
.hero {
  padding-block: var(--esp-7) var(--esp-8);
  background-image:
    linear-gradient(100deg,
      color-mix(in srgb, var(--reg-azul-escuro) 88%, transparent) 0%,
      color-mix(in srgb, var(--reg-azul-escuro) 72%, transparent) 38%,
      color-mix(in srgb, var(--reg-azul-escuro) 10%, transparent) 62%,
      transparent 100%),
    url("/assets/img/hero-fundo.jpg"),
    var(--reg-gradiente-azul);
  background-size: cover, cover, cover;
  background-position: center, right center, center;
  background-repeat: no-repeat;
}

/* Uma coluna: promessa, fatos, formulário. O retrato saiu do cartão ao lado e
   virou o fundo da seção inteira. */
.hero__grid { display: grid; gap: var(--esp-6); }

/* A coluna de leitura, não o wrap: .hero__grid é o próprio .wrap, e limitar a
   largura dele fazia o margin-inline:auto centralizar o hero inteiro. */
.hero__texto { max-inline-size: 46rem; }

.hero__subhead { margin-block-start: var(--esp-5); max-inline-size: 40rem; }

/* Nome da campanha acima da headline. Não é o eyebrow genérico que a página
   recusa em todo o resto: carrega o balão da marca, é o único texto da página
   que nomeia a campanha, e some do fluxo de leitura em uma linha. */
.campanha {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-block-end: var(--esp-5);
  font-size: var(--fs-eyebrow);
  font-weight: var(--reg-peso-titulo);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--reg-azul-bebe);
}

.hero__chips { margin-block-start: var(--esp-6); }

/* Os quatro fatos cabem numa linha só até 60em para baixo? Não. Então cada chip
   para de quebrar por dentro (`nowrap`) e a faixa rola na horizontal no celular
   em vez de virar duas ou três fileiras desalinhadas. Acima de 60em os quatro
   entram lado a lado. */
.hero__chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-block-end: var(--esp-2);
  scrollbar-width: none;
}

.hero__chips::-webkit-scrollbar { display: none; }
.hero__chips .chip { flex: none; white-space: nowrap; }

/* O formulário desceu para debaixo dos fatos: a ordem virou promessa → quando,
   onde, o que vem junto → inscrição. Largura própria, para não esticar os
   campos pela largura da seção. */
.hero__form {
  max-inline-size: 34rem;
  margin-block-start: var(--esp-6);
}

/* O botão-âncora do hero deixou de existir: ele era o paliativo para o
   formulário morar na coluna de fora, longe da primeira tela do celular. Com o
   formulário logo abaixo dos chips, o caminho para a inscrição é o próprio
   formulário, e um botão que rola 200px até ele seria um desvio. */

.hero__essenciais {
  display: grid;
  gap: var(--esp-3);
  margin-block-start: var(--esp-6);
  padding-block-start: var(--esp-6);
  border-block-start: 1px solid var(--linha-escura);
}

.hero__essenciais .balao { margin-block-start: 0.25em; }

.hero__destaque { color: var(--reg-branco); font-weight: var(--reg-peso-titulo); }

/* ── S2 · Por que agora
   O prédio do CNJ ao fundo: é o órgão que suspendeu os editais, e a seção
   inteira fala dele. A imagem já vem clareada na origem (alfa de ~20%), e foi
   achatada sobre o #F5FAFF desta seção na hora de virar JPEG — por isso ela
   depende deste fundo continuar sendo o branco da marca.

   Contraste medido no pior pixel contra o texto navy: 8.98:1, AAA. Ancorada
   embaixo e à direita, onde está o prédio; o texto ocupa a metade esquerda,
   que na foto é céu quase liso. */
.agora {
  background-image: url("/assets/img/cnj-fundo.jpg");
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.agora__abertura { max-inline-size: var(--largura-prosa); }

/* A frase que vira a chave do argumento. Agora com a barra da .citacao: ela
   fecha a seção em vez de flutuar entre dois blocos de texto. */
.agora__frase {
  font-size: var(--fs-h2);
  font-weight: var(--reg-peso-titulo);
  line-height: 1.15;
  color: inherit;
}

.agora__citacao { margin-block-start: var(--esp-7); }

.agora__grid {
  display: grid;
  gap: var(--esp-5);
  margin-block-start: var(--esp-6);
}

/* Título curto de cartão: o rótulo do fato, não uma frase. */
.cartao__rotulo {
  margin-block-end: var(--esp-2);
  font-size: var(--fs-h3);
  font-weight: var(--reg-peso-titulo);
  line-height: 1.2;
}

/* ── S3 · É para você */
/* esp-5, o mesmo gap do .agora__grid. Com esp-4 as quatro molduras encostavam
   e liam como uma lista de duas colunas; o afastamento é metade do trabalho de
   fazer cada situação ler como um objeto. */
.publico__grid {
  display: grid;
  gap: var(--esp-5);
  margin-block-start: var(--esp-7);
}

.publico__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-4);
  align-items: center;
  padding: var(--esp-5);
  border: 1px solid var(--linha-escura);
  border-radius: var(--reg-raio);
  background: var(--superficie-card);
}

/* No cartão das quatro situações o ícone é um dos dois elementos da caixa, não
   um marcador de linha: fica centrado no eixo do bloco de texto (o
   `align-items: center` acima), sem deslocamento manual. 2rem em vez de 1.5
   porque o cartão tem folga e o ícone carrega o assunto. */
.publico__item .ico { --ico-tam: 2rem; }

/* A caixa de prova precisa desencostar dos cards: colada nela vira a quinta
   situação da grade, e ela é a resposta às quatro, não mais uma. */
.publico__destaque { margin-block-start: var(--esp-7); }

.publico__catarina {
  display: grid;
  gap: var(--esp-6);
  margin-block-start: var(--esp-7);
  align-items: center;
}

/* A coluna de texto herdava os 802px da grade e rodava a 84 caracteres por
   linha (71ch) — contra 73 do .agora__abertura, que é prosa da mesma página e
   já vive em 44rem. Mesma medida nos dois: a largura de prosa do sistema. */
.publico__catarina .prosa { max-inline-size: var(--largura-prosa); }

/* ── S4 · O que você vai entender */
.pauta { display: grid; gap: var(--esp-6); margin-block-start: var(--esp-7); }

.pauta__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-4);
  align-items: start;
}

.pauta__numero {
  display: grid;
  place-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--reg-raio-pequeno);
  background: var(--superficie-clara);
  color: var(--reg-azul-escuro);
  font-size: var(--fs-h3);
  font-weight: var(--reg-peso-titulo);
}

.pauta__item p { margin-block-start: var(--esp-2); color: var(--texto-fraco-claro); }

/* ── S5 · Quem conduz */
.conduz__grid { display: grid; gap: var(--esp-6); margin-block-start: var(--esp-7); }

/* Um retrato por professora, em retrato mesmo (3:4): rosto isolado lê melhor
   que dois rostos num recorte largo, e é o que a dobra promete — quem conduz,
   uma de cada vez. */
.conduz__figura {
  aspect-ratio: 3 / 4;
  border-radius: var(--reg-raio);
  overflow: hidden;
  margin-block-end: var(--esp-5);
}

.conduz__pessoa {
  padding: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  border: 1px solid var(--linha-escura);
  border-radius: var(--reg-raio);
  background: var(--superficie-card);
}

.conduz__papel {
  margin-block-start: var(--esp-1);
  color: var(--reg-azul-bebe);
}

.conduz__texto { margin-block-start: var(--esp-4); color: var(--texto-fraco-escuro); }

/* ── S6 · Fechamento */
/* Coluna única e centrada. Como grid de duas colunas o botão ficava sozinho
   numa faixa de 24rem, alinhado ao topo, sem relação com a lista ao lado —
   parecia solto porque estava. Agora ele fecha a leitura, no eixo dela. */
.fechamento__grid {
  display: grid;
  gap: var(--esp-6);
  justify-items: center;
  max-inline-size: var(--largura-prosa);
  margin-inline: auto;
}

.fechamento__lista { text-align: start; }

.fechamento__lista { margin-block-start: var(--esp-6); }

/* ── Página de obrigado */
.confirma__acao { margin-block-start: var(--esp-6); }
.confirma__acao[hidden] { display: none; }

.confirma__topo { max-inline-size: var(--largura-prosa); margin-inline: auto; }

/* os passos herdam a largura de prosa: linha longa demais em tela cheia faz o
   leitor perder a volta entre uma instrução e outra */
.confirma__passos {
  max-inline-size: var(--largura-prosa);
  margin-block-start: var(--esp-8);
  margin-inline: auto;
  text-align: start;
}

/* ═══ 08 UTILITÁRIOS ═══════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══ 09 RESPONSIVO E PREFERÊNCIAS ═════════════════════════════════════════
   Mobile-first. Todos os breakpoints moram aqui, em em.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 40em / 640px */
@media (min-width: 40em) {
  .publico__grid { grid-template-columns: repeat(2, 1fr); }
  .agora__grid   { grid-template-columns: repeat(2, 1fr); }
  /* Sem `align-items: start`: os dois cartões esticam até a altura da linha e
     ficam do mesmo tamanho, mesmo que o texto de um seja mais curto que o do
     outro. Sobra espaço no menor, e é o certo — duas pessoas apresentadas lado
     a lado não podem ter pesos diferentes por causa do comprimento da bio. */
  .conduz__grid  { grid-template-columns: repeat(2, 1fr); }

  /* Daqui para cima a primeira tela não está no limite e o rail sobra em
     largura: os dois recuos do celular voltam ao valor cheio. */
  .hero { padding-block-start: var(--pad-secao); }
  .selo-data { padding-inline: var(--esp-5); }
}

/* ── 60em / 960px */
@media (min-width: 60em) {
  .agora__grid { grid-template-columns: repeat(3, 1fr); }

  .publico__catarina { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }



  .pauta { grid-template-columns: repeat(2, 1fr); gap: var(--esp-7); }
}

/* ── 80em / 1280px */
@media (min-width: 80em) {
  .marca-dagua { inline-size: 44rem; }
}

/* ── Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* a faixa para e vira uma linha comum, que rola na horizontal se precisar */
  .tarja { overflow-x: auto; }
  .tarja__trilho { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .botao:hover { transform: none; }
}

/* ── Contraste aumentado
   Sobe as hairlines e apaga as marcas d'água: elas vivem de opacidade baixa,
   que é exatamente o que este modo pede para não existir. */
@media (prefers-contrast: more) {
  :root {
    --linha-clara:  color-mix(in srgb, var(--reg-azul-escuro) 45%, transparent);
    --linha-escura: color-mix(in srgb, var(--reg-branco) 45%, transparent);
    --texto-fraco-claro: var(--reg-azul-escuro);
  }
  .marca-dagua { display: none; }
  /* fundo fotográfico vira cor chapada: o modo existe para tirar ruído de trás
     do texto */
  .agora { background-image: none; }
  .divisor span { opacity: 0.7; }
}