/* Metodología: camino sinuoso con 5 pines (desktop) y línea de tiempo (tablet y mobile). */

.hero--metodologia .hero__media img {
	aspect-ratio: 640 / 380;
}

.camino__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-block: var(--section-y);
}

.camino__inner > h2,
.camino__lead {
	text-align: center;
}

.camino__lead {
	max-width: 694px;
	color: var(--color-text-secondary);
	font-size: var(--text-body-md);
	line-height: var(--leading-body);
}

.camino__hint {
	color: var(--color-text-secondary);
	font-size: var(--text-label-md);
	opacity: 0.8;
}

/* ---------- Piezas comunes a las dos versiones ---------- */

.road {
	position: relative;
	width: 100%;
}

.road__stops {
	margin: 0;
	padding: 0;
	list-style: none;
}

.road__pin {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--navy-700);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.road__pin:hover,
.road__pin:focus {
	background: var(--navy-700);
}

/* Anillo que late en el pin activo. */
.road__pin::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(242, 111, 33, 0.55);
	pointer-events: none;
}

.road__stop.is-done .road__pin {
	background: var(--navy-900);
}

.road__stop.is-active .road__pin,
.road__stop.is-active .road__pin:hover,
.road__stop.is-active .road__pin:focus {
	background: var(--color-garantia);
	transform: scale(1.14);
	box-shadow: 0 12px 24px rgba(242, 111, 33, 0.35);
}

.road__stop.is-active .road__pin::after {
	animation: road-pulse 1.8s ease-out infinite;
}

.road__stop.is-active .road__pin .icon {
	animation: road-wiggle 0.5s ease;
}

.road__pin:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 4px;
}

.road__label {
	font-size: var(--text-h4);
	font-weight: 500;
	line-height: var(--leading-h4);
	transition: color 0.3s ease;
}

.road__stop.is-active .road__label {
	color: var(--color-garantia-text, #c2500f);
}

.road__tip {
	padding: var(--space-4);
	border: 1.5px solid var(--color-garantia);
	border-radius: var(--radius-xl);
	background: var(--color-bg-section-alt);
	color: var(--color-text-secondary);
	text-align: left;
}

@keyframes road-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(242, 111, 33, 0.5);
	}

	100% {
		box-shadow: 0 0 0 18px rgba(242, 111, 33, 0);
	}
}

@keyframes road-wiggle {
	0% {
		transform: rotate(0) scale(1);
	}

	40% {
		transform: rotate(-12deg) scale(1.15);
	}

	70% {
		transform: rotate(8deg) scale(1.05);
	}

	100% {
		transform: rotate(0) scale(1);
	}
}

/* ---------- Desktop: camino sinuoso (lienzo de 1312 × 640 como en el Figma) ---------- */

