/* Descargas (descargar.php y includes/download-platform.php): usan la barra y el pie de la landing
   (landing.css) y el título de legal.css. Columna angosta, como términos y privacidad. */
.download {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-10) var(--landing-gutter) var(--space-12);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1.7;
}

.download h2 {
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.download-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.download-hero .landing-feature__icon { margin-bottom: 0; }
.download-hero__lead {
  max-width: 34rem;
  color: var(--text-primary);
  font-size: var(--fs-lg);
}
.download-hero .btn { margin-top: var(--space-2); }
.download-hero__meta {
  margin-top: calc(-1 * var(--space-2));
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.download-empty {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.download-empty__title {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* Desde una computadora: QR con fondo blanco siempre, para que la cámara lo lea en los dos temas. */
.download-computer {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
}
.download-computer__qr {
  flex: none;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: #fff;
}
.download-computer__url {
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.download-section { margin-top: var(--space-10); }
.download-steps {
  padding-left: var(--space-5);
  list-style: decimal;
}
.download-steps li { padding-left: var(--space-1); }
.download-steps li + li { margin-top: var(--space-2); }
.download-steps li::marker {
  color: var(--accent);
  font-weight: var(--fw-semibold);
}

.download-verify {
  margin-top: var(--space-10);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.download-verify summary {
  padding: var(--space-4) var(--space-5);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.download-verify summary:focus-visible {
  border-radius: var(--radius-lg);
  outline: none;
  box-shadow: var(--focus-ring);
}
.download-verify[open] summary { border-bottom: var(--border-width) solid var(--border-subtle); }
.download-verify > p,
.download-verify dl { padding: 0 var(--space-5); }
.download-verify > p { margin-top: var(--space-4); font-size: var(--fs-md); }
.download-verify dl { padding-bottom: var(--space-5); }
.download-verify dt {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.download-verify dd { margin-top: var(--space-1); }
/* VirusTotal: porcentaje de motores sin marcas, barra y la cuenta tal cual. La barra sigue verde
   hasta el 75 % (VirusTotalScan::LOW_TRUST_BELOW); por debajo pasa a color de aviso. */
.download-vt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-md);
}
.download-vt__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.download-vt__score strong {
  color: var(--text-primary);
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
}
.download-vt__score span { color: var(--text-secondary); }
.download-vt__bar {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: var(--progress-height);
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  overflow: hidden;
}
.download-vt__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}
.download-vt.is-low .download-vt__bar > span { background: var(--warning); }
.download-vt a {
  color: var(--accent);
  font-weight: var(--fw-semibold);
}
.download-vt a:hover { text-decoration: underline; }

.download-verify code {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.download-notes {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--fs-md);
}
.download-notes p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.download-notes a { color: inherit; }
.download-notes a:hover { color: var(--text-primary); }
.download-notes .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.3em;
  color: var(--accent);
}


/* Volver a la elección de plataforma, arriba de cada página. */
.download-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  color: var(--text-muted);
  font-size: var(--fs-md);
  text-decoration: none;
  transition: var(--transition-ui);
}
.download-back .icon { width: 1em; height: 1em; }
.download-back:hover { color: var(--text-primary); }
.download-back:focus-visible {
  border-radius: var(--radius-sm);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Elegir plataforma: las tarjetas de plataformas de la landing, de a tres (Android, Windows, iPhone · Mac). */
.download-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.download-choice h2 { font-size: var(--fs-xl); }

/* iPhone y Mac (descargar-apple.php): una guía por sistema, con el resultado en una línea con tilde. */
.download-guide__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.download-guide__title .icon { width: 1.1em; height: 1.1em; color: var(--accent); }
.download-guide__lead { margin-bottom: var(--space-3); }
.download-steps--options { list-style: disc; }
.download-steps--options strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.download-guide__result {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--text-primary);
}
.download-guide__result .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.35em; color: var(--accent); }
.download-guide__other { margin-top: var(--space-6); }
.download-guide__switch {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-md);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: var(--transition-ui);
}
.download-guide__switch:hover { color: var(--text-primary); }
.download-guide__switch:focus-visible { border-radius: var(--radius-sm); outline: none; box-shadow: var(--focus-ring); }

/* En el teléfono: el QR no sirve (ya está en la página) y las tarjetas van una abajo de la otra. */
@media (max-width: 640px) {
  .download { padding-top: var(--space-8); }
  .download-computer { display: none; }
  .download-choices { grid-template-columns: 1fr; }
  .download-hero .btn { width: 100%; justify-content: center; }
  .legal-nav__actions .btn-ghost { display: none; }
}