/* Fallback com as MÉTRICAS da fonte da marca (Arial ajustada): enquanto Sora e
   Figtree baixam (display=swap), o texto já ocupa a mesma largura e altura, e a
   troca não empurra o layout (CLS de 0,049 em 1024 vinha disso: hero + topo).
   Valores medidos no Brave: largura do texto e ascent/descent a 100 px. UMA face
   por faixa de peso: local("Arial") só casa a Regular, e o negrito sintético sai
   6% mais estreito que a Arial Bold de verdade (foi o que furou a 1ª tentativa). */
@font-face { font-family: "Sora Fallback"; font-weight: 100 599; src: local("Arial"), local("ArialMT"); size-adjust: 112.9%; ascent-override: 85.9%; descent-override: 25.7%; line-gap-override: 0%; }
@font-face { font-family: "Sora Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 107.5%; ascent-override: 90.2%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; font-weight: 100 599; src: local("Arial"), local("ArialMT"); size-adjust: 99%; ascent-override: 95.9%; descent-override: 25.2%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 96.2%; ascent-override: 98.8%; descent-override: 26%; line-gap-override: 0%; }
/* Base visual do site. Toda cor e fonte é custom property: marca.js as
   sobrescreve a partir de marca/marca.json. Mobile-first; 20px de margem
   lateral; alvos de toque >= 48px. */

:root {
  /* Padrões = paleta IQNorth (marca/marca.json). marca.js sobrescreve em
     tempo de execução, então trocar a marca é trocar o json. */
  --cor-primaria: #3A34C4;
  --cor-primaria-escura: #2A2596;
  --cor-primaria-clara: #EFEEFD;
  --cor-primaria-texto: #ffffff;
  --cor-acento: #E9A23B;
  --cor-acento-texto: #9A5B07;
  --cor-fundo: #F7F5F0;
  --cor-superficie: #FFFFFF;
  --cor-superficie-2: #EFECE5;
  --cor-texto: #14172E;
  --cor-texto-suave: #545A73;
  --cor-borda: #E2DED4;
  --cor-sucesso: #1A7550;
  --cor-erro: #B93A26;
  --cor-foco: #E9A23B;
  --cor-noite: #0E1024;
  --cor-noite-superficie: #191C38;
  --cor-texto-noite: #F2F0EA;
  --cor-texto-noite-suave: #A7ABC6;
  --cor-primaria-noite: #8F8BFF;

  --fonte-sistema: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* DS v2 (marca/ds-v2): Sora nos títulos, números e botões; Figtree no resto */
  --fonte-titulo: "Sora", "Sora Fallback", "Figtree", var(--fonte-sistema);
  --fonte-corpo: "Figtree", "Figtree Fallback", var(--fonte-sistema);

  --raio: 22px;
  --raio-m: 16px;
  --raio-p: 8px;
  --sombra: var(--q-sombra-1);
  --sombra-elevada: var(--q-sombra-2);
  --sombra-cta: var(--q-sombra-cta);
  --gutter: 20px;
  --largura-quiz: 480px;
  --largura-lp: 1040px;
  /* barra de rolagem e seleção de texto da marca (pedido do dono, 27/set) */
  --scroll-largura: 10px;
  --scroll-trilho: var(--cor-fundo);
  /* polegar em repouso a 3,2:1 sobre o papel (WCAG 1.4.11; no celular não há hover) */
  --scroll-polegar: rgb(58 52 196 / 60%);
  --scroll-polegar-hover: rgb(58 52 196 / 80%);
  --selecao-fundo: #DCDAFB;        /* índigo claro; tinta sobre ele 13:1 */
  --selecao-texto: #14172E;
}
/* fundo noite: trilho escuro, polegar índigo claro; seleção índigo com texto claro (7,5:1) */
[data-tema="noite"], .q-card--noite {
  --scroll-trilho: var(--cor-noite);
  --scroll-polegar: rgb(143 139 255 / 60%);    /* 3,1:1 sobre o noite */
  --scroll-polegar-hover: rgb(143 139 255 / 80%);
  --selecao-fundo: #3A34C4;
  --selecao-texto: #F2F0EA;
}

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

/* Rolagem: só o visual muda, o comportamento é o nativo (sem scroll-jacking).
   Chromium/Safari: ::-webkit-scrollbar fina, polegar com raio total. O Chromium
   ignora o ::-webkit-scrollbar quando scrollbar-color/width estão definidos,
   então as propriedades padrão ficam só para quem não tem o pseudo (Firefox). */
/* só com mouse: no toque a barra é a nativa sobreposta, que não rouba largura
   (a barra fixa de 10 px tirava 10 px da margem direita no celular) */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: var(--scroll-largura); height: var(--scroll-largura); }
  ::-webkit-scrollbar-track { background: var(--scroll-trilho); }
  ::-webkit-scrollbar-thumb { background: var(--scroll-polegar); border-radius: 999px; border: 2px solid var(--scroll-trilho); }
  ::-webkit-scrollbar-thumb:hover { background: var(--scroll-polegar-hover); }
  ::-webkit-scrollbar-corner { background: var(--scroll-trilho); }
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-polegar) var(--scroll-trilho); }
}
/* Seleção de texto da marca. Nada fica sem poder selecionar, exceto controles
   de toque (botões e alternativas do quiz), onde marcar texto sem querer atrapalha. */
