/*
 * Bloque: Hero (cimentia/hero)
 * HTML semántico BEM + tokens del tema (--cmt-*). Refinado desde export de Figma.
 */

.cmt-hero {
	position: relative;
	box-sizing: border-box;
	/* Full-bleed: rompe el contenedor 1440 del tema (layout constreñido). */
	width: 100%;
	min-height: 41rem;
	display: flex;
	align-items: center;
	/* !Codigo antiguo */
	/* overflow: hidden; */
	/* Reemplazamos 'overflow: hidden' por clip-path */
    /* Esto crea una "ventana" que recorta la imagen fija al tamaño de .cmt-hero */
    clip-path: inset(0 0 0 0);
}

.cmt-hero__media {
	/* !Codigo antiguo */
	/* position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0; */

	/* Mantiene la imagen anclada al viewport de la pantalla */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Ocupa el alto de la pantalla */
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none; /* Evita interferencias con clics */
	
}

/* ---- Contenido (titular + subtítulo) ---- */
.cmt-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: calc(var(--cmt-container-max) + var(--cmt-container-pad) * 2);
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cmt-space-md);
}

.cmt-hero__title {
	margin: 0;
	max-width: 414px;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-display);
	line-height: 1;
	color: var(--cmt-color-text-invert);
}

.cmt-hero__subtitle {
	margin: 0;
	max-width: 414px;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-regular);
	font-size: var(--cmt-fs-lead);
	line-height: 32px;
	color: var(--cmt-color-text-invert);
}

@media (max-width: 1024px) {
	.cmt-hero__content {
		padding-inline: var(--cmt-container-pad);
	}
}

@media (max-width: 768px) {

	.cmt-hero {
		min-height: 35rem;
	}

	.cmt-hero__content {
		padding-inline: var(--cmt-container-pad);
	}

	.cmt-hero__title,
	.cmt-hero__subtitle {
		max-width: 100%;
	}
}