/* ===== Quiz ===== */
.quiz { overflow: hidden; }
.quiz__orb { width: 540px; height: 540px; top: -160px; right: -140px; background: radial-gradient(circle, rgba(199,163,100,0.16), transparent 70%); }
.quiz__shell {
  max-width: 760px; margin: 0 auto; text-align: center;
}
.quiz__intro-head { margin-bottom: 30px; }
.quiz__intro-head .eyebrow { justify-content: center; }
.quiz__panel {
  background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
  border: 1px solid rgba(199,163,100,0.22);
  border-radius: var(--r-xl); padding: 46px 44px; min-height: 320px;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--sh-lg);
}
.quiz__bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; margin: -10px 0 28px; overflow: hidden; }
.quiz__bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); border-radius: 4px; transition: width .4s var(--ease); }
.quiz__view { animation: quizIn .5s var(--ease) both; opacity: 1; display: flex; flex-direction: column; align-items: center; }
@keyframes quizIn { from { transform: translateY(14px); } to { transform: none; } }
.quiz__count { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); white-space: nowrap; }
.quiz__q { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); color: var(--t-on-dark); margin: 12px 0 26px; max-width: 16em; }
.quiz__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 520px; }
.quiz__opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14);
  color: var(--t-on-dark); padding: 16px 18px; border-radius: var(--r);
  font-family: var(--font-body); font-size: 15px; cursor: pointer;
  transition: all .3s var(--ease);
}
.quiz__opt-mark { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--navy-500); flex: none; transition: all .3s var(--ease); }
.quiz__opt:hover { border-color: var(--gold-400); background: rgba(199,163,100,0.1); transform: translateY(-2px); }
.quiz__opt:hover .quiz__opt-mark, .quiz__opt.is-sel .quiz__opt-mark { border-color: var(--gold-400); background: var(--gold-400); box-shadow: inset 0 0 0 3px var(--navy-700); }
.quiz__back { background: none; border: 0; color: var(--t-on-dark-muted); cursor: pointer; margin-top: 22px; font-size: 13.5px; font-family: var(--font-body); transition: color .3s; }
.quiz__back:hover { color: var(--gold-300); }

.quiz__res-body { color: var(--t-on-dark-soft); font-size: 16px; line-height: 1.7; max-width: 30em; }
.quiz__rec { margin: 26px 0 6px; padding: 18px 26px; background: rgba(199,163,100,0.12); border: 1px solid rgba(199,163,100,0.3); border-radius: var(--r); }
.quiz__rec-l { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 4px; }
.quiz__rec strong { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--t-on-dark); }
.quiz__res-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.quiz__disc { font-size: 11.5px; color: var(--t-on-dark-muted); margin-top: 20px; }

/* migrado de estilos inline */
.quiz__title { margin-top: 14px; }
.quiz__lead { max-width: 32em; }
.quiz__start { margin-top: 28px; }

@media (max-width: 560px) {
  .quiz__panel { padding: 32px 22px; }
  .quiz__opts { grid-template-columns: 1fr; }
}