/* ===========================================================================
   NORMALIDAD WIDE — fonte oficial da marca (manual v1.1, item 7)
   Arquivos em /fonts/, subset latino, ~33 KB cada.
   =========================================================================== */
@font-face{
  font-family:'Normalidad Wide';
  src:url('../fonts/Normalidad_Wide_Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Normalidad Wide';
  src:url('../fonts/Normalidad_Wide_Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ===========================================================================
   NORMALIDAD TEXT — corpo de texto (manual v1.1, item 7.3)
   =========================================================================== */
@font-face{
  font-family:'Normalidad';
  src:url('../fonts/Normalidad_Text_Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Normalidad';
  src:url('../fonts/Normalidad_Text_Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  /* paleta oficial — manual de identidade visual v1.1, item 6.2 */
  --eerie-black:#1a1a1a;
  --neon-celery:#00ff00;
  --urban-grafitte:#808080;

  /* derivadas de interface */
  --branco:#FFFFFF;
  --superficie:#F5F5F3;
  --linha:#E4E4E0;
  --linha-forte:#CFCFC9;
  --texto-suave:#6E6E6A;
  --erro:#C4321C;

  --display:'Normalidad Wide',system-ui,sans-serif;
  --body:'Normalidad',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--branco);
  color:var(--eerie-black);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:0 20px 90px;
}

.wrap{max-width:640px;margin:0 auto}

/* ---------- cabecalho ---------- */
header{padding:52px 0 42px}

.logo{
  width:150px;
  height:auto;
  display:block;
  color:var(--eerie-black);
}
.logo path{fill:currentColor}

h1{
  font-family:var(--display);
  font-size:clamp(29px,6vw,42px);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.08;
  margin-top:40px;
}

.sub{
  color:var(--texto-suave);
  margin-top:15px;
  max-width:46ch;
}

.barra{
  height:4px;
  width:56px;
  background:var(--neon-celery);
  margin-top:26px;
}

/* ---------- etapa cnpj ---------- */
.etapa{margin-top:46px}

.eyebrow{
  font-family:var(--display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--eerie-black);
  display:block;
  margin-bottom:13px;
}

.cnpj-box{position:relative}

#cnpj{
  width:100%;
  font-family:var(--display);
  font-size:clamp(20px,4.6vw,34px);
  font-weight:500;
  letter-spacing:-.02em;
  padding:21px 58px 21px 22px;
  border:2px solid var(--eerie-black);
  border-radius:0;
  background:var(--branco);
  color:var(--eerie-black);
  outline:none;
  transition:box-shadow .16s;
}
#cnpj::placeholder{color:#C2C2BC}
#cnpj:focus{box-shadow:0 0 0 4px rgba(0,255,0,.35)}
#cnpj.invalido{border-color:var(--erro);box-shadow:0 0 0 4px rgba(196,50,28,.12)}

.spinner{
  position:absolute;
  right:22px;
  top:50%;
  margin-top:-9px;
  width:18px;
  height:18px;
  border:2px solid var(--linha-forte);
  border-top-color:var(--eerie-black);
  border-radius:50%;
  animation:gira .7s linear infinite;
  display:none;
}
.spinner.on{display:block}
@keyframes gira{to{transform:rotate(360deg)}}

.aviso{
  margin-top:11px;
  font-size:14px;
  min-height:21px;
  color:var(--texto-suave);
}
.aviso.erro{color:var(--erro)}

/* ---------- cartao da empresa ---------- */
.cartao{
  margin-top:28px;
  background:var(--superficie);
  border-left:4px solid var(--neon-celery);
  padding:26px 24px;
  display:none;
}
.cartao.on{display:block;animation:sobe .35s cubic-bezier(.2,.7,.3,1)}
@keyframes sobe{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.cartao-topo{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  padding-bottom:18px;
  margin-bottom:20px;
  border-bottom:1px solid var(--linha-forte);
}
.cartao-titulo{
  font-family:var(--display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--urban-grafitte);
}
.situacao{
  font-size:12px;
  font-weight:500;
  padding:3px 11px;
  background:var(--neon-celery);
  color:var(--eerie-black);
  white-space:nowrap;
}
.situacao.alerta{background:#F5D9D3;color:var(--erro)}

/* ---------- campos ---------- */
.campo{margin-bottom:18px}
.campo:last-child{margin-bottom:0}

label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--texto-suave);
  margin-bottom:6px;
}
label .obrig{color:var(--erro);margin-left:2px}

.dica{
  font-size:12px;
  color:var(--urban-grafitte);
  margin-top:5px;
  line-height:1.4;
}

input[type=text],input[type=email],input[type=tel]{
  width:100%;
  font-family:var(--body);
  font-size:16px;
  padding:12px 14px;
  border:1px solid var(--linha-forte);
  border-radius:0;
  background:var(--branco);
  color:var(--eerie-black);
  outline:none;
  transition:border-color .16s,box-shadow .16s;
}
input:focus{
  border-color:var(--eerie-black);
  box-shadow:0 0 0 3px rgba(0,255,0,.3);
}
input.pendente{border-color:var(--eerie-black);border-width:2px}

.dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tripla{display:grid;grid-template-columns:2fr 1fr .7fr;gap:14px}
@media(max-width:560px){
  .dupla,.tripla{grid-template-columns:1fr;row-gap:18px}
  .dupla{margin-bottom:18px}
  #cnpj{
    font-size:19px;
    padding:19px 50px 19px 16px;
    letter-spacing:-.01em;
  }
  .spinner{right:16px}
}

/* ---------- blocos ---------- */
#blocoFantasia,#bloco2{display:none}
#blocoFantasia.on,#bloco2.on{display:block;animation:sobe .35s cubic-bezier(.2,.7,.3,1)}
#blocoFantasia{margin-top:34px}
#bloco2{margin-top:38px}

h2{
  font-family:var(--display);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:6px;
}
.h2-sub{color:var(--texto-suave);font-size:14px;margin-bottom:22px}

/* ---------- envio ---------- */
.enviar{
  width:100%;
  margin-top:32px;
  font-family:var(--display);
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
  padding:19px 24px;
  border:none;
  border-radius:0;
  background:var(--neon-celery);
  color:var(--eerie-black);
  cursor:pointer;
  transition:filter .16s,transform .1s;
}
.enviar:hover{filter:brightness(.93)}
.enviar:active{transform:translateY(1px)}
.enviar:disabled{background:var(--linha);color:var(--urban-grafitte);cursor:not-allowed;filter:none}

.rodape{
  margin-top:20px;
  font-size:13px;
  color:var(--texto-suave);
  text-align:center;
}

/* ---------- sucesso ---------- */
.sucesso{display:none;padding:72px 0;text-align:center}
.sucesso.on{display:block;animation:sobe .4s cubic-bezier(.2,.7,.3,1)}
.check{
  width:58px;height:58px;
  margin:0 auto 24px;
  background:var(--neon-celery);
  display:flex;align-items:center;justify-content:center;
}
.check svg{width:27px;height:27px}
.sucesso h2{font-size:27px;margin-bottom:10px}
.sucesso p{color:var(--texto-suave);max-width:38ch;margin:0 auto}
.sucesso .barra{margin:30px auto 0}

/* honeypot */
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

*:focus-visible{outline:3px solid var(--neon-celery);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}