/* Quiz Forjados · estilos do quiz, em cima de sistema-visual/tokens.css e
   components/bundle.css. Tema claro em todas as telas. Celular primeiro: coluna
   única de até 480px, ações presas no rodapé. */

/* scroll-padding: o foco do teclado não fica escondido sob o topo e o rodapé presos */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 104px; scroll-padding-bottom: 136px; color-scheme: only light; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fj-q .fj-botao { font-weight: 600; line-height: 20px; }

/* Estrutura */
.fj-q { display: flex; flex: 1 0 auto; flex-direction: column; width: 100%; max-width: 480px; margin: 0 auto; }
.fj-q-topo { position: sticky; top: 0; z-index: 2; padding: var(--espaco-2) var(--espaco-4) var(--espaco-3); padding-top: max(var(--espaco-2), env(safe-area-inset-top)); background: var(--fundo); }
.fj-q-topo__linha { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); min-height: var(--alvo-minimo); }
.fj-q-topo__linha--so-logo { padding-top: var(--espaco-2); }
.fj-q-topo__logo { display: inline-flex; align-items: center; }
.fj-q-logo { height: 28px; width: auto; }
.fj-q-voltar { gap: 2px; margin-left: calc(var(--espaco-3) * -1); padding-left: var(--espaco-2); }
.fj-q-contador { color: var(--texto-suave); }
.fj-q-barra { margin-top: var(--espaco-2); }

.fj-q-tela { flex: 1 0 auto; padding: var(--espaco-4) var(--espaco-4) var(--espaco-8); }
.fj-q-tela:focus, .fj-q-tela h1:focus { outline: none; }

.fj-q-rodape { position: sticky; bottom: 0; z-index: 2; padding: var(--espaco-3) var(--espaco-4); padding-bottom: max(var(--espaco-3), env(safe-area-inset-bottom)); background: var(--fundo); border-top: var(--linha) solid var(--borda); }
.fj-q-rodape:empty { display: none; }
.fj-q-rodape__pilha { display: flex; flex-direction: column; gap: var(--espaco-2); }

.fj-q-largo { width: 100%; min-height: 52px; padding: var(--espaco-3) var(--espaco-5); white-space: normal; text-align: center; }

.fj-q-rotulo { color: var(--texto-suave); }
.fj-q-lead { font-size: 18px; line-height: 28px; color: var(--texto-secundario); }
.fj-q-nota { color: var(--texto-suave); text-align: center; }
.fj-q-aviso { margin-bottom: var(--espaco-2); color: var(--erro); }
.fj-q-aviso:empty { display: none; }

/* Abertura */
.fj-q-abertura { display: flex; flex-direction: column; gap: var(--espaco-4); padding-top: var(--espaco-4); }
.fj-q-display { font-family: var(--font-titulo); font-weight: 800; font-size: clamp(32px, 9vw, 44px); line-height: 1.08; text-wrap: balance; }

/* Pergunta */
.fj-q-pergunta { display: flex; flex-direction: column; gap: var(--espaco-2); padding-top: var(--espaco-2); }
.fj-q-pergunta__titulo { font-family: var(--font-titulo); font-weight: 700; font-size: clamp(22px, 6.2vw, 28px); line-height: 1.22; text-wrap: balance; }
.fj-q-pergunta__dica { color: var(--texto-secundario); }
.fj-q-opcoes { display: flex; flex-direction: column; gap: var(--espaco-2); margin-top: var(--espaco-4); }
.fj-q-opcao { display: flex; align-items: center; gap: var(--espaco-3); width: 100%; min-height: 56px; padding: var(--espaco-3) var(--espaco-4); border: var(--linha) solid var(--borda-controle); border-radius: var(--canto-2); background: var(--superficie-alta); color: var(--texto); font-size: 16px; line-height: 22px; text-align: left; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; }
.fj-q-opcao:active { background: var(--superficie); }
@media (hover: hover) { .fj-q-opcao:hover { border-color: var(--texto); } }
.fj-q-opcao__marca { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border: 1.5px solid var(--borda-controle); border-radius: var(--canto-total); color: transparent; }
.fj-q-opcao--multipla .fj-q-opcao__marca { border-radius: var(--canto-1); }
.fj-q-opcao__marca .fj-icone { width: 14px; height: 14px; }
/* Escolhida: contorno de 2px, marca cheia e check (nunca só cor) */
.fj-q-opcao[aria-pressed="true"] { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); background: var(--superficie); }
.fj-q-opcao[aria-pressed="true"] .fj-q-opcao__marca { border-color: var(--texto); background: var(--texto); color: var(--superficie-alta); }

