:root {
  --fundo: #FBF6EE; --branco: #fff; --tinta: #263238; --suave: #5B6770; --linha: #E6DDD0;
  --teal: #2F7F79; --teal-escuro: #23625D; --teal-claro: #E3F0EE;
  --terra: #E07A3F; --terra-escuro: #C5622A; --terra-claro: #FBE9DE; --creme: #EFE3D0;
  --titulo: 'Poppins', system-ui, sans-serif; --texto: 'Inter', system-ui, sans-serif;
  --raio: 16px; --sombra: 0 10px 30px rgba(38, 50, 56, .10);
}
* { box-sizing: border-box; }
[hidden]:not(.quiz-voltar) { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--texto); font-size: 18px; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.18; margin: 0; letter-spacing: -.5px; }
p { margin: 0 0 14px; }
a { color: var(--teal); }

.botao { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; padding: 16px 22px;
  border: 0; border-radius: 14px; background: var(--terra); color: #fff; font: 700 20px/1.2 var(--titulo); text-align: center;
  text-decoration: none; cursor: pointer; box-shadow: 0 6px 0 var(--terra-escuro); transition: transform .08s, box-shadow .08s; }
.botao:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--terra-escuro); }
.botao.secundario { background: var(--teal); box-shadow: 0 6px 0 var(--teal-escuro); }
.botao[disabled] { opacity: .45; cursor: default; }

