/* ═══════════════════════════════════════════════════════════════════════════
   CP Iuris — LP Cursos em PDF 2026
   Captura (index.html) + Obrigado (obrigado.html)

   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, .visivel).
   O prefixo cp- pertence às classes que já vêm de tokens.css (.cp-duotone*) e
   não é renomeado.

   As variáveis --cp-* vêm de tokens.css e NUNCA são redeclaradas aqui.
   ═══════════════════════════════════════════════════════════════════════════ */


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

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

* { margin: 0; }

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

body {
  min-height: 100svh;
  background: var(--cp-azul);
  color: var(--cp-branco);
  font-family: var(--cp-fonte);
  font-size: var(--fs-corpo);
  font-weight: var(--cp-peso-corpo);
  line-height: 1.65;
  letter-spacing: var(--cp-tracking-corpo);
  -webkit-font-smoothing: antialiased;
}

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

/* Precisa vir depois da regra acima e com !important: `svg { display: block }`
   é regra de autor e vence o `[hidden] { display: none }` da folha do
   navegador, o que faria o sprite <svg hidden> ocupar espaço no topo da
   página. */
[hidden] { display: none !important; }

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

button { background: none; border: 0; }

ul, ol { padding: 0; }

a { color: inherit; }

/* Títulos e corpo: quebra equilibrada nos títulos, sem viúvas no corpo.
   hyphens fica desligado — palavra jurídica quebrada no meio atrapalha a
   leitura em diagonal, que é como esta página é lida. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; hyphens: none; }

/* Âncoras dos CTAs intermediários: o formulário-alvo não pode encostar no topo
   da viewport nem ficar atrás do rail. */
:target { scroll-margin-block-start: 6rem; }

/* Foco visível. O laranja é o anel padrão; dentro do campo laranja e nos
   botões invertidos ele desapareceria, então esses dois casos usam
   currentColor — ver bloco 06. */
:focus-visible {
  outline: 3px solid var(--cp-laranja);
  outline-offset: 3px;
}


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

:root {

  /* ── Escala tipográfica ──────────────────────────────────────────────────
     Derivada da hierarquia impressa 72 / 36 / 30 pt do brand guide. As razões
     do guia são 2,4 (título/corpo) e 1,2 (subtítulo/corpo). Uma escala modular
     de razão 1,25 ancorada em corpo 18px reproduz as duas: 1,25^4 = 2,4414.  */

  /* O teto do display é 44px e não 48px por causa da própria headline: são 84
     caracteres, e Montserrat 800 gasta ~0.8em por caractere. A 48px em 36rem a
     frase caía em 6 linhas — uma parede. 44px em 42rem fecha em 5. */
  --fs-display:   clamp(2rem, 1.7rem + 1.25vw, 2.75rem);        /* 32 → 44 */
  /* 36px de teto, não 44: com os dois em 2.75rem o h1 da página e todo h2 de
     seção ficavam do MESMO tamanho acima de ~1173px, separados só pelo peso
     (800 vs 700) — hierarquia em lama. 44/36/30 é a própria escada impressa do
     guia (72/36/30 reduzida para tela). */
  --fs-h2:        clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);   /* 26 → 36 */
  /* Teto de 26px e não 30: quando o h2 desceu de 44 para 36, um h3 parado em 30
     deixou o degrau em 1,20 — título de seção e título de item liam quase do
     mesmo tamanho, no mesmo peso 700. A 26px o degrau volta a 1,38. */
  --fs-h3:        clamp(1.25rem, 1.1rem + .6vw, 1.625rem);     /* 20 → 26 */
  --fs-lead:      clamp(1.0625rem, .95rem + .47vw, 1.375rem);  /* 17 → 22 */
  --fs-corpo:     clamp(1rem, .955rem + .19vw, 1.125rem);      /* 16 → 18 */
  /* Alias, de propósito. Havia três corpos de texto — 18, 20 e 22 — e o degrau
     de 18 para 20 é 11%: invisível, e o que sobra é mancha. Agora só existem
     dois: corpo (18) e lead (22). O token continua nos seletores para não
     espalhar a mudança por doze regras. */
  --fs-corpo-lg:  var(--fs-corpo);
  --fs-botao:     clamp(.875rem, .83rem + .19vw, 1rem);        /* 14 → 16 */
  --fs-eyebrow:   clamp(.6875rem, .64rem + .19vw, .8125rem);   /* 11 → 13 */
  --fs-legenda:   clamp(.6875rem, .665rem + .09vw, .75rem);    /* 11 → 12 */
  /* Não existe mais --fs-outline. A marca d'água grande deixou de ser texto
     digitado em Montserrat e passou a ser o SVG do logotipo, dimensionado por
     `width` e não por `font-size`. */

  /* Tracking positivo em eyebrow e botão é deliberado, não descuido.
     A regra -0.025em do guia vale para título e subtítulo em corpo grande.
     Montserrat 700 em 11–16px caixa alta com tracking negativo fecha as
     contraformas e a linha vira mancha; +0.06em e +0.14em são a mesma
     intenção de kerning óptico na outra ponta da escala. NÃO "corrigir". */
  --tracking-eyebrow: .14em;
  --tracking-botao: .06em;
  --tracking-display: -.03em;
  --tracking-xl: -.035em;

  /* ── Espaço, base 4px ──────────────────────────────────────────────────── */
  --esp-1: .25rem;  --esp-2: .5rem;   --esp-3: .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;        /* 1200 — o container */
  --largura-prosa: 44rem;      /* 704  — coluna de leitura */
  --largura-estreita: 38rem;   /* 608  — ~67ch, a medida do corpo de texto */
  --gutter: clamp(1.25rem, 1rem + 1.2vw, 2.5rem);

  /* Distância da borda do .wrap até a borda da viewport, negativa. Usada para
     sangrar a foto do professor. 100vw inclui a barra de rolagem, então o
     valor pode passar alguns pixels — as seções que sangram têm overflow:clip,
     e passar é o lado seguro do erro. */
  --fuga: calc((var(--gutter) + max(0px, (100vw - var(--largura-max)) / 2)) * -1);

  /* ── Movimento ─────────────────────────────────────────────────────────── */
  --dur-rapido: 160ms;
  --dur-medio: 320ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ── Papéis de cor derivados ────────────────────────────────────────────
     O cinza #757575 do guia reprova AA em corpo de texto (3,56:1 sobre navy,
     4,25:1 sobre claro), então tem ZERO usos nesta pasta. Os secundários saem
     de color-mix sobre a própria cor de fundo e passam AAA:
       azul 78% sobre branco   ≈ #4A4D65 → 7,62:1
       branco 78% sobre azul   ≈ #B5B9C8 → 8,39:1                            */

  --texto-fraco-claro:  color-mix(in srgb, var(--cp-azul) 78%, var(--cp-branco));
  --texto-fraco-escuro: color-mix(in srgb, var(--cp-branco) 78%, var(--cp-azul));

  --linha-clara:  color-mix(in srgb, var(--cp-azul) 14%, transparent);
  --linha-escura: color-mix(in srgb, var(--cp-branco) 14%, transparent);

  --superficie-card: color-mix(in srgb, var(--cp-branco) 7%, transparent);
  --stroke-outline:  color-mix(in srgb, var(--cp-branco) 22%, transparent);
  --stroke-outline-claro: color-mix(in srgb, var(--cp-azul) 10%, transparent);

  --sombra-cta: 0 8px 24px -8px rgb(254 166 17 / .45);
}


