/*
 * Bloque: Contacto (cimentia/contacto)
 * CTA full-bleed: imagen de fondo + overlay oscuro + texto y botón.
 * HTML semántico BEM + tokens del tema (--cmt-*). Refinado desde export de Figma.
 */

.cmt-contacto {
	position: relative;
	box-sizing: border-box;
	/* Full-bleed: rompe el contenedor 1440 del tema (layout constreñido). */
	min-height: 537px;
	overflow: hidden;
	display: flex;
	align-items: center;
	background: var(--cmt-color-bg-dark);
}

.cmt-contacto__overley{
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Imagen de fondo como <img> editable (no background-image) */
.cmt-contacto__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 0;
}

/* Overlay oscuro para legibilidad del texto (sustituye al rectángulo del export) */
.cmt-contacto::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('assets/images/a9c5da1bc8382700ab788aa2b68667854af7dd92.png');
	background-size: cover;
	background-position: center;
	opacity: 0.8;
	pointer-events: none;
	z-index: 1;
}

/* Wrapper que constriñe el contenido al contenedor del tema */
.cmt-contacto__inner {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--cmt-container-max) + var(--cmt-container-pad) * 2);
	margin-inline: auto;
	padding-inline: var(--cmt-container-pad);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cmt-space-lg);
}

.cmt-contacto__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cmt-space-sm);
	max-width: 629px;
}

.cmt-contacto__title {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-h2);
	line-height: 1.14;
	color: var(--cmt-color-text-invert);
}

.cmt-contacto__desc {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-regular);
	font-size: var(--cmt-fs-lead);
	line-height: 1.33;
	color: var(--cmt-color-text-invert);
}

.cmt-contacto__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--cmt-space-xs) var(--cmt-space-sm);
	border-radius: var(--cmt-radius-md);
	background: var(--cmt-color-light);
	font-family: var(--cmt-font-mono);
	font-weight: var(--cmt-fw-regular);
	font-size: var(--cmt-fs-small);
	line-height: 1.5;
	color: var(--cmt-color-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.cmt-contacto__cta:hover,
.cmt-contacto__cta:focus-visible {
	opacity: 0.85;
}

@media (max-width: 1024px) {
	.cmt-contacto {
		min-height: 480px;
	}
}

@media (max-width: 768px) {
	.cmt-contacto {
		min-height: 420px;
	}

	.cmt-contacto__text {
		max-width: 100%;
	}
}