/*
 * distribuicao.css — a página que oferece o app (raiz do site).
 *
 * Só o que é específico desta página: os tokens, a tipografia, os botões e o
 * fundo vêm de `zori-tema.css`, carregado antes. Ver o cabeçalho de lá para o
 * porquê de as duas páginas partilharem uma base com a landing.
 */

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

.dist-hero {
  text-align: center;
  padding-bottom: clamp(20px, 4vw, 34px);
}
.dist-hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -1px;
  margin: 18px 0 0;
}
.dist-hero .dist-lead {
  color: var(--sub);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  max-width: 540px;
  margin: 16px auto 0;
}

/* --------------------------------------------------- cartão em destaque */

.dist-destaque {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding: clamp(26px, 5vw, 40px) clamp(20px, 4vw, 36px);
  margin-top: clamp(22px, 4vw, 32px);
  position: relative;
  overflow: hidden;
}
/* Um brilho atrás do cartão, para ele ser claramente O caminho da página. */
.dist-destaque::before {
  content: '';
  position: absolute;
  inset: -40% 20% auto 20%;
  height: 220px;
  background: radial-gradient(closest-side, rgba(34, 197, 94, .22), transparent);
  pointer-events: none;
}
.dist-destaque > * { position: relative; }

/* Os símbolos são SVG, não emoji — dimensionam pelo tamanho da caixa, não por
   font-size. Herdam a cor por `currentColor`. */
.dist-destaque-icone {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(74, 222, 128, .22);
  color: var(--green);
}
.dist-destaque-icone svg { width: 32px; height: 32px; }
.dist-destaque-titulo {
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 700;
}
.dist-destaque .zr-btn {
  margin-top: 6px;
  font-size: 1.05rem;
  padding: 15px 34px;
}
.dist-versao {
  color: var(--sub);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.dist-detalhe {
  color: var(--sub);
  font-size: .95rem;
  max-width: 460px;
}

/* ------------------------------------------------- outras plataformas */

.dist-outras {
  margin-top: clamp(34px, 6vw, 52px);
}
.dist-outras-titulo {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 16px;
}
.dist-lista {
  list-style: none;
  display: grid;
  gap: 12px;
}
.dist-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  transition: border-color .2s, transform .2s;
}
.dist-item:hover {
  border-color: rgba(74, 222, 128, .34);
  transform: translateY(-2px);
}
.dist-item-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(74, 222, 128, .09);
  color: var(--text);
  flex: none;
  transition: color .2s, background .2s;
}
.dist-item-icone svg { width: 20px; height: 20px; }
.dist-item:hover .dist-item-icone {
  color: var(--green);
  background: rgba(34, 197, 94, .16);
}
.dist-item-nome {
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  min-width: 0;
}
.dist-item-versao {
  color: var(--sub);
  font-weight: 400;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.dist-item-link {
  margin-left: auto;
  flex: none;
  color: var(--green);
  font-weight: 600;
  font-size: .93rem;
  border: 1px solid rgba(74, 222, 128, .28);
  border-radius: 999px;
  padding: 8px 18px;
  transition: background .2s, color .2s;
}
.dist-item:hover .dist-item-link {
  background: rgba(34, 197, 94, .12);
}

@media (max-width: 560px) {
  .dist-item { flex-wrap: wrap; }
  .dist-item-link { margin-left: 0; width: 100%; text-align: center; }
}

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

.dist-legacy {
  margin-top: 10px;
  font-size: .88rem;
  line-height: 1.6;
}