/*
 * Bloque uts/menu — los menús clásicos con el marcado del tema.
 *
 * Las medidas no son nuevas: son las que ya estaban verificadas contra la
 * maqueta con el bloque de navegación del núcleo. Barra 13 px sobre verde
 * oscuro con realce limón, menú principal Raleway 600 a 14 px con subrayado
 * limón de 3 px en el activo, pie 14 px al 55 % de blanco.
 *
 * Ni un hex literal: todo sale de theme.json.
 */

.uts-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.uts-menu__item {
	position: relative;
	display: flex;
	align-items: center;
}

.uts-menu__enlace {
	text-decoration: none;
	display: flex;
	align-items: center;
}

/* --------------------------------------------------------------------------
   Barra de servicio · franja verde oscuro
   -------------------------------------------------------------------------- */

.uts-menu--barra {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--pequeno);
}

/*
 * Desde el 29 de septiembre la barra lleva nueve ítems (con Estudiantes,
 * Docentes y Graduados). Entre 1.024 y 1.099 px, con 24 px entre ítems, el
 * idioma y el buscador bajaban a una segunda línea: faltaban unos 100 px. Con
 * 14 px entre ítems y 16 entre los tres grupos de la barra caben en una sola
 * línea con 28 px de aire (medido a 1.024). Por debajo de 1.024 la barra de
 * enlaces se va a la hamburguesa.
 */
@media ( min-width: 1024px ) and ( max-width: 1099px ) {
	.uts-menu--barra {
		column-gap: 14px;
	}

	.uts-barra-servicio .uts-barra-servicio__interior {
		column-gap: var(--wp--preset--spacing--50);
	}
}

/*
 * Traducida, la barra pide más: el portugués («Atendimento ao cidadão»,
 * «Transparência», «Professores») necesita unos 75 px más que el español entre
 * 1.024 y 1.199 px, y el francés unos 38. Google marca la raíz con
 * «translated-ltr» mientras la página está traducida; sólo entonces se aprieta
 * el espacio entre ítems y se baja medio punto el cuerpo. En español la barra
 * no cambia.
 */
@media ( min-width: 1024px ) and ( max-width: 1199px ) {

	html.translated-ltr .uts-menu--barra {
		column-gap: 10px;
		font-size: 12.5px;
	}

	html.translated-ltr .uts-barra-servicio .uts-barra-servicio__interior {
		column-gap: var(--wp--preset--spacing--40);
	}
}

.uts-menu--barra .uts-menu__enlace {
	color: var(--wp--custom--barra--enlace);
	min-height: 28px;
	line-height: 1.4;
}

/*
 * OJO · sobre el verde oscuro el realce es LIMÓN, nunca verde escudo: el
 * escudo sobre este fondo rinde 1,65:1 y el texto desaparece.
 */
.uts-menu--barra .uts-menu__enlace:hover,
.uts-menu--barra .uts-menu__enlace:focus,
.uts-menu--barra .uts-menu__enlace:active {
	color: var(--wp--preset--color--verde-limon);
	text-decoration: underline;
}

/*
 * Desplegable de la barra. Dos cosas que no vienen de la variante principal:
 *
 * 1. El panel se posiciona respecto a SU ítem; si no, cuelga del primer
 *    ancestro posicionado y aparece desplazado a un lado de la barra.
 * 2. Tiene que pasar por encima del encabezado pegajoso, que va con z-index
 *    100; con el 60 heredado, el panel quedaba tapado por la cabecera blanca.
 */
.uts-menu--barra .uts-menu__item {
	position: relative;
}

.uts-menu--barra .uts-menu__panel {
	z-index: 120;
	/*
	 * 248 y no los 220 heredados: el desplegable de «Servicios» lleva rótulos
	 * largos —«Promoción y prevención en salud»— y a 220 partían en dos
	 * renglones, que en una lista de diez enlaces se lee como si fueran veinte.
	 */
	min-width: 248px;
}

/*
 * El último ítem de la barra se ancla a la DERECHA de su propio ítem.
 *
 * El panel cuelga con «left: 0», y «Servicios» es el ítem más a la derecha de
 * la franja: medido en una ventana de 910 px, el panel arrancaba en x=802 y
 * terminaba en 1022, o sea 112 px fuera de la pantalla, con enlaces que no
 * había forma de pulsar. Anclado a la derecha cabe en cualquier ancho de los
 * que llegan a ver esta barra (de 901 px arriba; por debajo va la hamburguesa).
 */
