/**
 * Fase 18 — experiência compartilhada das landings.
 * Carregada depois dos estilos específicos para transformar grades de cards em
 * sistemas editoriais e sustentar a narrativa scroll-linked sem pin.
 */

.bl-rb-signature {
	position: relative;
	margin-block: clamp(4.5rem, 9vw, 8rem);
	padding-block: clamp(3rem, 6vw, 5.5rem);
	border-block: 1px solid var(--bl-border);
	background: linear-gradient(90deg, transparent, rgba(61, 191, 176, .028) 50%, transparent);
}

.bl-rb-signature__header {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(20rem, 1.18fr);
	column-gap: clamp(2.5rem, 7vw, 7rem);
	align-items: end;
	margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}

.bl-rb-signature__header .bl-rb-eyebrow {
	grid-column: 1 / -1;
}

.bl-rb-signature__title {
	margin: 0;
}

.bl-rb-signature__lead {
	max-inline-size: 52ch;
	margin: 0;
}

.bl-rb-signature__stage {
	position: relative;
	min-inline-size: 0;
}

.bl-rb-signature__rail {
	position: absolute;
	inset-block: 1.5rem;
	inset-inline-start: calc(2rem - .5px);
	inline-size: 1px;
	background: var(--bl-border);
	overflow: hidden;
}

.bl-rb-signature__rail > span {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background: linear-gradient(var(--bl-color-brand), var(--bl-color-brand-light));
	transform: scaleY(0);
	transform-origin: top;
}

