/* ============================================================================
   Inner Mobility — estilos específicos de la página /inner-mobility/
   ----------------------------------------------------------------------------
   Independiente del overrides para no contaminar el resto. Cargado solo
   desde inner-mobility/index.html y es/inner-mobility/index.html.

   Reutiliza la paleta de Mimi (cream / dorado / verde profundo) y las
   tipografías globales (Marcellus + IBM Plex Sans). La estructura del
   mockup (6 secciones) se respeta tal cual.
============================================================================ */

.im-page {
	color: #333;
	font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

.im-page section {
	padding: 96px 8%;
}
.im-page section.im-alt {
	background: #f3f3e7;
}

.im-eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #b89e6f;
	margin-bottom: 18px;
	font-weight: 500;
}

.im-h2 {
	font-family: "Marcellus", Georgia, serif;
	font-size: clamp(32px, 4.4vw, 52px);
	color: #182d27;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.005em;
	margin: 0 0 22px;
	max-width: 18ch;
}

.im-p {
	max-width: 64ch;
	font-size: 19px;
	color: #555;
	margin: 0;
}

/* ─── Hero con video de fondo ──────────────────────────────────────────── */
.im-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	padding: 80px 24px;
	overflow: hidden;
	isolation: isolate;
}
.im-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.im-hero__bg video,
.im-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.im-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(24, 45, 39, 0.55) 0%,
		rgba(24, 45, 39, 0.45) 60%,
		rgba(24, 45, 39, 0.7) 100%
	);
	z-index: -1;
}
.im-hero__content {
	max-width: 880px;
}
.im-hero__eyebrow {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #d1be97;
	margin-bottom: 24px;
	font-weight: 500;
}
.im-hero__title {
	font-family: "Marcellus", Georgia, serif;
	font-size: clamp(40px, 6.5vw, 80px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.06em;
	margin: 0 0 18px;
	text-transform: uppercase;
}
.im-hero__subtitle {
	font-family: "Marcellus", Georgia, serif;
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 400;
	font-style: italic;
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.92);
}
.im-hero__text {
	max-width: 640px;
	margin: 0 auto 36px;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.85);
}

/* ─── Botón pill ────────────────────────────────────────────────────────── */
.im-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 36px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.im-btn--solid {
	background: #182d27;
	color: #fff;
}
.im-btn--solid:hover {
	background: #2a4438;
	transform: translateY(-1px);
}
.im-btn--inverse {
	background: #fff;
	color: #182d27;
}
.im-btn--inverse:hover {
	background: #f3f3e7;
	transform: translateY(-1px);
}

/* ─── Sección con video lateral ─────────────────────────────────────────── */
.im-section--media {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: center;
}
.im-section--media.im-section--reverse {
	direction: rtl;
}
.im-section--media.im-section--reverse > * {
	direction: ltr;
}
.im-section--media .im-body {
	max-width: 540px;
}
.im-section--media .im-media {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: #eee;
	box-shadow: 0 25px 60px rgba(24, 45, 39, 0.15);
}
.im-section--media .im-media video,
.im-section--media .im-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.im-section--media.im-section--landscape .im-media {
	aspect-ratio: 16 / 9;
}

/* ─── Grid de 4 cards (sección "The Method") ────────────────────────────── */
.im-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin-top: 56px;
}
.im-card {
	background: #fff;
	padding: 32px 28px;
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(24, 45, 39, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.im-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(24, 45, 39, 0.1);
}
.im-card__title {
	font-family: "Marcellus", Georgia, serif;
	font-size: 22px;
	color: #182d27;
	font-weight: 400;
	margin: 0 0 12px;
}
.im-card__body {
	font-size: 15px;
	color: #555;
	line-height: 1.55;
	margin: 0;
}

/* ─── Sección final CTA (fondo oscuro) ──────────────────────────────────── */
.im-final {
	background: linear-gradient(135deg, #182d27 0%, #2a4438 100%);
	color: #fff;
	text-align: center;
}
.im-final .im-eyebrow {
	color: #d1be97;
}
.im-final .im-h2 {
	color: #fff;
	margin-inline: auto;
	margin-bottom: 18px;
}
.im-final .im-p {
	margin: 0 auto 36px;
	color: rgba(255, 255, 255, 0.85);
}

/* ─── Galería opcional final ────────────────────────────────────────────── */
.im-extra {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 48px;
}
.im-extra video {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 16px;
	background: #000;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.im-page section {
		padding: 64px 24px;
	}
	.im-section--media,
	.im-section--reverse {
		grid-template-columns: 1fr;
		direction: ltr;
		gap: 32px;
	}
	.im-section--media .im-media {
		max-width: 480px;
		margin-inline: auto;
	}
	.im-h2 {
		max-width: 100%;
	}
}
@media (max-width: 560px) {
	.im-page section {
		padding: 48px 20px;
	}
	.im-hero {
		min-height: 80vh;
		padding: 60px 20px;
	}
}