/* Indispensables 2 - micrositio indispensables_2 */

/* Desktop / tablet: tabla de iconos sin scroll (como hasta ahora) */
.cms-content .indispensables-icons-scroll,
.cms-content--edit .indispensables-icons-scroll,
.elemento .indispensables-icons-scroll,
.indispensables-icons-scroll {
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	overflow-x: visible;
}

.cms-content table.indispensables-icons-table,
.cms-content--edit table.indispensables-icons-table,
.elemento table.indispensables-icons-table,
table.indispensables-icons-table {
	margin: 0 auto;
	border: 0;
	border-collapse: separate;
	border-spacing: 10px;
}

.cms-content table.indispensables-icons-table td,
.cms-content--edit table.indispensables-icons-table td,
.elemento table.indispensables-icons-table td,
table.indispensables-icons-table td {
	text-align: center;
	vertical-align: middle;
	border: 0;
}

.cms-content table.indispensables-icons-table img,
.cms-content--edit table.indispensables-icons-table img,
.elemento table.indispensables-icons-table img,
table.indispensables-icons-table img {
	vertical-align: middle;
	max-width: 300px;
	height: auto;
}

/*
 * Tablet (incluye iPad Pro a 1024px):
 * El layout carousel_text34_links14 pone texto a 3/4 y enlaces a 1/4
 * desde 992px (md). En tablet eso deja los enlaces al lado y encima
 * del contenido. Forzamos apilado hasta 1199px; desde 1200px (desktop) se mantiene 3/4 + 1/4.
 */
@media (max-width: 1199px) {
	body.microsite.indispensables_2.homepage--carousel_text34_links14 .grid-row > .three-fourths,
	body.microsite.indispensables_2.homepage--carousel_text34_links14 .grid-row > .one-fourth {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		left: auto !important;
		right: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Movil: scroll horizontal solo para los tres iconos */
@media (max-width: 767px) {
	.cms-content .indispensables-icons-scroll,
	.cms-content--edit .indispensables-icons-scroll,
	.elemento .indispensables-icons-scroll,
	.indispensables-icons-scroll {
		overflow-x: visible;
		max-width: 100%;
		padding: 0;
	}

	.cms-content table.indispensables-icons-table,
	.cms-content--edit table.indispensables-icons-table,
	.elemento table.indispensables-icons-table,
	table.indispensables-icons-table {
		display: block !important;
		width: 100% !important;
		border-collapse: collapse !important;
		border-spacing: 0 !important;
	}

	.cms-content table.indispensables-icons-table tbody,
	.cms-content--edit table.indispensables-icons-table tbody,
	.elemento table.indispensables-icons-table tbody,
	table.indispensables-icons-table tbody {
		display: block !important;
	}

	.cms-content table.indispensables-icons-table tr,
	.cms-content--edit table.indispensables-icons-table tr,
	.elemento table.indispensables-icons-table tr,
	table.indispensables-icons-table tr {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: scroll !important;
		-webkit-overflow-scrolling: touch;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 16px !important;
		box-sizing: border-box !important;
		gap: 16px !important;
		scrollbar-width: thin;
	}

	.cms-content table.indispensables-icons-table td,
	.cms-content--edit table.indispensables-icons-table td,
	.elemento table.indispensables-icons-table td,
	table.indispensables-icons-table td {
		display: block !important;
		flex: 0 0 280px !important;
		width: 280px !important;
		min-width: 280px !important;
		max-width: 280px !important;
		box-sizing: border-box !important;
		padding: 0 !important;
	}

	.cms-content table.indispensables-icons-table img,
	.cms-content--edit table.indispensables-icons-table img,
	.elemento table.indispensables-icons-table img,
	table.indispensables-icons-table img {
		width: 100% !important;
		max-width: 280px !important;
		height: auto !important;
	}
}