/* by osmy — El método. Requiere tokens.css. */

body.os-site .os-method { background: var(--os-paper); }

body.os-site .os-method h2 { margin-bottom: var(--os-space-7); }

body.os-site .os-method__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.os-site .os-method__step {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--os-space-7);
  padding-block: var(--os-space-7);
  border-top: 1px solid var(--os-color-border);
}

body.os-site .os-method__step:last-child {
  border-bottom: 1px solid var(--os-color-border);
}

body.os-site .os-method__number {
  display: block;
  color: var(--os-rose);
  font-family: var(--os-font-display);
  font-size: var(--os-type-h1);
  line-height: 1;
}

body.os-site .os-method__step:nth-child(2) .os-method__number { color: var(--os-wine); }

body.os-site .os-method__content h3 { margin: 0 0 var(--os-space-3); }

body.os-site .os-method__content p {
  max-width: var(--os-reading-max);
  margin: 0;
  color: var(--os-color-text-secondary);
}

@media (max-width: 640px) {
  body.os-site .os-method h2 { margin-bottom: var(--os-space-6); }

  body.os-site .os-method__step {
    grid-template-columns: 1fr;
    gap: var(--os-space-3);
    padding-block: var(--os-space-6);
  }
}

/* Los números son visibles por defecto; JS activa la entrada al hacer scroll. */
@media (prefers-reduced-motion: no-preference) {
  body.os-site .os-method.os-method--animated .os-method__number {
    opacity: 0;
    transform: translateY(0.65rem);
    transition: opacity 480ms var(--os-ease), transform 480ms var(--os-ease);
  }

  body.os-site .os-method.os-method--animated .os-method__step.is-visible .os-method__number {
    opacity: 1;
    transform: none;
  }

  body.os-site .os-method.os-method--animated .os-method__step:nth-child(2) .os-method__number {
    transition-delay: 80ms;
  }

  body.os-site .os-method.os-method--animated .os-method__step:nth-child(3) .os-method__number {
    transition-delay: 160ms;
  }
}