/**
 * Pasos en línea de tiempo.
 *
 * Diseño de la captura de Revby: burbuja #E3FCEF con el número, punto #448885
 * sobre una línea de 1 px #7F7F7F, título Raleway 600 y texto Segoe UI.
 */

.rvb-pasos.rvb-pasos {
	--rvb-pasos-gap: clamp(20px, 2.4vw, 32px);
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(56px, 7vw, 100px) clamp(16px, 4vw, 40px);
	overflow: visible;
	background: var(--rvb-pasos-bg, #fff);
	color: #282827;
	font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.rvb-pasos .rvb-pasos__wrap {
	max-width: 1180px;
	margin: 0 auto;
}

.rvb-pasos .rvb-pasos__title {
	margin: 0 0 clamp(36px, 5vw, 64px);
	padding: 0;
	text-align: center;
	font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
	font-size: clamp(2rem, 3.6vw, 3.1875rem);
	font-weight: 800;
	font-style: normal;
	line-height: 1.17;
	letter-spacing: -0.005em;
	text-transform: none;
	color: #183132;
}

/* ---------- Escritorio: pasos en fila ---------- */

.rvb-pasos .rvb-pasos__lista {
	display: grid;
	grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
	gap: var(--rvb-pasos-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rvb-pasos .rvb-pasos__paso {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rvb-pasos .rvb-pasos__num {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 50px;
	margin: 0 0 16px;
	border-radius: 50%;
	background: #e3fcef;
	font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: lining-nums;
	color: #282827;
	transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.rvb-pasos .rvb-pasos__punto {
	position: relative;
	z-index: 1;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 0 22px;
	border-radius: 50%;
	background: #448885;
}

/* Tramo de línea: del punto de este paso al del siguiente (50 + 16 + 5 de alto) */
.rvb-pasos .rvb-pasos__tramo {
	position: absolute;
	top: 70.5px;
	left: 5px;
	width: calc(100% + var(--rvb-pasos-gap));
	height: 1px;
	background: #7f7f7f;
	transform-origin: left center;
}

.rvb-pasos .rvb-pasos__paso:last-child .rvb-pasos__tramo {
	width: calc(100% - 5px);
}

@media (hover: hover) {
	.rvb-pasos .rvb-pasos__paso:hover .rvb-pasos__num {
		background: #a7f3cc;
		transform: translateY(-3px);
	}
}

.rvb-pasos .rvb-pasos__nombre {
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	padding: 0;
	font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
	font-weight: 600;
	font-style: normal;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: #282827;
}

.rvb-pasos .rvb-pasos__texto {
	margin: 0;
	padding: 0;
	font-size: clamp(0.875rem, 1.15vw, 1rem);
	line-height: 1.6;
	color: #282827;
}

/* ---------- Móvil y tablet: línea vertical a la izquierda ---------- */

@media (max-width: 860px) {
	.rvb-pasos .rvb-pasos__lista {
		display: block;
	}

	.rvb-pasos .rvb-pasos__paso {
		padding: 0 0 36px 36px;
	}

	.rvb-pasos .rvb-pasos__paso:last-child {
		padding-bottom: 0;
	}

	.rvb-pasos .rvb-pasos__num {
		margin-bottom: 14px;
	}

	.rvb-pasos .rvb-pasos__punto {
		position: absolute;
		top: 20px;
		left: 0;
		margin: 0;
	}

	/* De este punto al del siguiente: el alto de todo el paso */
	.rvb-pasos .rvb-pasos__tramo {
		top: 25px;
		left: 4.5px;
		width: 1px;
		height: 100%;
		transform-origin: center top;
	}

	.rvb-pasos .rvb-pasos__paso:last-child .rvb-pasos__tramo {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rvb-pasos .rvb-pasos__num {
		transition: none;
	}
}