::selection { background: var(--selecao-fundo); color: var(--selecao-texto); }
button, .btn, .q-btn, .alt, [role="button"] { -webkit-user-select: none; user-select: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--q-texto, var(--cor-texto));
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.08; margin: 0 0 .4em; letter-spacing: -0.03em; text-wrap: balance; color: var(--cor-texto); }
h1 { font-size: clamp(34px, 7vw, 56px); }
h2 { font-size: clamp(26px, 4.6vw, 36px); letter-spacing: -0.025em; }
h1 em, h2 em { font-style: normal; color: var(--cor-primaria); }
/* Em fundo noite o título volta à cor clara. A cor escura dos títulos (DS v2)
   vencia a herança e deixou "Pronto para começar?" invisível no CTA final. */
[data-tema="noite"] :is(h1, h2, h3), .q-card--noite :is(h1, h2, h3) { color: var(--cor-texto-noite); }
h3 { font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin: 0 0 .4em; letter-spacing: -0.01em; color: var(--cor-texto); }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--cor-primaria); }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 3px; border-radius: 6px; }
/* títulos recebem foco por código a cada troca de tela (leitor de tela); sem anel */
[tabindex="-1"]:focus { outline: none; }
.topo #email-topo { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ---------- botões (q-btn do DS v2: altura FIXA, uma linha) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 52px; min-height: 52px; padding: 0 28px; max-width: 100%;
  border: 0; border-radius: 999px;
  background: var(--cor-primaria); color: var(--cor-primaria-texto);
  font: 600 17px/1 var(--fonte-titulo); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--sombra-cta);
  transition: background-color var(--duration-quick) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out);
}
@media (hover: hover) { .btn:hover { background: var(--cor-primaria-escura); } }
.btn:active { transform: scale(.98); }
.btn:disabled { background: var(--q-sup-2); color: var(--q-apagado); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-bloco { display: flex; width: 100%; }
.btn-sec { background: var(--q-sup); color: var(--cor-texto); box-shadow: inset 0 0 0 1.5px var(--q-borda-forte); }
@media (hover: hover) { .btn-sec:hover { background: var(--q-sup); box-shadow: inset 0 0 0 1.5px var(--cor-texto); } }
.btn-link { background: none; border: 0; color: var(--cor-texto-suave); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 8px; }

/* ---------- cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 10px var(--gutter); background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}
.marca { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--cor-texto); font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: -0.03em; font-size: 1.6rem; }
.marca [data-logo] { width: 28px; height: 28px; display: inline-flex; color: var(--cor-primaria); }
.marca [data-logo] svg, .logo-img { width: 100%; height: 100%; }
.logo-completo { height: 30px; width: auto; }

.contador { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.contador strong { color: var(--cor-texto); }
.cronometro { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--cor-borda); border-radius: 999px; background: var(--cor-superficie); color: var(--cor-texto); }
.progresso { height: 4px; background: var(--cor-superficie-2); }
.progresso > div { height: 100%; width: 0; background: var(--cor-primaria); transition: width var(--duration-slow) var(--ease-smooth-out); }

.rodape { padding: 32px var(--gutter) 48px; background: var(--cor-superficie-2); color: var(--cor-texto-suave); font-size: .9rem; }
.rodape .dentro { max-width: var(--largura-lp); margin: 0 auto; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 16px; }
.rodape a { color: var(--cor-texto-suave); display: inline-block; padding: 8px 0; }
.aviso-exemplo { background: #fff1d6; color: #5a3d00; font-size: .85rem; padding: 8px var(--gutter); text-align: center; }

/* M5: placeholder com contraste de texto (texto_suave dá 6,2:1 no papel) */
::placeholder { color: var(--cor-texto-suave); opacity: 1; }

/* L3: pulo por âncora não esconde o título sob o cabeçalho fixo */
section[id], h2 { scroll-margin-top: 84px; }
/* L5: links do rodapé com alvo de toque de 44 px */
.rodape a { min-height: 44px; display: inline-flex; align-items: center; }
[tabindex="-1"]:focus:not(:focus-visible), section[tabindex="-1"]:focus { outline: none; }

/* Campo da marca para texto longo (ui.js campoTexto): o .q-campo do DS com
   textarea. 16 px (sem zoom no iOS), rótulo flutuante, sem alça nativa, cresce
   com o texto até 320 px e depois rola por dentro. */
.q-campo--area .q-campo__caixa { height: auto; min-height: 132px; align-items: stretch; }
.q-campo textarea {
  all: unset; display: block; box-sizing: border-box; flex: 1; min-width: 0; width: 100%;
  min-height: 132px; max-height: 320px; overflow-y: auto; field-sizing: content;
  padding: 30px 0 14px; font: 500 16px/1.5 var(--q-ui, var(--fonte-corpo)); color: var(--q-tinta); caret-color: var(--q-prim);
  white-space: pre-wrap; overflow-wrap: anywhere; resize: none;
}
.q-campo.q-campo--area label { top: 29px; }
/* field-sizing: content dá ao textarea largura intrínseca do texto; em grid isso estourava o cartão */
.q-campo--area, .q-campo--area .q-campo__caixa { min-width: 0; }
.q-campo textarea { field-sizing: fixed; }
@supports (field-sizing: content) { .q-campo textarea { field-sizing: content; width: 100%; min-width: 0; max-width: 100%; } }
.q-campo textarea::placeholder { color: transparent; }
.q-campo textarea:focus + label,
.q-campo textarea:not(:placeholder-shown) + label { transform: translateY(-19px) scale(0.78); }
.q-campo textarea:focus + label { color: var(--q-prim); }
/* link-botão desativado (ex.: "Reenviar código em 59 s") não parece clicável (QA R7-L2) */
.btn-link:disabled { color: var(--q-apagado, #8A8FA6); text-decoration: none; cursor: default; }

/* Autopreenchimento do navegador (bug do dono no /entrar): o Chrome pinta um
   fundo azul só na caixa do <input>, que terminava antes dos ícones de estado,
   e o rótulo não subia (o :placeholder-shown não muda no autofill). Agora o
   input ocupa a caixa toda, os ícones de estado ficam por cima, o fundo do
   autofill é o do campo e o rótulo sobe. */
.q-campo__caixa { position: relative; }
.q-campo__estado { position: absolute; right: 16px; top: 50%; margin-top: -10px; pointer-events: none; }
.q-campo input { padding-right: 32px; }
/* Hover do "Nome no certificado" (dono, 28/set): o autofill era pintado NO
   INPUT (sombra branca de 1000 px), um retângulo sem raio que começava depois
   do ícone e parava antes do fim, visível sobre a caixa com erro, desligada
   ou na prévia do autofill (hover na sugestão). Regra: o input nunca tem
   fundo, borda nem sombra; hover, foco, erro e autofill pintam a CAIXA. O
   fundo que o navegador força no autofill (!important do UA) é segurado
   transparente pela transição de 600000 s, que também segura a prévia
   (hover na sugestão do navegador). */
.q-campo input, .q-campo textarea { background: transparent; border: 0; box-shadow: none; transition: background-color 600000s 0s; }
.q-campo input:-webkit-autofill, .q-campo input:-webkit-autofill:hover, .q-campo input:-webkit-autofill:focus, .q-campo input:autofill {
  -webkit-box-shadow: none; box-shadow: none; background-clip: text;
  -webkit-text-fill-color: var(--q-tinta, var(--cor-texto)); caret-color: var(--q-tinta, var(--cor-texto));
  transition: background-color 600000s 0s, color 600000s 0s;
}
.q-campo__caixa:has(input:-webkit-autofill) { background: color-mix(in srgb, var(--q-prim-100, #EEF0FF) 55%, var(--q-sup, #fff)); }
.q-campo__caixa:has(input:autofill) { background: color-mix(in srgb, var(--q-prim-100, #EEF0FF) 55%, var(--q-sup, #fff)); }
.q-campo.is-erro .q-campo__caixa:has(input:autofill) { background: #FFFCFB; }
.q-campo input:-webkit-autofill + label, .q-campo input:autofill + label { transform: translateY(-19px) scale(0.78); }