:root{
  --fundo:#080c1a;
  --fundo2:#0d1428;
  --cartao:#131c36;
  --cartao2:#18223f;
  --borda:#242f58;
  --borda2:#33406e;
  --texto:#eef1fa;
  --fraco:#9aa5c4;
  --marca:#5b8cff;
  --marca-esc:#2f5fe0;
  --verde:#2ed9a3;
  --verde-esc:#0d8f69;
  --vermelho:#ff7a7a;
  --amarelo:#ffcf6b;
  --zap:#25d366;
  --raio:16px;
  --raio-g:22px;
  --max:1120px;
  --sombra:0 18px 48px rgba(0,0,0,.42);
}
@media (prefers-color-scheme: light){
  :root{
    --fundo:#ffffff; --fundo2:#f4f7fe; --cartao:#ffffff; --cartao2:#f7f9ff;
    --borda:#e1e8f7; --borda2:#cdd8ef;
    --texto:#101627; --fraco:#58637f;
    --marca:#2a5cf0; --marca-esc:#1b43c0;
    --verde:#0ea67a; --verde-esc:#0b7f5d;
    --vermelho:#d2453f; --amarelo:#b57b00;
    --sombra:0 14px 36px rgba(17,34,80,.09);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fundo);color:var(--texto);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--marca);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.18;margin:0 0 .5em;letter-spacing:-.018em}
section{max-width:var(--max);margin:0 auto;padding:76px 20px}
.centro{text-align:center}
/* Duas classes utilitárias no lugar de `style="..."` inline.
   NÃO é preferência de estilo: a CSP desta vitrine é `style-src 'self'`, e
   atributo `style` é bloqueado por ela. Inline funcionaria na prévia em
   arquivo e sumiria no ar, onde o cabeçalho existe. */
.fraco{color:var(--fraco)}
.respiro{margin-top:34px}
.olho{
  display:inline-block;margin:0 0 10px;padding:5px 13px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:color-mix(in srgb,var(--marca) 16%,transparent);color:var(--marca);
}
h2.titulo{font-size:clamp(25px,3.7vw,37px)}
.sub{max-width:700px;margin:0 auto 30px;color:var(--fraco);font-size:clamp(16px,2.1vw,18.5px)}

/* ------------------------------------------------------------- topo ------ */
.topo{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid transparent;
  background:color-mix(in srgb,var(--fundo) 86%,transparent);
  backdrop-filter:saturate(160%) blur(10px);
}
.topo > *{max-width:var(--max)}
.topo-int{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;max-width:var(--max);margin:0 auto}
.marca{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;color:var(--texto)}
.marca:hover{text-decoration:none}
.marca-ico{
  width:28px;height:28px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(145deg,var(--marca),var(--verde));
}
.marca strong{color:var(--marca);font-weight:800}
.topo nav{display:flex;align-items:center;gap:20px;font-size:15px}
.topo nav a{color:var(--fraco)}
.topo .botao{padding:9px 17px;font-size:14.5px}
@media (max-width:860px){ .topo nav a.esconde{display:none} }

