/* -----------------------------------------
   Soulmix - Sección "Creado por profesionales" (texto + imagen 3D)
   ----------------------------------------- */

.about {
	padding: clamp(120px, calc(120 / 1920 * 100vw), 168px) 0 clamp(180px, calc(180 / 1920 * 100vw), 252px);
	/* El `translateX` de la imagen la saca de la columna; sin esto provoca
	   scroll horizontal en toda la página. */
	overflow: hidden;
}

/* La sección va más estrecha que el `.container` general (1920px): así el
   texto entra hacia dentro sin necesidad de padding en la columna. */
.about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(64px, calc(64 / 1920 * 100vw), 90px);
	align-items: center;
	max-width: clamp(1600px, calc(1600 / 1920 * 100vw), 2240px);
}

.about__title {
	font-family: var(--font-condensed);
	font-weight: 900;
	font-size: clamp(64px, calc(64 / 1920 * 100vw), 90px);
	line-height: 0.94;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	max-width: clamp(620px, calc(620 / 1920 * 100vw), 868px);
}

.about__text {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: clamp(15px, calc(15 / 1920 * 100vw), 21px);
	line-height: normal;
	margin-top: clamp(24px, calc(24 / 1920 * 100vw), 34px);
	max-width: clamp(440px, calc(440 / 1920 * 100vw), 616px);
}

/* El primer párrafo separa del título con el mismo gap que hay entre el
   último párrafo y el botón (48px). Entre párrafos se mantiene en 24px. */
.about__title + .about__text {
	margin-top: clamp(48px, calc(48 / 1920 * 100vw), 67px);
}

.about__cta {
	margin-top: clamp(48px, calc(48 / 1920 * 100vw), 67px);
}

.about__media img {
	width: 100%;
	height: auto;
	display: block;
	/* Desplazamiento visual sin tocar el layout ni el ancho de la columna. */
	transform: translateX(60px);
}