/**
 * Proceso de federación — nodo 61:1053.
 *
 * Cajas de borde navy en fila con una flecha entre medio. La flecha se dibuja
 * con un ::before del item, así el marcado queda como una lista ordenada de
 * verdad y el lector de pantalla enumera los pasos.
 */
.cvp-steps { padding-block: var(--cvp-sp-6); }

.cvp-steps__title {
	/* 24 en el diseño (20 en mobile); estaba en 28. */
	font-size: 1.5rem;
	color: var(--cvp-navy);
	margin: 0 0 var(--cvp-sp-3);
}

.cvp-steps__list {
	display: flex;
	align-items: stretch;
	gap: var(--cvp-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.cvp-steps__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 48px;
	padding: var(--cvp-sp-1) var(--cvp-sp-2);
	border: 1px solid var(--cvp-navy);
	font-family: var(--cvp-font-text);
	font-weight: 700;
	font-size: var(--cvp-fs-sm);
	letter-spacing: var(--cvp-tracking-nav);
	text-transform: uppercase;
	color: var(--cvp-navy);
	position: relative;
}

.cvp-steps__item + .cvp-steps__item::before {
	content: "→";
	position: absolute;
	left: calc(var(--cvp-sp-2) * -1);
	width: var(--cvp-sp-2);
	text-align: center;
	font-weight: 400;
	color: var(--cvp-navy);
}

@media (max-width: 700px) {
	.cvp-steps__list { flex-direction: column; gap: var(--cvp-sp-3); }

	/* Apilados, la flecha baja en vez de apuntar al costado. */
	.cvp-steps__item + .cvp-steps__item::before {
		content: "↓";
		left: 50%;
		top: calc(var(--cvp-sp-3) * -1);
		transform: translateX(-50%);
		width: auto;
	}
}

@media (max-width: 900px) {
	.cvp-steps__title { font-size: var(--cvp-fs-md); }   /* 20 */
}

/* Figma del 6 de octubre de 2026 (nodo 1:320): cajas de 53 con borde navy de 1,5 y, entre una y otra,
   12 de aire, la flecha en 18 bold y otros 12. */
@media (min-width: 701px) {
	.cvp-steps__list { gap: 42px; }
	.cvp-steps__item { min-height: 53px; padding: 18px 20px; border-width: 1.5px; }
	.cvp-steps__item + .cvp-steps__item::before {
		left: -42px;
		width: 42px;
		font-size: 1.125rem;   /* 18 */
		font-weight: 700;
	}
}