/* ═══════════════ o site público ═══════════════
   Escuro fixo, e não seguindo o tema do visitante: é peça de venda, não painel.
   Tokens iguais aos do painel (public/painel/painel.css) para as duas metades do
   produto não parecerem coisas de empresas diferentes. */
:root {
  --bg: #08080a; --bg2: #0a0a0c; --card: #0d0d10; --tile: #141418;
  --line: #1e1e24; --line2: #1a1a20; --line3: #2e2e36; --line4: #454550;
  --t1: #f1f1f5; --t2: #c4c4cc; --t3: #a8a8b2; --t4: #8e8e97; --t5: #5c5c66;
  --ok: #9fd4a8; --ok-fg: #08120c;
  --ok-weak: rgba(159, 212, 168, .1); --ok-line: rgba(159, 212, 168, .26);
  --warn: #f5b544; --warn-weak: rgba(245, 181, 68, .08); --warn-line: rgba(245, 181, 68, .24);
}
* { box-sizing: border-box }
body {
  margin: 0; background: var(--bg); color: var(--t1);
  font-family: 'Geist', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: var(--t1); text-decoration: none }
a:hover { color: #fff }
svg, img { display: block }
.mono { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace }

.faixa { max-width: 1180px; margin: 0 auto; padding: 64px 40px }
.linha { border-top: 1px solid var(--line) }
.fundo2 { background: var(--bg2) }
.rot { font-size: 10.5px; font-weight: 600; letter-spacing: .11em; color: var(--t4) }
h1 { font-size: 52px; font-weight: 700; letter-spacing: -.04em; line-height: 1.03; margin: 20px 0 0 }
h2 { font-size: 31px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; margin: 14px 0 0 }
.lead { font-size: 15.5px; color: var(--t3); line-height: 1.65; margin: 13px 0 0; max-width: 620px }
.nota { font-size: 12.5px; color: var(--t4); line-height: 1.65 }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px }

.cta {
  background: var(--ok); border: 0; border-radius: 9px; padding: 15px 26px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ok-fg);
  cursor: pointer; transition: filter .14s; white-space: nowrap; display: inline-block;
}
.cta:hover { filter: brightness(1.08); color: var(--ok-fg) }
.cta2 {
  background: transparent; border: 1px solid var(--line3); border-radius: 9px;
  padding: 14px 22px; font: inherit; font-size: 14px; font-weight: 600; color: var(--t2);
  cursor: pointer; transition: .14s; white-space: nowrap; display: inline-block;
}
.cta2:hover { background: var(--tile); border-color: var(--line4); color: var(--t1) }

