/**
 * Mirrihue — Soluciones y Fabricación
 */


/* =========================================================
   GENERATEPRESS RESET
   ========================================================= */

body #page {
	width: 100%;
	max-width: none;
}

body #content,
body .site-content {
	display: block !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #primary,
body .content-area {
	float: none !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;
}

body #right-sidebar,
body #left-sidebar {
	display: none !important;
}


/* =========================================================
   HERO
   ========================================================= */

.mh-solutions-hero {
	position: relative;

	min-height: 360px;

	display: flex;
	align-items: flex-end;

	color: var(--mh-color-white);

	background:
		var(--mh-solutions-hero-image, url("../img/solutions-hero.jpg"))
		center 48% / cover no-repeat,
		var(--mh-color-black);

	overflow: hidden;
}

.mh-solutions-hero__overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.95) 0%,
			rgba(0, 0, 0, 0.82) 46%,
			rgba(0, 0, 0, 0.26) 100%
		);
}

.mh-solutions-hero__container {
	position: relative;
	z-index: 2;

	padding-block:
		clamp(92px, 9vw, 132px)
		46px;
}

.mh-solutions-hero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 9px;

	margin-bottom: 14px;

	color: rgba(255, 255, 255, 0.64);

	font-size: var(--mh-text-label);
	font-weight: var(--mh-font-weight-semibold);
}

.mh-solutions-hero__breadcrumb a {
	color: var(--mh-color-primary);
}

.mh-solutions-hero__breadcrumb a:hover {
	color: var(--mh-color-white);
}

.mh-solutions-hero__content {
	max-width: 680px;
}

.mh-solutions-hero__content h1 {
	max-width: 650px;

	margin-bottom: 12px;

	color: var(--mh-color-white);

	font-size: var(--mh-text-page-title);
	line-height: 1;

	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.mh-solutions-hero__content p {
	max-width: 620px;

	margin: 0;

	color: rgba(255, 255, 255, 0.82);

	font-size: var(--mh-text-body-lg);
	line-height: 1.55;
}


/* =========================================================
   GLOBAL
   ========================================================= */

.mh-solutions__eyebrow {
	margin-bottom: 10px;

	color: var(--mh-color-primary);

	font-size: var(--mh-text-label);
	font-weight: var(--mh-font-weight-bold);

	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mh-solutions__eyebrow::before {
	content: "";

	display: inline-block;

	width: 16px;
	height: 2px;

	margin-right: 8px;

	background: var(--mh-color-primary);

	vertical-align: middle;
}

.mh-solutions-section-header {
	max-width: 760px;

	margin-bottom: 28px;
}

.mh-solutions-section-header h2 {
	margin: 0;

	font-size: var(--mh-text-section-title);
	line-height: 1.04;

	letter-spacing: -0.03em;
}


/* =========================================================
   INTRO
   ========================================================= */

.mh-solutions-intro {
	background: var(--mh-color-white);
}

.mh-solutions-intro > .mh-container {
	padding-block: var(--mh-section-space);
}

.mh-solutions-intro__grid {
	display: grid;
	grid-template-columns:
		minmax(0, 0.85fr)
		minmax(0, 1.15fr);

	align-items: center;

	gap: clamp(48px, 7vw, 92px);
}

.mh-solutions-intro__content h2 {
	margin-bottom: 22px;

	font-size: var(--mh-text-section-title);
	line-height: 1.03;

	letter-spacing: -0.03em;
}

.mh-solutions-intro__copy {
	max-width: 620px;

	color: var(--mh-color-muted);

	font-size: var(--mh-text-body);
	line-height: var(--mh-line-height-body);
}

.mh-solutions-intro__copy p:last-child {
	margin-bottom: 0;
}

.mh-solutions-intro__media {
	margin: 0;

	overflow: hidden;

	min-height: 390px;

	background: var(--mh-color-surface);

	border-radius: var(--mh-radius-md);
}

.mh-solutions-intro__media img {
	width: 100%;
	height: 100%;

	min-height: 390px;

	object-fit: cover;
}


/* =========================================================
   PROCESS
   ========================================================= */

.mh-solutions-process {
	background: var(--mh-color-surface);

	border-top: 1px solid var(--mh-color-border);
	border-bottom: 1px solid var(--mh-color-border);
}

.mh-solutions-process > .mh-container {
	padding-block: 48px 56px;
}

.mh-solutions-process__grid {
	position: relative;

	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 28px;
}

.mh-solutions-process__grid::before {
	content: "";

	position: absolute;

	top: 18px;
	left: 7%;
	right: 7%;

	height: 1px;

	background: var(--mh-color-border);
}

.mh-solutions-step {
	position: relative;
	z-index: 2;
}

.mh-solutions-step__top {
	margin-bottom: 20px;
}

.mh-solutions-step__top span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	color: var(--mh-color-white);
	background: var(--mh-color-primary);

	border-radius: 50%;

	font-size: var(--mh-text-label);
	font-weight: var(--mh-font-weight-bold);
}

.mh-solutions-step h3 {
	margin-bottom: 8px;

	font-size: var(--mh-text-card-title);

	text-transform: uppercase;
}

.mh-solutions-step p {
	max-width: 250px;

	margin: 0;

	color: var(--mh-color-muted);

	font-size: var(--mh-text-body-sm);
	line-height: 1.55;
}


/* =========================================================
   FABRICACIÓN ADAPTADA
   ========================================================= */

.mh-solutions-adapt {
	background: var(--mh-color-white);
}

.mh-solutions-adapt > .mh-container {
	padding-block: var(--mh-section-space);
}

.mh-solutions-adapt__grid {
	display: grid;
	grid-template-columns:
		minmax(0, 0.9fr)
		minmax(0, 1.1fr);

	align-items: start;
	gap: clamp(48px, 7vw, 92px);
}

.mh-solutions-adapt__intro h2 {
	margin-bottom: 18px;

	font-size: var(--mh-text-section-title);
	line-height: 1.03;
	letter-spacing: -0.03em;
}

.mh-solutions-adapt__copy {
	max-width: 560px;

	color: var(--mh-color-muted);

	font-size: var(--mh-text-body);
	line-height: var(--mh-line-height-body);
}

.mh-solutions-adapt__copy p:last-child {
	margin-bottom: 0;
}

.mh-solutions-adapt__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	border-top: 1px solid var(--mh-color-border);
	border-left: 1px solid var(--mh-color-border);
}

