/* =====================================================================
   Decora CNH — site institucional.

   UM tema só, o claro. Fundo branco gelo e uma família de azuis — do gelo
   ao marinho — que são a MESMA cor em intensidades diferentes (§7).
   Verde e vermelho só em Acertei/Errei do card (o gesto do app).

   Regra de contraste: texto escuro SÓ sobre superfície clara. Toda
   superfície marinho (de onde vem, plano anual, a pista) usa
   exclusivamente --sobre-marinho e --sobre-marinho-suave.

   Tipografia: Bricolage Grotesque nos títulos, Instrument Sans no texto E
   nos rótulos/dados (a classe `.mono` manteve o nome, mas é Instrument
   Sans 600 em caixa alta). O card fica em Inter, como no app.

   Sem seção fixa (sticky/pinned): a rolagem é a do navegador e os links do
   menu caem no lugar (scroll-margin-top = altura do topo).

   Miolo largo: o conteúdo vai até perto da borda da tela — 1480px de teto
   e respiro lateral proporcional (--pad-x). Só o texto corrido continua
   com medida tipográfica (max-width em ch).

   Movimento: títulos entram palavra a palavra, o card da abertura inclina
   com o mouse, fio de progresso no topo, aurora na seção marinho, a folha
   do simulado se preenche, a pista dos blocos se estende e a faixa é
   pintada e corre. Tudo transform/opacity/clip-path — nada de layout por
   quadro.

   A abertura ocupa exatamente a primeira tela e o bloco texto+malha fica
   centrado no que sobra abaixo do topo — respiro igual em cima e embaixo,
   e a malha encolhe em telas baixas para caber.
   ===================================================================== */

:root {
  color-scheme: light only;

  /* O azul é o do app, #256BD8. A escala clara sai dele nos mesmos
     degraus; texto branco sobre ele, 5,0:1. */

  --gelo: #F3F7FC;
  --papel: #FFFFFF;
  --azul-05: #E7EFFB;
  --azul-15: #CEDDF6;
  --azul-30: #9EBDEE;
  --azul-40: #6F9DE5;
  --azul: #256BD8;
  --azul-70: #1D59B5;
  --marinho: #0F3561;
  --marinho-2: #17436F;
  --tinta: #0B1F36;
  --tinta-2: #3F5875;
  --tinta-3: #5B7594;
  --sobre-azul: #FFFFFF;
  --sobre-marinho: #FFFFFF;
  --sobre-marinho-suave: #BFDCF7;

  --errei-tint: rgba(190, 79, 74, 0.10); --errei-linha: rgba(190, 79, 74, 0.24); --errei-text: #A9433E;
  --c1-tint: rgba(58, 132, 94, 0.08);  --c1-linha: rgba(58, 132, 94, 0.18);  --c1-text: #3A7255;
  --c2-tint: rgba(45, 124, 84, 0.14);  --c2-linha: rgba(45, 124, 84, 0.26);  --c2-text: #2F6F4F;
  --c3-tint: rgba(32, 112, 73, 0.20);  --c3-linha: rgba(32, 112, 73, 0.34);  --c3-text: #216043;

  --sombra-card: 0 1px 2px rgba(15, 53, 97, 0.05), 0 12px 32px rgba(15, 53, 97, 0.10), 0 32px 64px rgba(15, 53, 97, 0.08);
  --sombra-leve: 0 1px 2px rgba(15, 53, 97, 0.05), 0 4px 14px rgba(15, 53, 97, 0.06);

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  --display: "Bricolage Grotesque", "Instrument Sans", -apple-system, sans-serif;
  --texto: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --card-fonte: Inter, "Instrument Sans", -apple-system, sans-serif;

  --largura: 1480px;
  --pad-x: clamp(20px, 3vw, 48px);
  --topo-altura: 72px;
  --secao-y: clamp(88px, 10vw, 136px);
  --abertura-respiro: 48px;   /* folga mínima acima e abaixo do bloco da abertura */
  --legenda-altura: 34px;     /* quanto a legenda desce abaixo da malha (bottom: -34px) */
}

