/* =====================================================================
   Menú principal (menu.md)

   Portado del prototipo _docs/prototipos/loha-menu/. Cambios sobre él:
   - Colores, tipografías, tamaños y espaciado del sistema (variables.css).
   - Bocetos en WebP con transparencia, apoyados directamente sobre el
     beige: sin mix-blend-mode ni filtros.
   - Hover de número y flecha dentro de (hover: hover) and (pointer: fine);
     :focus-visible produce lo mismo siempre. Los bocetos, además, solo
     desde 1024 px: ancho y puntero a la vez.
   - La composición cambia en 1024 px (CLAUDE.md), no en 900.
   - La cabecera de la capa es el estado B del componente de cabecera.
   - Firma inferior y bloque ESTRATEGIA / DISEÑO / EQUIPAMIENTO visibles
     también en tablet vertical y móvil, con suelo de 11 px.
   ===================================================================== */

.loha-menu {
	--capa-op:  .42;
	--dur:      var(--t-menu-fundido);
	--retardo:  var(--t-menu-retardo);
	--sangria:  clamp(14px, 1.9vw, 34px);
}

/* =====================================================================
   CONTENEDOR
   ===================================================================== */

.loha-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-capa);
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--beige-50);
	color: var(--azul);
	font-family: var(--sans);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-menu-capa) ease, visibility 0s linear var(--t-menu-capa);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.loha-menu.esta-abierto,
.loha-menu:target {          /* :target = respaldo cuando no hay JS */
	opacity: 1;
	visibility: visible;
	transition: opacity var(--t-menu-capa) ease, visibility 0s;
}

.loha-menu:target { pointer-events: auto; }
.loha-menu[inert] { pointer-events: none; }

html.loha-bloqueado { overflow: hidden; }

/* Con sesión iniciada, la capa empieza debajo de la barra de
   administración: la regla común está en base.css (.loha-capa). */

/* =====================================================================
   CAPAS DE BOCETO

   Cubren todo el contenedor y se anclan abajo a la derecha: el dibujo
   sangra por el borde derecho e inferior.

   Sin etiquetas <img>. La URL vive en --img y solo se resuelve desde
   1024 px con puntero fino, así que en táctil o con la ventana estrecha
   no se descarga nada.
   ===================================================================== */

.loha-menu__capas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.loha-menu__capa {
	position: absolute;
	inset: 0;
	opacity: 0;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
	transition: opacity var(--dur) ease;
}

/*
 * Imagen fija: donde no hay bocetos por hover (táctil, o menos de
 * 1024 px), una sola imagen, muy tenue para priorizar el beige limpio y
 * la legibilidad. La URL solo se resuelve con la capa abierta, así que
 * se descarga al abrir el menú y nunca al cargar la página.
 *
 * DECISIÓN ABIERTA: qué imagen será. Provisionalmente, uno de los cinco
 * bocetos (LOHA_BOCETO_FIJO_MENU, en inc/navegacion.php).
 */
.loha-menu__fijo {
	position: absolute;
	inset: 0;
	opacity: 0.1;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
}

@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	.loha-menu.esta-abierto .loha-menu__fijo,
	.loha-menu:target .loha-menu__fijo {
		background-image: var(--img-fija);
	}
}