/* ═══ 03 TIPOGRAFIA ═════════════════════════════════════════════════════════
   Os elementos h1..h4 não recebem tamanho: só as classes .t-* dão escala.
   É o que permite um h2 semântico viver no degrau visual de h3 (a seção
   "Esta não é mais uma aulinha batida") sem escolher o nível pelo tamanho.
   ═════════════════════════════════════════════════════════════════════════ */

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

.t-titulo-xl {
  font-size: var(--cp-texto-titulo);      /* 40 → 72 */
  font-weight: var(--cp-peso-display);
  line-height: .95;
  letter-spacing: var(--tracking-xl);
}

.t-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--cp-peso-titulo);
  line-height: 1.1;
  letter-spacing: var(--cp-tracking-titulo);
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--cp-peso-titulo);
  line-height: 1.22;
  letter-spacing: var(--cp-tracking-titulo);
}

.t-lead {
  font-size: var(--fs-lead);
  font-weight: var(--cp-peso-subtitulo);
  line-height: 1.45;
  letter-spacing: -.02em;
}

/* Não existe .t-corpo-lg: quando --fs-corpo-lg virou alias de --fs-corpo, a
   classe passou a ser sinônimo do corpo padrão. Os dois papéis de corpo são
   `.prosa` (18px) e `.t-lead` (22px). */

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

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

/* Mais espaço acima de um título do que abaixo. O primeiro filho de um
   container não ganha margem: o padding da seção já cuida. */
.t-display, .t-h2, .t-h3, .t-titulo-xl { margin-block: var(--esp-8) var(--esp-5); }
.wrap > :first-child,
.painel > :first-child,
.cartao > :first-child,
.fechamento__grid > * > :first-child { margin-block-start: 0; }

/* Coluna de leitura. 38rem ≈ 67ch em Montserrat 18px — dentro da faixa de
   65–75ch onde a linha não perde o olho no retorno. */
.prosa {
  max-width: var(--largura-estreita);
  margin-inline: auto;
  font-size: var(--fs-corpo-lg);
  line-height: 1.7;
}
.prosa > * + * { margin-block-start: 1.15em; }
.prosa + .prosa { margin-block-start: 1.15em; }

.destaque {
  color: var(--cp-laranja);      /* laranja sobre navy = 8,33:1, AAA */
  font-weight: var(--cp-peso-subtitulo);
}


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

.wrap {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;                    /* acima das marcas d'água da seção */
}
.wrap--prosa    { max-width: calc(var(--largura-prosa) + var(--gutter) * 2); }
.wrap--estreita { max-width: calc(var(--largura-estreita) + var(--gutter) * 2); }

.secao {
  padding-block: var(--pad-secao);
  position: relative;
  overflow: clip;                /* prende marca d'água e wordmark sangrados */
}

/* Os seis movimentos de cor da página. */
.secao--gradiente { background: var(--cp-gradiente-azul); color: var(--cp-branco); }
.secao--escuro    { background: var(--cp-azul);           color: var(--cp-branco); }
.secao--claro     { background: var(--cp-branco);         color: var(--cp-azul); }
.secao--acento    { background: var(--cp-gradiente-laranja); color: var(--cp-azul); }
/* Não existe .secao--preto: o sexto movimento é entregue pelo próprio
   `.rodape`, que já pinta #0B0C0C. Uma classe de seção preta sem nenhum uso era
   só código morto convidando alguém a criar um sétimo movimento. */

.centro { text-align: center; }


/* ═══ 05 DISPOSITIVOS DE MARCA ══════════════════════════════════════════════
   Cinco dispositivos, todos contados. Com o texto removido, é o que deixa a
   página identificável como CP Iuris.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── A. Logotipo ────────────────────────────────────────────────────────────
   O <symbol> #ico-logo já resolve as duas cores: "CP" em currentColor,
   símbolo e "IURIS" em var(--cp-laranja). Proporção 3.54:1, medida na
   bounding box real da arte.
   Redução mínima do guia: 115px de largura → 32.5px de altura. O rail usa
   44px (156px de largura) e o rodapé 56px (198px), ambos com folga.         */
.marca {
  aspect-ratio: 883.18 / 249.5;
  width: auto;
  height: 2.75rem;
}
.marca--rodape { height: 3.5rem; margin-inline: auto; }

