/* Tests interactivos — mismo design system editorial. */

.quiz-wrap {
	width: min(640px, calc(100% - 32px));
	margin: 48px auto 80px;
}

.quiz-screen { display: none; }
.quiz-screen.is-visible { display: block; animation: lda-in .35s ease; }
@keyframes lda-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.quiz-card {
	background: #fff;
	border: 1px solid var(--line);
	padding: 36px 28px 40px;
}
@media (min-width: 640px) {
	.quiz-card { padding: 48px 44px; }
}

.quiz-title { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 8px 0 12px; }
.quiz-subtitle { color: var(--gold); font-weight: 600; margin-bottom: 14px; }
.quiz-intro-text, .quiz-gate-text { color: var(--ink-soft); margin-bottom: 22px; }
.quiz-meta { color: var(--ink-faint); font-size: 14px; margin-bottom: 28px; }

.quiz-progress { margin-bottom: 22px; }
.quiz-progress-track { height: 3px; background: var(--line); }
.quiz-progress-fill { height: 3px; width: 0; background: var(--gold); transition: width .3s ease; }
.quiz-progress-label { font-size: 13px; color: var(--ink-faint); margin-top: 8px; }

.quiz-question { font-size: 1.45rem; margin-bottom: 22px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-option {
	text-align: left;
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 14px 16px;
	font: inherit;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.quiz-option:hover { border-color: var(--gold-soft); }
.quiz-option.is-picked { background: var(--gold-wash); border-color: var(--gold); }

.quiz-back {
	margin-top: 18px;
	background: none;
	border: 0;
	color: var(--ink-faint);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
}

.quiz-gate-form { display: grid; gap: 10px; }
.quiz-gate-form input[type="text"],
.quiz-gate-form input[type="email"] {
	padding: 12px 14px;
	border: 1px solid var(--line);
	font: inherit;
	background: var(--paper);
}
.quiz-gate-error { color: #9b3b32; font-size: 14px; }
.quiz-gate-note, .quiz-email-note { font-size: 13px; color: var(--ink-faint); margin-top: 12px; }

.quiz-loading { text-align: center; color: var(--ink-soft); }

.quiz-result-emoji { font-size: 2.4rem; margin: 8px 0; }
.quiz-score-ring {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 8px 0 12px;
}
.quiz-score-number { font-family: var(--serif); font-size: 3.2rem; line-height: 1; }
.quiz-score-unit { color: var(--ink-faint); }
.quiz-result-title { font-size: 1.8rem; margin: 8px 0 8px; }
.quiz-result-tagline { color: var(--gold); font-weight: 600; margin-bottom: 16px; }
.quiz-result-summary p { margin-bottom: 12px; color: var(--ink-soft); }

.quiz-breakdown { margin: 20px 0; display: grid; gap: 12px; }
.quiz-bar-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); }
.quiz-bar-track { height: 4px; background: var(--line); margin-top: 6px; }
.quiz-bar-fill { height: 4px; width: 0; background: var(--gold); transition: width .6s ease; }

.quiz-result-box {
	border-left: 3px solid var(--gold);
	padding: 12px 0 12px 16px;
	margin: 18px 0;
}
.quiz-result-box h3 { font-size: 1rem; margin-bottom: 6px; }

.quiz-cta-app { display: inline-block; margin-top: 8px; }
.quiz-share {
	display: block;
	margin-top: 16px;
	background: none;
	border: 0;
	color: var(--gold);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
}