.qs-solutions {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 1;
	min-height: 480px;
	max-height: 960px;
	overflow: hidden;
	background: var(--th-gray-100);
}

.qs-solutions__slides {
	position: absolute;
	inset: 0;
}

.qs-solutions__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	transform: translateX(100%);
	transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
	z-index: 0;
	background: var(--th-gray-100);
}

.qs-solutions__slide.is-active {
	transform: translateX(0%);
	z-index: 2;
}

.qs-solutions__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	z-index: 0;
}

.qs-solutions__inner {
	z-index: 2;
	width: 100%;
	max-width: 1400px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.qs-solutions__content {
	max-width: 620px;
}

.qs-solutions__content h1 {
	color: #06065c;
	line-height: 1.2;
	margin-bottom: 28px;
}

.qs-solutions__title-line1 {
	display: inline-block;
	font-size: 44px;
	font-weight: 700;
}

.qs-solutions__title-line2 {
	display: inline-block;
	font-size: 28px;
	font-weight: 400;
}

.qs-solutions__content .button {
	background: #69c41a;
	color: var(--th-white);
}

.qs-solutions__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 3;
	margin-top: 0;
}

.qs-solutions__dots:empty {
	display: none;
}

.qs-solutions__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

/* Overlay scrims, matching the gradient/treatment already used on each
   destination page's own hero for the same image. */
.qs-solutions__slide--lazer::before,
.qs-solutions__slide--eventos::before,
.qs-solutions__slide--motivia::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.qs-solutions__slide--lazer::before {
	background: rgba(6, 6, 20, 0.4);
}

.qs-solutions__slide--eventos::before {
	background: linear-gradient(90deg, rgba(6, 6, 18, 0.85) 0%, rgba(6, 6, 18, 0.55) 45%, rgba(6, 6, 18, 0.05) 80%);
}

.qs-solutions__slide--motivia .qs-solutions__bg {
	object-position: bottom;
}

.qs-solutions__badge {
	display: block;
	height: 32px;
	width: auto;
	margin-bottom: 20px;
}

.qs-solutions__content h2,
.qs-solutions__slide--corporativas .qs-solutions__content h1,
.qs-solutions__slide--lazer .qs-solutions__content h1,
.qs-solutions__slide--eventos .qs-solutions__content h1,
.qs-solutions__slide--motivia .qs-solutions__content h1 {
	color: #06065c;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.2;
	max-width: 450px;
	margin-bottom: 28px;
}

.qs-solutions__content p {
	font-size: 19px;
	font-weight: 500;
	color: var(--th-navy-soft);
	max-width: 450px;
	margin-bottom: 28px;
}

.qs-solutions__cta {
	background: var(--th-navy);
	color: var(--th-white);
}

.qs-solutions__mockup {
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 1000px;
	max-width: 55%;
}

.qs-solutions__mockup img {
	display: block;
	width: 100%;
	height: auto;
}

/* Per-brand slide colors */
.qs-solutions__slide--corporativas .qs-solutions__cta {
	background: var(--th-amber);
}

.qs-solutions__slide--lazer .qs-solutions__content h2,
.qs-solutions__slide--lazer .qs-solutions__content h1 {
	color: var(--th-white);
	font-weight: 400;
}

.qs-solutions__slide--lazer .qs-solutions__cta {
	background: var(--th-orange);
}

.qs-solutions__slide--eventos .qs-solutions__content h2,
.qs-solutions__slide--eventos .qs-solutions__content h1 {
	color: var(--th-white);
}

.qs-solutions__slide--eventos .qs-solutions__cta {
	background: #d82f20;
}

.qs-solutions__slide--motivia .qs-solutions__cta {
	background: #f2711c;
}

.qs-solutions__slide--motivia .qs-solutions__badge {
	height: 56px;
}

@media (max-width: 980px) {
	.qs-solutions {
		aspect-ratio: 4 / 3;
		min-height: 420px;
	}

	.qs-solutions__content h2 {
		font-size: 26px;
		max-width: 100%;
	}

	.qs-solutions__title-line1 {
		font-size: 32px;
	}

	.qs-solutions__title-line2 {
		font-size: 20px;
	}

	/* object-position:center (desktop default) crops the couple — the
	   photo's subject — off the right edge once the frame goes from
	   2:1 to a much narrower mobile aspect ratio. */
	.qs-solutions__slide--lazer .qs-solutions__bg {
		object-position: 70% center;
	}
}

@media (max-width: 600px) {
	.qs-solutions {
		min-height: 620px;
	}

	.qs-solutions__slide {
		align-items: flex-start;
	}

	.qs-solutions__inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 28px;
		padding-top: 40px;
		padding-bottom: 24px;
	}

	.qs-solutions__mockup {
		height: 42%;
		max-width: 55%;
	}

	/* Slide 1 (default/video): video sits centered below the title,
	   instead of the full-bleed background it is on desktop. */
	.qs-solutions__slide--default {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding-top: 40px;
		padding-bottom: 24px;
		gap: 24px;
	}

	.qs-solutions__slide--default .qs-solutions__inner {
		order: 1;
		height: auto;
		padding-top: 0;
		padding-bottom: 0;
	}

	.qs-solutions__slide--default .qs-solutions__video {
		position: static;
		order: 2;
		width: 190%;
		height: auto;
		aspect-ratio: auto;
		border-radius: 16px;
		object-position: -230px -50px;
	}

	/* Slide 2 (corporativas): mockup sits centered below the title,
	   instead of floating on the right like on desktop. */
	.qs-solutions__slide--corporativas .qs-solutions__mockup {
		position: static;
		align-self: center;
		right: auto;
		top: auto;
		transform: none;
		height: auto;
		width: min(320px, 80%);
		max-width: 320px;
	}

	/* Slide 5 (motivia): the products only occupy the right half of this
	   photo (the left half is empty backdrop for the desktop text
	   column), pinned to the right edge so it no longer sits behind the
	   text column. */
	.qs-solutions__slide--motivia {
		background: #d2cdca;
	}

	.qs-solutions__slide--motivia .qs-solutions__bg {
		inset: 0 0 0 auto;
		margin-top: 50px;
		object-fit: cover;
		object-position: 80% center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qs-solutions__slide {
		transition: none;
	}
}