.uts-menu--barra > .uts-menu__item:last-child > .uts-menu__panel {
	left: auto;
	right: 0;
}

/* El chevron hereda gris, que sobre el verde oscuro no se ve. */
.uts-menu--barra .uts-menu__desplegar {
	color: var(--wp--custom--barra--enlace);
}

.uts-menu--barra .uts-menu__desplegar:hover,
.uts-menu--barra .uts-menu__desplegar:focus-visible {
	color: var(--wp--preset--color--verde-limon);
}

/* --------------------------------------------------------------------------
   Menú principal · cabecera blanca
   -------------------------------------------------------------------------- */

/*
 * Los ítems del menú principal se ESTIRAN a todo el alto del encabezado.
 *
 * No es un capricho: resuelve dos fallos a la vez.
 *
 * Uno · el panel del desplegable arranca en «top: 100%» del <li>. Si el <li>
 * sólo mide lo que el texto, ese 100 % cae a media altura del encabezado y el
 * panel acaba tapando el borde inferior de la franja —medido: encabezado hasta
 * 105, panel desde 97—, que es lo que se veía como una pieza suelta y mal
 * encajada. Estirado, el panel nace justo en el borde y cuelga de él.
 *
 * Dos · entre el <li> y el panel había 8 px de hueco que no pertenecían a
 * ninguno de los dos. Al bajar el ratón para elegir en el submenú, el puntero
 * cruzaba ese hueco, salía del <li>, saltaba «mouseleave» y el panel se
 * cerraba en la cara. Con el <li> hasta el borde no queda hueco que cruzar.
 *
 * El enlace conserva su alto natural centrado, así que el subrayado limón del
 * ítem activo sigue justo debajo del texto, como en la maqueta.
 */
.uts-menu--principal {
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 2px;
}

.uts-encabezado .uts-menu-bloque--principal {
	align-self: stretch;
	display: flex;
	flex: 1 1 auto;
}

.uts-encabezado .uts-menu--principal {
	flex: 1 1 auto;
}

.uts-menu--principal > .uts-menu__item {
	align-items: center;
}

.uts-menu--principal .uts-menu__enlace {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	color: var(--wp--preset--color--gris);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--chico);
	position: relative;
	min-height: 24px;
}

.uts-menu--principal .uts-menu__enlace:hover,
.uts-menu--principal .uts-menu__enlace:focus {
	color: var(--wp--preset--color--verde-escudo);
}

/* Regla 4 · en móvil no hay hover: sin :active no hay respuesta al toque. */
.uts-menu--principal .uts-menu__enlace:active {
	color: var(--wp--preset--color--verde-oscuro);
	background: var(--wp--preset--color--arena);
}

/* Ítem activo y sus ancestros: subrayado de 3 px en limón. */
.uts-menu--principal .current-menu-item > .uts-menu__enlace,
.uts-menu--principal .current-menu-ancestor > .uts-menu__enlace,
.uts-menu--principal .current-menu-parent > .uts-menu__enlace {
	color: var(--wp--preset--color--verde-oscuro);
	font-weight: 700;
}

.uts-menu--principal .current-menu-item > .uts-menu__enlace::after,
.uts-menu--principal .current-menu-ancestor > .uts-menu__enlace::after,
.uts-menu--principal .current-menu-parent > .uts-menu__enlace::after {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	bottom: -1px;
	height: 3px;
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--verde-limon);
}

/* --------------------------------------------------------------------------
   El botón que despliega
   -------------------------------------------------------------------------- */

/*
 * El padre es un enlace real a su página y ESTE es el que abre el panel. Se
 * separan a propósito: convertir el padre en botón dejaría «Nosotros» sin
 * forma de llegar a /nosotros/.
 */
.uts-menu__desplegar {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0 var(--wp--preset--spacing--20);
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radio--chico);
	color: var(--wp--preset--color--gris);
	cursor: pointer;
	transition: color var(--wp--custom--transicion--base), transform var(--wp--custom--transicion--base);
}

