.section--surface#metodo {
  --method-line: color-mix(in srgb, var(--border) 78%, var(--fg));
  padding-top: 96px;
  padding-bottom: 140px;
}

.method-intro {
  grid-column: 1 / 6;
}

.method-intro h2 {
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 550;
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 15ch;
}

.method-intro .lead {
  font-size: 18px;
  font-weight: 430;
  line-height: 1.6;
  max-width: 62ch;
  color: color-mix(in srgb, var(--muted) 72%, var(--fg));
}

.method-intro .actions {
  display: flex;
  gap: 12px;
  margin-top: 54px;
}

.method-steps {
  grid-column: 6 / 13;
  margin-top: 72px;
}

.step {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  padding: 32px 0;
  border-top: 1px solid var(--method-line);
}

.step:last-child {
  border-bottom: 1px solid var(--method-line);
}

.step strong {
  font-size: 12px;
  letter-spacing: 0.06em;
}

.step > div {
  min-width: 0;
}

.step p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .method-intro {
    grid-column: 1 / 5;
  }

  .method-steps {
    grid-column: 5 / 9;
  }
}

@media (max-width: 760px) {
  .section--surface#metodo {
    padding-top: 68px;
    padding-bottom: 104px;
  }

  .method-steps {
    margin-top: 40px;
  }
}