/* Margem de segurança do guia: a largura da letra "P". No lockup o P mede
   46.45 de 883.18 unidades = 5.26% da largura, o que dá ~8px na altura do
   rail. Nada invade essa área. */
.rail__logo {
  display: inline-block;
  padding: .5rem;
  border-radius: var(--cp-raio-pequeno);
}

/* ── B. Marca d'água grande, o logotipo em contorno ──────────────────────────
   É o logotipo de verdade (#ico-logo-contorno), não "CP IURIS" digitado em
   Montserrat. As letras do logotipo não são Montserrat: escrever o nome com a
   fonte da página produzia uma imitação da marca, com desenho e espacejamento
   diferentes do arquivo oficial — e ainda misturava letra vazada com símbolo
   chapado, porque o texto era text-stroke e o símbolo era fill.
   Aqui tudo é um SVG só: `fill: none` e `stroke` herdam para dentro da shadow
   tree do <use> e desenham a marca inteira em contorno, com uma espessura só.
   O stroke é proporcional ao tamanho (unidades do viewBox, não px), então a
   marca afina junto quando encolhe no mobile, em vez de engrossar. */
.wordmark {
  position: absolute;
  z-index: 0;
  aspect-ratio: 883.18 / 249.5;
  /* Anula o `max-width: 100%` do reset (bloco 01). Sem isto a marca é clampada
     na largura do container: no hero ela pedia 928px e renderizava 415, do
     tamanho da coluna da foto, escondida atrás do formulário. Marca d'água
     existe justamente para ser maior que o container e sangrar. */
  max-width: none;
  pointer-events: none;
  user-select: none;
  fill: none;
  stroke: var(--stroke-outline);
  stroke-width: 2;
}

/* O lockup completo só é usado onde cabe inteiro. Onde um card ou uma foto
   passa por cima dele, entra o símbolo sozinho: 3.54:1 atravessando um card
   opaco produz pedaço de palavra, e o símbolo não tem esse problema. */
.wordmark--simbolo { aspect-ratio: 1; }

/* Posicionada contra a SEÇÃO, então as porcentagens são da largura da viewport:
   a marca cai na faixa vazia à direita da foto e sangra pela borda. */
.wordmark--hero {
  inset-block-end: -12%;
  inset-inline-end: -5%;
  width: min(28rem, 34vw);
  stroke: color-mix(in srgb, var(--cp-branco) 26%, transparent);
}
.wordmark--professor {
  inset-block-start: -12%;
  inset-inline-end: -6%;
  width: min(26rem, 34vw);
  stroke: var(--stroke-outline-claro);
}
/* Na margem esquerda, não atrás do texto. A coluna de leitura tem 44rem
   centralizados, então sobra margem vazia dos dois lados — é ali que a marca
   cabe sem disputar com a mensagem. Posicionada contra a SEÇÃO (ver o
   comentário no HTML), então as porcentagens são da largura da tela. */
/* Só existe a partir de 80em. Abaixo disso a coluna de leitura ocupa quase toda
   a largura e não sobra margem: a marca encostaria no texto da confirmação, que
   é a única coisa que esta página precisa comunicar. Decoração que tem de
   disputar espaço com a mensagem não deve estar lá — sai, e nada se perde. */
.wordmark--confirmacao { display: none; }

@media (min-width: 80em) {
  .wordmark--confirmacao {
    display: block;
    inset-block-start: 14%;
    inset-inline-start: -7%;
    width: min(26rem, 30vw);
    stroke: color-mix(in srgb, var(--cp-branco) 18%, transparent);
  }
}

/* ── C. Losango como tecido conectivo ───────────────────────────────────────
   Uma forma, quatro papéis: marcador de parágrafo, ponto do divisor, selo do
   badge de data e afirmação nas listas. É o único dispositivo de alta
   frequência — é o que dá coesão; os outros quatro são raros por design.    */
.losango-marcador {
  width: .8em;
  aspect-ratio: 1;
  fill: var(--cp-laranja);
  flex: none;
  display: inline-block;
  vertical-align: -.06em;
  margin-inline-end: .45em;
}

.divisor {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-block: var(--esp-7);
}
.divisor::before, .divisor::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .2;
}
.divisor svg {
  flex: none;
  width: .75rem;
  aspect-ratio: 1;
  fill: var(--cp-laranja);
}

/* Afirmação. O docx pedia checkmark verde: verde está no brand guide apenas
   como exemplo de cor PROIBIDA, e o emoji ✅ entra em #78C351 pela fonte de
   emoji do sistema — cor fora da paleta e fora do Montserrat. O losango do
   logotipo faz o mesmo trabalho dentro da paleta.
   O losango herda `fill` e o check herda `stroke`. São duas propriedades
   herdadas, então esta única regra atravessa a shadow tree do <use> e
   controla as duas cores. */
.check {
  width: 1.75rem;
  aspect-ratio: 1;
  flex: none;
  fill: var(--cp-laranja);
  stroke: var(--cp-azul);
}
/* Inversão obrigatória: losango laranja sobre o campo laranja desapareceria. */
.secao--acento .check { fill: var(--cp-azul); stroke: var(--cp-laranja); }

/* ── D. Corte de canto ─────────────────────────────────────────────────────
   Todo card e todo recorte de foto perde o mesmo canto, sempre o superior
   direito. Botões nunca recebem o corte: é o que impede que sejam lidos como
   card. */
.corte {
  border-radius: var(--cp-raio);
  border-start-end-radius: 0;
}

/* ── E. Marca d'água do símbolo ─────────────────────────────────────────────
   Substitui a silhueta fantasma da referência por algo que só pode ser CP
   Iuris. Sempre sangrando por uma borda, sempre com rotação leve.           */
