/* ========== CÓMO TRABAJO: TARJETAS APILADAS (sticky) ========== */
.method {
  position: relative;
  padding: var(--section-y) 0 calc(var(--section-y) * .7);
  isolation: isolate;
}
.method-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 40% at 80% 10%, rgba(15, 118, 110, .22), transparent 70%),
    radial-gradient(50% 35% at 10% 60%, rgba(100, 116, 139, .18), transparent 70%);
}
.method-head {
  position: sticky;
  top: calc(var(--nav-h) + 10px);
  z-index: 0;
  text-align: center;
  pointer-events: none;
}
.method-kicker {
  display: block;
  max-width: 900px;
  margin: 0 auto -10px;
  text-align: right;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.6vw, 20px);
}
.method-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 11vw, 150px);
  font-weight: 500;
  line-height: 1;
  color: rgba(248, 250, 252, .05);
  -webkit-text-stroke: 1px rgba(248, 250, 252, .55);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.method-cards {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 90px;
  max-width: 640px;
  margin: 40px auto 0;
  padding: 0;
  counter-reset: none;
}
.method-card {
  position: sticky;
  top: calc(var(--nav-h) + 110px + var(--i) * 26px);
  padding: 30px;
  background:
    radial-gradient(420px circle at var(--mx, 20%) var(--my, 100%), rgba(45, 212, 191, .08), transparent 60%),
    var(--bg);
  transform-origin: center top;
  transition: transform .35s var(--ease), filter .35s var(--ease), border-color .4s;
}
.method-card.is-behind { transform: scale(.95); filter: brightness(.7); }

.method-num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-bottom: 40px;
  padding: 1px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(45, 212, 191, .6), rgba(100, 116, 139, .15) 70%);
}
.method-num span {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(30, 41, 59, 1), var(--bg) 70%);
  color: var(--accent-text);
  font-size: 20px; font-weight: 500;
}
.method-line {
  position: absolute; top: 59px; left: 88px; right: 40%;
  height: 1px;
  background: linear-gradient(90deg, var(--steel), transparent);
}

@media (max-width: 767px) {
  .method-kicker { text-align: center; margin-bottom: 6px; }
  .method-title { white-space: normal; font-size: clamp(40px, 13vw, 72px); }
  .method-cards { gap: 50px; }
  .method-card { padding: 24px; top: calc(var(--nav-h) + 80px + var(--i) * 18px); }
  .method-num { margin-bottom: 26px; }
  .method-line { top: 53px; left: 82px; }
}