/* ------------------------------------------------------------ botoes ----- */
.botao{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  background:var(--marca);color:#fff;font-weight:650;white-space:nowrap;
  transition:transform .12s ease,filter .12s ease;
}
.botao:hover{text-decoration:none;filter:brightness(1.09);transform:translateY(-1px)}
.botao:active{transform:translateY(0)}
.botao.grande{padding:16px 30px;font-size:17.5px}
.botao.verde{background:var(--verde);color:#04241a}
.botao.vazio{background:transparent;color:var(--texto);border-color:var(--borda2)}
.botao.secundario{background:transparent;color:var(--marca);border-color:var(--marca)}
@media (prefers-reduced-motion:reduce){ .botao{transition:none} .botao:hover{transform:none} }

/* ------------------------------------------------------------- heroi ----- */
.heroi{
  position:relative;overflow:hidden;max-width:none;padding:64px 20px 56px;
  background:
    radial-gradient(1100px 520px at 12% -10%, color-mix(in srgb,var(--marca) 26%,transparent), transparent 62%),
    radial-gradient(900px 480px at 92% 6%, color-mix(in srgb,var(--verde) 17%,transparent), transparent 60%),
    var(--fundo);
}
.heroi-int{
  display:grid;gap:44px;align-items:center;max-width:var(--max);margin:0 auto;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
.heroi h1{font-size:clamp(32px,5.1vw,54px)}
.heroi h1 em{font-style:normal;color:var(--verde)}
.heroi .sub{margin:0 0 26px;max-width:560px;font-size:clamp(16.5px,2.2vw,19.5px)}
.heroi .acoes{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.confianca{display:flex;gap:18px;flex-wrap:wrap;margin:0;color:var(--fraco);font-size:14px}
.confianca span{display:flex;align-items:center;gap:7px}
.tique{color:var(--verde);font-weight:800}
.heroi.estreito{padding:84px 20px;text-align:center}
.heroi.estreito .sub{margin:0 auto 26px}
@media (max-width:900px){
  .heroi-int{grid-template-columns:1fr;gap:34px}
  .heroi .sub{max-width:none}
}

/* -------------------------------------------------- bolha do WhatsApp ---- */
.zap{
  border-radius:var(--raio-g);padding:16px;box-shadow:var(--sombra);
  background:var(--cartao);border:1px solid var(--borda);
}
.zap-topo{
  display:flex;align-items:center;gap:10px;padding:0 4px 13px;
  border-bottom:1px solid var(--borda);margin-bottom:14px;
}
.zap-ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(145deg,var(--zap),#0f9b4e)}
.zap-nome{font-weight:650;font-size:15px}
.zap-sub{color:var(--fraco);font-size:12.5px}
.bolha{
  position:relative;border-radius:14px 14px 14px 4px;padding:13px 15px;
  background:color-mix(in srgb,var(--zap) 14%,var(--cartao2));
  border:1px solid color-mix(in srgb,var(--zap) 32%,transparent);
  font-size:14.6px;line-height:1.58;
}
.bolha + .bolha{margin-top:9px}
.bolha b{color:var(--texto)}
.bolha .linha{display:block}
.bolha .hora{display:block;margin-top:7px;color:var(--fraco);font-size:11.5px;text-align:right}
.bolha .urgente{color:var(--amarelo);font-weight:700}
.exemplo{
  margin:11px 4px 0;color:var(--fraco);font-size:12.5px;text-align:center;
}

/* ---------------------------------------------------------- numeros ------ */
.numeros{max-width:none;background:var(--fundo2);border-top:1px solid var(--borda);
  border-bottom:1px solid var(--borda);padding:34px 20px}
.numeros-int{display:grid;gap:18px;max-width:var(--max);margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));text-align:center}
.numeros .n{font-size:clamp(25px,3.6vw,34px);font-weight:800;color:var(--marca);line-height:1.1}
.numeros .n.verde{color:var(--verde)}
.numeros .r{color:var(--fraco);font-size:14px;margin:4px 0 0}
.medido{max-width:var(--max);margin:20px auto 0;color:var(--fraco);
  font-size:12.5px;text-align:center}

/* -------------------------------------------------------- antes/depois -- */
.confronto{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-top:34px}
.lado{border:1px solid var(--borda);border-radius:var(--raio);padding:24px;background:var(--cartao)}
.lado h3{display:flex;align-items:center;gap:9px;font-size:17px;margin-bottom:14px}
.lado ul{margin:0;padding-left:0;list-style:none;color:var(--fraco);font-size:15.2px}
.lado li{display:flex;gap:10px;margin:11px 0}
.lado li::before{flex:0 0 auto;font-weight:800;line-height:1.5}
.ruim{border-color:color-mix(in srgb,var(--vermelho) 34%,var(--borda))}
.ruim h3{color:var(--vermelho)}
.ruim li::before{content:"✕";color:var(--vermelho)}
.bom{border-color:color-mix(in srgb,var(--verde) 40%,var(--borda));
  background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 7%,var(--cartao)),var(--cartao))}
.bom h3{color:var(--verde)}
.bom li::before{content:"✓";color:var(--verde)}

/* ------------------------------------------------------------- como ----- */
.como{max-width:none;background:var(--fundo2)}
.como-int{max-width:var(--max);margin:0 auto}
.passos{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));margin:34px 0 0}
.passo{position:relative;background:var(--cartao);border:1px solid var(--borda);
  border-radius:var(--raio);padding:22px}
