/**
 * Mirrihue — Sobre Nosotros
 */


/* =========================================================
   GENERATEPRESS RESET — SOBRE NOSOTROS
   about.css solo se carga en esta página,
   por lo que podemos normalizar el layout completo.
   ========================================================= */

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-about-hero {
	position: relative;

	min-height: 330px;

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

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

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

	overflow: hidden;
}

.mh-about-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.30) 100%
		);
}

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

	padding-block:
		clamp(90px, 9vw, 130px)
		44px;
}

.mh-about-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-about-hero__breadcrumb a {
	color: var(--mh-color-primary);
}

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

.mh-about-hero__content {
	max-width: 660px;
}

.mh-about-hero__content h1 {
	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-about-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 ABOUT
   ========================================================= */

.mh-about__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-about__eyebrow::before {
	content: "";

	display: inline-block;

	width: 16px;
	height: 2px;

	margin-right: 8px;

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

	vertical-align: middle;
}

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

	margin-bottom: 28px;
}

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

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

	letter-spacing: -0.03em;
}


/* =========================================================
   STORY
   ========================================================= */

.mh-about-story {
	background: var(--mh-color-white);
}

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

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

	align-items: center;

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

.mh-about-story__content h2 {
	margin-bottom: 22px;

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

	letter-spacing: -0.03em;
}

.mh-about-story__copy {
	max-width: 620px;

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

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

.mh-about-story__copy p:last-child {
	margin-bottom: 0;
}

.mh-about-story__media {
	margin: 0;

	overflow: hidden;

	min-height: 390px;

	background:
		linear-gradient(
			135deg,
			#202020,
			#0f0f0f
		);

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

.mh-about-story__media img {
	width: 100%;
	height: 100%;

	min-height: 390px;

	object-fit: cover;
}


/* =========================================================
   METRICS
   ========================================================= */

.mh-about-metrics {
	background: var(--mh-color-white);
}

.mh-about-metrics__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	background:
		linear-gradient(
			135deg,
			#171717,
			#0d0d0d
		);

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

	overflow: hidden;
}

.mh-about-metric {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-height: 132px;

	padding: 22px;

	text-align: center;
}

.mh-about-metric + .mh-about-metric {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.mh-about-metric strong {
	color: var(--mh-color-primary);

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

.mh-about-metric span {
	margin-top: 8px;

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

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

	text-transform: uppercase;
}


/* =========================================================
   PILLARS
   ========================================================= */

.mh-about-pillars {
	background: var(--mh-color-white);
}

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

.mh-about-pillars__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: var(--mh-card-gap);
}

.mh-about-pillar {
	position: relative;

	min-height: 220px;

	padding: 24px;

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

	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-md);

	transition:
		transform var(--mh-transition-base),
		box-shadow var(--mh-transition-base),
		border-color var(--mh-transition-base);
}

.mh-about-pillar:hover {
	transform: translateY(-4px);

	border-color: rgba(215, 25, 32, 0.24);

	box-shadow: var(--mh-shadow-card-hover);
}

.mh-about-pillar__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 36px;
	height: 36px;

	margin-bottom: 24px;

	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-about-pillar h3 {
	margin-bottom: 10px;

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

.mh-about-pillar p {
	margin: 0;

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

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


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

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

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

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

.mh-about-process__grid {
	position: relative;

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

	gap: 28px;
}

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

	position: absolute;

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

	height: 1px;

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

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

.mh-about-step__top {
	margin-bottom: 22px;
}

.mh-about-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-about-step h3 {
	margin-bottom: 8px;

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

	text-transform: uppercase;
}

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

	margin: 0;

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

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


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

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


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

@media (max-width: 980px) {

	.mh-about-story__grid {
		grid-template-columns: 1fr;
	}

	.mh-about-story__media {
		min-height: 340px;
	}

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

	.mh-about-metric:nth-child(3),
	.mh-about-metric:nth-child(4) {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.mh-about-metric:nth-child(3) {
		border-left: 0;
	}

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

}


@media (max-width: 768px) {

	.mh-about-hero {
		min-height: 270px;
	}

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

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

	.mh-about-story > .mh-container,
	.mh-about-pillars > .mh-container,
	.mh-about-process > .mh-container {
		padding-block: var(--mh-section-space-mobile);
	}

}


@media (max-width: 560px) {

	.mh-about-metrics__grid,
	.mh-about-pillars__grid,
	.mh-about-process__grid {
		grid-template-columns: 1fr;
	}

	.mh-about-metric + .mh-about-metric {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.mh-about-pillar {
		min-height: auto;
	}

	.mh-about-story__media,
	.mh-about-story__media img {
		min-height: 280px;
	}

}