.iaexp-pipe {
	--iaexp-pipe-color: var(--e-global-color-primary);
	--iaexp-pipe-texto: var(--e-global-color-text);
	--iaexp-pipe-hueco: clamp(1rem, 2.5vw, 2rem);
	--iaexp-pipe-marca: 3rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--iaexp-pipe-hueco);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: iaexp-pipe;
}

.iaexp-pipe__paso {
	position: relative;
	display: grid;
	justify-items: start;
	align-content: start;
	gap: 0.4rem;
}

/* El raíl que une un paso con el anterior. Va de centro de marca a centro de
   marca: por eso el desplazamiento incluye el hueco de la rejilla, no solo el
   50 % de la propia caja. */
.iaexp-pipe__paso + .iaexp-pipe__paso::before {
	content: "";
	position: absolute;
	top: calc(var(--iaexp-pipe-marca) / 2);
	right: calc(100% - var(--iaexp-pipe-marca) / 2);
	left: calc(-1 * var(--iaexp-pipe-hueco) - 100% + var(--iaexp-pipe-marca) / 2);
	height: 2px;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--iaexp-pipe-color) 15%, transparent),
		color-mix(in srgb, var(--iaexp-pipe-color) 55%, transparent));
}

.iaexp-pipe__marca {
	display: grid;
	place-items: center;
	width: var(--iaexp-pipe-marca);
	height: var(--iaexp-pipe-marca);
	border: 1.5px solid color-mix(in srgb, var(--iaexp-pipe-color) 45%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--iaexp-pipe-color) 8%, transparent);
	color: var(--iaexp-pipe-color);
}

.iaexp-pipe__orden {
	margin-top: 0.5rem;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: color-mix(in srgb, var(--iaexp-pipe-color) 65%, transparent);
}

.iaexp-pipe__titulo {
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--iaexp-pipe-color);
}

.iaexp-pipe__texto {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--iaexp-pipe-texto);
}

/* El paso humano es el que cierra el proceso y el que más importa contar:
   marca sólida en vez de contorno. */
.iaexp-pipe__paso[data-humano="si"] .iaexp-pipe__marca {
	border-color: var(--iaexp-pipe-color);
	background: var(--iaexp-pipe-color);
	color: var(--e-global-color-4c06697);
}

.iaexp-pipe__paso[data-humano="si"] .iaexp-pipe__orden {
	color: var(--iaexp-pipe-color);
}

/* Debajo de este ancho la franja pasa a columna y el raíl se vuelve vertical:
   una fila de cinco pasos en móvil deja el texto ilegible. */
@media (max-width: 767px) {
	.iaexp-pipe {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.iaexp-pipe__paso {
		grid-template-columns: var(--iaexp-pipe-marca) 1fr;
		column-gap: 1rem;
		row-gap: 0.25rem;
	}

	.iaexp-pipe__marca {
		grid-row: 1 / span 3;
	}

	.iaexp-pipe__orden {
		margin-top: 0;
	}

	.iaexp-pipe__paso + .iaexp-pipe__paso::before {
		top: calc(-1.5rem);
		right: auto;
		left: calc(var(--iaexp-pipe-marca) / 2 - 1px);
		width: 2px;
		height: 1.5rem;
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--iaexp-pipe-color) 15%, transparent),
			color-mix(in srgb, var(--iaexp-pipe-color) 55%, transparent));
	}
}

/* Sobre la aurora oscura la franja invierte su paleta, igual que el resto. */
.iaexp-aurora .iaexp-pipe {
	--iaexp-pipe-color: var(--e-global-color-4c06697);
	--iaexp-pipe-texto: var(--e-global-color-329db06);
}

.iaexp-aurora .iaexp-pipe__paso[data-humano="si"] .iaexp-pipe__marca {
	color: var(--e-global-color-secondary);
}