.ts-steps { background: var(--surface-card); }
/* Layouts horizontais precisam da largura cheia pra linha de passos caber lado a lado. */
.ts-steps .ts-container--narrow { max-width: var(--container-max); }
.ts-steps__title { font-family: var(--font-brand); font-weight: var(--weight-extrabold); font-size: var(--fs-h1); color: var(--text-primary); margin: var(--space-2) 0 var(--space-4); }
.ts-steps__subtitle { color: var(--text-secondary); font-family: var(--font-support); font-size: var(--fs-body-lg); margin-bottom: var(--space-6); max-width: 620px }
.ts-steps__list { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.ts-steps__item { display: flex; gap: var(--space-5); align-items: flex-start; opacity: 0; transform: translateX(-8px); transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
.ts-steps__item.is-revealed { opacity: 1; transform: none; }
.ts-steps__number { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--action-primary-bg); color: var(--text-on-brand); font-family: var(--font-brand); font-weight: var(--weight-bold); font-size: var(--fs-body-lg); }
.ts-steps__body h3 { font-family: var(--font-brand); font-size: var(--fs-h5); color: var(--text-primary); margin-bottom: var(--space-1); }
.ts-steps__body p { font-family: var(--font-support); color: var(--text-secondary); line-height: var(--lh-body); }

.ts-steps__intro {
	max-width: 544px;
	align-self: center;
}
/* Centered (default) layout: intro text centered above the list */
.ts-steps--centered .ts-steps__grid { display: block; }
.ts-steps--centered .ts-steps__intro { text-align: center; }
.ts-steps--centered .ts-steps__title { text-align: center; }
.ts-steps--centered .ts-steps__subtitle { text-align: center; }

/* Split layout: 2-column grid, intro+CTA left, vertical timeline right */
.ts-steps--split .ts-steps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.ts-steps--split .ts-steps__title { font-size: clamp(1.75rem, 3.5vw, 2.375rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--color-primary-600); margin-bottom: var(--space-4); }
.ts-steps--split .ts-steps__subtitle { font-size: 1.0625rem; line-height: 1.7; margin-bottom: var(--space-8); }
.ts-steps--split .ts-steps__list { margin-top: 0; gap: 0; }
.ts-steps--split .ts-steps__item { gap: 1.25rem; }
.ts-steps--split .ts-steps__marker { display: grid; align-items: center; flex-shrink: 0;  grid-template-rows: 1fr 1fr; row-gap: 4px}
.ts-steps--split .ts-steps__number { width: 50px; height: 50px; font-size: 1.0625rem; font-weight: var(--weight-extrabold); }
.ts-steps--split .ts-steps__line { width: 2px; height: 100%; background: var(--color-primary-200);  justify-self: center;}
.ts-steps--split .ts-steps__body { padding-bottom: var(--space-5); }
.ts-steps--split .ts-steps__body h3 { font-weight: var(--weight-bold); font-size: 1.0625rem; margin: 0; margin-bottom: .375rem; }
.ts-steps--split .ts-steps__body p { font-size: .9375rem; line-height: 1.65; color: var(--color-neutral-600); margin: 0}
@media (max-width: 900px) {
	.ts-steps--split .ts-steps__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Horizontal layouts (shared): intro centered above, steps in a row connected by a line */
.ts-steps--horizontal .ts-steps__grid, .ts-steps--horizontal-cards .ts-steps__grid { display: block; }
.ts-steps--horizontal .ts-steps__intro, .ts-steps--horizontal-cards .ts-steps__intro { max-width: 620px; margin: 0 auto; text-align: center; }
.ts-steps--horizontal .ts-steps__title, .ts-steps--horizontal-cards .ts-steps__title,
.ts-steps--horizontal .ts-steps__subtitle, .ts-steps--horizontal-cards .ts-steps__subtitle { text-align: center; }
.ts-steps--horizontal .ts-steps__list, .ts-steps--horizontal-cards .ts-steps__list { flex-direction: row; gap: 0; }
.ts-steps--horizontal .ts-steps__item, .ts-steps--horizontal-cards .ts-steps__item { flex: 1 1 0; flex-direction: column; align-items: center; text-align: center; gap: 0; position: relative; padding: 0 var(--space-2); }
.ts-steps--horizontal .ts-steps__marker, .ts-steps--horizontal-cards .ts-steps__marker { position: relative; z-index: 1; margin-bottom: var(--space-4); }
.ts-steps--horizontal .ts-steps__item:not(:last-child)::after, .ts-steps--horizontal-cards .ts-steps__item:not(:last-child)::after,
.ts-steps--horizontal .ts-steps__item:not(:first-child)::before, .ts-steps--horizontal-cards .ts-steps__item:not(:first-child)::before {
	content: ""; position: absolute; top: 24px; width: 50%; height: 2px; background: var(--color-primary-200); z-index: 0;
}
.ts-steps--horizontal .ts-steps__item:not(:last-child)::after, .ts-steps--horizontal-cards .ts-steps__item:not(:last-child)::after { right: 0; }
.ts-steps--horizontal .ts-steps__item:not(:first-child)::before, .ts-steps--horizontal-cards .ts-steps__item:not(:first-child)::before { left: 0; }
.ts-steps--horizontal .ts-steps__body, .ts-steps--horizontal-cards .ts-steps__body { max-width: 190px; }
.ts-steps--horizontal .ts-steps__body h3, .ts-steps--horizontal-cards .ts-steps__body h3 { font-size: 1rem; margin-bottom: .25rem; }
.ts-steps--horizontal .ts-steps__body p, .ts-steps--horizontal-cards .ts-steps__body p { font-size: .875rem; }
.ts-steps--horizontal .ts-steps__cta, .ts-steps--horizontal-cards .ts-steps__cta { text-align: center; margin: var(--space-10) 0 0; }
.ts-steps--horizontal .ts-steps__item .ts-steps__number{
	border: 2px solid var(--action-primary-bg); 
}

.ts-steps--horizontal .ts-steps__item p {
	color: var(--text-muted);
}
.ts-steps--horizontal .ts-steps__item:not(:first-child) .ts-steps__number{
	background: var(--surface-card);
	color: var(--text-muted);
	border-color: var(--color-neutral-200);
}

.ts-steps--horizontal .ts-steps__item::before, .ts-steps--horizontal .ts-steps__item::after {
	background: var(--color-neutral-200) !important;
}

.ts-steps--horizontal .ts-steps__item:not(:first-child) h3 {
	color: var(--text-muted);
}

@media (max-width: 780px) {
	.ts-steps--horizontal .ts-steps__list, .ts-steps--horizontal-cards .ts-steps__list { flex-direction: column; align-items: stretch; gap: var(--space-6); }
	.ts-steps--horizontal .ts-steps__item, .ts-steps--horizontal-cards .ts-steps__item { flex-direction: row; text-align: left; align-items: flex-start; }
	.ts-steps--horizontal .ts-steps__item::before, .ts-steps--horizontal-cards .ts-steps__item::before,
	.ts-steps--horizontal .ts-steps__item::after, .ts-steps--horizontal-cards .ts-steps__item::after { display: none; }
	.ts-steps--horizontal .ts-steps__marker, .ts-steps--horizontal-cards .ts-steps__marker { margin-bottom: 0; margin-right: var(--space-4); }
	.ts-steps--horizontal .ts-steps__body, .ts-steps--horizontal-cards .ts-steps__body { max-width: none; }
}

/* Horizontal + gradient: same row layout, but each step has its own accent color and the connecting line blends between colors */
.ts-steps--horizontal-cards .ts-steps__number { box-shadow: 0 0 0 3px var(--color-neutral-0), var(--shadow-md); }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+1) .ts-steps__number { background: var(--color-primary-500); }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+2) .ts-steps__number { background: var(--color-warning-400); }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+3) .ts-steps__number { background: var(--color-success-400); }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+4) .ts-steps__number { background: var(--color-accent-500); }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+5) .ts-steps__number { background: var(--color-secondary-700); }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+6) .ts-steps__number { background: var(--color-secondary-900); }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+1)::after { background-image: linear-gradient(to right, var(--color-primary-500), var(--color-warning-400)); background-size: 200% 100%; background-position: left; }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+2)::before { background-image: linear-gradient(to right, var(--color-primary-500), var(--color-warning-400)); background-size: 200% 100%; background-position: right; }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+2)::after { background-image: linear-gradient(to right, var(--color-warning-400), var(--color-success-400)); background-size: 200% 100%; background-position: left; }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+3)::before { background-image: linear-gradient(to right, var(--color-warning-400), var(--color-success-400)); background-size: 200% 100%; background-position: right; }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+3)::after { background-image: linear-gradient(to right, var(--color-success-400), var(--color-accent-500)); background-size: 200% 100%; background-position: left; }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+4)::before { background-image: linear-gradient(to right, var(--color-success-400), var(--color-accent-500)); background-size: 200% 100%; background-position: right; }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+4)::after { background-image: linear-gradient(to right, var(--color-accent-500), var(--color-secondary-700)); background-size: 200% 100%; background-position: left; }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+5)::before { background-image: linear-gradient(to right, var(--color-accent-500), var(--color-secondary-700)); background-size: 200% 100%; background-position: right; }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+5)::after { background-image: linear-gradient(to right, var(--color-secondary-700), var(--color-secondary-900)); background-size: 200% 100%; background-position: left; }
.ts-steps--horizontal-cards .ts-steps__item:nth-child(6n+6)::before { background-image: linear-gradient(to right, var(--color-secondary-700), var(--color-secondary-900)); background-size: 200% 100%; background-position: right; }