/* Estilos del quiz embebido (eneagrama y personalidad). Sin estilos inline: CSP style-src 'self'. */
.quiz-section { max-width: 760px; margin: 0 auto; padding: 0 1rem; scroll-margin-top: 5rem }
.quiz-card { background: var(--card-bg); border: 1px solid var(--border-highlight); border-radius: 1.25rem; padding: 2rem 1.5rem; margin: 2rem 0; color: var(--text-primary) }
.quiz-intro { text-align: center }
.quiz-title { font-size: 1.6rem; margin: 0 0 .75rem; color: var(--text-primary) }
.quiz-title:focus, .quiz-question:focus { outline: none }
.quiz-lead { color: var(--text-secondary); font-size: 1.05rem; margin: 0 0 1.5rem }
.quiz-count { color: var(--text-tertiary); font-size: .85rem; margin: 0 0 .5rem }
.quiz-progress, .quiz-bar { width: 100%; height: .5rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--accent-subtle); accent-color: var(--accent-primary); appearance: none }
.quiz-progress::-webkit-progress-bar, .quiz-bar::-webkit-progress-bar { background: var(--accent-subtle); border-radius: 999px }
.quiz-progress::-webkit-progress-value, .quiz-bar::-webkit-progress-value { background: var(--accent-primary); border-radius: 999px }
.quiz-progress::-moz-progress-bar, .quiz-bar::-moz-progress-bar { background: var(--accent-primary); border-radius: 999px }
.quiz-question { font-size: 1.35rem; line-height: 1.4; margin: 1.5rem 0 1.25rem; color: var(--text-primary) }
.quiz-options { display: grid; gap: .6rem }
.quiz-option { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 3rem; padding: .7rem 1rem; text-align: left; background: var(--surface-alt); color: var(--text-primary); border: 1px solid var(--border); border-radius: .75rem; font: inherit; cursor: pointer }
.quiz-option:hover, .quiz-option:focus-visible { border-color: var(--accent-primary); outline: none }
.quiz-option.is-selected { border-color: var(--accent-primary); background: var(--accent-subtle) }
.quiz-option-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-subtle); color: var(--accent-primary); font-weight: 700; font-size: .9rem }
.quiz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; gap: 1rem }
.quiz-back { background: none; border: 0; color: var(--accent-primary); font: inherit; cursor: pointer; padding: .5rem 0; text-decoration: underline }
.quiz-hint { color: var(--text-tertiary); font-size: .8rem }
.quiz-note { color: var(--text-secondary); font-size: .95rem; margin: .5rem 0 }
.quiz-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.25rem 0 }
.quiz-block { background: var(--surface-alt); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem 1.25rem }
.quiz-block h4 { margin: 0 0 .4rem; color: var(--accent-primary); font-size: .95rem }
.quiz-block p, .quiz-block li { font-size: .92rem; color: var(--text-secondary); margin: 0 0 .3rem }
.quiz-block ul { margin: 0; padding-left: 1.1rem }
.quiz-growth { color: var(--text-primary); font-size: 1rem; margin: 1rem 0 }
.quiz-sub { font-size: 1.1rem; margin: 1.5rem 0 .75rem; color: var(--text-primary) }
.quiz-bars, .quiz-traits { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem }
.quiz-bars li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 3rem; align-items: center; gap: .75rem; font-size: .9rem; color: var(--text-secondary) }
.quiz-bar-num { text-align: right; font-variant-numeric: tabular-nums }
.quiz-trait { background: var(--surface-alt); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem 1.25rem }
.quiz-trait-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; gap: 1rem }
.quiz-trait-level { color: var(--accent-primary); font-size: .85rem; font-weight: 600 }
.quiz-trait-text { margin: .6rem 0 0; font-size: .92rem; color: var(--text-secondary) }
.quiz-disclaimer { color: var(--text-tertiary); font-size: .82rem; margin: 1.5rem 0 0 }
.quiz-cta { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: center }
.quiz-cta h3 { margin: 0 0 .5rem; font-size: 1.25rem }
.quiz-cta p { color: var(--text-secondary); margin: 0 auto 1.25rem; max-width: 34rem }
.quiz-other { display: block; margin-top: 1rem; color: var(--accent-primary) }
@media (max-width: 520px) {
  .quiz-card { padding: 1.5rem 1rem }
  .quiz-bars li { grid-template-columns: 1fr 3rem; }
  .quiz-bars .quiz-bar-label { grid-column: 1 / -1 }
  .quiz-hint { display: none }
}