.topo { border-bottom: 1px solid var(--line) }
.topo .dentro {
  max-width: 1180px; margin: 0 auto; padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.marca { display: flex; align-items: center; gap: 11px }
/* A caixinha da marca é SEMPRE branca, nos dois temas.
   O azul do símbolo é #0d1427: sobre o fundo escuro do painel ele praticamente
   some, e a caixa que invertia com o tema fazia justamente isso no tema claro.
   Branco fixo mantém a marca idêntica em qualquer fundo — que é o ponto de ter
   uma marca. */
.marca .q {
  flex: none; width: 30px; height: 30px; border-radius: 8px; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden;
}
.marca .q img { display: block; width: 80%; height: auto }
.marca span { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em }
.menu { display: flex; align-items: center; gap: 28px; font-size: 13.5px; color: var(--t3) }
.menu .risco { width: 1px; height: 18px; background: var(--line) }

.pe { border-top: 1px solid var(--line) }
.pe .dentro {
  max-width: 1180px; margin: 0 auto; padding: 26px 40px; display: flex;
  align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.pe a, .pe span { font-size: 12.5px; color: var(--t4) }
.pe .links { display: flex; gap: 22px }

.selo-ok {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  color: var(--ok); background: var(--ok-weak); border: 1px solid var(--ok-line);
  border-radius: 99px; padding: 6px 13px;
}
.selo-ok .pt { width: 5px; height: 5px; border-radius: 50%; background: var(--ok) }
.aviso-cx {
  display: flex; align-items: flex-start; gap: 11px; border-radius: 12px;
  padding: 15px 17px; font-size: 12.5px; color: var(--t2); line-height: 1.65;
}
.aviso-cx.amarelo { background: var(--warn-weak); border: 1px solid var(--warn-line) }
.aviso-cx.verde { background: var(--ok-weak); border: 1px solid var(--ok-line) }
.aviso-cx.neutro { background: #101015; border: 1px solid var(--line) }
.aviso-cx svg { flex: none; margin-top: 2px }
.aviso-cx b { color: var(--t1); font-weight: 600 }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }

.item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; font-size: 13.5px; line-height: 1.55 }
.item + .item { border-top: 1px solid var(--line2) }
.item .ok, .item .nao {
  flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid;
  place-items: center; margin-top: 1px;
}
.item .ok { background: var(--ok); color: var(--ok-fg) }
.item .nao { border: 1px solid var(--line3); color: var(--t5); font-size: 12px; line-height: 1 }

.chip {
  font-size: 13px; font-weight: 500; border-radius: 99px; padding: 8px 17px; cursor: pointer;
  transition: .14s; white-space: nowrap; background: transparent; color: var(--t3);
  border: 1px solid var(--line3); font-family: inherit;
}
.chip:hover { border-color: var(--line4); color: var(--t1) }
.chip.on { background: var(--t1); color: var(--bg); border-color: var(--t1); font-weight: 600 }
.chip.quadrado { border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 600; background: var(--tile); border: 0 }
.chip.quadrado.on { background: var(--t1); color: var(--bg) }

/* Item de grid nasce com min-width:auto, o que quer dizer "nunca menor que o meu
   conteúdo". A prévia do formulário tem 390px de conteúdo mínimo, então numa tela
   de 360px ela empurrava a PÁGINA INTEIRA para 665px de largura — e tudo ficava
   torto e rolando para o lado. Uma linha, e a coluna volta a poder encolher. */
.duas > *, .tres > *, .par > *, .faixa > * { min-width: 0 }

@media (max-width: 980px) {
  .faixa { padding: 44px 20px }
  .duas, .tres, .par { grid-template-columns: 1fr; gap: 26px }
  h1 { font-size: 36px }
  h2 { font-size: 25px }
  .topo .dentro { padding: 14px 20px; flex-wrap: wrap }
  .menu { gap: 16px; font-size: 13px }
  .menu .esconde-mobile { display: none }
  #topo-hero {
    grid-template-columns: 1fr !important; gap: 34px !important;
    padding-top: 40px !important; padding-bottom: 48px !important;
  }
}

/* ── a prévia no celular ──
   Ela é a peça mais larga da página e a única que não podia encolher. Aqui ela
   aperta: a foto menor, os respiros menores, o domínio com reticências. O que ela
   mostra continua sendo o formulário de verdade — só cabendo na tela. */
@media (max-width: 760px) {
  .esconde-mobile { display: none }
}

/* A tabela de exemplo do painel tem as medidas em estilo inline, e por isso o
   !important: a coluna do número do pedido reservava 110px fixos e sobrava quase
   nada para o nome do cliente, que é o que interessa ali. */
@media (max-width: 600px) {
  #painel .card > div { gap: 10px !important; padding-left: 14px !important; padding-right: 14px !important }
  #painel .card > div > span:first-child { width: 74px !important }
  #painel .card > div > span:last-child { width: 78px !important }
}

