/* Página de descarga de la app (templates/app_descarga.html).
   Una tarjeta por sistema; la del sistema de quien la abre va primero y
   resaltada (static/js/app-descarga.js). Todo por tokens: claro y oscuro. */

.descarga {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px) 16px 64px;
  line-height: 1.6;
}

.descarga-cabecera { margin-bottom: var(--ui-space-6); }

.descarga-eyebrow {
  margin: 0 0 var(--ui-space-2);
  font-size: var(--ui-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-text-faint);
}

.descarga h1 {
  margin: 0 0 var(--ui-space-3);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
}

.descarga-resumen { margin: 0; font-size: var(--ui-text-lg); color: var(--ui-text-soft); }

.descarga-sistemas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ui-space-4);
}

.descarga-sistema {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  padding: var(--ui-space-5);
  background: var(--ui-surface-soft);
  border: 1px solid var(--ui-line-subtle);
  border-radius: var(--ui-radius-surface);
}

/* El sistema de quien la abre: primero y con el borde marcado. */
.descarga-sistema.es-el-tuyo {
  order: -1;
  border-color: var(--ui-line-strong);
  box-shadow: var(--ui-shadow-soft);
}

.descarga-sistema h2 { margin: 0; font-size: var(--ui-text-xl); font-weight: 700; }
.descarga-sistema p { margin: 0; color: var(--ui-text-soft); }
.descarga-sistema .btn { align-self: flex-start; }

.descarga-pasos { margin: 0; padding-left: 1.2em; font-size: var(--ui-text-sm); color: var(--ui-text-soft); }
.descarga-pasos li + li { margin-top: var(--ui-space-1); }

.descarga-instalada,
.descarga-nota { margin-top: var(--ui-space-6); font-size: var(--ui-text-sm); color: var(--ui-text-faint); }