/* CP Quiz — Charutos Prime — paleta gold/dark */
:root{
	--cpq-gold: #C9A84C;
	--cpq-gold-soft: #E0C278;
	--cpq-dark: #0D0625;
	--cpq-dark-2: #08041A;
	--cpq-surface: #1A1038;
	--cpq-surface-2: #22153F;
	--cpq-text: #E8DFCC;
	--cpq-text-muted: #B8A88E;
	--cpq-text-dim: #8A7A60;
	--cpq-border: #3A2E50;
	--cpq-radius: 8px;
}

html body.cp-quiz-page,
html body.cp-quiz-page .wd-page-content,
html body.cp-quiz-page .main-page-wrapper,
html body.cp-quiz-page #main-content,
html body.cp-quiz-page main#main-content.container,
html body.cp-quiz-page .cp-quiz-wrap,
html body.cp-quiz-page .cp-quiz-hero,
html body.cp-quiz-page .cp-quiz-result-hero {
	background-color: #0D0625 !important;
	background-image: none !important;
}
html body.cp-quiz-page .cp-quiz-explain {
	background-color: #08041A !important;
}
html body.cp-quiz-page #main-content,
html body.cp-quiz-page main#main-content.container {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	display: block !important;
}
html body.cp-quiz-page .wd-page-content,
html body.cp-quiz-page .main-page-wrapper {
	padding: 0 !important;
	margin: 0 !important;
}
html body.cp-quiz-page { color: #E8DFCC !important; }

.cp-quiz-wrap { color: var(--cpq-text); padding: 0; }
.cp-quiz-container { max-width: 960px; margin: 0 auto; padding: 32px 16px; }

/* HERO */
.cp-quiz-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--cpq-border); text-align: center; }
.cp-quiz-eyebrow { color: var(--cpq-gold) !important; font-size: 12px; text-transform: uppercase; letter-spacing: .22em; margin: 0 0 12px; font-weight: 600; }
.cp-quiz-hero-title { color: #fff !important; font-size: 42px; line-height: 1.1; margin: 0 0 16px; font-weight: 700; letter-spacing: -0.01em; }
.cp-quiz-hero-sub { color: var(--cpq-text) !important; font-size: 18px; line-height: 1.5; margin: 0 auto 28px; max-width: 620px; }
.cp-quiz-hero-meta { color: var(--cpq-text-muted) !important; font-size: 13px; margin: 20px 0 0; }

/* BUTTONS */
.cp-quiz-btn { display: inline-block; padding: 14px 32px; border-radius: var(--cpq-radius); border: 0; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; text-decoration: none; line-height: 1.2; }
.cp-quiz-btn-primary { background: var(--cpq-gold) !important; color: #1A0F00 !important; box-shadow: 0 4px 14px rgba(201,168,76,0.25); }
.cp-quiz-btn-primary:hover { background: var(--cpq-gold-soft) !important; color: #1A0F00 !important; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,168,76,0.35); }
.cp-quiz-btn-secondary { background: transparent !important; color: var(--cpq-gold) !important; border: 1px solid var(--cpq-gold) !important; }
.cp-quiz-btn-secondary:hover { background: var(--cpq-gold) !important; color: #1A0F00 !important; }
.cp-quiz-btn-ghost { background: transparent !important; color: var(--cpq-text) !important; border: 1px solid var(--cpq-border) !important; }
.cp-quiz-btn-ghost:hover { border-color: var(--cpq-gold) !important; color: var(--cpq-gold) !important; }
.cp-quiz-btn-wa { background: #25D366 !important; color: #fff !important; }
.cp-quiz-btn-wa:hover { background: #1FB855 !important; color: #fff !important; }
.cp-quiz-btn:disabled { opacity: .55; cursor: wait; }

/* EXPLAIN */
.cp-quiz-explain { padding: 48px 0; border-top: 1px solid var(--cpq-border); }
.cp-quiz-explain h2 { color: #fff !important; font-size: 24px; margin: 0 0 20px; font-weight: 600; }
.cp-quiz-steps { padding-left: 20px; margin: 0; list-style: decimal; }
.cp-quiz-steps li { margin: 12px 0; color: var(--cpq-text) !important; font-size: 15px; line-height: 1.6; }
.cp-quiz-steps li::marker { color: var(--cpq-gold); font-weight: 700; }
.cp-quiz-steps strong { color: var(--cpq-gold) !important; font-weight: 600; }

/* SPA */
.cp-quiz-app[hidden] { display: none !important; }
.cp-quiz-app { max-width: 720px; margin: 32px auto 64px; padding: 32px; background: var(--cpq-surface) !important; border: 1px solid var(--cpq-border); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.cp-quiz-q-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 13px; color: var(--cpq-text-muted) !important; }
.cp-quiz-back { background: none; border: 0; color: var(--cpq-text-muted) !important; cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 4px; }
.cp-quiz-back:hover { color: var(--cpq-gold) !important; background: rgba(201,168,76,0.08); }
.cp-quiz-progress { background: rgba(255,255,255,0.08); height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 28px; }
.cp-quiz-progress-bar { background: linear-gradient(90deg, var(--cpq-gold), var(--cpq-gold-soft)); height: 100%; transition: width .35s ease; }

.cp-quiz-q-title { color: #fff !important; font-size: 24px; margin: 8px 0 6px; line-height: 1.25; font-weight: 600; }
.cp-quiz-q-sub { color: var(--cpq-text-muted) !important; font-size: 14px; margin: 0 0 24px; }

.cp-quiz-options { display: flex; flex-direction: column; gap: 12px; }
.cp-quiz-option { background: var(--cpq-surface-2) !important; border: 1px solid var(--cpq-border); border-radius: var(--cpq-radius); padding: 16px 20px; text-align: left; color: var(--cpq-text) !important; cursor: pointer; transition: transform .15s, border-color .18s, background .18s; display: flex; flex-direction: column; gap: 4px; }
.cp-quiz-option:hover, .cp-quiz-option:focus-visible { border-color: var(--cpq-gold); background: #2A1A4D !important; outline: none; }
.cp-quiz-option.is-selected { border-color: var(--cpq-gold); background: #2A1A4D !important; box-shadow: 0 0 0 2px rgba(201,168,76,0.3); }
.cp-quiz-option-label { color: #fff !important; font-size: 16px; font-weight: 600; }
.cp-quiz-option-desc { color: var(--cpq-text-muted) !important; font-size: 14px; line-height: 1.4; }

.cp-quiz-hint { color: var(--cpq-text-muted) !important; font-size: 13px; font-style: italic; margin: 20px 0 0; text-align: center; }
.cp-quiz-loading { color: var(--cpq-gold) !important; text-align: center; font-size: 16px; padding: 40px 0; }
.cp-quiz-error { color: #FF8B8B !important; text-align: center; padding: 16px; background: rgba(255,139,139,0.08); border-radius: 6px; }
.cp-quiz-noscript { color: var(--cpq-text) !important; padding: 24px; text-align: center; }

/* RESULT */
.cp-quiz-result-hero { padding: 56px 0 40px; text-align: center; border-bottom: 1px solid var(--cpq-border); }
.cp-quiz-result-grid { padding: 40px 0 64px; }
.cp-quiz-result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .cp-quiz-result-cols { grid-template-columns: 1fr; } }

.cp-quiz-radar-wrap { background: var(--cpq-surface) !important; border: 1px solid var(--cpq-border); border-radius: 12px; padding: 24px; text-align: center; }
.cp-quiz-radar-title { color: #fff !important; font-size: 17px; margin: 0 0 16px; font-weight: 600; }
.cp-quiz-radar { display: block; max-width: 380px; width: 100%; height: auto; margin: 0 auto; }
.cp-quiz-radar-legend { color: var(--cpq-text-muted) !important; font-size: 12px; display: flex; gap: 16px; justify-content: center; margin: 16px 0 0; }
.cp-quiz-legend-user { color: var(--cpq-text) !important; }
.cp-quiz-legend-prod { color: var(--cpq-gold) !important; }

.cp-quiz-top-list { display: flex; flex-direction: column; gap: 16px; }
.cp-quiz-top-card { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; background: var(--cpq-surface) !important; border: 1px solid var(--cpq-border); border-radius: 10px; padding: 16px; position: relative; transition: border-color .18s; }
.cp-quiz-top-card:hover { border-color: var(--cpq-gold); }
.cp-quiz-top-card-1 { border-color: var(--cpq-gold); background: linear-gradient(180deg, var(--cpq-surface) 0%, var(--cpq-surface-2) 100%) !important; }
.cp-quiz-top-rank { position: absolute; top: -10px; left: -10px; background: var(--cpq-gold) !important; color: #1A0F00 !important; font-weight: 700; padding: 3px 12px; border-radius: 12px; font-size: 12px; }
.cp-quiz-top-thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; }
.cp-quiz-top-name { font-size: 15px; margin: 0 0 6px; color: #fff !important; font-weight: 600; line-height: 1.3; }
.cp-quiz-top-name a { color: inherit !important; text-decoration: none; }
.cp-quiz-top-name a:hover { color: var(--cpq-gold) !important; }
.cp-quiz-top-meta { display: flex; gap: 12px; font-size: 13px; color: var(--cpq-text-muted) !important; margin-bottom: 10px; flex-wrap: wrap; }
.cp-quiz-top-score { color: var(--cpq-gold) !important; font-weight: 600; }
.cp-quiz-top-price { color: var(--cpq-text) !important; }
.cp-quiz-top-card .cp-quiz-btn { padding: 8px 18px; font-size: 13px; }

/* OPTIN */
.cp-quiz-optin { margin: 40px 0 0; padding: 32px 24px; background: var(--cpq-surface) !important; border: 1px solid var(--cpq-gold); border-radius: 12px; text-align: center; }
.cp-quiz-optin h3 { color: #fff !important; font-size: 20px; margin: 0 0 10px; font-weight: 600; }
.cp-quiz-optin > p { color: var(--cpq-text) !important; font-size: 14px; line-height: 1.5; margin: 0 auto 20px; max-width: 480px; }
.cp-quiz-optin form { display: flex; flex-direction: column; gap: 12px; max-width: 380px; margin: 0 auto; }
.cp-quiz-optin input[type="email"] { padding: 12px 14px; border-radius: 6px; border: 1px solid var(--cpq-border); background: var(--cpq-dark-2) !important; color: #fff !important; font-size: 14px; }
.cp-quiz-optin input[type="email"]::placeholder { color: var(--cpq-text-dim); }
.cp-quiz-optin input[type="email"]:focus { border-color: var(--cpq-gold); outline: none; box-shadow: 0 0 0 3px rgba(201,168,76,0.15); }
.cp-quiz-consent { color: var(--cpq-text-muted) !important; font-size: 12px; display: flex; gap: 8px; align-items: flex-start; text-align: left; line-height: 1.4; }
.cp-quiz-consent input[type="checkbox"] { margin-top: 3px; accent-color: var(--cpq-gold); }
.cp-quiz-optin-status { color: var(--cpq-gold) !important; font-size: 13px; min-height: 18px; margin: 14px 0 0; }

.cp-quiz-share { display: flex; gap: 12px; justify-content: center; margin: 32px 0 0; flex-wrap: wrap; }

.cp-quiz-empty { color: var(--cpq-text) !important; text-align: center; padding: 32px 24px; background: var(--cpq-surface) !important; border: 1px dashed var(--cpq-border); border-radius: 8px; }
.cp-quiz-empty a { color: var(--cpq-gold) !important; }

@media (max-width: 480px) {
	.cp-quiz-radar { max-width: 300px; }
	.cp-quiz-hero-title { font-size: 30px; }
	.cp-quiz-hero { padding: 48px 0 36px; }
	.cp-quiz-container { padding: 24px 16px; }
	.cp-quiz-app { margin: 20px 16px 48px; padding: 24px 20px; }
}

/* Login-gated optin (user not logged in) */
.cp-quiz-optin-eyebrow { color: var(--cpq-gold) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .2em; margin: 0 0 8px; font-weight: 600; }
.cp-quiz-auth-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 20px 0 12px; }
.cp-quiz-auth-actions .cp-quiz-btn { min-width: 140px; }
.cp-quiz-optin-hint { color: var(--cpq-text-muted) !important; font-size: 12px; margin: 8px 0 0; }

/* ─── Wave 1.5 — CTA prefill (quiz → catalogo) ───────────────────────────── */
.cp-quiz-prefill-cta {
	margin: 32px auto 24px;
	text-align: center;
	padding: 28px 16px 24px;
	border-top: 1px solid var(--cpq-border);
}
.cp-quiz-prefill-cta h3 {
	color: var(--cpq-gold) !important;
	font-size: 22px;
	margin: 0 0 8px;
	font-weight: 600;
}
.cp-quiz-prefill-cta p {
	color: var(--cpq-text-muted) !important;
	margin: 0 0 20px;
	font-size: 14px;
}
.cp-quiz-prefill-btn {
	display: inline-block;
	padding: 14px 28px;
	background: var(--cpq-gold);
	color: var(--cpq-dark) !important;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	font-size: 15px;
	min-height: 44px;
	transition: background-color .15s ease;
}
.cp-quiz-prefill-btn:hover,
.cp-quiz-prefill-btn:focus-visible {
	background: var(--cpq-gold-soft);
	color: var(--cpq-dark) !important;
	text-decoration: none;
}
.cp-quiz-prefill-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}