/* -----------------------------------------
   Soulmix - Sección "Distribuidores" (card con foto + texto)
   ----------------------------------------- */

.distributors {
	padding: clamp(40px, calc(40 / 1920 * 100vw), 56px) 0 clamp(120px, calc(120 / 1920 * 100vw), 168px);
}

.distributors__card {
	display: grid;
	grid-template-columns: 50% 50%;
	/* Mismo gap que la sección Feature. */
	gap: clamp(64px, calc(64 / 1920 * 100vw), 90px);
	align-items: center;
	background-color: #363633;
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
}

.distributors__media {
	border-radius: clamp(20px, calc(20 / 1920 * 100vw), 28px);
	overflow: hidden;
}

.distributors__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.distributors__content {
	/* Igual que en `.feature`: el espacio entre foto y texto es el `gap` del
	   grid (64px) MÁS este padding (64px) = 128px. */
	padding-left: clamp(64px, calc(64 / 1920 * 100vw), 90px);
	padding-right: clamp(64px, calc(64 / 1920 * 100vw), 90px);
}

.distributors__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(480px, calc(480 / 1920 * 100vw), 672px);
}

.distributors__text {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: clamp(24px, calc(24 / 1920 * 100vw), 34px);
	line-height: normal;
	letter-spacing: -0.02em;
	margin-top: clamp(24px, calc(24 / 1920 * 100vw), 34px);
	max-width: clamp(420px, calc(420 / 1920 * 100vw), 588px);
}

.distributors__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, calc(16 / 1920 * 100vw), 22px);
	margin-top: clamp(48px, calc(48 / 1920 * 100vw), 67px);
}

.btn--recheio {
	background-color: #008141;
	color: var(--color-text);
}