/* ═══════════════════════════════════════════ */
/* QUIZ V2 + SALES PAGE DINÂMICA             */
/* ═══════════════════════════════════════════ */

:root {
  --black: #1A1A1A; --gold: #C8A951; --gold-light: #E8D5A0; --gold-dark: #A68A3E;
  --white: #FAFAFA; --gray-100: #F5F5F5; --gray-200: #EEE; --gray-500: #888; --gray-700: #555; --gray-900: #333;
  --green: #2ECC71; --red: #E74C3C;
  --font-h: 'Playfair Display', Georgia, serif;
  --font-b: 'Inter', -apple-system, sans-serif;
  --r: 12px; --rs: 8px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-b); font-size:17px; line-height:1.65; color:var(--white); background:linear-gradient(160deg,#0a0a0a,#1a1a1a 40%,#2a2520); min-height:100vh; -webkit-font-smoothing:antialiased; }
.gold { color:var(--gold); }

/* ── TOPBAR ── */
.topbar { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(10,10,10,.95); backdrop-filter:blur(10px); border-bottom:1px solid rgba(200,169,81,.1); }
.topbar-inner { max-width:640px; margin:0 auto; padding:.6rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.topbar-brand { font-family:var(--font-h); font-weight:800; font-size:1rem; }
.topbar-progress { display:flex; align-items:center; gap:.5rem; }
.prog-track { width:120px; height:5px; background:rgba(255,255,255,.1); border-radius:100px; overflow:hidden; }
.prog-fill { height:100%; width:0; background:linear-gradient(90deg,var(--gold-dark),var(--gold)); border-radius:100px; transition:width .5s; }
.prog-text { font-size:.7rem; font-weight:600; color:var(--gold-light); min-width:3rem; text-align:right; }

/* ── STEPS ── */
.quiz-main { max-width:640px; margin:0 auto; padding:4rem 1.5rem 3rem; min-height:100vh; }
.step { display:none; animation:fadeUp .4s ease; }
.step.active { display:block; }
.step-content { padding:2rem 0; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.block-label { display:inline-block; font-size:.65rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:.75rem; }
.step-content h2 { font-family:var(--font-h); font-size:1.8rem; font-weight:700; line-height:1.25; margin-bottom:1rem; }
.step-hint { font-size:.9rem; color:rgba(255,255,255,.55); margin-bottom:1.5rem; }

/* ── INPUTS ── */
.quiz-input { width:100%; max-width:320px; display:block; margin:0 auto 1.5rem; padding:.9rem 1.25rem; font-size:1.2rem; font-weight:600; text-align:center; background:rgba(255,255,255,.08); border:2px solid rgba(200,169,81,.3); border-radius:var(--rs); color:var(--white); outline:none; transition:border-color .2s; }
.quiz-input::placeholder { color:rgba(255,255,255,.3); }
.quiz-input:focus { border-color:var(--gold); background:rgba(255,255,255,.12); }
.quiz-input.shake { animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

.input-unit { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:1.5rem; }
.input-unit .quiz-input { margin:0; }
.unit { font-weight:600; color:var(--gold-light); font-size:1.1rem; }

/* ── OPTIONS ── */
.options { display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
.opt { display:flex; align-items:center; gap:.75rem; padding:.9rem 1.25rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); color:var(--white); font-size:1rem; font-weight:500; cursor:pointer; transition:all .25s; text-align:left; width:100%; }
.opt:hover { background:rgba(200,169,81,.1); border-color:var(--gold); transform:translateX(4px); }
.opt:active { transform:scale(.98); }

/* ── MULTI SELECT ── */
.multi-options { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:1rem 0 1.5rem; }
.multi-opt { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--rs); cursor:pointer; transition:all .2s; font-size:.9rem; }
.multi-opt:has(input:checked) { border-color:var(--gold); background:rgba(200,169,81,.12); }
.multi-opt input { accent-color:var(--gold); width:18px; height:18px; }

/* ── BODY TYPE SELECTOR ── */
.body-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; }
.body-option { background:rgba(255,255,255,.04); border:2px solid rgba(255,255,255,.1); border-radius:var(--r); padding:1.5rem 1rem; text-align:center; cursor:pointer; transition:all .3s; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.body-option:hover { border-color:var(--gold); background:rgba(200,169,81,.1); transform:translateY(-4px); box-shadow:0 8px 24px rgba(200,169,81,.15); }
.body-option:active { transform:scale(.97); }
.body-emoji { font-size:3rem; line-height:1; margin-bottom:.25rem; }
.body-label { font-weight:700; font-size:1rem; color:var(--white); }
.body-desc { font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.3; }

@media (max-width:480px) {
  .body-grid { grid-template-columns:1fr; gap:.75rem; }
  .body-option { flex-direction:row; padding:1rem 1.25rem; gap:1rem; text-align:left; }
  .body-emoji { font-size:2.2rem; min-width:3rem; }
}

/* ── TRANSITION SCREENS ── */
.transition-screen { text-align:center; padding-top:3rem; }
.trans-icon { font-size:3.5rem; margin-bottom:1rem; }
.transition-screen h2 { font-size:1.8rem; margin-bottom:.75rem; }
.trans-desc { font-size:1rem; color:rgba(255,255,255,.6); max-width:400px; margin:0 auto 2rem; }
.trans-progress { display:flex; flex-direction:column; gap:.4rem; max-width:280px; margin:0 auto 2rem; text-align:left; }
.tp-item { font-size:.85rem; padding:.3rem .5rem; border-radius:var(--rs); color:rgba(255,255,255,.35); }
.tp-item.done { color:rgba(255,255,255,.6); }
.tp-item.current { color:var(--gold); font-weight:700; background:rgba(200,169,81,.1); border-radius:var(--rs); }

/* ── BUTTONS ── */
.btn-gold { display:block; width:100%; max-width:400px; margin:0 auto; padding:1rem; background:var(--gold); color:var(--black); font-weight:800; font-size:1rem; border:none; border-radius:var(--rs); cursor:pointer; text-transform:uppercase; letter-spacing:.5px; transition:all .3s; text-align:center; text-decoration:none; }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-2px); }
.btn-lg { padding:1.15rem 2rem; font-size:1.05rem; }
.btn-pulse { animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(200,169,81,.4)} 50%{box-shadow:0 0 0 14px rgba(200,169,81,0)} }
.btn-skip { display:block; width:100%; max-width:400px; margin:1rem auto 0; padding:.75rem 1.5rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:var(--rs); color:rgba(255,255,255,.7); font-size:.95rem; font-weight:600; cursor:pointer; transition:all .2s; }
.btn-skip:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:var(--white); }