@media (max-width: 600px) {
  h1 { font-size: 30px }
  h2 { font-size: 22px }
  .faixa { padding: 38px 16px }
  .moldura { padding: 10px; border-radius: 14px }
  .moldura-topo { padding: 2px 4px 10px; font-size: 10px; gap: 8px }
  .moldura-topo > span:first-child, .moldura-topo .mono {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nfp .hd { padding: 14px 15px; font-size: 13.5px }
  .nfp .bd { padding: 15px 15px 18px }
  .nfp .prod { gap: 11px }
  .nfp .prod .fo { width: 62px; height: 62px }
  .nfp .prod .t { font-size: 15px }
  .nfp .prod .pr b { font-size: 17px }
  .nfp .up .foto { width: 150px; height: 150px }
  /* Preço com desconto ao lado do riscado não cabe lado a lado em 320px. */
  .nfp .prod .pr, .nfp .up .pr { flex-wrap: wrap; row-gap: 2px }
}

/* ═══════════════ a prévia do formulário ═══════════════
   Copia o CSS real do public/nf.js: mesmas medidas, mesmas cores, mesmos textos.
   Uma aproximação bonita aqui seria propaganda enganosa — quem assina espera
   receber isto. */
.moldura {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 14px;
}
.moldura-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 6px 12px; font-size: 11px; color: var(--t4);
}
.brilho {
  position: absolute; inset: -14px 20px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(159, 212, 168, .09), transparent 72%);
}
.nfp { background: #fff; border-radius: 6px; overflow: hidden; color: #18181b }
.nfp * { box-sizing: border-box }
.nfp .hd {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px;
  border-bottom: 1px solid #f1f1f3; font-size: 15px; font-weight: 700;
}
.nfp .bd { padding: 20px 22px 24px }
.nfp .prod { display: flex; align-items: center; gap: 14px }
.nfp .prod .fo { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; flex: none; background: #f4f4f5 }
.nfp .prod .t { font-size: 17px; font-weight: 700 }
.nfp .prod .v { font-size: 13.5px; color: #71717a; margin-top: 2px }
.nfp .prod .pr { display: flex; align-items: baseline; gap: 9px; margin-top: 6px }
.nfp .prod .pr b { font-size: 20px; font-weight: 700 }
.nfp .prod .pr s { font-size: 14px; color: #a1a1aa; font-weight: 400 }
.nfp .rotv { font-size: 13.5px; color: #71717a; margin: 18px 0 8px }
.nfp .cols { display: flex; gap: 8px; flex-wrap: wrap }
.nfp .col {
  padding: 11px 20px; border-radius: 8px; font-size: 15.5px; background: #fff;
  color: #18181b; border: 1px solid #d4d4d8;
}
.nfp .col.on { background: #18181b; color: #fff; border-color: #18181b; font-weight: 600 }
.nfp .tot { background: #f7f7f8; border-radius: 8px; padding: 18px 20px; margin-top: 18px }
.nfp .tot .l { display: flex; justify-content: space-between; font-size: 16px; color: #3f3f46 }
.nfp .tot .l2 { margin-top: 10px; padding-bottom: 14px; border-bottom: 1px solid #e4e4e7 }
.nfp .tot .l3 { margin-top: 14px; font-size: 19px; font-weight: 700; color: #18181b }
.nfp .sec { text-align: center; font-size: 19px; font-weight: 600; margin: 26px 0 18px }
.nfp .campos { display: flex; flex-direction: column; gap: 16px }
.nfp .f label { display: block; font-size: 15px; margin-bottom: 7px }
.nfp .f label i { color: #dc2626; font-style: normal }
.nfp .f .caixa {
  border: 1px solid #d4d4d8; border-radius: 8px; padding: 13px 14px;
  font-size: 15px; color: #a1a1aa; background: #fff;
}
.nfp .meia { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.nfp .btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 20px; padding: 18px 24px; border: 0; border-radius: 999px;
  background: #16a34a; color: #fff; font: inherit; font-size: 18px; font-weight: 700;
  line-height: 1.25;
}
.nfp .btn small { display: block; font-size: 13px; font-weight: 500; opacity: .9 }

/* a tela de upsell, também igual à real */
.nfp .up { padding: 26px 22px 28px; text-align: center }
.nfp .up .selo {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 99px; padding: 6px 13px;
}
.nfp .up h3 { margin: 16px 0 6px; font-size: 21px; font-weight: 700; line-height: 1.25 }
.nfp .up p { margin: 0; color: #52525b; font-size: 14.5px; line-height: 1.55 }
.nfp .up .foto { width: 220px; height: 220px; margin: 18px auto 0; border-radius: 10px; overflow: hidden; background: #f4f4f5 }
.nfp .up .foto img { width: 100%; height: 100%; object-fit: cover }
.nfp .up .pr { margin-top: 14px; font-size: 22px; font-weight: 700; display: flex; align-items: baseline; justify-content: center; gap: 9px }
.nfp .up .pr s { font-size: 15px; font-weight: 400; color: #a1a1aa }
.nfp .up .cols { justify-content: center; margin-top: 16px }
.nfp .up .aviso { margin-top: 14px; font-size: 12.5px; color: #71717a; line-height: 1.5 }
.nfp .up .nao {
  display: block; width: 100%; margin-top: 12px; background: none; border: 0;
  color: #71717a; font-size: 14.5px; font-family: inherit; text-decoration: underline; padding: 8px;
}

/* ═══════════════ páginas de texto ═══════════════ */
.doc { max-width: 980px; margin: 0 auto; padding: 48px 40px 80px; display: grid; grid-template-columns: 1fr 216px; gap: 48px; align-items: start }
.doc h1 { font-size: 33px; letter-spacing: -.035em; line-height: 1.1; margin: 13px 0 0 }
.doc .par { font-size: 14.5px; color: var(--t3); line-height: 1.75; margin: 0 0 12px }
.doc .par:last-child { margin-bottom: 0 }
.sec-doc { padding: 22px 0; border-top: 1px solid var(--line2) }
.sec-doc:first-of-type { padding-top: 0; border-top: 0 }
.sec-doc .n { flex: none; font-size: 12px; color: var(--t5); margin-top: 3px }
.sec-doc h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 11px }
.lado { position: sticky; top: 32px }
.lado a { display: block; font-size: 12.5px; line-height: 1.5; color: var(--t3); margin-bottom: 9px }
.lado a:hover { color: var(--t1) }
.tab-dados { background: var(--card); border: 1px solid var(--line); border-radius: 12px }
.tab-dados .l { display: flex; align-items: baseline; gap: 14px; padding: 12px 15px; border-top: 1px solid var(--line2) }
.tab-dados .l:first-child { border-top: 0 }
.tab-dados .rot-l { flex: none; width: 132px; font-size: 12.5px; color: var(--t4) }
.tab-dados .val { flex: 1; min-width: 0; font-size: 12.5px; color: var(--t2); word-break: break-word }
@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; padding: 32px 20px 60px; gap: 32px }
  .lado { position: static }
}

.reg.com-borda { border-left: 1px solid var(--line2) }
@media (max-width: 760px) { #regras { grid-template-columns: 1fr 1fr !important } .reg.com-borda { border-left: 0 } }

/* O hero mostra o formulário REAL, que é alto. Cortar com esmaecimento mantém a
   verdade (é o widget, não um desenho) sem empurrar o texto do hero para o fim da
   dobra. O upsell não é cortado: ali a tela inteira cabe e é o argumento. */
.recorte { position: relative; max-height: 560px; overflow: hidden }
.recorte::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  /* Esmaece para BRANCO: o que está por baixo é o formulário, que é branco.
     Esmaecer para a cor do cartão escuro deixava uma faixa cinza suja no meio. */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 78%);
  pointer-events: none;
}
.recorte-pe {
  position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  font-size: 11.5px; color: #a1a1aa; z-index: 1;
}
@media (max-width: 980px) { .recorte { max-height: 420px } }