/**
 * Menú principal y mega menú — Parasoles Tropicales
 * ═════════════════════════════════════════════════════════════════════════════
 *
 * El menú lo construye `.claude/scripts/crear-menu-principal.php` en modo `links` del
 * mega menú de Mink: los hijos de nivel 1 son rótulos de columna y los de nivel 2, los
 * enlaces. Aquí solo se viste y se arregla lo que el theme deja mal para un panel de
 * TEXTO — el suyo está maquetado para tarjetas con foto.
 *
 * Estructura vigente desde el 2026-08-20: **5 ítems de nivel 0 en MAYÚSCULAS**, y las
 * cuatro familias de cubrimiento dentro de un solo «Cubrimientos» con un panel de
 * cuatro columnas. Los dos cambios se decidieron a la vez y el segundo hizo posible el
 * primero: en caja alta, ocho rótulos no caben ni sin espaciado (ver el punto 6).
 *
 * Esa misma tarde entró el **nivel de tipo dentro de la categoría**, y con él dos cosas
 * que el theme no contempla en absoluto:
 *
 *  · **Cerramientos tiene su propio panel**, de 3 columnas por material (puntos 2 y 2b).
 *  · **La columna de Pérgolas tiene TRES niveles** —familia, tipo, modelo— y el tercero
 *    hay que devolverlo al flujo a mano, porque el walker lo emite como un desplegable
 *    flotante y sin la clase que las reglas de hover exigen para revelarlo (punto 4b).
 *  · Y los cuatro modelos de Cerramientos llevan **subtítulo**, que lo inyecta
 *    `inc/menu-descripciones.php` (punto 4c).
 *
 * Se mide con `python3 .claude/scripts/medir-menu.py`, que abre cada panel a la fuerza
 * y comprueba que no se sale del viewport.
 *
 * ── Las tres cosas que arregla, y por qué ─────────────────────────────────────
 *
 * (Tres cuando se escribió. Hoy son once, y las ocho que faltan están cada una en su
 * punto, con su medición: la tabla completa vive en `docs/estado/menu.md`.)
 *
 * 1. **El panel medía 1170 px fijos y se salía por la derecha a 1280 px.**
 *    `main.css:2948` pone `width: 1170px` a secas. Medido: a 1280 px el panel de
 *    Pérgolas iba de x=145 a x=1315, o sea 35 px fuera. Se pasa a una fórmula con tope
 *    de viewport — hoy `min(1040px, 100vw - 420px)`, con las cuatro columnas del panel
 *    de Cubrimientos; era `min(640px, 100vw - 240px)` cuando eran dos. Las constantes
 *    están MEDIDAS y su tabla vive en la propia regla: cambian si cambia el árbol del
 *    menú, porque de él depende dónde arranca el panel.
 *
 * 2. **Los rótulos de nivel 0 no caben con el espaciado del theme en la banda
 *    1200-1400 px.** Es el último tramo antes de que el drawer móvil tome el relevo
 *    (~1200 px). Se reduce el espaciado, no el cuerpo de letra: bajar la tipografía del
 *    menú lo haría ilegible justo en portátiles. Los números, en el punto 6 — se
 *    rehicieron el 2026-08-20, cuando el nivel 0 pasó a mayúsculas y de 8 ítems a 5.
 *
 * 3. **El theme centra el texto de los ítems del panel** (`main.css:3051`,
 *    `.item_text { display:flex; flex-direction:column; text-align:center }`) porque
 *    espera una foto encima del rótulo. Con texto solo, centrado y en columna, una
 *    lista de 6 modelos se lee como un poema. Se pasa a la izquierda.
 *
 * ⚠️ El contenido de las columnas (nivel 2) arranca en `opacity:0; visibility:hidden`
 * (`main.css:3027`) y lo revela la regla `main.css:2571`, `li:hover > ul > li > ul.mega-menu`,
 * al pasar por el ítem de NIVEL 0 — no por el rótulo de la columna. Es el
 * comportamiento que se quiere (se abre todo de una vez), pero significa que **el
 * panel no se puede inspeccionar forzando solo el primer `<ul>`**: hay que abrir
 * también los de nivel 2, y eso es lo que hace `CSS_ABRIR` en `medir-menu.py`.
 *
 * ⚠️ `visibility:hidden` conserva la caja, así que el panel mide su alto final aunque
 * las columnas estén invisibles. Un alto correcto NO prueba que se vea nada.
 *
 * Paleta: la de `CLAUDE.md` § Marca. Fondo `#1A1A1A` (secundario), enlaces en
 * `#B3B3B3` (detalle) que suben a blanco, y el activo en `#BC090E` (rojo Parasoles).
 */

:root {
	--pt-menu-fondo: #1a1a1a;
	--pt-menu-texto: #b3b3b3;
	--pt-menu-activo: #bc090e;
	--pt-menu-linea: rgba(179, 179, 179, 0.22);
}

/* ─── 0. Los rótulos de nivel 0 ───────────────────────────────────────────── */

/*
 * MAYÚSCULAS (decisión de José, 2026-08-20). El theme los deja en `text-transform: none`
 * en los dos headers de escritorio y en `capitalize` en el cajón móvil.
 *
 * No se cambia el texto de los ítems, se transforma en CSS: el rótulo sigue guardado
 * como «Tensoestructuras» en el `nav_menu_item`, que es lo que leen el lector de
 * pantalla y el `aria-label`, y lo que escribe
 * `.claude/scripts/crear-menu-principal.php` — su fuente de verdad. Reescribirlos en
 * mayúsculas de verdad rompería las dos cosas y además no se versiona.
 *
 * Solo el NIVEL 0. Dentro de los paneles, los rótulos de columna ya van en mayúsculas
 * (punto 3) y los enlaces de producto NO deben ir: son nombres propios de modelo con
 * caja mixta —PergoLam, FlexiZipp, Slidinglass— y en mayúsculas se pierde justo la
 * parte que los distingue de un vistazo.
 *
 * El `letter-spacing` no es decoración: en caja alta todos los glifos miden lo mismo de
 * alto y sin aire entre letras la palabra se lee como un bloque. 0.05em es el mínimo
 * que despega «TENSOESTRUCTURAS» —16 caracteres, el rótulo más largo— sin comerse el
 * poco margen que tiene el nav en la banda de 1200-1300 px (ver el punto 6, donde los
 * números están medidos).
 *
 * Efecto secundario bueno: el botón «Cotizar Proyecto» del header ya estaba en
 * `uppercase`, así que la fila queda coherente en vez de mezclar las dos cajas.
 */