.marca-dagua {
  position: absolute;
  z-index: 0;
  width: clamp(15rem, 34vw, 32.5rem);
  aspect-ratio: 1;
  pointer-events: none;
  fill: currentColor;
  opacity: .04;
}
.marca-dagua--esq { inset-block-start: 10%; inset-inline-start: -9%; rotate: -8deg; }
.marca-dagua--dir { inset-block-end: 6%;   inset-inline-end: -11%;  rotate: 6deg; }
.marca-dagua--rodape {
  inset-block-start: 12%;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: min(26rem, 70vw);
  rotate: -5deg;
  opacity: .03;
}

/* Filete laranja de 4px. Aparece EXATAMENTE duas vezes na captura e uma vez na
   obrigado, e cada uma tem um trabalho: abrir a página no topo do rail, e
   marcar a "QUEBRA DE COR" que o documento de copy do cliente pede na emenda
   S2→S3 (ver `.dilema::before`, bloco 07). Não apague nenhuma das duas
   pensando que é duplicata. */
.rail__filete {
  height: 4px;
  background: var(--cp-gradiente-laranja);
}


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

/* ── Botões ─────────────────────────────────────────────────────────────────
   Alvo mínimo 56px de altura; o grande vai a 64px. Rótulo do botão laranja é
   SEMPRE azul ou preto: branco sobre laranja dá 1,81:1 e é reprovado.       */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 3.5rem;
  padding-inline: var(--esp-6);
  border-radius: var(--cp-raio-pequeno);
  font-size: var(--fs-botao);
  font-weight: var(--cp-peso-titulo);
  letter-spacing: var(--tracking-botao);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  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(--cp-gradiente-laranja); color: var(--cp-azul); }
.botao--bloco   { width: 100%; }
.botao--grande  { min-height: 4rem; font-size: 1.125rem; }

.botao:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: var(--sombra-cta);
}
.botao:active { transform: translateY(0); filter: brightness(.97); }
.botao[disabled], .form-inscricao.enviando .botao {
  opacity: .55;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}
/* O anel laranja padrão desapareceria sobre o campo laranja: ali currentColor
   é o navy do texto. Dentro do card navy que mora nesse campo o anel volta a
   ser laranja, que contra navy dá 8,33:1. */
.secao--acento :focus-visible { outline-color: currentColor; }
.secao--acento .cartao--inverso :focus-visible { outline-color: var(--cp-laranja); }

/* .cta-satelite foi removida. Era uma microlinha em caixa alta ("19/08 · 20h ·
   ao vivo") logo acima do CTA de S3 — invenção minha, não copy do cliente, e o
   piso de qualidade proíbe rótulo em caixa alta acima de um elemento que já
   fala por si. A data já vive no badge do rail e no h2 do programa.
   O espaço que ela carregava tinha que voltar: com `* { margin: 0 }` no reset,
   remover a microlinha deixou o botão a ~18px da última linha da prosa. */
.dilema .prosa + .centro { margin-block-start: var(--esp-7); }

/* ── Campos e formulário ────────────────────────────────────────────────────
   Label sempre visível, nunca placeholder: placeholder desaparece ao digitar
   e leva embora a única pista do que era o campo.
   Input claro sobre card escuro é intencional — dá contraste máximo e evita o
   autofill que os navegadores pintam por cima de input escuro.             */
.form-inscricao { display: grid; gap: var(--esp-4); }

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

/* Campo opcional é dito, não deixado no ar: sem marcação a pessoa assume que
   tudo é obrigatório e o formulário cobra um atrito que não existe. Em caixa
   baixa e peso normal para não competir com o rótulo. */
.campo__opcional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--cp-peso-corpo);
  opacity: .62;
}

.campo__entrada {
  width: 100%;
  min-height: 3.5rem;
  padding-inline: var(--esp-4);
  background: var(--cp-branco);
  color: var(--cp-azul);
  border: 1px solid transparent;
  border-radius: var(--cp-raio-pequeno);
  font-size: 1rem;
}
/* O select herda a caixa do input e troca a seta nativa por uma em navy — a
   nativa vem cinza do sistema operacional e é a única peça de chrome que
   escaparia da paleta. `appearance: none` obriga a desenhar a nossa.
   padding-inline-end de 2.75rem abre o lugar da seta: sem isso o texto da opção
   mais longa passa por baixo dela. */
.campo__select {
  width: 100%;
  min-height: 3.5rem;
  padding-inline: var(--esp-4) 2.75rem;
  background-color: var(--cp-branco);
  color: var(--cp-azul);
  border: 1px solid transparent;
  border-radius: var(--cp-raio-pequeno);
  font-size: 1rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231B1D39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--esp-4) center;
  background-size: .75rem auto;
  /* A opção mais longa mede 554px numa caixa de 281 e o select nativo corta no
     meio da palavra, o que lê como bug. Com a reticência a truncagem lê como
     truncagem — e o valor enviado ao Active continua o inteiro, porque isso é
     só apresentação. Quem quiser o rótulo curto encurta o TEXTO da opção no
     painel do AC; o `value` não pode mudar. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Nada escolhido lê como convite, não como resposta. 4A4D65 sobre F1F6FF dá
   7,6:1, então o estado "vazio" continua legível e não é cinza morto. */
.campo__select:has(option[value=""]:checked) { color: var(--texto-fraco-claro); }

.campo__entrada:focus-visible,
.campo__select:focus-visible {
  outline: 3px solid var(--cp-laranja);
  outline-offset: 2px;
  border-color: var(--cp-laranja);
}
.campo.em-erro .campo__entrada { border-color: var(--cp-laranja); border-width: 2px; }

.campo__erro {
  font-size: var(--fs-legenda);
  line-height: 1.4;
  color: var(--cp-laranja);
}
.campo__erro:empty { display: none; }

/* ── Cartões e painéis ──────────────────────────────────────────────────────
   Nunca card dentro de card. */
.cartao {
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--superficie-card);
  border: 1px solid var(--linha-escura);
}
.cartao--inverso {
  background: var(--cp-azul);
  color: var(--cp-branco);
  border-color: transparent;
}

