/*
 * R4 · Lista (componentes.md). Siempre un <ul> real; cambia el marcador
 * y la tipografía. En la fase 3 entra --palabras; en la 4a, --filete; en
 * la 4b, --simple, --punto y --guion (cortina del 02); en la 5a,
 * --palabras-grande (03.3); en la 5b, --en-linea (tipologías del 03.2).
 */

/* --palabras: mayúsculas espaciadas en Manrope, una por línea, con una
   regla corta debajo. */
.loha-lista--palabras ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.loha-lista--palabras li {
	color: var(--c-texto-2);
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

.loha-lista--palabras::after {
	content: "";
	display: block;
	width: var(--filete-corto);
	margin-top: 0.9rem;
	border-top: 1px solid var(--c-filete);
}

/* --palabras-grande: las variables del 03.3. Las mismas palabras, más
   grandes (texto introductorio, 18–25 px, con el espaciado de las
   mayúsculas grandes) y en grupos, con la regla corta entre ellos en
   lugar de debajo. En M, un grupo por columna y al tamaño de --palabras:
   «ALMACENAMIENTO» tiene que caber en media columna de móvil. */
.loha-lista--palabras-grande::after {
	display: none;
}

.loha-lista--palabras-grande ul + ul::before {
	content: "";
	display: block;
	width: var(--filete-corto);
	margin-block: 1.4em;
	border-top: 1px solid var(--c-filete);
}

@media (min-width: 600px) {
	.loha-lista--palabras-grande li {
		font-size: var(--fs-intro);
		letter-spacing: var(--tracking-mayusculas-grande);
	}
}

@media (max-width: 599px) {
	.loha-lista--palabras-grande {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--medianil);
	}

	.loha-lista--palabras-grande ul + ul::before {
		display: none;
	}
}

/* --filete: una barra vertical a la izquierda de cada elemento, la
   primera parte en DM Serif y el resto debajo en Manrope (problemas de la
   apertura del 02). Compacta, como en la previa: la primera parte a
   tamaño de lectura y el resto en microtexto, claramente más pequeño
   (13–14 px, el suelo de tipografia.md). */
/* ul.: el reinicio de base.css (ul[class]) pesa más que una sola clase. */
ul.loha-lista--filete {
	display: grid;
	gap: clamp(0.75rem, 0.55rem + 0.5vw, 1.125rem);
	margin-top: var(--separacion);
	max-width: var(--lectura);
}

.loha-lista--filete li {
	position: relative;
	padding-left: clamp(1.25rem, 0.9rem + 1vw, 2rem);
}

/* La barra, a la altura del texto y no de las cajas de línea: de la línea
   de las mayúsculas de la primera parte a la línea base de la última
   línea del resto (revisión del 02, 02-02). Antes sobresalía 4–5 px por
   cada lado. Los recortes salen de las métricas de las fuentes: en DM
   Serif con interlineado 1,2, las mayúsculas empiezan a unos 0,26 em del
   borde de la línea (0,28 en la fuente; los navegadores redondean el
   ascendente); en Manrope con 1,4, la línea base queda a 0,32 em del
   borde inferior. Menos de 1 px de error de 390 a 2560. Los descendentes
   («pero») sobresalen, como en cualquier texto alineado a la línea base. */
.loha-lista--filete li::before {
	content: "";
	position: absolute;
	top: calc(0.26 * var(--fs-lectura));
	bottom: calc(0.32 * var(--fs-micro));
	left: 0;
	border-left: 1px solid var(--c-filete);
}

.loha-lista__cabeza {
	display: block;
	color: var(--c-texto);
	font-family: var(--serif);
	font-size: var(--fs-lectura);
	font-weight: 400;
	line-height: 1.2;
}

.loha-lista__resto {
	display: block;
	margin-top: 0.25em;
	color: var(--c-texto-2);
	font-size: var(--fs-micro);
	line-height: 1.4;
	/* Cortes naturales, sin una palabra sola en la última línea (en M,
	   «la respuesta» baja junta). */
	text-wrap: pretty;
}

/* E y TA, la lista de la izquierda de la apertura del 02: un escalón más
   en los dos (segunda revisión del cliente, noviembre de 2026, «según la
   previa»): la primera parte, a tamaño de texto introductorio (18–25 px)
   y el resto, a tamaño de lectura (16,5–19 px), los que mide la previa
   (21,9 y 17,6 px a 1440). Con el ritmo de la previa, más junto: cada
   punto a unos 60 px del siguiente a 1400, no a 70. Interlineado 1,1 y
   1,25 y casi sin hueco entre las dos partes: la barra se recorta con
   las mismas métricas, a los tamaños y los interlineados nuevos (las
   mayúsculas de DM Serif, a 0,21 em del borde de la línea; la línea base
   de Manrope, a 0,245 em del inferior). En TV y M, como estaba. */
@media (min-width: 1024px) {
	.loha-lista--filete li::before {
		top: calc(0.21 * var(--fs-intro));
		bottom: calc(0.245 * var(--fs-lectura));
	}

	.loha-lista--filete .loha-lista__cabeza {
		font-size: var(--fs-intro);
		line-height: 1.1;
	}

	.loha-lista--filete .loha-lista__resto {
		margin-top: 0.1em;
		font-size: var(--fs-lectura);
		line-height: 1.25;
	}
}


/* --simple: sin marcador, centrada (exigencias de cada butaca). */
.loha-lista--simple li {
	color: var(--c-texto-2);
	font-size: var(--fs-lectura);
	line-height: 1.65;
}

/* --punto y --guion: marcador a la izquierda, del color del acento
   (decorativo). El texto, del color del fondo. */
ul.loha-lista--punto,
ul.loha-lista--guion {
	display: grid;
	gap: 0.7em;
	font-size: var(--fs-lectura);
	line-height: 1.4;
}

.loha-lista--punto li,
.loha-lista--guion li {
	position: relative;
	padding-left: 1.9em;
	/* Sin una palabra sola en la última línea («inversión», en la ventaja
	   larga del panel privado del 02). */
	text-wrap: pretty;
}

.loha-lista--punto li {
	color: var(--c-texto-2);
}

.loha-lista--punto li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0.1em;
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background-color: var(--c-acento);
}

.loha-lista--guion li {
	padding-left: 2.6em;
	color: var(--c-texto);
}

/* La raya, dibujada: 1,2 em de ancho, a la altura de la x. */
.loha-lista--guion li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 1.2em;
	border-top: 1px solid var(--c-acento);
}

/* --en-linea: seguidas y separadas por un punto medio (tipologías de los
   ámbitos del 03.2), en mayúsculas espaciadas como --palabras. El punto
   lo pinta el CSS al final de cada elemento menos el último: la línea se
   corta entre elementos y el punto se queda al final, nunca al principio.
   Los lectores de pantalla no lo leen (texto alternativo vacío). Desde
   600 px cada elemento va entero; en M, un elemento largo puede partirse
   («EQUIPAMIENTOS PÚBLICOS E INSTITUCIONALES» no cabe en una línea). */
.loha-lista--en-linea li {
	display: inline;
	color: var(--c-texto-2);
	font-family: var(--sans);
	font-size: var(--fs-micro);
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

.loha-lista--en-linea li:not(:last-child)::after {
	content: "·";
	content: "·" / "";
	margin-inline: 0.45em 0.3em;
}

@media (min-width: 600px) {
	.loha-lista--en-linea li {
		white-space: nowrap;
	}
}