/*
 * Metodología: línea de cinco pasos con el contenido del paso activo debajo.
 * Medidas tomadas del diseño de Figma (RM Foundation Campus Experience).
 */

.cem {
	--cem-navy: #0F2145;      /* Secondary/Dark Blue */
	--cem-ink: #14142B;       /* Neutral/Gray 90 */
	--cem-gold: #C3A572;      /* Primary/Gold 50 */
	--cem-azul: #3E31FA;      /* Secondary/Light Blue */
	--cem-font: 'RM Neue', Arial, sans-serif;
	--cem-font-ext: 'Helvetica Neuel', 'Helvetica Neue LT Std', 'Helvetica Neue', Arial, sans-serif;

	font-family: var(--cem-font);
	color: var(--cem-navy);
}

.cem *,
.cem *::before,
.cem *::after {
	box-sizing: border-box;
}

/* ========================= línea de pasos ========================= */

.cem .cem-pista {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cem .cem-pista::-webkit-scrollbar {
	display: none;
}

.cem .cem-pista-interior {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--cem-pasos, 5), 1fr);
	align-items: start;
}

/* La línea que une los iconos, por detrás */
.cem .cem-linea {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--cem-ink);
	border-radius: 4px;
}

/* Cada paso es un botón: rótulo, icono y nombre del valor */
.cem button.cem-paso,
.cem .cem-paso.cem-paso {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	text-align: center;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: none;
}

.cem button.cem-paso:hover,
.cem button.cem-paso:focus {
	background: none;
	box-shadow: none;
	color: inherit;
}

.cem .cem-paso:focus-visible {
	outline: 2px solid var(--cem-gold);
	outline-offset: 4px;
}

.cem .cem-fase {
	font-family: var(--cem-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--cem-navy);
}

/*
 * El icono ocupa SIEMPRE el mismo hueco (el del grande). Lo que crece y
 * mengua es solo el dibujo, así al cambiar de paso no se mueve nada de sitio.
 */
.cem .cem-icono {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 72px;
	height: 72px;
	margin: 0;
}

/* El círculo azul: al 40 de 72 de serie, entero cuando es el activo */
.cem .cem-icono::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	border-radius: 96px;
	background: var(--cem-navy);
	transform: scale(.5556);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.cem .cem-icono img {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	transform: scale(.5);
	transition: transform .3s ease;
}

.cem .cem-activo .cem-icono::before {
	transform: scale(1);
	border-color: #fff;
	box-shadow: 0 0 16px rgba(15, 33, 69, .3);
}

.cem .cem-activo .cem-icono img {
	transform: scale(1);
}

/* Todos los nombres van al dorado pleno: el paso activo se distingue por el
   tamaño del icono, no por apagar los demás. */
