/*
 * Bloque: ¿Hablamos? (cimentia/hablamos)
 * Sección de contacto: eyebrow + titular y tres columnas (ubicación, teléfono, e-mail).
 * HTML semántico BEM + tokens del tema (--cmt-*). Refinado desde export de Figma.
 */

.cmt-hablamos {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--cmt-container-max);
	margin-inline: auto;
}

/* Wrapper interno: sangría de diseño (80px arriba, 168px laterales, 80px abajo). */
.cmt-hablamos__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cmt-space-lg);
	/* 48px de separación entre intro y columnas -> --cmt-space-lg (40px). */
	padding: var(--cmt-space-xl) 0 var(--cmt-space-xl) 0;
}

/* Intro: eyebrow + titular */
.cmt-hablamos__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cmt-space-sm);
	max-width: 683px;
}

.cmt-hablamos__eyebrow {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-body);
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--cmt-color-text);
	text-transform: uppercase;
}

.cmt-hablamos__title {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-display);
	line-height: 1.125;
	color: var(--cmt-color-text);
}

/* Fila de columnas de contacto */
.cmt-hablamos__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--cmt-space-lg);
}

.cmt-hablamos__item {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cmt-space-lg);
}

.cmt-hablamos__label {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-h3);
	line-height: 1.25;
	color: var(--cmt-color-text);
}

.cmt-hablamos__value {
	margin: 0;
	font-family: var(--cmt-font-base);
	font-weight: var(--cmt-fw-light);
	font-size: var(--cmt-fs-body);
	line-height: 1.5;
	color: var(--cmt-color-text);
}

.cmt-hablamos__link {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.cmt-hablamos__link:hover,
.cmt-hablamos__link:focus-visible {
	text-decoration: underline;
	opacity: 0.85;
}

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

	.cmt-hablamos__list {
		gap: var(--cmt-space-md);
	}
}

@media (max-width: 768px) {
	.cmt-hablamos__inner {
		padding: var(--cmt-space-lg) var(--cmt-container-pad);
		gap: var(--cmt-space-md);
	}

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

	.cmt-hablamos__list {
		flex-direction: column;
		gap: var(--cmt-space-lg);
	}

	.cmt-hablamos__item {
		flex-basis: auto;
		width: 100%;
		gap: var(--cmt-space-sm);
	}
}