/* AXISERP — página /download.
   Carrega DEPOIS de legal.css e só acrescenta o que é específico daqui:
   o card do instalador, os passos e a grade de requisitos. Tokens, nav,
   rodapé, .btn e skip-link vêm todos de legal.css. */

:root {
  --radius-lg: .65rem;
  --border-strong: #d2cdca;
  --red-deep: #a61217;
  --red-soft: #fcefef;
  --red-soft-border: #eecfd0;
  --green: #1f6b45;
  --green-soft: #eef5f1;
  --green-soft-border: #cfe2d8;
  --amber-bg: #fdf2e7;
  --amber-ink: #9a5411;
  --amber-border: #f0dcc4;
  --dark: #171412;
  --wa: #25d366;
}

/* O .dl-tag é inline-flex e regra de autor vence a folha do navegador: sem
   isto, o atributo `hidden` não esconderia o selo antes do script responder. */
[hidden] { display: none !important; }

/* A página tem cards e grades, então respira mais que as páginas legais. */
.container { max-width: 880px; }
main { padding: 48px 0 80px; }

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-deep);
  display: block;
  margin-bottom: 10px;
}

.dl-lead { font-size: 17.5px; color: var(--ink-2); margin: 0 0 36px; max-width: 62ch; }

/* ---------- Card do instalador ---------- */
.dl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  box-shadow: 0 1px 2px rgba(23, 20, 18, .04), 0 12px 32px -24px rgba(23, 20, 18, .3);
}

.dl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
}
.dl-version {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
.dl-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }

.dl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-soft);
  border: 1px solid var(--green-soft-border);
  color: var(--green);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-left: auto;
}
.dl-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.dl-btn { font-size: 16px; padding: 15px 26px; gap: 10px; width: 100%; }
@media (min-width: 560px) { .dl-btn { width: auto; } }
.dl-btn:hover { background: var(--red-deep); }

.dl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.dl-meta span + span::before { content: "·"; margin-right: 8px; color: var(--border-strong); }

.dl-alt {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px;
  color: var(--ink-2);
}
.dl-alt strong { color: var(--ink); }

/* SHA-256: presente para quem confere, invisível para quem não liga. */
.dl-hash { margin: 14px 0 0; font-size: 13.5px; }
.dl-hash summary {
  cursor: pointer;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  list-style: none;
}
.dl-hash summary::-webkit-details-marker { display: none; }
.dl-hash summary::before { content: "+ "; }
.dl-hash[open] summary::before { content: "− "; }
.dl-hash summary:hover { color: var(--ink); }
.dl-hash dl { margin: 12px 0 0; }
.dl-hash dt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.dl-hash dd {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  word-break: break-all;
  background: var(--muted);
  border-radius: var(--radius);
  padding: 8px 10px;
  line-height: 1.5;
}
.dl-hash dd:last-child { margin-bottom: 0; }

/* Estado sem dados do build: o botão vira link para a página de releases. */
.dl-card.is-generic .dl-date, .dl-card.is-generic .dl-tag { display: none; }

/* ---------- Passos ---------- */
.steps { list-style: none; counter-reset: passo; margin: 0; padding: 0; }
.steps li {
  counter-increment: passo;
  position: relative;
  padding-left: 42px;
  margin-bottom: 20px;
  color: var(--ink-2);
}
.steps li::before {
  content: counter(passo);
  position: absolute;
  left: 0; top: 1px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps b { color: var(--ink); font-weight: 700; display: block; margin-bottom: 2px; }
.steps code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--muted);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--ink);
}

/* ---------- Avisos ---------- */
.aviso {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 24px;
}
.aviso .aviso-h {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--amber-ink);
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 8px;
}
.aviso p { color: #7d4a1a; margin-bottom: 10px; font-size: 14.5px; }
.aviso p:last-child { margin-bottom: 0; }
.aviso strong { color: #5f3810; }

.nota {
  background: var(--green-soft);
  border: 1px solid var(--green-soft-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 24px;
}
.nota .aviso-h { color: var(--green); }
.nota p { color: #2e5a44; font-size: 14.5px; }

/* ---------- Requisitos ---------- */
.reqs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 24px;
}
/* A grade desenha as divisórias com `gap` sobre o próprio fundo. A margem que
   o navegador dá a todo <dl> abriria faixas cinzas no topo e no rodapé. */
.req { background: var(--surface); padding: 16px 18px; margin: 0; }
.req dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.req dd { margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 500; }

/* ---------- Fecho ---------- */
.fecho {
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 56px 0 0;
  text-align: center;
}
.fecho h2 { color: #fff; margin: 0 0 10px; font-size: 22px; }
.fecho p { color: #b9b1ad; margin: 0 auto 22px; max-width: 48ch; }
.btn { gap: 9px; }
.btn-wa { background: var(--wa); color: var(--dark); border-color: var(--wa); font-weight: 500; }
.btn-wa:hover { background: #1fb955; color: var(--dark); }

.todas {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
}
.todas a { color: var(--ink-2); }

h2 { scroll-margin-top: 90px; }