/* ==========================================================================
   components/cadena.css — Cadena de valor (secuencia: lleva numeración)
   Componente marcado: eslabon (index, cadena-valor). Aparición: data-aparecer-grupo en .cadena.
   ========================================================================== */
.cadena {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: eslabon;
}
.cadena::before {
  content: "";
  position: absolute;
  top: calc(var(--marcador-cadena) / 2);
  left: calc(var(--marcador-cadena) / 2);
  right: calc(var(--marcador-cadena) / 2);
  height: var(--borde-medio);
  background: repeating-linear-gradient(90deg,
    var(--c-agua) 0 var(--guion-trazo),
    transparent var(--guion-trazo) calc(var(--guion-trazo) + var(--guion-hueco)));
}
.cadena__paso { position: relative; counter-increment: eslabon; }
.cadena__paso::before {
  content: counter(eslabon);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--marcador-cadena); height: var(--marcador-cadena);
  margin-bottom: var(--space-4);
  border: var(--borde-grueso) solid var(--fondo-cadena, var(--c-bruma));
  border-radius: var(--radio-circulo);
  background: var(--c-abismo);
  color: var(--c-agua);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--text-xl);
}
.cadena__paso p { margin: 0; font-size: var(--text-md); color: var(--c-texto-suave); }
@media (max-width: 900px) {
  .cadena { grid-template-columns: 1fr; gap: 0; }
  .cadena::before {
    top: calc(var(--marcador-cadena) / 2);
    bottom: calc(var(--marcador-cadena) / 2);
    left: calc(var(--marcador-cadena) / 2 - var(--hairline));
    right: auto;
    width: var(--borde-medio); height: auto;
    background: repeating-linear-gradient(180deg,
      var(--c-agua) 0 var(--guion-trazo),
      transparent var(--guion-trazo) calc(var(--guion-trazo) + var(--guion-hueco)));
  }
  .cadena__paso {
    display: grid;
    grid-template-columns: var(--marcador-cadena) 1fr;
    column-gap: var(--space-4);
    padding-bottom: var(--space-6);
  }
  .cadena__paso::before { grid-row: 1 / span 3; margin: 0; }
}