.mh-solutions-adapt__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);

	gap: 16px;

	min-height: 178px;
	padding: 26px;

	border-right: 1px solid var(--mh-color-border);
	border-bottom: 1px solid var(--mh-color-border);
}

.mh-solutions-adapt__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	color: var(--mh-color-primary);

	border: 1px solid rgba(215, 25, 32, 0.35);
	border-radius: var(--mh-radius-sm);

	font-size: var(--mh-text-label);
	font-weight: var(--mh-font-weight-bold);
}

.mh-solutions-adapt__item h3 {
	margin-bottom: 8px;

	font-size: var(--mh-text-card-title);
	line-height: 1.2;
}

.mh-solutions-adapt__item p {
	margin: 0;

	color: var(--mh-color-muted);

	font-size: var(--mh-text-body-sm);
	line-height: 1.55;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.mh-solutions-page a:focus-visible {
	outline: 2px solid var(--mh-color-primary);
	outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

	.mh-solutions-intro__grid,
	.mh-solutions-adapt__grid {
		grid-template-columns: 1fr;
	}

	.mh-solutions-process__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mh-solutions-process__grid::before {
		display: none;
	}

}


@media (max-width: 768px) {

	.mh-solutions-hero {
		min-height: 280px;
	}

	.mh-solutions-hero__container {
		padding-block: 92px 38px;
	}

	.mh-solutions-hero__content p {
		font-size: var(--mh-text-body);
	}

	.mh-solutions-intro > .mh-container,
	.mh-solutions-adapt > .mh-container {
		padding-block: var(--mh-section-space-mobile);
	}

	.mh-solutions-process > .mh-container {
		padding-block: 40px var(--mh-section-space-mobile);
	}

}


@media (max-width: 560px) {

	.mh-solutions-adapt__items {
		grid-template-columns: 1fr;
	}

	.mh-solutions-process__grid {
		grid-template-columns: 1fr;
	}

	.mh-solutions-intro__media,
	.mh-solutions-intro__media img {
		min-height: 280px;
	}

}