/*
 * U15 · Hablemos (componentes.md): la página de contacto. Titular y
 * entradilla (R2, h1), contacto directo, formulario y cierre, en ese
 * orden en el HTML, que es el de una columna (TV y M). En E y TA, dos
 * columnas, como en la previa: el texto a la izquierda, con el cierre
 * bajo la entradilla y el contacto directo al pie, y el formulario a la
 * derecha. El formulario tiene su hoja (formulario.css). Las dos solo se
 * cargan en esta plantilla.
 */

.loha-hablemos {
	display: grid;
	row-gap: var(--separacion);
	padding: var(--area-segura) var(--margen) var(--separacion);
}

/* El formulario no pasa de un ancho cómodo cuando va a todo el ancho
   (TV). */
.loha-hablemos__formulario {
	width: 100%;
	max-width: 40rem;
}

/* El cierre: la frase final, con la letra del cuerpo (base.css,
   .loha-parrafos), como el cierre del 05. */

/* ── Contacto directo ────────────────────────────────────── */
/* Filete corto, la frase y el teléfono y el correo en texto de lectura,
   con su icono de Lucide delante, como en el epílogo (U10). Áreas de
   44 px. Al pasar o enfocar, --c-texto y subrayado. */
.loha-hablemos__rotulo {
	margin-top: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
	color: var(--c-texto-2);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

ul.loha-hablemos__datos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Como en el cierre del 05: 4 px entre las dos áreas de 44 px, que
	   se tocaban. */
	gap: 0.25rem;
	margin-top: 0.25rem;
	font-size: var(--fs-lectura);
	line-height: var(--lh-interfaz);
}

.loha-hablemos__dato {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	min-height: var(--control-minimo);
	color: var(--c-texto-2);
	text-decoration: none;
	text-underline-offset: 0.2em;
	transition: color var(--t-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
	.loha-hablemos__dato:hover {
		color: var(--c-texto);
		text-decoration: underline;
		text-decoration-thickness: 1px;
	}
}

.loha-hablemos__dato:focus-visible {
	color: var(--c-texto);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* ── E y TA: dos columnas ───────────────────────────────── */
/* Sobre la retícula de 12 (espaciado.md): el texto en las seis primeras,
   una de aire y el formulario en las cinco últimas, como en la previa.
   El orden visual de la izquierda no es el del HTML: el cierre sube bajo
   la entradilla y el contacto directo baja al pie de la columna, a la
   altura del final del formulario. El tabulador sigue el HTML: los
   enlaces del contacto directo y después el formulario, de izquierda a
   derecha. */
@media (min-width: 1024px) {
	.loha-hablemos {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: auto auto 1fr;
		column-gap: var(--medianil);
		row-gap: 0;
	}

	.loha-hablemos__cabeza,
	.loha-hablemos__cierre,
	.loha-hablemos__directo {
		grid-column: 1 / span 6;
	}

	.loha-hablemos__cabeza {
		grid-row: 1;
	}

	.loha-hablemos__cierre {
		grid-row: 2;
		margin-top: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	}

	.loha-hablemos__directo {
		grid-row: 3;
		align-self: end;
		padding-top: var(--separacion);
	}

	.loha-hablemos__formulario {
		grid-column: 8 / span 5;
		grid-row: 1 / span 3;
		max-width: none;
	}
}

/* TA: el titular, repartido entero. Sus dos líneas escritas no caben en
   la columna de 1024 a 1111 px y cada una se partía en dos, con dos
   palabras solas («Hablemos / de lo que / necesita / tu espacio.»). Como
   en M (encabezado.css), las líneas en línea y balance reparte el
   titular: «Hablemos de / lo que necesita / tu espacio.». Desde 1112 sale
   igual que con los saltos del campo. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.loha-pagina--hablemos .loha-encabezado__titular .loha-linea {
		display: inline;
	}
}