.success {
	position: relative;
	overflow: hidden;
	background-color: var(--ciclic-blue);
	color: var(--ciclic-cream);
}

.success__brand-band {
	display: flex;
	align-items: flex-end;
	min-height: clamp(12rem, 17.083vw, 15.375rem);
	padding: clamp(4rem, 6.944vw, 6.25rem) clamp(2rem, 4.167vw, 3.75rem) clamp(1.25rem, 1.806vw, 1.625rem);
}

.success__logo {
	width: clamp(8rem, 11.25vw, 10.125rem);
	height: auto;
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity 0.7s var(--ease-out-expo),
		transform 0.7s var(--ease-out-expo);
}

.success.is-visible .success__logo {
	opacity: 1;
	transform: translateY(0);
}

.success__location-band {
	position: relative;
	z-index: 2;
	background-color: var(--ciclic-cream);
	min-height: clamp(6rem, 8.194vw, 7.375rem);
	padding: clamp(1.25rem, 2.083vw, 1.875rem) clamp(2rem, 4.167vw, 3.75rem);
}

.success__location {
	margin: 0;
	color: var(--ciclic-blue);
	font-size: 64px;
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.045em;
}

.success__case-band {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	min-height: clamp(26rem, 32.153vw, 28.9375rem);
	background-color: var(--ciclic-dark);
	padding: clamp(2.5rem, 3.472vw, 3.125rem) clamp(2rem, 4.167vw, 3.75rem);
}

@media (min-width: 1024px) {
	.success__case-band {
		grid-template-columns: minmax(0, 43.75rem) minmax(18rem, 1fr);
		align-items: end;
		padding-bottom: clamp(2.5rem, 3.472vw, 3.125rem);
	}
}

.success__copy {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	max-width: 45rem;
}

@media (min-width: 720px) {
	.success__copy {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.success__col {
	opacity: 0;
	transform: translateY(1.75rem);
	transition:
		opacity 0.7s var(--ease-out-expo),
		transform 0.7s var(--ease-out-expo);
}

.success.is-visible .success__col[data-success-col="reto"] {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.18s;
}

.success.is-visible .success__col[data-success-col="solucion"] {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.32s;
}

.success__col-title {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	color: var(--ciclic-cream);
	font-size: 56px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
}

.success__col-desc {
	margin: 0;
	color: var(--ciclic-cream);
	font-size: clamp(1rem, 1.4vw, 1.35rem);
	font-weight: 300;
	line-height: 1.35;
}

.success__image {
	position: relative;
	z-index: 3;
	width: min(70vw, 24rem);
	margin: 0 auto calc(clamp(2.25rem, 5vw, 4.5rem) * -1);
	opacity: 0;
	transition: opacity 0.9s var(--ease-out-expo) 0.25s;
	will-change: transform, opacity;
}

.success.is-visible .success__image {
	opacity: 1;
}

.success__image img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media (min-width: 1024px) {
	.success__image {
		position: absolute;
		bottom: -10%;
		right: clamp(4rem, 9.375vw, 8.4375rem);
		width: min(31.25vw, 28.125rem);
		margin: 0;
	}
}

@media (min-width: 1280px) {
	.success__image {
		width: 28.125rem;
	}
}