/* ============ QUIZ ============ */
.quiz { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 18px 28px; }
.quiz-topo { display: flex; align-items: center; gap: 12px; padding: 16px 0 10px; }
.quiz-voltar { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linha); background: #fff; font-size: 22px; cursor: pointer; flex: none; color: var(--tinta); }
.quiz-voltar[hidden] { display: block; visibility: hidden; }
.quiz-marca { flex: 1; text-align: center; font-family: var(--titulo); font-weight: 700; font-size: 19px; color: var(--teal); }
.quiz-marca img { height: 44px; width: auto; margin: 0 auto; }
.quiz-barra { height: 8px; background: var(--creme); border-radius: 8px; overflow: hidden; margin-bottom: 22px; }
.quiz-barra div { height: 100%; width: 0; background: var(--teal); border-radius: 8px; transition: width .35s ease; }
.etapa { flex: 1; display: flex; flex-direction: column; animation: entrar .35s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.etapa h1 { font-size: 30px; margin-bottom: 10px; }
.etapa h2 { font-size: 27px; margin-bottom: 8px; }
.etapa .apoio { color: var(--suave); margin-bottom: 20px; }
.opcoes { display: grid; gap: 12px; margin-bottom: 18px; }
.opcoes.grade { grid-template-columns: 1fr 1fr; }
.opcao { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 14px 18px; background: #fff; border: 2px solid var(--linha);
  border-radius: var(--raio); font: 600 18px/1.3 var(--texto); color: var(--tinta); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.opcao .ico { font-size: 26px; flex: none; }
.opcao.marcada { border-color: var(--teal); background: var(--teal-claro); }
.opcao .caixa { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 2px solid #B9C2C8; flex: none; display: grid; place-items: center; color: #fff; font-size: 16px; }
.opcao.marcada .caixa { background: var(--teal); border-color: var(--teal); }
.opcao.idade { flex-direction: column; justify-content: center; text-align: center; min-height: 128px; gap: 6px; font-size: 21px; }
.opcao.idade small { font-weight: 600; color: var(--suave); font-size: 15px; }
.info { background: #fff; border-radius: 20px; padding: 26px 22px; box-shadow: var(--sombra); text-align: center; margin-bottom: 22px; }
.info img { width: 100%; max-width: 250px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 16px; margin: 0 auto 16px; }
.info h2 { margin-bottom: 10px; }
.campo { width: 100%; min-height: 64px; padding: 14px 18px; border: 2px solid var(--linha); border-radius: var(--raio); font: 600 20px var(--texto); margin-bottom: 18px; background: #fff; color: var(--tinta); }
.campo:focus { outline: none; border-color: var(--teal); }
.carregando { text-align: center; padding-top: 10px; }
.anel { width: 170px; height: 170px; margin: 10px auto 22px; position: relative; }
.anel svg { transform: rotate(-90deg); }
.anel b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 40px var(--titulo); color: var(--teal); }
.passos-carga { list-style: none; padding: 0; margin: 18px 0 0; text-align: left; display: grid; gap: 12px; }
.passos-carga li { display: flex; gap: 12px; align-items: center; color: #9AA4AA; font-weight: 700; transition: color .3s; }
.passos-carga li i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #CFD6DA; flex: none; display: grid; place-items: center; font-style: normal; color: #fff; font-size: 15px; transition: all .3s; }
.passos-carga li.ok { color: var(--tinta); }
.passos-carga li.ok i { background: var(--teal); border-color: var(--teal); }
.rodape-quiz { margin-top: auto; padding-top: 18px; text-align: center; font-size: 13px; color: var(--suave); }

/* ============ OFERTA ============ */
.faixa-topo { background: var(--teal); color: #fff; text-align: center; font-weight: 800; font-size: 15px; padding: 10px 14px; }
.secao { padding: 54px 20px; }
.secao.branca { background: #fff; }
.secao.creme { background: var(--creme); }
.miolo { max-width: 760px; margin: 0 auto; }
.secao h2 { font-size: 32px; text-align: center; margin-bottom: 14px; }
.secao .intro { text-align: center; color: var(--suave); max-width: 600px; margin: 0 auto 30px; }
.hero { padding: 34px 20px 46px; text-align: center; }
.hero .marca-topo { height: 46px; width: auto; margin: 0 auto 18px; }
.hero .selo-plano { display: inline-block; background: var(--terra-claro); color: var(--terra-escuro); font-weight: 800; font-size: 15px; padding: 8px 16px; border-radius: 30px; margin-bottom: 16px; }
.hero h1 { font-size: 36px; margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero .sub { font-size: 20px; color: var(--suave); max-width: 620px; margin: 0 auto 18px; }
.hero .mockup { width: 100%; max-width: 560px; margin: 0 auto 18px; }
.hero .botao { max-width: 520px; margin: 0 auto; }
.confianca { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--suave); }
.perfil { background: #fff; border: 2px solid var(--teal); border-radius: 20px; padding: 24px 20px; box-shadow: var(--sombra); }
.perfil h2 { text-align: left; font-size: 26px; margin-bottom: 14px; }
.perfil-itens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.perfil-itens div { background: var(--fundo); border-radius: 12px; padding: 10px 12px; font-size: 15px; line-height: 1.35; }
.perfil-itens b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--suave); }
.cards-ex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.card-ex { background: var(--fundo); border-radius: 14px; padding: 6px 6px 12px; text-align: center; font-size: 14px; line-height: 1.3; font-weight: 700; }
.card-ex img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin: 0 auto 8px; }
.card-ex small { display: block; font-weight: 600; color: var(--suave); margin-top: 4px; }
.dicas-perfil { margin: 16px 0 0; padding-left: 20px; font-size: 16px; }
.dores { list-style: none; padding: 0; margin: 0 auto; max-width: 600px; display: grid; gap: 12px; }
.dores li { background: #fff; border-radius: 14px; padding: 14px 16px 14px 54px; position: relative; font-weight: 600; }
.dores li::before { content: '✕'; position: absolute; left: 16px; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: #F3D9D4; color: #B03A2E; display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.lista-ok { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-ok li { padding-left: 36px; position: relative; }
.lista-ok li::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 25px; height: 25px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 900; }
.dois-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.dois-col img { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; border-radius: 20px; box-shadow: var(--sombra); margin: 0 auto; }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: p; }
.passo { background: #fff; border-radius: var(--raio); padding: 22px 16px; text-align: center; box-shadow: var(--sombra); }
.passo::before { counter-increment: p; content: counter(p); display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; background: var(--terra); color: #fff; font: 800 22px var(--titulo); }
.passo b { display: block; font-size: 18px; margin-bottom: 4px; }
.passo span { font-size: 16px; color: var(--suave); }
.guia { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; background: #fff; border-radius: 20px; padding: 20px; box-shadow: var(--sombra); margin-bottom: 18px; }
.guia img { width: 100%; max-width: 190px; margin: 0 auto; }
.guia .tag { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #fff; padding: 4px 12px; border-radius: 20px; margin-bottom: 8px; }
.guia h3 { font-size: 24px; margin-bottom: 10px; }
.guia .lista-ok { font-size: 16px; gap: 7px; }
.bonus { background: var(--terra-claro); border-radius: 20px; padding: 22px; }
.bonus h3 { font-size: 22px; margin-bottom: 10px; }
.publico { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.publico > div { background: #fff; border-radius: 20px; padding: 22px; }
.publico h3 { font-size: 22px; margin-bottom: 12px; }
.lista-nao { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-nao li { padding-left: 34px; position: relative; }
.lista-nao li::before { content: '✕'; position: absolute; left: 0; top: 2px; width: 25px; height: 25px; border-radius: 50%; background: #F3D9D4; color: #B03A2E; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.aviso-previa { background: #FFF4D6; border: 1.5px dashed #E0B44A; color: #7A5A00; font-size: 14px; font-weight: 600; text-align: center; border-radius: 12px; padding: 10px 14px; margin: 0 auto 20px; max-width: 600px; }
.depoimentos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.depoimento { margin: 0; background: #fff; border-radius: 20px; padding: 26px 22px 20px; box-shadow: var(--sombra); display: flex; flex-direction: column; position: relative; }
.depoimento::before { content: '“'; position: absolute; top: 4px; right: 18px; font: 800 72px/1 var(--titulo); color: var(--teal-claro); }
.depoimento blockquote { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--tinta); position: relative; }
.depoimento figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linha); }
.depoimento .avatar { width: 48px; height: 48px; border-radius: 50%; color: #fff; display: grid; place-items: center; font: 800 17px var(--titulo); flex: none; }
.depoimento figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.depoimento figcaption b { display: block; font: 700 17px/1.25 var(--titulo); }
.depoimento figcaption small { color: var(--suave); font-size: 14px; }
.oferta { background: #fff; border: 3px solid var(--terra); border-radius: 24px; padding: 28px 22px; box-shadow: 0 20px 50px rgba(224,122,63,.18); text-align: center; max-width: 560px; margin: 0 auto; }
.oferta .selo { display: inline-block; background: var(--terra); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .6px; padding: 6px 16px; border-radius: 20px; margin-bottom: 14px; text-transform: uppercase; }
.oferta h2 { font-size: 28px; margin-bottom: 14px; }
.oferta .lista-ok { text-align: left; font-size: 17px; margin: 16px 0 20px; }
.oferta .de { color: var(--suave); text-decoration: line-through; font-size: 18px; }
.oferta .preco { font: 800 56px/1 var(--titulo); color: var(--teal); margin: 6px 0; }
.oferta .preco small { font-size: 26px; vertical-align: 18px; margin-right: 4px; }
.oferta .nota-preco { color: var(--suave); font-size: 15px; margin-bottom: 18px; }
.pagamento { margin-top: 14px; font-size: 14px; color: var(--suave); }
.garantia { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; background: #fff; border-radius: 20px; padding: 24px; }
.selo-garantia { width: 120px; height: 120px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 14px; line-height: 1.15; border: 5px double #fff; outline: 3px solid var(--teal); }
.selo-garantia b { display: block; font: 800 42px/1 var(--titulo); }
.garantia h3 { font-size: 24px; margin-bottom: 8px; }
.faq details { background: #fff; border-radius: 14px; margin-bottom: 10px; padding: 0 18px; }
.faq summary { cursor: pointer; font-weight: 800; padding: 18px 26px 18px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 14px; font-size: 26px; color: var(--teal); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding-bottom: 16px; margin: 0; color: var(--suave); }
.aviso { font-size: 14px; color: var(--suave); text-align: center; max-width: 640px; margin: 24px auto 0; }
.rodape { background: var(--fundo); border-top: 1px solid var(--linha); color: var(--suave); text-align: center; font-size: 13px; padding: 22px 20px 100px; }
.rodape p { margin: 0 0 6px; }
.rodape a { color: var(--suave); }
.rodape .meta { font-size: 12px; opacity: .8; }
.barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.97); border-top: 1px solid var(--linha); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; transform: translateY(110%); transition: transform .3s; z-index: 10; box-shadow: 0 -6px 20px rgba(38,50,56,.08); }
.barra-fixa.visivel { transform: none; }
.barra-fixa .valor { font-weight: 800; line-height: 1.15; font-size: 15px; white-space: nowrap; }
.barra-fixa .valor b { display: block; font: 800 24px var(--titulo); color: var(--teal); }
.barra-fixa .botao { min-height: 54px; font-size: 18px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero h1 { font-size: 29px; }
  .hero .sub { font-size: 18px; }
  .secao { padding: 44px 18px; }
  .secao h2 { font-size: 27px; }
  .dois-col, .publico, .passos, .depoimentos { grid-template-columns: 1fr; }
  .guia { grid-template-columns: 1fr; text-align: left; }
  .guia img { max-width: 200px; margin: 0 auto; }
  .garantia { grid-template-columns: 1fr; text-align: center; }
  .selo-garantia { margin: 0 auto; }
  .cards-ex { grid-template-columns: 1fr; }
  .card-ex { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; text-align: left; font-size: 17px; padding: 8px; }
  .card-ex img { margin: 0; }
  .card-ex small { font-size: 15px; }
}