/*
  Herramientas (#149): lo propio de la página. Lo común (cabeza, índice, capítulos, ficha, cierre)
  está en /comun/capitulos.css.

  La cadena: una banda entre el capítulo del Estudio de diseño y el del Cuaderno de bocetos
  (desde #160 toda la página va en papel; nació para separar dos tramos «de tinta») que cuenta cómo se pasan el trabajo las tres
  herramientas: del boceto al plano y del plano a las Piezas. Tres pasos entre líneas finas,
  unidos por una flecha.
*/
.cadena { padding-block: clamp(56px, 9vh, 104px); }
.cadena-titulo { max-width: 18em; margin-bottom: clamp(28px, 5vh, 56px); font-size: clamp(30px, 3.6vw, 56px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
.cadena-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tinta); }
.cadena-pasos li { position: relative; display: grid; align-content: start; gap: 10px; padding: 20px 32px 8px 0; }
.cadena-pasos li + li { padding-left: 32px; border-left: 1px solid var(--linea); }
/* La flecha que une un paso con el siguiente, sobre la línea que los separa. */
.cadena-pasos li + li::before {
  content: "→"; position: absolute; left: -0.6em; top: 16px; width: 1.2em; text-align: center;
  background: var(--fondo); color: var(--tinta); font-size: 18px; line-height: 1.4;
}
.cadena-num { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--secundario); font-variant-numeric: tabular-nums; }
.cadena-pasos h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.cadena-pasos p { max-width: 30em; color: var(--secundario); }
@media (max-width: 820px) {
  .cadena-pasos { grid-template-columns: minmax(0, 1fr); }
  .cadena-pasos li, .cadena-pasos li + li { padding: 18px 0 20px 0; border-left: 0; }
  .cadena-pasos li + li { border-top: 1px solid var(--linea); }
  /* «↓» no está en Hanken Grotesk: la misma flecha, girada. */
  .cadena-pasos li + li::before { left: auto; right: 0; top: -14px; transform: rotate(90deg); }
}