.passo-n{
  display:grid;place-items:center;width:32px;height:32px;margin-bottom:13px;
  border-radius:10px;font-weight:800;font-size:15px;
  background:color-mix(in srgb,var(--marca) 18%,transparent);color:var(--marca);
}
.passo h3{font-size:16.5px;margin-bottom:7px}
.passo p{margin:0;color:var(--fraco);font-size:14.8px}

/* ---------------------------------------------------- cartao do edital -- */
.leitura{max-width:none;background:
  radial-gradient(760px 420px at 50% -10%, color-mix(in srgb,var(--marca) 13%,transparent), transparent 62%),
  var(--fundo)}
.leitura-int{max-width:900px;margin:0 auto}
.edital{
  background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio-g);
  overflow:hidden;box-shadow:var(--sombra);margin-top:30px;
}
.edital-topo{padding:20px 24px;border-bottom:1px solid var(--borda);
  background:linear-gradient(180deg,var(--cartao2),var(--cartao))}
.edital-topo h3{margin:0 0 5px;font-size:18.5px}
.edital-meta{display:flex;gap:7px 16px;flex-wrap:wrap;color:var(--fraco);font-size:13.5px}
.selo-ia{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:11px;
  padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  background:color-mix(in srgb,var(--verde) 16%,transparent);color:var(--verde);
}
.campos{display:grid;gap:0;grid-template-columns:1fr}
.campo{display:grid;gap:4px 18px;grid-template-columns:200px 1fr;
  padding:15px 24px;border-bottom:1px solid var(--borda)}
.campo:last-child{border-bottom:0}
.campo dt{color:var(--fraco);font-size:13.6px;font-weight:600}
.campo dd{margin:0;font-size:15.2px}
.campo.alerta{background:color-mix(in srgb,var(--amarelo) 7%,transparent)}
.campo.alerta dt{color:var(--amarelo)}
.cita{
  display:block;margin:8px 0 0;padding:10px 13px;border-left:3px solid var(--borda2);
  border-radius:0 9px 9px 0;background:var(--cartao2);
  color:var(--fraco);font-size:13.4px;font-style:italic;
}
.pilulas{display:flex;gap:7px;flex-wrap:wrap;margin:6px 0 0;padding:0;list-style:none}
.pilulas li{padding:4px 11px;border-radius:999px;font-size:13px;
  background:var(--cartao2);border:1px solid var(--borda);color:var(--fraco)}
.faltou{padding:15px 24px;background:color-mix(in srgb,var(--vermelho) 7%,transparent);
  border-top:1px solid var(--borda)}
.faltou strong{color:var(--vermelho)}
.faltou p{margin:0;color:var(--fraco);font-size:14px}
.porque{margin:26px 0 0;padding:20px 22px;border:1px solid var(--borda);
  border-radius:var(--raio);background:var(--cartao)}
.porque h3{font-size:16.5px}
.porque ul{margin:0;padding-left:20px;color:var(--fraco);font-size:15px}
.porque li{margin:10px 0}
.porque strong{color:var(--texto)}

/* ----------------------------------------------------------- precos ----- */
.abas{display:flex;justify-content:center;gap:5px;margin:0 auto 28px;padding:5px;
  border:1px solid var(--borda);border-radius:999px;width:max-content;max-width:100%;flex-wrap:wrap}
