/* Telas das perguntas e o "calculando", no mesmo marinho da capa. */
.aplicacao { min-height: 100vh; min-height: 100dvh; background: var(--fundo); }
.aplicacao .topo { padding-bottom: 8px; }
.aplicacao .secao { padding-block: 24px 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 .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 .ou { text-align: center; font-size: 14px; line-height: 20px; color: var(--texto-2); }
.pergunta [hidden] { display: none; }
.aplicacao .cartao-case { margin-top: 24px; }

/* Calculando o diagnóstico: anel girando e frases trocando */
.calculando { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-block: 96px 64px; }
.calculando .giro {
  width: 64px; height: 64px; border-radius: 999px; border: 4px solid rgba(217, 178, 106, 0.18); border-top-color: var(--ouro);
  box-shadow: 0 0 32px rgba(217, 178, 106, 0.18); animation: gira 900ms linear infinite;
}
.calculando h2 { font-size: 20px; line-height: 28px; }
.calculando p { font-size: 14px; line-height: 20px; color: var(--texto-2); min-height: 40px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* 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); }

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

@media (prefers-reduced-motion: reduce) {
  /* O anel ainda gira devagar: é o sinal de que o diagnóstico está sendo feito. */
  .calculando .giro { animation: gira 2.4s linear infinite !important; }
}

/* Passar o mouse: só onde existe mouse (no toque, o destaque ficaria preso na opção tocada). */
@media (hover: hover) {
  .botao--contorno:hover { background: var(--cartao-2); }
}