.painel {
  max-width: 56rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 1.5rem + 2vw, 3.5rem);
  background: var(--cp-azul);
  color: var(--cp-branco);
}

.nota {
  display: flex;
  align-items: flex-start;
  gap: 0;
  text-align: start;
  max-width: 34rem;
  margin-inline: auto;
}

/* ── Listas de afirmação ────────────────────────────────────────────────── */
/* auto-fit com piso de 18rem em vez de 1fr 1fr fixo: a lista só abre em duas
   colunas quando cada uma cabe de verdade. No painel de 56rem ela abre; dentro
   da coluna de 6fr do fechamento ela fica em uma, porque lá duas colunas dão
   ~170px de texto e a frase mais longa quebrava em sete linhas. */
.lista-check {
  list-style: none;
  display: grid;
  gap: var(--esp-4);
  /* min(18rem, 100%) e não 18rem puro: em 320px o container tem 280px e um
     piso rígido de 288px estouraria a coluna, criando rolagem horizontal. */
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.lista-check > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  align-items: start;
  font-size: var(--fs-corpo-lg);
  line-height: 1.5;
}
.lista-check .check { margin-block-start: .1em; }

/* ── Rail de abertura ───────────────────────────────────────────────────── */
.rail {
  background: var(--cp-azul-profundo);
  color: var(--cp-branco);
}
.rail__grid {
  display: grid;
  gap: var(--esp-3);
  justify-items: center;
  align-items: center;
  padding-block: var(--esp-3);
}
.rail__aviso { color: color-mix(in srgb, var(--cp-branco) 88%, transparent); text-align: center; }

.badge-data {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 2.75rem;           /* medido: 39px numa linha, abaixo dos 44 */
  padding: .5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--cp-laranja) 40%, transparent);
  border-radius: 999px;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-botao);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
/* Em 320px a linha inteira em nowrap media ~270px numa caixa de 265 e
   empurrava a rolagem horizontal. Só a data fica indivisível; o resto quebra.
   De 40em para cima sobra largura e a linha volta a ser única. */
.badge-data b { font-weight: var(--cp-peso-titulo); white-space: nowrap; }
.badge-data__losango { width: .5rem; aspect-ratio: 1; fill: var(--cp-laranja); flex: none; }
.badge-data:hover { border-color: var(--cp-laranja); }

/* ── Slot de foto ───────────────────────────────────────────────────────────
   São DOIS arquivos, não um: o hero usa um retrato 4:5 (ele sentado, olhando
   para a câmera) e a seção do professor usa um recorte 16:9 do palco (ele em
   pé, com microfone, no meio da fala). A segunda existe porque a seção diz
   "quem vai ministrar" — mostrar ele ministrando é a foto certa ali.
   Os dois são JPEG retangular com fundo fotográfico. PNG com fundo
   transparente não serve: o duotone usa mix-blend-mode:luminosity e pintaria a
   cor do container através da área transparente.                            */
/* Sem `background` aqui de propósito. O duotone da marca funciona pintando a
   cor chapada NO CONTAINER e deixando a imagem entrar só com a luminância
   (mix-blend-mode: luminosity) — ou seja, o fundo do container É a cor do
   duotone. Um `background` próprio nesta regra sobrescrevia o
   `var(--cp-azul)` que .cp-duotone--navy traz do tokens.css, porque as duas
   classes têm a mesma especificidade e style.css carrega depois. O resultado
   era a foto saindo no #04171D esverdeado em vez do navy da marca. */
.foto-slot {
  position: relative;
  aspect-ratio: 3 / 4;
}
.foto-slot > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;      /* mantém o rosto fora do corte superior */
}
/* A foto do palco não tem headroom: o cabelo começa a ~2% do topo do arquivo.
   No desktop o container renderiza quase 16:9 e não corta nada, mas no mobile o
   `aspect-ratio: 1` vence o `max-height` e o corte passa a ser vertical — com o
   object-position padrão de 22% o topo da cabeça seria decepado. Ancorar perto
   do topo preserva a cabeça e corta pelos pés, que é onde sobra. */
.foto-slot--palestra > img { object-position: 50% 6%; }

/* tokens.css já dá ao .cp-duotone o fundo chapado e o luminosity na imagem;
   aqui só o preenchimento do container. */
.cp-duotone > img { height: 100%; object-fit: cover; }

/* ── Barra de progresso (obrigado.html) ─────────────────────────────────────
   main.js anima --valor de 0% a 90% quando a barra entra na viewport, e vai
   direto a 90% se prefers-reduced-motion estiver ativo. aria-valuenow já é 90
   no HTML e não muda durante a animação: leitor de tela não precisa ouvir a
   contagem. */
.progresso {
  height: 12px;
  border-radius: 999px;
  background: var(--linha-escura);
  overflow: clip;
}
.progresso__preenchimento {
  display: block;
  height: 100%;
  width: var(--valor, 0%);
  background: var(--cp-gradiente-laranja);
  border-radius: inherit;
}
/* 1.9em do texto que o cerca (~42px), não os 72px do token de título: a 72px
   dentro de uma linha de 22px o número estoura a caixa de linha, cola nas
   palavras vizinhas e sobe por cima da barra. O pico de escala desta página é
   o <h1> logo abaixo. */
.progresso__numero {
  display: inline-block;
  font-size: 1.9em;
  font-weight: var(--cp-peso-display);
  line-height: 1;
  letter-spacing: var(--tracking-xl);
  margin-inline: .14em .06em;
  translate: 0 .06em;             /* assenta na linha de base do texto ao lado */
  color: var(--cp-laranja);      /* 8,33:1 sobre navy */
}

/* ── Moldura de embed (obrigado.html) ───────────────────────────────────────
   O <iframe> do Forms fica COMENTADO no HTML, não com src vazio: iframe de src
   vazio recarrega a própria página em vários navegadores. */
