/* ==========================================================================
   QRA · Quiz "Qual é o teu plano de IA?" — page-specific styles.
   Ported from the Claude Design canvas inline <style>. Shared components
   (Button, Input) live in qra-components.css; tokens in tokens.css.
   ========================================================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--surface-1);}
body{font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased;}
a{color:var(--text-link);text-decoration:none;}
a:hover{color:var(--text-link-hover);}
@keyframes qraReveal{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* state-machine views: only the active step is shown (JS toggles [hidden]) */
[data-step]{display:block;}
[data-step][hidden]{display:none;}

/* ---- Layout ---- */
.quiz-page{min-height:100vh;background:var(--surface-1);padding:var(--space-5) var(--gutter) var(--space-8);display:flex;justify-content:center;}
.quiz-shell{width:100%;max-width:600px;}
.quiz-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5);}
.quiz-brandrow{display:flex;align-items:baseline;gap:var(--space-2);}
.quiz-brand{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xl);letter-spacing:var(--tracking-tight);color:var(--text-strong);}
.quiz-brandsub{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted);}
.quiz-stage{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle);}

/* ---- Typography ---- */
.quiz-h1{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-4xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0;}
.quiz-h2{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-3xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0;}
.quiz-question{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-snug);color:var(--text-strong);margin:0 0 var(--space-5);}
.quiz-lead{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-muted);margin:0;}
.quiz-meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);}

/* ---- Bits ---- */
.quiz-metarow{display:flex;gap:var(--space-5);justify-content:center;flex-wrap:wrap;}
.quiz-qcount{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);}
.quiz-back{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-link);cursor:pointer;}
.quiz-progress{height:6px;border-radius:var(--radius-full);background:var(--surface-3);overflow:hidden;}
.quiz-progress-fill{height:100%;border-radius:var(--radius-full);background:var(--primary-500);transition:width .3s ease;}
.quiz-optlist{display:flex;flex-direction:column;gap:var(--space-3);}
.quiz-price{font-family:var(--font-mono);font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--primary-600);}
.quiz-well{background:var(--surface-1);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5) 22px;}
.quiz-welllabel{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-body);margin-bottom:var(--space-3);}
.quiz-note{background:var(--primary-50);border:1px solid var(--primary-100);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);}
.quiz-note p{font-size:var(--text-base);line-height:var(--leading-normal);color:var(--brand-ink);margin:0;}
.quiz-check{display:inline-flex;width:56px;height:56px;border-radius:var(--radius-full);background:var(--success-50);color:var(--success-600);align-items:center;justify-content:center;margin-bottom:var(--space-5);}