/* ── IMAGES IN QUIZ ── */
.intro-hero-img { margin-bottom:1.5rem; border-radius:var(--r); overflow:hidden; max-width:480px; margin-left:auto; margin-right:auto; }
.intro-img { width:100%; height:auto; display:block; border-radius:var(--r); }

.step-visual { text-align:center; margin-bottom:1.25rem; }
.step-img-round { width:120px; height:120px; object-fit:cover; border-radius:50%; border:3px solid rgba(200,169,81,.3); }

.trans-img { margin-bottom:1.25rem; border-radius:var(--r); overflow:hidden; max-width:400px; margin-left:auto; margin-right:auto; }
.trans-photo { width:100%; height:160px; object-fit:cover; display:block; border-radius:var(--r); opacity:.85; }

/* Sales page hero image */
.sp-hero-img { text-align:center; margin-bottom:1.5rem; }
.sp-hero-photo { width:180px; height:240px; object-fit:cover; border-radius:var(--r); border:3px solid rgba(200,169,81,.2); box-shadow:0 8px 32px rgba(0,0,0,.4); }

/* Sales page section images */
.sp-section-img { text-align:center; margin:1.5rem 0; }
.sp-section-img img { width:100%; max-width:500px; height:200px; object-fit:cover; border-radius:var(--r); }

/* ── INTRO ── */
.intro-screen { text-align:center; padding-top:3rem; }
.intro-badge { display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:3px; color:var(--gold); border:1px solid rgba(200,169,81,.3); padding:.35rem 1.2rem; border-radius:100px; margin-bottom:1.5rem; }
.intro-screen h1 { font-family:var(--font-h); font-size:2.4rem; font-weight:800; line-height:1.15; margin-bottom:1rem; }
.intro-desc { font-size:1.05rem; color:rgba(255,255,255,.7); max-width:500px; margin:0 auto 2rem; }
.intro-proof { display:flex; justify-content:center; gap:2rem; margin-bottom:2rem; }
.proof-item { text-align:center; }
.proof-item strong { display:block; font-family:var(--font-h); font-size:1.5rem; color:var(--gold); }
.proof-item span { font-size:.7rem; color:rgba(255,255,255,.45); }
.intro-safe { font-size:.7rem; color:rgba(255,255,255,.3); margin-top:.75rem; }