.moldura-embed {
  display: grid;
  place-items: center;
  height: clamp(28rem, 80svh, 87.5rem);
  border: 1px solid var(--linha-clara);
  border-radius: var(--cp-raio);
  border-start-end-radius: 0;
  overflow: clip;
}
.moldura-embed iframe { width: 100%; height: 100%; border: 0; }
.moldura-embed__slot {
  padding: var(--esp-5) var(--esp-6);
  border: 1px dashed color-mix(in srgb, var(--cp-laranja) 45%, transparent);
  border-radius: var(--cp-raio-pequeno);
  color: var(--texto-fraco-claro);
}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.rodape {
  position: relative;
  overflow: clip;
  padding-block: var(--esp-7);
  background: var(--cp-preto);
  color: var(--cp-branco);
}
.rodape .t-legenda { color: color-mix(in srgb, var(--cp-branco) 70%, transparent); }
.rodape .marca--rodape { margin-block-end: var(--esp-5); }
.rodape__legais { margin-block-start: var(--esp-2); }
/* min-height em vez de padding: alvo construído por padding encolhe junto com a
   fonte, e no mobile os mesmos .8rem que davam 44px no desktop davam 42px.
   Duas medições erradas seguidas nesta regra — a altura agora é declarada. */
.rodape__legais a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--esp-2);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: .2em;
}
.rodape__legais a:hover { text-decoration-color: currentColor; }
.rodape__legais span { opacity: .4; margin-inline: var(--esp-2); }

/* ── Skip link ──────────────────────────────────────────────────────────── */
.pular-para-conteudo {
  position: absolute;
  z-index: 99;
  inset-block-start: var(--esp-2);
  inset-inline-start: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  background: var(--cp-laranja);
  color: var(--cp-azul);
  border-radius: var(--cp-raio-pequeno);
  font-size: var(--fs-botao);
  font-weight: var(--cp-peso-titulo);
  text-decoration: none;
  translate: 0 -150%;
}
.pular-para-conteudo:focus-visible { translate: 0 0; }


/* ═══ 07 SEÇÕES ═════════════════════════════════════════════════════════════
   Movimentos de cor, na ordem da página:
     M1  S0+S1  gradiente azul   densa, o momento de conversão
     M2  S2     branco #F1F6FF   respiro máximo, sem CTA
     M3  S3+S4  navy chapado     densa, o argumento e a pauta
     M4  S5+S6+S7  branco        perfil, respiro, autoridade
     M5  S8     campo laranja    único da pasta, alta voltagem e curto
     M6  S9     preto            fim
   A "QUEBRA DE COR" marcada no docx é a emenda M2 → M3 (S2 → S3).
   ═════════════════════════════════════════════════════════════════════════ */

/* ── S1 · Hero ──────────────────────────────────────────────────────────────
   O padding do hero é MENOR que o das outras seções, e isso é o oposto de um
   descuido: com --pad-secao de 128px a base do botão caía em y≈872 numa
   viewport de 855, ou seja a ação primária de uma LP de captura ficava abaixo
   da dobra em 1920. Aqui o teto é 64px. Alvo verificável: base do botão de
   submit ≤ 800px em 1920×855. */
.hero {
  padding-block: clamp(2.5rem, 2rem + 1.5vw, 4rem);
  min-height: clamp(34rem, 84svh, 50rem);
  display: grid;
  align-items: center;
}
.hero__grid { display: grid; gap: var(--esp-8); align-items: center; }
.hero__texto { max-width: 42rem; }
.hero__texto > :first-child,
.hero__figura > :first-child { margin-block-start: 0; }
.hero .t-display { margin-block-end: var(--esp-5); }
.hero__subhead { color: var(--texto-fraco-escuro); max-width: 32rem; margin-block-end: var(--esp-5); }
/* O placeholder visível de pendência jurídica foi retirado por decisão do
   cliente. Enquanto o parágrafo estiver vazio ele simplesmente não ocupa
   espaço; assim que receber texto, aparece sozinho, sem mais nenhuma mudança
   de CSS ou de HTML.
   Registro do que isso significa hoje: o formulário coleta nome, WhatsApp e
   e-mail sem nenhuma informação de tratamento de dados na página. O elemento e
   o TODO no HTML continuam no lugar exato para quando o texto chegar. */
.hero__lgpd {
  margin-block-start: var(--esp-4);
  color: color-mix(in srgb, var(--cp-branco) 62%, transparent);
}
.hero__lgpd:empty { display: none; }

.hero__figura {
  position: relative;
  display: grid;
  gap: var(--esp-5);
  max-width: 30rem;
  margin-inline: auto;
}
.hero__legenda {
  position: relative;
  z-index: 1;
  font-size: var(--fs-corpo);
  color: var(--texto-fraco-escuro);
}
.hero .foto-slot { position: relative; z-index: 1; }

/* ── S2 · Diagnóstico ───────────────────────────────────────────────────── */
.diagnostico { color: var(--cp-azul); }
.diagnostico .marca-dagua { color: var(--cp-azul); }
.diagnostico .prosa { color: var(--texto-fraco-claro); }
.diagnostico .prosa > p:first-child { color: var(--cp-azul); font-weight: var(--cp-peso-subtitulo); }
.diagnostico .divisor { color: var(--cp-azul); }

/* ── S3 · Dilema ────────────────────────────────────────────────────────────
   Dois lados pesados um contra o outro, não dois cards: a forma diz "dilema".
   O "ou" a 72px em outline laranja é o pico de escala do movimento M3.      */

/* A "QUEBRA DE COR" que o documento de copy marca é exatamente esta emenda.
   O filete laranja de 4px é o dispositivo que a nomeia — antes ele existia uma
   única vez, no topo da página, e a quebra pedida pelo cliente não tinha
   marcação nenhuma além da troca de fundo. */
.dilema::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--cp-gradiente-laranja);
}
/* O container é o .wrap cheio (1200) e não wrap--prosa, para os dois lados do
   dilema respirarem. Título e prosa recuperam a medida de leitura por conta. */
