/* ============================================================
   andén android — pared Nº 03 · turquesa profunda
   Contenido: H2 + 5 párrafos + tabla de pasos (Paso / Qué hacer)
   + tabla de requisitos (Requisito / Detalle) — palabra por
   palabra, sin caja-tabla genérica.
   Anatomy unlike siblings: cabecera ALINEADA A LA DERECHA;
   abajo dos husos — el relato con LA RUTA (los 5 pasos como
   estaciones desparejas unidas por una línea pintada) y el
   lado con foto recta + CHAPA de requisitos + CTA.
   Gesto propio: la línea de la ruta SE DIBUJA de arriba a abajo
   y los números se encienden a su paso, como lamparitas.
   ============================================================ */

.anden-android {
  position: relative;
  background: var(--turquesa);
  color: var(--hueso);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.anden-android .numeral {
  top: clamp(.5rem, 2.5vw, 2rem);
  left: clamp(.6rem, 3vw, 2.8rem);
  transform: rotate(-1.5deg);
  color: rgba(253, 249, 240, .08);
}

/* — cabecera a la derecha (rompe el arranque del vestíbulo) — */
.anden-android_cabecera {
  position: relative;
  z-index: 1;
  margin-left: auto;
  max-width: 24ch;
  text-align: right;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.anden-android_cabecera .pregon {
  color: rgba(253, 249, 240, .65);
  flex-direction: row-reverse;
  margin-bottom: 1.1rem;
}
.anden-android_titulo {
  font-size: clamp(1.9rem, 2.6vw + .8rem, 3.1rem);
  color: var(--hueso);
}
.anden-android_titulo em {
  font-style: normal;
  color: var(--cian);
  text-shadow: 2px 2px 0 var(--tinta);
}

.anden-android_armado {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.anden-android_relato > p { color: rgba(253, 249, 240, .88); }
.anden-android_relato > p + p { margin-top: 1.2rem; }

/* ── LA RUTA: 5 estaciones desparejas ── */
.ruta {
  position: relative;
  margin: 2.2rem 0 2rem;
  padding-left: .4rem;
}
/* rótulos de columnas de la tabla del PDF — se conservan */
.ruta_titulos {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 1.4rem;
}
.ruta_titulos span {
  font: 700 var(--t-folio)/1 var(--letra);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cian);
}
.ruta_titulos span + span::before { content: "— "; color: rgba(253, 249, 240, .4); }

.ruta_pasos { position: relative; }
/* la línea pintada que une las estaciones */
.ruta_pasos::before {
  content: "";
  position: absolute;
  top: .4rem;
  bottom: 1rem;
  left: 1.45rem;
  width: 3px;
  background: repeating-linear-gradient(180deg,
      var(--hueso) 0 .7rem, transparent .7rem 1.25rem);  /* pincelada a trazos */
  opacity: .8;
}

.ruta_paso {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.3rem;
  padding-block: .78rem;
}
/* estaciones desparejas: cada una respira distinto, a mano */
.ruta_paso:nth-child(2) { margin-left: 1.4rem; }
.ruta_paso:nth-child(3) { margin-left: .5rem; }
.ruta_paso:nth-child(4) { margin-left: 2rem; }
.ruta_paso:nth-child(5) { margin-left: .9rem; }

.ruta_numero {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: var(--hueso);
  color: var(--tinta);
  font: 400 1.15rem/1 var(--plakat);
  box-shadow: .22rem .22rem 0 0 rgba(0, 0, 0, .4);
  position: relative;
  z-index: 1;
}
.ruta_paso p { color: var(--hueso); font-weight: 600; }

/* ── el lado: foto recta + chapa de requisitos + CTA ── */
.anden-android_foto {
  background: var(--blanco);
  padding: .7rem .7rem .9rem;
  box-shadow: .7rem .8rem 0 0 rgba(0, 0, 0, .4);
  margin-bottom: 2rem;
}
.anden-android_foto figcaption {
  margin-top: .75rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--tinta);
}

.anden-android_lado > p { color: rgba(253, 249, 240, .88); }

/* chapa esmaltada de requisitos (eco de la placa de calle) */
.chapa {
  margin: 1.6rem 0 2rem;
  border: 2px solid var(--hueso);
  position: relative;
  padding: 1.3rem 1.4rem 1.1rem;
}
.chapa::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(253, 249, 240, .35);
  pointer-events: none;
}
.chapa_titulos {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 1rem;
}
.chapa_titulos span {
  font: 700 var(--t-folio)/1 var(--letra);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cian);
}
.chapa_titulos span + span::before { content: "— "; color: rgba(253, 249, 240, .4); }

.chapa_fila {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 1.2rem;
  padding-block: .68rem;
}
.chapa_fila + .chapa_fila { border-top: 1px dashed rgba(253, 249, 240, .3); }
.chapa_fila dt {
  font-weight: 700;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .07em;
  color: var(--hueso);
  align-self: baseline;
}
.chapa_fila dd { color: rgba(253, 249, 240, .88); font-size: .98rem; }

.anden-android_cta {
  margin-top: 2.2rem;
  background: var(--fucsia);
  color: var(--blanco);
  border-color: var(--fucsia-honda);
  box-shadow: .5rem .5rem 0 0 rgba(0, 0, 0, .4);
}
.anden-android_cta:hover,
.anden-android_cta:active { background: #ef3a94; }

/* ── gesto: la ruta se dibuja y las estaciones se encienden ── */
@media (min-width: 1025px) {
  .ruta_pasos::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .9s ease .15s;
  }
  .ruta_numero {
    background: transparent;
    color: var(--hueso);
    box-shadow: inset 0 0 0 2px rgba(253, 249, 240, .55);
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
  }
  .anden-android.en-vista .ruta_pasos::before { transform: scaleY(1); }
  .anden-android.en-vista .ruta_numero {
    background: var(--hueso);
    color: var(--tinta);
    box-shadow: .22rem .22rem 0 0 rgba(0, 0, 0, .4);
  }
  /* se encienden a medida que la línea baja */
  .anden-android.en-vista .ruta_paso:nth-child(1) .ruta_numero { transition-delay: .15s; }
  .anden-android.en-vista .ruta_paso:nth-child(2) .ruta_numero { transition-delay: .33s; }
  .anden-android.en-vista .ruta_paso:nth-child(3) .ruta_numero { transition-delay: .51s; }
  .anden-android.en-vista .ruta_paso:nth-child(4) .ruta_numero { transition-delay: .69s; }
  .anden-android.en-vista .ruta_paso:nth-child(5) .ruta_numero { transition-delay: .87s; }
}

/* ============================ móvil ============================ */
@media (max-width: 1024px) {
  .anden-android_cabecera {
    margin-left: 0;
    max-width: none;
    text-align: left;
  }
  .anden-android_cabecera .pregon { flex-direction: row; }

  .anden-android_titulo { font-size: clamp(1.9rem, 7vw, 2.6rem); }

  .anden-android_armado { grid-template-columns: 1fr; gap: 2.6rem; }

  .ruta_paso,
  .ruta_paso:nth-child(2),
  .ruta_paso:nth-child(3),
  .ruta_paso:nth-child(4),
  .ruta_paso:nth-child(5) { margin-left: 0; }

  .ruta_numero { width: 3.4rem; height: 3.4rem; font-size: 1.35rem; }

  .chapa_fila { grid-template-columns: 1fr; gap: .25rem; }

  .anden-android_cta { width: 90%; }
}