/*
 * R2 · Encabezado (componentes.md): rótulo, titular, entradilla, remate y
 * filete, todos opcionales. El tamaño del titular lo da su nivel (h1, h2,
 * h3, en base.css); el color, el fondo de la sección.
 */

.loha-encabezado__rotulo {
	margin-bottom: 0.9rem;
	/* 13–14 px sobre claro: necesita 4,5, de ahí --beige-700 (--c-rotulo). */
	color: var(--c-rotulo);
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 500;
	line-height: var(--lh-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

/* Titular y remate: cada línea escrita en el campo es un bloque
   (.loha-linea), y text-wrap: balance reparte cada una por separado
   cuando no cabe, sin dejar una palabra sola. Con <br> no funcionaría:
   Chromium no equilibra alrededor de un salto forzado. */
.loha-encabezado__titular {
	color: var(--c-texto);
	text-wrap: balance;
}

.loha-encabezado .loha-linea {
	display: block;
}

.loha-encabezado__entradilla {
	max-width: var(--lectura);
	margin-top: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	color: var(--c-texto-2);
	font-size: var(--fs-intro);
	line-height: var(--lh-intro);
}

.loha-encabezado__remate {
	margin-top: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	color: var(--c-texto);
	font-family: var(--serif);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	text-wrap: balance;
}

.loha-encabezado__filete {
	margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}

.loha-encabezado__titular + .loha-encabezado__filete + * {
	margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem);
}

/* Titulares de la cortina del 02 (tipografia.md): el principal en la
   pantalla 1; el secundario en la 2, la 3 y la 4. */
.loha-encabezado--cortina-principal .loha-encabezado__titular {
	font-size: var(--fs-cortina-principal);
	line-height: var(--lh-h1);
}

.loha-encabezado--cortina-secundario .loha-encabezado__titular {
	font-size: var(--fs-cortina-secundario);
	line-height: var(--lh-h2);
}

/* Titular en mayúsculas (cierre del 03, como en la previa). En el campo
   se escribe normal: se lee bien en lectores de pantalla y en la
   traducción. Espaciado de las mayúsculas de 18 px o más (tipografia.md). */
.loha-encabezado--mayusculas .loha-encabezado__titular {
	letter-spacing: var(--tracking-mayusculas-grande);
	text-transform: uppercase;
}

/* Con el clamp() al mínimo, un salto forzado deja líneas de una palabra:
   por debajo de 600 px las líneas del titular se ponen en línea y el
   titular entero se reparte con balance. */
@media (max-width: 599px) {
	.loha-encabezado__titular .loha-linea {
		display: inline;
	}
}

/* Tramos (opción tramos: el 05 y el epílogo): las líneas sin acento y las
   del acento, agrupadas. Fuera de móvil no cuentan. De 360 a 599 px cada
   tramo se reparte por separado y el acento empieza en su propia línea,
   como en las previas. Por debajo de 360, el titular entero, como el
   resto: en esa medida un tramo solo deja alguna palabra suelta (a 320,
   «LOHA» en una línea). */
.loha-tramo {
	display: contents;
}

@media (min-width: 360px) and (max-width: 599px) {
	.loha-tramo {
		display: block;
	}
}

/* Los saltos de la entradilla solo se respetan desde 1024 px. */
@media (max-width: 1023px) {
	.loha-encabezado__entradilla br {
		display: none;
	}
}