.uts-menu__desplegar:hover,
.uts-menu__desplegar:focus-visible {
	color: var(--wp--preset--color--verde-escudo);
}

/*
 * El acercamiento entre el enlace y su botón sale del relleno del enlace, no de
 * un margen negativo del botón: con el margen, el enlace pisaba 4 px del botón y
 * el objetivo táctil quedaba en 20 × 24 (SC 2.5.8).
 */
.uts-menu--principal .uts-menu__enlace:has( + .uts-menu__desplegar ) {
	padding-inline-end: calc( var(--wp--preset--spacing--40) - var(--wp--preset--spacing--20) );
}

.uts-menu__desplegar[aria-expanded="true"] .uts-menu__chevron {
	transform: rotate( 180deg );
}

.uts-menu__chevron {
	transition: transform var(--wp--custom--transicion--base);
}

/* --------------------------------------------------------------------------
   El panel del desplegable · escritorio
   -------------------------------------------------------------------------- */

.uts-menu__panel {
	list-style: none;
	margin: 0;
	padding: var(--wp--preset--spacing--20) 0;
	position: absolute;
	top: 100%;
	left: 0;
	/*
	 * Sin margen: el panel nace pegado al borde inferior del encabezado, del
	 * que ahora cuelga. El «margin-top: 8px» de antes era el hueco que rompía
	 * el hover y el que hacía que el panel tapara el borde de la franja.
	 */
	margin-top: 0;
	min-width: 220px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--base);
	box-shadow: var(--wp--preset--shadow--tarjeta);
}

.uts-menu__panel[hidden] {
	display: none;
}

/*
 * Mientras menu.js no ha arrancado, los paneles (que el HTML trae abiertos para
 * quien no tiene JavaScript) se esconden: sin esto se veían todos desplegados
 * una fracción de segundo al cargar cada página. La marca la pone y la quita
 * uts_menu_temprano() (functions.php) y menu.js.
 */
.uts-menu-espera .uts-menu__panel {
	display: none;
}

.uts-menu__panel .uts-menu__item {
	display: block;
}

.uts-menu__panel .uts-menu__enlace {
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 400;
	color: var(--wp--preset--color--tinta);
	padding: 10px var(--wp--preset--spacing--50);
	min-height: 24px;
	border-inline-start: 3px solid transparent;
	transition: background-color var(--wp--custom--transicion--base), border-color var(--wp--custom--transicion--base);
}

/* Realce con barra limón a la izquierda, no sólo cambio de fondo: se ve
   también sin percibir color. */
.uts-menu__panel .uts-menu__enlace:hover,
.uts-menu__panel .uts-menu__enlace:focus-visible {
	background-color: var(--wp--preset--color--papel);
	border-inline-start-color: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-menu__panel .uts-menu__enlace:active {
	background-color: var(--wp--preset--color--arena);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

.uts-menu__panel .current-menu-item > .uts-menu__enlace {
	font-weight: 700;
	color: var(--wp--preset--color--verde-oscuro);
	border-inline-start-color: var(--wp--preset--color--verde-limon);
}

/* --------------------------------------------------------------------------
   Pie · tres columnas de enlaces
   -------------------------------------------------------------------------- */

.uts-menu--pie {
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--menor);
}

.uts-menu--pie .uts-menu__item {
	display: block;
}

/*
 * Blanco al 55 %: es el mínimo medido que cumple la Resolución 1519
 * (5,41:1 sobre el verde oscuro). NO BAJAR DE AHÍ.
 */
.uts-menu--pie .uts-menu__enlace {
	color: var(--wp--custom--pie--enlace);
	line-height: 1.7;
	min-height: 24px;
	/*
	 * Inline-block y no flex: en el pie el rotulo puede llevar detras su
	 * etiqueta de formato —«Estatuto General (PDF)»— y hace falta que las dos
	 * fluyan como texto corrido para que el espacio duro las mantenga juntas.
	 * Como flex serian dos items sueltos y el espacio duro no ataria nada.
	 */
	display: inline-block;
}

.uts-menu--pie .uts-menu__enlace:hover,
.uts-menu--pie .uts-menu__enlace:focus,
.uts-menu--pie .uts-menu__enlace:active {
	color: var(--wp--preset--color--verde-limon);
	text-decoration: underline;
}

/* ==========================================================================
   Hamburguesa · móvil
   ========================================================================== */

.uts-hamburguesa {
	display: none;
}

.uts-hamburguesa__abrir,
.uts-hamburguesa__cerrar {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radio--chico);
	color: var(--wp--preset--color--verde-oscuro);
	cursor: pointer;
	transition: transform var(--wp--custom--transicion--pulsa);
}

