/* =========================================================
   FUNIL — Leitor de NF-e
   =========================================================
   Página clara, azul da marca (#2563eb, o mesmo do app).
   Seis perguntas, uma demonstração da nota sendo processada e a
   página de vendas. A variante antiga (com a réplica do app
   dentro) está guardada em ../_variante-com-demo/.
   ========================================================= */
:root{
  --bg-secondary:#f4f6fa;
  --bg-card:#ffffff;
  --bg-input:#eef1f6;

  /* Azul da marca. Este mesmo tom serve para TEXTO e para FUNDO de
     botão — diferente do amarelo do funil do eletricista, que precisava
     de dois. */
  --accent:#1d4ed8; --accent-strong:#1e40af; --accent-light:#2563eb;
  --accent-dim:rgba(37,99,235,.10);

  --green:#059669; --green-dim:rgba(5,150,105,.09);
  --amarelo:#b45309;

  --grad-accent:linear-gradient(135deg,#2563eb,#1d4ed8);
  --grad-green:linear-gradient(135deg,#10b981,#059669);

  --text-1:#0f172a; --text-2:#475569; --text-3:#94a3b8;

  --border:rgba(37,99,235,.24); --border-subtle:rgba(15,23,42,.10);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;

  /* paleta de documento — usada na maquete da abertura e na demonstração */
  --p-ink:#0f172a; --p-strong:#334155; --p-muted:#64748b; --p-soft:#94a3b8;
  --p-line:#e2e8f0; --p-surface:#f8fafc;
  --p-accent:#2563eb; --p-accent-ink:#1d4ed8; --p-accent-soft:#eff6ff;
  --p-accent-line:#bfdbfe;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#fff; color:var(--text-1);
  min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ===== etapas ===== */
.etapa{display:none; position:relative; z-index:1}
.etapa.ativa{display:block; animation:fadeInUp .45s cubic-bezier(.25,.46,.45,.94)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.42)}70%{box-shadow:0 0 0 14px rgba(37,99,235,0)}}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes balanca{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* =========================================================
   BOTÕES GRANDES
   ========================================================= */
.btn-grande{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:410px; min-height:58px; padding:16px 26px;
  border:none; border-radius:var(--r-md); cursor:pointer;
  background:var(--grad-accent); color:#fff;
  font-size:1.05rem; font-weight:800; letter-spacing:-.01em; text-decoration:none;
  box-shadow:0 8px 26px rgba(37,99,235,.30);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn-grande:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(37,99,235,.38)}
.btn-grande:active{transform:scale(.97)}
.btn-grande.pulsando{animation:pulsa 2.4s infinite}

/* =========================================================
   O QUIZ
   ========================================================= */
.quiz{
  min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:22px 20px calc(28px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 70% at 50% 0%,rgba(37,99,235,.10) 0%,transparent 55%);
}
.quiz-topo{display:flex; align-items:center; gap:9px; margin-bottom:18px}
.quiz-topo .raio{font-size:24px; line-height:1; filter:drop-shadow(0 2px 8px rgba(37,99,235,.30))}
.quiz-topo b{font-size:1.02rem; font-weight:800; letter-spacing:-.03em; color:var(--accent)}

.progresso{
  width:100%; max-width:460px; height:5px; border-radius:99px;
  background:var(--bg-input); overflow:hidden; margin-bottom:26px;
}
.progresso i{display:block; height:100%; width:0%; border-radius:99px;
  background:var(--grad-accent); transition:width .45s cubic-bezier(.25,.46,.45,.94)}

.quiz-corpo{
  width:100%; max-width:460px; flex:1;
  display:flex; flex-direction:column; justify-content:center; text-align:center;
}
.quiz h1{
  font-size:clamp(1.35rem,5.6vw,1.9rem); font-weight:900; letter-spacing:-.035em;
  line-height:1.2; margin-bottom:14px; color:var(--text-1);
}
.quiz h1 em{font-style:normal; color:var(--accent)}
.quiz .sub{color:var(--text-2); font-size:.95rem; line-height:1.6; margin-bottom:26px}
.quiz .sub b{color:var(--text-1); font-weight:700}
.quiz .sub + .sub{margin-top:-14px}
.quiz .sub.destaque{color:var(--text-1); font-weight:700; font-size:1rem; margin-bottom:20px}

.opcoes{display:flex; flex-direction:column; gap:11px; width:100%}
.opcao{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:17px 20px; border-radius:var(--r-md); cursor:pointer;
  background:#fff; border:1.5px solid var(--border-subtle);
  color:var(--text-1); font-family:inherit; font-size:.98rem; font-weight:600;
  text-align:left; transition:all .2s ease;
  box-shadow:0 2px 10px rgba(15,23,42,.055);
}
.opcao i{font-style:normal; font-size:21px; flex-shrink:0}
.opcao:hover{border-color:var(--accent-light); background:var(--accent-dim)}
.opcao:active{transform:scale(.98)}
.opcao.escolhida{border-color:var(--accent-light); background:var(--accent-dim); color:var(--accent)}

/* maquete da abertura (sai de cena quando a foto carrega) */
.quiz-figura{
  width:100%; max-width:300px; margin:0 auto 20px;
  border-radius:18px; overflow:hidden; position:relative;
  border:1px solid var(--border-subtle); background:var(--bg-secondary);
  box-shadow:0 18px 44px rgba(15,23,42,.14);
}
.quiz-figura img{width:100%; display:block}

/* =========================================================
   O ECO DAS RESPOSTAS (etapa 8)
   =========================================================
   A abertura promete "veja como isso funcionaria na SUA empresa".
   Esta faixa é o pagamento dessa promessa: as respostas da pessoa
   de volta na tela, com o número que sai delas.
   ========================================================= */
.eco{
  width:100%; text-align:left; margin-bottom:22px; padding:16px 18px;
  border-radius:var(--r-lg); background:var(--accent-dim);
  border:1px solid var(--border);
}
.eco-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px}
.eco-chips span{
  font-size:.72rem; font-weight:700; color:var(--accent);
  background:#fff; border:1px solid var(--border);
  border-radius:999px; padding:4px 10px;
}
.eco-linha{font-size:.94rem; line-height:1.5; color:var(--text-1)}
.eco-linha b{font-weight:900; color:var(--accent)}
.eco-fecho{margin-top:7px; font-size:.84rem; line-height:1.5; color:var(--text-2)}

/* =========================================================
   OS 3 PASSOS
   ========================================================= */
.passos{display:flex; flex-direction:column; gap:14px; width:100%; margin-bottom:22px}
.passo{
  display:flex; gap:14px; align-items:center; text-align:left;
  background:#fff; border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); padding:15px 16px;
  box-shadow:0 2px 10px rgba(15,23,42,.055);
}
.passo-num{
  width:34px; height:34px; flex-shrink:0; border-radius:50%;
  background:var(--grad-accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.95rem;
}
.passo-txt{flex:1; min-width:0}
.passo-txt b{display:block; font-size:.92rem; font-weight:800; margin-bottom:2px}
.passo-txt small{font-size:.8rem; color:var(--text-3); line-height:1.45; display:block}

/* dentro da página de vendas o passo é mais largo e a mini tela vai embaixo */
.vendas .passo{align-items:flex-start}
.vendas .passo-txt b{font-size:1rem}
.vendas .passo-txt small{color:var(--text-2); font-size:.86rem}
.vendas .passo-tela{width:100%; margin-top:12px; flex-direction:row; gap:8px; align-items:stretch}
.vendas .passo-tela > *{flex:1}
@media (max-width:520px){
  .vendas .passo-tela{flex-direction:column}
}

.seta-baixo{font-size:26px; color:var(--accent); text-align:center;
  margin:-6px 0 14px; animation:balanca 1.6s ease-in-out infinite}

.quiz-rodape{margin-top:18px; color:var(--text-3); font-size:.76rem; line-height:1.7; text-align:center}
.quiz-rodape b{color:var(--text-2)}

/* =========================================================
   SELO DE GARANTIA
   =========================================================
   Verde, e não o azul da marca, de propósito: o azul aqui é o
   produto. A garantia precisa ler como outra coisa — o risco
   saindo da mesa, não mais uma característica do app.
   ========================================================= */
.garantia{
  display:flex; align-items:center; gap:16px; width:100%;
  padding:18px 20px; margin-bottom:20px;
  border-radius:var(--r-lg); text-align:left;
  background:var(--green-dim); border:2px solid rgba(5,150,105,.32);
  box-shadow:0 4px 16px rgba(5,150,105,.10);
}
.gar-selo{
  position:relative; width:72px; height:72px; flex-shrink:0; border-radius:50%;
  background:var(--grad-green); color:#fff; line-height:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(5,150,105,.36);
}
/* o anel tracejado por dentro é o que faz o círculo ler como SELO
   e não como um simples avatar redondo */
.gar-selo::after{
  content:''; position:absolute; inset:5px; border-radius:50%;
  border:2px dashed rgba(255,255,255,.65);
}
.gar-selo b{font-size:1.85rem; font-weight:900; letter-spacing:-.04em}
.gar-selo small{font-size:.58rem; font-weight:800; letter-spacing:.16em; margin-top:2px}
.gar-txt{flex:1; min-width:0}
.gar-txt>b{display:block; font-size:1.08rem; font-weight:900; color:var(--green);
  margin-bottom:4px; letter-spacing:-.02em}
.gar-txt small{display:block; font-size:.86rem; line-height:1.5; color:var(--text-2)}
.gar-txt small b{color:var(--text-1); font-weight:800}

@media (max-width:420px){
  .garantia{gap:13px; padding:15px 15px}
  .gar-selo{width:64px; height:64px}
  .gar-selo b{font-size:1.6rem}
}
@media (max-height:800px){
  .garantia{padding:13px 15px; gap:12px; margin-bottom:14px}
  .gar-selo{width:60px; height:60px}
  .gar-selo b{font-size:1.5rem}
  .gar-txt>b{font-size:.98rem}
  .gar-txt small{font-size:.8rem}
}

/* ---- mini aparelho da abertura ---- */
.mini-fone{background:var(--bg-secondary); padding:0 0 10px}
.mini-topo{
  display:flex; align-items:center; gap:7px; padding:10px 12px;
  border-bottom:1px solid var(--p-line); font-size:.76rem; font-weight:800;
  color:var(--accent); background:#fff;
}
.mini-topo span{font-size:14px}
.mini-folha{
  background:#fff; color:var(--p-ink); margin:10px; border-radius:6px; overflow:hidden;
  box-shadow:0 8px 22px rgba(15,23,42,.16); border:1px solid var(--p-line);
}
.mf-filete{height:3px; background:var(--p-accent)}
.mf-cab{display:flex; align-items:center; gap:8px; padding:9px 10px;
  background:var(--p-surface); border-bottom:1px solid var(--p-line)}
.mf-logo{
  width:26px; height:26px; border-radius:5px; background:#fff; flex-shrink:0;
  border:1px solid var(--p-line); display:flex; align-items:center; justify-content:center; font-size:13px;
}
.mf-cab b{display:block; font-size:8.5px; letter-spacing:.02em; color:var(--p-ink)}
.mf-cab small{display:block; font-size:7.5px; color:var(--p-accent-ink); font-weight:700; margin-top:1px}
.mf-linha{
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  padding:6px 10px; font-size:9px; border-bottom:1px solid var(--p-line); color:var(--p-strong);
}
.mf-linha span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* o valor da nota aparece riscado ao lado do real: a comparação é a oferta */
.mf-linha i{font-style:normal; color:var(--p-soft); text-decoration:line-through; font-size:8px}
.mf-linha b{color:var(--p-accent-ink); font-weight:800}
.mf-total{
  display:flex; justify-content:space-between; align-items:center; margin:7px 10px 9px;
  padding:8px 10px; background:var(--p-accent-soft); border:1px solid var(--p-accent-line);
  border-radius:4px;
}
.mf-total span{font-size:6.5px; font-weight:800; letter-spacing:.08em; color:var(--p-accent-ink)}
.mf-total b{font-size:13px; font-weight:900; color:var(--p-ink)}

/* ---- mini telas dos 3 passos ---- */
.passo-tela{
  width:104px; flex-shrink:0; border-radius:10px; padding:8px;
  background:var(--bg-secondary); border:1px solid var(--border-subtle);
  display:flex; flex-direction:column; gap:6px;
}
.passo-tela.clara{background:#f1f5f9}
.pt-chip{
  display:block; font-size:7.5px; font-weight:700; padding:5px 6px; border-radius:6px;
  background:var(--accent-dim); border:1px solid var(--accent-light); color:var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pt-campos{display:flex; gap:5px}
.pt-campo{flex:1; background:#fff; border:1px solid var(--border-subtle);
  border-radius:5px; padding:4px 5px; text-align:center}
.pt-campo small{display:block; font-size:5.5px; color:var(--text-3); letter-spacing:.06em}
.pt-campo b{display:block; font-size:11px; color:var(--text-1); font-weight:800}
.pt-campo b.riscado{text-decoration:line-through; color:var(--text-3)}
.pt-campo b.azul{color:var(--accent)}
.pt-total{display:block; background:var(--accent-dim); border:1px solid var(--accent-light);
  border-radius:6px; padding:6px; text-align:center}
.pt-total small{display:block; font-size:5.5px; color:var(--text-2); letter-spacing:.07em}
.pt-total b{display:block; font-size:12px; color:var(--accent); font-weight:900}
.pt-botao{display:block; background:var(--grad-accent); color:#fff; border-radius:5px;
  padding:5px 4px; font-size:6.5px; font-weight:800; text-align:center}
.pt-doc{display:block; background:#fff; border-radius:4px; padding:7px;
  box-shadow:0 3px 10px rgba(15,23,42,.14)}
.pt-doc-filete{display:block; height:2.5px; background:var(--p-accent); border-radius:2px; margin-bottom:6px}
.pt-doc-linha{display:block; height:3.5px; background:var(--p-line); border-radius:2px; margin-bottom:4px; width:70%}
.pt-doc-linha.longa{width:100%}
.pt-doc-linha.media{width:50%}
.pt-doc-total{display:block; margin-top:6px; background:var(--p-accent-soft);
  border:1px solid var(--p-accent-line); border-radius:3px;
  padding:4px; font-size:8px; font-weight:900; color:var(--p-accent-ink); text-align:center}

/* na página de vendas as mini telas crescem junto com o cartão */
.vendas .pt-chip{font-size:.72rem; padding:8px 10px}
.vendas .pt-campo small{font-size:.62rem; letter-spacing:.04em}
.vendas .pt-campo b{font-size:.95rem}
.vendas .pt-total small{font-size:.62rem}
.vendas .pt-total b{font-size:1.05rem}
.vendas .pt-botao{font-size:.72rem; padding:8px 6px}
.vendas .pt-doc-linha{height:5px}
.vendas .pt-doc-filete{height:3.5px}
.vendas .pt-doc{padding:12px}
.vendas .pt-doc-linha{margin-bottom:7px; background:#dbe3ee}
.vendas .pt-doc-total{font-size:.72rem; padding:7px}

/* ---------- foto de cada tela do quiz ----------
   A caixa tem proporção fixa e a foto entra por object-fit: cover, então
   qualquer imagem cabe sem esticar ninguém. Se o arquivo não existir, o JS
   remove a caixa inteira e a tela fica como está sem foto. */
.quiz-foto{
  width:100%; max-width:400px; margin:0 auto 20px;
  border-radius:16px; overflow:hidden; position:relative;
  aspect-ratio:3 / 2; background:var(--bg-secondary);
  box-shadow:0 14px 34px rgba(15,23,42,.14);
  max-height:240px;                              /* reserva para navegador antigo */
  max-height:min(240px, calc(100dvh - 476px));
}
.quiz-foto img{width:100%; height:100%; object-fit:cover; display:block}
#et1 .quiz-foto{max-width:330px; margin-bottom:16px}

/* Tela baixa: tudo encolhe um pouco para caber foto E alternativas.
   dvh e não vh: no celular o vh ignora a barra do navegador e a conta sai
   maior do que a tela de verdade. */
@media (max-height: 800px){
  .quiz{padding-top:14px; padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .quiz-topo{margin-bottom:10px}
  .progresso{margin-bottom:14px}
  .quiz h1{margin-bottom:10px}
  .quiz .sub{margin-bottom:14px}
  .quiz-foto{margin-bottom:12px}
  .opcoes{gap:9px}
  .opcao{padding:13px 18px}
  .passos{gap:10px; margin-bottom:14px}
  .passo{padding:11px 12px; gap:11px}
  .passo-num{width:29px; height:29px; font-size:.86rem}
  .passo-txt b{font-size:.88rem}
  .passo-txt small{font-size:.75rem; line-height:1.35}
  .passo-tela{width:86px; padding:6px; gap:4px}
  .seta-baixo{font-size:20px; margin:-4px 0 8px}
  .quiz-rodape{margin-top:12px}
  .eco{padding:13px 15px; margin-bottom:16px}
}
/* Celular deitado: não cabe foto e alternativa juntas, e a alternativa ganha.
   A abertura mantém a foto porque lá ela é o gancho do anúncio. */
@media (max-height: 540px){
  .etapa:not(#et1) .quiz-foto{display:none}
}

/* =========================================================
   A DEMONSTRAÇÃO (etapa 9)
   =========================================================
   Enquanto o vídeo não existe, um aparelho desenhado em CSS
   percorre as cinco fases que o vídeo vai mostrar. Quando
   CONFIG.VIDEO for preenchido, o <video> ocupa o mesmo lugar.
   ========================================================= */
.demo-tela .quiz-corpo{justify-content:flex-start}
.palco{width:100%; margin:4px auto 22px; display:flex; flex-direction:column; align-items:center}

.fone{
  width:100%; max-width:300px; border-radius:20px; overflow:hidden;
  background:var(--bg-secondary); border:1px solid var(--border-subtle);
  box-shadow:0 18px 44px rgba(15,23,42,.16);
}
.fone-topo{
  display:flex; align-items:center; gap:7px; padding:10px 13px; background:#fff;
  border-bottom:1px solid var(--p-line);
  font-size:.76rem; font-weight:800; color:var(--accent);
}
.fone-topo span{font-size:14px}
/* altura fixa: sem isto a página inteira pula a cada troca de fase */
.fone-tela{
  height:266px; padding:11px; text-align:left;
  display:flex; flex-direction:column; gap:8px;
}
.fone-tela.entra{animation:fadeInUp .34s cubic-bezier(.25,.46,.45,.94)}

.fs-cab{
  background:#fff; border:1px solid var(--p-line); border-radius:8px;
  padding:9px 11px; box-shadow:0 2px 8px rgba(15,23,42,.06);
}
.fs-cab b{display:block; font-size:.72rem; font-weight:900; letter-spacing:.02em; color:var(--p-ink)}
.fs-cab small{display:block; font-size:.66rem; color:var(--p-accent-ink); font-weight:700; margin-top:2px}

.fs-itens{
  flex:1; min-height:0; background:#fff; border:1px solid var(--p-line);
  border-radius:8px; padding:3px 10px; overflow:hidden;
}
.fs-linha{
  display:flex; align-items:baseline; gap:8px; padding:7px 0;
  border-bottom:1px solid var(--p-line); font-size:.72rem; color:var(--p-strong);
}
.fs-linha:last-child{border-bottom:none}
.fs-linha span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fs-linha i{font-style:normal; font-size:.66rem; color:var(--p-soft); text-decoration:line-through}
.fs-linha i.data{text-decoration:none; color:var(--p-muted); font-weight:600}
.fs-linha b{font-weight:800; color:var(--p-accent-ink); font-variant-numeric:tabular-nums}
.fs-mais{padding:7px 0; font-size:.68rem; color:var(--p-soft); font-weight:600}

.fs-rodape{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:9px 11px; border-radius:8px;
  background:#fff; border:1px solid var(--p-line);
}
.fs-rodape span{font-size:.62rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--p-muted)}
.fs-rodape b{font-size:.92rem; font-weight:900; color:var(--p-ink)}
.fs-rodape.destaque{background:var(--p-accent-soft); border-color:var(--p-accent-line)}
.fs-rodape.destaque b{color:var(--accent)}

.fs-centro{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px}
.fs-arquivo{
  background:#fff; border:1px solid var(--p-line); border-radius:9px;
  padding:11px 15px; text-align:center; box-shadow:0 6px 18px rgba(15,23,42,.12);
  font-size:.74rem; color:var(--p-strong);
}
.fs-arquivo b{display:block; font-weight:800; color:var(--p-ink); margin-top:2px}
.fs-arquivo small{display:block; font-size:.64rem; color:var(--p-soft); margin-top:2px}
.fs-seta{font-size:22px; color:var(--accent); animation:balanca 1.3s ease-in-out infinite}
.fs-alvo{
  width:80%; padding:16px 10px; border-radius:10px; text-align:center;
  border:2px dashed var(--p-accent-line); background:var(--p-accent-soft);
  font-size:.72rem; font-weight:800; color:var(--accent);
}
.fs-giro{
  width:46px; height:46px; border-radius:50%;
  border:4px solid rgba(15,23,42,.10); border-top-color:var(--accent-light);
  animation:gira .9s linear infinite;
}
.fs-status{display:flex; flex-direction:column; gap:6px; font-size:.72rem;
  color:var(--green); font-weight:700}

.palco-passos{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:14px}
.palco-passos span{
  font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:999px;
  background:var(--bg-input); color:var(--text-3); transition:all .25s ease;
}
.palco-passos span.feito{background:var(--green-dim); color:var(--green)}
.palco-passos span.agora{background:var(--accent); color:#fff}

.palco-repetir{
  margin-top:12px; padding:8px 16px; border-radius:999px; cursor:pointer;
  background:#fff; border:1px solid var(--border); color:var(--accent);
  font-size:.8rem; font-weight:700;
}
.palco.com-video{max-width:520px}
.palco video{width:100%; border-radius:var(--r-lg); background:#0f172a;
  box-shadow:0 18px 44px rgba(15,23,42,.18)}

.tres-frases{margin-bottom:22px}
.tres-frases p{font-size:.95rem; line-height:1.75; color:var(--text-2)}
.tres-frases p b{color:var(--text-1); font-weight:700}

/* =========================================================
   A PÁGINA DE VENDAS
   ========================================================= */
.vendas{padding:0 0 150px}
.faixa{max-width:760px; margin:0 auto; padding:44px 20px 0}
.faixa-titulo{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
  font-size:1.22rem; font-weight:800; letter-spacing:-.03em;
}
.faixa-titulo i{font-style:normal; font-size:22px}
.faixa-sub{color:var(--text-2); font-size:.88rem; line-height:1.6; margin-bottom:20px; max-width:54ch}
.faixa-sub b{color:var(--text-1); font-weight:700}
.faixa-texto{color:var(--text-2); font-size:.94rem; line-height:1.65; margin-top:18px}
.faixa-texto b{color:var(--text-1); font-weight:700}
.faixa-texto.centro{text-align:center; margin-inline:auto; max-width:46ch}

/* ---- para quem é ---- */
.segmentos{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:560px){.segmentos{grid-template-columns:1fr}}
.segmentos li{
  display:flex; align-items:center; gap:11px;
  background:#fff; border:1px solid var(--border-subtle); border-radius:var(--r-md);
  padding:14px 16px; font-size:.92rem; font-weight:600; color:var(--text-1);
  box-shadow:0 2px 10px rgba(15,23,42,.055);
}
.segmentos li i{font-style:normal; font-size:20px; flex-shrink:0}

.foto-publico{
  margin-top:20px; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:0 18px 44px rgba(15,23,42,.16);
}
.foto-publico img{width:100%; height:auto; display:block}

/* ---- o que ele faz ---- */
.checks{list-style:none; display:flex; flex-direction:column; gap:11px}
.checks li{
  position:relative; background:#fff; border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); padding:16px 18px 16px 46px;
  box-shadow:0 2px 12px rgba(15,23,42,.06);
}
/* o ✓ é desenhado, não digitado: assim ele fica alinhado com a primeira
   linha do texto em qualquer tamanho de fonte */
.checks li::before{
  content:'✓'; position:absolute; left:16px; top:16px;
  width:20px; height:20px; border-radius:50%;
  background:var(--green-dim); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:900;
}
.checks li b{display:block; font-size:.98rem; font-weight:800;
  letter-spacing:-.02em; margin-bottom:4px; color:var(--text-1)}
.checks li small{display:block; font-size:.85rem; line-height:1.55; color:var(--text-2)}
.checks li small b{display:inline; font-size:inherit; font-weight:800}

/* ---- o preço ---- */
#vnd-preco{padding-top:52px}
.oferta-caixa{
  background:linear-gradient(180deg,rgba(37,99,235,.16) 0%,#ffffff 42%);
  border:1.5px solid var(--border); border-radius:var(--r-xl);
  padding:32px 24px; text-align:center;
  box-shadow:0 18px 44px rgba(15,23,42,.08);
}
.selo{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px; border-radius:999px;
  background:#fff; border:1px solid var(--border);
  color:var(--accent); font-size:.7rem; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; margin-bottom:18px;
}
.oferta-caixa h2{font-size:clamp(1.4rem,5.4vw,1.95rem); font-weight:900;
  letter-spacing:-.04em; line-height:1.16; margin-bottom:12px}
.oferta-caixa .sub{color:var(--text-2); font-size:.95rem; line-height:1.6;
  max-width:42ch; margin:0 auto}
.oferta-nota{margin-top:16px; font-size:.78rem; color:var(--text-3); line-height:1.7}

.preco{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin:26px auto 22px; padding:22px 20px; max-width:340px;
  background:#fff; border:1.5px solid var(--border); border-radius:var(--r-lg);
  box-shadow:0 8px 26px rgba(37,99,235,.12);
}
.preco-rot{font-size:.72rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-3)}
.preco-num{
  display:flex; align-items:baseline; gap:2px;
  font-size:3.4rem; font-weight:900; letter-spacing:-.05em; color:var(--accent);
  line-height:1;
}
.preco-num i{font-style:normal; font-size:1.3rem; font-weight:800; margin-right:3px}
.preco-num small{font-size:1rem; font-weight:700; color:var(--text-2); letter-spacing:-.01em}
.preco-obs{font-size:.82rem; color:var(--text-2); font-weight:600; margin-top:4px}

.preco-titulo{font-size:.86rem; font-weight:800; color:var(--text-1);
  text-align:left; margin-bottom:10px; letter-spacing:-.01em}
.inclui{list-style:none; text-align:left; display:flex; flex-direction:column; gap:8px;
  margin-bottom:8px}
.inclui li{
  position:relative; padding-left:26px; font-size:.9rem;
  line-height:1.5; color:var(--text-1);
}
.inclui li::before{content:'✓'; position:absolute; left:0; top:0;
  color:var(--green); font-weight:900}
.inclui li em{font-style:normal; color:var(--text-3); font-size:.82rem}

/* ---- a garantia ---- */
#vnd-garantia{text-align:center}
.garantia-bloco{
  display:flex; align-items:center; gap:24px; text-align:left;
  background:#fff; border:2px solid rgba(5,150,105,.34); border-radius:var(--r-xl);
  padding:26px 24px; margin-bottom:24px;
  box-shadow:0 10px 30px rgba(5,150,105,.14);
}
.selo-img{width:132px; height:132px; flex-shrink:0}
.gb-chapeu{font-size:.86rem; font-weight:700; color:var(--text-2); margin-bottom:4px}
.garantia-bloco h2{font-size:1.5rem; font-weight:900; letter-spacing:-.03em; color:var(--green)}
.garantia-bloco .faixa-texto{margin-top:8px; font-size:.92rem}
@media (max-width:560px){
  .garantia-bloco{flex-direction:column; text-align:center; gap:14px; padding:24px 20px}
  .selo-img{width:118px; height:118px}
}

/* ---- dúvidas ---- */
.duvida{
  background:#fff; border:1px solid var(--border-subtle); border-radius:var(--r-lg);
  margin-bottom:10px; box-shadow:0 2px 10px rgba(15,23,42,.055); overflow:hidden;
}
.duvida summary{
  cursor:pointer; list-style:none; padding:17px 44px 17px 18px; position:relative;
  font-size:.98rem; font-weight:700; color:var(--text-1);
}
.duvida summary::-webkit-details-marker{display:none}
.duvida summary::after{
  content:'+'; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:1.3rem; font-weight:700; color:var(--accent); line-height:1;
}
.duvida[open] summary::after{content:'−'}
.duvida[open] summary{color:var(--accent)}
.duvida p{padding:0 18px 18px; font-size:.9rem; line-height:1.65; color:var(--text-2)}
.duvida p b{color:var(--text-1); font-weight:700}

/* ---- fechamento ---- */
#vnd-fecho{padding-top:52px}
.fecho{text-align:center}
.fecho h2{font-size:clamp(1.35rem,5.2vw,1.85rem); font-weight:900;
  letter-spacing:-.04em; line-height:1.2; max-width:22ch; margin:0 auto 8px}
.fecho-marca{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin:26px 0 22px; padding:20px; border-radius:var(--r-lg);
  background:var(--accent-dim); border:1px solid var(--border);
}
.fecho-marca .raio{font-size:30px; line-height:1;
  filter:drop-shadow(0 2px 8px rgba(37,99,235,.30))}
.fecho-marca b{font-size:1.15rem; font-weight:900; letter-spacing:-.03em; color:var(--accent)}
.fecho-marca small{font-size:.85rem; color:var(--text-2); font-weight:600}

/* a página de vendas centraliza os botões, que herdam max-width do .btn-grande */
.vendas .btn-grande{display:flex; margin:0 auto}

.barra-fixa{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:rgba(255,255,255,.96); backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--border-subtle);
  box-shadow:0 -8px 30px rgba(15,23,42,.10);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:none; align-items:center; gap:12px;
  transform:translateY(110%); transition:transform .35s cubic-bezier(.25,.46,.45,.94);
}
.barra-fixa.show{display:flex; transform:translateY(0)}
.barra-fixa .txt{flex:1; min-width:0; line-height:1.25}
.barra-fixa .txt b{display:block; font-size:.86rem; font-weight:800; color:var(--accent)}
.barra-fixa .txt small{font-size:.72rem; color:var(--text-3)}
.barra-fixa .btn-grande{width:auto; min-height:46px; padding:12px 20px;
  font-size:.9rem; flex-shrink:0; max-width:none; margin:0}

/* Quem pediu menos movimento não perde nada da página: só as animações
   decorativas param. A demonstração continua trocando de fase, mais devagar,
   porque é ela que carrega a informação. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---- painel de depuração (?debug=1) ---- */
#painel-debug{
  position:fixed; right:10px; bottom:10px; z-index:9999; width:290px; max-height:46vh;
  overflow:auto; background:rgba(15,23,42,.94); border:1px solid var(--accent-light);
  border-radius:12px; padding:10px 12px; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px; color:#bfdbfe; line-height:1.5; display:none;
}
#painel-debug b{color:#93c5fd; display:block; margin-bottom:6px; font-size:11px}
#painel-debug div{border-bottom:1px dotted rgba(255,255,255,.14); padding:3px 0}