Step indicator

Pasos del checkout.

Configuración

El componente real, en vivo.

Probalo: usá los botones y hacé click en un paso anterior.

Interactivo

Pasos completados con tilde; clickeables para volver.

Los tokens globales que usa el CSS real del componente.

Token	Valor	Uso
	8px
	44px
	8px	Botones de compra y UI, stepper, inputs, cards de producto
	2px	Campos: borde de 2px en foco (box-shadow inset para no mover el layout)
	#e30613	Campos en foco: reemplaza el color del borde
	2px
	32px
	9999px	CTAs de marketing, filtros, inputs pill, contador
	12px
	16px
	600
	#e4e4e4	Skeletons, divisores gruesos
	#6b6b6b	Gramaje, metadatos (5.33:1)
	150ms
	cubic-bezier(0.4, 0, 0.2, 1)
	#e30613	Contador del carrito, bloques de marca
	#ffffff
	#ffc7ca
	36px	Botón sm. Antes 38px (fuera de la grilla de 4)
	14px
	20px
	500
	#1a1a1a	Texto principal (17.4:1)