.uts-hamburguesa__abrir {
	min-width: 44px;
	min-height: 44px;
}

.uts-hamburguesa__abrir:active,
.uts-hamburguesa__cerrar:active {
	transform: scale( 0.94 );
}

/*
 * El panel. Va fijo y a pantalla completa, con la franja institucional en el
 * borde superior: es el rojo del escudo y la bandera, «magenta» #6D100A, el
 * único rojo de la paleta.
 *
 * La franja es «border-top» y no un pseudo-elemento a propósito: el panel
 * lleva «overflow: auto», así que un «::before» absoluto se iría con el
 * scroll y desaparecería al bajar por la lista.
 */
.uts-hamburguesa__panel {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--papel);
	border-top: 6px solid var(--wp--preset--color--magenta);
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
	display: flex;
	flex-direction: column;
}

.uts-hamburguesa__panel[hidden] {
	display: none;
}

/*
 * El cerrar va EN EL FLUJO, alineado a la derecha en su propia fila, no
 * posicionado en absoluto. Absoluto tapaba la primera fila del menú —medido:
 * su borde inferior quedaba en 62 px y «Nosotros» empezaba en 38— y el solape
 * habría vuelto en cuanto alguien subiera el tamaño del texto al 125 %.
 */
.uts-hamburguesa__cerrar {
	flex: none;
	align-self: flex-end;
	margin-inline-end: var(--wp--custom--contenedor--aire);
	margin-block-end: var(--wp--preset--spacing--40);
	min-width: 44px;
	min-height: 44px;
}

/* Mientras el panel está abierto la página de detrás no se arrastra. */
.uts-menu-abierto,
.uts-menu-abierto body {
	overflow: hidden;
}

.uts-hamburguesa__grupo {
	display: block;
}

/* Los dos menús se apilan a lo ancho completo. */
.uts-hamburguesa .uts-menu--movil-principal,
.uts-hamburguesa .uts-menu--movil-utilidad {
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.uts-hamburguesa .uts-menu__item {
	display: block;
	width: 100%;
}

/*
 * La fila entera es el objetivo de toque, no sólo el texto. Se anima sólo
 * «background-color» y «transform»: nunca «all».
 */
.uts-hamburguesa .uts-menu__enlace {
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--wp--preset--spacing--40) var(--wp--custom--contenedor--aire);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--entrada);
	font-weight: 600;
	color: var(--wp--preset--color--verde-oscuro);
	min-height: 44px;
	transition:
		background-color var(--wp--custom--transicion--panel) var(--wp--custom--transicion--curva),
		transform var(--wp--custom--transicion--pulsa);
}

.uts-hamburguesa .uts-menu--movil-principal .uts-menu__enlace:active {
	background-color: var(--wp--preset--color--arena);
	transform: scale( 0.985 );
}

/* El chevron del acordeón se separa a la derecha y crece el toque. */
.uts-hamburguesa .uts-menu__item--tiene-hijos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.uts-hamburguesa .uts-menu__item--tiene-hijos > .uts-menu__enlace {
	flex: 1 1 auto;
	width: auto;
}

.uts-hamburguesa .uts-menu__desplegar {
	flex: none;
	min-width: 44px;
	min-height: 44px;
	margin-inline: 0 var(--wp--custom--contenedor--aire);
	color: var(--wp--preset--color--verde-oscuro);
}

/*
 * En móvil el submenú es un ACORDEÓN, no un panel flotante: se empuja el
 * contenido hacia abajo en lugar de taparlo.
 */
.uts-hamburguesa .uts-menu__panel {
	position: static;
	inset: auto;
	margin: 0;
	min-width: 0;
	width: 100%;
	flex: 1 0 100%;
	background: var(--wp--preset--color--blanco);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding-block: 0;
}

