/* =========================================================
   km_servicios_proceso — pasos numerados unidos por un hilo.

   El hilo es un ::before de cada paso que va desde el centro del
   círculo anterior hasta el propio: por eso necesita conocer el hueco
   de la rejilla (--km-proceso-gap) y por eso se oculta en el primer
   paso de cada fila.
   ========================================================= */

.km-servicios-proceso {
	--km-proceso-cols: 4;
	--km-proceso-gap: 24px;
	/* Diámetro del círculo del número. Lo leen el círculo y el hilo. */
	--km-proceso-dot: 48px;

	padding: 70px 0;
	background: var(--km-white);
}

/* Columnas en escritorio (lo elige el editor en el builder).
   Los selectores de atributo mantienen la misma especificidad que las
   media queries de más abajo, para que en móvil ganen ellas. */
.km-servicios-proceso[data-columns="3"] { --km-proceso-cols: 3; }
.km-servicios-proceso[data-columns="4"] { --km-proceso-cols: 4; }
.km-servicios-proceso[data-columns="5"] { --km-proceso-cols: 5; }

.km-servicios-proceso__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 44px;
}

.km-servicios-proceso__eyebrow {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--km-text-muted);
	margin: 0 0 8px;
}

.km-servicios-proceso__title {
	/* Turquesa como texto sobre blanco: variante -dark
	   (ver CLAUDE.md → identidad visual). */
	font-size: clamp(28px, 3.23vw, 39px);
	line-height: 1.2;
	color: var(--km-accent-dark);
	margin: 0;
}

.km-servicios-proceso__steps {
	display: grid;
	grid-template-columns: repeat(var(--km-proceso-cols), minmax(0, 1fr));
	gap: 36px var(--km-proceso-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.km-servicios-proceso__step {
	position: relative;
	text-align: center;
}

/* Hilo hasta el paso anterior. */
.km-servicios-proceso__step::before {
	content: "";
	position: absolute;
	top: calc(var(--km-proceso-dot) / 2);
	left: calc(-50% - var(--km-proceso-gap));
	width: calc(100% + var(--km-proceso-gap));
	height: 2px;
	background: var(--km-border);
	z-index: 0;
}

/* El primero de la fila no tiene a quién unirse. */
.km-servicios-proceso__step:first-child::before {
	content: none;
}

.km-servicios-proceso__number {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--km-proceso-dot);
	height: var(--km-proceso-dot);
	margin: 0 auto 16px;
	font-size: 23px;
	font-weight: 700;
	line-height: 1;
	/* Fondo de color con texto blanco encima → variante -dark
	   (ver CLAUDE.md → identidad visual). */
	color: var(--km-white);
	background: var(--km-highlight-dark);
	border-radius: 50%;
}

.km-servicios-proceso__step-title {
	font-size: 18px;
	line-height: 1.3;
	color: var(--km-primary);
	margin: 0 0 10px;
}

.km-servicios-proceso__text {
	max-width: 240px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.7;
	color: var(--km-text-soft);
}

@media (max-width: 900px) {
	.km-servicios-proceso {
		padding: 52px 0;
	}

	.km-servicios-proceso[data-columns] { --km-proceso-cols: 2; }

	.km-servicios-proceso__head {
		margin-bottom: 32px;
	}

	/* A dos columnas, el hilo sólo tiene sentido de la izquierda a la
	   derecha de cada fila. */
	.km-servicios-proceso__step:nth-child(odd)::before {
		content: none;
	}
}

@media (max-width: 560px) {
	.km-servicios-proceso[data-columns] { --km-proceso-cols: 1; }

	.km-servicios-proceso__step::before {
		content: none;
	}
}