/* ===== B2B Marketing Tech — base do design system ===== */
:root{
  --preto:#000000;
  --preto-2:#050505;
  --preto-3:#0a0a0a;
  --carvao:#111111;
  --fio:rgba(255,255,255,.09);
  --fio-forte:rgba(255,255,255,.16);
  --verde:#12E07A;
  --verde-2:#5CF0A8;
  --verde-3:#0BA85C;
  --texto:#EDEDED;
  --texto-2:#9A9A9A;
  --texto-3:#6A6A6A;
  --ok:#2ecc71;
  --erro:#ff4d4d;
  --wpp:#25D366;
  --fb:#1877F2;
  --ig:#E1306C;
  --r:14px;
  --r-g:22px;
  --sombra:0 24px 60px rgba(0,0,0,.75);
  --fonte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--preto);
  color:var(--texto);
  font-family:var(--fonte);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
/* fundo: malha de pontinhos + brilho verde subindo do rodapé */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px circle at 15% -10%, rgba(18,224,122,.09), transparent 55%),
    radial-gradient(700px circle at 95% 5%,   rgba(18,224,122,.05), transparent 55%),
    radial-gradient(1200px circle at 50% 112%, rgba(18,224,122,.16), transparent 60%);
}
/* malha de pontinhos, levemente esverdeada */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(120,255,190,.075) 1px, transparent 1px);
  background-size:26px 26px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.ico{width:20px;height:20px;flex:none}
.wrap{width:min(1280px,92vw);margin-inline:auto}

/* ===== botões ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:15px;letter-spacing:.01em;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s;
  background:transparent;white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-verde{background:var(--verde);color:#111;box-shadow:0 10px 30px rgba(18,224,122,.28)}
.btn-verde:hover{background:var(--verde-2);box-shadow:0 14px 40px rgba(18,224,122,.42);transform:translateY(-2px)}
.btn-linha{border-color:var(--fio-forte);color:var(--texto);background:rgba(255,255,255,.03)}
.btn-linha:hover{border-color:var(--verde);color:var(--verde);transform:translateY(-2px)}
.btn-bloco{width:100%}
.btn-g{padding:17px 34px;font-size:16px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* pulso do CTA */
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(18,224,122,.5), 0 10px 30px rgba(18,224,122,.25)}
  70%{box-shadow:0 0 0 18px rgba(18,224,122,0), 0 10px 30px rgba(18,224,122,.25)}
  100%{box-shadow:0 0 0 0 rgba(18,224,122,0), 0 10px 30px rgba(18,224,122,.25)}
}
.pulsa{animation:pulso 2.4s infinite}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes entra{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.js .aparece{opacity:0}
.js .aparece.on{animation:entra .7s cubic-bezier(.2,.7,.3,1) forwards}
/* quem prefere menos movimento (e leitores/headless) vê tudo direto */
@media (prefers-reduced-motion: reduce){
  .js .aparece{opacity:1}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ===== cartões / campos ===== */
.card{background:var(--preto-2);border:1px solid var(--fio);border-radius:var(--r-g)}
.tag{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  border:1px solid var(--fio-forte);background:rgba(18,224,122,.07);color:var(--verde);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2);margin-bottom:8px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:15px 16px;background:var(--preto-3);border:1px solid var(--fio);
  border-radius:var(--r);outline:none;transition:border-color .2s, box-shadow .2s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--verde);box-shadow:0 0 0 4px rgba(18,224,122,.13)
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3)}
.campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2312E07A' stroke-width='2' stroke-linecap='round'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.campo .erro-msg{color:var(--erro);font-size:12.5px;margin-top:6px;display:none}
.campo.tem-erro input,.campo.tem-erro select{border-color:var(--erro)}
.campo.tem-erro .erro-msg{display:block}
.linha-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.linha-2{grid-template-columns:1fr;gap:0}}

/* ===== modal ===== */
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex;animation:entra .3s ease}
.modal-fundo{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(7px)}
.modal-caixa{
  position:relative;width:min(440px,100%);background:var(--preto-2);
  border:1px solid var(--fio-forte);border-radius:var(--r-g);padding:34px 30px;box-shadow:var(--sombra);
  max-height:92vh;overflow:auto;
}
.modal-x{position:absolute;top:16px;right:16px;background:none;border:0;color:var(--texto-3);cursor:pointer;padding:6px;border-radius:8px}
.modal-x:hover{color:var(--verde)}

/* ===== avisos ===== */
.aviso{padding:13px 16px;border-radius:var(--r);font-size:14px;font-weight:600;display:none;margin-bottom:16px;
  border:1px solid var(--fio);gap:9px;align-items:center}
.aviso.on{display:flex}
.aviso.erro{background:rgba(255,77,77,.09);border-color:rgba(255,77,77,.4);color:#ff8f8f}
.aviso.ok{background:rgba(46,204,113,.09);border-color:rgba(46,204,113,.4);color:#7ee2a8}

/* spinner */
.spin{width:20px;height:20px;border:2.5px solid rgba(0,0,0,.25);border-top-color:#111;border-radius:50%;animation:girar .8s linear infinite}
.spin-claro{border-color:rgba(255,255,255,.18);border-top-color:var(--verde)}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#222;border-radius:99px;border:3px solid #000}
::-webkit-scrollbar-thumb:hover{background:var(--verde-3)}
::selection{background:var(--verde);color:#111}