/* Squishlândia — estilos da loja. Mobile first; sem framework.
   Os nomes das variáveis (--verde, --ambar…) vêm do kit da casa e ficaram: aqui --verde é o LILÁS da marca
   e --ambar é o ROSA do botão. Troque a paleta SÓ neste :root. */
@font-face { font-family: Nunito; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(/assets/fonts/nunito-latin.woff2) format("woff2"); }

:root {
  --verde: #7140E0; --verde-2: #8B5CF6; --verde-claro: #EFE7FF; --verde-escuro: #4B2BA6;   /* lilás (texto/links no creme: 6:1) */
  --creme: #FFF8EC; --creme-2: #FFEFD8;
  --ambar: #FF5FA2; --ambar-esc: #F0478F;                                                    /* rosa do botão */
  --ambar-texto: #FFC2DD; /* rosa claro como TEXTO sobre o lilás escuro */
  --amarelo: #FFD23F; --azul: #38BDF8;
  --texto: #2B2340; --texto-2: #5A5173; --linha: #EBDDC8; --branco: #fff;
  --erro: #C0264A; --ok: #1F7A58;
  --raio: 16px; --raio-g: 24px;
  --sombra: 0 1px 3px rgba(43,35,64,.06), 0 6px 24px rgba(43,35,64,.08);
  --sombra-2: 0 1px 2px rgba(43,35,64,.04), 0 3px 12px rgba(43,35,64,.06);
  --sombra-hover: 0 2px 4px rgba(43,35,64,.08), 0 12px 32px rgba(43,35,64,.12);
  --transicao: .2s ease;
  --fonte: Nunito, ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fonte); font-size: 16px; line-height: 1.55; color: var(--texto); background: var(--creme); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--verde); }
h1, h2, h3 { line-height: 1.18; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 6.4vw, 3rem); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: clamp(1.45rem, 5vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 0; background: var(--verde); color: #fff; padding: 8px 14px; z-index: 100; }
.pular:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.estreito { max-width: 820px; }
.centro { text-align: center; }
.verde { color: var(--verde-2); font-weight: 600; }
.only-m { display: block; }
.ic { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.ic-g { width: 30px; height: 30px; color: var(--verde); }
.ic-x { color: #A3483A; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: 999px; border: 2px solid transparent; font: 700 1rem/1.2 var(--fonte); letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-cta { background: var(--ambar); color: var(--texto); box-shadow: 0 4px 14px rgba(255,95,162,.30), 0 1px 3px rgba(255,95,162,.15); }
.btn-cta:hover { background: var(--ambar-esc); box-shadow: 0 6px 22px rgba(255,95,162,.40), 0 2px 6px rgba(255,95,162,.20); }
.btn-sec { background: transparent; color: var(--verde); border-color: var(--verde); }
.btn-sec:hover { background: var(--verde-claro); }
.btn-g { min-height: 58px; font-size: 1.05rem; padding: 16px 28px; }
.btn-p { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.btn-bloco { width: 100%; }
.btn .ic { width: 20px; height: 20px; }
.btn-voltar { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--texto-2); font: 600 .95rem var(--fonte); padding: 10px 0; cursor: pointer; }

/* ---------- faixa de oferta + topo ---------- */
.faixa-oferta { background: var(--verde); color: #fff; text-align: center; font-size: .85rem; padding: 8px 12px; letter-spacing: .01em; }
.faixa-oferta b { color: var(--ambar-texto); }
@media (max-width: 639px) { .faixa-oferta .faixa-longa { display: none; } }
.selo-pixparc { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 12px 0 0; background: #EAF6F0; border: 1.5px solid #2E9C72; color: var(--verde-escuro); border-radius: 999px; padding: 5px 14px 5px 8px; font-size: .9rem; }
.selo-pixparc img { border-radius: 3px; }
.selo-pixparc b { color: var(--verde); }
.relogio { font-variant-numeric: tabular-nums; }
.topo { background: var(--creme); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); background: rgba(255,248,236,.92); }
.topo-in { display: flex; align-items: center; justify-content: space-between; min-height: 62px; }
.logo { color: var(--verde); display: inline-flex; text-decoration: none; }
.logo-svg { width: 150px; height: auto; }
.logo-claro { color: #fff; }
.topo-seguro { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--texto-2); }
.menu-btn { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.menu-barras, .menu-barras::before, .menu-barras::after { display: block; width: 22px; height: 2px; background: var(--verde); border-radius: 2px; position: relative; transition: transform .25s ease; }
.menu-barras::before, .menu-barras::after { content: ""; position: absolute; left: 0; }
.menu-barras::before { top: -7px; } .menu-barras::after { top: 7px; }
.menu-aberto .menu-barras { background: transparent; }
.menu-aberto .menu-barras::before { transform: translateY(7px) rotate(45deg); }
.menu-aberto .menu-barras::after { transform: translateY(-7px) rotate(-45deg); }
.menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--creme); border-bottom: 1px solid var(--linha); display: none; flex-direction: column; padding: 8px 16px 16px; }
.menu-aberto .menu { display: flex; }
.menu a { padding: 14px 4px; text-decoration: none; color: var(--texto); font-weight: 600; border-bottom: 1px solid var(--linha); transition: color var(--transicao); }
.menu a:hover { color: var(--verde); }
.menu a:last-child { border-bottom: 0; }
.menu-entrar { display: inline-flex; align-items: center; gap: 8px; color: var(--verde) !important; }

/* ---------- hero: foto de fundo, texto por cima ---------- */
.hero { position: relative; background: var(--verde); color: #fff; overflow: hidden; }
.hero-midia { position: absolute; top: 0; left: 0; right: 0; }
.hero-midia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,35,64,0) 28%, rgba(43,35,64,.45) 42%, rgba(43,35,64,.85) 54%, var(--verde) 68%); }
.hero-img { width: 100%; height: auto; aspect-ratio: 1024 / 1365; object-fit: cover; background: var(--verde); }
.hero-in { position: relative; z-index: 1; padding: 64vw 16px 36px; }
.hero-txt { max-width: 560px; }
.sobretitulo { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-2); margin-bottom: .6em; }
.hero .sobretitulo { color: var(--ambar-texto); }
.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.30); }
.hero-sub { font-size: 1.06rem; color: rgba(255,255,255,.88); }
.checks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.checks .ic { color: var(--verde-2); background: var(--verde-claro); border-radius: 50%; padding: 3px; width: 24px; height: 24px; }
.hero .checks .ic { color: var(--texto); background: var(--ambar); }
.hero .btn { width: 100%; }
.hero-nota { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .85rem; color: rgba(255,255,255,.85); margin: 12px 0 0; background: rgba(255,255,255,.1); padding: 6px 16px; border-radius: 999px; backdrop-filter: blur(4px); }
.duas-col { display: grid; gap: 22px; align-items: center; }
.duas-col h2 { color: var(--verde); }
.img-arred { width: 100%; border-radius: var(--raio-g); }
.img-faixa { aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 18px; }

/* ---------- seções ---------- */
.secao { padding: 56px 0; }
.secao-creme2 { background: var(--creme-2); }
.secao-verde { background: var(--verde); color: #fff; }
.secao-verde .titulo-c { color: #fff; }
.titulo-c { text-align: center; color: var(--verde); }
.sub-c { text-align: center; color: var(--texto-2); max-width: 640px; margin: 0 auto 32px; }
.aviso-legal { font-size: .82rem; color: var(--texto-2); text-align: center; margin-top: 20px; }

.estagios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.estagio { background: #fff; border: 2px solid var(--linha); border-radius: var(--raio); padding: 10px; text-decoration: none; color: var(--texto); text-align: center; font-weight: 600; transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao); }
.estagio:hover { border-color: var(--verde); transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.estagio img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; margin-bottom: 8px; background: var(--creme-2); }

.selos { background: #fff; border-block: 1px solid var(--linha); }
.selos-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-block: 24px; text-align: center; font-size: .82rem; line-height: 1.3; }
.selo { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.selo:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 15%; height: 70%; width: 1px; background: var(--linha); }
.selo b { font-size: .82rem; color: var(--texto); background: var(--ambar-esc); padding: 5px 12px; border-radius: 999px; font-weight: 700; letter-spacing: .02em; }
.selo .ic { width: 32px; height: 32px; color: var(--verde); background: var(--verde-claro); border-radius: 50%; padding: 6px; }

.tabela-custo { background: #fff; border-radius: var(--raio-g); box-shadow: var(--sombra); overflow: hidden; }
.tc-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--linha); }
.tc-linha:nth-child(even) > span:not([role=rowheader]):not(.tc-fv) { background: rgba(255,248,236,.5); }
.tc-linha > span { padding: 14px; font-size: .9rem; display: flex; gap: 10px; align-items: flex-start; }
.tc-linha > span[role=rowheader] { grid-column: 1 / -1; background: var(--creme); font-weight: 700; color: var(--verde); padding-block: 10px; font-size: .85rem; letter-spacing: .02em; text-transform: uppercase; }
.tc-cab { border-top: 0; }
.tc-cab > span:first-child { display: none; }
.tc-cab > span { font-weight: 700; justify-content: center; padding-block: 16px; }
.tc-fv { background: var(--verde-claro); }
.tc-fv .ic { color: var(--verde-2); }
.tc-linha .ic { width: 22px; height: 22px; }

.passos { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; counter-reset: p; }
.passos li { background: #fff; border-radius: var(--raio); padding: 20px; position: relative; box-shadow: var(--sombra); }
.passos h3 { margin-top: 10px; }
.passos p { margin: 0; color: var(--texto-2); font-size: .95rem; }
.passo-n { position: absolute; right: 18px; top: 14px; font-size: 2rem; font-weight: 700; color: var(--creme-2); }

.linha-tempo { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 16px; margin: 0 -16px; scrollbar-width: none; cursor: grab; }
.linha-tempo::-webkit-scrollbar { display: none; }
.linha-tempo.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.lt-cartao { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; background: #fff; border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra); border-left: 4px solid var(--ambar); transition: transform var(--transicao), box-shadow var(--transicao); }
.lt-cartao:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.lt-mes { display: inline-block; background: var(--verde); color: #fff; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 4px 14px; margin-bottom: 10px; box-shadow: 0 2px 6px rgba(43,35,64,.15); }
.lt-cartao h3 { margin-bottom: .4em; }
.lt-cartao p { margin: 0; color: var(--texto-2); font-size: .95rem; }
.arraste-dica { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .85rem; color: var(--texto-2); }

.comparativo { display: grid; gap: 14px; }
.comp-col { border-radius: var(--raio); padding: 24px; }
.comp-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.comp-col li { display: flex; gap: 10px; align-items: flex-start; }
.comp-outro { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
.comp-outro .ic-x { color: #F2A99B; }
.comp-fv { background: linear-gradient(135deg, var(--creme) 0%, var(--verde-claro) 100%); color: var(--texto); border: 1px solid rgba(43,35,64,.12); }
.comp-fv h3 { color: var(--verde); }
.comp-fv .ic { color: var(--verde-2); }

.depoimentos { display: grid; gap: 16px; }
.depoimento { margin: 0; background: #fff; border-radius: var(--raio-g); padding: 24px; box-shadow: var(--sombra); transition: transform var(--transicao), box-shadow var(--transicao); }
.depoimento:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.depo-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.depo-meses { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--verde); font-weight: 700; }
.depo-meses .ic { width: 15px; height: 15px; }
.depo-plano { font-size: .82rem; color: var(--texto-2); font-weight: 600; }
.depoimento blockquote { margin: 0 0 16px; font-size: 1rem; line-height: 1.6; color: var(--texto-2); }
.depoimento figcaption { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--linha); padding-top: 14px; }
.depo-autor { display: flex; align-items: center; gap: 10px; }
.depo-ini { width: 40px; height: 40px; border-radius: 50%; background: var(--verde); color: #fff; font-weight: 700; font-size: 1rem; display: grid; place-items: center; flex: none; }
.depo-autor div { display: flex; flex-direction: column; }
.depo-autor b { font-size: .95rem; }
.depo-cidade { font-size: .82rem; color: var(--texto-2); }
.depo-check { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--verde); font-weight: 600; }
.depo-check .ic { width: 14px; height: 14px; }

.tras { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: tras; }
.tras li { background: #fff; border-radius: var(--raio); padding: 22px; position: relative; overflow: hidden; }
.tras li::before { counter-increment: tras; content: counter(tras); position: absolute; right: 16px; top: 8px; font-size: 3.5rem; font-weight: 700; color: var(--creme-2); line-height: 1; pointer-events: none; }
.tras-ilu { background: var(--creme); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.tras-ilu svg { width: 100%; height: 110px; }
.tras h3 { position: relative; }
.tras p { margin: 0; color: var(--texto-2); font-size: .95rem; position: relative; }
.tras-fecho { text-align: center; font-size: 1.15rem; margin-top: 26px; color: var(--verde); }

/* ---------- planos ---------- */
.planos { display: grid; gap: 16px; }
.plano { position: relative; display: block; background: #fff; border: 2px solid var(--linha); border-radius: var(--raio-g); padding: 24px 20px 20px; transition: border-color var(--transicao), box-shadow var(--transicao); }
.plano-destaque { border-color: var(--verde); box-shadow: var(--sombra); }
.plano-selo { position: absolute; top: -13px; left: 20px; background: var(--ambar); color: var(--texto); font-size: .75rem; font-weight: 700; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; }
.plano-nome { font-size: 1.25rem; color: var(--verde); margin-bottom: 4px; }
.plano-itens { font-size: .88rem; color: var(--texto-2); margin-bottom: 12px; }
.plano-de { margin: 0; font-size: .9rem; color: var(--texto-2); }
.plano-off { background: var(--verde-claro); color: var(--verde); font-weight: 700; font-size: .78rem; padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.plano-por { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.plano-por b { font-size: 2rem; color: var(--texto); letter-spacing: -.02em; }
.plano-mes { font-size: .9rem; color: var(--verde-2); margin-bottom: 12px; }
.plano-cond { list-style: none; padding: 12px 0 0; margin: 0 0 16px; border-top: 1px dashed var(--linha); display: grid; gap: 8px; font-size: .9rem; }
.plano-cond li { display: flex; gap: 8px; align-items: center; }
.plano-cond .ic { color: var(--verde-2); }
.planos-escolha .plano { cursor: pointer; padding-left: 56px; }
.planos-escolha .plano input { position: absolute; opacity: 0; pointer-events: none; }
.plano-marca { position: absolute; left: 18px; top: 26px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha); display: grid; place-items: center; color: transparent; background: #fff; transition: all var(--transicao); }
.plano-marca .ic { width: 16px; height: 16px; }
.planos-escolha .plano.escolhido, .planos-escolha .plano:has(input:checked) { border-color: var(--verde); background: #FBFDFB; box-shadow: 0 0 0 3px rgba(43,35,64,.15); }
.planos-escolha .plano.escolhido .plano-marca, .planos-escolha .plano:has(input:checked) .plano-marca { background: var(--verde); border-color: var(--verde); color: #fff; }
.planos-escolha .plano:has(input:focus-visible) { outline: 3px solid var(--ambar); outline-offset: 2px; }
.planos-escolha .plano-cond { margin-bottom: 0; }
.garantia-linha { display: flex; gap: 8px; align-items: flex-start; justify-content: center; font-size: .9rem; margin-top: 20px; text-align: left; }
.garantia-linha .ic { color: var(--verde); }

.faq { display: grid; gap: 8px; }
.faq-item { background: #fff; border-radius: var(--raio); padding: 0 20px; border-left: 3px solid transparent; transition: border-color var(--transicao), box-shadow var(--transicao); }
.faq-item[open] { border-left-color: var(--verde); box-shadow: var(--sombra-2); }
.faq-item summary { cursor: pointer; padding: 18px 32px 18px 0; font-weight: 700; list-style: none; position: relative; transition: color var(--transicao); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: translateY(-60%) rotate(45deg); transition: transform .25s ease; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item[open] summary { color: var(--verde); }
.faq-item p { color: var(--texto-2); padding-bottom: 18px; margin: 0; }

.faixa-final { background: linear-gradient(160deg, var(--verde) 0%, var(--verde-escuro) 100%); color: #fff; padding: 56px 0; position: relative; overflow: hidden; }
.faixa-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.04) 0%, transparent 70%); pointer-events: none; }
.faixa-final h2 { color: #fff; position: relative; }
.faixa-final p { opacity: .85; position: relative; }
.faixa-final .btn { width: 100%; max-width: 420px; position: relative; }

/* ---------- rodapé ---------- */
.rodape { background: var(--verde-escuro); color: rgba(255,255,255,.85); padding: 48px 0 28px; font-size: .9rem; }
.rodape a { color: #fff; text-decoration: none; position: relative; }
.rodape-pag { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 0; }
.rodape-pag img { width: 38px; height: 24px; flex: none; opacity: .85; }

/* ---------- cookies ---------- */
.cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; background: #fff; border-radius: var(--raio); box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 1px 4px rgba(0,0,0,.08); padding: 16px; font-size: .88rem; max-width: 560px; margin: 0 auto; }
.cookies p { margin: 0 0 12px; }
.cookies-acoes { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- etapas (quiz, plano, checkout) ---------- */
.etapas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: .75rem; font-weight: 600; color: var(--texto-2); }
.etapas li { display: flex; flex-direction: column; gap: 6px; }
.etapas li.on { color: var(--verde); }
.etapas li.feito { color: var(--verde-2); }
.etapa-barra { height: 6px; border-radius: 6px; background: var(--creme-2); overflow: hidden; }
.etapa-barra i { display: block; height: 100%; width: 0; background: var(--verde); border-radius: 6px; transition: width .35s; }
.etapas-largas { margin: 20px 0 24px; }

/* ---------- quiz ---------- */
.modo-funil main { min-height: 70vh; }

/* ---------- cabeçalho do funil (checkout e pagamento) ---------- */
.topo-funil { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--linha); box-shadow: 0 1px 0 rgba(43,35,64,.03), 0 4px 18px rgba(43,35,64,.05); }
.topo-funil::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--verde) 0%, var(--verde-2) 60%, var(--ambar) 100%); }
.topo-funil .topo-in { min-height: 58px; }
.topo-funil .logo-svg { width: 112px; }
.topo-funil .topo-seguro { gap: 10px; color: var(--verde-escuro); line-height: 1.2; }
.topo-seguro-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); display: grid; place-items: center; flex: none; }
.topo-seguro-ic .ic { width: 17px; height: 17px; }
.topo-seguro b { display: block; font-size: .86rem; font-weight: 700; }
.topo-seguro small { display: none; font-size: .74rem; color: var(--texto-2); }
@media (min-width: 640px) { .topo-funil .topo-in { min-height: 68px; } .topo-funil .logo-svg { width: 124px; } .topo-seguro small { display: block; } }

/* ---------- etapas do funil: círculos ligados por linha ---------- */
.etapas-largas { counter-reset: etapa; gap: 0; font-size: .78rem; }
.etapas-largas li { position: relative; align-items: center; text-align: center; gap: 6px; color: var(--texto-2); counter-increment: etapa; }
.etapas-largas li::before { content: counter(etapa); position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--branco); color: var(--texto-2); border: 2px solid var(--linha); transition: background var(--transicao), border-color var(--transicao), color var(--transicao); }
.etapas-largas li.feito::before { content: "✓"; background: var(--verde-2); border-color: var(--verde-2); color: #fff; }
.etapas-largas li.on::before { background: var(--verde); border-color: var(--verde); color: #fff; box-shadow: 0 0 0 4px var(--verde-claro); }
.etapas-largas li.on { color: var(--verde); font-weight: 700; }
.etapas-largas li.feito { color: var(--verde-2); }
.etapas-largas .etapa-barra { position: absolute; top: 13px; right: calc(50% + 20px); width: calc(100% - 40px); height: 2px; border-radius: 2px; background: var(--linha); }
.etapas-largas li:first-child .etapa-barra { display: none; }
.etapas-largas .etapa-barra i { width: 0 !important; }
.etapas-largas li.on .etapa-barra i, .etapas-largas li.feito .etapa-barra i { width: 100% !important; }
@media (min-width: 640px) { .etapas-largas { font-size: .85rem; max-width: 560px; margin-left: auto; margin-right: auto; } }

/* ---------- rodapé enxuto das telas de pagamento ---------- */
.rodape-funil { background: var(--verde-escuro); color: rgba(255,255,255,.78); padding: 28px 0 24px; margin-top: 40px; font-size: .8rem; }
.rodape-funil a { color: #fff; }
.rodape-funil-topo { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.rodape-funil-seguro { display: flex; align-items: center; gap: 12px; text-align: left; }
.rodape-funil-ic { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--ambar-texto); display: grid; place-items: center; flex: none; }
.rodape-funil-ic .ic { width: 19px; height: 19px; }
.rodape-funil-seguro b { display: block; color: #fff; font-size: .95rem; }
.rodape-funil-seguro small { display: block; font-size: .78rem; color: rgba(255,255,255,.7); }
.rodape-funil-pag > span { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.rodape-funil .rodape-pag { justify-content: center; margin: 0; gap: 8px; }
.rodape-funil .rodape-pag img { width: 44px; height: 28px; opacity: 1; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.rodape-funil-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 20px; padding: 14px 0; }
.rodape-funil-links a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: rgba(255,255,255,.9); font-weight: 600; }
.rodape-funil-links a:hover { color: #fff; text-decoration: underline; }
.rodape-funil-legal { text-align: center; font-size: .74rem; line-height: 1.6; color: rgba(255,255,255,.6); }
.rodape-funil-legal p { margin: 0 0 6px; max-width: 760px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .rodape-funil-topo { flex-direction: row; justify-content: space-between; text-align: left; }
  .rodape-funil-pag { display: flex; align-items: center; gap: 14px; }
  .rodape-funil-pag > span { margin: 0; }
}
.quiz { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; }
.quiz-topo { position: sticky; top: 62px; background: var(--creme); padding: 8px 0 10px; z-index: 5; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.quiz-contador { font-size: .82rem; color: var(--texto-2); margin-left: auto; }
.q { padding-top: 12px; animation: entra .28s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.q-titulo { font-size: clamp(1.4rem, 5.6vw, 1.9rem); color: var(--verde); outline: none; }
.q-sub { color: var(--texto-2); }
.q-opcoes { display: grid; gap: 10px; margin: 16px 0 20px; }
.q-grade { grid-template-columns: repeat(2, 1fr); }
.q-op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 14px 18px; background: #fff; border: 2px solid var(--linha); border-radius: var(--raio); font: 600 1rem/1.3 var(--fonte); color: var(--texto); text-align: left; cursor: pointer; transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao); }
.q-op:hover { border-color: var(--verde-2); box-shadow: var(--sombra-2); }
.q-op.sel, .q-op-multi:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); }
.q-op-img { flex-direction: column; padding: 10px; text-align: center; gap: 8px; }
.q-op-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--creme-2); }
.q-op-multi input { position: absolute; opacity: 0; }
.q-op-multi span { flex: 1; }
.q-op-multi { position: relative; }
.q-marca { width: 24px; height: 24px; border: 2px solid var(--linha); border-radius: 6px; color: transparent; padding: 2px; transition: all var(--transicao); }
.q-op-multi:has(input:checked) .q-marca { background: var(--verde); border-color: var(--verde); color: #fff; }
.q-op-multi:has(input:focus-visible) { outline: 3px solid var(--ambar); outline-offset: 2px; }
.quiz-aviso { margin-top: 28px; }

.form .campo { margin-bottom: 14px; }
.campo label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.campo small { font-weight: 400; color: var(--texto-2); }
.campo input, .campo select { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: var(--raio); background: #fff; font: 400 1rem var(--fonte); color: var(--texto); transition: border-color var(--transicao), box-shadow var(--transicao); }
.campo input:focus, .campo select:focus { border-color: var(--verde); outline: none; box-shadow: 0 0 0 3px rgba(43,35,64,.12); }
.campo input[aria-invalid=true] { border-color: var(--erro); }
.campo-erro { color: var(--erro); font-size: .85rem; margin: 4px 0 0; min-height: 0; }
.campo-erro:empty { display: none; }
.campo-nota { display: flex; gap: 6px; align-items: flex-start; font-size: .82rem; color: var(--texto-2); }
.check-linha { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin: 6px 0 14px; cursor: pointer; }
.check-linha input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--verde); flex: none; }
.form-legal { font-size: .8rem; color: var(--texto-2); }
.form-erro { color: var(--erro); font-weight: 600; font-size: .92rem; }
.form-erro:empty { display: none; }
.campos-2 { display: grid; gap: 0 12px; }

.q-montando { text-align: center; padding-top: 40px; }
.montando-anel { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; border: 5px solid var(--creme-2); border-top-color: var(--verde); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.montando-lista { list-style: none; padding: 0; margin: 20px auto 0; display: grid; gap: 12px; max-width: 360px; text-align: left; }
.montando-lista li { display: flex; gap: 10px; align-items: center; opacity: .35; transition: opacity .3s; font-weight: 600; }
.montando-lista li .ic { color: transparent; border: 2px solid var(--linha); border-radius: 50%; padding: 2px; width: 26px; height: 26px; transition: all .3s; }
.montando-lista li.ok { opacity: 1; }
.montando-lista li.ok .ic { color: #fff; background: var(--verde); border-color: var(--verde); }

/* ---------- plano ---------- */
.plano-pg { padding-bottom: 40px; }
.resumo-tipo { background: var(--verde); color: #fff; border-radius: var(--raio-g); padding: 24px 20px; margin-bottom: 18px; }
.resumo-tipo .sobretitulo { color: var(--ambar-texto); }
.resumo-tipo h1 { font-size: clamp(1.5rem, 5.6vw, 2.2rem); }
.resumo-tipo a:not(.btn) { color: var(--ambar-texto); }
.tipo-linha { font-size: 1.05rem; margin: 0; }
.tipo-tags { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tipo-tags:empty { display: none; }
.btn-ver-planos { margin-top: 18px; width: 100%; }
.tipo-tags li { background: rgba(255,255,255,.14); border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; }
.rotina { display: grid; gap: 14px; margin-bottom: 36px; }
.rotina-bloco, .rotina-dicas { background: #fff; border-radius: var(--raio-g); padding: 20px; }
.rotina h2 { font-size: 1.15rem; display: flex; gap: 8px; align-items: center; color: var(--verde); }
.rotina ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.rotina li { display: flex; gap: 12px; align-items: flex-start; }
.rotina li > .ic { color: var(--verde-2); background: var(--verde-claro); border-radius: 10px; padding: 7px; width: 36px; height: 36px; }
.rotina li div { display: flex; flex-direction: column; }
.rotina li span { color: var(--texto-2); font-size: .93rem; }
.rotina-dicas { background: var(--creme-2); }
.rotina-dicas li { flex-direction: column; gap: 2px; }
.kit-vitrine { margin-bottom: 36px; }
.kit-itens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kit-itens figure { margin: 0; background: #fff; border-radius: var(--raio); padding: 10px; text-align: center; }
.kit-itens img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 8px; }
.kit-itens figcaption { display: flex; flex-direction: column; font-size: .8rem; line-height: 1.35; }
.kit-itens figcaption span { color: var(--texto-2); }
.plano-acao { margin-top: 22px; }
.selos-mini { list-style: none; padding: 0; margin: 14px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; color: var(--texto-2); }
.selos-mini li { display: flex; gap: 6px; align-items: center; }

/* ---------- checkout ---------- */
.ck { padding-bottom: 40px; }
.ck-mini { background: #fff; border-radius: var(--raio); padding: 0 16px; margin-bottom: 14px; }
.ck-mini summary { display: flex; justify-content: space-between; padding: 14px 0; cursor: pointer; font-weight: 600; }
.ck-mini p { font-size: .85rem; color: var(--texto-2); }
.ck-grid { display: grid; gap: 18px; }
.ck-form { background: #fff; border-radius: var(--raio-g); padding: 20px 16px; }
.ck-passos { list-style: none; padding: 0; margin: 0 0 18px; display: flex; gap: 6px; font-size: .82rem; color: var(--texto-2); font-weight: 600; }
.ck-passos li { flex: 1; display: flex; align-items: center; gap: 6px; }
.ck-passos b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--creme-2); font-size: .78rem; }
.ck-passos li.on { color: var(--verde); }
.ck-passos li.on b, .ck-passos li.feito b { background: var(--verde); color: #fff; }
.ck-titulo { font-size: 1.4rem; color: var(--verde); outline: none; }
.cep-status { font-size: .85rem; color: var(--texto-2); margin: 0 0 14px; align-self: center; }
.frete-linha { display: flex; gap: 12px; align-items: center; background: var(--verde-claro); border-radius: var(--raio); padding: 12px 14px; margin: 6px 0 18px; }
.frete-linha div { display: flex; flex-direction: column; font-size: .88rem; }
.frete-linha .ic { color: var(--verde); width: 26px; height: 26px; }
.aviso-reserva { display: flex; gap: 12px; background: #FFF6E6; border: 1px solid #F1D29F; border-radius: var(--raio); padding: 16px; margin-bottom: 18px; }
.aviso-reserva p { margin: 4px 0 0; font-size: .92rem; color: var(--texto-2); }
.metodos { display: grid; gap: 10px; margin-bottom: 16px; }
.metodo input { position: absolute; opacity: 0; }
.metodo-in { display: flex; align-items: center; gap: 12px; border: 2px solid var(--linha); border-radius: var(--raio); padding: 14px; cursor: pointer; transition: border-color var(--transicao), background var(--transicao); }
.metodo-in > span { display: flex; flex-direction: column; flex: 1; }
.metodo-in small { color: var(--texto-2); }
.metodo input:checked + .metodo-in { border-color: var(--verde); background: var(--verde-claro); }
.metodo input:focus-visible + .metodo-in { outline: 3px solid var(--ambar); }
.cartao-campos { margin-bottom: 10px; }
.ck-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--linha); padding-top: 14px; margin-top: 6px; font-weight: 600; }
.ck-total b { font-size: 1.5rem; }
.ck-total-nota { font-size: .85rem; color: var(--texto-2); }
.ck-resumo { background: #fff; border-radius: var(--raio-g); padding: 20px; align-self: start; }
.ck-resumo h2 { font-size: 1.1rem; }
.ck-plano { display: flex; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linha); }
.ck-plano img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; background: var(--creme-2); flex: none; }
.ck-plano div { display: flex; flex-direction: column; font-size: .85rem; }
.ck-plano b { font-size: 1rem; }
.ck-plano span { color: var(--texto-2); }
.ck-valores { margin: 14px 0; display: grid; gap: 8px; font-size: .92rem; }
.ck-valores div { display: flex; justify-content: space-between; }
.ck-valores dt { color: var(--texto-2); }
.ck-valores dd { margin: 0; }
.ck-valores-total { border-top: 1px solid var(--linha); padding-top: 10px; font-weight: 700; font-size: 1.1rem; }
.ck-valores-total dt { color: var(--texto); }
.ck-pix-nota { display: flex; gap: 6px; align-items: center; font-size: .88rem; color: var(--verde-2); font-weight: 600; }
.selos-ck { list-style: none; padding: 14px 0 0; margin: 0; border-top: 1px solid var(--linha); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: .8rem; color: var(--texto-2); }
.selos-ck li { display: flex; gap: 6px; align-items: center; }
.selos-ck .ic { color: var(--verde); }

/* ---------- resultado (pix, obrigado, …) ---------- */
.resultado { padding: 28px 16px 48px; }
.res-carregando { text-align: center; padding: 60px 0; color: var(--texto-2); }
.res-painel { background: #fff; border-radius: var(--raio-g); padding: 24px 20px; text-align: center; box-shadow: var(--sombra); }
.res-painel h1 { font-size: clamp(1.4rem, 5.4vw, 2rem); color: var(--verde); }
.res-icone { width: 64px; height: 64px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; margin: 0 auto 14px; }
.res-icone .ic { width: 34px; height: 34px; }
.res-icone-ambar { background: var(--ambar); color: var(--texto); }
.res-icone-erro { background: var(--erro); }
.res-ok .res-icone { animation: pulo .5s ease-out; }
@keyframes pulo { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.res-total { font-size: 1.05rem; }
.res-resumo { text-align: left; background: var(--creme); border-radius: var(--raio); padding: 14px 16px; margin: 18px 0; display: grid; gap: 8px; font-size: .92rem; }
.res-resumo div { display: flex; justify-content: space-between; gap: 12px; }
.res-resumo dt { color: var(--texto-2); }
.res-resumo dd { margin: 0; text-align: right; }
.res-resumo-total { font-weight: 700; border-top: 1px solid var(--linha); padding-top: 8px; }
.res-proximos { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; text-align: left; }
.res-proximos li { display: flex; gap: 12px; align-items: flex-start; }
.res-proximos li > .ic { color: var(--verde); width: 26px; height: 26px; }
.res-proximos div { display: flex; flex-direction: column; font-size: .9rem; }
.res-proximos span { color: var(--texto-2); }
.res-nota { font-size: .88rem; color: var(--texto-2); margin-top: 14px; }
.res-erro { text-align: center; color: var(--erro); font-weight: 600; }
.pix-relogio { background: var(--creme); border-radius: var(--raio); padding: 12px; margin: 14px 0; font-size: .92rem; }
.pix-relogio b { font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--verde); }
.pix-relogio.urgente b { color: var(--erro); }
.pix-barra { display: block; height: 6px; background: var(--creme-2); border-radius: 6px; margin-top: 8px; overflow: hidden; }
.pix-barra i { display: block; height: 100%; background: var(--verde); width: 100%; transition: width 1s linear; }
.pix-box { display: grid; gap: 16px; justify-items: center; }
.pix-qr { width: 220px; height: 220px; border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px; background: #fff; }
.pix-codigo-wrap { width: 100%; text-align: left; }
.pix-codigo-wrap label { font-weight: 600; font-size: .9rem; }
.pix-codigo { width: 100%; resize: none; border: 1.5px dashed var(--verde-2); border-radius: var(--raio); padding: 10px; font: 400 .8rem/1.4 ui-monospace, Menlo, monospace; background: var(--creme); color: var(--texto); margin: 6px 0 12px; word-break: break-all; }
.btn-copiar { position: relative; overflow: hidden; }
.btn-copiar .copiado-in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--verde); color: #fff; transform: translateY(100%); transition: transform .25s; }
.btn-copiar .copiar-in { display: inline-flex; align-items: center; gap: 8px; }
.btn-copiar.copiado .copiado-in { transform: none; }
.pix-feedback { font-size: .88rem; color: var(--verde-2); min-height: 1.2em; }
.pix-como { text-align: left; font-size: .92rem; padding-left: 20px; color: var(--texto-2); }
.pix-como li { margin-bottom: 6px; }
.pix-recebedor { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: .85rem; color: var(--texto-2); background: var(--creme); border-radius: var(--raio); padding: 12px; }

/* ---------- consulta e páginas legais ---------- */
.consulta { padding: 32px 16px 48px; }
.consulta-form { background: #fff; border-radius: var(--raio-g); padding: 20px; max-width: 480px; margin: 0 auto; }
.consulta-res { background: #fff; border-radius: var(--raio-g); padding: 20px; max-width: 480px; margin: 18px auto 0; }
.consulta-res h2 { color: var(--verde); }
.legal { padding: 32px 16px 56px; }
.legal h1 { color: var(--verde); }
.legal h2 { font-size: 1.2rem; margin-top: 1.6em; color: var(--verde); }
.legal li { margin-bottom: 6px; }
.pg-erro { padding: 64px 16px; }
.pg-erro h1 { color: var(--verde); }

/* ---------- telas maiores ---------- */
@media (min-width: 640px) {
  .estagios { grid-template-columns: repeat(3, 1fr); }
  .q-grade { grid-template-columns: repeat(3, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .campos-2 { grid-template-columns: 1fr 1fr; }
  .campos-cidade { grid-template-columns: 1fr 110px; }
  .lt-cartao { flex-basis: 46%; }
  .hero .btn { width: auto; }
  .hero-nota { justify-content: flex-start; }
  .hero-in { padding-top: 56vw; }
  .btn-ver-planos { width: auto; }
  .comparativo { grid-template-columns: 1fr 1fr; }
  .tc-linha { grid-template-columns: 160px 1fr 1fr; }
  .tc-linha > span[role=rowheader] { grid-column: auto; background: none; padding-block: 14px; }
  .tc-cab > span:first-child { display: block; }
  .pix-box { grid-template-columns: 240px 1fr; align-items: start; justify-items: start; }
  .res-painel { padding: 32px; }
  .depoimentos { grid-template-columns: repeat(2, 1fr); }
  .depo-check { white-space: nowrap; }
}
@media (min-width: 900px) {
  .only-m { display: none; }
  .logo-svg { width: 140px; }
  .menu-btn { display: none; }
  .menu { display: flex; position: static; flex-direction: row; gap: 26px; padding: 0; border: 0; background: none; align-items: center; }
  .menu a { border: 0; padding: 6px 0; font-size: .95rem; }
  .menu-entrar { border: 1.5px solid var(--verde) !important; border-radius: 999px; padding: 8px 16px !important; transition: background var(--transicao); }
  .menu-entrar:hover { background: var(--verde-claro); }
  .hero-midia { inset: 0; }
  .hero-midia::after { background: linear-gradient(90deg, var(--verde) 0%, rgba(43,35,64,.92) 32%, rgba(43,35,64,.4) 55%, rgba(43,35,64,0) 70%); }
  .hero-img { height: 100%; aspect-ratio: auto; object-position: 75% 30%; }
  .hero-in { padding: 72px 16px; min-height: 620px; display: flex; align-items: center; }
  .duas-col { grid-template-columns: 1fr 1fr; gap: 48px; }
  .img-faixa { aspect-ratio: 21 / 8; object-position: center 35%; }
  .secao { padding: 88px 0; }
  .estagios { grid-template-columns: repeat(6, 1fr); }
  .selos-in { font-size: .95rem; }
  .selo .ic { width: 36px; height: 36px; padding: 7px; }
  .passos { grid-template-columns: repeat(4, 1fr); }
  .lt-cartao { flex-basis: 24%; max-width: none; }
  .linha-tempo { margin: 0; padding-inline: 0; }
  .tras { grid-template-columns: repeat(3, 1fr); }
  .planos { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .plano-destaque { transform: translateY(-8px); }
  .rotina { grid-template-columns: 1fr 1fr; }
  .rotina-dicas { grid-column: 1 / -1; }
  .ck-grid { grid-template-columns: 1fr 380px; align-items: start; }
  .ck-form { padding: 28px; }
  .ck-resumo { position: sticky; top: 84px; }
  .faixa-final { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- pop-up de saída (popup-saida.js) ---------- */
html.psaida-on { overflow: hidden; }
.psaida { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; overflow: auto; display: none; }
.psaida[open] { display: grid; place-items: center; padding: 12px; }
.psaida::backdrop { background: rgba(14,24,19,.62); }
.psaida-cartao { position: relative; outline: none; width: 100%; max-width: 560px; background: var(--creme); border-radius: var(--raio-g); box-shadow: 0 24px 64px rgba(0,0,0,.28); padding: 28px 16px 18px; text-align: center; animation: psaida-in .28s ease both; }
@keyframes psaida-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.psaida-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--texto); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sombra-2); transition: background var(--transicao); }
.psaida-x:hover { background: var(--creme-2); }
.psaida-titulo { font-size: clamp(1.35rem, 5.6vw, 2rem); letter-spacing: -.02em; margin: 6px 36px 8px; text-wrap: balance; color: var(--verde-escuro); }
.psaida-sub { color: var(--texto-2); font-size: .95rem; margin: 0 auto 16px; max-width: 46ch; }
.psaida-grade { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.psaida-op { position: relative; background: #fff; border: 2px solid transparent; border-radius: var(--raio); padding: 6px 4px 8px; cursor: pointer; box-shadow: var(--sombra-2); font-weight: 600; font-size: .74rem; line-height: 1.2; color: var(--texto); transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.psaida-op img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--creme-2); }
.psaida-op:hover { box-shadow: var(--sombra-hover); }
.psaida-op:has(input:checked) { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(43,35,64,.14); }
.psaida-op:has(input:focus-visible) { outline: 2px solid var(--ambar); outline-offset: 2px; }
.psaida-erro { margin-top: 8px; }
.psaida-campo { text-align: left; margin: 14px 0 12px; }
.psaida-campo label { font-size: .88rem; }
.psaida-consent { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: .82rem; line-height: 1.4; color: var(--texto-2); margin: 0 0 14px; cursor: pointer; min-height: 44px; }
.psaida-consent input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--verde); }
.psaida-btn { background: var(--verde-escuro); color: #fff; box-shadow: 0 4px 14px rgba(22,58,44,.25); }
.psaida-btn:hover { background: var(--verde); }
.psaida-continuar { display: inline-block; margin: 10px 0 6px; background: none; border: 0; color: var(--texto); font: 600 .92rem var(--fonte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
.psaida-miuda { font-size: .72rem; color: var(--texto-2); margin: 4px auto 0; max-width: 52ch; line-height: 1.45; }
@media (min-width: 640px) {
  .psaida-cartao { padding: 36px 36px 22px; }
  .psaida-grade { gap: 12px; }
  .psaida-op { font-size: .85rem; padding: 8px 8px 10px; }
}
@media (max-height: 700px) and (max-width: 639px) {
  .psaida-cartao { padding-top: 22px; }
  .psaida-sub { margin-bottom: 10px; }
  .psaida-op img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .psaida-cartao { animation: none; }
  .psaida-op { transition: none; }
}

/* ---------- home-rapida 13/10: no celular o CTA vem logo depois do título ----------
   Metade do tráfego chega pelo navegador do Instagram/Facebook (tela útil menor + faixa de cookies);
   com o botão depois dos checks ele ficava em ~640 px, no limite da dobra. */
@media (max-width: 899px) {
  .hero-txt { display: flex; flex-direction: column; }
  .hero-txt h1 { margin-bottom: 16px; }
  .hero-txt .btn-cta { order: 1; }
  .hero-txt .selo-pixparc { order: 2; }
  .hero-txt .hero-nota { order: 3; align-self: flex-start; margin-bottom: 18px; }
  .hero-txt .hero-sub { order: 4; }
  .hero-txt .checks { order: 5; margin-bottom: 0; }
}

/* home-rapida 13/10: visita do ANÚNCIO abre na pergunta 1 (bloco .estagios-topo; classe .vem-anuncio posta no <head>) */
.estagios-topo { display: none; }
.vem-anuncio .estagios-topo { display: block; padding-top: 18px; padding-bottom: 24px; }
.vem-anuncio .estagios-meio { display: none; }
.estagios-topo .sobretitulo { text-align: center; }
.estagios-topo .titulo-c { margin-bottom: 4px; }
.estagios-topo .sub-c { margin-bottom: 14px; }
@media (max-width: 639px) {
  .estagios-topo .estagios { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .estagios-topo .estagio { padding: 5px 5px 8px; font-size: .78rem; line-height: 1.25; }
  .estagios-topo .estagio img { margin-bottom: 6px; border-radius: 8px; }
}
@media (max-width: 899px) {
  /* a pergunta ocupa a 1ª tela inteira: a foto do hero sai da dobra */
  .vem-anuncio .estagios-topo { min-height: calc(100vh - 118px); min-height: calc(100svh - 118px); }
}

/* funil-rapido 13/10: confiança junto dos preços do /plano; resumo do checkout no celular sem surpresa */
.confia-faixa { list-style: none; margin: 0 auto 22px; padding: 14px 16px; max-width: 760px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); display: grid; gap: 8px; font-size: .86rem; color: var(--texto-2); }
.confia-faixa li { display: flex; align-items: flex-start; gap: 8px; }
.confia-faixa .ic { width: 18px; height: 18px; flex: none; color: var(--verde-2); margin-top: 1px; }
.confia-faixa b { color: var(--texto); }
.confia-faixa a { color: var(--verde); font-weight: 700; }
@media (min-width: 900px) { .confia-faixa { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.ck-mini summary { align-items: center; gap: 12px; }
.ck-mini summary small { display: block; font-size: .74rem; font-weight: 500; color: var(--texto-2); }
.ck-mini-val { text-align: right; }
.ck-mini-val b { display: block; font-size: 1.05rem; }
.ck-mini-dl { margin: 0 0 12px; display: grid; gap: 6px; font-size: .85rem; }
.ck-mini-dl div { display: flex; justify-content: space-between; gap: 12px; }
.ck-mini-dl dt { color: var(--texto-2); } .ck-mini-dl dd { margin: 0; font-weight: 600; }
.ck-mini-dl .verde { color: var(--verde); }
.ck-de { color: var(--texto-2); font-weight: 400; margin-right: 4px; }

/* ---------- logo animado (13/10): mascote + letras coloridas que fazem "gelatina" ao carregar e ao passar o dedo/mouse ----------
   CSS puro (sem JS e sem three no cabeçalho); prefers-reduced-motion desliga. */
@font-face { font-family: Baloo; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/baloo2-800.woff2) format("woff2"); }
.logo-sq { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; font: 800 28px/1 Baloo, Nunito, ui-rounded, system-ui, sans-serif; letter-spacing: .2px; }
.logo-mascote { width: 38px; height: 38px; flex: none; transform-origin: 50% 90%; filter: drop-shadow(0 2px 0 rgba(59,42,89,.25)); animation: logo-jelm .9s .2s both; }
.logo-txt { display: flex; }
.logo-txt span { display: inline-block; transform-origin: 50% 88%; color: var(--lc); -webkit-text-stroke: 5px #3b2a59; paint-order: stroke fill; stroke-linejoin: round; animation: logo-jel .9s calc(.2s + var(--i) * 55ms) both; }
.logo-txt span:nth-child(5n+1) { --lc: #ff5fa2; } .logo-txt span:nth-child(5n+2) { --lc: #ffc23a; } .logo-txt span:nth-child(5n+3) { --lc: #35d0b5; } .logo-txt span:nth-child(5n+4) { --lc: #5aa9ff; } .logo-txt span:nth-child(5n) { --lc: #a77bff; }
.logo:hover .logo-txt span, .logo:active .logo-txt span { animation: logo-jel .9s calc(var(--i) * 55ms) both; }
.logo:hover .logo-mascote, .logo:active .logo-mascote { animation: logo-jelm .9s both; }
@keyframes logo-jel { 0% { transform: none; } 18% { transform: scale(1.28,.68); } 38% { transform: translateY(-9px) scale(.82,1.28); } 58% { transform: scale(1.12,.9); } 78% { transform: scale(.96,1.05); } 100% { transform: none; } }
@keyframes logo-jelm { 0% { transform: none; } 20% { transform: scale(1.25,.7); } 45% { transform: translateY(-8px) scale(.85,1.22); } 70% { transform: scale(1.08,.94); } 100% { transform: none; } }
.topo-funil .logo-sq { font-size: 20px; min-height: 40px; } .topo-funil .logo-mascote { width: 28px; height: 28px; }
.rodape .logo-sq { font-size: 24px; }
@media (max-width: 380px) { .logo-sq { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { .logo-mascote, .logo-txt span, .logo:hover .logo-txt span, .logo:hover .logo-mascote { animation: none !important; } }
.topo-funil .logo-txt span { -webkit-text-stroke: 4px #3b2a59; }

/* faixa de cookies compacta na landing (14/10): baixa, rente ao rodapé, botões numa linha; nunca cobre preço/compra */
body.landing .cookies { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 16px 16px 0 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); font-size: .78rem; line-height: 1.3; }
body.landing .cookies p { margin: 0 0 6px; }
body.landing .cookies-acoes { gap: 8px; }
body.landing .cookies-acoes .btn { flex: 1; min-height: 44px; padding: 8px 12px; font-size: .88rem; }