/* Página de vendas. Usa as cores e componentes de app/css/app.css */
html { scroll-behavior: smooth; }
body { padding-bottom: 76px; }
.caixa { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.centro { text-align: center; }
.secao { padding: 44px 0; scroll-margin-top: 56px; }
.secao.alt { background: var(--fundo-alt); }
.secao h2 { font-size: 1.55rem; line-height: 1.2; letter-spacing: -.5px; margin: 0 0 12px; }
.sub.grande { font-size: 1.05rem; }

/* hero */
.hero { background: linear-gradient(180deg, hsl(var(--marca-h) 100% 96.5%) 0%, #fff 100%); padding: 26px 0 38px; }
.hero h1 { font-size: 2rem; letter-spacing: -.8px; }
.grande-botao { font-size: 1.1rem; padding: 18px; margin-top: 4px; }
.link-claro { display: block; text-align: center; margin: 12px 0 4px; color: var(--marca-escura); font-weight: 600; font-size: .95rem; }

/* mock do relatório */
.mock { background: #fff; border: 1px solid var(--borda); border-radius: 20px; padding: 16px 18px 6px; box-shadow: var(--sombra-md); margin: 8px 0 22px; }
.mock-cab { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--suave); }
.mock-pill { color: #fff; background: var(--perigo); padding: 3px 10px; border-radius: 99px; letter-spacing: .04em; }
.mock-gauge { position: relative; width: 210px; margin: 6px auto 0; }
.mock-gauge svg { display: block; width: 100%; height: auto; }
.mock-num { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-family: Oswald, Inter, sans-serif; font-size: 2.9rem; font-weight: 700; line-height: 1; color: var(--texto); }
.mock-num small { font-size: 1rem; color: var(--suave); font-weight: 500; }
.mock-faixa { text-align: center; font-weight: 800; color: var(--perigo); margin: 4px 0 16px; font-size: .95rem; }
.mock-barras-cab { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 700; color: var(--suave); margin-bottom: 8px; }
.mock-tag { font-size: .7rem; font-weight: 800; color: var(--perigo); background: var(--perigo-claro); padding: 3px 9px; border-radius: 99px; }
.mock-barras { display: flex; align-items: flex-end; gap: 6px; height: 74px; padding-bottom: 2px; border-bottom: 1px solid var(--borda); }
.mock-barras i { flex: 1; border-radius: 5px 5px 2px 2px; background: hsl(var(--marca-h) 80% 82%); }
.mock-barras i.r { background: var(--perigo); }
.mock-linhas div { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--borda); font-size: .9rem; }
.mock-linhas div:last-child { border-bottom: 0; }
.mock-linhas span { color: hsl(222 15% 35%); font-weight: 500; }
.mock-linhas b { color: var(--perigo); font-weight: 800; }

/* dor */
.lista-dor { list-style: none; padding: 0; margin: 0 0 18px; }
.lista-dor li { position: relative; padding: 12px 14px 12px 40px; background: #fff; border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 8px; font-weight: 600; box-shadow: var(--sombra-sm); }
.lista-dor li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 4px; background: var(--perigo-claro); border: 2px solid var(--perigo); }
.destaque { background: var(--texto); color: #fff; border-radius: 16px; padding: 18px; font-size: .97rem; line-height: 1.5; }
.destaque b { display: block; font-size: 1.15rem; margin-bottom: 6px; }

/* teste grátis */
.teste, #teste-resultado { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra-md); }
.teste[hidden], #teste-resultado[hidden] { display: none; }
.teste h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.3px; margin: 4px 0 16px; }
#teste-resultado { scroll-margin-top: 70px; }
#teste-resultado .medidor { position: relative; margin-top: 4px; }
#teste-resultado .mock-ponteiro { transition: left 1s; }
#teste-resultado .botao { margin-top: 4px; }
#teste-resultado .link { display: block; margin: 12px auto 0; }
.nivel { text-align: center; font-family: Oswald, Inter, sans-serif; font-size: 2.6rem; font-weight: 700; line-height: 1.1; margin-bottom: 14px; }
.nivel.ok { color: var(--ok); } .nivel.alerta { color: var(--alerta); } .nivel.perigo { color: var(--perigo); }
.sinais-teste { list-style: none; padding: 0; margin: 0 0 14px; }
.sinais-teste li { position: relative; padding: 8px 0 8px 22px; border-bottom: 1px solid var(--borda); font-size: .95rem; font-weight: 600; }
.sinais-teste li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--perigo); }
.virada-borrada { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 12px; background: var(--fundo-alt); margin: 4px 0 14px; }
.virada-borrada span { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.virada-borrada b { font-family: Oswald, Inter, sans-serif; font-size: 1.3rem; color: var(--perigo); filter: blur(6px); user-select: none; }

/* amostra */
#amostra-resultado { margin-top: 18px; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra-md); }
.amostra-sinal { padding: 10px 0; border-bottom: 1px solid var(--borda); }
.amostra-sinal b { display: flex; align-items: center; gap: 8px; }
.amostra-sinal b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--perigo); flex: none; }
.amostra-sinal p { margin: 4px 0 0; font-size: .93rem; color: hsl(222 15% 30%); }
.indice-borrado { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 14px; border-radius: 12px; background: var(--fundo-alt); }
.indice-borrado span { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.indice-borrado b { font-family: Oswald, Inter, sans-serif; font-size: 2rem; filter: blur(7px); user-select: none; }

/* como funciona */
.etapas-venda { list-style: none; padding: 0; margin: 0; }
.etapas-venda li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--borda); }
.etapas-venda li:last-child { border-bottom: 0; }
.etapas-venda li > span { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--marca-clara); color: var(--marca); font-size: 1.25rem; }
.etapas-venda b { display: block; margin-bottom: 2px; }
.etapas-venda div { color: var(--suave); font-size: .95rem; }
.etapas-venda div b { color: var(--texto); }

/* sinais medidos */
.grade-sinais { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 16px; }
.grade-sinais div { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 12px; font-size: .88rem; font-weight: 600; box-shadow: var(--sombra-sm); }
.grade-sinais div:last-child { grid-column: span 2; }

/* sigilo */
.sigilo { background: linear-gradient(160deg, hsl(var(--marca-h) 60% 22%), hsl(calc(var(--marca-h) + 15) 55% 16%)); color: #fff; border-radius: 20px; padding: 24px 20px; }
.sigilo h2 { color: #fff; }
.sigilo ul { padding-left: 18px; margin: 0; }
.sigilo li { margin-bottom: 10px; color: hsl(0 0% 100% / .88); }
.sigilo b { color: #fff; }
.grande-ic { font-size: 2.2rem; color: hsl(var(--marca-h) 90% 80%); margin-bottom: 6px; }

/* planos */
.plano { position: relative; background: #fff; border: 1.5px solid var(--borda); border-radius: 18px; padding: 22px 18px 18px; margin-bottom: 14px; box-shadow: var(--sombra-sm); }
.destaque-plano { border-color: var(--marca); box-shadow: var(--sombra-marca); }
.faixa-plano { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--grad-marca); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 99px; white-space: nowrap; }
.plano h3 { margin: 0; font-size: 1.15rem; }
.preco { font-family: Oswald, Inter, sans-serif; font-size: 3rem; font-weight: 700; line-height: 1.1; margin: 4px 0 12px; }
.preco small { font-size: 1.1rem; font-weight: 500; color: var(--suave); }
.plano ul { list-style: none; padding: 0; margin: 0 0 16px; }
.plano li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: .95rem; }
.plano li .ic { color: var(--ok); margin-top: 3px; }
.plano li.nao { color: var(--suave); text-decoration: line-through; }
.plano li.nao .ic { color: hsl(220 14% 75%); }
.garantia { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px dashed var(--ok); border-radius: 14px; padding: 14px; font-size: .92rem; }
.garantia .ic { font-size: 1.8rem; color: var(--ok); }

/* faq */
.faq { border-bottom: 1px solid var(--borda); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; font-weight: 700; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .2s; color: var(--suave); }
.faq[open] summary .ic { transform: rotate(180deg); }
.faq p { margin: 0 0 16px; color: var(--suave); }

.final h2 { margin-bottom: 18px; }
.rodape { padding: 26px 0 30px; font-size: .78rem; color: var(--suave); text-align: center; }
.rodape a { color: var(--suave); }

/* barra fixa */
.barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: hsl(0 0% 100% / .92); backdrop-filter: blur(10px); border-top: 1px solid var(--borda); transform: translateY(110%); transition: transform .3s; }
.barra-fixa.visivel { transform: none; }
.barra-fixa .botao { padding: 14px; font-size: 1rem; }

/* popup */
.destaque-texto { color: var(--marca); }
.lista-popup { list-style: none; padding: 0; margin: 0 0 12px; text-align: left; }
.lista-popup li { display: flex; gap: 10px; padding: 5px 0; }
.lista-popup .ic { color: var(--ok); margin-top: 3px; }
.preco-popup { font-size: 1.1rem; margin: 6px 0 14px; }
.preco-popup s { color: var(--suave); }
.preco-popup b { font-family: Oswald, Inter, sans-serif; font-size: 2rem; color: var(--texto); margin-left: 6px; }
#popup-basico .link { display: block; margin: 12px auto 0; }

@media (min-width: 700px) {
  .hero h1 { font-size: 2.4rem; }
  body { padding-bottom: 0; }
  .barra-fixa { display: none; }
}