@media (min-width: 1100px) {
	.road {
		height: 640px;
	}

	.road__track,
	.road__dashes {
		position: absolute;
		max-width: none;
		clip-path: inset(-20% 100% -20% 0);
		transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1);
	}

	.road.is-in .road__track,
	.road.is-in .road__dashes {
		clip-path: inset(-20% -2% -20% 0);
	}

	.road__track {
		top: 228px;
		left: calc(18 / 1312 * 100%);
		width: calc(1276 / 1312 * 100%);
		height: 244px;
	}

	.road__dashes {
		top: 248.5px;
		left: calc(38.5 / 1312 * 100%);
		width: calc(1235 / 1312 * 100%);
		height: 203px;
	}

	.road__progress {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
		pointer-events: none;
	}

	.road__progress path {
		stroke: var(--color-garantia);
		stroke-width: 5;
		stroke-linecap: round;
		stroke-dasharray: 100;
		stroke-dashoffset: 100;
		opacity: 0;
		transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
	}

	.road.has-active .road__progress path {
		opacity: 1;
	}

	/* Punto que viaja por la ruta. */
	.road__dot {
		position: absolute;
		z-index: 1;
		width: 16px;
		height: 16px;
		margin: -8px 0 0 -8px;
		border: 3px solid var(--white);
		border-radius: 50%;
		background: var(--color-garantia);
		box-shadow: 0 2px 8px rgba(12, 30, 61, 0.35);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}

	.road.has-active .road__dot {
		opacity: 1;
	}

	.road__stop {
		position: absolute;
		z-index: 2;
		width: 0;
		height: 0;
	}

	.road__stop--bottom {
		top: 450.5px;
	}

	.road__stop--top {
		top: 250.5px;
	}

	.road__stop--1 {
		left: calc(40.5 / 1312 * 100%);
		--shift: 75px;
	}

	.road__stop--2 {
		left: calc(330 / 1312 * 100%);
	}

	.road__stop--3 {
		left: 50%;
	}

	.road__stop--4 {
		left: calc(932 / 1312 * 100%);
	}

	.road__stop--5 {
		left: calc(1257.5 / 1312 * 100%);
		--shift: -75px;
	}

	.road__pin {
		position: absolute;
		top: -27.5px;
		left: -27.5px;
		opacity: 0;
		transform: scale(0.2);
	}

	.road.is-in .road__pin {
		opacity: 1;
		transform: scale(1);
		transition-delay: calc(0.25s + var(--i) * 0.28s);
	}

	/* Una vez que el pin apareció, el hover responde sin demora. */
	.road.has-active .road__pin {
		transition-delay: 0s;
	}

	.road.is-in .road__pin:hover {
		transform: scale(1.1);
	}

	.road.is-in .road__stop.is-active .road__pin {
		transform: scale(1.14);
	}

	.road__text {
		position: absolute;
		left: calc(-130px + var(--shift, 0px));
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 260px;
		text-align: center;
		opacity: 0;
		transition: opacity 0.5s ease;
		transition-delay: calc(0.45s + var(--i) * 0.28s);
	}

	.road.is-in .road__text {
		opacity: 1;
	}

	.road__stop--bottom .road__text {
		top: 37.5px;
	}

	.road__stop--top .road__text {
		bottom: 37.5px;
		flex-direction: column-reverse;
	}

	.road__tip {
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px) scale(0.96);
		transform-origin: top center;
		transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.3s;
	}

	.road__stop--top .road__tip {
		transform: translateY(-8px) scale(0.96);
		transform-origin: bottom center;
	}

	.road__stop.is-active .road__tip {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.road__stop.is-active {
		z-index: 3;
	}
}

/* ---------- Tablet y mobile: línea de tiempo vertical ---------- */

@media (max-width: 1099.98px) {
	.road {
		max-width: 640px;
		margin-top: var(--space-8);
		--progress: 0;
	}

	.road__track,
	.road__dashes,
	.road__dot {
		display: none;
	}

	/* Oculto pero medible: el script usa el trazo para calcular el avance. */
	.road__progress {
		position: absolute;
		width: 0;
		height: 0;
		visibility: hidden;
	}

	.road__stops {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
	}

	/* Riel gris y avance naranja detrás de los pines. */
	.road__stops::before,
	.road__stops::after {
		content: "";
		position: absolute;
		top: 27px;
		bottom: 27px;
		left: 24.5px;
		width: 6px;
		border-radius: 6px;
		background: #dbe0e8;
	}

	.road__stops::after {
		background: var(--color-garantia);
		transform: scaleY(var(--progress));
		transform-origin: top;
		transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	}

	.road__stop {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 55px minmax(0, 1fr);
		align-items: start;
		gap: var(--space-4);
		opacity: 0;
		transform: translateX(-16px);
		transition: opacity 0.5s ease, transform 0.5s ease;
		transition-delay: calc(var(--i) * 0.12s);
	}

	.road.is-in .road__stop {
		opacity: 1;
		transform: none;
	}

	.road__text {
		display: flex;
		flex-direction: column;
		padding-top: 15px;
	}

	.road__tip {
		max-height: 0;
		margin-top: 0;
		padding-block: 0;
		border-color: transparent;
		background: transparent;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.4s ease, padding 0.4s ease, border-color 0.3s ease, background-color 0.3s ease;
	}

	.road__stop.is-active .road__tip {
		max-height: 220px;
		margin-top: var(--space-3);
		padding-block: var(--space-4);
		border-color: var(--color-garantia);
		background: var(--color-bg-section-alt);
		opacity: 1;
	}

	.camino__hint {
		margin-top: var(--space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.road__track,
	.road__dashes {
		clip-path: none;
	}

	.road__pin,
	.road__text,
	.road__stop {
		opacity: 1;
		transform: none;
	}
}