.primary-nav > ul.menu > li > a {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ─── 1. El panel ──────────────────────────────────────────────────────────── */

/*
 * El theme CENTRA el panel del mega menú dentro del nav, no lo cuelga de su ítem.
 * Medido a 1920 px: el `li` de «Pérgolas» va de 443 a 562 y su panel de 640 a 1280 —
 * centrado en 960, que es el centro del nav [443, 1477]. Los dos paneles mega caen
 * exactamente en el mismo sitio. Con los 1170 px del theme eso casi llenaba el nav y
 * pasaba por un panel a lo ancho; con 640 px queda flotando en el medio mientras el
 * rótulo que lo abre está en el extremo izquierdo, y además alarga el recorrido del
 * ratón: bajar de «Pérgolas» al panel obliga a cruzar «Toldos» y cambia de panel.
 *
 * Se ancla al ítem. Hace falta `position: relative` en el `li` para que el panel deje
 * de tomar el nav como bloque contenedor. Anclar a la IZQUIERDA es seguro porque los
 * dos únicos ítems con mega son el primero y el segundo; si algún día lo lleva uno de
 * la derecha, ese necesitará `left: auto; right: 0`.
 */
/*
 * ⚠️ Hace falta `!important` porque el theme lo fuerza: `main.css:2128` pone
 * `.primary-nav > ul li.mega-menu { position: static !important }`. Sin él la regla se
 * escribe, no da error y no hace nada — comprobado: los `li` seguían `static` y los dos
 * paneles seguían cayendo en el mismo sitio.
 *
 * Que el theme haga justo lo contrario para el modo Elementor
 * (`main.css:2140`, `li.mega-menu.mega-menu-e { position: relative !important }`) es la
 * señal de que anclar el panel a su ítem es su propia forma de atarlo cuando el panel
 * no ocupa el nav entero.
 */
.primary-nav > ul.menu > li.mega-menu-links {
	position: relative !important;
}

/* En el cajón móvil el panel es un acordeón a lo ancho: ahí el `static` del theme
 * (`main.css:3764`) es el correcto y no hay que tocarlo. */
.mobile_nav_wrapper .primary-nav > ul.menu > li.mega-menu-links {
	position: static !important;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu {
	left: 0;
	right: auto;
	margin-left: 0;
	margin-right: 0;
	/*
	 * Sustituye el `width: 1170px` del theme. Ver nota 1 de la cabecera.
	 *
	 * 1040 px y no 640 desde el 2026-08-20: el panel pasó de 2 columnas a 4 (las
	 * cuatro familias de cubrimiento bajo un solo padre). A 4 columnas, 640 px dejan
	 * 160 por columna menos los 44 de padding: «Baneta Proyectante» y
	 * «Supersombralinas» rompen a dos líneas. Con 1040 son 260 por columna.
	 *
	 * El `100vw - 420px` es el tope para que no se salga por la derecha, y **el 420 está
	 * medido, no estimado**. La intuición falla aquí: «Cubrimientos» es el primer ítem
	 * del nav, así que parece que el panel arranca lo más a la izquierda posible — y no,
	 * porque el nav va CENTRADO en su hueco del grid del header, o sea que su primer
	 * ítem se mueve a la derecha cuando el nav tiene menos texto. Medido con
	 * `medir-menu.py` (borde izquierdo del panel · sitio que queda a su derecha):
	 *
	 *   1201 → x=314 · 887      1366 → x=390 ·  976
	 *   1280 → x=377 · 903      1440 → x=387 · 1053
	 *   1301 → x=354 · 947      1920 → x=577 · 1343
	 *
	 * El caso peor es 1280 (903 px), no el ancho más estrecho. Con `100vw - 420` el
	 * panel pide 860 px ahí y 946 a 1366, que es donde queda el margen más corto: 30 px.
	 * Con `- 200`, que era la primera versión de esta regla, se salía por la derecha a
	 * 1201, 1280, 1301 y 1366.
	 *
	 * ⚠️ Estos números dependen de cuántos ítems tenga el nivel 0, porque de eso depende
	 * el centrado. Si se añade o se quita un ítem del menú, hay que volver a medir.
	 */
	width: min(1040px, calc(100vw - 420px));
	box-sizing: border-box;
	padding: 26px 0 22px;
	background: var(--pt-menu-fondo);
	border: 0;
	border-radius: 0;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

/* El theme mete 20px laterales aquí (`main.css:2224`); el padding lo damos arriba. */
.primary-nav > ul > li.mega-menu-links > ul.mega-menu {
	padding-left: 0;
	padding-right: 0;
}

/* ─── 2. Las columnas ─────────────────────────────────────────────────────── */

.primary-nav ul li.mega-menu-links > ul.mega-menu > li {
	/* El theme da 34px arriba y 30px abajo: demasiado para dos columnas de texto. */
	margin: 0;
	padding: 0 28px;
	font-size: inherit !important;
	font-weight: inherit !important;
	text-transform: none;
}

/*
 * Separador entre columnas.
 *
 * El theme lo dibuja con un `::after` sobre el `li` de la columna (`main.css:2967`, ahí
 * desactivado con `content: unset`). Reactivarlo NO funciona: el `li` mide solo su
 * propio contenido —77 px la columna de Bioclimáticas, que tiene un único modelo,
 * contra ~250 px la de Retráctiles— así que la línea salía cortada a un tercio de la
 * altura del panel. Las columnas son `width: 50%` dentro de un `display: flex` con
 * `flex-wrap: wrap` y aun así no se estiran.
 *
 * Así que la línea se pinta sobre el PANEL, con un degradado de 1 px en la frontera de
 * las columnas: no depende de la altura de ningún `li`. Va acotado a `.mega-columns-2col`
 * porque la frontera está al 50 %; con otro número de columnas hay que añadir su regla.
 * El `background-size` deja 24 px de aire arriba y abajo.
 */
.primary-nav ul li.mega-menu-links.mega-columns-2col > ul.mega-menu {
	background-image: linear-gradient(
		to right,
		transparent calc(50% - 1px),
		var(--pt-menu-linea) calc(50% - 1px),
		var(--pt-menu-linea) 50%,
		transparent 50%
	);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% calc(100% - 48px);
}

/*
 * La variante de 4 columnas (el panel de Cubrimientos, desde el 2026-08-20): tres
 * fronteras, al 25 %, al 50 % y al 75 %. Son tres capas de fondo y no un
 * `repeating-linear-gradient`, porque el repetido se calcula sobre la caja y dejaría
 * también una línea en el borde derecho.
 *
 * Las cuatro columnas tienen alturas muy distintas —7 modelos en Pérgolas y en Toldos,
 * 6 en Tensoestructuras y 2 en Cubiertas Fijas—, y por eso las líneas van sobre el
 * PANEL y no sobre los `li`: un `::after` en la columna mediría 2 filas en la última y
 * la línea saldría cortada a un tercio. Es la misma razón que en el caso de 2 columnas.
 */
.primary-nav ul li.mega-menu-links.mega-columns-4col > ul.mega-menu {
	background-image:
		linear-gradient(
			to right,
			transparent calc(25% - 1px),
			var(--pt-menu-linea) calc(25% - 1px),
			var(--pt-menu-linea) 25%,
			transparent 25%
		),
		linear-gradient(
			to right,
			transparent calc(50% - 1px),
			var(--pt-menu-linea) calc(50% - 1px),
			var(--pt-menu-linea) 50%,
			transparent 50%
		),
		linear-gradient(
			to right,
			transparent calc(75% - 1px),
			var(--pt-menu-linea) calc(75% - 1px),
			var(--pt-menu-linea) 75%,
			transparent 75%
		);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% calc(100% - 48px);
}

/*
 * La variante de 3 columnas (el panel de Cerramientos, desde el 2026-08-20): dos
 * fronteras, a un tercio y a dos tercios. Mismo motivo que las otras dos para pintarlas
 * sobre el PANEL: las columnas miden 2, 1 y 1 modelos, así que un `::after` en el `li`
 * saldría cortado.
 */
.primary-nav ul li.mega-menu-links.mega-columns-3col > ul.mega-menu {
	background-image:
		linear-gradient(
			to right,
			transparent calc(33.3333% - 1px),
			var(--pt-menu-linea) calc(33.3333% - 1px),
			var(--pt-menu-linea) 33.3333%,
			transparent 33.3333%
		),
		linear-gradient(
			to right,
			transparent calc(66.6666% - 1px),
			var(--pt-menu-linea) calc(66.6666% - 1px),
			var(--pt-menu-linea) 66.6666%,
			transparent 66.6666%
		);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% calc(100% - 48px);
}

/*
 * El panel de Cerramientos es más estrecho que el de Cubrimientos —3 columnas y 4
 * modelos, contra 4 y 22— y su ítem NO arranca donde el otro: «Cerramientos» es el
 * segundo del nav, así que su panel nace a la derecha del ancho de «CUBRIMIENTOS».
 *
 * 660 px son 220 por columna, y el que los pide no es un nombre de modelo sino un
 * SUBTÍTULO: «Correderos sobre rieles» es el más largo. Con 600 px rompía a dos líneas.
 *
 * Medido con `medir-menu.py` (borde izquierdo del panel · sitio que queda a su derecha):
 *
 *   1201 → x=362 · 839      1366 → x=518 ·  848
 *   1280 → x=441 · 839      1440 → x=543 ·  897
 *   1301 → x=462 · 839      1920 → x=753 · 1167
 *
 * O sea que aquí NO hay caso peor: por debajo de 1366 el hueco a la derecha se queda
 * clavado en 839 px, porque el nav va centrado y el panel se mueve con él. Con 660 el
 * margen más corto son **179 px**, y el `min()` no llega a morder por encima de ~1140,
 * donde el cajón móvil ya ha tomado el relevo. Se deja como red: si algún día el nav
 * cambia de ancho, es mejor que el panel se estreche que que se salga.
 *
 * ⚠️ Igual que en el panel de 4 columnas, estos números dependen de cuántos ítems tenga
 * el nivel 0: de eso depende el centrado del nav. Añadir o quitar uno obliga a volver a
 * medir los dos paneles.
 */
.primary-nav ul li.mega-menu-links.mega-columns-3col > ul.mega-menu {
	width: min(660px, calc(100vw - 480px));
}

/*
 * La variante de 2 columnas (el panel de Mobiliario, desde el 2026-08-26): una sola
 * frontera, al 50 %. Sin el ancho por defecto de 1040 px se salía por la derecha —11
 * enlaces en 2 columnas cortas no lo necesitan, y «Mobiliario» es el TERCERO del nav,
 * más centrado que «Cerramientos» (el segundo), así que su panel tiene menos margen a
 * la derecha antes de tocar el borde del viewport.
 *
 * Medido con `medir-menu.py` (borde izquierdo del panel · centro del panel · margen
 * libre a la derecha, con el panel todavía al ancho por defecto de 1040 px para poder
 * calcular el centro real del ítem):
 *
 *   1201 → x=464 · centro= 855 · 347      1366 → x=629 · centro=1102 · 264
 *   1280 → x=543 · centro= 973 · 307      1440 → x=679 · centro=1189 · 251  ← caso peor
 *   1301 → x=564 · centro=1005 · 297      1920 → x=914 · centro=1434 · 486
 *
 * El caso peor NO es el ancho más pequeño: es 1440, con solo 251 px libres a la
 * derecha del centro (menos que a 1366 o a 1301). Con 460 px el panel pide 230 a cada
 * lado del centro, así que a 1440 quedan 21 px de margen — el resto de anchos sobra
 * mucho más. 460 px son 202 por columna de contenido (28 px de padding a cada lado):
 * sobra para un nombre de colección o de categoría, que es una sola palabra.
 */
.primary-nav ul li.mega-menu-links.mega-columns-2col > ul.mega-menu {
	width: min(460px, calc(100vw - 480px));
}

/*
 * Con 4 columnas los 28 px laterales de cada una se comen 224 px del panel, y el que
 * los paga es el rótulo más largo. Medido a 1201 px —el caso peor, panel de 781 px—:
 * con 22 px de padding la columna deja 151 px de contenido y «TENSOESTRUCTURAS» mide
 * 148; con 18 quedan 159, o sea 11 px de aire. El enlace de producto más largo
 * («Baneta Proyectante», 126 px) nunca ha sido el problema.
 */
.primary-nav ul li.mega-menu-links.mega-columns-4col > ul.mega-menu > li {
	padding: 0 18px;
}

/* ─── 3. Los rótulos de columna ───────────────────────────────────────────── */

/*
 * Desde el 2026-08-20 hay de los dos tipos, y la diferencia importa:
 *
 *  · **Con `href`** son las cuatro familias de cubrimiento bajo «Cubrimientos», o sea
 *    landings reales. Son el ÚNICO enlace que esas cuatro páginas tienen en el menú
 *    desde que dejaron el nivel 0, así que tienen que verse y responder como enlaces.
 *  · **Sin `href`** son rótulos de agrupación: ítems `custom` con la URL vacía, que el
 *    walker emite como `<a>` sin el atributo. Hoy no queda ninguno en el árbol —los
 *    cuatro que había (Bioclimáticas, Retráctiles, Fijos) se borraron al aplanar los
 *    paneles— pero la regla se conserva: es el patrón para agrupar dentro de un panel
 *    y volverá el día que una familia lo necesite.
 *
 * Lo común es el ASPECTO de rótulo de columna: caja alta, 0,72 rem y `letter-spacing`,
 * que es lo que los distingue de los enlaces de producto de debajo (caja mixta, 0,95
 * rem, peso 300). El `+` y el punto que el theme añade a todo ítem se quitan en los dos
 * casos.
 */
/*
 * ⚠️ `li.menu-item` y no `li` a secas, y la clase de más NO es cosmética: más abajo hay
 * una regla `… > ul.mega-menu > .menu-item > a { font-size: inherit }` que deshace el
 * `18px` del theme (`main.css:3062`), y con 4 clases + 2 tipos GANA a un selector de
 * 3 clases + 3 tipos. Sin la clase aquí, el `font-size` de este bloque no se aplica y
 * el rótulo hereda 16 px: medido a 1201 px, «TENSOESTRUCTURAS» ocupaba 205 px en una
 * columna de 151 y el theme lo corta con su `white-space: nowrap; overflow: hidden`.
 * Se veía perfecto a 1440 y cortado a 1201, que es la peor forma de fallar.
 *
 * La versión anterior de esta regla acertaba por accidente: `a:not([href])` sumaba la
 * especificidad del selector de atributo, así que llegaba a 4 clases. Al generalizarla
 * para los rótulos que sí enlazan, ese punto se perdió.
 */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li.menu-item > a {
	display: block;
	padding: 0 0 12px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/*
	 * #8a8a8a y no el #7a7a7a que llevaba: sobre el #1a1a1a del panel, ese gris da
	 * **4,05:1** y el mínimo AA para texto pequeño es 4,5. Mientras los cuatro rótulos
	 * de columna enlazaban, la regla de más abajo los pasaba a blanco y este color no
	 * se veía en ninguna parte; con los rótulos de TIPO (Cerramientos por material,
	 * Pérgolas por Bioclimáticas/Retráctiles), que no enlazan, volvió a pintar texto
	 * real. #8a8a8a da 5,04:1 y sigue leyéndose como rótulo y no como enlace.
	 */
	color: #8a8a8a;
	/*
	 * El theme fuerza `nowrap` + `overflow: hidden`. Con caja alta y `letter-spacing`,
	 * el rótulo más largo mide 139 px de los 151 que tiene la columna a 1201 px, así que
	 * cabe — pero si algún día no cabe, es mejor que baje a dos líneas que que se corte
	 * en silencio.
	 */
	white-space: normal;
}

/* El rótulo que no enlaza no debe parecerlo: ni cursor de mano ni hover. */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li.menu-item > a:not([href]) {
	cursor: default;
	pointer-events: none;
}

/*
 * El que sí enlaza va en blanco, no en el gris del rótulo: con 22 enlaces de producto
 * en el panel, la cabeza de cada columna es la pieza que hay que poder barrer de un
 * vistazo, y el gris de un rótulo mudo no da contraste suficiente para eso
 * (el #7a7a7a que llevaba daba 4,05:1 sobre #1A1A1A, por debajo del 4,5 de AA para
 * texto pequeño; hoy es #8a8a8a y llega justo, ver arriba).
 *
 * El hover SUBRAYA en vez de cambiar de color, y es a propósito: el rojo de marca ya
 * significa «estás aquí» en este menú (`--pt-menu-activo`), y usarlo también para el
 * hover haría ambiguo el único estado que informa.
 */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li.menu-item > a[href] {
	color: #ffffff;
	text-decoration: none;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li.menu-item > a[href]:hover,
.primary-nav ul li.mega-menu-links > ul.mega-menu > li.menu-item > a[href]:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > a .menu-item__plus,
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > a .menu-item_dots {
	display: none !important;
}

/* ─── 4. Los enlaces de producto ──────────────────────────────────────────── */

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul {
	padding: 0;
	margin: 0;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > a {
	display: block;
	padding: 7px 0;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: normal;
	color: var(--pt-menu-texto);
	transition: color 0.2s ease;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > a:hover {
	color: #ffffff;
}

/* La ficha en la que estamos, y su familia en el nivel 0. */
.primary-nav ul li.mega-menu-links > ul.mega-menu li[class*="current-menu-item"] > a,
.primary-nav ul li.mega-menu-links > ul.mega-menu li[class*="current_page_item"] > a {
	color: var(--pt-menu-activo);
}

/*
 * El theme apila el contenido del ítem en columna y lo centra, porque espera una foto
 * encima del rótulo (`main.css:3051`). Ver nota 3 de la cabecera.
 */
.primary-nav ul li.mega-menu-links > ul.mega-menu .item_text {
	display: inline;
	flex-direction: unset;
	text-align: left;
}

/*
 * El theme fija 18px al enlace de nivel 1 (`main.css:3062`), que aquí es el rótulo de
 * columna. Ya NO se deshace con `inherit`: el bloque del punto 3 le da su tamaño
 * explícito (0.72rem) con la especificidad suficiente para ganarle. La regla que había
 * aquí —`font-size: inherit` con una clase más— era justamente la que se lo comía.
 */

/* ─── 4b. El nivel de TIPO dentro de una columna ───────────────────────────── */

/*
 * Tres niveles dentro del panel: familia (rótulo de columna) → tipo → modelo. Hoy solo
 * lo usa Pérgolas —«Bioclimáticas» y «Retráctiles»—, y es el piloto para Toldos.
 *
 * ⚠️ **El walker no tiene un modo para esto.** Su `start_lvl()` solo distingue los dos
 * primeros niveles (`sub-menu-columns` y `sub-menu-columns_item`); del tercero en
 * adelante cae en su `default:` y emite un `<ul class="sub-menu">` normal, o sea un
 * desplegable de los de toda la vida: `position: absolute`, `min-width: 260px`,
 * `opacity: 0` y `left: calc(100% + 3px)` (`main.css:2443` y `2499`), pensado para salir
 * volando a la derecha del ítem. Y `main.css:3048` remata con
 * `left: 100% !important` justo para este caso.
 *
 * Aquí no queremos un flyout: queremos que los modelos del tipo caigan DEBAJO de su
 * rótulo, dentro de la columna. Se consigue con `position: static`, que además desactiva
 * el `left: 100% !important` sin necesidad de otro `!important` (una caja estática
 * ignora `left`). Lo demás es deshacer el aspecto de desplegable: el borde, el
 * `min-width`, el `white-space: nowrap` y el `::before` que le pone una zona de guarda
 * de 10 px para que el ratón pueda cruzar.
 *
 * ⚠️ Y la visibilidad hay que DESTAPARLA, que no es lo mismo que forzarla — y la
 * diferencia fue un bug de verdad, ver abajo. Ninguna regla de hover alcanza al nivel 3:
 * el nivel 2 se revela con `li:hover > ul > li > ul.mega-menu` (`main.css:2571`), que
 * exige la clase `mega-menu` en ese `ul`, y el `default:` del walker no la pone. Pero
 * tampoco hace falta que lo alcance: `visibility` se HEREDA, así que basta con quitarle
 * el `hidden` explícito que le pone la regla base del theme (`main.css:2443`, que lo
 * selecciona con `> ul ul`) y dejar que siga a su panel. Eso es `visibility: inherit`.
 *
 * ⚠️⚠️ **Con `visibility: visible` el menú se abría solo al pasar el ratón por el hueco
 * donde iba a salir el panel.** Es la trampa de esta tanda y merece leerse entera:
 *
 *  · `visibility` se hereda, así que un descendiente puede volver a `visible` dentro de
 *    un ancestro `hidden`, y entonces **existe para el ratón**.
 *  · Que no se VEA no ayuda: lo que lo tapa es el `opacity: 0` del nivel 2, y un
 *    elemento con opacidad 0 sigue recibiendo eventos de puntero.
 *  · Y el panel cerrado ocupa su sitio igual (es `absolute` y mide su alto completo),
 *    así que esa lista invisible cubría ~400×420 px justo debajo del rótulo.
 *  · Al entrar el ratón ahí, el `li` de nivel 0 se marcaba `:hover` —el `ul` es su
 *    descendiente— y el panel se abría **sin haber pasado por el título**.
 *
 * Con `inherit` (trampa 118), el nivel 3 está `hidden` mientras el panel lo esté, o sea que no se
 * pinta NI recibe el ratón, y pasa a `visible` en cuanto el panel lo hace. `medir-menu.py`
 * lo comprueba desde entonces con `elementFromPoint` sobre el panel cerrado.
 */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > ul {
	position: static;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	white-space: normal;
	opacity: 1;
	visibility: inherit;
	transition: none;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > ul::before {
	display: none;
}

/*
 * El rótulo de tipo que NO enlaza. `:not([href])` es lo que lo separa de un enlace de
 * producto del mismo nivel: en Cerramientos ese nivel son los modelos, en Pérgolas son
 * los dos tipos.
 *
 * ⚠️ **Desde el 2026-08-21 hay tipos que SÍ enlazan** —Bioclimáticas y Retráctiles
 * tienen página propia— y para esos el `href` ya no dice la verdad: sin el bloque de
 * más abajo caían en la regla del enlace de producto (línea 436) y los tres niveles de
 * la columna de Pérgolas se leían como dos. El discriminador nuevo es
 * `.menu-item-has-children`, que WordPress ya pone: en este nivel, lo que tiene hijos
 * es un tipo y lo que no, un modelo. Este bloque se queda porque el caso sin `href`
 * sigue existiendo.
 *
 * Va en gris y en caja mixta, un escalón por debajo del rótulo de columna (que va en
 * caja alta): dentro de una columna de 220 px hay que poder distinguir tres niveles sin
 * sangrías profundas, y el peso del texto lo hace mejor que el hueco.
 */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > a:not([href]) {
	display: block;
	padding: 10px 0 2px;
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: #8a8a8a;
	cursor: default;
	pointer-events: none;
}

/* El primero no necesita el aire de arriba: el rótulo de la familia ya lo da. */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li:first-child > a:not([href]) {
	padding-top: 2px;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > a:not([href]) .menu-item__plus,
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > a:not([href]) .menu-item_dots {
	display: none !important;
}

/*
 * El rótulo de tipo que SÍ enlaza (Pérgolas → Bioclimáticas · Retráctiles).
 *
 * Mismo aspecto que el mudo de arriba —gris, caja mixta, un escalón por debajo del
 * rótulo de columna— porque es la misma pieza de la jerarquía; lo único que cambia es
 * que se puede pulsar, así que recupera el cursor, el hover y la transición.
 *
 * 4 clases + 7 tipos: le gana por un punto a la regla del enlace de producto (3 + 7),
 * que si no lo pintaría igual que un modelo. La cuenta importa aquí — es exactamente la
 * clase de fallo de la trampa 108, que solo se veía a un ancho concreto.
 */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li.menu-item-has-children > a {
	display: block;
	padding: 10px 0 2px;
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: none;
	color: #8a8a8a;
	transition: color 0.2s ease;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li.menu-item-has-children > a:hover {
	color: #ffffff;
}

/* El primero no necesita el aire de arriba: el rótulo de la familia ya lo da. */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li.menu-item-has-children:first-child > a {
	padding-top: 2px;
}

/*
 * Los modelos del nivel 3, con el mismo aspecto que los del nivel 2 —son la misma cosa
 * y tienen que leerse igual— más una sangría de 10 px, que es lo que los ata a su
 * rótulo de tipo sin abrir una columna nueva.
 */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > ul > li > a {
	display: block;
	padding: 6px 0 6px 10px;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--pt-menu-texto);
	transition: color 0.2s ease;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > ul > li > a:hover {
	color: #ffffff;
}

/* ─── 4c. El subtítulo del modelo ──────────────────────────────────────────── */

/*
 * El `<span class="pt-menu-sub">` que inyecta `mink-child/inc/menu-descripciones.php`
 * dentro del `<a>`, a partir del campo `description` del ítem. Hoy lo llevan los cuatro
 * modelos de Cerramientos y nadie más.
 *
 * Viene del panel de tipo lista del referente en Next.js, que pone una línea pequeña
 * debajo de cada nombre. Es la única pieza de ese panel que sale barata (el overlay a
 * pantalla completa y el maestro-detalle por hover piden JS propio, y el widget del menú
 * se pinta tres veces por página).
 *
 * ⚠️ `text-transform: none` no es decorativo: en el cajón móvil el theme pone
 * `text-transform: capitalize` a todo `a` del nav (`main.css:3772`) y el subtítulo lo
 * hereda, así que «Correderos sobre rieles» salía «Correderos Sobre Rieles». Un valor
 * declarado en el propio elemento gana a uno heredado, sin `!important`.
 *
 * El #8a8a8a es el mínimo que llega a AA sobre el #1a1a1a del panel (5,04:1). Con
 * `--pt-menu-texto` (#b3b3b3, 8,3:1) el subtítulo competía con el nombre del modelo.
 */
/*
 * ⚠️ El selector es largo A PROPÓSITO, y con `.pt-menu-sub` a secas el subtítulo sale
 * BIEN en el escritorio y MAL en el cajón: el theme pone
 * `.elementor-widget-wgl-menu.menu_vertical .primary-nav ul li > a > span
 * { display: inline-block }` (`main.css:2941`) para su propio `.item_text`, y ese
 * selector alcanza a cualquier `<span>` dentro del enlace. Con 3 clases y 4 tipos le
 * gana a una clase suelta, así que el subtítulo se pegaba al nombre del modelo en la
 * misma línea: «FlexiGlassPlegable y abatible». Aquí van 4 clases y 6 tipos.
 */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > a .pt-menu-sub {
	display: block;
	margin-top: 1px;
	font-size: 0.78rem;
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	color: #8a8a8a;
}

/* Con subtítulo, el enlace necesita más aire vertical del que da el punto 4. */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > a:has(.pt-menu-sub) {
	padding: 6px 0 8px;
}

/*
 * El nombre del modelo, en blanco cuando hay subtítulo: con dos líneas por ítem el
 * #b3b3b3 de un enlace suelto ya no jerarquiza nada.
 *
 * El color va en el `<a>`, NO en el `.item_text` de dentro, y no es indiferente: el rojo
 * de «estás aquí» se pinta sobre el `<a>`, así que un color en el hijo se lo comería —el
 * `.item_text` gana por ser una declaración propia frente a una heredada— y la ficha
 * abierta dejaría de marcarse. Con el color en el mismo elemento decide la
 * especificidad, y la regla de abajo la sube por encima de esta.
 *
 * Si el navegador no entiende `:has()`, el nombre se queda en #b3b3b3 y el subtítulo en
 * #8a8a8a: se pierde el contraste entre los dos, no la legibilidad de ninguno.
 */
.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > a:has(.pt-menu-sub) {
	color: #ffffff;
}

.primary-nav ul li.mega-menu-links > ul.mega-menu li[class*="current-menu-item"] > a:has(.pt-menu-sub),
.primary-nav ul li.mega-menu-links > ul.mega-menu li[class*="current_page_item"] > a:has(.pt-menu-sub) {
	color: var(--pt-menu-activo);
}

.primary-nav ul li.mega-menu-links > ul.mega-menu > li > ul > li > a:hover .pt-menu-sub {
	color: #b3b3b3;
}

/* ─── 5. Los desplegables normales (Tensoestructuras, Cubiertas) ──────────── */

.primary-nav > ul > li > ul.sub-menu:not(.mega-menu) {
	padding: 18px 0;
	background: var(--pt-menu-fondo);
	border: 0;
	border-radius: 0;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.primary-nav > ul > li > ul.sub-menu:not(.mega-menu) > li > a {
	padding: 7px 28px;
	font-size: 0.95rem;
	font-weight: 300;
	letter-spacing: normal;
	color: var(--pt-menu-texto);
	transition: color 0.2s ease;
}

.primary-nav > ul > li > ul.sub-menu:not(.mega-menu) > li > a:hover {
	color: #ffffff;
}

.primary-nav > ul > li > ul.sub-menu:not(.mega-menu) > li[class*="current"] > a {
	color: var(--pt-menu-activo);
}

/* ─── 6. La banda 1200-1400 px ────────────────────────────────────────────── */

/*
 * Ver nota 2 de la cabecera. Los números se rehicieron el 2026-08-20, cuando el nivel 0
 * pasó a MAYÚSCULAS y de 8 ítems a 5 (las cuatro familias de cubrimiento se fueron
 * dentro de «Cubrimientos»). Los dos cambios tiran en sentido contrario y el segundo
 * gana de sobra:
 *
 *   · caja alta: el texto de los rótulos crece ~29 % (medido, 574 → 739 px con los 8);
 *   · cinco ítems en vez de ocho: el texto baja a **466 px**.
 *
 * Con 466 px de texto, el aire que cabe es lo que decide. En el tramo estrecho:
 *
 *   ancho   nav disponible   ítems con margen 16   holgura
 *   1201         696 px            626 px            70
 *   1301         796 px            626 px           170
 *   1400        ~860 px            626 px           234
 *
 * Con el margen del theme (20 px) más su padding (11), el aire son 62 px por ítem y los
 * cinco piden 776 px: a 1201 no cabrían. Con 16 y sin padding, 626. Por encima de 1400
 * no hace falta tocar nada: a 1440 hay 935 px disponibles para los 776 del theme.
 *
 * Antes había DOS tramos (12 px de 1301 a 1400 y 6 px de 1200 a 1300) porque con ocho
 * ítems el margen que salvaba 1200 dejaba el menú apelmazado a 1400. Con cinco sobra un
 * solo valor — y los 6 px de aquel tramo estrecho ya no valen igual: en caja alta el
 * punto decorativo que el theme pone delante de cada ítem quedaba pegado al rótulo
 * siguiente.
 *
 * El drawer móvil toma el relevo a ~1200 px (medido: a 1200 el nav que se ve ya es el
 * `menu_vertical`), así que por debajo de eso nada de esto aplica.
 *
 * NO se baja el cuerpo de letra: son 14 px y en un portátil de 1280 quedaría ilegible
 * justo donde más se navega.
 */
@media (min-width: 1200px) and (max-width: 1400px) {
	.primary-nav > ul.menu > li > a {
		margin-left: 16px;
		margin-right: 16px;
		padding-left: 0;
		padding-right: 0;
	}
}

/* ─── 7. El drawer móvil ──────────────────────────────────────────────────── */

/*
 * El mismo widget se renderiza vertical dentro del cajón (`.menu_vertical`). Ahí el
 * panel no flota: es un acordeón a lo ancho, así que el ancho acotado del punto 1 y el
 * separador de columnas del punto 2 estorban.
 *
 * ── Las ramas con mega y el acordeón de dos pasos ─────────────────────────────
 *
 * El theme deja en `display: none` los DOS niveles de la rama mega (`main.css:2926`, el
 * `ul.sub-menu` de nivel 1 y el `mega-menu-links > ul.mega-menu > li > ul` de nivel 2)
 * para que jQuery los baje uno a uno con `slideDown`, y el `.button_switcher` que
 * dispara ese `slideDown` lo inyecta el JS dentro de CADA `> a` de un ítem con hijos
 * (`theme-addons.js:3095`), rótulos de columna incluidos.
 *
 * **Antes se forzaba la rama entera abierta** (`display: block !important` en el nivel
 * 2) y era lo correcto entonces: con Pérgolas en el nivel 0, el acordeón quedaba de
 * TRES pasos —Pérgolas → Bioclimáticas → PergoLam— y el del medio no era ni un enlace,
 * así que abrirlo todo de una vez ahorraba un toque muerto.
 *
 * **Desde el 2026-08-20 se deja que jQuery lo controle**, y el motivo es que las dos
 * premisas cambiaron: el nivel 1 ya no son rótulos mudos sino las cuatro landings de
 * familia —o sea un destino de verdad en cada peldaño— y ahora cuelgan 26 enlaces del
 * mismo ítem. Medido a 390 px con la rama forzada: **944 px de acordeón** de un solo
 * toque, o sea dos pantallas y media de lista plana para elegir un modelo. Con los dos
 * pasos, «Cubrimientos» abre cuatro familias y cada una abre los suyos, y el visitante
 * que solo quería la landing de Toldos la tiene a un toque.
 *
 * Lo que SÍ hay que seguir forzando es la visibilidad, no el `display`: `main.css:3027`
 * deja ese `ul` en `opacity: 0; visibility: hidden` esperando un `:hover` que en un
 * móvil no llega nunca, y esa regla GANA a la del propio theme para menú vertical
 * (`main.css:2905`, que pone `opacity: 1; visibility: visible`) porque con las mismas
 * tres clases decide el número de selectores de tipo, cuatro contra tres. Sin esto los
 * modelos bajan con su hueco reservado y sin pintar.
 *
 * El `!important` hace falta porque al cerrar, `hideSubMenu` usa un `.find()` que
 * alcanza también los `ul` de nivel 2 — y una declaración `!important` de hoja sí gana
 * a un inline normal.
 */
.mobile_nav_wrapper
	.primary-nav
	ul
	li.mega-menu-links
	> ul.mega-menu
	> li
	> ul {
	opacity: 1 !important;
	visibility: visible !important;
}

/*
 * ── La columna de rótulo MUDO en el cajón ─────────────────────────────────────
 *
 * `main.css:2929` deja el `ul` de los modelos en `display: none` y espera que lo abra el
 * `.button_switcher` que el JS inyecta en el `<a>` del rótulo. Cuando ese rótulo enlaza
 * —las cuatro familias de Cubrimientos— eso funciona y además tiene sentido: cada
 * peldaño del acordeón es un destino. Cuando **no** enlaza —las tres columnas de
 * material de Cerramientos— el `<a>` va con `pointer-events: none` (punto 3), o sea que
 * el disparador está ahí y no responde: la rama sería inabrible.
 *
 * Con `:has()` se distingue exactamente ese caso —«la columna cuyo rótulo no es un
 * enlace»— y se abre con la rama. Con solo 4 modelos, «Cerramientos» cabe entero en una
 * pantalla de un toque, así que no hay nada que ganar partiéndolo en dos.
 *
 * Y el `pointer-events: auto` de debajo es la RED por si el navegador no entiende
 * `:has()`: entonces el bloque de arriba se descarta entero —incluido el `+` que
 * esconde— y el rótulo vuelve a aceptar el toque, así que la rama se abre en dos pasos
 * en vez de en uno. Peor, pero no roto.
 */
.mobile_nav_wrapper .primary-nav ul li.mega-menu-links a:not([href]) {
	pointer-events: auto;
}

.elementor-widget-wgl-menu.menu_vertical
	.primary-nav
	ul
	li.mega-menu-links
	> ul.mega-menu
	> li:has(> a:not([href]))
	> ul {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.mobile_nav_wrapper
	.primary-nav
	ul
	li.mega-menu-links
	> ul.mega-menu
	> li:has(> a:not([href]))
	> a
	.button_switcher {
	display: none !important;
}

/*
 * ── El nivel de TIPO en el cajón ──────────────────────────────────────────────
 *
 * Aquí sí hay que forzarlo abierto, y por el motivo por el que se dejó de forzar el
 * nivel 2: **un rótulo de tipo no es un destino**. `main.css:2929` deja el `ul` de nivel
 * 3 en `display: none` esperando que jQuery lo baje, y el disparador que el JS inyecta
 * (`theme-addons.js:3095` mete un `.button_switcher` en CADA `> a` con hijos) cae dentro
 * de un `<a>` sin `href` al que `menu.css` le ha quitado los `pointer-events`. Sin esto,
 * la rama de Pérgolas **no se puede abrir en el cajón de ninguna manera**: medido, 48 px
 * de acordeón y 0 de sus 7 modelos visibles.
 *
 * Con el nivel 3 abierto, «Pérgolas» despliega sus dos tipos y sus siete modelos de un
 * toque, o sea igual que las otras tres familias, y los rótulos de tipo se quedan como
 * lo que son: separadores dentro de la lista.
 *
 * El `.button_switcher` del rótulo se esconde por lo mismo: un `+` que no responde a un
 * toque es peor que no tener `+`.
 */
.elementor-widget-wgl-menu.menu_vertical
	.primary-nav
	ul
	li.mega-menu-links
	> ul.mega-menu
	> li
	> ul
	> li
	ul {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.mobile_nav_wrapper
	.primary-nav
	ul
	li.mega-menu-links
	> ul.mega-menu
	> li
	> ul
	> li
	> a:not([href])
	.button_switcher {
	display: none !important;
}

.elementor-widget-wgl-menu.menu_vertical .primary-nav ul li.mega-menu-links > ul.mega-menu {
	width: 100%;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.elementor-widget-wgl-menu.menu_vertical
	.primary-nav
	ul
	li.mega-menu-links.mega-columns-2col
	> ul.mega-menu
	> li {
	/* El theme las deja al 50% (`main.css:3003`): en el cajón van una debajo de otra. */
	width: 100%;
	padding: 0;
}

.elementor-widget-wgl-menu.menu_vertical
	.primary-nav
	ul
	li.mega-menu-links.mega-columns-2col
	> ul.mega-menu
	> li:first-child::after {
	display: none;
}

/*
 * Aire entre familias: en el cajón el rótulo de una cae justo debajo del último modelo
 * de la anterior y los dos niveles se leen como una sola lista.
 *
 * ⚠️ Sin `:not([href])`. Lo llevaba, y al pasar los rótulos a enlaces (2026-08-20) la
 * regla dejó de aplicar en silencio: el selector seguía siendo válido y ya no
 * seleccionaba nada. Ahora vale para las dos formas de rótulo.
 */
.mobile_nav_wrapper
	.primary-nav
	ul
	li.mega-menu-links
	> ul.mega-menu
	> li
	+ li
	> a {
	margin-top: 14px;
}


/*
 * ── Filas de 44 px en TODOS los niveles del cajón ─────────────────────────────
 *
 * Lo pidió José el 2026-09-04 —«creo que no cumple en todos los casos»— y estaba en lo
 * cierto. Medido a 375 px con teclado y clics reales, rama por rama (el acordeón cierra
 * a las hermanas, así que hay que aislarlas o siempre gana la última):
 *
 *   | nivel | ejemplo                              | alto |
 *   |------:|--------------------------------------|-----:|
 *   |     1 | «Cubrimientos», «Cerramientos»       |  48  | ✅
 *   |     2 | «Pérgolas», «Por colección»          |  42  |
 *   |     3 | **«Bioclimáticas»**                  |  20  | 🚨 por debajo del 24×24 de AA
 *   |     3 | «Retráctiles», «Fijas»               |  28  |
 *   |     3 | las 14 colecciones/categorías        |  35  |
 *   |     4 | los 10 modelos de pérgola            |  33  |
 *
 * O sea que **el cajón invertía la lógica: cuanto más específico el ítem, más pequeño el
 * objetivo**, y el peor caso —20 px— es el único de todo el sitio que no llegaba ni al
 * mínimo AA. Con el dedo, «Bioclimáticas» era una franja de 20 px entre dos enlaces.
 *
 * ⚠️ **La culpa no es del theme: la regla que ganaba es NUESTRA, del punto 4b.** Es
 * `padding: 10px 0 2px; line-height: 1.3; font-size: 0.78rem`, escrita para el panel de
 * ESCRITORIO, donde ese rótulo de tipo es un epígrafe pequeño y correcto. En el cajón el
 * mismo marcado deja de ser un epígrafe y pasa a ser una fila que se pulsa. Es el riesgo
 * de compartir selectores entre el panel flotante y el acordeón, y por eso este bloque
 * va acotado al cajón y no cambia una coma del escritorio (verificado a 1440 px).
 *
 * ── Por qué `line-height` y no `min-height` ni flex ───────────────────────────
 *
 * Las tres se probaron en vivo, midiendo:
 *
 *   · **`display: flex; align-items: center`** — PIERDE. `main.css` fija
 *     `display: block` con `.elementor-widget-wgl-menu.menu_vertical .primary-nav ul li a`
 *     y el `display` no llegaba a aplicarse; el resultado era idéntico a no ponerlo.
 *   · **`min-height: 44px` a secas** — las filas llegan a 44 px **pero el texto se queda
 *     arriba**: medido, el rótulo de «Bioclimáticas» quedaba 12 px por encima del centro
 *     de su propia fila, con el hueco muerto debajo. Da el tamaño y regala el aspecto.
 *   · **`line-height` + relleno simétrico** — es el mecanismo que el propio theme usa en
 *     el nivel 1 (`line-height: 30px` + `padding: 9px`), y crece **centrando**. 30 + 7 + 7
 *     = 44 exactos, y el desvío del rótulo respecto al centro baja a 0 px en las tres
 *     ramas medidas.
 *
 * **El tamaño de letra NO se toca**: la jerarquía visual del cajón (rótulo de tipo en
 * 0,78 rem, modelo en 0,95 rem) es correcta y es lo que hace legible un acordeón de
 * cuatro niveles. Lo que crece es la zona que responde al dedo, no la tipografía.
 *
 * Las filas de dos líneas —los cuatro modelos de Cerramientos, que llevan subtítulo
 * (`.pt-menu-sub`, punto 4c)— quedan FUERA del `line-height` y solo reciben el mínimo:
 * ya miden 53 px, y subirles el interlineado se lo aplicaría a las dos líneas.
 *
 * ⚠️ La cadena de selectores es larga porque **tiene que ganar por especificidad**: la
 * regla del 4b es (0,5,7) contando su `:first-child`, así que aquí hacen falta seis
 * clases (`mobile_nav_wrapper`, `menu_vertical`, `primary-nav`, `mobile_switch_on`,
 * `mega-menu-links`, `mega-menu`). No es adorno: con una menos, empata y decide el orden
 * de los bloques dentro del archivo, que es exactamente la clase de dependencia
 * invisible que la trampa 108 ya cobró una vez.
 */
.mobile_nav_wrapper
	.menu_vertical
	.primary-nav
	ul.mobile_switch_on
	li.mega-menu-links
	> ul.mega-menu > li > a,
.mobile_nav_wrapper
	.menu_vertical
	.primary-nav
	ul.mobile_switch_on
	li.mega-menu-links
	> ul.mega-menu > li > ul li > a:not(:has(.pt-menu-sub)) {
	padding-top: 7px;
	padding-bottom: 7px;
	line-height: 30px;
}

.mobile_nav_wrapper
	.menu_vertical
	.primary-nav
	ul.mobile_switch_on
	li.mega-menu-links
	> ul.mega-menu > li > ul li > a:has(.pt-menu-sub) {
	min-height: 44px;
}