/* ============================================================
   descargas — bloque 3 (Cómo descargar la app)
   Anatomy unlike siblings: procedimiento de dos vías. Android como
   stepper numerado con conector vertical; iPhone como columna de
   lectura. Arranque distinto: folio + título en una sola línea.
   Animación propia: el conector del stepper se traza hacia abajo,
   los números brotan en dos tiempos y las dos vías entran desde
   lados opuestos (convergen).
   ============================================================ */

.descargas { padding-block: var(--aire-l); }

.descargas__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .9rem 1.4rem;
  margin-bottom: var(--aire-m);
  padding-bottom: var(--aire-s);
  border-bottom: 1px solid var(--linde-suave);
}
.descargas__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--marfil);
}
.descargas__bajada {
  flex-basis: 100%;
  color: var(--marfil-tenue);
  font-size: var(--t-micro);
  letter-spacing: .02em;
}

.descargas__vias {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

.via {
  background: var(--fieltro-alto);
  border: 1px solid var(--linde);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.via--ios { background: transparent; border-style: dashed; }

.via__nombre {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-h3);
  letter-spacing: -.01em;
  color: var(--marfil);
  margin-bottom: .7rem;
}
.via--android .via__nombre { color: var(--esmeralda-viva); }

.via__sub, .via__texto {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.6;
}
.via__sub { margin-bottom: 1.4rem; }

/* stepper Android */
.pasos {
  position: relative;
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}
.pasos::before {                 /* conector vertical — se traza */
  content: "";
  position: absolute;
  left: calc(1rem + 1.05rem);
  top: 1.1rem; bottom: 1.1rem;
  width: 2px;
  background: linear-gradient(var(--esmeralda), var(--oro-tenue));
}
.pasos__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 1.1rem;
  align-items: start;
}
.pasos__item + .pasos__item { margin-top: 1.4rem; }
.pasos__n {
  position: relative;
  z-index: 1;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--fieltro-hondo);
  background: radial-gradient(circle at 35% 30%, var(--esmeralda-viva), var(--esmeralda));
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--fieltro-alto);
}
.pasos__item p {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.55;
}

.via__nota {
  color: var(--marfil-tenue);
  font-size: var(--t-micro);
  line-height: 1.5;
  border-top: 1px solid var(--linde-suave);
  padding-top: 1rem;
  margin-bottom: 1.4rem;
}
.via--ios .via__texto { margin-bottom: 1.6rem; }

/* previo — requisitos como nota al pie del procedimiento */
.descargas__previo {
  margin-top: var(--aire-m);
  padding: 1.1rem 1.3rem;
  background: rgba(200,162,74,.06);
  border-left: 3px solid var(--oro-tenue);
  border-radius: 0 8px 8px 0;
  color: var(--marfil-medio);
  font-size: var(--t-micro);
  line-height: 1.55;
}

@media (max-width: 820px) {
  .descargas__vias { grid-template-columns: 1fr; }
}

/* — animación propia del bloque (solo desktop) — */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .descargas__intro  { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  .via--android      { opacity: 0; transform: translateX(-26px); transition: opacity .6s ease .1s, transform .6s ease .1s; }
  .via--ios          { opacity: 0; transform: translateX(26px);  transition: opacity .6s ease .2s, transform .6s ease .2s; }
  .descargas__previo { opacity: 0; transition: opacity .6s ease .35s; }
  .pasos::before     { transform: scaleY(0); transform-origin: top; transition: transform .7s ease .45s; }
  .pasos__n          { opacity: 0; transform: scale(.5); transition: opacity .4s ease, transform .4s ease; }
  .pasos__item:nth-child(1) .pasos__n { transition-delay: .6s; }
  .pasos__item:nth-child(2) .pasos__n { transition-delay: .8s; }

  .descargas.en-vista .descargas__intro,
  .descargas.en-vista .via--android,
  .descargas.en-vista .via--ios,
  .descargas.en-vista .descargas__previo { opacity: 1; transform: none; }
  .descargas.en-vista .pasos::before { transform: scaleY(1); }
  .descargas.en-vista .pasos__n { opacity: 1; transform: scale(1); }
}