@layer molecules {
  /* Paso numerado: "1 · Escríbenos por WhatsApp" */
  .step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3xs) var(--space-s);
    align-items: baseline;

    & p { grid-column: 2; color: var(--text-muted); }
  }

  .step__number {
    display: grid;
    place-items: center;
    width: 2.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: var(--text-small);
  }

  .step__title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
  }

  /* Hito de trayectoria: año + descripción */
  .milestone {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: var(--space-s);
    padding-block: var(--space-s);
    border-block-start: 1px solid var(--border-strong);

    & p { color: var(--text-muted); }
  }

  .milestone__year {
    font-family: var(--font-display);
    font-size: 1.375rem;
    color: var(--accent);
    line-height: 1.2;
  }
}