.cem .cem-valor {
	font-family: var(--cem-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: -0.24px;
	color: var(--cem-gold);
}

/* ========================= contenido ========================= */

.cem .cem-contenido {
	display: flex;
	align-items: center;
	gap: 48px;
	padding-top: 64px;
}

.cem .cem-paneles {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cem .cem-paneles::-webkit-scrollbar {
	display: none;
}

.cem .cem-panel {
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	gap: 48px;
	min-width: 0;
}

.cem .cem-panel-imagen {
	flex: 1 1 0;
	min-width: 0;
}

.cem .cem-panel-imagen img {
	display: block;
	width: 100%;
	height: 296px;
	object-fit: cover;
	/* Punto de partida; el encuadre de cada paso lo escribe Elementor encima. */
	object-position: center center;
}

.cem .cem-panel-texto {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	height: 296px;
	padding-left: 48px;
	border-left: 1px solid var(--cem-ink);
}

.cem .cem-panel-titulo {
	margin: 0;
	font-family: var(--cem-font-ext);
	font-style: oblique;
	font-weight: 900;
	font-size: 32px;
	line-height: 32px;
	letter-spacing: -1.6px;
	text-transform: uppercase;
	color: var(--cem-navy);
}

.cem .cem-panel-cuerpo {
	margin: 0;
	font-family: var(--cem-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 40px;
	letter-spacing: -0.32px;
	color: var(--cem-navy);
}

/* ========================= flechas ========================= */

.cem button.cem-flecha,
.cem .cem-flecha.cem-flecha {
	flex: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-width: 0;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 14px;
	border: 0;
	border-radius: 16px;
	background: #fff;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: transform .2s ease, opacity .2s ease;
}

.cem button.cem-flecha:hover,
.cem button.cem-flecha:focus {
	background: #fff;
	box-shadow: none;
}

.cem button.cem-flecha:hover {
	transform: scale(1.08);
}

.cem button.cem-flecha:focus-visible {
	outline: 2px solid var(--cem-azul);
	outline-offset: 2px;
}

.cem .cem-flecha svg {
	display: block;
	width: 20px;
	height: 20px;
}

.cem .cem-flecha[hidden] {
	display: none;
}

/* ========================= tableta ========================= */

@media (max-width: 1024px) {
	.cem .cem-valor {
		font-size: 20px;
		line-height: 28px;
	}

	.cem .cem-contenido {
		gap: 24px;
	}

	.cem .cem-panel {
		gap: 32px;
	}

	.cem .cem-panel-texto {
		padding-left: 32px;
		gap: 24px;
	}

	/* En tableta el texto sigue al lado de la foto, así que va alineado a la
	   izquierda; el centrado es solo cosa de móvil. */
	.cem .cem-panel-titulo {
		font-size: 20px;
		line-height: 20px;
		letter-spacing: -1px;
	}

	.cem .cem-panel-cuerpo {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.24px;
	}
}

/* ========================= móvil ========================= */

@media (max-width: 767px) {
	/* La línea de pasos se desliza y el activo queda centrado */
	.cem .cem-pista-interior {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 120px;
		padding: 0 calc(50% - 60px);   /* permite centrar el primero y el último */
		/*
		 * La tira mide lo que ocupan los cinco pasos, no lo que se ve: si no,
		 * la línea de unión se corta y deja sin unir los iconos de la derecha.
		 */
		width: max-content;
	}

	.cem .cem-fase {
		font-size: 14px;
		line-height: 20px;
	}

	/* En móvil el nombre del valor no se muestra: ya es el título del contenido */
	.cem .cem-valor {
		display: none;
	}

	.cem .cem-paso {
		gap: 12px;
	}

	/* Sin flechas: se cambia deslizando o tocando un icono */
	.cem button.cem-flecha,
	.cem .cem-flecha.cem-flecha {
		display: none;
	}

	/*
	 * Sin el nombre del valor debajo, el icono activo termina justo en el borde
	 * de la tira y el resplandor se cortaba. Se le da aire y se descuenta del
	 * hueco de abajo, para que la separación siga siendo de 32.
	 */
	.cem .cem-pista {
		padding-bottom: 12px;
	}

	.cem .cem-contenido {
		gap: 0;
		padding-top: 12px;   /* 12 + 12 + los 8 de abajo = 32 */
	}

	/*
	 * Ese hueco de arriba es también el respiro que necesitan las tildes de los
	 * títulos en mayúsculas: el carrusel recorta lo que se sale por arriba.
	 */
	.cem .cem-paneles {
		padding-top: 8px;
	}

	.cem .cem-panel {
		flex-direction: column-reverse;   /* primero el texto, luego la imagen */
		align-items: stretch;
		gap: 24px;
		/* El contenido se separa 16px de los lados; la tira de pasos, no. */
		padding: 0 16px;
	}

	.cem .cem-panel-texto {
		height: auto;
		padding-left: 0;
		border-left: 0;
		gap: 16px;
		text-align: center;
	}

	.cem .cem-panel-titulo {
		font-size: 20px;
		line-height: 20px;
		letter-spacing: -1px;
		text-align: center;
	}

	.cem .cem-panel-cuerpo {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.24px;
		text-align: center;
	}

	.cem .cem-panel-imagen img {
		height: 212px;
	}
}

/* Quien prefiera menos movimiento no ve el desplazamiento animado */
@media (prefers-reduced-motion: reduce) {
	.cem .cem-paneles {
		scroll-behavior: auto;
	}

	.cem .cem-icono::before,
	.cem .cem-icono img {
		transition: none;
	}
}