.dilema > .wrap > .t-h3 { max-width: 34rem; margin-inline: auto; }

.dilema__balanca {
  display: grid;
  gap: var(--esp-5);
  /* start, não center: com `center` os dois pratos de 2 e 3 linhas ficavam
     desencontrados e as duas réguas de 1px saíam desalinhadas em ~20px — uma
     balança visivelmente torta. Alinhados pelo topo, as réguas formam uma
     linha só. O "ou" recupera o centro por conta própria abaixo. */
  align-items: start;
  max-width: 60rem;
  margin-block: var(--esp-8);
  margin-inline: auto;
}
.dilema__lado {
  padding-block-start: var(--esp-4);
  border-block-start: 1px solid var(--linha-escura);
  font-size: var(--fs-corpo-lg);
  line-height: 1.55;
}
.dilema__ou {
  font-size: var(--cp-texto-titulo);
  font-weight: var(--cp-peso-display);
  line-height: 1;
  letter-spacing: var(--tracking-xl);
  text-transform: lowercase;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px var(--cp-laranja);
}
@supports not (-webkit-text-stroke: 1px black) {
  .dilema__ou { color: var(--cp-laranja); -webkit-text-stroke: 0; }
}

/* ── S4 · Programa ──────────────────────────────────────────────────────────
   Linhas de régua, não cards iguais. É a pauta de uma aula, e a pauta é o
   artefato que este público lê todo dia. */
/* Dois valores dentro do mesmo movimento escuro, não um só. M3 são ~1800px de
   altura e com S3 e S4 ambas em #1B1D39 a única costura entre elas era um
   divisor de 1px — o movimento lia como uma parede. Dilema fica no navy,
   programa desce para a parada profunda do gradiente, e a faixa do CTA volta
   ao navy para fechar. Nenhum sétimo movimento foi criado. */
.programa { padding-block-end: 0; background: var(--cp-azul-profundo); }
.programa .divisor { margin-block-start: 0; }

.pauta {
  list-style: none;
  max-width: 58rem;
  margin: var(--esp-7) auto 0;
  display: grid;
}
.pauta__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--esp-5);
  padding-block: var(--esp-6);
  border-block-start: 1px solid var(--linha-escura);
}
.pauta__item:last-child { border-block-end: 1px solid var(--linha-escura); }
.pauta__ico {
  grid-row: 1 / span 2;
  width: 3rem;                    /* 40px deixava o traço 2 quase invisível */
  aspect-ratio: 1;
  color: var(--cp-laranja);       /* alimenta os fill="currentColor" das pontas */
  stroke: var(--cp-laranja);
  margin-block-start: .15em;
}
.pauta__item .t-h3 { margin-block: 0 var(--esp-2); }
.pauta__item p { color: var(--texto-fraco-escuro); }

.faixa-cta {
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
  padding-block: var(--esp-7);
  background: var(--cp-azul);
}
.faixa-cta__losangos { display: flex; justify-content: center; gap: var(--esp-3); margin-block-end: var(--esp-5); }
.faixa-cta__losangos svg { width: .875rem; aspect-ratio: 1; fill: var(--cp-laranja); }
/* o do meio um degrau maior: três iguais leem como poeira, três em ritmo leem
   como intenção */
.faixa-cta__losangos svg:nth-child(2) { width: 1.25rem; }

/* ── S5 · Perfil ────────────────────────────────────────────────────────────
   Painel navy inset sobre o movimento claro: lê como objeto na página, não
   como troca de movimento. */
.perfil .painel .t-h2 { margin-block-end: var(--esp-6); }

/* ── S6 · Declaração — o maior respiro da página ────────────────────────── */
.declaracao { color: var(--cp-azul); }
.declaracao .divisor { color: var(--cp-azul); margin-block: 0 var(--esp-7); }
.declaracao .divisor:last-child { margin-block: var(--esp-7) 0; }
.declaracao .prosa { color: var(--texto-fraco-claro); }

/* ── S7 · Professor ─────────────────────────────────────────────────────────
   A foto em duotone navy sobre o claro é a massa escura que ancora M4, e o
   nome a 72px é o segundo pico de escala da página. */
.professor__grid { display: grid; gap: var(--esp-8); align-items: center; }
.professor__figura { position: relative; }
.professor__figura .foto-slot { position: relative; z-index: 1; }
.professor__nome { margin-block: 0 var(--esp-5); }
.professor .prosa { margin-inline: 0; color: var(--texto-fraco-claro); }
.professor .prosa .t-lead { color: var(--cp-azul); }

/* ── S8 · Fechamento — o único campo laranja da pasta ───────────────────── */
.fechamento__grid { display: grid; gap: var(--esp-8); align-items: start; }
/* O corpo aqui sobe um degrau, para --fs-lead. Quando --fs-corpo-lg virou alias
   de --fs-corpo, esta lista caiu de 20 para 18px e o fechamento perdeu a única
   diferenciação de tamanho que tinha — o clímax da página lia no mesmo corpo
   de todas as outras seções. */
.fechamento .lista-check > li { color: var(--cp-azul); font-size: var(--fs-lead); }
.fechamento .cartao--inverso .t-h3 { margin-block: 0 var(--esp-5); }

/* ── D1/D2 · obrigado.html ──────────────────────────────────────────────── */
.confirmacao { text-align: center; }
.confirmacao .progresso { margin-block-end: var(--esp-5); max-width: 34rem; margin-inline: auto; }
.confirmacao .t-display { margin-block: var(--esp-4) var(--esp-5); }
.confirmacao .t-lead { color: var(--texto-fraco-escuro); }
.confirmacao .t-lead:has(.progresso__numero) { color: var(--cp-branco); }
.confirmacao .botao { margin-block-start: var(--esp-6); min-width: min(22rem, 100%); }
.confirmacao .nota { margin-block-start: var(--esp-7); }

