.boll-proceso__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; counter-reset: none; }
.boll-proceso__step { position: relative; padding-left: 4.5rem; min-height: 3.5rem; }
.boll-proceso__num {
	position: absolute; left: 0; top: 0; width: 3.5rem; height: 3.5rem; display: grid; place-items: center;
	font-family: var(--boll-font-display); font-weight: var(--boll-fw-display); font-size: 1.75rem; line-height: 1;
	background: var(--boll-color-bg); border: 2px solid var(--boll-color-primary); border-radius: 50%;
	color: var(--boll-color-primary); z-index: 1;
	transition: background .3s var(--boll-ease), color .3s var(--boll-ease), box-shadow .3s var(--boll-ease);
}
.boll-proceso__step:hover .boll-proceso__num { background: var(--boll-color-primary); color: var(--boll-color-text); box-shadow: var(--boll-glow); }

/* Conector vertical (móvil) que se dibuja al entrar */
.boll-proceso__step:not(:last-child)::after {
	content: ''; position: absolute; left: calc(1.75rem - 1px); top: 3.5rem; bottom: calc(-2.5rem); width: 2px;
	background: linear-gradient(to bottom, var(--boll-color-primary), var(--boll-color-border));
	transform-origin: top; transition: transform .9s var(--boll-ease) .3s;
}
.boll-js .boll-proceso__step:not(:last-child)::after { transform: scaleY(0); }
.boll-js .boll-proceso__step.is-in:not(:last-child)::after { transform: scaleY(1); }

.boll-proceso__title { font-family: var(--boll-font-sub); font-size: var(--boll-fs-h3); font-weight: var(--boll-fw-sub); line-height: var(--boll-lh-tight); padding-top: .55rem; }
.boll-proceso__text { margin-top: .5rem; color: var(--boll-color-muted); line-height: var(--boll-lh-body); }
.boll-proceso__tag {
	display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; padding: .35rem .85rem;
	font-size: var(--boll-fs-small); font-weight: 700; color: var(--boll-color-primary);
	background: var(--boll-color-primary-soft); border-radius: var(--boll-radius-pill); text-decoration: none;
	transition: background .25s var(--boll-ease);
}
.boll-proceso__tag svg { width: 1em; height: 1em; transition: transform .25s var(--boll-ease); }
a.boll-proceso__tag:hover { background: color-mix(in srgb, var(--boll-color-primary) 28%, transparent); }
a.boll-proceso__tag:hover svg { transform: translateX(3px); }

@media (min-width: 1025px) {
	.boll-proceso__steps { grid-template-columns: repeat(4, 1fr); gap: var(--boll-space-gap); }
	.boll-proceso__step { padding: 5rem 0 0; }
	.boll-proceso__num { left: 0; }
	.boll-proceso__title { padding-top: 0; }
	/* Conector horizontal hacia el siguiente paso */
	.boll-proceso__step:not(:last-child)::after {
		left: 4rem; right: calc(-1 * var(--boll-space-gap) + .5rem); top: calc(1.75rem - 1px); bottom: auto; width: auto; height: 2px;
		background: linear-gradient(to right, var(--boll-color-primary), var(--boll-color-border));
		transform-origin: left;
	}
	.boll-js .boll-proceso__step:not(:last-child)::after { transform: scaleX(0); }
	.boll-js .boll-proceso__step.is-in:not(:last-child)::after { transform: scaleX(1); }
}
@media (min-width: 768px) and (max-width: 1024.98px) {
	.boll-proceso__steps { grid-template-columns: repeat(2, 1fr); gap: 2.5rem var(--boll-space-gap); }
	.boll-proceso__step:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.boll-proceso__step::after, .boll-proceso__num, .boll-proceso__tag, .boll-proceso__tag svg { transition: none; }
	.boll-js .boll-proceso__step:not(:last-child)::after { transform: none; }
}