/* Página de download do Vigium Local.

   Escura como o app e como o painel — quem chega aqui vindo do site não deve
   sentir que mudou de produto. */

:root {
  --marinho: #0d1b3e;
  --marinho2: #14264f;
  --azul: #1f6feb;
  --claro: #e8eef8;
  --fraco: #8b9bb8;
  --linha: #1e3163;
  --alerta: #e2ab48;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--marinho);
  color: var(--claro);
  font: 400 16px/1.65 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------- topo */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--claro);
  text-decoration: none;
}
.marca span {
  font: 700 20px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .14em;
}

.voltar {
  color: var(--fraco);
  font-size: 14px;
  text-decoration: none;
}
.voltar:hover { color: var(--azul); }

/* ------------------------------------------------------------------ blocos */

main { max-width: 760px; margin: 0 auto; padding: 0 20px 60px; }

section { margin-top: 40px; }

h1 {
  margin: 0 0 12px;
  font: 700 46px/1.05 "Barlow Condensed", sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}

h2 {
  margin: 0 0 12px;
  font: 600 13px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fraco);
}

p { margin: 0 0 14px; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- capa */

.capa { margin-top: 24px; }

.olho {
  margin: 0 0 8px;
  font: 600 12px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--azul);
}

.linha { font-size: 18px; color: var(--claro); }

.botao {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  padding: 15px 26px;
  border-radius: 12px;
  background: var(--azul);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.botao:hover { background: #3b83f0; }
.botao:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tam { font-size: 14px; font-weight: 400; opacity: .8; }

.sob { margin-top: 10px; color: var(--fraco); font-size: 14px; }

/* ------------------------------------------------------------------ limite */

/* O aviso mais importante da página. Âmbar, não vermelho: não é um erro, é
   uma condição do produto — e vermelho aqui gritaria por 20 segundos e
   deixaria de ser lido depois. */
.limite {
  padding: 22px;
  border-left: 3px solid var(--alerta);
  border-radius: 0 12px 12px 0;
  background: rgba(226, 171, 72, .09);
}
.limite h2 {
  color: var(--alerta);
  font: 600 17px/1.4 Inter, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.limite p { color: var(--claro); }

/* ------------------------------------------------------------------ listas */

.lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lista li {
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--marinho2);
  color: var(--fraco);
  font-size: 15px;
}
.lista b {
  display: block;
  margin-bottom: 3px;
  color: var(--claro);
  font-size: 16px;
  font-weight: 600;
}

.passos { margin: 0; padding-left: 22px; }
.passos li { margin-bottom: 8px; color: var(--claro); }
.passos b { color: var(--azul); }

.nota { margin-top: 14px; color: var(--fraco); font-size: 14px; }

/* -------------------------------------------------------------------- hash */

.hash { margin: 0; }
.hash dt {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fraco);
}
.hash dd {
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--marinho2);
  font: 400 12.5px/1.6 "JetBrains Mono", monospace;
  color: var(--claro);
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- honesto */

.honesto ul { margin: 0; padding-left: 20px; }
.honesto li { margin-bottom: 8px; color: var(--fraco); font-size: 15px; }
.honesto b { color: var(--claro); }

/* ------------------------------------------------------------------ rodapé */

footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--linha);
  color: var(--fraco);
  font-size: 13.5px;
}
footer a { color: var(--fraco); }

@media (max-width: 560px) {
  h1 { font-size: 38px; }
  .botao { width: 100%; justify-content: center; }
}

/* ------------------------------------------------- o segundo produto (NVR) */

.produto {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--linha);
}

.titulo-produto {
  margin: 0 0 12px;
  font: 700 34px/1.1 "Barlow Condensed", sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--claro);
}

.fraco-linha {
  margin-top: 10px;
  color: var(--fraco);
  font-size: 14.5px;
}
.fraco-linha b { color: var(--claro); }

/* A ressalva sobre o que foi testado.

   Cinza e discreta, nao vermelha: nao e um alerta de perigo, e uma informacao
   que a pessoa tem direito de ter antes de baixar. Vermelho aqui gritaria e,
   de tanto gritar, deixaria de ser lido. */
.atencao {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--marinho2);
}
.atencao h3 {
  margin: 0 0 10px;
  font: 600 15px/1.4 Inter, sans-serif;
  color: var(--claro);
}
.atencao p {
  color: var(--fraco);
  font-size: 14px;
}
.atencao b { color: var(--claro); }