.uts-hamburguesa .uts-menu__panel .uts-menu__enlace {
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 400;
	color: var(--wp--preset--color--tinta);
	padding-inline-start: calc( var(--wp--custom--contenedor--aire) * 2 );
	border-inline-start: 3px solid var(--wp--custom--traza--ficha);
}

/*
 * El grupo de utilidades lleva el MISMO verde oscuro de la barra de servicio,
 * que es donde viven esos seis enlaces en escritorio. El mismo contenido con
 * la misma ropa en las dos anchuras.
 */
.uts-hamburguesa__grupo--utilidad {
	margin-top: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--verde-oscuro);
	border-radius: var(--wp--custom--radio--base);
}

.uts-hamburguesa__grupo--utilidad .uts-menu__enlace {
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--custom--barra--enlace);
}

/* Sobre el verde oscuro el realce es LIMÓN, nunca verde escudo (1,65:1). */
.uts-hamburguesa__grupo--utilidad .uts-menu__enlace:active {
	color: var(--wp--preset--color--verde-limon);
	background-color: transparent;
	transform: scale( 0.985 );
}

/* Sobre el fondo oscuro el anillo de foco tiene que ser claro. */
.uts-hamburguesa__grupo--utilidad .uts-menu__enlace:focus-visible {
	outline-color: var(--wp--preset--color--verde-limon);
}

/*
 * Entrada escalonada. El panel se abre de vez en cuando, así que la animación
 * se justifica: evita el salto de que doce filas aparezcan de golpe. Nada
 * arranca de «scale(0)»: se parte de 6 px de desplazamiento.
 */
.uts-hamburguesa__panel:not([hidden]) .uts-menu--movil-principal .uts-menu__item {
	animation: uts-entra-fila var(--wp--custom--transicion--panel) var(--wp--custom--transicion--curva) both;
}

.uts-hamburguesa__panel:not([hidden]) .uts-menu--movil-principal > .uts-menu__item:nth-child( 1 ) { animation-delay: 0ms; }
.uts-hamburguesa__panel:not([hidden]) .uts-menu--movil-principal > .uts-menu__item:nth-child( 2 ) { animation-delay: calc( var(--wp--custom--transicion--escalonado) * 1 ); }
.uts-hamburguesa__panel:not([hidden]) .uts-menu--movil-principal > .uts-menu__item:nth-child( 3 ) { animation-delay: calc( var(--wp--custom--transicion--escalonado) * 2 ); }
.uts-hamburguesa__panel:not([hidden]) .uts-menu--movil-principal > .uts-menu__item:nth-child( 4 ) { animation-delay: calc( var(--wp--custom--transicion--escalonado) * 3 ); }
.uts-hamburguesa__panel:not([hidden]) .uts-menu--movil-principal > .uts-menu__item:nth-child( 5 ) { animation-delay: calc( var(--wp--custom--transicion--escalonado) * 4 ); }
.uts-hamburguesa__panel:not([hidden]) .uts-menu--movil-principal > .uts-menu__item:nth-child( 6 ) { animation-delay: calc( var(--wp--custom--transicion--escalonado) * 5 ); }

/* El bloque de utilidades entra como UNA pieza: es un bloque, y animarlo por
   filas contradiría lo que el fondo comunica. */
.uts-hamburguesa__panel:not([hidden]) .uts-hamburguesa__grupo--utilidad {
	animation: uts-entra-fila var(--wp--custom--transicion--panel) var(--wp--custom--transicion--curva) both;
	animation-delay: calc( var(--wp--custom--transicion--escalonado) * 6 );
}

/* --------------------------------------------------------------------------
   El cambio de escritorio a móvil

   El corte del CROMADO es 1023 px, no los 900 del contenido. Medido
   (25 sep): a menos de 1000 px el menú principal ya no cabía en una fila y
   partía «Extensión» y «ORI» a un segundo renglón; y traducida, la barra de
   servicio necesita 1020 px en inglés, 1040 en francés y 1070 en portugués.
   Por debajo de 1024 manda la hamburguesa. El mismo número está en menu.js.
   -------------------------------------------------------------------------- */