.bl-rb-signature__steps {
	position: relative;
	z-index: 1;
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-rb-signature__step {
	position: relative;
	display: grid;
	grid-template-columns: 4rem minmax(9rem, .58fr) minmax(16rem, 1fr);
	align-items: center;
	min-block-size: 5.8rem;
	border-block-end: 1px solid var(--bl-border);
	color: var(--bl-text-muted);
	transition: color var(--bl-duration-interface) var(--bl-ease-out), border-color var(--bl-duration-interface) ease;
}

.bl-rb-signature__step:first-child {
	border-block-start: 1px solid var(--bl-border);
}

.bl-rb-signature__index {
	font: 600 .7rem/1 var(--bl-font-ui);
	letter-spacing: .08em;
}

.bl-rb-signature__step-copy {
	display: contents;
}

.bl-rb-signature__step strong {
	color: currentColor;
	font: 600 clamp(.94rem, .89rem + .22vw, 1.08rem)/1.2 var(--bl-font-ui);
	letter-spacing: .07em;
}

.bl-rb-signature__step-copy > span {
	max-inline-size: 56ch;
	color: var(--bl-text-muted);
	font: 400 .92rem/1.5 var(--bl-font-ui);
	transition: color var(--bl-duration-interface) ease;
}

.bl-rb-signature__node {
	position: absolute;
	inset-inline-start: calc(2rem - .31rem);
	inline-size: .62rem;
	block-size: .62rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background: var(--bl-surface-1);
	transition: border-color var(--bl-duration-interface) ease, background-color var(--bl-duration-interface) ease, box-shadow var(--bl-duration-interface) ease, transform var(--bl-duration-interface) var(--bl-ease-out);
}

.bl-rb-signature__step.is-active,
.bl-rb-signature__step.is-complete {
	color: var(--bl-text-primary);
	border-color: rgba(61, 191, 176, .18);
}

.bl-rb-signature__step.is-active .bl-rb-signature__step-copy > span,
.bl-rb-signature__step.is-complete .bl-rb-signature__step-copy > span {
	color: var(--bl-text-secondary);
}

.bl-rb-signature__step.is-active .bl-rb-signature__node,
.bl-rb-signature__step.is-complete .bl-rb-signature__node {
	border-color: var(--bl-color-brand);
	background: var(--bl-color-brand);
}

.bl-rb-signature__step.is-active .bl-rb-signature__node {
	transform: scale(1.35);
	box-shadow: 0 0 0 .38rem rgba(61, 191, 176, .1), 0 0 1.25rem rgba(61, 191, 176, .32);
}

.bl-rb-signature__signal-field {
	display: none;
}

.bl-rb-signature--traffic .bl-rb-signature__stage {
	padding-inline-start: clamp(1rem, 6vw, 6rem);
}

.bl-rb-signature--traffic .bl-rb-signature__signal-field {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: block;
	inline-size: clamp(2rem, 6vw, 5rem);
	overflow: hidden;
	pointer-events: none;
}

.bl-rb-signature--traffic .bl-rb-signature__signal-field span {
	position: absolute;
	inset-block-start: calc((var(--bl-signal-index) * 7.1%) + 1%);
	inset-inline-start: calc((var(--bl-signal-index) % 4) * 18%);
	inline-size: .28rem;
	block-size: .28rem;
	border-radius: 50%;
	background: var(--bl-text-muted);
	opacity: .42;
}

.bl-rb-signature--commercial .bl-rb-signature__node {
	border-radius: .12rem;
}

.bl-rb-signature--success .bl-rb-signature__node {
	box-shadow: 0 0 0 .22rem rgba(61, 191, 176, .035);
}

.bl-rb-signature--civil .bl-rb-signature__step strong {
	letter-spacing: .045em;
}

/* As grades de conteúdo deixam de parecer uma sequência de cards SaaS. */
:is(.bl-rb-ts-bottlenecks__grid, .bl-rb-sh-bottlenecks__grid,
	.bl-rb-ts-capabilities__grid, .bl-rb-cs-capabilities__grid, .bl-rb-sh-capabilities__grid,
	.bl-rb-uau-system__bottlenecks-grid, .bl-rb-uau-system__grid,
	.bl-rb-civil-system__symptoms-grid, .bl-rb-civil-system__capabilities-grid) {
	gap: 0;
	border-block-start: 1px solid var(--bl-border);
}

:is(.bl-rb-ts-bn-card, .bl-rb-sh-bn-card, .bl-rb-ts-cap-card, .bl-rb-cs-cap-card,
	.bl-rb-sh-cap-card, .bl-rb-us-problem-card, .bl-rb-us-card, .bl-rb-cs-symptom-card) {
	min-block-size: 100%;
	padding: clamp(1.25rem, 2.4vw, 2rem);
	border: 0;
	border-inline-end: 1px solid var(--bl-border);
	border-block-end: 1px solid var(--bl-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

:is(.bl-rb-ts-bn-card, .bl-rb-sh-bn-card, .bl-rb-ts-cap-card, .bl-rb-cs-cap-card,
	.bl-rb-sh-cap-card, .bl-rb-us-problem-card, .bl-rb-us-card, .bl-rb-cs-symptom-card):hover {
	transform: none;
	background: rgba(61, 191, 176, .025);
}

:is(.bl-rb-us-card, .bl-rb-cs-cap-card)::before {
	display: none;
}

/* Metodologia e critérios passam a funcionar como ledger/timeline editorial. */
:is(.bl-rb-tp-method__grid, .bl-rb-cp-method__grid, .bl-rb-sp-method__grid) {
	gap: 0;
	border-block-start: 1px solid var(--bl-border);
}

:is(.bl-rb-tp-stage, .bl-rb-cp-stage, .bl-rb-sp-stage) {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border: 0;
	border-inline-end: 1px solid var(--bl-border);
	border-block-end: 1px solid var(--bl-border);
	border-radius: 0;
	background: transparent;
}

:is(.bl-rb-tp-stage, .bl-rb-cp-stage, .bl-rb-sp-stage):hover {
	transform: none;
	background: rgba(61, 191, 176, .025);
}

:is(.bl-rb-tp-fit__grid, .bl-rb-cp-fit__grid, .bl-rb-sp-fit__grid,
	.bl-rb-uau-process__fit-grid, .bl-rb-civil-process__fit-grid) {
	gap: 0;
	border-block-start: 1px solid var(--bl-border);
}

:is(.bl-rb-tp-fit__card, .bl-rb-cp-fit__card, .bl-rb-sp-fit__card,
	.bl-rb-uau-process__fit-card, .bl-rb-civil-process__fit-card) {
	padding: 1.15rem 0;
	border: 0;
	border-block-end: 1px solid var(--bl-border);
	border-radius: 0;
	background: transparent;
}

:is(.bl-rb-tp-closing__box, .bl-rb-cp-closing__box, .bl-rb-sp-closing__box,
	.bl-rb-uau-process__closing, .bl-rb-civil-process__closing) {
	border-inline: 0;
	border-radius: 0;
	background: rgba(61, 191, 176, .025);
	box-shadow: none;
}

@media (max-width: 1023px) {
	.bl-rb-signature__header {
		grid-template-columns: 1fr;
		gap: var(--bl-space-4);
	}

	.bl-rb-signature__lead {
		margin-block-start: var(--bl-space-2);
	}

	.bl-rb-signature__step {
		grid-template-columns: 3.5rem minmax(8rem, .62fr) minmax(12rem, 1fr);
	}

	.bl-rb-signature__rail,
	.bl-rb-signature__node {
		inset-inline-start: calc(1.75rem - .5px);
	}

	.bl-rb-signature__node {
		inset-inline-start: calc(1.75rem - .31rem);
	}
}

@media (max-width: 767px) {
	.bl-rb-signature {
		margin-block: clamp(3.5rem, 16vw, 5rem);
		padding-block: clamp(2.5rem, 12vw, 4rem);
	}

	.bl-rb-signature--traffic .bl-rb-signature__stage {
		padding-inline-start: 0;
	}

	.bl-rb-signature--traffic .bl-rb-signature__signal-field {
		display: none;
	}

	.bl-rb-signature__step {
		grid-template-columns: 3rem 1fr;
		gap: .35rem 0;
		min-block-size: 7rem;
		padding-block: 1.15rem;
	}

	.bl-rb-signature__step-copy {
		display: grid;
		gap: .35rem;
	}

	.bl-rb-signature__step-copy > span {
		font-size: .86rem;
	}

	.bl-rb-signature__rail {
		inset-inline-start: calc(1.5rem - .5px);
	}

	.bl-rb-signature__node {
		inset-inline-start: calc(1.5rem - .31rem);
	}

	:is(.bl-rb-ts-bn-card, .bl-rb-sh-bn-card, .bl-rb-ts-cap-card, .bl-rb-cs-cap-card,
		.bl-rb-sh-cap-card, .bl-rb-us-problem-card, .bl-rb-us-card, .bl-rb-cs-symptom-card,
		.bl-rb-tp-stage, .bl-rb-cp-stage, .bl-rb-sp-stage) {
		border-inline-end: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bl-rb-signature__rail > span {
		transform: none;
	}

	.bl-rb-signature__step {
		color: var(--bl-text-primary);
	}

	.bl-rb-signature__step-copy > span {
		color: var(--bl-text-secondary);
	}
}

/* Modifier para a variante Commercial (sem subtítulo, header centralizado) */
.bl-rb-signature--commercial .bl-rb-signature__header {
	grid-template-columns: 1fr;
	text-align: center;
}

.bl-rb-signature--commercial .bl-rb-signature__title {
	margin-inline: auto;
}