:root {
  --ink: #111827;
  --muted: #667085;
  --line: #e5e7eb;
  --soft: #f5f6f7;
  --red: #f04449;
  --red-dark: #d83b40;
  --green: #18a957;
  --green-dark: #087e3b;
  --yellow: #ffbd16;
}

* { box-sizing: border-box; }
html { background: #f5f6f7; overflow-x: hidden; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #f5f6f7; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.page-shell { min-height: 100svh; display: flex; justify-content: center; padding: 0; }
.quiz-card { width: min(560px, 100%); min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: #fff; }

.brand-row { display: flex; align-items: center; justify-content: center; padding: 16px 18px 10px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark, .final-logo, .sales-brand span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--red); font-size: 12px; font-weight: 800; }
.brand-note { display: none; }
.progress-wrap { padding: 0 18px; }
.progress-meta { display: flex; justify-content: space-between; margin-bottom: 8px; color: #7b8490; font-size: 11px; font-weight: 600; }
.progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #f4dfe0; }
.progress-bar { width: 3%; height: 100%; border-radius: inherit; background: var(--red); transition: width .35s ease; }

.screen { flex: 1; padding: 18px 18px 24px; }
.screen > * { width: 100%; }
.eyebrow { margin: 0 0 12px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 0; color: #101828; font-size: clamp(26px, 7vw, 36px); line-height: 1.1; letter-spacing: -.05em; }
h3 { color: #101828; font-size: 21px; line-height: 1.18; letter-spacing: -.04em; }
p { color: var(--muted); line-height: 1.55; }

.hero-strip { overflow: hidden; margin: -18px -18px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.hero-strip img { display: block; width: 100%; height: 142px; object-fit: cover; }
.hero-strip-copy { display: grid; gap: 6px; padding: 16px 18px 14px; }
.hero-strip-copy strong { color: #111827; font-size: 20px; line-height: 1.15; letter-spacing: -.04em; }
.hero-strip-copy > span:last-child { color: var(--muted); font-size: 12px; line-height: 1.45; }
.plan-number { color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gender-hero { overflow: hidden; margin: -18px -18px 20px; border-bottom: 1px solid var(--line); background: #f5eee7; }
.gender-hero img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: center 32%; }
.gender-step .question-head { padding-top: 3px; }
.gender-step .question-head h2 { max-width: 560px; font-size: clamp(34px, 8vw, 47px); }
.gender-step .question-head p:not(.eyebrow) { margin-top: 11px; font-size: 14px; }
.gender-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.gender-option { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.gender-option:hover, .gender-option:focus-visible { border-color: #f49a9d; outline: none; transform: translateY(-1px); }
.gender-option.selected { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.gender-photo { display: block; width: 100%; height: 248px; background-image: url('assets/carniva-gender.webp'); background-repeat: no-repeat; background-size: 200% auto; background-color: #f4e9df; }
.gender-photo-woman { background-position: left 23%; }
.gender-photo-man { background-position: right 23%; }
.gender-option-footer { display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 9px 11px; }
.gender-option-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 7px; color: var(--red); background: #fff0f0; font-size: 14px; }
.gender-option-footer strong { font-size: 14px; }
.gender-option-check { margin-left: auto; color: transparent; font-size: 17px; font-weight: 800; }
.gender-option.selected .gender-option-check { color: var(--red); }
.gender-note { margin: 18px 0 0; color: #98a0aa; font-size: 11px; text-align: center; }

.question-wrap, .info-card, .range-card, .name-card, .final-loading { max-width: 520px; margin: 0 auto; }
.question-head { padding: 5px 0 17px; text-align: left; }
.question-head h2 { max-width: 470px; }
.question-head p:not(.eyebrow) { margin: 10px 0 0; font-size: 14px; }
.answer-grid { display: grid; gap: 9px; }
.answer-card { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 62px; padding: 12px 38px 12px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.answer-card:hover, .answer-card:focus-visible { border-color: #f49a9d; outline: none; }
.answer-card.selected { border-color: var(--red); background: #fff5f5; box-shadow: 0 0 0 1px var(--red); }
.answer-icon { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 7px; color: var(--red-dark); background: #fff0f0; font-size: 15px; font-weight: 700; }
.answer-copy strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.answer-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.answer-check { position: absolute; right: 13px; color: transparent; font-size: 15px; font-weight: 800; }
.answer-card.selected .answer-check { color: var(--red); }
.choice-limit, .choice-helper { margin: 12px 0 0; color: #8b95a1; font-size: 11px; text-align: center; }

.cta-button { width: 100%; margin-top: 18px; padding: 15px 16px; border: 0; border-radius: 8px; color: #fff; background: var(--red); font-size: 14px; font-weight: 800; cursor: pointer; transition: background .16s ease, transform .16s ease, opacity .16s ease; }
.cta-button:hover, .cta-button:focus-visible { background: var(--red-dark); transform: translateY(-1px); outline: none; }
.cta-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.info-button { max-width: 100%; }

.info-card, .range-card, .name-card { padding: 22px 0; }
.info-card > p:not(.eyebrow), .range-card > p:not(.eyebrow), .name-card > p:not(.eyebrow) { margin: 13px 0 0; font-size: 14px; }
.profile-highlights { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.profile-highlights span { padding: 8px 10px; border-radius: 6px; color: var(--green-dark); background: #eaf8ef; font-size: 11px; font-weight: 700; }
.proof-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.proof-row div { padding: 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 11px; }
.proof-row b { color: var(--green); }

.loading-label { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; color: #8b95a1; font-size: 11px; }
.loading-label strong { color: #111827; font-size: 16px; }
.loading-meter { height: 9px; overflow: hidden; margin: 8px 0 0; border-radius: 99px; background: #eceef0; }
.loading-meter span { display: block; width: 24%; height: 100%; border-radius: inherit; background: var(--red); transition: width .12s linear; }
.loading-steps, .loading-checklist { display: grid; gap: 8px; margin-top: 17px; color: #8b95a1; font-size: 12px; }
.loading-steps span.is-active, .loading-checklist span { color: var(--green-dark); }
.loading-testimonials { display: grid; gap: 9px; margin-top: 20px; }
.loading-testimonials > div { display: grid; gap: 3px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; }
.loading-testimonials b, .sales-testimonials b { color: var(--yellow); letter-spacing: .08em; }
.loading-testimonials strong { font-size: 13px; }
.loading-testimonials span { color: var(--muted); font-size: 12px; line-height: 1.4; }

.unit-switch { display: flex; gap: 7px; margin-top: 20px; }
.unit-button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.unit-button.active { color: #fff; border-color: var(--red); background: var(--red); }
.range-value { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.range-value strong { font-size: 48px; letter-spacing: -.06em; }
.range-value span { color: var(--muted); font-size: 14px; font-weight: 700; }
input[type='range'] { width: 100%; margin: 22px 0 4px; accent-color: var(--red); cursor: pointer; }
.range-limits { display: flex; justify-content: space-between; color: #9aa1aa; font-size: 11px; }
.name-label { display: block; margin-top: 22px; color: #344054; font-size: 12px; font-weight: 700; }
.name-input { width: 100%; margin-top: 8px; padding: 14px 13px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); outline: none; }
.name-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(240,68,73,.12); }

.final-loading { padding: 22px 0; text-align: left; }
.final-logo { width: 54px; height: 54px; margin: 0 auto 22px; font-size: 15px; }
.final-loading h2 { text-align: center; }
.final-loading > p:not(.eyebrow) { max-width: 440px; margin: 13px auto 0; text-align: center; font-size: 14px; }
.final-loading .eyebrow { text-align: center; }
.loading-checklist { padding: 0; list-style: none; }

.sales-page { width: calc(100% + 36px); margin: -18px -18px -24px; background: #fff; overflow-x: hidden; }
.sales-cover { padding: 20px 18px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.sales-brand { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; font-size: 19px; font-weight: 800; letter-spacing: -.04em; }
.sales-brand span { width: 30px; height: 30px; font-size: 10px; }
.sales-cover h2 { max-width: 480px; margin: auto; font-size: 29px; }
.sales-cover p:not(.eyebrow) { max-width: 450px; margin: 12px auto 0; font-size: 13px; }
.product-mockup { width: 100%; padding: 14px 18px 0; text-align: center; }
.product-mockup img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; border-radius: 14px; box-shadow: 0 12px 28px rgba(16,24,40,.12); }
.offer-card { margin: 16px 14px 0; padding: 18px 16px 16px; border: 1px solid #d7eadb; border-radius: 9px; background: #f7fff8; text-align: center; }
.offer-kicker { color: var(--green-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.offer-card h3 { margin: 6px 0 4px; font-size: 22px; }
.offer-card p { margin-bottom: 0; font-size: 12px; }
.offer-price { display: block; margin-top: 12px; color: #101828; font-size: 30px; letter-spacing: -.06em; }
.offer-benefits { display: grid; gap: 7px; margin-top: 16px; padding: 13px; border-radius: 7px; background: #fff; text-align: left; }
.offer-benefits span { color: #475467; font-size: 11px; line-height: 1.4; }
.offer-benefits span::first-letter { color: var(--green); }
.offer-card .cta-button { background: var(--green); }
.offer-card .cta-button:hover, .offer-card .cta-button:focus-visible { background: var(--green-dark); }
.offer-card small { display: block; margin-top: 10px; color: #7b8490; font-size: 10px; line-height: 1.4; text-align: center; }
.sales-section { padding: 26px 18px 0; }
.sales-section h3 { margin-bottom: 9px; }
.sales-section > p { margin-bottom: 0; font-size: 13px; }
.sales-intro { padding-top: 30px; }
.sales-intro h3 { font-size: 24px; }
.sales-intro p + p { margin-top: 10px; }
.feature-list { display: grid; gap: 13px; padding: 0; margin: 18px 0 0; list-style: none; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; color: #475467; font-size: 13px; line-height: 1.45; }
.feature-list b { color: var(--green); }
.feature-list strong { color: #101828; }
.plan-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 22px 14px 0; }
.plan-chips div { padding: 11px 5px; border-radius: 7px; background: #fff0f0; text-align: center; }
.plan-chips strong, .plan-chips span { display: block; }
.plan-chips strong { color: var(--red); font-size: 16px; }
.plan-chips span { margin-top: 3px; color: #7b8490; font-size: 9px; }
.included-grid, .objection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.included-grid article, .objection-grid article { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.included-grid article > span { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--red); background: var(--red-soft); font-size: 10px; font-weight: 800; }
.included-grid strong, .objection-grid span { display: block; margin-top: 9px; color: #101828; font-size: 12px; line-height: 1.35; }
.included-grid p, .objection-grid p { margin: 5px 0 0; color: #667085; font-size: 11px; line-height: 1.45; }
.visual-section { text-align: left; }
.before-after { display: block; width: 100%; margin-top: 15px; border-radius: 9px; }
.visual-note { margin-top: 7px !important; color: #98a0aa !important; font-size: 10px !important; text-align: center; }
.objection-section { padding-top: 28px; }
.audience-section { padding-top: 28px; }
.not-medical { margin-top: 17px; padding: 13px; border-left: 3px solid var(--gold); border-radius: 0 7px 7px 0; background: #fff8e9; }
.not-medical strong { color: #594c37; font-size: 12px; }
.not-medical p { margin: 5px 0 0; color: #78694f; font-size: 11px; line-height: 1.45; }
.guarantee-section { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 26px; padding: 24px 18px 26px; background: #fff8e9; text-align: center; }
.guarantee-section > div { width: 100%; max-width: 460px; }
.guarantee-seal { display: block; width: 108px; height: 108px; aspect-ratio: 1 / 1; flex: 0 0 108px; object-fit: cover; border-radius: 50%; transform: none; filter: drop-shadow(0 6px 8px rgba(89,76,55,.12)); }
.guarantee-section h3 { margin-bottom: 7px; }
.guarantee-section p { margin-bottom: 0; font-size: 12px; }
.guarantee-note { margin-top: 7px !important; color: #9a8152 !important; font-size: 10px !important; }
.sales-testimonials { display: grid; gap: 9px; margin-top: 15px; }
.sales-testimonials article { padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.sales-testimonials p { margin: 7px 0; color: #475467; font-size: 13px; line-height: 1.45; }
.sales-testimonials strong { color: #667085; font-size: 11px; }
.faq-section { padding-bottom: 0; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-question { display: flex; justify-content: space-between; width: 100%; padding: 15px 0; border: 0; color: #101828; background: transparent; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.faq-question span { color: var(--red); font-size: 18px; line-height: 1; }
.faq-answer { display: none; margin: -5px 0 14px; font-size: 12px; }
.faq-item.open .faq-answer { display: block; }
.purchase-note { display: flex; gap: 10px; align-items: flex-start; margin: 24px 18px 0; padding: 13px; border: 1px solid #dcefe0; border-radius: 8px; background: #f7fff8; }
.purchase-badge { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; aspect-ratio: 1 / 1; border-radius: 50%; color: #fff; background: var(--green); font-size: 13px; }
.purchase-note strong { font-size: 12px; }
.purchase-note p { margin: 3px 0 0; font-size: 10px; }
.bottom-cta { margin: 18px 18px 0; width: calc(100% - 36px); background: var(--green); }
.bottom-cta:hover, .bottom-cta:focus-visible { background: var(--green-dark); }
.sales-page > .microcopy { padding: 0 18px 20px; margin-top: 14px; font-size: 10px; text-align: center; }

@media (max-width: 430px) {
  .sales-section h3 { font-size: 20px; }
  .sales-intro h3 { font-size: 23px; }
  .included-grid, .objection-grid { gap: 7px; }
  .included-grid article, .objection-grid article { padding: 12px; }
  .guarantee-section { align-items: center; }
  .guarantee-seal { width: 108px; height: 108px; flex-basis: 108px; }
}

.quiz-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 39px; padding: 0 18px 14px; }
.back-button { padding: 5px 0; border: 0; color: var(--red); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.privacy-note { color: #98a0aa; font-size: 10px; text-align: right; }
.fade-in { animation: fade-in .22s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 561px) {
  .page-shell { padding: 18px 0; }
  .quiz-card { min-height: calc(100svh - 36px); border: 1px solid #e4e7ec; border-radius: 12px; box-shadow: 0 16px 44px rgba(16,24,40,.08); }
}

@media (max-width: 380px) {
  .screen { padding-left: 15px; padding-right: 15px; }
  .progress-wrap { padding-left: 15px; padding-right: 15px; }
  .hero-strip { margin-left: -15px; margin-right: -15px; }
  .sales-page { width: calc(100% + 30px); margin-left: -15px; margin-right: -15px; }
  .quiz-footer { padding-left: 15px; padding-right: 15px; }
}

@media (max-width: 430px) {
  .gender-photo { height: 205px; }
  .gender-option-footer { min-height: 50px; padding: 8px 9px; }
  .gender-option-footer strong { font-size: 13px; }
}

/* Legibilidade reforçada para leitura confortável no celular. */
.sales-page { font-size: 15px; }
.sales-cover p:not(.eyebrow) { font-size: 15px; line-height: 1.6; }
.offer-kicker { font-size: 11px; }
.offer-card h3 { font-size: 24px; }
.offer-card p { font-size: 14px; }
.offer-price { font-size: 32px; }
.offer-benefits span { font-size: 13px; line-height: 1.5; }
.offer-card small { font-size: 11px; }
.sales-section > p { font-size: 15px; line-height: 1.6; }
.sales-section h3 { font-size: 23px; }
.feature-list li { font-size: 14px; line-height: 1.55; }
.plan-chips span { font-size: 10px; }
.included-grid strong, .objection-grid span { font-size: 14px; }
.included-grid p, .objection-grid p { font-size: 13px; line-height: 1.5; }
.visual-note { font-size: 11px !important; }
.not-medical strong { font-size: 13px; }
.not-medical p { font-size: 12px; line-height: 1.55; }
.guarantee-section p { font-size: 14px; line-height: 1.55; }
.guarantee-note { font-size: 11px !important; }
.sales-testimonials p { font-size: 14px; line-height: 1.55; }
.sales-testimonials strong { font-size: 12px; }
.faq-question { font-size: 14px; }
.faq-answer { font-size: 13px; line-height: 1.55; }
.purchase-note strong { font-size: 13px; }
.purchase-note p { font-size: 11px; line-height: 1.5; }
.sales-page > .microcopy { font-size: 11px; line-height: 1.5; }
.privacy-note { font-size: 11px; }

@media (max-width: 430px) {
  .sales-cover h2 { font-size: 31px; }
  .sales-intro h3 { font-size: 25px; }
  .sales-section h3 { font-size: 22px; }
}