.pesquisa { color: var(--cp-azul); }
.pesquisa .divisor { color: var(--cp-azul); margin-block-end: 0; }
.pesquisa .moldura-embed { margin-block-start: var(--esp-6); }

.rail__grid--solo { grid-template-columns: 1fr; }


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

/* Sem uso hoje, e mantida de propósito: é a única forma correta de esconder
   texto da tela sem esconder do leitor de tela. Quando ela não existe, quem
   precisa dela alcança `display: none`, que remove o texto da acessibilidade
   também. Se você adicionar um botão só com ícone, o rótulo vem aqui. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ═══ 09 RESPONSIVO E PREFERÊNCIAS ══════════════════════════════════════════
   Três breakpoints, em `em` para respeitarem o zoom do usuário. Mobile-first.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 40em / 640px ───────────────────────────────────────────────────────── */
@media (min-width: 40em) {
  .rail__grid { grid-template-columns: auto 1fr auto; padding-block: var(--esp-2); }
  .badge-data { white-space: nowrap; }

  /* Os quatro campos do hero em 2×2, e não em quatro linhas. Empilhados, os
     campos de WhatsApp e carreira somariam ~180px e jogariam o botão de submit
     de 786px para ~966px numa viewport de 855 — de volta para baixo da dobra,
     que foi o defeito mais grave desta página. Em duas colunas o formulário
     mantém a altura de duas linhas e a ação primária continua visível.
     O formulário do fechamento fica em coluna única de propósito: ele mora numa
     coluna de 6fr, onde duas colunas dariam ~230px por campo, e ali não existe
     restrição de dobra. */
  .hero .form-inscricao { grid-template-columns: 1fr 1fr; column-gap: var(--esp-4); }
  .hero .form-inscricao > button { grid-column: 1 / -1; }
  .rail__grid--solo { grid-template-columns: 1fr; }
  .lista-check { gap: var(--esp-5) var(--esp-6); }
  .nota { gap: 0; }
}

/* ── 48em / 768px — o dilema abre em dois pratos ─────────────────────────── */
@media (min-width: 48em) {
  .dilema__balanca { grid-template-columns: 1fr auto 1fr; gap: var(--esp-6); }
  .dilema__ou { padding-inline: var(--esp-2); align-self: center; }
}

/* ── 60em / 960px ───────────────────────────────────────────────────────── */
@media (min-width: 60em) {
  .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .hero .foto-slot { aspect-ratio: 4 / 5; }
  .hero__figura { max-width: none; margin-inline: 0; }

  .professor__grid { grid-template-columns: 5fr 7fr; }
  /* A foto sangra até a borda da viewport. O overflow:clip da .secao segura
     o excesso de alguns pixels que a barra de rolagem introduz em 100vw. */
  .professor__figura { margin-inline-start: var(--fuga); }
  /* Recorte largo, não 4/5: sangrando até a borda a foto chega a ~900px de
     largura numa tela de 1920, e em 4/5 isso viraria 1075px de altura — a
     seção inteira ficaria sendo a foto. O max-height vence o aspect-ratio e o
     object-fit: cover resolve o corte. Os cantos do lado que sangra perdem o
     arredondamento: canto redondo encostado na borda da tela lê como erro. */
  .professor .foto-slot {
    aspect-ratio: 1;
    max-height: 32rem;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .fechamento__grid { grid-template-columns: 6fr 6fr; gap: var(--esp-9); }
}

/* ── 80em / 1280px ──────────────────────────────────────────────────────────
   Sem min-height extra no hero: era ela que empurrava o botão de submit para
   fora do primeiro viewport nas telas grandes. */
@media (min-width: 80em) {
  .secao:not(.hero) { padding-block: var(--esp-10); }
}

/* ── Movimento reduzido ─────────────────────────────────────────────────────
   Nada anima. A barra de progresso é levada a 90% por main.js sem transição, e
   .marca--assenta nunca é adicionada. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .botao:hover { transform: none; }
}

/* ── O momento autoral ──────────────────────────────────────────────────────
   Um único efeito na página, e ele é o objeto da própria marca fazendo o que
   faz na vida: a balança oscila e assenta no equilíbrio. main.js adiciona
   .marca--assenta no rail uma vez, no load, e remove no animationend.
   Não existe reveal-on-scroll nesta pasta — foi decisão de design, não
   esquecimento. Não adicione entradas por seção.
   A origem 36.4% 50% é o centro do losango dentro do lockup: o símbolo ocupa
   x 355.62–604.99 num viewBox que começa em 158.41 e tem 883.18 de largura. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes assenta {
    0%   { transform: rotate(-2.6deg); }
    32%  { transform: rotate(1.6deg); }
    58%  { transform: rotate(-.8deg); }
    80%  { transform: rotate(.35deg); }
    100% { transform: rotate(0); }
  }
  .marca--assenta {
    transform-origin: 36.4% 50%;
    animation: assenta 1300ms var(--ease) both;
  }
}

/* ── Contraste aumentado ───────────────────────────────────────────────────
   Bordas sobem de 14% para 40%, marcas d'água saem, o outline do wordmark
   dobra e o aviso de LGPD vai a opacidade cheia. */
@media (prefers-contrast: more) {
  :root {
    --linha-clara:  color-mix(in srgb, var(--cp-azul) 40%, transparent);
    --linha-escura: color-mix(in srgb, var(--cp-branco) 40%, transparent);
    --stroke-outline: color-mix(in srgb, var(--cp-branco) 45%, transparent);
    --stroke-outline-claro: color-mix(in srgb, var(--cp-azul) 30%, transparent);
    --texto-fraco-claro: var(--cp-azul);
    --texto-fraco-escuro: var(--cp-branco);
  }
  .marca-dagua { display: none; }
  .hero__lgpd { color: var(--cp-branco); }
  .rodape .t-legenda { color: var(--cp-branco); }
}