/* ── LOADING ── */
.loading-screen { text-align:center; padding-top:4rem; }
.loading-icon { font-size:3rem; margin-bottom:1rem; animation:spin 2s linear infinite; }
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.load-track { width:100%; height:8px; background:rgba(255,255,255,.1); border-radius:100px; overflow:hidden; margin:1.5rem 0; }
.load-fill { height:100%; width:0; background:linear-gradient(90deg,var(--gold-dark),var(--gold)); border-radius:100px; transition:width .8s ease; }
.load-steps { text-align:left; max-width:360px; margin:1rem auto 0; }
.ls { font-size:.85rem; color:rgba(255,255,255,.25); padding:.35rem 0; transition:color .3s; }
.ls.done { color:rgba(255,255,255,.8); }

/* ═══════════════════════════════════════════ */
/* SALES PAGE DINÂMICA                         */
/* ═══════════════════════════════════════════ */

.sales-page { color:var(--gray-900); }

/* Sections */
.sp-section { padding:3rem 0; background:var(--white); }
.sp-section.sp-dark { background:var(--black); color:var(--white); }
.sp-section.sp-dark h2 { color:var(--white); }
.sp-section.sp-dark p { color:rgba(255,255,255,.8); }
.sp-section.sp-gold { background:linear-gradient(135deg,#1a1a1a,#2a2520); color:var(--white); }
.sp-section.sp-gold h2 { color:var(--white); }
.sp-section.sp-gold p { color:rgba(255,255,255,.8); }
.sp-section.sp-offer { background:linear-gradient(160deg,#0a0a0a,#1a1a1a 40%,#2a2520); }
.sp-container { max-width:640px; margin:0 auto; padding:0 1.5rem; }
.sp-section h2 { font-family:var(--font-h); font-size:1.8rem; font-weight:700; margin-bottom:1rem; color:var(--black); }
.sp-sub { font-size:.95rem; color:var(--gray-500); margin-bottom:1.5rem; }

/* Hero */
.sp-hero { background:linear-gradient(160deg,#0a0a0a,#1a1a1a 40%,#2a2520); padding:3rem 0 2.5rem; text-align:center; color:var(--white); }
.sp-hero-inner { max-width:600px; margin:0 auto; padding:0 1.5rem; }
.sp-badge { display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:3px; color:var(--gold); border:1px solid rgba(200,169,81,.3); padding:.3rem 1rem; border-radius:100px; margin-bottom:1.5rem; }
.sp-hero h1 { font-family:var(--font-h); font-size:2rem; font-weight:800; line-height:1.2; margin-bottom:.75rem; }
.sp-hero-sub { font-size:.95rem; color:rgba(255,255,255,.7); }

/* Profile grid */
.profile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1rem; }
.profile-card { background:var(--gray-100); border-radius:var(--rs); padding:.75rem .5rem; text-align:center; border:1px solid var(--gray-200); overflow:hidden; }
.pc-label { display:block; font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--gray-500); margin-bottom:.2rem; white-space:nowrap; }
.pc-value { font-family:var(--font-h); font-size:1.2rem; font-weight:800; color:var(--black); word-break:break-word; line-height:1.2; }
.pc-value.gold { color:var(--gold-dark); }

/* Timeline */
.timeline { margin:1.5rem 0; }
.tl-item { display:flex; gap:1rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.tl-marker { font-family:var(--font-h); font-weight:800; font-size:1rem; color:var(--gold); min-width:70px; padding-top:.2rem; }
.tl-content { flex:1; }
.tl-result.good { font-size:1rem; margin-bottom:.25rem; }
.tl-result.good strong { color:var(--gold); font-size:1.2rem; }
.tl-result.good span { display:block; font-size:.8rem; color:rgba(255,255,255,.5); }
.tl-result.basic { font-size:.8rem; color:rgba(255,255,255,.3); }
.tl-estimate { text-align:center; font-size:1rem; margin-top:1rem; color:var(--gold-light); }

/* Menu preview */
.menu-preview { background:var(--gray-100); border-radius:var(--r); overflow:hidden; border:1px solid var(--gray-200); margin-bottom:1rem; }
.menu-meal { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--gray-200); }
.menu-meal:last-of-type { border-bottom:none; }
.menu-time { font-size:.75rem; color:var(--gray-500); font-weight:600; white-space:nowrap; }
.menu-name { font-weight:600; font-size:.85rem; color:var(--black); min-width:0; }
.menu-prot { font-size:.75rem; font-weight:700; color:var(--gold-dark); white-space:nowrap; text-align:right; }
.menu-total { display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap; padding:.75rem 1rem; background:var(--black); color:var(--white); font-size:.85rem; text-align:center; }
.menu-total strong { color:var(--gold); }
.meta-ok { color:var(--green); font-size:.75rem; }
.meta-warn { color:#f39c12; font-size:.75rem; }

.menu-lock { text-align:center; padding:1.5rem; background:rgba(200,169,81,.05); border:2px dashed rgba(200,169,81,.2); border-radius:var(--r); }
.lock-icon { font-size:2rem; margin-bottom:.5rem; }
.menu-lock p { font-size:.9rem; color:var(--gray-700); margin-bottom:.25rem; }

/* Equivalents */
.equiv-grid { display:flex; justify-content:center; gap:1rem; margin:1rem 0; flex-wrap:wrap; }
.equiv-item { background:rgba(200,169,81,.15); border:1px solid rgba(200,169,81,.2); padding:.5rem 1.25rem; border-radius:100px; font-weight:600; font-size:.9rem; color:var(--gold-light); }

/* Benefits */
.benefit-list { margin:1.5rem 0; }
.benefit { padding:.5rem 0; font-size:.95rem; color:var(--gray-900); }
.benefit strong { color:var(--black); }
.benefit-personal { font-size:.9rem; color:var(--gold-dark); background:rgba(200,169,81,.08); padding:1rem; border-radius:var(--rs); margin-top:1rem; border-left:3px solid var(--gold); }

/* Offer card */
.offer-card { text-align:center; padding:2.5rem 1.5rem; background:rgba(255,255,255,.03); border:1px solid rgba(200,169,81,.2); border-radius:var(--r); }
.offer-card .offer-badge { display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:3px; color:var(--gold); border:1px solid rgba(200,169,81,.3); padding:.3rem 1rem; border-radius:100px; margin-bottom:1rem; }
.offer-card h2 { font-size:2.2rem; color:var(--white); }
.offer-for { font-size:.85rem; color:var(--gray-500); margin-bottom:1.5rem; }
.offer-anchor { background:rgba(255,255,255,.04); padding:1rem; border-radius:var(--rs); margin-bottom:1.5rem; }
.offer-anchor p { font-size:.9rem; color:rgba(255,255,255,.6); margin-bottom:.25rem; }
.anchor-big { font-family:var(--font-h); font-size:1.6rem; font-weight:800; color:var(--gold); margin-bottom:.5rem !important; }
.offer-price { margin-bottom:1.5rem; }
.price-from { display:block; font-size:.85rem; color:var(--gray-500); text-decoration:line-through; }
.price-now { display:block; font-family:var(--font-h); font-size:3.5rem; font-weight:800; color:var(--gold); line-height:1.1; }
.price-parcel { display:block; font-size:.85rem; color:rgba(255,255,255,.5); }
.offer-card .btn-gold { max-width:100%; margin-bottom:1rem; }
.offer-guarantee { font-size:.85rem; color:rgba(255,255,255,.5); margin-bottom:.75rem; }
.offer-guarantee strong { color:var(--gold-light); }
.offer-urgency { font-size:.8rem; color:#f39c12; font-weight:600; }

/* Footer */
.sp-footer { text-align:center; padding:1.5rem; background:var(--black); border-top:1px solid rgba(200,169,81,.1); }
.sp-footer p { font-family:var(--font-h); font-weight:800; color:var(--white); margin-bottom:.25rem; }
.sp-disclaimer { font-size:.7rem !important; color:var(--gray-500) !important; font-family:var(--font-b) !important; font-weight:400 !important; }

/* ── RESPONSIVE ── */
@media (max-width:640px) {
  .intro-screen h1 { font-size:1.8rem; }
  .intro-proof { gap:1rem; }
  .proof-item strong { font-size:1.2rem; }
  .multi-options { grid-template-columns:1fr; }
  .profile-grid { grid-template-columns:repeat(2,1fr); }
  .sp-hero h1 { font-size:1.5rem; }
  .sp-section h2 { font-size:1.4rem; }
  .price-now { font-size:2.8rem; }
  .equiv-grid { flex-direction:column; align-items:center; }
  .menu-meal { grid-template-columns:1fr auto; gap:.25rem; }
  .menu-time { grid-column:1/-1; margin-bottom:-.15rem; font-size:.7rem; }
  .tl-item { flex-direction:column; gap:.25rem; }
  .tl-marker { min-width:auto; }
  .offer-card { padding:2rem 1rem; }
  .anchor-big { font-size:1.3rem; }
}

/* ── CAPTURA DE EMAIL ── */
.captura-icon { font-size:3rem; text-align:center; margin-bottom:1rem; }
[data-step="captura"] .step-content { text-align:center; }
[data-step="captura"] .quiz-input { max-width:380px; text-align:left; font-size:1rem; font-weight:500; }
[data-step="captura"] .quiz-input[type="email"] { margin-bottom:1rem; }
[data-step="captura"] .quiz-input[type="tel"] { margin-bottom:.5rem; }