/* Resultado e oferta */
.fj-q-resultado, .fj-q-oferta { display: flex; flex-direction: column; gap: var(--espaco-5); padding-top: var(--espaco-2); }
.fj-q-rotulo + .fj-q-titulo, .fj-q-rotulo + .fj-q-ponte { margin-top: calc(var(--espaco-3) * -1); }
.fj-q-titulo { font-family: var(--font-titulo); font-weight: 800; font-size: clamp(28px, 7.6vw, 36px); line-height: 1.14; text-wrap: balance; }
.fj-q-texto { display: flex; flex-direction: column; gap: var(--espaco-4); max-width: var(--medida-leitura); font-size: 18px; line-height: 28px; }
.fj-q-caminho .fj-destaque__conteudo { font-size: 17px; line-height: 27px; }
.fj-q-simbolo { width: 20px; height: 28px; }
.fj-q-secundaria { padding: var(--espaco-4) var(--espaco-5); border-radius: var(--canto-2); background: var(--superficie); }

/* Oferta */
.fj-q-oferta { gap: var(--espaco-6); }
.fj-q-transicao { display: flex; flex-direction: column; gap: var(--espaco-2); }
.fj-q-transicao__linha { font-size: 17px; line-height: 26px; font-weight: 600; color: var(--texto); }
.fj-q-transicao__comum { color: var(--texto-secundario); }
.fj-q-oferta__topo { display: flex; flex-direction: column; gap: var(--espaco-3); }
.fj-q-oferta__topo .fj-q-lead { font-size: 17px; line-height: 26px; }
.fj-q-preco { margin-top: var(--espaco-1); font-family: var(--font-titulo); font-weight: 800; font-size: 36px; line-height: 40px; }
.fj-q-condicoes { margin-top: calc(var(--espaco-2) * -1); color: var(--texto-secundario); }
.fj-q-cta { display: flex; flex-direction: column; gap: var(--espaco-2); }
.fj-q-microtexto { color: var(--texto-secundario); text-align: center; }
.fj-q-secao { display: flex; flex-direction: column; gap: var(--espaco-3); padding-top: var(--espaco-5); border-top: var(--linha) solid var(--borda); }
.fj-q-lista { display: flex; flex-direction: column; gap: var(--espaco-3); }
.fj-q-lista li { display: flex; align-items: flex-start; gap: var(--espaco-3); }
.fj-q-lista .fj-icone { flex-shrink: 0; margin-top: 2px; }
.fj-q-passos { display: flex; flex-direction: column; gap: var(--espaco-2); padding-left: var(--espaco-6); list-style: decimal; }
.fj-q-duvidas { display: flex; flex-direction: column; gap: var(--espaco-4); margin: 0; }
.fj-q-duvida { display: flex; flex-direction: column; gap: var(--espaco-1); }
.fj-q-duvida dd { margin: 0; color: var(--texto-secundario); }
.fj-q-final .fj-destaque__conteudo { gap: var(--espaco-3); }
.fj-q-final .fj-q-microtexto { color: var(--texto-secundario); }

.fj-q-noscript { max-width: 480px; margin: 0 auto; padding: var(--espaco-6) var(--espaco-4); }

/* Celulares pequenos (largura até 359px ou altura até 600px): preço e 1º botão antes da rolagem */
@media (max-width: 359px), (max-height: 600px) {
  .fj-q-oferta { gap: var(--espaco-4); }
  .fj-q-tela:has(.fj-q-oferta) { padding-top: var(--espaco-2); }
  .fj-q-transicao { gap: var(--espaco-1); }
  .fj-q-transicao__linha { font-size: 15px; line-height: 21px; }
  .fj-q-transicao__comum { font-size: 14px; line-height: 20px; }
  .fj-q-oferta .fj-q-titulo { font-size: 24px; line-height: 28px; }
  .fj-q-oferta__topo { gap: var(--espaco-2); }
  .fj-q-oferta__topo .fj-q-lead { font-size: 15px; line-height: 22px; }
  .fj-q-preco { font-size: 28px; line-height: 32px; margin-top: 0; }
  .fj-q-condicoes { margin-top: 0; }
}

@media (min-width: 720px) {
  .fj-q-tela { padding-top: var(--espaco-8); }
}