/*
 * Hero — Figma 1:28.
 * 1440x848, degradado 90deg #212121 -> #0f0f0f, columna de contenido de 528px
 * que arranca a 212px del borde superior (160 + 32 + 20).
 */

.mv-hero {
	position: relative;
	display: flex;
	min-height: 848px;
	align-items: flex-start;
	padding-top: 212px;
	padding-bottom: 128px;
	overflow: hidden;
	background: linear-gradient(90deg, var(--mv-hero-from) 0%, var(--mv-hero-to) 100%);
	color: var(--mv-white);
	isolation: isolate;
}

/* Video de fondo opcional (Personalizar > Hero). */
.mv-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Trama sutil del diseno sobre el degradado. */
.mv-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(90deg, rgb(0 0 0 / 0.03) 2.5%, rgb(0 0 0 / 0) 2.5%),
		linear-gradient(180deg, rgb(0 0 0 / 0.03) 2.5%, rgb(0 0 0 / 0) 2.5%);
}

/*
 * Con video de fondo la trama no basta: hace falta un velo que garantice la
 * legibilidad del texto. Cae de izquierda a derecha para que la columna de
 * contenido quede oscura y el lado derecho deje ver la imagen.
 */
.mv-hero--video::before {
	background-image:
		linear-gradient(
			90deg,
			rgb(15 15 15 / 0.94) 0%,
			rgb(15 15 15 / 0.86) 32%,
			rgb(15 15 15 / 0.6) 60%,
			rgb(15 15 15 / 0.45) 100%
		),
		linear-gradient(
			180deg,
			rgb(15 15 15 / 0.55) 0%,
			rgb(15 15 15 / 0.12) 26%,
			rgb(15 15 15 / 0.12) 72%,
			rgb(15 15 15 / 0.62) 100%
		);
}

/*
 * En movil el texto ocupa todo el ancho: el velo tiene que ser parejo.
 */
@media (max-width: 767px) {
	.mv-hero--video::before {
		background-image:
			linear-gradient(
				180deg,
				rgb(15 15 15 / 0.82) 0%,
				rgb(15 15 15 / 0.74) 55%,
				rgb(15 15 15 / 0.86) 100%
			);
	}
}

/* Quien pide menos movimiento se queda con el degradado del diseno. */
@media (prefers-reduced-motion: reduce) {
	.mv-hero__media {
		display: none;
	}

	.mv-hero--video::before {
		background-image:
			linear-gradient(90deg, rgb(0 0 0 / 0.03) 2.5%, rgb(0 0 0 / 0) 2.5%),
			linear-gradient(180deg, rgb(0 0 0 / 0.03) 2.5%, rgb(0 0 0 / 0) 2.5%);
	}
}

.mv-hero__inner {
	position: relative;
	width: 100%;
}

.mv-hero__content {
	display: flex;
	max-width: 528px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* ---------- Etiqueta ---------- */

.mv-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border: 1px solid var(--mv-hairline);
	border-radius: 9999px;
	background: rgb(255 255 255 / 0.12);
	color: var(--mv-hero-text);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.mv-hero__eyebrow-dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: #262626;
}

/* ---------- Titular ---------- */

.mv-hero__title {
	margin-top: 8px;
	font-family: var(--mv-font-serif);
	font-size: 72px;
	font-weight: 500;
	line-height: 72px;
	letter-spacing: -1.8px;
	color: var(--mv-white);
	text-wrap: balance;
}

.mv-hero__title em {
	font-style: italic;
	font-weight: 500;
	color: var(--mv-accent);
}

.mv-hero__title-dot {
	font-style: italic;
	color: var(--mv-hero-text);
}

/* ---------- Entradilla ---------- */

.mv-hero__lead {
	max-width: 512px;
	color: var(--mv-hero-text);
	font-size: 20px;
	font-weight: 300;
	line-height: 28px;
}

/* ---------- Acciones ---------- */

.mv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-top: 16px;
}

.mv-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--mv-speed) var(--mv-ease), color var(--mv-speed) var(--mv-ease), border-color var(--mv-speed) var(--mv-ease), opacity var(--mv-speed) var(--mv-ease), transform var(--mv-speed) var(--mv-ease);
}

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

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

.mv-hero__btn--primary {
	padding: 12px 32px;
	background: var(--mv-ink);
	color: var(--mv-white);
}

.mv-hero__btn--secondary {
	padding: 12px 32px;
	border: 1px solid var(--mv-hairline);
	background: var(--mv-white);
	color: var(--mv-ink);
}

.mv-hero__btn-icon {
	flex: none;
	width: 16px;
	height: 16px;
}

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

@media (max-width: 1023px) {
	.mv-hero {
		min-height: 0;
		padding-top: calc(var(--mv-header-h) + 88px);
		padding-bottom: 88px;
	}

	.mv-hero__title {
		font-size: clamp(40px, 7vw, 64px);
		line-height: 1;
		letter-spacing: -0.025em;
	}

	.mv-hero__lead {
		font-size: 18px;
		line-height: 26px;
	}
}

@media (max-width: 639px) {
	.mv-hero {
		padding-top: calc(var(--mv-header-h) + 56px);
		padding-bottom: 64px;
	}

	.mv-hero__content {
		gap: 20px;
	}

	/*
	 * Los saltos duros del diseno estan calculados para una columna de 512px:
	 * por debajo de 640px dejamos que el texto fluya. El espacio en el markup
	 * antes de cada <br> hace de separador al ocultarlo.
	 */
	.mv-hero__br,
	.mv-hero__lead br {
		display: none;
	}

	.mv-hero__eyebrow {
		font-size: 11px;
		letter-spacing: 0.2px;
	}

	.mv-hero__actions {
		width: 100%;
		gap: 12px;
	}

	.mv-hero__btn {
		width: 100%;
	}
}

/* ---------- Hover de botones ---------- */

.mv-hero__btn--primary:hover {
	opacity: 1;
	background: var(--mv-accent);
	color: var(--mv-white);
}

.mv-hero__btn--secondary:hover {
	opacity: 1;
	background: var(--mv-ink);
	color: var(--mv-white);
	border-color: var(--mv-ink);
}