/* ───────────────────────────── Base ───────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--gelo); }
body {
  margin: 0;
  background: var(--gelo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
strong { font-weight: 600; }
.mono { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.vis-oculta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--azul); color: var(--sobre-azul); padding: 12px 20px; border-radius: var(--r-md); }
.pular:focus { left: 16px; }

/* Fio de progresso da leitura, rente ao topo. O JS só ajusta o scaleX. */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 60; background: linear-gradient(90deg, var(--azul-70), var(--azul)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* Títulos divididos em palavras pelo JS: cada palavra sobe de trás de
   uma máscara de overflow. Sem JS não existe .palavra — nada muda. */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; }
.palavra-int { display: inline-block; will-change: transform; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

/* Os links do menu caem logo abaixo do topo fixo, em qualquer seção. */
[id] { scroll-margin-top: var(--topo-altura); }

.miolo { max-width: var(--largura); margin: 0 auto; padding: 0 var(--pad-x); }
.kicker { margin-bottom: 14px; color: var(--azul-70); }
.titulo { font-size: clamp(30px, 4.2vw, 48px); max-width: 16ch; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--tinta-2); max-width: 58ch; }
.lead-curto { max-width: 52ch; }
.titulo + .lead { margin-top: 18px; }

/* ───────────────────────────── Topo ───────────────────────────── */

.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topo-altura); transition: background-color 240ms, box-shadow 240ms; }
.topo-compacto { background: rgba(243, 247, 252, 0.86); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 var(--azul-15); }
.topo-faixa { max-width: var(--largura); height: 100%; margin: 0 auto; padding: 0 var(--pad-x); display: flex; align-items: center; gap: 36px; }
.marca { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--marinho); }
/* A marca Curva Certa: a pista que faz a curva na forma de um visto, com a
   faixa tracejada VAZADA no eixo (máscara), para valer sobre qualquer
   fundo. O viewBox é a caixa visual da pista, então a borda de baixo do
   SVG é o pé da curva — e, com o align-items: baseline do .marca, ele
   pousa na baseline da palavra, com a ponta na altura das maiúsculas
   (cap = 0.66em). */
.marca-sinal { height: 0.66em; width: auto; flex: none; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.marca:hover .marca-sinal { transform: scale(1.08); }
.ms-pista { fill: none; stroke: var(--azul); stroke-width: 21; stroke-linecap: round; stroke-linejoin: round; }
.ms-faixa { fill: none; stroke: #000; stroke-width: 4; stroke-dasharray: 9 7; stroke-dashoffset: -6.48; }
.marca-cnh { color: var(--azul); }
.menu { display: flex; gap: 28px; margin-left: auto; font-weight: 500; font-size: 15px; color: var(--tinta-2); }
.menu a { position: relative; padding: 6px 0; transition: color 160ms; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 1px; background: var(--azul); transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.menu a:hover, .menu a.ativo { color: var(--tinta); }
.menu a:hover::after, .menu a.ativo::after { transform: scaleX(1); }

/* ─────────────────────────── Véu de abertura ───────────────────────────
   O véu só existe com JS (classe .js no html); sem ele, ou com movimento
   reduzido, a página abre direto. A marca usa o MESMO viewBox recortado do
   cabeçalho (borda de baixo = pé da curva); aqui a faixa não é máscara: são
   cinco traços na cor do fundo do véu, que o JS pinta um a um. O nome é
   revelado pela LARGURA da caixa — o flex centrado empurra a marca para a
   esquerda no mesmo movimento. */
.intro { display: none; }
.js .intro { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--gelo); }
.intro-lockup { display: flex; align-items: baseline; font-size: clamp(40px, 8vw, 84px); }
.intro-sinal { height: 0.66em; width: auto; overflow: visible; }
/* O estado inicial da abertura mora AQUI, não no JS. Entre a primeira
   pintura e o DOMContentLoaded o navegador mostrava o lockup pronto — marca
   pequena, nome inteiro — e o JS então saltava para a marca grande com o
   nome escondido: uma piscada. A escala vive numa variável porque o JS lê a
   MESMA; dois números em arquivos diferentes dessincronizam na primeira
   mudança. */
.js .intro-sinal { --intro-escala: 2.6; transform: scale(var(--intro-escala)); }
.js .intro-nome-caixa { width: 0; }
.js .intro-nome { opacity: 0; }
.intro-pista { fill: none; stroke: var(--azul); stroke-width: 21; stroke-linecap: round; stroke-linejoin: round; }
.intro-traco { fill: none; stroke: var(--gelo); stroke-width: 4; }
.js .intro-pista, .js .intro-traco { opacity: 0; }
.intro-nome-caixa { display: inline-block; overflow: hidden; white-space: nowrap; }
.intro-nome { display: inline-block; margin-left: 0.24em; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; color: var(--marinho); }
.intro-cnh { color: var(--azul); }
/* Já vista nesta sessão (marcado no <head> antes da primeira pintura): o
   véu não chega a aparecer. Sem isto, a recarga mostrava a marca por
   ~1,4 s até o JS remover o elemento. */
.sem-intro .intro { display: none !important; }
@media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }

/* ───────────────────────────── Botões ───────────────────────────── */

.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; transition: transform 160ms, background-color 160ms, box-shadow 160ms; }
.btn:active { transform: scale(0.97); }