@media ( max-width: 1023px ) {

	/*
	 * En móvil NADA de la cabecera se pinta en la página: los doce enlaces
	 * viven dentro de la hamburguesa y sólo ahí.
	 *
	 * Los selectores llevan el ancestro delante por especificidad, no por
	 * gusto. La regla que estira el menú principal a todo el alto del
	 * encabezado es «.uts-encabezado .uts-menu-bloque--principal» (0-2-0) y
	 * vive fuera de esta consulta de medios; con un «.uts-menu-bloque--principal»
	 * a secas (0-1-0) el «display: none» perdía y el menú de escritorio seguía
	 * apareciendo en móvil, apilado y duplicando lo que ya está en el panel.
	 */
	.uts-encabezado .uts-menu-bloque--principal,
	.uts-barra-servicio .uts-menu-bloque--barra {
		display: none;
	}

	.uts-encabezado .uts-hamburguesa {
		display: flex;
		flex: none;
	}

	/*
	 * Los del PIE sí se quedan: son contenido del pie, no navegación de
	 * cabecera, y el diseño móvil los muestra en sus columnas.
	 */
}

@media ( min-width: 1024px ) {

	.uts-hamburguesa__panel {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Desplegable en columnas (menú «Nosotros»)

   Diecinueve enlaces en una sola lista obligan a recorrerla entera para
   encontrar uno. Agrupados —«Soy uteísta», «Institucional», «Fundamentos»— se
   leen por bloques. La estructura sale del propio menú: cada columna es un
   ítem con hijos en «Apariencia → Menús», así que Comunicaciones puede mover,
   renombrar o crear grupos sin tocar esta hoja.
   -------------------------------------------------------------------------- */

.uts-menu__panel--columnas {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 232px, 1fr ) );
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
}

/*
 * El panel cuelga del ítem, y con tres columnas se saldría por la derecha en
 * los ítems del final. Se ancla a la derecha cuando no cabe: es lo que hace el
 * «right: auto» combinado con el max-width del canal.
 */
.uts-menu__panel--columnas {
	max-width: min( 980px, calc( 100vw - var(--wp--preset--spacing--60) * 2 ) );
}

.uts-menu__panel--columnas > .uts-menu__item--columna {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}

/* El rótulo de la columna: cejilla del diseño, no un enlace más. */
.uts-menu__rotulo {
	display: block;
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--custom--traza--sutil);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-escudo);
}

.uts-menu__grupo-lista {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-menu__panel--columnas .uts-menu__enlace {
	padding-block: 7px;
}

/*
 * Portátiles angostos: el panel cuelga del ítem, así que con tres columnas de
 * 232 px se salía por la derecha (medido: 762 px de panel desde x=244 en una
 * ventana de 920). Con dos columnas cabe, y los grupos se siguen leyendo por
 * bloques, que es para lo que están.
 */
@media ( max-width: 1180px ) {

	.uts-menu__panel--columnas {
		grid-template-columns: repeat( 2, minmax( 210px, 1fr ) );
	}
}

/* --------------------------------------------------------------------------
   Las mismas columnas dentro de la hamburguesa

   En el panel móvil no hay ancho para tres columnas: los grupos se apilan, y
   el rótulo hace de separador entre bloques de enlaces.
   -------------------------------------------------------------------------- */

/*
 * «:not([hidden])» no es adorno: esta regla y la de «.uts-menu__panel[hidden]»
 * tienen la misma especificidad, y como ésta va después, ganaba. El resultado
 * era que en el teléfono el primer ítem se abría solo —el panel se veía aunque
 * el botón dijera «cerrado»—.
 */
.uts-hamburguesa .uts-menu__panel--columnas:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	max-width: none;
	padding-inline: 0;
}

/*
 * La columna NO es una fila de acordeón. En la hamburguesa, todo ítem con
 * hijos se pinta como fila —enlace a la izquierda, chevron a la derecha—, y
 * esa regla arrastraba también al rótulo del grupo, que acababa flotando en
 * mitad del panel. Aquí vuelve a ser un bloque normal.
 */
.uts-hamburguesa .uts-menu__item--columna {
	display: block;
}

/*
 * El rótulo se alinea con el texto de los enlaces del grupo: los enlaces
 * llevan la misma sangría más sus 3 px de traza.
 */
.uts-hamburguesa .uts-menu__rotulo {
	padding-inline: calc( var(--wp--custom--contenedor--aire) * 2 + 3px ) 0;
	text-align: start;
	color: var(--wp--preset--color--verde-escudo);
}