/* ============================================
   OSMOS — Diagnóstico Inteligente (quiz.html)
   ============================================ */

.quiz-hero[hidden],
.quiz-app[hidden],
.quiz-result[hidden] { display: none; }

.quiz-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--section-pad) + 4rem) 0 var(--section-pad);
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800) 60%, var(--blue-deep));
  color: var(--white);
}
.quiz-hero .fade-up { opacity: 1; transform: translateY(0); animation: heroIn var(--dur-slow) var(--ease-premium) both; }
.quiz-hero .delay-1 { animation-delay: 0.15s; }
.quiz-hero .delay-2 { animation-delay: 0.3s; }
.quiz-hero .delay-3 { animation-delay: 0.45s; }

.quiz-hero-content { max-width: 760px; }
.quiz-hero-content h1 { color: var(--white); margin-bottom: 1.4rem; }
.quiz-hero-subtitle { margin-bottom: 2rem; }
.quiz-hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  font-size: 0.9rem; color: rgba(255,255,255,0.75);
  margin-bottom: 2.4rem;
}

.quiz-app { padding: calc(var(--section-pad) + 3rem) 0 var(--section-pad); min-height: 100vh; }
.quiz-app-content { max-width: 700px; }

.quiz-progress { margin-bottom: 2.5rem; }
.quiz-progress-bar {
  height: 4px; border-radius: 999px; background: var(--silver-soft); overflow: hidden;
  margin-bottom: 0.75rem;
}
.quiz-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-accent), var(--navy-800));
  transition: width var(--dur-med) var(--ease-premium);
}
.quiz-progress-label { font-size: 0.82rem; color: var(--ink-soft); letter-spacing: 0.03em; }

.quiz-card { margin-bottom: 2.5rem; }
.quiz-question {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-950);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.3; margin-bottom: 2rem;
}

.quiz-options { display: flex; flex-direction: column; gap: 0.9rem; }
.quiz-option {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; text-align: left;
  padding: 1.1rem 1.4rem;
  border: 1.5px solid var(--silver-soft);
  border-radius: 16px;
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease-premium), background var(--dur-fast), transform var(--dur-fast);
}
.quiz-option:hover { border-color: var(--blue-accent-soft); transform: translateY(-2px); }
.quiz-option.selected { border-color: var(--blue-accent); background: rgba(79,195,232,0.08); }

.quiz-option-letter {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
  background: var(--off-white); color: var(--navy-900);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.quiz-option.selected .quiz-option-letter { background: var(--blue-accent); color: var(--white); }
.quiz-option-text { color: var(--ink); font-size: 0.98rem; }

.quiz-nav { display: flex; justify-content: flex-start; }

.quiz-result {
  min-height: 100vh; display: flex; align-items: center;
  padding: var(--section-pad) 0;
  background: var(--off-white);
}
.quiz-result-content { max-width: 640px; text-align: center; margin: 0 auto; }
.quiz-result .drop-icon {
  display: inline-flex; width: 48px; height: 48px; color: var(--blue-accent);
  margin-bottom: 1.5rem;
}
.quiz-result .drop-icon svg { width: 100%; height: 100%; }
.quiz-result-desc { color: var(--ink-soft); font-size: 1.05rem; margin: 1.25rem 0 2.2rem; }
.quiz-result-actions { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }

@media (max-width: 640px) {
  .quiz-option { padding: 0.9rem 1.1rem; }
  .quiz-progress-label { font-size: 0.78rem; }
}