/* LR — Passos (timeline) (About 06). Valores = layout aprovado.
 * Trilho (::before) e preenchimento (::after) da linha ficam no <ol>; o JS define
 * --lr-steps-p (0–1). Estado padrão (sem JS / sem animação): linha cheia, marcadores acesos.
 */

.lr-steps {
	--lr-steps-track: color-mix(in srgb, var(--lr-primary) 18%, transparent);
	--lr-steps-fill: var(--lr-teal);
	--lr-steps-dot: var(--lr-white);
	--lr-steps-dot-border: color-mix(in srgb, var(--lr-primary) 30%, transparent);
	--lr-steps-pad: clamp(28px, 3vw, 44px);
	position: relative;
}

.lr-steps__inner {
	max-width: var(--lr-max);
	margin: 0 auto;
	padding: clamp(90px, 11vw, 160px) var(--lr-gutter);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(40px, 6vw, 100px);
	align-items: flex-start;
}

/* ------------------------------------------------------------------ intro */

.lr-steps__intro {
	flex: 1 1 380px;
	min-width: 0;
	position: static;
	top: 120px;
}

@media (min-width: 1000px) {
	/* Desktop/notebook: introdução e lista sempre lado a lado. */
	.lr-steps__inner {
		flex-wrap: nowrap;
	}

	.lr-steps.is-pinned .lr-steps__intro {
		position: sticky;
	}
}

.lr-steps__title {
	margin: 0;
	font-weight: 800;
	font-size: calc(clamp(36px, 4vw, 64px) * var(--lr-ts, 1));
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--lr-primary);
	text-wrap: balance;
}

.lr-steps__body {
	margin: 28px 0 0;
	max-width: 480px;
	font-size: calc(18px * var(--lr-ts, 1));
	line-height: 1.6;
	color: var(--lr-primary);
	text-wrap: pretty;
}

.lr-steps__body p + p {
	margin-top: 1em;
}

.lr-steps__cta {
	margin-top: 36px;
}

/* ------------------------------------------------------------------ list */

.lr-w .lr-steps__list {
	flex: 1.3 1 520px;
	min-width: 0;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--lr-steps-pad);
}

.lr-steps__list::before,
.lr-steps__list::after {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 2px;
	pointer-events: none;
}

.lr-steps__list::before {
	bottom: 8px;
	background-color: var(--lr-steps-track);
}

.lr-steps__list::after {
	height: calc(var(--lr-steps-p, 1) * (100% - 16px));
	background-color: var(--lr-steps-fill);
}

.lr-steps__item {
	position: relative;
	margin: 0;
	padding: 0 0 clamp(40px, 5vw, 72px);
	list-style: none;
}

.lr-steps__dot {
	position: absolute;
	left: calc(-1 * var(--lr-steps-pad) - 9px);
	top: 6px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background-color: var(--lr-steps-fill);
	border: 2px solid var(--lr-steps-fill);
	transform: scale(1.1);
	transition: background-color .4s, border-color .4s, transform .4s;
	z-index: 1;
}

.lr-motion .lr-steps:not(.is-static) .lr-steps__list {
	--lr-steps-p: 0;
}

.lr-motion .lr-steps:not(.is-static) .lr-steps__item:not(.is-on) .lr-steps__dot {
	background-color: var(--lr-steps-dot);
	border-color: var(--lr-steps-dot-border);
	transform: none;
}

.lr-steps__row {
	display: flex;
	align-items: baseline;
	gap: 18px;
}

.lr-steps__num {
	flex: 0 0 auto;
	font-weight: 800;
	font-size: calc(clamp(44px, 4.4vw, 72px) * var(--lr-ts, 1));
	line-height: .85;
	letter-spacing: -.05em;
	color: var(--lr-mint);
}

.lr-steps__name {
	margin: 0;
	min-width: 0;
	font-weight: 800;
	font-size: calc(clamp(24px, 2.4vw, 36px) * var(--lr-ts, 1));
	line-height: 1.08;
	letter-spacing: -.025em;
	color: var(--lr-primary);
}

.lr-steps__desc {
	margin: 16px 0 0;
	max-width: 560px;
	font-size: calc(18px * var(--lr-ts, 1));
	line-height: 1.6;
	color: var(--lr-primary);
	text-wrap: pretty;
}