/* ============================================================
   IMPRENTA BUIN
   MARKETING SLIDER
   ============================================================ */

.ib-marketing {
	--ibm-black: #181a1f;
	--ibm-muted: #727a85;
	--ibm-line: #e2e5e8;
	--ibm-soft: #f6f7f8;
	--ibm-white: #ffffff;
	--ibm-red: #e4003a;

	width: 100vw;

	margin-left:
		calc(50% - 50vw);

	padding:
		60px
		24px
		64px;

	background:
		#ffffff;

	color:
		var(--ibm-black);
}


.ib-marketing *,
.ib-marketing *::before,
.ib-marketing *::after {
	box-sizing:
		border-box;
}



/* ============================================================
   CONTENEDOR — 1300 PX
   ============================================================ */

.ib-marketing__wrap {
	width:
		min(1300px, 100%);

	margin-inline:
		auto;
}



/* ============================================================
   CABECERA
   ============================================================ */

.ib-marketing__header {
	display:
		flex;

	align-items:
		flex-end;

	justify-content:
		space-between;

	gap:
		40px;

	margin-bottom:
		26px;
}


.ib-marketing__heading {
	max-width:
		720px;
}


.ib-marketing__heading h2 {
	margin:
		0;

	color:
		var(--ibm-black) !important;

	font-size:
		clamp(
			28px,
			3vw,
			38px
		) !important;

	line-height:
		1.08;

	font-weight:
		800;

	letter-spacing:
		-.035em;

	text-wrap:
		balance;
}


.ib-marketing__intro {
	max-width:
		680px;

	margin:
		9px
		0
		0;

	color:
		var(--ibm-muted) !important;

	font-size:
		14px !important;

	line-height:
		1.55;
}



/* ============================================================
   CONTROLES
   ============================================================ */

.ib-marketing__controls {
	display:
		flex;

	align-items:
		center;

	gap:
		8px;

	flex:
		0 0 auto;
}


.ib-marketing__arrow {
	width:
		44px;

	height:
		44px;

	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	padding:
		0;

	border:
		1px solid
		#d8dde1;

	border-radius:
		50%;

	background:
		#ffffff;

	color:
		var(--ibm-black);

	font-family:
		inherit;

	font-size:
		19px;

	line-height:
		1;

	cursor:
		pointer;

	appearance:
		none;

	-webkit-appearance:
		none;

	transition:
		background-color .18s ease,
		border-color .18s ease,
		color .18s ease,
		transform .18s ease,
		opacity .18s ease;
}


.ib-marketing__arrow:disabled {
	opacity:
		.32;

	cursor:
		default;
}



/* ============================================================
   VIEWPORT DEL SLIDER
   ============================================================ */

.ib-marketing__viewport {
	width:
		100%;

	overflow-x:
		auto;

	overflow-y:
		hidden;

	scroll-snap-type:
		x mandatory;

	scroll-behavior:
		smooth;

	scrollbar-width:
		none;

	-ms-overflow-style:
		none;

	-webkit-overflow-scrolling:
		touch;

	overscroll-behavior-inline:
		contain;
}


.ib-marketing__viewport::-webkit-scrollbar {
	display:
		none;
}



/* ============================================================
   TRACK
   ============================================================ */

.ib-marketing__track {
	display:
		flex;

	gap:
		16px;

	width:
		max-content;
}



/* ============================================================
   TARJETA
   4 VISIBLES EN ESCRITORIO
   ============================================================ */

.ib-marketing-card {
	flex:
		0 0
		calc(
			(1300px - 48px) / 4
		);

	width:
		calc(
			(1300px - 48px) / 4
		);

	min-width:
		0;

	scroll-snap-align:
		start;

	border:
		1px solid
		var(--ibm-line);

	border-radius:
		15px;

	overflow:
		hidden;

	background:
		var(--ibm-white);

	transition:
		transform .20s ease,
		border-color .20s ease,
		box-shadow .20s ease;
}


.ib-marketing-card__link {
	display:
		flex;

	flex-direction:
		column;

	height:
		100%;

	color:
		inherit !important;

	text-decoration:
		none !important;
}



/* ============================================================
   FOTO
   ============================================================ */

.ib-marketing-card__media {
	width:
		100%;

	aspect-ratio:
		1.42 / 1;

	margin:
		0;

	overflow:
		hidden;

	background:
		var(--ibm-soft);
}


.ib-marketing-card__media img {
	display:
		block;

	width:
		100% !important;

	height:
		100% !important;

	object-fit:
		cover;

	transition:
		transform .30s ease;
}



/* ============================================================
   CONTENIDO
   ============================================================ */

.ib-marketing-card__content {
	flex:
		1;

	padding:
		17px
		17px
		16px;
}


.ib-marketing-card__category {
	display:
		block;

	margin-bottom:
		8px;

	color:
		#858d98;

	font-size:
		8px;

	line-height:
		1.2;

	font-weight:
		800;

	letter-spacing:
		.09em;

	text-transform:
		uppercase;
}


.ib-marketing-card__content h3 {
	margin:
		0;

	color:
		var(--ibm-black) !important;

	font-size:
		17px !important;

	line-height:
		1.25;

	font-weight:
		700;

	letter-spacing:
		-.02em;
}


