/* Eternizada | base: tokens, reset, componentes, chat, checkout. Mobile-first. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --bg: #FBF6F0;
  --bg-2: #F3EAE1;
  --card: #FFFFFF;
  --ink: #1E1418;
  --ink-2: #5A4A50;
  --ink-3: #8C7A82;
  --line: #E9DDD4;
  --primary: #7A1F45;
  --primary-2: #5E1434;
  --primary-soft: #F6E3EA;
  --accent: #E0A33A;
  --accent-2: #C98B22;
  --accent-soft: #FBEFD7;
  --ok: #2E8B57;
  --ok-soft: #E3F4EA;
  --erro: #C0392B;
  --erro-soft: #FBE5E2;
  --pix: #32BCAD;
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 18px;
  --r-sm: 12px;
  --shadow: 0 10px 30px rgba(60, 20, 35, .08);
  --shadow-sm: 0 4px 14px rgba(60, 20, 35, .06);
  --max: 720px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .4em; }
h1 { font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--primary); }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; left: -9999px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.topo { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.logo img { height: 36px; width: auto; display: block; }
.topo-link { font-size: .9rem; color: var(--ink-2); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.topo-link:hover { border-color: var(--primary); color: var(--primary); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 0; font-weight: 600; font-size: 1rem; text-decoration: none; transition: background .2s, color .2s, box-shadow .2s, opacity .2s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(122, 31, 69, .28); }
.btn-primary:hover { background: var(--primary-2); }
.btn-accent { background: var(--accent); color: var(--ink); box-shadow: 0 8px 20px rgba(224, 163, 58, .3); }
.btn-accent:hover { background: var(--accent-2); }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-wa { background: #25D366; color: #fff; }
.btn-wa:hover { background: #1DB954; }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn-bloco { width: 100%; }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: .92rem; }

/* cards e chips */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); font-weight: 600; font-size: .82rem; }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-erro { background: var(--erro-soft); color: var(--erro); }
.aviso { padding: 12px 14px; border-radius: var(--r-sm); background: var(--accent-soft); color: #6B4A0E; font-size: .92rem; }
.aviso-erro { background: var(--erro-soft); color: #7A231A; }
.aviso-ok { background: var(--ok-soft); color: #1F5D3A; }
.mudo { color: var(--ink-3); font-size: .9rem; }

/* hero */
.hero { padding: 26px 0 10px; text-align: center; }
.hero .selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: .85rem; margin-bottom: 14px; }
.hero .selo svg { width: 16px; height: 16px; }
.hero p.sub { font-size: 1.08rem; color: var(--ink-2); max-width: 520px; margin: 0 auto 18px; }
.hero .prova { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink-3); font-size: .88rem; margin-top: 14px; }
.hero .prova .estrelas { color: var(--accent); letter-spacing: 1px; }

/* ---------------------------------------------------------------- chat */
.chat { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; margin: 18px 0 30px; }
.chat-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, #FDF9F5); }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #B2456F); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; flex: none; }
.avatar svg { width: 22px; height: 22px; }
.chat-cab strong { display: block; font-family: var(--font-display); }
.chat-cab small { color: var(--ok); font-weight: 600; font-size: .8rem; display: inline-flex; align-items: center; gap: 5px; }
.chat-cab small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.chat-corpo { padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; max-height: 64vh; overflow-y: auto; scroll-behavior: smooth; }
.msg { max-width: 88%; padding: 12px 15px; border-radius: 18px; line-height: 1.5; font-size: .98rem; animation: sobe .25s ease-out; word-wrap: break-word; }
.msg-bot { align-self: flex-start; background: var(--bg-2); color: var(--ink); border-bottom-left-radius: 6px; }
.msg-user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 6px; }
.msg b { font-weight: 700; }
.msg-bloco { align-self: stretch; max-width: 100%; }
.digitando { display: inline-flex; gap: 4px; padding: 14px 16px; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: pulsa 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulsa { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes sobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; align-self: stretch; padding: 2px 0 6px; }
.opcoes.grade { display: grid; grid-template-columns: repeat(2, 1fr); }
.opcao { min-height: 46px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-weight: 500; text-align: left; transition: border-color .15s, background .15s; }
.opcao:hover { border-color: var(--primary); background: var(--primary-soft); }
.opcao.destaque { border-color: var(--accent); background: var(--accent-soft); }

.chat-rodape { border-top: 1px solid var(--line); padding: 10px 12px 12px; background: #fff; }
.entrada { display: flex; gap: 8px; align-items: flex-end; }
.entrada textarea, .entrada input { flex: 1; min-height: 48px; max-height: 160px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg); resize: none; outline: none; font-size: 16px; }
.entrada textarea:focus, .entrada input:focus { border-color: var(--primary); background: #fff; }
.btn-redondo { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; display: grid; place-items: center; flex: none; transition: background .2s; }
.btn-redondo svg { width: 22px; height: 22px; }
.btn-redondo:hover { background: var(--primary-2); }
.btn-redondo.sec { background: var(--bg-2); color: var(--ink); }
.btn-redondo.sec:hover { background: var(--line); }
.btn-redondo.gravando { background: var(--erro); animation: pisca 1s infinite; }
@keyframes pisca { 50% { opacity: .6; } }
.entrada-dica { font-size: .8rem; color: var(--ink-3); margin: 6px 4px 0; }
.gravador { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--erro-soft); color: #7A231A; font-weight: 600; }
.gravador .tempo { font-variant-numeric: tabular-nums; margin-left: auto; }

/* letra */
.letra-card { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.letra-card h4 { font-family: var(--font-display); margin: 0 0 8px; font-size: 1.05rem; }
.letra-texto { white-space: pre-wrap; font-size: .95rem; line-height: 1.6; color: var(--ink-2); max-height: 260px; overflow-y: auto; padding-right: 6px; }
.letra-texto .tag { display: block; color: var(--accent-2); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 10px 0 2px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.acoes .btn { flex: 1 1 auto; }

/* espera */
.espera { text-align: center; padding: 14px 8px; }
.espera .eq { display: inline-flex; gap: 4px; align-items: flex-end; height: 34px; margin-bottom: 8px; }
.espera .eq i { width: 6px; background: var(--primary); border-radius: 3px; animation: eq 1.1s ease-in-out infinite; }
.espera .eq i:nth-child(2) { animation-delay: .12s; } .espera .eq i:nth-child(3) { animation-delay: .24s; }
.espera .eq i:nth-child(4) { animation-delay: .36s; } .espera .eq i:nth-child(5) { animation-delay: .48s; }
@keyframes eq { 0%, 100% { height: 8px; } 50% { height: 32px; } }
.espera .passo { font-weight: 600; color: var(--primary); min-height: 1.4em; }
.espera .barra { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; margin: 10px 0 6px; }
.espera .barra i { display: block; height: 100%; width: 10%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 1s linear; }

/* player */
.player { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px; }
.player .capa { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: var(--bg-2); }
.player .info { flex: 1; min-width: 0; }
.player .titulo { font-family: var(--font-display); font-weight: 700; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .tempo { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.player .trilha { height: 6px; border-radius: 3px; background: var(--bg-2); margin: 6px 0; overflow: hidden; cursor: pointer; }
.player .trilha i { display: block; height: 100%; width: 0; background: var(--primary); }
.player .play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; display: grid; place-items: center; flex: none; }
.player .play svg { width: 22px; height: 22px; }
.player .selo-previa { font-size: .72rem; font-weight: 700; color: var(--accent-2); text-transform: uppercase; letter-spacing: .06em; }

/* planos */
.planos { display: grid; gap: 12px; }
.plano { position: relative; border: 2px solid var(--line); border-radius: 18px; padding: 16px; background: #fff; cursor: pointer; text-align: left; width: 100%; transition: border-color .15s, box-shadow .15s; }
.plano:hover { border-color: var(--ink-3); }
.plano.ativo { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.plano .badge { position: absolute; top: -11px; right: 14px; background: var(--accent); color: var(--ink); font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.plano .nome { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plano .preco { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--primary); white-space: nowrap; }
.plano .preco s { color: var(--ink-3); font-weight: 500; font-size: .85rem; margin-right: 6px; }
.plano .detalhe { color: var(--ink-2); font-size: .9rem; margin: 4px 0 8px; }
.plano ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; color: var(--ink-2); }
.plano li { display: flex; gap: 8px; align-items: flex-start; }
.plano li svg { width: 16px; height: 16px; flex: none; color: var(--ok); margin-top: 3px; }
.plano .marca { position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.plano.ativo .marca { border-color: var(--primary); background: var(--primary); }
.plano.ativo .marca::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.plano.com-marca { padding-left: 46px; }
.plano.com-marca .badge { right: 12px; }

/* forma de pagamento */
.fp-titulo { font-family: var(--font-display); font-weight: 700; margin: 18px 0 8px; }
.fp-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fp-opcao { position: relative; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 8px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: .86rem; color: var(--ink); transition: border-color .15s, background .15s; }
.fp-opcao svg { width: 28px; height: 28px; }
.fp-opcao small { font-weight: 400; color: var(--ink-3); font-size: .72rem; }
.fp-opcao.ativa { border-color: var(--primary); background: var(--primary-soft); }
.fp-opcao:hover { border-color: var(--ink-3); }
.fp-aviso { margin: 10px 0 0; }
.campos { display: grid; gap: 10px; margin-top: 14px; }
.campo label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.campo input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); font-size: 16px; outline: none; }
.campo input:focus { border-color: var(--primary); background: #fff; }
.campo.erro input { border-color: var(--erro); }
.campo .msg-campo { font-size: .8rem; color: var(--erro); margin-top: 4px; }
.seguro { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink-3); font-size: .82rem; margin-top: 10px; }
.seguro svg { width: 16px; height: 16px; }

/* pix */
.pix-box { text-align: center; }
.pix-box .qr { display: inline-block; padding: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; margin: 10px 0; }
.pix-box .qr canvas, .pix-box .qr img { display: block; width: 220px; height: 220px; }
.pix-box .codigo { display: flex; gap: 8px; margin: 8px 0; }
.pix-box .codigo input { flex: 1; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); font-size: .8rem; color: var(--ink-2); }
.pix-box .valor { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--primary); }
.pix-box .status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .9rem; margin-top: 6px; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: gira .8s linear infinite; display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }
.pix-passos { text-align: left; font-size: .88rem; color: var(--ink-2); margin: 10px auto 0; max-width: 340px; padding-left: 18px; }

/* contador promo */
.contador { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--erro-soft); color: #7A231A; font-weight: 700; font-variant-numeric: tabular-nums; }

/* pedido / downloads */
.versoes { display: grid; gap: 10px; }
.versao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.versao .player { flex: 1 1 100%; }
.versao .baixar { display: inline-flex; gap: 8px; }
.sucesso { text-align: center; padding: 8px 0 4px; }
.sucesso .check { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; margin: 0 auto 10px; }
.sucesso .check svg { width: 32px; height: 32px; }
video.preview { width: 100%; max-width: 320px; border-radius: 16px; display: block; margin: 8px auto; background: #000; aspect-ratio: 9 / 16; }

/* seções da home */
.secao { padding: 26px 0; }
.passos { display: grid; gap: 12px; margin-top: 22px; }
.passo { display: flex; gap: 14px; align-items: flex-start; }
.passo .n { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-family: var(--font-display); font-weight: 800; display: grid; place-items: center; flex: none; }
.passo strong { display: block; font-family: var(--font-display); }
.passo p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.exemplos { display: grid; gap: 10px; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-family: var(--font-display); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::after { content: "+"; color: var(--primary); font-size: 1.3rem; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 8px 0 0; color: var(--ink-2); font-size: .95rem; }
footer { padding: 26px 0 40px; text-align: center; color: var(--ink-3); font-size: .85rem; }
footer a { color: var(--ink-2); }

@media (min-width: 640px) {
  .opcoes.grade { grid-template-columns: repeat(3, 1fr); }
  .planos { grid-template-columns: 1fr 1fr; }
  .versao .player { flex: 1 1 60%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* vídeo da oferta, foto da Bia, prévia em vídeo e depoimentos */
.hero-video { position: relative; margin: 22px auto 0; max-width: 560px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: #000; aspect-ratio: 2 / 1; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video-selo { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; justify-content: space-between; }
.hero-video-selo .chip { background: rgba(255,255,255,.92); backdrop-filter: blur(6px); }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; }
.eyebrow { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.previa-video { max-width: 320px; margin: 14px auto 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: #000; aspect-ratio: 9 / 16; }
.previa-video video { width: 100%; height: 100%; display: block; object-fit: cover; }
.depo { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow-sm); }
.depo .player { border: 0; padding: 0 0 8px; }
.depo-quote { margin: 8px 0 4px; color: var(--ink); font-size: .98rem; }
.depo-autor { margin: 0; color: var(--ink-3); font-size: .85rem; font-weight: 600; }
.depo-autor .estrelas { color: var(--accent); margin-left: 6px; }
.secao h2 { margin-bottom: 6px; }

/* ---------------------------------------------------------------- passos com foto */
.passo-foto { position: relative; flex: none; width: 84px; height: 84px; }
.passo-foto img { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; display: block; }
.passo-foto .n { position: absolute; top: -8px; left: -8px; width: 28px; height: 28px; font-size: .85rem; background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(122,31,69,.3); }

/* ---------------------------------------------------------------- funil quiz (versão B) */
.quiz-card-home { display: grid; gap: 12px; text-align: center; }
.quiz-card-home .seguro { margin-top: 0; }
.quiz-bia { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 60% 30%; }
.quiz-card-home strong { font-family: var(--font-display); font-size: 1.1rem; display: block; margin-bottom: 4px; }
.quiz-card-home p { margin: 0; }
.cta-flutuante { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 26px rgba(122,31,69,.35); }
.cta-flutuante svg { width: 22px; height: 22px; flex: none; }
body.funil-quiz { padding-bottom: 80px; }
@media (min-width: 640px) { .cta-flutuante { left: auto; right: 20px; bottom: 20px; padding: 0 22px; } body.funil-quiz { padding-bottom: 0; } }

.quiz-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(30, 20, 24, .72); display: none; align-items: center; justify-content: center; padding: 0; }
.quiz-fundo.aberto { display: flex; }
.quiz { background: #fff; width: 100%; height: 100%; max-width: 560px; display: flex; flex-direction: column; }
@media (min-width: 640px) { .quiz { height: auto; max-height: 92vh; border-radius: 22px; box-shadow: var(--shadow); } .quiz-fundo { padding: 16px; } }
.quiz-cab { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 10px; border-bottom: 1px solid var(--line); }
.quiz-cab > div:first-child { flex: 1; }
.quiz-eyebrow { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); font-weight: 700; margin-bottom: 8px; }
.quiz-barra { height: 8px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.quiz-barra i { display: block; height: 100%; width: 8%; background: linear-gradient(90deg, var(--primary), #B2456F); transition: width .3s; }
.quiz-cont { display: none; }
.quiz-fechar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg-2); color: var(--ink); font-size: 1rem; }
.quiz-corpo { flex: 1; overflow-y: auto; padding: 18px 16px 20px; }
.quiz-q { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
.quiz-hint { color: var(--ink-2); font-size: 1.05rem; line-height: 1.5; margin: 0 0 12px; }
.quiz-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
.quiz-grade.tres { grid-template-columns: repeat(3, 1fr); }
.quiz-grade.dois { grid-template-columns: repeat(2, 1fr); }
.quiz-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 14px 10px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 1.05rem; line-height: 1.3; text-align: center; transition: border-color .15s, background .15s, transform .1s; }
.quiz-card:hover { border-color: var(--ink-3); }
.quiz-card.selected { border-color: var(--primary); background: var(--primary-soft); }
.quiz-card:active { transform: scale(.98); }
.quiz-ic { font-size: 1.9rem; line-height: 1; }
.quiz-grade.tres .quiz-card { min-height: 90px; font-size: .98rem; }
.quiz-grade.tres .quiz-ic { font-size: 1.6rem; }
.quiz-grade.chips { display: flex; flex-wrap: wrap; }
.quiz-chip { padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 500; font-size: 1.05rem; color: var(--ink); transition: border-color .15s, background .15s; }
.quiz-chip.selected { border-color: var(--primary); background: var(--primary); color: #fff; }
.quiz-mais { display: block; margin: 6px auto 0; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--primary-soft); background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: 1rem; }
.quiz-mais:hover { background: #F0D3DE; }
.input-text { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); font-size: 16px; outline: none; margin-top: 6px; }
.input-text:focus { border-color: var(--primary); background: #fff; }
textarea.input-text { resize: vertical; line-height: 1.5; }
.quiz-audio { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.quiz-audio .gravando { background: var(--erro-soft); color: var(--erro); border-color: var(--erro); }
.quiz-audio #qMic:not(.gravando) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.quiz-audio #qMicStatus:not(:empty) { flex-basis: 100%; }
.quiz-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.quiz-voltar { border: 0; background: none; color: var(--ink-2); font-weight: 600; font-size: 1.05rem; padding: 10px 6px; }
.quiz-continuar { flex: 1; max-width: 300px; }
.quiz-continuar:disabled { background: var(--line); color: var(--ink-3); box-shadow: none; opacity: 1; }
.quiz-resumo { display: grid; gap: 8px; margin-bottom: 12px; }
.quiz-res { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 1.05rem; }
.quiz-res small { display: block; color: var(--ink-3); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.quiz-editar { border: 0; background: none; color: var(--primary); font-weight: 600; font-size: 1rem; flex: none; }

/* ---------------------------------------------------------------- hero com foto de lembrança desfocada */
.hero-fundo { position: relative; margin: 0 -16px; padding: 34px 16px 22px; overflow: hidden; border-radius: 0 0 32px 32px; }
.hero-bg { position: absolute; inset: -40px; background: url("/static/marca/hero-fundo.jpg") center 40% / cover no-repeat; filter: blur(6px) saturate(1.1); transform: scale(1.08); z-index: 0; animation: heroZoom 18s ease-in-out infinite alternate; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,246,240,.62) 0%, rgba(251,246,240,.86) 55%, var(--bg) 100%); }
.hero-conteudo { position: relative; z-index: 1; }
.hero-fundo .selo { background: rgba(255,255,255,.85); backdrop-filter: blur(6px); }
.hero-fundo p.sub { color: var(--ink-2); }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1.16); } }

/* ---------------------------------------------------------------- animações (entrada e revelação no scroll) */
.hero-conteudo > * { opacity: 0; transform: translateY(14px); animation: entra .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-conteudo > :nth-child(1) { animation-delay: .05s; } .hero-conteudo > :nth-child(2) { animation-delay: .15s; }
.hero-conteudo > :nth-child(3) { animation-delay: .25s; } .hero-conteudo > :nth-child(4) { animation-delay: .35s; }
.hero-conteudo > :nth-child(5) { animation-delay: .45s; } .hero-conteudo > :nth-child(6) { animation-delay: .55s; }
@keyframes entra { to { opacity: 1; transform: none; } }
.revela { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.revela.visivel { opacity: 1; transform: none; }
.passos .passo.revela:nth-child(2) { transition-delay: .08s; } .passos .passo.revela:nth-child(3) { transition-delay: .16s; } .passos .passo.revela:nth-child(4) { transition-delay: .24s; }
.btn-primary, .btn-accent { transition: background .2s, box-shadow .2s, transform .15s; }
.btn-primary:hover, .btn-accent:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(122,31,69,.32); }
.btn-primary:active, .btn-accent:active { transform: translateY(0); }
.hero-conteudo .btn-primary { position: relative; isolation: isolate; animation: entra .7s .25s cubic-bezier(.2,.7,.2,1) forwards, pulsaCta 1.6s 1.2s ease-in-out infinite; }
@keyframes pulsaCta { 0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(122,31,69,.3), 0 0 0 0 rgba(224,163,58,.55); } 50% { transform: scale(1.05); box-shadow: 0 14px 36px rgba(122,31,69,.55), 0 0 0 6px rgba(224,163,58,.18); } }
/* CTA do topo: anéis dourados que se expandem (radar) + brilho varrendo o botão */
#ctaHero { overflow: visible; background: linear-gradient(110deg, var(--primary) 0 42%, #A63A68 50%, var(--primary) 58% 100%); background-size: 260% 100%; animation: entra .7s .25s cubic-bezier(.2,.7,.2,1) forwards, pulsaCta 1.6s 1.2s ease-in-out infinite, brilhoCta 2.4s 1.4s linear infinite; }
#ctaHero::before, #ctaHero::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 3px solid var(--accent); opacity: 0; pointer-events: none; z-index: -1; animation: anelCta 1.8s 1.4s ease-out infinite; }
#ctaHero::after { animation-delay: 2.3s; }
@keyframes anelCta { 0% { transform: scale(1); opacity: .95; } 70% { opacity: .25; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes brilhoCta { 0% { background-position: 120% 0; } 45%, 100% { background-position: -60% 0; } }
.hero-conteudo .btn-primary:hover { animation-play-state: paused; }
#ctaHero:hover::before, #ctaHero:hover::after { animation-play-state: paused; opacity: 0; }
.card, .depo, .plano, .opcao, .quiz-card { transition: transform .18s ease, box-shadow .2s ease, border-color .15s, background .15s; }
.depo:hover, .plano:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.opcao:active, .quiz-card:active, .quiz-chip:active { transform: scale(.97); }
.msg { animation: sobe .32s cubic-bezier(.2,.7,.2,1); }
.player .play { transition: transform .15s, background .2s; }
.player .play:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; } .hero-conteudo > * { opacity: 1; transform: none; animation: none; }
  .revela { opacity: 1; transform: none; transition: none; } .hero-conteudo .btn-primary { animation: none; }
  #ctaHero { background: var(--primary); animation: none; } #ctaHero::before, #ctaHero::after { animation: none; display: none; }
}

/* mini player da música-demo (equalizador que se mexe ao tocar) */
.demo-player { margin-top: 2px; }
.mini-player { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(135deg, var(--primary-soft), #fff); border: 1px solid var(--primary-soft); }
.mp-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 5px 14px rgba(122,31,69,.32); transition: transform .15s, background .2s; }
.mp-play:hover { background: var(--primary-2); } .mp-play:active { transform: scale(.94); }
.mp-play svg { width: 18px; height: 18px; }
.mp-viz { flex: 1; display: flex; align-items: center; gap: 3px; height: 30px; cursor: pointer; }
.mp-viz i { flex: 1; height: 100%; min-width: 2px; border-radius: 2px; background: var(--primary); opacity: .24; transform: scaleY(.16); transform-origin: center; transition: transform .12s ease, opacity .2s; }
.mp-viz i.tocado { opacity: .8; }
.mini-player.tocando .mp-viz i { animation: eqbar .8s ease-in-out infinite; }
@keyframes eqbar { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.mp-time { font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; min-width: 34px; text-align: right; }
@media (prefers-reduced-motion: reduce) { .mini-player.tocando .mp-viz i { animation: none; transform: scaleY(.6); } }

.titulo-icone { display: inline-flex; align-items: center; gap: 7px; }
.titulo-icone img { width: 22px; height: 22px; flex: none; }

/* depoimentos curtos na página do pedido */
.depos-mini { margin-top: 20px; display: grid; gap: 10px; }
.depos-titulo { font-size: 1.05rem; font-family: var(--font-display); font-weight: 700; text-align: center; margin: 0 0 4px; }
.depo-mini { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-sm); }
.depo-mini p { margin: 0 0 6px; color: var(--ink); font-size: .93rem; }
.depo-mini span { color: var(--ink-3); font-size: .82rem; font-weight: 600; }
.depo-mini .estrelas { color: var(--accent); font-weight: 400; margin-left: 4px; }

.unlock-box { margin-top: 14px; }
.unlock-box.aparece { animation: revelaBtn .5s ease-out; }
@keyframes revelaBtn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- player da prévia (disco) */
.previa { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm); text-align: center; }
.previa-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.previa-eyebrow { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.previa-free { background: var(--ok-soft); color: var(--ok); font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.previa-disco { width: 118px; height: 118px; margin: 6px auto 14px; border-radius: 50%; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at center, #1c1418 0 24%, transparent 24.5%),
    repeating-radial-gradient(circle at center, #2a1f24 0 2px, #171114 2px 5px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06); }
.previa-disco::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.16) 35deg, rgba(255,255,255,0) 70deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.12) 215deg, rgba(255,255,255,0) 250deg); }
.previa-disco::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle at center, var(--bg) 0 5px, var(--primary) 5.5px 100%); box-shadow: 0 0 0 2px var(--accent); }
.previa.tocando .previa-disco { animation: giraDisco 3.2s linear infinite; }
@keyframes giraDisco { to { transform: rotate(360deg); } }
.previa-titulo { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; line-height: 1.2; }
.previa-sub { color: var(--ink-3); font-size: .9rem; margin-top: 2px; }
.previa-hint { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 9px; font-weight: 700; }
.previa-ctrl { display: flex; align-items: center; gap: 12px; }
.previa-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 5px 14px rgba(122,31,69,.32); transition: transform .15s, background .2s; }
.previa-play:hover { background: var(--primary-2); } .previa-play:active { transform: scale(.94); }
.previa-play svg { width: 20px; height: 20px; }
.previa-track { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-2); position: relative; cursor: pointer; overflow: visible; }
.previa-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--primary); border-radius: 3px; }
.previa-dot { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); transform: translate(-50%,-50%); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.previa-tempo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 9px; font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.previa-lock { display: inline-flex; align-items: center; gap: 4px; }
.previa-lock svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .previa.tocando .previa-disco { animation: none; } }