/*
 * Bocetos: ancho y puntero a la vez (CLAUDE.md). El ancho decide si la
 * composición tiene sitio para ellos, solo la de dos columnas desde
 * 1024 px; el puntero decide si se activan. Su descarga, su hover y su
 * equivalente con teclado van todos dentro de esta media query: fuera de
 * ella la capa no tiene imagen y no se descarga nada.
 */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	/* Solo con la capa abierta. Un fondo se descarga aunque su elemento
	   esté oculto con visibility: hidden, así que con la regla sin
	   condición (como en el prototipo) las cinco imágenes bajaban al
	   cargar cualquier página. Así bajan con la precarga al apuntar a
	   MENÚ (menu.js), o al abrir si no ha dado tiempo. */
	.loha-menu.esta-abierto .loha-menu__capa,
	.loha-menu:target .loha-menu__capa { background-image: var(--img); }

	/* Entrada con retardo, salida inmediata. Al pasar de una fila a otra
	   ambas capas comparten retardo, así que el crossfade sigue siendo
	   simultáneo; al abandonar el listado no hay retardo. */
	.loha-menu:has(.loha-menu__fila a:hover) .loha-menu__capa,
	.loha-menu:has(.loha-menu__fila a:focus-visible) .loha-menu__capa {
		transition-delay: var(--retardo);
	}

	.loha-menu:has(.loha-menu__fila--1 a:hover) .loha-menu__capa--1,
	.loha-menu:has(.loha-menu__fila--1 a:focus-visible) .loha-menu__capa--1,
	.loha-menu:has(.loha-menu__fila--2 a:hover) .loha-menu__capa--2,
	.loha-menu:has(.loha-menu__fila--2 a:focus-visible) .loha-menu__capa--2,
	.loha-menu:has(.loha-menu__fila--3 a:hover) .loha-menu__capa--3,
	.loha-menu:has(.loha-menu__fila--3 a:focus-visible) .loha-menu__capa--3,
	.loha-menu:has(.loha-menu__fila--4 a:hover) .loha-menu__capa--4,
	.loha-menu:has(.loha-menu__fila--4 a:focus-visible) .loha-menu__capa--4,
	.loha-menu:has(.loha-menu__fila--5 a:hover) .loha-menu__capa--5,
	.loha-menu:has(.loha-menu__fila--5 a:focus-visible) .loha-menu__capa--5 {
		opacity: var(--capa-op);
	}
}

/* =====================================================================
   CUERPO
   Móvil y tablet vertical: una columna, en orden claim → apartados →
   bloque → firma. Desde 1024 px, dos columnas.
   ===================================================================== */

.loha-menu__cuerpo {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	align-content: start;
	gap: var(--separacion);
	padding: var(--separacion) var(--margen);
}

.loha-menu__izquierda,
.loha-menu__derecha {
	display: contents;
}

.loha-menu__claim  { order: 1; }
.loha-menu__lista  { order: 2; }
.loha-menu__bloque { order: 3; }
.loha-menu__firma  { order: 4; }

/* Desde 1024 px, dos columnas en una rejilla de dos filas: los cinco
   apartados y, debajo, la firma. El claim, centrado en vertical respecto
   a los cinco apartados (segunda revisión del cliente, noviembre de 2026;
   antes iba arriba, a la altura del 01). El bloque ESTRATEGIA / DISEÑO /
   EQUIPAMIENTO abarca las dos filas y se queda abajo, a ras de la firma,
   como estaba: así no ensancha la fila de la firma. */
@media (min-width: 1024px) {
	.loha-menu__cuerpo {
		grid-template-columns: minmax(260px, 32%) 1fr;
		grid-template-rows: auto auto;
		align-content: center;
		column-gap: clamp(30px, 4.5vw, 72px);
		row-gap: clamp(22px, 4vh, 48px);
		padding-top: 0;
	}

	.loha-menu__claim {
		grid-area: 1 / 1;
		align-self: center;
	}

	.loha-menu__bloque {
		grid-area: 1 / 1 / 3 / 2;
		align-self: end;
	}

	/* La columna ocupa todo el ancho disponible hasta el margen derecho.
	   La lista va a ancho de contenido (sus flechas, justo después del
	   texto); el filete y la firma, a todo el ancho, con la firma contra
	   el margen derecho, como en la maqueta. */
	.loha-menu__lista {
		grid-area: 1 / 2;
		justify-self: start;
	}

	.loha-menu__firma {
		grid-area: 2 / 2;
	}
}

.loha-menu__claim {
	max-width: 8.5ch;
	margin: 0;
	font-family: var(--serif);
	font-size: var(--fs-menu-claim);
	line-height: 1;
	color: var(--azul);
	/* Tres líneas por anchura, como en la maqueta («Espacios / con más /
	   sentido»), sin saltos escritos: en inglés parte donde le toca. */
	text-wrap: balance;
}

/* Bloque ESTRATEGIA / DISEÑO / EQUIPAMIENTO, con regla vertical. */
.loha-menu__bloque {
	margin: 0;
	padding-left: clamp(14px, 1.3vw, 24px);
	border-left: 1px solid var(--azul-300);
	color: var(--azul-700);
	font-size: var(--fs-firma);
	font-weight: 500;
	letter-spacing: var(--tracking-mayusculas);
	line-height: 2.1;
	text-transform: uppercase;
}