.ib-marketing-card__content p {
	margin:
		8px
		0
		0;

	color:
		var(--ibm-muted) !important;

	font-size:
		12.5px !important;

	line-height:
		1.55;
}



/* ============================================================
   FOOTER
   ============================================================ */

.ib-marketing-card__footer {
	min-height:
		42px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		12px;

	padding:
		0
		17px;

	border-top:
		1px solid
		#edf0f2;

	color:
		#525b66;

	font-size:
		11px;

	line-height:
		1;

	font-weight:
		800;

	transition:
		color .18s ease,
		background-color .18s ease;
}


.ib-marketing-card__footer > span:last-child {
	font-size:
		16px;

	transition:
		transform .18s ease;
}



/* ============================================================
   HOVER ESCRITORIO
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

	.ib-marketing-card:hover {
		transform:
			translateY(-3px);

		border-color:
			#ccd1d6;

		box-shadow:
			0
			14px
			30px
			rgba(18, 24, 31, .07);
	}


	.ib-marketing-card:hover
	.ib-marketing-card__media img {
		transform:
			scale(1.025);
	}


	.ib-marketing-card:hover
	.ib-marketing-card__footer {
		color:
			var(--ibm-red);

		background:
			#fafafa;
	}


	.ib-marketing-card:hover
	.ib-marketing-card__footer > span:last-child {
		transform:
			translateX(3px);
	}


	.ib-marketing__arrow:not(:disabled):hover {
		background:
			var(--ibm-red);

		border-color:
			var(--ibm-red);

		color:
			#ffffff;

		transform:
			translateY(-1px);
	}

}



/* ============================================================
   PANTALLAS < 1348 PX
   MANTIENE 4 COLUMNAS ADAPTADAS
   ============================================================ */

@media (max-width: 1348px) {

	.ib-marketing-card {
		flex-basis:
			calc(
				(100vw - 96px) / 4
			);

		width:
			calc(
				(100vw - 96px) / 4
			);
	}

}



/* ============================================================
   TABLET
   2 PRODUCTOS VISIBLES
   ============================================================ */

@media (max-width: 900px) {

	.ib-marketing {
		padding:
			52px
			18px
			56px;
	}


	.ib-marketing__track {
		gap:
			14px;
	}


	.ib-marketing-card {
		flex:
			0 0
			calc(
				(100vw - 50px) / 2
			);

		width:
			calc(
				(100vw - 50px) / 2
			);
	}

}



/* ============================================================
   MÓVIL
   1 PRODUCTO POR SLIDE
   ============================================================ */

@media (max-width: 600px) {

	.ib-marketing {
		padding:
			44px
			12px
			48px;
	}


	.ib-marketing__header {
		align-items:
			flex-end;

		gap:
			16px;

		margin-bottom:
			20px;
	}


	.ib-marketing__heading {
		min-width:
			0;

		flex:
			1;
	}


	.ib-marketing__heading h2 {
		font-size:
			clamp(
				25px,
				7.6vw,
				31px
			) !important;
	}


	.ib-marketing__intro {
		margin-top:
			8px;

		font-size:
			13px !important;
	}


	/* ========================================================
	   FLECHAS COMPACTAS
	   ======================================================== */

	.ib-marketing__controls {
		gap:
			6px;
	}


	.ib-marketing__arrow {
		width:
			40px;

		height:
			40px;

		font-size:
			17px;
	}


	/* ========================================================
	   1 TARJETA COMPLETA
	   ======================================================== */

	.ib-marketing__track {
		gap:
			12px;
	}


	.ib-marketing-card {
		flex:
			0 0
			calc(100vw - 24px);

		width:
			calc(100vw - 24px);

		border-radius:
			13px;
	}


	.ib-marketing-card__media {
		aspect-ratio:
			1.48 / 1;
	}


	.ib-marketing-card__content {
		padding:
			16px
			16px
			15px;
	}


	.ib-marketing-card__category {
		margin-bottom:
			7px;

		font-size:
			7.5px;
	}


	.ib-marketing-card__content h3 {
		font-size:
			17px !important;
	}


	.ib-marketing-card__content p {
		margin-top:
			7px;

		font-size:
			12.5px !important;

		line-height:
			1.5;
	}


	.ib-marketing-card__footer {
		min-height:
			42px;

		padding:
			0
			16px;

		font-size:
			10.5px;
	}

}



/* ============================================================
   MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 390px) {

	.ib-marketing {
		padding-inline:
			10px;
	}


	.ib-marketing-card {
		flex-basis:
			calc(100vw - 20px);

		width:
			calc(100vw - 20px);
	}


	.ib-marketing__header {
		gap:
			10px;
	}


	.ib-marketing__arrow {
		width:
			38px;

		height:
			38px;
	}

}



/* ============================================================
   FOCUS
   ============================================================ */

.ib-marketing-card__link:focus-visible,
.ib-marketing__arrow:focus-visible,
.ib-marketing__viewport:focus-visible {
	outline:
		3px solid
		rgba(228, 0, 58, .20);

	outline-offset:
		3px;
}



/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.ib-marketing__viewport {
		scroll-behavior:
			auto;
	}


	.ib-marketing-card,
	.ib-marketing-card__media img,
	.ib-marketing-card__footer,
	.ib-marketing__arrow {
		transition:
			none !important;
	}

}