/* Prometheus — landing de captacao do Monitor do DJEN (pre-lancamento).
   Complementa prometheus.css; nao substitui. Carregar sempre DEPOIS dele.
   Paleta e contraste seguem brand-kit/prometheus-brand.json. */

/* ---------------------------------------------------------------
   1. Publicacoes do bloco de demonstracao
   A pagina antiga do DJEN usava .pubs/.pub/.pill sem que existissem
   no CSS — os blocos renderizavam sem estilo. Definidos aqui.
   --------------------------------------------------------------- */
.pubs{display:grid;gap:12px}
.pub{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-left:5px solid var(--truffle);background:var(--palladian);
  border-radius:12px;padding:16px 20px}
/* Cor explicita: o bloco fica dentro de section.dark, que define
   color:palladian. Sem isto o numero do processo herda o claro e some
   sobre o fundo claro do .pub. */
.pub .proc{font-weight:700;font-size:15.4px;letter-spacing:-.01em;color:var(--ink)}
.pub .desc{font-size:14.4px;color:#4A5462;line-height:1.5;margin-top:4px}
.pub--ok{border-left-color:var(--oatmeal);background:rgba(201,193,177,.34)}
.pub--ok .proc{color:var(--muted)}

.pill{flex:none;font-size:12.4px;font-weight:700;letter-spacing:.04em;
  padding:8px 16px;border-radius:999px;white-space:nowrap}
.pill--fire{background:var(--truffle);color:var(--palladian)}
.pill--calm{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 2px var(--oatmeal)}

/* ---------------------------------------------------------------
   1b. Hero institucional
   O .hero do sistema tem padding "92px 0 0": quem fechava o bloco
   embaixo era o .nums. Como esta home abre so com o anuncio e leva
   os numeros para a secao seguinte, o respiro inferior vem daqui.
   --------------------------------------------------------------- */
.hero--intro{padding-bottom:88px}
@media(max-width:900px){ .hero--intro{padding-bottom:60px} }

/* ---------------------------------------------------------------
   2. Secao do formulario
   --------------------------------------------------------------- */
.formsec{position:relative;overflow:hidden;background:var(--grad);
  color:var(--palladian);padding:92px 0}
.formsec .stamp{width:430px;height:538px;left:-120px;bottom:-120px;opacity:.09}

.formgrid{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:52px;align-items:center}

.formtext .kicker{font-size:12px;letter-spacing:.22em;font-weight:600;
  text-transform:uppercase;color:var(--burning);margin-bottom:14px}
.formtext h2{font-size:clamp(28px,3.4vw,41px)}
.formtext h2 .serif{color:var(--burning)}
.formtext > p{margin-top:18px;font-size:17.4px;color:rgba(238,233,223,.8);line-height:1.6}

.formlist{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.formlist li{display:flex;gap:12px;font-size:15.4px;
  color:rgba(238,233,223,.9);line-height:1.5}
.formlist li .flame{color:var(--burning);width:14px;height:18px;flex:none;margin-top:3px}

/* cartao do formulario — fundo claro para os campos terem contraste real */
.formcard{background:var(--palladian);color:var(--ink);border-radius:var(--r);
  padding:38px 36px;box-shadow:0 26px 60px rgba(27,38,50,.28)}

.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--bluef);margin-bottom:8px}
.field input{width:100%;font-family:inherit;font-size:16.4px;color:var(--ink);
  background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:15px 17px;transition:border-color .16s,box-shadow .16s}
.field input::placeholder{color:#9AA1AC}
.field input:hover{border-color:var(--oatmeal)}
.field input:focus{outline:none;border-color:var(--truffle);
  box-shadow:0 0 0 4px rgba(163,81,57,.14)}
.field input:user-invalid{border-color:var(--truffle)}

/* honeypot — invisivel para gente, preenchido por robo */
.fieldhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0 4px;
  font-size:13.8px;line-height:1.55;color:#4A5462;cursor:pointer}
.consent input{flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--truffle);cursor:pointer}
.consent a{color:var(--truffle);font-weight:600}

.formerro{margin-top:16px;padding:13px 16px;border-radius:12px;
  background:rgba(163,81,57,.1);border-left:4px solid var(--truffle);
  color:var(--truffle);font-size:14.4px;font-weight:600;line-height:1.5}

.formbtn{width:100%;margin-top:22px;padding:18px 24px;font-size:16px}
.formbtn:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none}

.formnote{margin-top:14px;font-size:12.8px;color:var(--muted);
  text-align:center;line-height:1.5}

/* ---------------------------------------------------------------
   3. Pagina /instalar/ — endereco do conector para copiar
   --------------------------------------------------------------- */
.copybox{margin:26px 0 0;background:var(--abyssal);border:1px solid rgba(238,233,223,.2);
  border-radius:18px;padding:22px 24px;display:flex;gap:16px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.copybox code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15.6px;color:var(--burning);word-break:break-all;line-height:1.5}
.copybox button{flex:none;font-family:inherit;font-size:13.6px;font-weight:700;
  cursor:pointer;border:0;border-radius:999px;padding:11px 22px;
  background:var(--burning);color:var(--abyssal);transition:transform .16s}
.copybox button:hover{transform:translateY(-2px)}
.copybox button.ok{background:var(--oatmeal)}

.oat .copybox{background:var(--abyssal)}

/* aviso de topo na pagina de instalacao */
.ok-banner{background:var(--truffle);color:var(--palladian);
  padding:15px 0;font-size:14.6px;font-weight:600}
.ok-banner .wrap{display:flex;gap:12px;align-items:center;justify-content:center;
  text-align:center;flex-wrap:wrap}
.ok-banner .flame{color:var(--burning);width:16px;height:20px;flex:none}

/* ---------------------------------------------------------------
   3a. Aviso de topo da pagina /instalar/
   Substitui a faixa fina anterior: a confirmacao virou a propria
   abertura da pagina, porque e a informacao mais importante para
   quem acaba de se cadastrar.
   --------------------------------------------------------------- */
.aviso-topo .destino{display:inline-block;margin:6px 0 20px;padding:12px 22px;
  background:rgba(255,177,98,.14);border:1px solid rgba(255,177,98,.4);
  border-radius:999px;font-size:19px;font-weight:700;color:var(--burning);
  word-break:break-all}
.aviso-topo .caixa-alerta{margin-top:26px;padding:20px 24px;border-radius:16px;
  background:rgba(238,233,223,.08);border-left:5px solid var(--burning);
  font-size:16px;line-height:1.6;color:rgba(238,233,223,.9);max-width:74ch}
.aviso-topo .caixa-alerta b{color:var(--burning)}
.aviso-topo--erro .crumb{color:#FFD2B0}
.aviso-topo--erro h1 .serif{color:#FFD2B0}

@media(max-width:560px){
  .aviso-topo .destino{font-size:16px;padding:10px 16px}
  .aviso-topo .caixa-alerta{padding:16px 18px;font-size:15px}
}

/* ---------------------------------------------------------------
   3b. Subtitulo nas paginas legais
   O prometheus.css estiliza .legal h2 mas nao .legal h3, entao um
   subitem (ex.: "3.1. Credenciais de acesso") saía colado no
   paragrafo seguinte.
   --------------------------------------------------------------- */
.legal h3{font-size:19px;margin:34px 0 12px;color:var(--bluef);letter-spacing:-.01em}
.legal h3 + p{margin-top:0}

/* ---------------------------------------------------------------
   4. Responsivo
   --------------------------------------------------------------- */
@media(max-width:980px){
  .formgrid{grid-template-columns:1fr;gap:38px}
  .formsec{padding:68px 0}
  .formsec .stamp{width:300px;height:375px;left:-100px;bottom:-90px}
}
@media(max-width:560px){
  .formcard{padding:28px 22px}
  .pub{padding:14px 16px}
  .pill{font-size:11.6px;padding:7px 13px}
  .copybox{padding:18px 18px}
  .copybox code{font-size:14px}
  .copybox button{width:100%}
}