/* Brilho que varre botões e lojas no hover. */
.btn::before, .loja::before { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 600ms ease; pointer-events: none; }
.btn:hover::before, .loja:hover::before { left: 130%; }
.btn-contorno::before { background: linear-gradient(105deg, transparent, rgba(37, 107, 216, 0.14), transparent); }
.btn-azul { background: var(--azul); color: var(--sobre-azul); box-shadow: 0 6px 18px rgba(37, 107, 216, 0.28); }
.btn-azul:hover { background: var(--azul-70); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(37, 107, 216, 0.36); }
.btn-topo { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-contorno { border: 1.5px solid var(--azul-30); color: var(--azul-70); background: transparent; }
.btn-contorno:hover { background: var(--azul-05); }
.btn-branco { background: #FFFFFF; color: var(--marinho); }
.btn-branco:hover { background: var(--azul-05); }

.lojas { display: flex; flex-wrap: wrap; gap: 12px; }
.loja { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 14px; border-radius: 14px; background: var(--marinho); color: var(--sobre-marinho); box-shadow: 0 8px 22px rgba(15, 53, 97, 0.22); transition: transform 160ms, background-color 160ms, box-shadow 160ms; }
.loja:hover { background: var(--marinho-2); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 53, 97, 0.3); }
.loja:active { transform: scale(0.97); }
.loja-icone { width: 24px; height: 24px; fill: currentColor; }
.loja-txt { display: flex; flex-direction: column; line-height: 1.1; }
.loja-txt small { font-size: 11px; color: var(--sobre-marinho-suave); }
.loja-txt strong { font-size: 16px; }
.nota { margin-top: 16px; }

/* ───────────────────────────── Abertura ───────────────────────────── */

/* A abertura é a primeira tela inteira: o bloco texto+malha fica centrado
   no espaço abaixo do topo fixo, com o mesmo respiro acima e abaixo. A
   malha encolhe em telas baixas (notebook com barra do navegador) para o
   quadro inteiro — malha e legenda — caber sem cortar. */
.abertura { position: relative; display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--topo-altura) + var(--abertura-respiro)) 0 var(--abertura-respiro); }
.abertura::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 460px at 82% 18%, rgba(37, 107, 216, 0.09), transparent 70%); pointer-events: none; }
.abertura-grade { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(56px, 7vw, 120px); align-items: center; }
.titulo-abertura { font-size: clamp(38px, 5.4vw, 64px); font-weight: 700; letter-spacing: -0.03em; max-width: 14ch; }
.abertura-texto .lead { margin: 22px 0 32px; }

.abertura-visual { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 600px; max-width: min(600px, calc(100svh - var(--topo-altura) - var(--legenda-altura) - 2 * var(--abertura-respiro))); margin: 0 0 var(--legenda-altura) auto; perspective: 1400px; }
.malha { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); gap: 6px; }
.malha i { display: block; border-radius: 4px; background: var(--azul-15); }
.card-cena { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; will-change: transform; }
.malha-legenda { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; }

/* ───────────────────────────── Card (§3.2) ───────────────────────────── */

.card-porta { position: relative; width: min(100%, 380px); transform-style: preserve-3d; will-change: transform; }
.card { position: relative; width: 100%; min-height: 330px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-card); font-family: var(--card-fonte); color: var(--tinta); cursor: pointer; transform-style: preserve-3d; transition: box-shadow 320ms ease; }
.card:hover, .card:focus-visible { box-shadow: 0 2px 4px rgba(15, 53, 97, 0.06), 0 20px 48px rgba(15, 53, 97, 0.17), 0 48px 96px rgba(15, 53, 97, 0.13); }
.card-face { position: absolute; inset: 0; padding: 22px; border-radius: inherit; display: flex; flex-direction: column; gap: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-verso { transform: rotateY(180deg); }
.card-rotulo { color: var(--tinta-3); }
.card-pergunta { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-top: auto; }
.card-dica { margin-top: auto; color: var(--azul); }
.card-resposta { margin-top: auto; font-size: 17px; font-weight: 600; line-height: 1.35; }
.card-explicacao { font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.card-origem { margin-top: auto; font-size: 11px; color: var(--tinta-3); text-transform: none; letter-spacing: 0.02em; }
/* O gesto da demonstração conta a história sozinho. A troca de frente/verso é
   dirigida por CLASSE na metade do giro, além do backface-visibility:
   em navegadores que achatam o 3D (Safari em certas composições), o
   texto da frente vazava espelhado no verso. */
.js .card.virado .card-frente { visibility: hidden; }
.js .card:not(.virado) .card-verso { visibility: hidden; }
/* "Carimbo" e não "selo": .selo já é a etiqueta "Melhor preço" dos
   planos — o nome repetido apagava a etiqueta (opacity herdada). */
.carimbo { position: absolute; top: 42px; font-weight: 800; font-size: 15px; padding: 4px 12px; border: 2px solid; border-radius: 10px; background: rgba(255, 255, 255, 0.85); opacity: 0; pointer-events: none; }
.carimbo-acertei { left: 16px; color: var(--c3-text); border-color: var(--c3-text); }
.carimbo-errei { right: 16px; color: var(--errei-text); border-color: var(--errei-text); }

/* ───────────────────────────── Seções ───────────────────────────── */

.secao { padding: var(--secao-y) 0; }
.secao-papel { background: var(--papel); box-shadow: inset 0 1px 0 var(--azul-15), inset 0 -1px 0 var(--azul-15); }
/* Logo abaixo da dobra a abertura já deixou seu respiro; a faixa branca
   marca a virada de tela e começa mais perto do topo. */
#metodo { padding-top: clamp(64px, 7vw, 96px); }
/* Marinho com "aurora": dois brilhos azuis desfocados derivando devagar
   ao fundo. Só transform anima; com movimento reduzido eles param. */
.secao-marinho { position: relative; overflow: hidden; background: var(--marinho); color: var(--sobre-marinho); }
.secao-marinho .miolo { position: relative; z-index: 1; }
.secao-marinho::before, .secao-marinho::after { content: ""; position: absolute; width: 540px; height: 540px; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.secao-marinho::before { background: rgba(37, 107, 216, 0.35); top: -220px; right: -140px; animation: derivar 16s ease-in-out infinite alternate; }
.secao-marinho::after { background: rgba(11, 42, 78, 0.9); bottom: -260px; left: -160px; animation: derivar 22s ease-in-out infinite alternate-reverse; }
@keyframes derivar { to { transform: translate3d(60px, 40px, 0); } }
.secao-marinho .kicker, .secao-marinho .mono { color: var(--sobre-marinho-suave); }
.secao-marinho .lead { color: var(--sobre-marinho-suave); }

.passos { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 28px); counter-reset: passo; }
.passos li { position: relative; overflow: hidden; padding: 28px 26px 30px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-leve); transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 300ms; }
.passos li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--azul), var(--azul-40)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.passos li:hover { transform: translateY(-6px); box-shadow: var(--sombra-card); }
/* Na faixa branca os passos viram lajotas gelo com fio, e só no hover
   ganham o branco e a sombra — branco sobre branco não se lia. */
.secao-papel .passos li { background: var(--gelo); border: 1px solid var(--azul-15); box-shadow: none; transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 300ms, background-color 300ms; }
.secao-papel .passos li:hover { background: var(--papel); box-shadow: var(--sombra-card); }
.passos li:hover::before { transform: scaleX(1); }
.passo-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); color: var(--sobre-azul); font-size: 17px; margin-bottom: 18px; transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.passos li:hover .passo-n { transform: scale(1.12) rotate(-8deg); }
.passos h3 { font-size: 21px; margin-bottom: 10px; }
.passos p, .fatos p { color: var(--tinta-2); font-size: 16px; line-height: 1.55; }

/* auto-fit e não repeat(3): os itens ocupam a linha inteira, sejam dois
   ou três, em vez de deixar um buraco à direita. */
.prontuario { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 2vw, 28px); }
.prontuario > div { padding: 26px 24px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 300ms, border-color 300ms; }
.prontuario > div:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.26); }
.prontuario dt { margin-bottom: 12px; }
.prontuario dd { font-size: 17px; line-height: 1.5; color: var(--sobre-marinho); }
.prontuario .exemplo { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); text-transform: none; letter-spacing: 0.02em; }

/* Os blocos: uma pista dividida em quatro trechos, cada um do tamanho do
   seu bloco no banco (o `flex` é a contagem de questões). Os quatro tons
   são a mesma cor em quatro intensidades; a chave de cada cartão abaixo
   repete o tom do trecho. */
.blocos { display: flex; gap: 3px; height: 56px; margin: 40px 0 8px; border-radius: var(--r-md); overflow: hidden; }
.blocos i { display: block; min-width: 0; }
.blocos .bloco-1 { flex: 412; }
.blocos .bloco-2 { flex: 205; }
.blocos .bloco-3 { flex: 623; }
.blocos .bloco-4 { flex: 260; }
.bloco-1 { --tom: var(--marinho); }
.bloco-2 { --tom: var(--azul-70); }
.bloco-3 { --tom: var(--azul); }
.bloco-4 { --tom: var(--azul-40); }
.blocos i { background: var(--tom); }

.numeros { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 28px); }
.numeros > div { padding: 22px 24px; border-radius: var(--r-lg); background: var(--papel); box-shadow: var(--sombra-leve); transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 300ms; }
.numeros > div:hover { transform: translateY(-5px); box-shadow: var(--sombra-card); }
.numeros dt { font-family: var(--display); font-size: clamp(34px, 4vw, 48px); font-weight: 700; letter-spacing: -0.03em; color: var(--marinho); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.numeros dd { margin-top: 6px; color: var(--tinta-2); font-size: 15px; line-height: 1.45; }
.numeros dd strong { display: block; margin-bottom: 2px; font-size: 17px; color: var(--tinta); }
/* A chave do bloco: o fio no alto do cartão, no tom do trecho da pista. */
.numeros > [class^="bloco-"] { position: relative; overflow: hidden; }
.numeros > [class^="bloco-"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--tom); }
.numeros + .lead { margin-top: 32px; }

/* A pista do "No seu dia": uma faixa de asfalto (marinho) com a linha
   tracejada no eixo. A linha é um elemento mais largo que a pista em um
   passo (80px): o JS a revela da esquerda para a direita e depois ela
   corre um passo por ciclo — só transform. Sem JS, fica parada e inteira. */
.pista { position: relative; height: 56px; margin-bottom: 40px; border-radius: var(--r-md); background: var(--marinho); overflow: hidden; }
.pista-faixa { position: absolute; left: -80px; right: 0; top: 50%; height: 5px; margin-top: -2.5px; background: repeating-linear-gradient(90deg, var(--sobre-marinho) 0 44px, transparent 44px 80px); will-change: transform; }
.pista.correndo .pista-faixa { animation: correr 1.6s linear infinite; }
@keyframes correr { to { transform: translateX(80px); } }

/* O título da pista fica numa linha só no desktop (para não sobrar uma
   palavra na segunda linha); em telas estreitas quebra normalmente. */
#dia .titulo { max-width: none; }
.fatos { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4vw, 56px); }
.fatos h3 { font-size: 21px; margin-bottom: 10px; }

/* ───────────────────────────── Simulados ─────────────────────────────
   Texto à esquerda, a folha de prova à direita. A folha é um cartão de
   papel: o relógio, as trinta questões (marcadas = respondidas) e a régua
   de acertos com o corte nos 20. */
.simulado-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.fatos-coluna { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; max-width: 58ch; }
.prova { justify-self: end; width: 100%; max-width: 460px; padding: 26px 26px 22px; border-radius: var(--r-xl); background: var(--papel); box-shadow: var(--sombra-card); }
.prova-topo { display: flex; align-items: baseline; justify-content: space-between; }
.prova-relogio { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--marinho); line-height: 1; }
.prova-folha { margin-top: 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.prova-folha li { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--r-sm); background: var(--azul); color: var(--sobre-azul); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 220ms, color 220ms; }
/* Em branco: a questão ainda não respondida (só existe durante a animação). */
.prova-folha li.em-branco { background: var(--azul-05); color: var(--tinta-3); box-shadow: inset 0 0 0 1px var(--azul-15); }
.prova-regua { position: relative; height: 10px; margin-top: 22px; border-radius: var(--r-pill); background: var(--azul-15); }
.prova-feito { position: absolute; inset: 0; border-radius: inherit; background: var(--azul); transform: scaleX(0.8); transform-origin: 0 50%; }
/* O corte dos 20 acertos, a dois terços da régua. */
.prova-corte { position: absolute; left: 66.667%; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--marinho); box-shadow: 0 0 0 2px var(--papel); }
.prova-legenda { margin-top: 14px; }
.prova-placar { color: var(--marinho); }
.nota-simulado { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--azul-15); font-size: 15px; line-height: 1.55; color: var(--tinta-3); max-width: 96ch; }

/* Planos: a seção inteira centrada — cabeçalho, os dois cards e a nota. */
#planos .miolo { text-align: center; }
#planos .titulo, #planos .lead { margin-left: auto; margin-right: auto; }
.planos { margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); align-items: stretch; max-width: 1120px; text-align: left; }
.plano { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-xl); background: var(--papel); box-shadow: var(--sombra-leve); transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 300ms; }
.plano:hover { transform: translateY(-6px); box-shadow: var(--sombra-card); }
.plano-anual:hover { box-shadow: 0 2px 4px rgba(15, 53, 97, 0.08), 0 24px 60px rgba(15, 53, 97, 0.3); }
.plano h3 { font-size: 13px; }
.preco { font-family: var(--display); font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 18px 0 8px; color: var(--marinho); }
.cifra { font-size: 20px; vertical-align: top; margin-right: 4px; letter-spacing: 0; }
.centavos { font-size: 24px; letter-spacing: -0.02em; }
.periodo { margin-bottom: 14px; }
/* Quanto se economiza em relação ao mensal — azul, não verde: é desconto, não acerto. */
.economia { display: inline-block; align-self: flex-start; margin-bottom: 22px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--azul-15); color: var(--azul-70); font-size: 13px; font-weight: 600; }
.plano-anual .economia { background: rgba(255, 255, 255, 0.14); color: var(--sobre-marinho); }
.economia-vazia { visibility: hidden; }
.plano .btn { margin-top: auto; }
.plano-anual { background: var(--marinho); color: var(--sobre-marinho); box-shadow: var(--sombra-card); }
.plano-anual .mono, .plano-anual .preco { color: var(--sobre-marinho); }
.plano-anual .periodo { color: var(--sobre-marinho-suave); }
.plano-anual .selo { position: absolute; top: -13px; left: 28px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--azul); color: var(--sobre-azul); font-size: 11px; }
/* O que cada plano dá, lado a lado e em lista: dois parágrafos corridos
   escondiam a diferença entre eles no meio do texto. */
.resumo-planos { margin: 28px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); max-width: 1120px; text-align: left; }
.resumo-plano { padding: 30px 28px; border-radius: var(--r-xl); background: var(--papel); box-shadow: var(--sombra-leve); }
.resumo-pro { box-shadow: inset 0 0 0 2px var(--azul), var(--sombra-leve); }
.resumo-plano h3 { font-size: 22px; color: var(--marinho); }
.resumo-pro h3 { color: var(--azul-70); }
.resumo-plano ul { margin-top: 18px; display: grid; gap: 14px; }
.resumo-plano li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.55; color: var(--tinta-2); }
.resumo-plano li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--azul-30); }
.resumo-pro li::before { background: var(--azul); }
.resumo-plano strong { color: var(--tinta); }
.nota-planos { margin: 22px auto 0; font-size: 15px; color: var(--tinta-3); }

.fechamento { padding: var(--secao-y) 0; background: var(--papel); box-shadow: inset 0 1px 0 var(--azul-15); text-align: center; }
.fechamento .miolo { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.titulo-grande { font-size: clamp(44px, 7vw, 88px); font-weight: 700; letter-spacing: -0.04em; color: var(--marinho); background: linear-gradient(100deg, var(--marinho) 30%, var(--azul) 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fechamento .lojas { justify-content: center; margin-top: 10px; }
/* 404: o que era style= inline, para a CSP não precisar de unsafe-inline. */
.pagina-404 { min-height: 100vh; display: grid; place-items: center; }
.sinal-404 { height: 44px; margin-bottom: 20px; }
.pagina-404-volta { margin-top: 24px; }

/* ───────────────────────────── Rodapé ───────────────────────────── */

.rodape { padding: 32px 0 24px; box-shadow: inset 0 1px 0 var(--azul-15); }
.rodape-faixa { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* Cinco itens não cabem numa linha de celular: o menu quebra por item inteiro. */
.rodape-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.rodape-links a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rodape-links a:hover { color: var(--tinta); }
.rodape-base { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--azul-15); }
.disclaimer { font-size: 13px; line-height: 1.5; color: var(--tinta-3); max-width: 72ch; }
.copyright { flex: none; }

/* ───────────────────────────── Movimento ───────────────────────────── */

/* Só com JS: o que vai entrar animado começa invisível. Sem JS, tudo à vista. */
.js [data-entrada], .js [data-revelar], .js [data-revelar-grupo] > * { opacity: 0; }
.js .malha i { opacity: 0; }
.js [data-blocos], .js [data-pista] .pista-faixa { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-entrada], .js [data-revelar], .js [data-revelar-grupo] > *, .js .malha i, .js [data-blocos], .js [data-pista] .pista-faixa { opacity: 1; }
  .btn, .loja, .menu a::after, .marca-sinal, .passos li, .passos li::before, .passo-n, .prontuario > div, .numeros > div, .plano, .card, .prova-folha li { transition: none; }
  .btn::before, .loja::before { display: none; }
  .secao-marinho::before, .secao-marinho::after, .pista.correndo .pista-faixa { animation: none; }
}

/* ───────────────────────────── Responsivo ───────────────────────────── */

@media (max-width: 960px) {
  .abertura-grade { grid-template-columns: 1fr; gap: 64px; }
  .abertura-visual { margin: 0 auto var(--legenda-altura); max-width: 460px; }
  .passos, .prontuario, .fatos, .planos, .resumo-planos, .simulado-grade { grid-template-columns: 1fr; }
  .prova { justify-self: start; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .menu { display: none; }
  .btn-topo { margin-left: auto; }
  .abertura-visual { max-width: 100%; }
  .blocos, .pista { height: 44px; }
  .prova { padding: 20px 18px 18px; }
  .prova-folha { gap: 6px; }
  /* Os quatro blocos, um por linha: o número à esquerda, o nome à direita. */
  .numeros { grid-template-columns: 1fr; gap: 12px; }
  .numeros > div { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px; padding: 20px 20px 18px; }
  .numeros dt { font-size: 30px; }
  .numeros dd { margin-top: 0; }
  .rodape-faixa, .rodape-base { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ─────────────── Página de texto: a política de privacidade ───────────────
   Gerada por scripts/politica-site.mjs. Medida de leitura (72ch), títulos
   de seção menores que o da página e o topo já compacto (não há JS lá). */
.pagina-texto { padding: calc(var(--topo-altura) + clamp(40px, 6vw, 80px)) 0 var(--secao-y); }
.artigo { max-width: 72ch; }
.artigo .titulo { max-width: none; }
.artigo-data { margin-top: 18px; }
.artigo .lead { margin-top: 22px; max-width: none; }
.artigo h2 { font-size: clamp(21px, 2vw, 26px); margin-top: 44px; }
.artigo h2 + p, .artigo p + p { margin-top: 12px; }
.artigo a { color: var(--azul-70); text-decoration: underline; text-underline-offset: 3px; }