.bb-scale {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	padding: var(--bb-space-4xl) var(--bb-space-xl);
	background-image: linear-gradient(to bottom, var(--bb-color-bg-card), var(--bb-color-bg-base));
}

.bb-scale__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.bb-scale__bg-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-scale__bg-lines--v {
	opacity: 0.44;
}

.bb-scale__bg-lines--h {
	opacity: 0.167;
}

.bb-scale__container {
	position: relative;
	z-index: 1;
	max-width: 1237px;
	margin: 0 auto;
}

.bb-scale__header {
	margin-bottom: 68px;
}

.bb-scale__eyebrow {
	margin: 0 0 var(--bb-space-md);
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: 0.99px;
	text-transform: uppercase;
	color: var(--bb-color-accent-primary);
}

.bb-scale__header .bb-scale__heading {
	margin: 0 0 var(--bb-space-md);
	max-width: 630px;
	font-family: var(--bb-font-display);
	font-weight: var(--bb-font-heading-h2-weight);
	font-size: var(--bb-font-heading-h2-size);
	line-height: var(--bb-font-heading-h2-line-height);
	letter-spacing: var(--bb-font-heading-h2-letter-spacing);
	color: var(--bb-color-text-primary);
}

.bb-scale__quote {
	margin: 0;
	font-family: var(--bb-font-display);
	font-weight: var(--bb-font-body-large-weight);
	font-size: var(--bb-font-body-large-size);
	line-height: var(--bb-font-body-large-line-height);
	color: var(--bb-color-text-muted);
}

.bb-scale__grid {
	display: grid;
	grid-template-columns: minmax(320px, 440px) 1fr;
	column-gap: 17px;
	align-items: stretch;
}

.bb-scale__card {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: var(--bb-radius-xl);
	border: 1px solid var(--bb-color-bg-footer-gradient-end);
	background-image: linear-gradient(-55deg, var(--bb-color-bg-footer-gradient-end) 4.03%, var(--bb-color-bg-card) 95.24%);
}

.bb-scale__card .bb-scale__card-title {
	margin: 0;
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 23px;
	line-height: normal;
	color: var(--bb-color-text-secondary);
}

.bb-scale__card-desc {
	margin: var(--bb-space-sm) 0 0;
	font-family: var(--bb-font-display);
	font-weight: 500;
	font-size: 14px;
	line-height: normal;
	color: var(--bb-color-text-secondary);
}

.bb-scale__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-space-xs);
	margin-top: var(--bb-space-lg);
}

.bb-scale__tag {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 var(--bb-space-sm);
	border-radius: var(--bb-radius-pill);
	border: 1px solid #3e3e3e;
	background-color: var(--bb-color-bg-card-dark);
	font-family: var(--bb-font-display);
	font-weight: 500;
	font-size: 12px;
	color: var(--bb-color-text-primary);
	white-space: nowrap;
}

.bb-scale__tag--accent {
	border-color: transparent;
	background-color: var(--bb-color-accent-primary);
	color: var(--bb-color-accent-on-accent);
}

/* Tarjeta: Site Reliability Engineering */

.bb-scale__card--sre {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--bb-space-2xl);
	border-color: var(--bb-color-accent-gradient-end);
}

.bb-scale__sre-chart {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bb-scale__sre-chart-line {
	position: absolute;
	left: 3px;
	top: 55px;
	width: 437px;
	height: auto;
}

.bb-scale__sre-chart-guide {
	position: absolute;
}

.bb-scale__sre-chart-guide--1 {
	left: 207px;
	top: 55px;
	width: 61px;
}

.bb-scale__sre-chart-guide--2 {
	left: 294px;
	top: 214px;
	width: 35px;
	transform: rotate(90deg);
	transform-origin: top left;
}

.bb-scale__sre-chart-dot {
	position: absolute;
	left: 190px;
	top: 42px;
	width: 21px;
	height: 22px;
}

.bb-scale__sre-chart-label {
	position: absolute;
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 9px;
	color: var(--bb-color-text-secondary);
	white-space: nowrap;
}

.bb-scale__sre-chart-label--uptime {
	left: 274px;
	top: 45px;
}

.bb-scale__sre-chart-label--recovered {
	left: 303px;
	top: 232px;
	width: 78px;
	white-space: normal;
}

/* Columna derecha (Talent Deployment + fila inferior) */

.bb-scale__col-right {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.bb-scale__card--talent {
	padding: var(--bb-space-2xl);
	min-height: 224px;
	background-image: url('scale-talent-bg.webp');
	background-size: cover;
	background-position: center;
}

.bb-scale__card--talent .bb-scale__card-title,
.bb-scale__card--talent .bb-scale__card-desc {
	position: relative;
	max-width: 400px;
}

/* Fila inferior: Managed Application Services + SLA */

.bb-scale__row-bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	flex: 1;
}

.bb-scale__card--managed {
	padding: var(--bb-space-2xl);
}

.bb-scale__card--sla {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--bb-space-md);
	padding: var(--bb-space-2xl);
	text-align: center;
}

.bb-scale__sla-stat {
	margin: 0;
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 37px;
	line-height: normal;
	background-image: linear-gradient(139deg, #d9d9d9 29.17%, #737373 65.79%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.bb-scale__sla-status {
	margin: 0;
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: normal;
	background-image: linear-gradient(157deg, #d9d9d9 29.17%, #737373 65.79%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.bb-scale__sla-bar {
	width: 213px;
	height: 30px;
	padding: 3px;
	box-sizing: border-box;
	border-radius: var(--bb-radius-pill);
	background-color: var(--bb-color-bg-footer-gradient-end);
}

.bb-scale__sla-bar-fill {
	height: 100%;
	border-radius: var(--bb-radius-pill);
	background-image: linear-gradient(91deg, var(--bb-color-accent-gradient-end) 9.83%, #49c99f 24.87%, var(--bb-color-accent-primary) 77.99%);
	box-shadow: 1px 0 8.7px 0 rgba(199, 255, 223, 0.68), 1px 3px 4px 0 rgba(0, 0, 0, 0.25);
}

@media (max-width: 1024px) {
	.bb-scale__grid {
		grid-template-columns: 1fr;
	}

	.bb-scale__row-bottom {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.bb-scale {
		padding: var(--bb-space-3xl) var(--bb-space-lg);
	}

	.bb-scale__header {
		margin-bottom: var(--bb-space-2xl);
	}

	.bb-scale__sre-chart {
		display: none;
	}

	.bb-scale__card--sre {
		padding: var(--bb-space-2xl);
	}
}