@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/anton-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/martian-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fontes/roboto-condensed.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Vitrine do Ninja White: as mesmas cores e letras dos vídeos (_videos/remotion/src/ninja/kit.tsx). */
:root {
  --fundo: #0A0A0C;
  --cartao: #141418;
  --cartao2: #1B1B21;
  --borda: #2A2A31;
  --creme: #F2EFE9;
  --apagado: #8B8B95;
  --lamina: #FF2E4D;
  --amarelo: #F5B83D;
  --verde: #3DDC84;
  --fa: 'Anton', Impact, sans-serif;
  --ft: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --fm: 'Martian Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--creme);
  font: 400 18px/1.5 var(--ft);
  background-image:
    radial-gradient(70% 420px at 10% 0%, rgba(255,46,77,0.16), transparent 70%),
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  background-repeat: no-repeat, repeat, repeat;
}
a { color: var(--creme); }
img { max-width: 100%; display: block; }
code { font: 400 0.82em var(--fm); background: #202027; padding: 0.1em 0.35em; border-radius: 4px; }
.miolo { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* topo */
.topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca i { width: 34px; height: 34px; border-radius: 8px; background: var(--lamina); color: #fff; font-style: normal; font-weight: 700; font-size: 21px; display: grid; place-items: center; }
.marca b { font: 400 24px/1 var(--fa); letter-spacing: 0.04em; }
.marca small { display: block; font: 400 11px/1 var(--fm); color: var(--apagado); letter-spacing: 0.06em; margin-top: 4px; }
.lingua { font: 400 13px/1 var(--fm); color: var(--apagado); text-decoration: none; border: 1px solid var(--borda); border-radius: 99px; padding: 8px 12px; }
.lingua:hover { color: var(--creme); border-color: var(--apagado); }

/* rótulos e títulos */
.rotulo { font: 400 13px/1.2 var(--fm); letter-spacing: 0.1em; color: var(--lamina); text-transform: uppercase; margin: 0 0 12px; }
h1, h2 { font-family: var(--fa); font-weight: 400; text-transform: uppercase; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(40px, 10vw, 68px); }
h2 { font-size: clamp(28px, 6.5vw, 40px); margin-bottom: 18px; }
.sub { font-size: 20px; color: #CFCBC4; margin: 16px 0 0; max-width: 620px; }

/* herói da palavra */
.heroi { padding: 28px 0 8px; }
.palavra { display: inline-flex; align-items: center; gap: 10px; font: 400 13px/1 var(--fm); letter-spacing: 0.1em; color: var(--creme); background: var(--cartao); border: 1px solid var(--borda); border-radius: 99px; padding: 8px 14px 8px 8px; margin-bottom: 18px; }
.palavra span { background: var(--lamina); color: #fff; border-radius: 99px; padding: 5px 10px; }
.assinatura { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--apagado); font-size: 15px; }
.assinatura img { width: 44px; height: 44px; border-radius: 99px; }

/* blocos */
.bloco { margin: 40px 0; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; padding: 22px; }

/* laudo */
.laudo { border-color: rgba(245,184,61,0.45); }
.laudo.verde { border-color: rgba(61,220,132,0.45); }
.laudo.vermelho { border-color: rgba(255,46,77,0.6); }
.laudo-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.laudo-topo .rotulo { margin: 0; color: var(--apagado); }
.selo { font: 400 13px/1 var(--fm); letter-spacing: 0.04em; border-radius: 99px; padding: 8px 12px; color: #1a1305; background: var(--amarelo); }
.laudo.verde .selo { background: var(--verde); color: #04130a; }
.laudo.vermelho .selo { background: var(--lamina); color: #fff; }
.laudo ul { list-style: none; margin: 0; padding: 0; }
.laudo li { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--borda); font-size: 17px; line-height: 1.4; }
.laudo li:first-child { border-top: 0; }
.laudo li b { flex: 0 0 22px; font: 400 18px/1.3 var(--fa); text-align: center; }
.laudo li.sim b { color: var(--verde); }
.laudo li.nao b { color: var(--amarelo); }
.laudo-pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--apagado); }
.laudo-pe a { color: var(--creme); }

/* passos */
.passos { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.passos > li { position: relative; padding: 0 0 26px 56px; counter-increment: p; }
.passos > li::before { content: counter(p); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 10px; background: var(--lamina); color: #fff; font: 400 22px/38px var(--fa); text-align: center; }
.passos > li::after { content: ''; position: absolute; left: 18px; top: 42px; bottom: 4px; width: 2px; background: var(--borda); }
.passos > li:last-child::after { display: none; }
.passos h3 { font: 700 21px/1.2 var(--ft); margin: 4px 0 6px; }
.passos p { margin: 0 0 10px; color: #CFCBC4; }
.codigo { position: relative; background: #0F0F13; border: 1px solid var(--borda); border-radius: 12px; margin: 10px 0; overflow: hidden; }
.codigo-topo { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--borda); font: 400 12px/1 var(--fm); color: var(--apagado); }
.codigo pre { margin: 0; padding: 14px; overflow-x: auto; font: 400 13.5px/1.6 var(--fm); color: var(--creme); }
.copiar { font: 400 12px/1 var(--fm); color: var(--creme); background: #24242B; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.copiar:hover { border-color: var(--apagado); }
.copiar.feito { background: var(--verde); color: #04130a; border-color: var(--verde); }

/* jeito seguro */
.seguro { list-style: none; margin: 0; padding: 0; }
.seguro li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--borda); color: #CFCBC4; }
.seguro li:first-child { border-top: 0; }
.seguro li::before { content: '✓'; position: absolute; left: 0; top: 10px; font: 400 20px/1.3 var(--fa); color: var(--lamina); }
.seguro b { color: var(--creme); }

/* premium */
.premium { border-color: rgba(255,46,77,0.55); background: linear-gradient(160deg, rgba(255,46,77,0.12), var(--cartao) 55%); }
.premium p { color: #CFCBC4; margin: 0 0 18px; }
.form { display: grid; gap: 10px; }
.form input, .form textarea { width: 100%; font: 400 17px/1.4 var(--ft); color: var(--creme); background: #0F0F13; border: 1px solid var(--borda); border-radius: 10px; padding: 14px; }
.form textarea { min-height: 76px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--lamina); outline-offset: 0; border-color: transparent; }
.botao { font: 400 20px/1 var(--fa); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--lamina); border: 0; border-radius: 10px; padding: 16px 20px; cursor: pointer; }
.botao:hover { filter: brightness(1.08); }
.botao[disabled] { opacity: 0.6; cursor: wait; }
.letra-miuda { font-size: 13px; color: var(--apagado); margin: 4px 0 0; }
.letra-miuda a { color: var(--apagado); }
.pote { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { font-size: 16px; padding: 14px; border-radius: 10px; background: rgba(61,220,132,0.12); border: 1px solid rgba(61,220,132,0.5); }
.aviso.erro { background: rgba(255,46,77,0.12); border-color: rgba(255,46,77,0.5); }

/* home */
.casa { display: grid; gap: 8px; padding: 28px 0 0; align-items: end; }
.casa-foto { display: none; }
.busca { display: flex; gap: 8px; margin-top: 22px; }
.busca input { flex: 1; min-width: 0; font: 400 22px/1 var(--fa); letter-spacing: 0.05em; text-transform: uppercase; color: var(--creme); background: #0F0F13; border: 1px solid var(--borda); border-radius: 12px; padding: 16px; }
.busca input::placeholder { color: #55555E; }
.busca input:focus { outline: 2px solid var(--lamina); border-color: transparent; }
.busca-msg { min-height: 24px; margin: 10px 0 0; color: var(--amarelo); font-size: 16px; }
.grade { display: grid; gap: 12px; grid-template-columns: 1fr; }
.item { display: block; text-decoration: none; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; transition: border-color .15s; }
.item:hover { border-color: var(--lamina); }
.item b { display: block; font: 400 30px/1 var(--fa); letter-spacing: 0.03em; }
.item span { display: block; color: #CFCBC4; margin-top: 8px; }
.item small { display: block; font: 400 12px/1 var(--fm); color: var(--apagado); margin-top: 12px; }
.quem p { color: #CFCBC4; margin: 0 0 12px; }

/* rodapé */
.rodape { border-top: 1px solid var(--borda); margin-top: 56px; padding: 26px 0 40px; color: var(--apagado); font-size: 14px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.rodape a { color: var(--creme); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape p { margin: 6px 0; }

/* texto corrido (privacidade, 404) */
.texto h2 { margin-top: 30px; font-size: 26px; }
.texto p, .texto li { color: #CFCBC4; }

@media (min-width: 720px) {
  .grade { grid-template-columns: 1fr 1fr; }
  .casa { grid-template-columns: 1fr 240px; gap: 28px; }
  .casa-foto { display: block; }
  .casa-foto img { width: 240px; height: auto; filter: drop-shadow(0 20px 40px rgba(255,46,77,0.25)); }
  .cartao { padding: 28px; }
}

/* comparativo Grátis × Agente Ninja (× Clã, quando existir). No celular o rótulo da linha vai em cima das células;
   no computador vira uma tabela com o rótulo à esquerda (o .canto ocupa a 1ª coluna no topo e no pé). */
.planos { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; }
.canto { display: none; }
.plano-topo { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px 16px; }
.plano-topo b { font: 400 22px/1 var(--fa); letter-spacing: 0.04em; text-transform: uppercase; }
.plano-topo small { color: var(--apagado); font-size: 14px; line-height: 1.3; }
.preco { font: 400 36px/1 var(--fa); letter-spacing: 0.01em; }
.selo-rec { align-self: flex-start; font: 400 11px/1 var(--fm); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--lamina); border-radius: 99px; padding: 6px 9px; }
.plano-topo.agente, .cel.agente, .plano-pe.agente { background: rgba(255,46,77,0.09); }
.plano-topo.agente .preco { color: var(--creme); }
.linha-rotulo { grid-column: 1 / -1; font: 400 12px/1.2 var(--fm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); padding: 14px 14px 6px; border-top: 1px solid var(--borda); }
.cel { padding: 4px 14px 14px; font-size: 15px; line-height: 1.35; color: #CFCBC4; }
.cel.sim { color: var(--creme); }
.cel.sim::before { content: '✓ '; color: var(--verde); font-weight: 700; }
.cel.nada { color: #55555E; }
.plano-pe { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; border-top: 1px solid var(--borda); }
.plano-pe form { display: contents; }
.plano-pe .botao { width: 100%; font-size: 17px; line-height: 1.1; padding: 14px 10px; }
.plano-pe small { color: var(--apagado); font-size: 12.5px; line-height: 1.3; }
.botao.secundario { background: transparent; color: var(--creme); border: 1px solid var(--apagado); }
.botao.secundario:hover { border-color: var(--creme); filter: none; }
a.botao { display: inline-block; text-decoration: none; }
.comparar .aviso { margin-top: 12px; }

/* por que sai barato */
.motivos { display: grid; gap: 12px; }
.motivo { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; }
.motivo b { font: 400 22px/1.1 var(--fa); letter-spacing: 0.03em; text-transform: uppercase; }
.motivo p { margin: 8px 0 0; color: #CFCBC4; font-size: 16px; }

/* janelas (form do grátis e lista de espera) */
dialog.janela { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; color: var(--creme); background: var(--cartao); border: 1px solid var(--borda); border-radius: 16px; }
dialog.janela::backdrop { background: rgba(5,5,7,0.78); }
.janela-corpo { padding: 28px 22px 22px; }
.janela h2 { font-size: 30px; margin-bottom: 10px; }
.janela-corpo > p { color: #CFCBC4; margin: 0 0 16px; }
.fechar { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; font-size: 28px; line-height: 1; color: var(--apagado); background: transparent; border: 0; cursor: pointer; }
.fechar:hover { color: var(--creme); }
.janela .aviso a { color: var(--creme); }
.janela .aviso .botao { margin-top: 12px; }

/* depois do pagamento */
.obrigado .so { display: none; }
.obrigado[data-estado="conferindo"] .so.conferindo, .obrigado[data-estado="pendente"] .so.pendente,
.obrigado[data-estado="recusado"] .so.recusado, .obrigado[data-estado="pago"] .so.pago,
.obrigado[data-estado="recuperar"] .so.recuperar { display: block; }
.obrigado .so.conferindo h1::after { content: ''; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.3em; border: 4px solid var(--lamina); border-right-color: transparent; border-radius: 50%; animation: gira 0.9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.obrigado .botao { margin-top: 18px; }
.video-como { margin: 26px 0 0; }
.video-como figcaption { font-size: 15px; color: #CFCBC4; margin: 0 0 8px; }
.video-como video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
.como { padding-left: 22px; margin: 26px 0 0; }
.como li { margin: 10px 0; color: #CFCBC4; }
.como b { color: var(--creme); }

@media (min-width: 720px) {
  .planos { grid-template-columns: 190px repeat(var(--cols), minmax(0, 1fr)); }
  .canto { display: block; }
  .linha-rotulo { grid-column: auto; font: 700 16px/1.3 var(--ft); letter-spacing: 0; text-transform: none; color: var(--creme); padding: 14px 18px; }
  .cel { padding: 14px 18px; border-top: 1px solid var(--borda); }
  .plano-topo { padding: 22px 18px 18px; }
  .plano-pe { padding: 18px; }
  .motivos { grid-template-columns: 1fr 1fr; }
  .janela-corpo { padding: 34px 30px 28px; }
}