/*
 * Pie de página (pie.md). Discreto y bajo: tres zonas en E y TA
 * (copyright a la izquierda, siguiente apartado en el centro, enlaces
 * legales a la derecha); apiladas y centradas en TV y M, con el
 * siguiente apartado primero. Con los dos enlaces del recorrido de los
 * casos, dos filas hasta 1439. Fondo --beige-50 sea cual sea la última
 * sección.
 */

.loha-pie {
	display: grid;
	grid-template-areas:
		"siguiente"
		"copyright"
		"legal";
	justify-items: center;
	row-gap: 0.25rem;
	padding: clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem) var(--margen);
	background-color: var(--beige-50);
	color: var(--azul-700);
	font-family: var(--sans);
	font-weight: 500;
	line-height: var(--lh-interfaz);
	text-align: center;
}

.loha-pie__copyright {
	grid-area: copyright;
}

.loha-pie__siguiente {
	grid-area: siguiente;
}

.loha-pie__legal {
	grid-area: legal;
}

/* E y TA: una fila con tres zonas. Las dos laterales miden lo mismo, así
   que la central queda centrada en la página; sin siguiente apartado,
   queda vacía y las otras dos no se mueven. */
@media (min-width: 1024px) {
	.loha-pie {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "copyright siguiente legal";
		align-items: center;
		column-gap: var(--medianil);
		text-align: left;
	}

	.loha-pie__copyright {
		justify-self: start;
	}

	.loha-pie__legal {
		justify-self: end;
	}
}

/* Los casos y Otras experiencias llevan dos enlaces en el centro (la
   vuelta y el siguiente): hasta 1440 no caben en la fila sin partir el
   copyright y el menú legal. El recorrido va arriba, solo y centrado;
   debajo, el copyright a la izquierda y el menú legal a la derecha. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.loha-pie:has(.loha-siguiente--volver) {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"siguiente siguiente"
			"copyright legal";
	}
}

/* Copyright: texto de firma, 11–12 px, en una línea. */
.loha-pie__copyright {
	margin: 0;
	padding-block: 0.5rem;
	font-size: var(--fs-firma);
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Enlaces legales: interfaz, 13 px. El · lo pinta el CSS detrás de cada
   enlace, centrado en un hueco fijo (--punto). Las líneas se alinean al
   final de la zona y el punto del último enlace de cada línea cae fuera
   de ella y se recorta: si un día los enlaces no caben en una línea, el
   punto nunca queda a principio ni a final de línea. --aire deja ver
   entero el contorno de foco (6 px) del primer y del último enlace. */
.loha-pie__legal {
	--punto: 1.4em;
	--aire: 0.5em;
	margin-inline: calc(var(--aire) * -1);
	padding-inline: var(--aire);
	overflow-x: clip;
	font-size: 0.8125rem;
}

.loha-pie__enlaces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El hueco del último punto, fuera de la zona. Con el nav delante, para
   pesar más que ul[class] de base.css. */
.loha-pie__legal .loha-pie__enlaces {
	margin-inline-end: calc(var(--punto) * -1);
}

.loha-pie__enlaces li {
	display: flex;
	align-items: center;
}

.loha-pie__enlaces li::after {
	content: "·";
	content: "·" / ""; /* sin texto alternativo: los lectores no lo leen */
	width: var(--punto);
	text-align: center;
}

.loha-pie__enlaces a {
	display: inline-flex;
	align-items: center;
	min-height: var(--control-minimo);
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.loha-pie__enlaces a:hover {
		text-decoration: underline;
	}
}

.loha-pie__enlaces a:focus-visible {
	text-decoration: underline;
}

/* ── Siguiente apartado (U11, componentes.md) ─────────────── */
/* «Siguiente · 02 Qué resolvemos →»: interfaz en mayúsculas. «Siguiente»
   y el punto en --c-rotulo del papel (--beige-700, 5,42); el número y el
   nombre en --azul-700 (7,81). Al pasar o enfocar, --azul y la flecha
   avanza 6 px. */
.loha-siguiente {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 0.6em;
	min-height: var(--control-minimo);
	color: inherit;
	font-size: var(--fs-interfaz);
	letter-spacing: var(--tracking-mayusculas);
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--t-hover) ease;
}

.loha-siguiente__rotulo,
.loha-siguiente__punto {
	color: var(--beige-700);
}

/* El número, el nombre y la flecha, juntos: si la línea no cabe, se
   parte entre «Siguiente ·» y el destino, nunca entre el número y el
   nombre ni dejando la flecha sola. Un nombre que no cabe ni solo se
   parte por dentro, con la flecha a su derecha. */
.loha-siguiente__destino {
	display: inline-flex;
	align-items: center;
	column-gap: 0.6em;
}

/* Por debajo de 390 px «Siguiente · 03 Dónde intervenimos» y los
   destinos más largos no caben en una línea con letra de 13 px (el de
   Navy Lodge Rota pide 343 px y a 320 hay 280). En todas las páginas,
   la misma composición en dos líneas: «Siguiente» encima, sin el punto,
   y el destino debajo. La vuelta («← Volver a casos seleccionados»)
   va siempre en una línea: a 320 mide 281 px y, centrada, entra medio
   píxel en cada margen. */
@media (max-width: 389px) {
	.loha-siguiente:not(.loha-siguiente--volver) {
		flex-direction: column;
	}

	.loha-siguiente__punto {
		display: none;
	}

	.loha-siguiente--volver {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
}

.loha-siguiente__flecha {
	transition: transform var(--t-hover) var(--curva-suave);
}

@media (hover: hover) and (pointer: fine) {
	.loha-siguiente:hover {
		color: var(--azul);
	}

	.loha-siguiente:hover .loha-siguiente__flecha {
		transform: translateX(6px);
	}
}

.loha-siguiente:focus-visible {
	color: var(--azul);
}

.loha-siguiente:focus-visible .loha-siguiente__flecha {
	transform: translateX(6px);
}

/* En los casos, dos enlaces: la vuelta al índice (←) y el caso
   siguiente (→). En E y TA, en una línea, con una regla fina entre los
   dos; en TV y M, uno debajo de otro, el siguiente primero, con 8 px
   entre sus áreas de pulsación (antes se tocaban). La flecha de la
   vuelta retrocede 6 px. */
.loha-pie__siguiente {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 0.5rem;
}

.loha-siguiente--volver {
	order: 1;
}

@media (hover: hover) and (pointer: fine) {
	.loha-siguiente--volver:hover .loha-siguiente__flecha {
		transform: translateX(-6px);
	}
}

.loha-siguiente--volver:focus-visible .loha-siguiente__flecha {
	transform: translateX(-6px);
}

@media (min-width: 1024px) {
	.loha-pie__siguiente {
		flex-direction: row;
		column-gap: var(--medianil);
	}

	.loha-siguiente--volver {
		order: 0;
		padding-right: var(--medianil);
		border-right: 1px solid var(--azul-300);
	}
}

@media (prefers-reduced-motion: reduce) {
	.loha-siguiente,
	.loha-siguiente__flecha {
		transition: none;
	}
}