/* Tela do formulário: uma pergunta por vez, no mesmo marinho da capa. */
.aplicacao { min-height: 100vh; min-height: 100dvh; background: var(--fundo); }
.aplicacao .topo { padding-bottom: 8px; }
.aplicacao .secao { padding-block: 16px 32px; }
.pergunta { transition: opacity 500ms var(--mola), transform 500ms var(--mola); }
.pergunta.entrando { opacity: 0; transform: translateY(16px); }
.pergunta h2:focus { outline: none; }
.pergunta .texto { color: var(--texto-2); }
.pergunta .linha-pergunta { font-size: 18px; line-height: 28px; font-weight: 600; }
.pergunta .limite { font-size: 14px; line-height: 20px; color: var(--ouro); }
.pergunta .extra { display: flex; flex-direction: column; gap: 8px; }
.pergunta .extra label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--texto-2); }
.pergunta .status { font-size: 14px; line-height: 20px; color: var(--texto-2); }
.pergunta [hidden] { display: none; }
.aplicacao .cartao-case { margin-top: 24px; }
.isca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Aviso de rascunho ("Continuar de onde parou?") */
.aviso-rascunho {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--cartao); border: 1px solid rgba(217, 178, 106, 0.45); border-radius: var(--raio);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.aviso-rascunho p { font-weight: 600; }
.aviso-rascunho .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.aviso-rascunho .botao { flex: 1 1 140px; }
.botao--contorno { background: transparent; color: var(--texto); border: 1px solid var(--linha); }
.botao--contorno:hover { background: var(--cartao-2); }

@media (min-width: 768px) {
  .aviso-rascunho { left: auto; right: 32px; bottom: 32px; max-width: 420px; }
  .aplicacao .secao { padding-block: 24px 48px; }
}