* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, Segoe UI, Roboto, sans-serif; }
body { background: #fdf3ee; color: #221a17; min-height: 100vh; }

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 32px; border-bottom: 1px solid #f0ddd3; background: #fffaf7;
  position: sticky; top: 0; z-index: 5;
}
.logo { font-weight: 700; font-size: 1.1rem; color: #221a17; flex-shrink: 0; }
.logo-short { display: none; }
.site-nav { display: flex; gap: 22px; }
.site-nav a { color: #7a6a62; text-decoration: none; font-size: .92rem; }
.site-nav a:hover { color: #e8542e; }
.btn-nav { width: auto; padding: 11px 20px; font-size: .9rem; flex-shrink: 0; }

@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-header { padding: 14px 16px; gap: 10px; }
  .logo-full { display: none; }
  .logo-short { display: inline; }
  .btn-nav { padding: 9px 14px; font-size: .82rem; }
}

.screen { text-align: center; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

h1 { font-size: 1.7rem; margin-bottom: 12px; line-height: 1.3; }
h2 { font-size: 1.3rem; margin-bottom: 8px; }
.subtitle { color: #7a6a62; margin-bottom: 28px; font-size: .98rem; }

/* ---- Hero (home visível, igual referência) ---- */
.hero {
  max-width: 1100px; margin: 0 auto; padding: 60px 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding: 36px 20px; } }

.badge-social {
  display: inline-block; background: #fff0e8; color: #e8542e; font-size: .8rem;
  font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.hero-copy h1 { font-size: 2.4rem; text-align: left; margin-bottom: 14px; }
.hero-copy .accent { color: #e8542e; font-style: italic; }
.hero-subtitle { text-align: left; font-size: 1.1rem; color: #7a6a62; margin-bottom: 26px; }
.hero-subtitle strong { color: #221a17; }
.btn-hero { width: auto; padding: 16px 30px; }

.hero-preview { position: relative; display: flex; justify-content: center; }
.preview-mock-card {
  background: #fff; border-radius: 20px; padding: 26px; width: 100%; max-width: 320px;
  box-shadow: 0 24px 60px rgba(80,40,20,.12); text-align: center;
}
.vinyl {
  width: 84px; height: 84px; border-radius: 50%; background: #221a17; color: #ff8a5b;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  margin: 0 auto 14px;
}
.preview-tag { font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: #a68f83; }
.preview-mock-title { font-size: 1.15rem; font-weight: 600; margin-top: 8px; }
.preview-mock-meta { color: #a68f83; font-size: .85rem; margin-bottom: 14px; }
.mock-waveform { color: #f0b89e; letter-spacing: 2px; font-size: 1.1rem; margin-bottom: 14px; overflow: hidden; }
.mock-player { display: flex; align-items: center; gap: 12px; justify-content: center; }
.mock-play {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: #e8542e; color: #fff;
  font-size: .9rem; cursor: pointer;
}
.mock-time { font-size: .82rem; color: #a68f83; }

.rating-float {
  position: absolute; top: -14px; right: 8px; background: #fff; border-radius: 999px;
  padding: 8px 14px; font-size: .78rem; font-weight: 600; box-shadow: 0 10px 24px rgba(80,40,20,.1);
}
.ready-badge {
  position: absolute; bottom: -14px; left: 8px; background: #fff; border-radius: 999px;
  padding: 8px 14px; font-size: .8rem; font-weight: 600; color: #16a34a;
  box-shadow: 0 10px 24px rgba(80,40,20,.1);
}

/* ---- Como funciona ---- */
.como-funciona { max-width: 1000px; margin: 20px auto 0; padding: 60px 32px; text-align: center; }
.section-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: #e8542e; }
.como-funciona h2 { font-size: 1.6rem; margin: 8px 0 36px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card { background: #fff; border-radius: 16px; padding: 24px 18px; text-align: left; box-shadow: 0 10px 30px rgba(80,40,20,.06); }
.step-num {
  display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: #fff0e8;
  color: #e8542e; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 12px;
}
.step-card h3 { font-size: 1rem; margin-bottom: 6px; }
.step-card p { font-size: .86rem; color: #7a6a62; }

/* ---- Avaliações ---- */
.avaliacoes { max-width: 1000px; margin: 0 auto; padding: 40px 32px 80px; text-align: center; }
.avaliacoes h2 { font-size: 1.5rem; margin-bottom: 30px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 780px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card { background: #fff; border-radius: 16px; padding: 22px; text-align: left; box-shadow: 0 10px 30px rgba(80,40,20,.06); }
.review-card p { font-size: .92rem; color: #221a17; margin-bottom: 12px; font-style: italic; }
.review-card span { font-size: .82rem; color: #a68f83; font-weight: 600; }

/* ---- Quiz overlay (modal por cima da home, igual referência) ---- */
#quiz-overlay { position: relative; z-index: 20; }
.quiz-backdrop {
  position: fixed; inset: 0; background: rgba(34, 26, 23, .45); backdrop-filter: blur(2px);
  z-index: 20;
}
body.quiz-open { overflow: hidden; }
.quiz-close {
  position: absolute; top: 18px; right: 18px; background: none; border: none;
  font-size: 1rem; color: #a68f83; cursor: pointer;
}

/* Telas full-page (loading e oferta) que tomam a página inteira, igual referência */
.fullpage-takeover {
  position: fixed; inset: 0; background: #fdf3ee; z-index: 30; overflow-y: auto;
  padding: 40px 20px; display: flex; flex-direction: column; align-items: center;
}
.fullpage-takeover .loading-screen,
.fullpage-takeover .offer-screen { max-width: 480px; width: 100%; margin-top: 40px; }

.btn-primary {
  background: linear-gradient(135deg, #ff8a5b, #e8542e);
  color: #fff; border: none; padding: 16px 32px; border-radius: 14px;
  font-size: 1.05rem; font-weight: 600; cursor: pointer; width: 100%;
}
.btn-primary:hover { opacity: .92; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
/* reafirma largura auto pros botões inline do header/hero (vêm antes no arquivo, precisam vencer a cascata aqui) */
.btn-primary.btn-nav, .btn-primary.btn-hero { width: auto; }

/* ---- Quiz modal ---- */
.quiz-modal-root {
  position: fixed; inset: 0; z-index: 25; display: flex; align-items: center;
  justify-content: center; padding: 20px; overflow-y: auto;
}
.quiz-modal-card {
  position: relative; background: #fff; border-radius: 20px; padding: 28px 26px;
  width: 100%; max-width: 480px; text-align: left;
  box-shadow: 0 20px 60px rgba(80, 40, 20, .2);
  animation: fadeIn .25s ease;
  margin: auto;
}
.quiz-top { margin-bottom: 18px; }
.quiz-section { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #e8542e; text-transform: uppercase; }
.quiz-progress-track { height: 6px; background: #f3e5dc; border-radius: 6px; margin: 8px 0 4px; overflow: hidden; }
.quiz-progress-fill { height: 100%; background: linear-gradient(90deg, #ff8a5b, #e8542e); transition: width .3s ease; }
.quiz-step-count { font-size: .78rem; color: #a68f83; }

.quiz-q { font-size: 1.25rem; margin: 14px 0 6px; }
.quiz-hint { font-size: .88rem; color: #a68f83; margin-bottom: 16px; }

.quiz-body { margin: 16px 0; }

.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.options-grid.wrap { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.option-card.option-extra, .pill.option-extra { display: none; }
.options-grid.options-expanded .option-card.option-extra { display: flex; }
.options-grid.options-expanded .pill.option-extra { display: inline-block; }
.options-show-more {
  display: block; width: 100%; text-align: center; background: none; border: none;
  color: #e8542e; font-weight: 600; font-size: .9rem; padding: 12px; cursor: pointer;
}
.option-card {
  background: #fdf3ee; border: 1.5px solid #f0ddd3; border-radius: 14px;
  padding: 18px 14px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 6px; font-size: .95rem; color: #221a17;
}
.option-card .opt-emoji { font-size: 1.6rem; }
.option-card:hover { border-color: #ff8a5b; }
.option-card.selected { border-color: #e8542e; background: #fff0e8; }

.pill {
  background: #fff; border: 1.5px solid #f0ddd3; border-radius: 999px;
  padding: 10px 16px; cursor: pointer; font-size: .92rem; color: #221a17;
}
.pill.selected { border-color: #e8542e; background: #fff0e8; color: #e8542e; }

.input-text, .textarea-field {
  width: 100%; border: 1.5px solid #f0ddd3; border-radius: 12px;
  padding: 14px; font-size: 1rem; color: #221a17; background: #fdf3ee;
}
.textarea-field { min-height: 110px; resize: vertical; }
.word-counter { font-size: .82rem; color: #e8542e; font-weight: 600; margin-top: 8px; }
.word-counter-ok { color: #16a34a; }
.input-text:focus, .textarea-field:focus { outline: none; border-color: #e8542e; }

.quiz-label { display: block; font-size: .82rem; font-weight: 600; color: #7a6a62; margin: 14px 0 6px; }
.input-wrapper { display: flex; align-items: center; gap: 10px; border: 1.5px solid #f0ddd3; border-radius: 12px; padding: 4px 14px; background: #fdf3ee; }
.input-wrapper .input-text.has-icon { border: none; background: transparent; padding: 10px 0; }
.input-icon { font-size: 1rem; }

.review-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f3e5dc; font-size: .9rem; }
.review-label { color: #a68f83; text-transform: uppercase; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.review-value { text-align: right; color: #221a17; }

/* ---- Order bump (dentro do quiz, igual referência) ---- */
.bump-card {
  display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid #f0ddd3;
  border-radius: 14px; padding: 16px; margin-bottom: 12px; cursor: pointer; background: #fff;
}
.bump-card.selected { border-color: #e8542e; background: #fff0e8; }
.bump-checkbox { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: #e8542e; }
.bump-content { flex: 1; }
.bump-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.bump-title { font-weight: 600; font-size: .95rem; }
.bump-price { font-size: .82rem; font-weight: 700; color: #16a34a; white-space: nowrap; }
.bump-price s { color: #a68f83; font-weight: 400; margin-right: 4px; }
.bump-desc { font-size: .85rem; color: #7a6a62; line-height: 1.4; }

.bump-info {
  background: #fff8e6; border: 1px solid #f3e0a8; border-radius: 12px;
  padding: 14px; font-size: .85rem; color: #7a6438; margin: 14px 0;
}
.bump-guarantee {
  background: #dcfce7; color: #16a34a; font-weight: 600; font-size: .85rem;
  text-align: center; padding: 12px; border-radius: 12px; margin-bottom: 10px;
}
.bump-skip-note { text-align: center; font-size: .82rem; color: #a68f83; }

.quiz-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; }
.quiz-back { background: none; border: none; color: #a68f83; font-size: .92rem; cursor: pointer; }
.quiz-next {
  background: linear-gradient(135deg, #ff8a5b, #e8542e); color: #fff; border: none;
  padding: 13px 26px; border-radius: 12px; font-weight: 600; cursor: pointer; flex: 1;
}
.quiz-next:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Loading screen ---- */
.loading-screen .eyebrow { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: #e8542e; text-transform: uppercase; margin-bottom: 6px; }
.loading-card { background: #fff; border-radius: 20px; padding: 26px; margin-top: 20px; box-shadow: 0 20px 60px rgba(80,40,20,.1); text-align: left; }
.loading-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.loading-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: #a68f83; }
.loading-pct { font-size: 1.5rem; font-weight: 700; color: #e8542e; }

.waveform { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; margin-bottom: 14px; }
.waveform span { width: 3px; background: #f0b89e; border-radius: 3px; height: 40%; animation: wave 1s ease-in-out infinite; }
.waveform span:nth-child(odd) { height: 70%; animation-delay: .15s; }
.waveform span:nth-child(3n) { height: 90%; animation-delay: .3s; }
@keyframes wave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }

.progress-bar { height: 8px; background: #f3e5dc; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
#progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff8a5b, #e8542e); transition: width .3s linear; }
.loading-status { font-size: .88rem; color: #7a6a62; margin-bottom: 18px; }

.draft-box { border-top: 1px dashed #f0ddd3; padding-top: 14px; max-height: 130px; overflow-y: auto; }
.draft-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: #e8542e; }
.draft-line { font-size: .85rem; color: #a68f83; margin-top: 8px; font-family: ui-monospace, monospace; }

/* ---- Offer screen ---- */
.offer-screen .eyebrow { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: #16a34a; text-transform: uppercase; margin-bottom: 6px; }
.offer-screen h2 { margin-bottom: 18px; }
.offer-screen em { color: #e8542e; font-style: normal; }

.preview-card { background: #fff; border-radius: 18px; padding: 20px; text-align: left; box-shadow: 0 14px 40px rgba(80,40,20,.08); margin-bottom: 16px; }
.preview-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.preview-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: #a68f83; }
.badge-free { background: #dcfce7; color: #16a34a; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.preview-title { font-size: 1.1rem; font-weight: 600; margin-top: 4px; }
.preview-meta { color: #a68f83; font-size: .85rem; margin-bottom: 12px; }
.preview-fallback { color: #a68f83; font-size: .85rem; font-style: italic; }
audio { width: 100%; }

.locked-card { background: #201512; color: #fff; border-radius: 18px; padding: 22px; text-align: left; }
.locked-top { display: flex; justify-content: space-between; font-size: .72rem; letter-spacing: .06em; color: #d9b8a8; margin-bottom: 10px; }
.locked-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; }
.locked-list { list-style: none; margin-bottom: 18px; }
.locked-list li { font-size: .88rem; color: #e8d9d0; padding: 4px 0; }
.locked-footer { text-align: center; font-size: .78rem; color: #d9b8a8; margin-top: 10px; }
.locked-card.paywall-active { box-shadow: 0 0 0 3px #ff8a5b; animation: pulse 1.4s ease-in-out 2; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

.preview-cap-note { font-size: .78rem; color: #a68f83; margin-top: 8px; }

/* ---- Tela de confirmação antes do pagamento ---- */
.checkout-confirm-screen { text-align: left; }
.checkout-confirm-screen h2 { text-align: left; }
.checkout-confirm-screen em { color: #e8542e; font-style: normal; }
.confirm-sub { color: #7a6a62; font-size: .9rem; margin-bottom: 18px; }
.order-summary-card { background: #fdf3ee; border: 1px solid #f0ddd3; border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.order-summary-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 10px; }
.order-summary-price { color: #e8542e; font-size: 1.2rem; }
.order-summary-list { list-style: none; }
.order-summary-list li { font-size: .88rem; color: #7a6a62; padding: 3px 0; }
.confirm-hint { font-size: .8rem; color: #a68f83; margin: 6px 0 20px; }
.confirm-footnote { text-align: center; font-size: .8rem; color: #a68f83; margin-top: 12px; }

/* ---- Tela de pagamento Pix (QR code + copia-e-cola) ---- */
.pix-screen { text-align: center; }
.pix-qr-wrap { display: flex; justify-content: center; margin: 20px 0; }
.pix-qr-img { width: 220px; height: 220px; border-radius: 16px; border: 1px solid #f0ddd3; }
.pix-copia-cola { display: flex; gap: 8px; margin-bottom: 16px; }
.pix-copia-cola input { flex: 1; border: 1.5px solid #f0ddd3; border-radius: 10px; padding: 12px; font-size: .82rem; color: #7a6a62; background: #fdf3ee; }
.pix-copia-cola button { background: #e8542e; color: #fff; border: none; border-radius: 10px; padding: 12px 18px; font-weight: 600; cursor: pointer; }
.pix-waiting { font-size: .88rem; color: #a68f83; }
.pix-name-note { font-size: .82rem; color: #7a6a62; background: #fff0e8; border-radius: 10px; padding: 10px 14px; margin-top: 14px; }
.pix-name-note strong { color: #e8542e; }

/* ---- Paywall overlay (dispara quando a prévia bate no cap de segundos) ---- */
.paywall-overlay {
  position: fixed; inset: 0; background: rgba(32, 21, 18, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  z-index: 50; animation: fadeIn .2s ease;
}
.paywall-modal {
  background: #fff; border-radius: 20px; padding: 28px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.paywall-kicker { font-size: .82rem; color: #a68f83; margin-bottom: 6px; }
.paywall-modal h3 { font-size: 1.2rem; margin-bottom: 10px; }
.paywall-text { font-size: .9rem; color: #7a6a62; margin-bottom: 18px; }
.paywall-dismiss { background: none; border: none; color: #a68f83; font-size: .85rem; margin-top: 12px; cursor: pointer; }