/* --- Apartados -------------------------------------------------- */

/*
 * La rejilla va en la lista y cada fila la hereda con subgrid: así la
 * columna de numeración mide lo mismo en todas las filas y los
 * separadores verticales quedan alineados aunque «01» sea más estrecho
 * que «04». En el prototipo cada fila tenía su propia rejilla.
 */
.loha-menu__lista {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--sangria);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loha-menu__fila,
.loha-menu__fila a {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
}

.loha-menu__fila a {
	padding: clamp(12px, 1.9vh, 24px) 0;
	color: inherit;
	text-decoration: none;
}

.loha-menu__num {
	font-family: var(--serif);
	font-size: var(--fs-menu-numero);
	line-height: 1;
	color: var(--beige-600);
	transition: color var(--t-menu-fila) ease;
}

/* Separador vertical entre la numeración y el texto. */
.loha-menu__texto {
	min-width: 0;
	padding-left: var(--sangria);
	border-left: 1px solid var(--azul-300);
}

.loha-menu__titulo {
	display: block;
	color: var(--azul);
	font-size: var(--fs-menu-titulo);
	font-weight: 500;
	letter-spacing: var(--tracking-mayusculas-grande);
	line-height: 1.15;
	text-transform: uppercase;
}

.loha-menu__sub {
	display: block;
	margin-top: 0.55em;
	color: var(--azul-700);
	font-size: var(--fs-menu-subtitulo);
	line-height: 1.4;
}

.loha-menu__flecha {
	display: none;
	width: clamp(16px, 1.4vw, 22px);
	height: clamp(16px, 1.4vw, 22px);
	color: var(--azul);
	opacity: 0.5;
	transition: transform var(--t-menu-fila) ease, opacity var(--t-menu-fila) ease;
}

/* Las flechas van justo después de la columna de texto, a la misma
   distancia que separa número y texto, y no en el borde derecho: las tres
   columnas miden lo que su contenido y cada fila, lo que suman. La
   columna de texto la marca el subtítulo más largo, con su máximo de
   46 ch. */
@media (min-width: 1024px) {
	.loha-menu__lista {
		grid-template-columns: auto auto auto;
		justify-content: start;
	}

	.loha-menu__flecha {
		display: block;
	}

	/* Descripciones, un paso de la escala por encima en escritorio, a
	   tamaño de lectura (revisión del cliente, MENU.pdf): ganan
	   legibilidad sin quitar protagonismo al título. En móvil, igual. */
	.loha-menu__sub {
		font-size: var(--fs-lectura);
		max-width: 46ch;
	}
}

/* Estado activo: color y un desplazamiento corto de la flecha. Nunca se
   agranda el texto (menu.md). */
@media (hover: hover) and (pointer: fine) {
	.loha-menu__fila a:hover .loha-menu__num {
		color: var(--azul);
	}

	.loha-menu__fila a:hover .loha-menu__flecha {
		opacity: 1;
		transform: translateX(7px);
	}
}

.loha-menu__fila a:focus-visible .loha-menu__num {
	color: var(--azul);
}

.loha-menu__fila a:focus-visible .loha-menu__flecha {
	opacity: 1;
	transform: translateX(7px);
}

.loha-menu__fila a:focus-visible {
	outline: 2px solid var(--azul);
	outline-offset: 6px;
}

/* --- Firma inferior --------------------------------------------- */

.loha-menu__firma {
	margin: 0;
	padding-top: clamp(14px, 2vh, 26px);
	border-top: 1px solid var(--azul-300);
	color: var(--azul-700);
	font-size: var(--fs-firma);
	font-weight: 500;
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.loha-menu__firma {
		text-align: right;
	}
}

/* =====================================================================
   MOVIMIENTO REDUCIDO
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	.loha-menu,
	.loha-menu__capa,
	.loha-menu__num,
	.loha-menu__flecha {
		transition: none !important;
	}

	.loha-menu__fila a:hover .loha-menu__flecha,
	.loha-menu__fila a:focus-visible .loha-menu__flecha {
		transform: none;
	}
}