/* ==========================================================================
   07 · CÓMO TRABAJAMOS
   Banda Ink: aquí vive el 20% de Ink de la proporción del manual. La regla
   que une los cuatro pasos se dibuja con el scroll.
   ========================================================================== */

.metodo {
  background: var(--ink);
  color: var(--blanco);
  border-top: var(--rule) solid var(--ink);
}
.metodo .kicker { color: var(--celeste-claro); }

.metodo__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: calc(var(--space-block) + 1rem);
}
.metodo__titulo { max-width: 18ch; }
.metodo__bajada { color: rgba(255, 255, 255, .70); max-width: 38ch; }

.metodo__pista { position: relative; }

/* Riel de fondo y línea que avanza con el scroll */
.metodo__riel {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--rule);
  background: rgba(255, 255, 255, .18);
}
.metodo__avance {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--rule);
  background: var(--celeste-marca);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.metodo__pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.paso {
  padding: 2rem clamp(1rem, 1.8vw, 2rem) 0 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: relative;
}
.paso + .paso { padding-left: clamp(1rem, 1.8vw, 2rem); }
.paso + .paso::before {
  content: "";
  position: absolute;
  left: 0; top: 2rem; bottom: 0;
  width: var(--hairline);
  background: rgba(255, 255, 255, .18);
}

.paso__numero {
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--celeste-marca);
}
.paso__titulo { max-width: 12ch; }
.paso__texto {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(255, 255, 255, .70);
  max-width: 30ch;
}

.metodo__cierre {
  margin-top: calc(var(--space-block) + 1rem);
  padding-top: 1.75rem;
  border-top: var(--hairline) solid rgba(255, 255, 255, .18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.metodo__cierre p { color: rgba(255, 255, 255, .70); max-width: 52ch; }

@media (max-width: 900px) {
  .metodo__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .paso:nth-child(3) { padding-left: 0; }
  .paso:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
  .metodo__pasos { grid-template-columns: minmax(0, 1fr); }
  .paso + .paso { padding-left: 0; }
  .paso + .paso::before { display: none; }
  .paso { border-top: var(--hairline) solid rgba(255, 255, 255, .18); }
  .paso:first-child { border-top: 0; }
}