.aba{padding:10px 17px;border-radius:999px;color:var(--fraco);font-size:15px;white-space:nowrap}
.aba.ativa{background:var(--marca);color:#fff}
.aba.ativa:hover{text-decoration:none}
.off{margin-left:7px;font-size:11.5px;font-weight:800;color:var(--verde)}
.aba.ativa .off{color:#e2fff4}
.planos{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:start}
.plano{position:relative;background:var(--cartao);border:1px solid var(--borda);
  border-radius:var(--raio-g);padding:26px;display:flex;flex-direction:column}
.plano.destaque{border-color:var(--marca);box-shadow:0 0 0 1px var(--marca),var(--sombra);
  background:linear-gradient(180deg,color-mix(in srgb,var(--marca) 8%,var(--cartao)),var(--cartao))}
.fita{position:absolute;top:-13px;left:26px;margin:0;padding:4px 13px;border-radius:999px;
  background:var(--marca);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase}
.plano h3{margin:0;font-size:22px}
.tagline{margin:4px 0 0;color:var(--fraco);font-size:14px;min-height:2.7em}
.valor{display:flex;align-items:baseline;gap:5px;margin:14px 0 0}
.num{font-size:37px;font-weight:800;letter-spacing:-.03em}
.un{color:var(--fraco);font-size:15px}
.porMes{margin:3px 0 0;color:var(--fraco);font-size:13.4px;min-height:2.7em}
.selo{margin:14px 0 16px;padding:8px 12px;border-radius:11px;font-size:13.6px;font-weight:650;
  background:color-mix(in srgb,var(--verde) 14%,transparent);color:var(--verde)}
.selo.apagado{background:transparent;color:var(--fraco);font-weight:400;padding-left:0}
.plano ul{margin:18px 0 0;padding-left:0;list-style:none;color:var(--fraco);font-size:15px}
.plano li{display:flex;gap:9px;margin:9px 0}
.plano li::before{content:"✓";flex:0 0 auto;color:var(--verde);font-weight:800}
.teste{margin:16px 0 0;color:var(--verde);font-size:13.4px;font-weight:650}
.nota{max-width:700px;margin:28px auto 0;color:var(--fraco);font-size:14px;text-align:center}

/* ------------------------------------------------------------ lista ----- */
.lista{max-width:none;background:
  radial-gradient(900px 420px at 50% 110%, color-mix(in srgb,var(--verde) 14%,transparent), transparent 62%),
  var(--fundo2)}
.lista-int{max-width:620px;margin:0 auto}
.lista h2{text-align:center}
.lista .sub{text-align:center}
form{display:flex;flex-direction:column;gap:15px;background:var(--cartao);
  border:1px solid var(--borda);border-radius:var(--raio-g);padding:26px;box-shadow:var(--sombra)}
label{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:650}
.opc{font-weight:400;color:var(--fraco)}
input,select{
  /* 17px de propósito: abaixo de 16px o iOS dá zoom sozinho ao focar o campo. */
  font:17px/1.4 inherit;padding:13px 14px;border-radius:11px;
  border:1px solid var(--borda2);background:var(--fundo);color:var(--texto);
}
input:focus,select:focus{outline:2px solid var(--marca);outline-offset:1px;border-color:var(--marca)}
button{font:800 17.5px/1 inherit;padding:17px 22px;border:0;border-radius:999px;
  background:var(--verde);color:#04241a;cursor:pointer;transition:filter .12s ease}
button:hover{filter:brightness(1.08)}
.lgpd{margin:0;color:var(--fraco);font-size:12.8px}
.erro{margin:0 auto 16px;padding:12px 15px;border-radius:var(--raio);
  border:1px solid color-mix(in srgb,var(--vermelho) 52%,transparent);
  background:color-mix(in srgb,var(--vermelho) 12%,transparent);font-size:15px}
/* O campo-armadilha. Fora da tela, não `display:none`: alguns robôs ignoram
   campo escondido por display, e este precisa parecer real para eles. */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* -------------------------------------------------------------- faq ----- */
.faq dl{max-width:780px;margin:30px auto 0}
.faq dt{margin:24px 0 7px;font-weight:650;font-size:17.5px}
.faq dd{margin:0;color:var(--fraco)}

/* ------------------------------------------------------- texto legal ---- */
.texto{max-width:780px}
.texto h1{font-size:clamp(27px,4vw,39px)}
.texto h2{margin-top:34px;font-size:19px;color:var(--marca)}
.texto p,.texto li{color:var(--fraco)}
.texto strong{color:var(--texto)}
.rascunho{padding:12px 15px;border-radius:var(--raio);
  border:1px solid color-mix(in srgb,var(--amarelo) 45%,transparent);
  background:color-mix(in srgb,var(--amarelo) 10%,transparent);
  color:var(--texto);font-size:14.5px}

/* --------------------------------------------------------------- pe ----- */
.pe{max-width:var(--max);margin:0 auto;padding:44px 20px 60px;
  border-top:1px solid var(--borda);color:var(--fraco);font-size:14px}
.pe p{margin:7px 0}
.pe .links{display:flex;gap:9px;flex-wrap:wrap}
.pe .fonte{max-width:660px;font-size:12.8px}

@media (max-width:620px){
  section{padding:52px 18px}
  .campo{grid-template-columns:1fr;gap:3px}
  .campo dt{font-size:12.8px;text-transform:uppercase;letter-spacing:.04em}
  .tagline,.porMes{min-height:0}
  .topo{padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }