/*
 * R6 · Dos columnas (componentes.md): encabezado y contenido (texto,
 * lista o piezas), con separador opcional.
 *
 * Como en las previas, la primera columna mide lo que su encabezado: la
 * línea va inmediatamente después del titular y el contenido empieza
 * justo detrás de ella. fit-content(60%) da el ancho real del encabezado
 * (las líneas escritas del titular, sin partir) y solo lo limita si
 * pasara del 60 %; entonces el titular se reparte con balance.
 *
 *   --separador   línea vertical entre las dos
 *   --amplia      más aire a los lados de la línea (03.3)
 *
 * Apiladas por debajo de 1024 px; el separador vertical pasa a ser una
 * regla corta horizontal entre las dos partes.
 */

.loha-dos-columnas {
	/* Hueco a cada lado del separador: unos 40 px a 1672, como en la previa. */
	--dos-columnas-hueco: clamp(1.25rem, 2.4vw, 3rem);
	--dos-columnas: fit-content(60%) minmax(0, 1fr);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--separacion);
}

/* --amplia: como en la previa del 03.3, la línea sigue al encabezado con
   más aire que el hueco (unos 96 px a 1600, frente a 38) y el contenido
   la sigue a unos 60. El tope del 60 % es para el encabezado, sin ese
   aire: si no, «El proyecto no termina» (810 px a 80) se partía a 1672. */
.loha-dos-columnas--amplia {
	--dos-columnas-hueco-a: clamp(3rem, 6vw, 7.5rem);
	--dos-columnas-hueco: clamp(1.5rem, 3.75vw, 4.5rem);
	--dos-columnas: fit-content(calc(60% + var(--dos-columnas-hueco-a))) minmax(0, 1fr);
}

.loha-dos-columnas--separador > .loha-dos-columnas__b::before {
	content: "";
	display: block;
	width: var(--filete-corto);
	margin-bottom: var(--separacion);
	border-top: 1px solid var(--c-filete);
}

@media (min-width: 1024px) {
	.loha-dos-columnas {
		grid-template-columns: var(--dos-columnas);
		column-gap: var(--dos-columnas-hueco);
	}

	.loha-dos-columnas--separador {
		column-gap: 0;
	}

	.loha-dos-columnas--separador > .loha-dos-columnas__a {
		padding-right: var(--dos-columnas-hueco-a, var(--dos-columnas-hueco));
	}

	.loha-dos-columnas--separador > .loha-dos-columnas__b {
		padding-left: var(--dos-columnas-hueco);
		border-left: 1px solid var(--c-filete);
	}

	.loha-dos-columnas--separador > .loha-dos-columnas__b::before {
		display: none;
	}
}