/* pulsar no botão de desbloquear */
.btn.pulsa-cta { background: #3FB56F; color: #fff; animation: pulsaCompra 1.6s ease-in-out infinite; }
.btn.pulsa-cta:hover { background: #36A563; color: #fff; }
@keyframes pulsaCompra { 0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(63,181,111,.32); } 50% { transform: scale(1.03); box-shadow: 0 12px 30px rgba(63,181,111,.55); } }
.pulsa-cta:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .pulsa-cta { animation: none; } }

/* ---------------------------------------------------------------- order bumps no checkout */
.bumps { margin-top: 6px; }
.bump { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1.5px dashed #7FC9A0; border-radius: 14px; background: #EAF7EF; margin-bottom: 10px; cursor: pointer; }
.bump.ativo { border-style: solid; border-color: #1F6B45; background: #DFF2E6; }
.bump input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.bump-check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #4FA876; background: #fff; flex: none; margin-top: 2px; display: grid; place-items: center; }
.bump.ativo .bump-check { background: #1F6B45; border-color: #1F6B45; }
.bump.ativo .bump-check::after { content: ""; width: 7px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); }
.bump-txt { flex: 1; }
.bump-txt b { display: block; font-family: var(--font-display); font-size: 1rem; }
.bump-txt b em { font-style: normal; color: #1F6B45; white-space: nowrap; }
.bump-txt small { display: block; color: var(--ink-2); font-size: .86rem; margin-top: 2px; }
.bump-campos { display: grid; gap: 8px; margin-top: 10px; }
.bump-campos .campo label { font-size: .8rem; }
.bump-campos input, .bump-campos select, .bump-campos textarea { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; }
.bump-campos textarea { resize: vertical; }
.bump-total { text-align: right; font-family: var(--font-display); font-size: 1.05rem; margin: 4px 0 6px; }
.bump-total b { color: var(--primary); font-size: 1.25rem; }

/* ---------------------------------------------------------------- upsell + extras na página do pedido */
.upsell-card { margin-top: 22px; padding: 16px; border-radius: 18px; border: 2px solid var(--accent); background: linear-gradient(180deg, #FFF9EE, #fff); position: relative; }
.upsell-tag { position: absolute; top: -11px; left: 14px; background: var(--accent); color: var(--ink); font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.upsell-card h3 { margin: 6px 0 4px; }
.fotos-area { margin: 10px 0; }
.fotos-status { margin-top: 6px; font-size: .85rem; }
.upsell-preco { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--primary); }
.upsell-preco small { font-family: var(--font); font-weight: 500; color: var(--ink-3); font-size: .8rem; }
.upsell-botoes { display: grid; gap: 8px; margin-top: 10px; }
.extras-lista { display: grid; gap: 10px; }
.extra-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; }
.extra-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.extra-cab .chip .spinner { width: 12px; height: 12px; margin-right: 4px; }
.presente-box { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); }
.presente-box .codigo { display: flex; gap: 8px; margin-top: 6px; }
.presente-box .codigo input { flex: 1; min-height: 42px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--line); font-size: .8rem; }

/* ---------------------------------------------------------------- página de presente */
.presente-body { background: linear-gradient(180deg, #FBF6F0, #F6E3EA 60%, #FBF6F0); }
.presente-card { text-align: center; }
.presente-selo { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; font-size: .85rem; margin-bottom: 8px; }
.presente-selo svg { width: 16px; height: 16px; }
.presente-titulo { font-size: clamp(1.8rem, 8vw, 2.6rem); margin-bottom: 2px; }
.presente-de { color: var(--ink-2); margin-bottom: 10px; }
.presente-recado { margin: 8px 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--bg); color: var(--ink); font-style: italic; }
.presente-letra { margin-top: 16px; text-align: left; }
.presente-letra summary { cursor: pointer; font-weight: 600; color: var(--primary); }

/* checkout: cabeçalho compacto com vinil girando, sem player (foco no pagamento) */
.ck-card { padding: 16px 18px; }
.ck-h2 { margin: 0 0 10px; font-size: 1.15rem; }
.ck-musica { display: flex; align-items: center; gap: 14px; }
.ck-info { color: var(--primary); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.ck-sub { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.ck-vinil { width: 64px; height: 64px; flex: none; border-radius: 50%; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at center, #1c1418 0 24%, transparent 24.5%),
    repeating-radial-gradient(circle at center, #2a1f24 0 1.5px, #171114 1.5px 3.5px);
  box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  animation: giraDisco 2.6s linear infinite; }
.ck-vinil::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.16) 35deg, rgba(255,255,255,0) 70deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.12) 215deg, rgba(255,255,255,0) 250deg); }
.ck-vinil span { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle at center, var(--bg) 0 3px, var(--primary) 3.5px 100%); box-shadow: 0 0 0 1.5px var(--accent, #D9A441); }
@media (prefers-reduced-motion: reduce) { .ck-vinil { animation: none; } }

/* entrega agendada: dia e hora em selects (mesmo comportamento em qualquer aparelho) */
.ag-quando { display: grid; grid-template-columns: 1.9fr 1fr; gap: 8px; }
.ag-quando select { width: 100%; min-height: 44px; padding: 8px 6px 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; }

/* quiz: letras maiores (público mais velho) */
.quiz-corpo input, .quiz-corpo textarea, .quiz-corpo select { font-size: 18px; }
.quiz-corpo label, .quiz-corpo .campo label { font-size: 1rem; }
.quiz-corpo p, .quiz-corpo .mudo, .quiz-corpo small { font-size: 1rem; }
.quiz-continuar { font-size: 1.1rem; min-height: 56px; }

/* player: disco de vinil no lugar da capa (gira enquanto toca) */
.player .capa.disco-mini { width: 56px; height: 56px; border-radius: 50%; position: relative; overflow: hidden; flex: none;
  background:
    radial-gradient(circle at center, #1c1418 0 24%, transparent 24.5%),
    repeating-radial-gradient(circle at center, #2a1f24 0 1.5px, #171114 1.5px 3.5px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06); }
.player .disco-mini::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.16) 35deg, rgba(255,255,255,0) 70deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.12) 215deg, rgba(255,255,255,0) 250deg); }
.player .disco-mini span { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle at center, var(--bg) 0 2.5px, var(--primary) 3px 100%); box-shadow: 0 0 0 1.5px var(--accent); }
.player.tocando .disco-mini { animation: giraDisco 2.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .player.tocando .disco-mini, .hero-conteudo .btn-primary { animation: none; } }
/* meus pedidos */
.lista-pedidos { display: grid; gap: 10px; }
.item-pedido { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; }
.item-pedido b { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.item-pedido small { color: var(--ink-3); font-size: .88rem; }
.item-pedido .btn { flex: none; }

/* quiz: destaques dentro da etapa do nome */
.quiz-tracos { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }
.quiz-tracos.aparece { animation: sobe .35s ease-out; }
.quiz-q-sub { font-size: 1.3rem; }

/* checkout em popup + oferta de saída */
.ck-modal .quiz-corpo { background: var(--bg); }
.ck-corpo .ck-card, .ck-corpo .ck-planos, .ck-corpo .ck-pix { box-shadow: none; }
.ck-saida { text-align: center; padding: 8px 2px 16px; }
.ck-saida-ic { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.ck-saida h2 { font-size: 1.6rem; margin-bottom: 8px; }
.ck-saida-precos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 10px; }
.ck-saida-precos > div { background: var(--accent-soft); border-radius: 14px; padding: 12px 8px; }
.ck-saida-precos small { display: block; color: var(--ink-2); font-size: .85rem; margin-bottom: 4px; }
.ck-saida-precos s { display: block; color: var(--ink-3); font-size: .95rem; }
.ck-saida-precos b { color: var(--primary); font-family: var(--font-display); font-size: 1.4rem; }
.ck-saida-nao, .volta-nao { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--ink-3); text-decoration: underline; font-size: .95rem; }
/* back redirect na home */
.volta { position: fixed; inset: 0; z-index: 70; background: rgba(30,20,24,.82); display: flex; align-items: center; justify-content: center; padding: 20px; }
.volta-card { background: #fff; border-radius: 22px; padding: 28px 22px 22px; max-width: 420px; width: 100%; text-align: center; animation: sobe .3s ease-out; box-shadow: var(--shadow); }
.volta-selo { display: inline-block; background: var(--primary-soft); color: var(--primary); font-weight: 700; padding: 6px 14px; border-radius: 999px; font-size: .9rem; margin-bottom: 12px; }
.volta-card h2 { font-size: 1.7rem; margin-bottom: 8px; } .volta-card h2 b { color: var(--primary); }
.volta-card p { color: var(--ink-2); margin-bottom: 18px; }

/* popup do checkout: sempre uma coluna (o modal tem 560px mesmo em tela larga) */
.ck-corpo .planos { grid-template-columns: 1fr !important; }
.ck-corpo .plano .nome { flex-wrap: wrap; }
.ck-modal .quiz-corpo { padding: 14px 12px 24px; }
@media (min-width: 640px) { .ck-modal { width: min(100%, 560px); } }
/* quiz: aviso do WhatsApp em destaque */
.quiz-destaque { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-soft); color: var(--primary); border-radius: 14px; padding: 12px 14px; font-size: 1.02rem; font-weight: 600; line-height: 1.45; margin-top: 12px; }
.quiz-destaque span:first-child { font-size: 1.5rem; line-height: 1; }

/* prévia: risco vinho no fim da parte grátis; o resto do trilho fica hachurado (bloqueado) */
.previa-bloq { position: absolute; top: 0; right: 0; height: 100%; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(135deg, #E4D6CC 0 3px, #F3EAE1 3px 7px); }
.previa-marca { position: absolute; top: -5px; width: 3px; height: 16px; background: var(--primary); border-radius: 2px; transform: translateX(-50%); z-index: 1; }
.previa-marca::after { content: attr(data-t); position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.previa-fill { z-index: 1; }
.previa-dot { z-index: 2; }

/* página do pedido: passo a passo de como a música está sendo feita */
.feito { margin-top: 16px; padding: 16px 16px 8px; background: var(--bg); border-radius: 16px; text-align: left; }
.feito-titulo { font-family: var(--font-display); font-weight: 700; margin-bottom: 8px; }
.feito-lista { list-style: none; margin: 0; padding: 0; }
.feito-lista li { display: flex; gap: 12px; align-items: center; padding: 8px 0; color: var(--ink-3); position: relative; transition: color .3s; }
.feito-lista li + li::before { content: ""; position: absolute; left: 13px; top: -9px; height: 18px; width: 2px; background: var(--line); }
.feito-ic { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: #fff; flex: none; display: grid; place-items: center; position: relative; z-index: 1; transition: background .3s, border-color .3s; }
.feito-ic i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.feito-ok { color: var(--ink-2); }
.feito-ok .feito-ic { background: var(--primary); border-color: var(--primary); }
.feito-ok .feito-ic i { width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; border-radius: 0; background: none; transform: rotate(45deg) translate(-1px, -1px); }
.feito-atual { color: var(--primary); font-weight: 600; }
.feito-atual .feito-ic { border-color: var(--primary); animation: pulsaPasso 1.4s ease-in-out infinite; }
.feito-atual .feito-ic i { background: var(--primary); }
@keyframes pulsaPasso { 0%, 100% { box-shadow: 0 0 0 0 rgba(122,31,69,.35); } 50% { box-shadow: 0 0 0 7px rgba(122,31,69,0); } }

/* tradução simultânea: esconde a página por um instante até traduzir (máx. 1,5 s) */
html.i18n-espera body { visibility: hidden; }
.idioma-sel { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.idioma-sel select { font: inherit; font-size: .88rem; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); }
.idioma-sel .dbip { font-size: .72rem; color: var(--ink-3); }
/* cartão (Stripe) */
.fp-cartao { margin-top: 12px; padding: 14px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; min-height: 48px; }
.fp-cartao.foco { border-color: var(--primary); }

/* versão 25/09/2026: cartão "Visa ou Mastercard" no checkout de fora (muda o ?v= dos scripts) */
.quiz-ofertas { display: flex; gap: 10px; align-items: flex-start; margin: 12px 2px 4px; font-size: .86rem; line-height: 1.4; color: var(--ink-3); cursor: pointer; }
.quiz-ofertas input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--primary); }
.legal h1 { font-size: 1.5rem; margin: 0 0 6px; }
.legal h2 { font-size: 1.08rem; margin: 22px 0 6px; }
.legal p, .legal li { line-height: 1.55; }
.legal ul { padding-left: 20px; }
.fp-termos { font-size: .78rem; color: var(--ink-3); text-align: center; margin: 10px 4px 0; line-height: 1.4; }
.fp-termos a { color: inherit; text-decoration: underline; }

/* === Responsividade à prova de idioma (25/09/2026) ===========================================
   Alemão, francês e holandês têm palavras e títulos bem maiores que o português. Coluna de grid e
   item de flex precisam poder encolher (minmax(0, 1fr) / min-width: 0) e o texto quebra dentro da
   caixa em vez de empurrar a página pra fora da tela no celular. */
html, body { overflow-wrap: break-word; }
h1, h2, h3, h4, p, li, label, small { hyphens: auto; -webkit-hyphens: auto; }
.opcoes.grade, .quiz-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-saida-precos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ag-quando { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.versoes, .planos, .campos, .extras-lista, .upsell-botoes, .lista-pedidos, .exemplos, .depos-mini, .passos,
.quiz-resumo, .bump-campos, .quiz-card-home { grid-template-columns: minmax(0, 1fr); }
.versao, .versao .pl, .player, .player .info { min-width: 0; }
.versao .pl { flex: 1 1 100%; }
.btn { max-width: 100%; }
/* campo + botão lado a lado (link de presente e Pix copia-e-cola): o campo encolhe, o botão ("Kopieren", "Copier"...) fica inteiro */
.codigo input { min-width: 0; }
.codigo .btn { flex: none; }

/* versão 26/09/2026: fotos uma por vez; cartão do Brasil em reais; áudio da história em todos os idiomas */

/* selos de pagamento embaixo das formas de pagamento (fora do Brasil): Stripe, Visa e Mastercard */
.fp-selos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 2px; font-size: .82rem; color: var(--ink-2); }
.fp-selos > svg { width: 14px; height: 14px; flex: none; }
.fp-selos img { display: block; width: auto; }
.fp-selos > img { height: 18px; }
.fp-selos-cards { display: flex; gap: 6px; }
.fp-selos-cards img { height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }