/* VendaPro — site comercial. Identidade do app: tema escuro, verde/azul como acento, motivo "cupom de balcão". */
:root {
  --bg: #0a0d14;
  --sup: #131823;
  --sup2: #1c2230;
  --borda: #2a313f;
  --txt: #e6edf3;
  --txt2: #8b949e;
  --azul: #38bdf8;
  --verde: #22c55e;
  --lilas: #a78bfa;
  --ambar: #f59e0b;
  --papel: #f4f1ea;
  --tinta: #1d1f24;
  --raio: 18px;
  --max: 1120px;
  --fonte: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Roboto Mono", ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--txt); font: 400 17px/1.6 var(--fonte); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: 3px; }
a:focus-visible, .botao:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 10px; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--verde); color: #00170a; padding: 8px 14px; border-radius: 8px; z-index: 20; }
.pular:focus { left: 8px; }
.envolve { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.mono { font-family: var(--mono); }

/* ---------- cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 10; background: rgba(10, 13, 20, .86); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.topo .envolve { display: flex; align-items: center; gap: 16px; height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--txt); font-weight: 800;
  font-size: 21px; letter-spacing: -.02em; }
.marca img { width: 36px; height: 36px; border-radius: 9px; }
.marca b { background: linear-gradient(90deg, #34d399, var(--verde)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.menu { display: none; gap: 22px; margin-left: auto; }
.menu a { color: var(--txt2); text-decoration: none; font-size: 15px; font-weight: 500; }
.menu a:hover { color: var(--txt); }
.topo .botao { margin-left: auto; }
.topo .longo { display: none; }
@media (min-width: 480px) { .topo .curto { display: none; } .topo .longo { display: inline; } }
@media (min-width: 900px) { .menu { display: flex; } .topo .botao { margin-left: 8px; } }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 14px; font-weight: 700; font-size: 16px; text-decoration: none; border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease; }
.botao:active { transform: translateY(1px); }
.botao-verde { background: var(--verde); color: #00170a; }
.botao-verde:hover { background: #2fd96b; }
.botao-linha { border-color: var(--borda); color: var(--txt); background: var(--sup); }
.botao-linha:hover { border-color: #3b4558; }
.botao-pequeno { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.botao svg { width: 18px; height: 18px; flex: none; }

/* ---------- "linha de cupom" que abre cada seção ---------- */
.linha-cupom { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; font-family: var(--mono); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--txt2); }
.linha-cupom .pontos { flex: 1; border-bottom: 2px dotted #343c4c; transform: translateY(-4px); }
.linha-cupom b { color: var(--verde); font-weight: 600; }
.corte { height: 14px; margin: 0; border: 0; background:
  radial-gradient(circle at 7px 0, var(--bg) 6px, transparent 6.5px) 0 0/14px 14px repeat-x,
  linear-gradient(var(--sup), var(--sup)); opacity: .9; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.025em; margin: 0; }
h2 { font-size: clamp(30px, 7vw, 52px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.verde { color: var(--verde); } .azul { color: var(--azul); } .lilas { color: var(--lilas); }
.lead { color: var(--txt2); font-size: clamp(17px, 2.4vw, 20px); max-width: 38em; }
section { padding: 72px 0; }
@media (min-width: 900px) { section { padding: 104px 0; } }

/* ---------- celular (moldura) ---------- */
.celular { position: relative; width: min(78vw, 300px); aspect-ratio: 9 / 16; border-radius: 34px; padding: 9px;
  background: linear-gradient(160deg, #2a3140, #0d1017 40%, #1a1f2a); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8),
  0 0 0 1px #3a4252, inset 0 0 0 1px #000; flex: none; }
.celular::before { content: ""; position: absolute; top: 15px; left: 50%; width: 9px; height: 9px; margin-left: -4px;
  border-radius: 50%; background: #05070b; box-shadow: 0 0 0 2px #1b202b; z-index: 2; }
.celular img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; background: var(--sup); }
.celular.p { width: min(62vw, 240px); border-radius: 28px; padding: 7px; }
.celular.p img { border-radius: 22px; }
.legenda { margin: 12px auto 0; max-width: 300px; text-align: center; font-size: 14px; color: var(--txt2); }

/* ---------- hero ---------- */
.hero { padding: 48px 0 64px; position: relative; isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -10% -20% auto auto; width: 70vw; height: 70vw; max-width: 760px;
  max-height: 760px; background: radial-gradient(circle, rgba(34,197,94,.16), transparent 62%); z-index: -1; }
.hero .envolve { display: grid; gap: 40px; align-items: center; }
.selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px;
  font-size: 13px; color: var(--txt2); background: var(--sup); margin-bottom: 20px; }
.selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--ambar); box-shadow: 0 0 0 4px rgba(245,158,11,.18); }
.hero h1 { font-size: clamp(42px, 11vw, 84px); font-weight: 900; letter-spacing: -.04em; }
.hero h1 span { display: block; }
.hero .lead { margin: 20px 0 28px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-tela { display: flex; justify-content: center; position: relative; }
.hero-tela .celular { transform: rotate(-3deg); animation: entra .9s cubic-bezier(.2,.7,.2,1) both; }
.fita { position: absolute; right: max(0px, calc(50% - 230px)); bottom: 8%; width: 168px; background: var(--papel); color: var(--tinta);
  font: 600 12px/1.45 var(--mono); padding: 12px 12px 18px; transform: rotate(5deg); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7);
  -webkit-mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 0/12px 100% repeat-x;
  mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) 0 0/12px 100% repeat-x; animation: entra 1s .25s cubic-bezier(.2,.7,.2,1) both; }
.fita b { display: block; text-align: center; letter-spacing: .06em; margin-bottom: 6px; }
.fita span { display: flex; justify-content: space-between; }
.fita .tot { border-top: 1px dashed #8a8a8a; margin-top: 6px; padding-top: 6px; font-weight: 800; }
@keyframes entra { from { transform: translateY(18px) rotate(0deg); } }
@media (min-width: 900px) {
  .hero { padding: 72px 0 96px; }
  .hero .envolve { grid-template-columns: 1.1fr .9fr; }
}

/* ---------- WhatsApp → venda ---------- */
.whats { background: linear-gradient(180deg, var(--bg), #0d1219 30%, var(--bg)); }
.fluxo { display: grid; gap: 28px; margin-top: 40px; counter-reset: passo; }
.passo { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.passo > .num { counter-increment: passo; font-family: var(--mono); font-size: 13px; color: var(--txt2); margin-bottom: 12px; letter-spacing: .06em; }
.passo > .num::before { content: "PASSO " counter(passo, decimal-leading-zero) " · "; color: var(--verde); }
.conversa { width: min(86vw, 330px); background: #0b141a; border: 1px solid #1f2c33; border-radius: 22px; padding: 14px 14px 18px; text-align: left; }
.conversa .quem { font-size: 13px; color: #8696a0; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.conversa .quem i { width: 28px; height: 28px; border-radius: 50%; background: #2a3942; display: grid; place-items: center; font-style: normal; color: #d1d7db; font-weight: 700; }
.balao { background: #202c33; color: #e9edef; border-radius: 4px 14px 14px 14px; padding: 9px 11px 6px; font-size: 15px; line-height: 1.45; position: relative; }
.balao small { display: block; text-align: right; color: #8696a0; font-size: 11px; margin-top: 2px; }
.compartilhar { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #8696a0; align-items: center; }
.compartilhar span { border: 1px solid #2a3942; border-radius: 999px; padding: 4px 10px; color: #d1d7db; }
.compartilhar span.vp { border-color: var(--verde); color: var(--verde); }
.aviso-demo { font-size: 12px; color: var(--txt2); margin-top: 10px; font-family: var(--mono); }
.entendeu { margin-top: 44px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px; }
.entendeu h3 { margin-bottom: 14px; }
.entendeu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.entendeu li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px; background: var(--sup2); border-radius: 12px; }
.entendeu li .de { font-family: var(--mono); font-size: 13px; color: var(--txt2); }
.entendeu li .para { font-weight: 600; }
.entendeu li.duvida .para { color: var(--ambar); }
@media (min-width: 640px) { .entendeu li { grid-template-columns: 220px 1fr; align-items: center; } }
@media (min-width: 1000px) {
  .fluxo { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
  .passo:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 46%; font-size: 28px; color: #3a4456; }
}

/* ---------- voz ---------- */
.voz .envolve { display: grid; gap: 40px; align-items: center; }
.fala { margin: 26px 0; padding: 22px; border-left: 4px solid var(--lilas); background: linear-gradient(90deg, rgba(167,139,250,.10), transparent);
  border-radius: 0 var(--raio) var(--raio) 0; font-size: clamp(21px, 4.4vw, 28px); font-weight: 700; line-height: 1.3; }
.ondas { display: flex; gap: 4px; align-items: center; height: 28px; margin-bottom: 12px; }
.ondas i { width: 4px; border-radius: 4px; background: var(--lilas); height: 30%; animation: onda 1.4s ease-in-out infinite; }
.ondas i:nth-child(2n) { animation-delay: -.3s; } .ondas i:nth-child(3n) { animation-delay: -.7s; } .ondas i:nth-child(5n) { animation-delay: -1s; }
@keyframes onda { 50% { height: 100%; } }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-check li { padding-left: 30px; position: relative; color: var(--txt2); }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 9px; border-left: 3px solid var(--verde);
  border-bottom: 3px solid var(--verde); transform: rotate(-45deg); }
.lista-check b { color: var(--txt); }
.duas-telas { display: flex; justify-content: center; gap: 14px; }
.duas-telas .celular:nth-child(2) { margin-top: 48px; }
.duas-telas .celular.p { width: min(42vw, 240px); }
@media (min-width: 900px) { .voz .envolve { grid-template-columns: 1fr 1fr; } }

/* ---------- recursos ---------- */
.grade { display: grid; gap: 12px; margin-top: 36px; grid-template-columns: 1fr; grid-auto-flow: row dense; }
.item { background: var(--sup); border: 1px solid var(--borda); border-radius: 16px; padding: 18px; }
.item .tag { font-family: var(--mono); font-size: 12px; color: var(--azul); letter-spacing: .06em; }
.item h3 { margin: 6px 0 4px; font-size: 18px; }
.item p { margin: 0; color: var(--txt2); font-size: 15px; }
@media (min-width: 560px) { .grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .grade { grid-template-columns: repeat(4, 1fr); } .item.largo { grid-column: span 2; } }
.vitrine { display: flex; gap: 16px; overflow-x: auto; padding: 8px 2px 18px; margin-top: 36px; scroll-snap-type: x mandatory; }
.vitrine figure { margin: 0; scroll-snap-align: center; }
.vitrine figcaption { margin-top: 10px; text-align: center; font-size: 14px; color: var(--txt2); }

/* ---------- recibos ---------- */
.recibos .envolve { display: grid; gap: 40px; align-items: start; }
.papeis { display: grid; gap: 22px; justify-items: center; grid-template-columns: minmax(0, 1fr); }
.recibos .envolve > *, .voz .envolve > *, .nfce .envolve > *, .hero .envolve > * { min-width: 0; }
@media (max-width: 899px) { .hero .envolve, .voz .envolve, .nfce .envolve, .orcamento .envolve { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 959px) { .recibos .envolve { grid-template-columns: minmax(0, 1fr); } }
.a4 { background: #fff; border-radius: 6px; padding: 6px; max-width: 520px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.8); transform: rotate(-1.2deg); }
.a4 img { border-radius: 3px; }
.termica { width: min(100%, 420px); background: var(--papel); color: var(--tinta); margin: 0; padding: 16px 14px 26px;
  font: 500 clamp(9px, 2.45vw, 12px)/1.42 var(--mono); white-space: pre; overflow-x: auto; transform: rotate(1.4deg);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.8);
  -webkit-mask: radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px) 0 0/14px 100% repeat-x;
  mask: radial-gradient(circle at 7px 100%, transparent 6px, #000 6.5px) 0 0/14px 100% repeat-x; }
.nota-pe { font-size: 13px; color: var(--txt2); margin-top: 6px; text-align: center; }
.destaque-borda { border: 1px dashed #3a4456; border-radius: var(--raio); padding: 16px 18px; color: var(--txt2); margin-top: 22px; }
.destaque-borda b { color: var(--ambar); }
@media (min-width: 960px) { .recibos .envolve { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* ---------- nota fiscal ---------- */
.nfce .envolve { display: grid; gap: 40px; align-items: center; }
.requisitos { counter-reset: r; list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 8px; }
.requisitos li { counter-increment: r; display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--borda); }
.requisitos li::before { content: counter(r, decimal-leading-zero); font-family: var(--mono); color: var(--azul); font-size: 13px; }
.disponivel { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.35); border-radius: 14px; padding: 14px 16px; color: #f6d7a3; font-size: 15px; }
@media (min-width: 900px) { .nfce .envolve { grid-template-columns: 1fr 1fr; } }

/* ---------- segurança ---------- */
.seguro { display: grid; gap: 14px; margin-top: 36px; }
.seguro div { border-top: 2px solid var(--borda); padding-top: 14px; }
.seguro h3 { font-size: 18px; margin-bottom: 4px; }
.seguro p { margin: 0; color: var(--txt2); font-size: 15px; }
@media (min-width: 760px) { .seguro { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* ---------- CTA final ---------- */
.final { text-align: center; }
.final .caixa { background: radial-gradient(circle at 50% 0, rgba(34,197,94,.18), transparent 60%), var(--sup); border: 1px solid var(--borda);
  border-radius: 28px; padding: 48px 20px; }
.final h2 { max-width: 14em; margin: 0 auto; }
.final p { color: var(--txt2); max-width: 34em; margin: 16px auto 26px; }
.final .acoes { justify-content: center; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--borda); padding: 40px 0 56px; color: var(--txt2); font-size: 15px; }
.rodape .envolve { display: grid; gap: 24px; }
.rodape .empresa b { color: var(--txt); display: block; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rodape nav a { color: var(--txt); text-decoration: none; }
.rodape nav a:hover { text-decoration: underline; }
@media (min-width: 800px) { .rodape .envolve { grid-template-columns: 1.2fr 1fr 1fr; } }

/* ---------- páginas legais ---------- */
.legal { padding: 40px 0 72px; }
.legal .envolve { max-width: 780px; }
.legal h1 { font-size: clamp(30px, 6vw, 42px); font-weight: 800; margin-bottom: 6px; }
.legal .data { color: var(--txt2); font-size: 14px; margin-bottom: 28px; font-family: var(--mono); }
.legal h2 { font-size: 20px; color: var(--verde); margin: 34px 0 10px; letter-spacing: -.01em; }
.legal li { margin: 6px 0; }
.legal p, .legal li { color: #cfd6de; }
.legal b { color: var(--txt); }

/* ---------- orçamento no WhatsApp ---------- */
.orcamento .envolve { display: grid; gap: 40px; align-items: center; }
.orcamento .envolve > * { min-width: 0; }
.orc-demo { display: flex; flex-direction: column; align-items: center; }
.conversa.enviada { width: min(100%, 380px); }
.balao-saida { margin: 0 0 0 auto; background: #005c4b; color: #e9edef; border-radius: 14px 4px 14px 14px; padding: 10px 12px;
  font: 400 15px/1.45 var(--fonte); white-space: pre-wrap; max-width: 92%; }
.balao-saida b { font-weight: 700; }
.lido { margin: 6px 2px 0; text-align: right; font-size: 11px; color: #8696a0; }
@media (min-width: 900px) { .orcamento .envolve { grid-template-columns: 1fr 1fr; } }