/*
 * Proyecto destacado: Menos Pausa — Figma 1:173.
 * Fondo #171717 con un panel diagonal translucido en la mitad derecha,
 * rejilla de 12 columnas (7 de texto + 5 de imagen) con 48px de canal.
 */

.mv-project {
	position: relative;
	overflow: hidden;
	padding-block: 96px;
	background: var(--mv-ink);
	color: var(--mv-white);
}

/* Panel diagonal decorativo de la mitad derecha. */
.mv-project::after {
	content: "";
	position: absolute;
	top: 0;
	right: -11%;
	bottom: 0;
	left: 50%;
	z-index: 0;
	pointer-events: none;
	background: rgb(38 38 38 / 0.2);
	transform: skewX(12deg);
}

.mv-project__inner {
	position: relative;
	z-index: 1;
	display: grid;
	/*
	 * 7 y 5 columnas de la rejilla de 12 con el canal de 48px descontado.
	 * minmax(0, ...) evita que el texto, que en el diseno sobresale unos px de
	 * su columna, ensanche la pista y desplace la imagen.
	 */
	grid-template-columns: minmax(0, 624fr) minmax(0, 432fr);
	gap: 48px;
	align-items: center;
}

/* ---------- Columna de texto ---------- */

.mv-project__content {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

.mv-project__badge {
	display: inline-flex;
	padding: 4px 12px;
	border: 1px solid #404040;
	border-radius: 9999px;
	color: var(--mv-accent);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.3px;
}

.mv-project__title {
	color: var(--mv-white);
	font-family: var(--mv-font-serif);
	font-size: 48px;
	font-weight: 500;
	line-height: 48px;
	letter-spacing: -1.2px;
}

.mv-project__title em {
	display: block;
	color: #f690ff;
	font-style: italic;
	font-weight: 500;
}

.mv-project__body {
	/*
	 * En Figma las lineas del parrafo miden hasta 639px y sobresalen de la
	 * columna de 624px (la ultima llega a 692). Se respeta ese ancho para
	 * conservar exactamente los mismos saltos de linea del diseno.
	 */
	width: 704px;
	max-width: none;
	font-size: 18px;
	font-weight: 300;
	line-height: 29.25px;
}

.mv-project__body p + p {
	margin-top: 29.25px;
}

/* ---------- Lista ---------- */

.mv-project__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.mv-project__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
}

.mv-project__icon {
	display: flex;
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	align-items: center;
	justify-content: center;
}

.mv-project__icon svg {
	width: 17.92px;
	height: 17.92px;
}

/* ---------- Boton ---------- */

.mv-project__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 12px 24px;
	border-radius: 8px;
	background: var(--mv-white);
	color: var(--mv-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	transition: opacity var(--mv-speed) var(--mv-ease), transform var(--mv-speed) var(--mv-ease);
}

.mv-project__cta:hover {
	opacity: 0.88;
}

.mv-project__cta:active {
	transform: translateY(1px);
}

.mv-project__cta svg {
	flex: none;
	width: 18px;
	height: 18px;
}

/* ---------- Imagen ---------- */

.mv-project__figure {
	position: relative;
	justify-self: end;
	width: 320px;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid #404040;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	aspect-ratio: 2 / 3;
}

.mv-project__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mv-project__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(56.365deg, rgb(255 255 255 / 0.05) 0%, rgb(255 255 255 / 0) 100%);
}

/* ---------- Responsive ---------- */

/* Por debajo del ancho de los saltos del diseno, el texto fluye en su columna. */
@media (max-width: 1279px) {
	.mv-project__body {
		width: auto;
		max-width: 100%;
	}

	.mv-project__body br {
		display: none;
	}
}

@media (max-width: 1023px) {
	.mv-project {
		padding-block: 72px;
	}

	/* La diagonal solo funciona con las dos columnas a la vista. */
	.mv-project::after {
		display: none;
	}

	.mv-project__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.mv-project__figure {
		justify-self: start;
	}

	.mv-project__title {
		font-size: 38px;
		line-height: 40px;
		letter-spacing: -0.8px;
	}

	.mv-project__body {
		font-size: 17px;
		line-height: 27px;
	}

	.mv-project__body p + p {
		margin-top: 27px;
	}
}

@media (max-width: 639px) {
	.mv-project {
		padding-block: 56px;
	}

	.mv-project__content {
		gap: 24px;
	}

	.mv-project__figure {
		justify-self: stretch;
		width: 100%;
	}

	.mv-project__cta {
		justify-content: center;
		width: 100%;
	}
}