/* ============================================================
   andén ios — pared Nº 04 · tinta (la pared más oscura)
   Contenido: H2 + 2 párrafos — palabra por palabra.
   Anatomy unlike siblings: bloque CORTO y horizontal — una VÍA
   pintada a trazos cruza toda la pared a media altura; el
   polaroid llega por la izquierda (primera foto a la izquierda
   del recorrido) y el relato queda a la derecha, compacto.
   Jerarquía menor a propósito: H2 más chico que el de Android.
   Gesto propio: la vía se dibuja de izquierda a derecha y el
   polaroid LLEGA deslizándose por ella, como un vagón.
   ============================================================ */

.anden-ios {
  position: relative;
  background: var(--tinta);
  color: var(--hueso);
  padding-block: clamp(4rem, 7.5vw, 6.5rem);
  overflow: hidden;            /* la vía muere en los bordes de la pared */
}

.anden-ios .numeral {
  bottom: clamp(.5rem, 2.5vw, 2rem);
  right: clamp(.6rem, 3vw, 2.8rem);
  transform: rotate(1.6deg);
  color: rgba(253, 249, 240, .07);
}

/* — la vía: trazos pintados cruzando la pared — */
.anden-ios_via {
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  height: 3px;
  background: repeating-linear-gradient(90deg,
      rgba(3, 233, 242, .55) 0 1.1rem, transparent 1.1rem 2rem);
}

.anden-ios_armado {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2.4rem, 6vw, 5.5rem);
  align-items: center;
}

/* — polaroid a la izquierda, pisando la vía — */
.anden-ios_polaroid {
  transform: rotate(1.8deg);
  position: relative;
  z-index: 1;
}
.anden-ios_polaroid figcaption {
  margin-top: .8rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--tinta);
}

.anden-ios_relato .pregon {
  color: rgba(253, 249, 240, .6);
  margin-bottom: 1.1rem;
}
.anden-ios_titulo {
  font-size: clamp(1.7rem, 2vw + .8rem, 2.5rem);   /* menor que Android: jerarquía */
  color: var(--hueso);
  margin-bottom: 1.5rem;
}
.anden-ios_titulo em {
  font-style: normal;
  color: var(--cian);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
}

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

.anden-ios_cta { margin-top: 2.1rem; }

/* ── gesto: la vía se dibuja, el vagón llega ── */
@media (min-width: 1025px) {
  .anden-ios_via {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s ease;
  }
  .anden-ios_polaroid {
    opacity: 0;
    transform: translateX(-42px) rotate(3.6deg);
    transition: opacity .55s ease .3s, transform .7s cubic-bezier(.2, .9, .3, 1.05) .3s;
  }
  .anden-ios.en-vista .anden-ios_via { transform: scaleX(1); }
  .anden-ios.en-vista .anden-ios_polaroid {
    opacity: 1;
    transform: translateX(0) rotate(1.8deg);
  }
}

/* ============================ móvil ============================ */
@media (max-width: 1024px) {
  .anden-ios_via { display: none; }

  .anden-ios_armado { grid-template-columns: 1fr; gap: 2.4rem; }

  /* en móvil el relato manda: foto después del texto */
  .anden-ios_polaroid { order: 2; transform: rotate(1deg); }
  .anden-ios_relato { order: 1; }

  .anden-ios_titulo { font-size: clamp(1.8rem, 6.5vw, 2.4rem); }

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