/**
 * Bloque uts/de-interes — la franja de atajos bajo el mensaje principal.
 *
 * Ni un color literal: todo sale de theme.json. El canal de 1.200 px lo pone
 * style.css, que es donde viven las reglas compartidas con el cromado.
 *
 * @package uts
 */

.uts-de-interes {
	background: var(--wp--preset--color--blanco);
	border-bottom: 1px solid var(--wp--custom--traza--encabezado);
}

/*
 * El contenedor NO envuelve: si lo hiciera, en cuanto los siete atajos dejan de
 * caber sería la lista entera la que baja de línea y la cejilla se quedaría
 * sola arriba, sin el trazo vertical que la separa del resto. Se veía a
 * 1.024 px. Envolviendo por dentro de la lista, la cejilla se queda en su sitio
 * y son los servicios los que pasan a una segunda línea.
 */
.uts-de-interes__interior {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.uts-de-interes__cejilla {
	flex: none;
	padding-inline-end: var(--wp--preset--spacing--60);
	margin-inline-end: var(--wp--preset--spacing--30);
	border-inline-end: 1px solid var(--wp--custom--traza--encabezado);
	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--apagado);
	white-space: nowrap;
}

/* La lista se queda con el espacio que sobra y envuelve por dentro. */
.uts-de-interes__lista {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-de-interes__item {
	position: relative;
}

/*
 * El primer servicio abre grupo: es el separador vertical que parte audiencias
 * de servicios en el diseño.
 */
.uts-de-interes__item.abre-grupo {
	margin-inline-start: var(--wp--preset--spacing--40);
	padding-inline-start: var(--wp--preset--spacing--60);
	border-inline-start: 1px solid var(--wp--custom--traza--sutil);
}

.uts-de-interes .uts-de-interes__enlace {
	position: relative;
	display: block;
	/*
	 * 20 px arriba y abajo, 16 px a los lados: la franja pasa de 50 a 58 px y
	 * los atajos se pulsan mejor sin que la banda deje de ser una línea fina.
	 * El valor sale de sumar dos pasos de la escala, no de un número suelto.
	 */
	padding: calc( var(--wp--preset--spacing--50) + var(--wp--preset--spacing--20) ) var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--raleway);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wp--custom--transicion--base);
}

/*
 * El subrayado es un pseudoelemento y no un borde: tiene que quedar metido a
 * la anchura del texto, no a la de la caja pulsable, que lleva 16 px de aire a
 * cada lado para cumplir el objetivo táctil.
 */
.uts-de-interes__enlace::after {
	content: "";
	position: absolute;
	inset-inline: var(--wp--preset--spacing--50);
	bottom: 0;
	height: 3px;
	border-radius: var(--wp--custom--radio--chico);
	background: transparent;
	transition: background var(--wp--custom--transicion--base);
}

.uts-de-interes .es-audiencia .uts-de-interes__enlace {
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	color: var(--wp--preset--color--verde-oscuro);
}

/*
 * Los servicios suben un paso de la escala, de «pequeño» a «menor». Quedan del
 * mismo cuerpo que las audiencias, pero la jerarquía se mantiene por el peso
 * —600 frente a 700— y por el color, que es gris y no verde oscuro.
 */
.uts-de-interes .es-servicio .uts-de-interes__enlace {
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	color: var(--wp--preset--color--gris);
}

/* Los servicios llevan siempre su trazo; las audiencias sólo la destacada. */
.uts-de-interes .es-servicio .uts-de-interes__enlace::after {
	background: var(--wp--custom--traza--sutil);
}

.uts-de-interes .esta-activo .uts-de-interes__enlace {
	color: var(--wp--preset--color--verde-escudo);
}

.uts-de-interes .esta-activo .uts-de-interes__enlace::after {
	background: var(--wp--preset--color--verde-limon);
}

/*
 * Al pasar por encima el trazo se enciende en limón. Sobre blanco el limón no
 * vale como texto —rinde 1,6:1— pero sí como superficie, que es justo lo que
 * es aquí: una barra de 3 px, no una letra.
 */
.uts-de-interes a.uts-de-interes__enlace:hover,
.uts-de-interes a.uts-de-interes__enlace:focus-visible {
	color: var(--wp--preset--color--verde-escudo);
	text-decoration: none;
}

.uts-de-interes a.uts-de-interes__enlace:hover::after,
.uts-de-interes a.uts-de-interes__enlace:focus-visible::after {
	background: var(--wp--preset--color--verde-limon);
}

/* Regla 4 · en móvil no hay hover, así que el toque necesita respuesta. */
.uts-de-interes a.uts-de-interes__enlace:active {
	color: var(--wp--preset--color--verde-oscuro);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

/* --------------------------------------------------------------------------
   Redes sociales · sólo en escritorio (desde el 29 sep)

   Estudiantes, Docentes y Graduados subieron a la barra de servicio, y las
   redes bajaron de allí a esta franja. Por encima de 900 px las audiencias se
   ocultan aquí —ya están arriba, repetirlas sería duplicar— y los iconos
   ocupan su lugar, antes del separador de los servicios.
   -------------------------------------------------------------------------- */

@media ( min-width: 901px ) {

	.uts-de-interes__item.es-audiencia {
		display: none;
	}
}

.uts-de-interes__item.es-redes {
	display: flex;
	align-items: center;
}

.uts-de-interes .uts-de-interes__redes {
	gap: 0;
	margin: 0;
	padding: 0;
}

.uts-de-interes .uts-de-interes__redes .wp-block-social-link {
	margin: 0;
}

/*
 * En «logos-only» el núcleo pinta cada red con su color de marca (el azul de
 * Facebook, el rojo de YouTube…). En la franja van todos en verde escudo
 * (7,9:1 sobre blanco), con la especificidad justa para ganarle a esas reglas
 * por servicio.
 */
.uts-de-interes .uts-de-interes__redes .wp-social-link,
.uts-de-interes .uts-de-interes__redes .wp-block-social-link-anchor {
	padding: 0;
	color: var(--wp--preset--color--verde-escudo);
	background: transparent;
}

/* 40 px de área de toque por icono (SC 2.5.8 pide 24). */
.uts-de-interes .uts-de-interes__redes .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	border-radius: var(--wp--custom--radio--chico);
	transition: color var(--wp--custom--transicion--base), background-color var(--wp--custom--transicion--base);
}

.uts-de-interes .uts-de-interes__redes .wp-block-social-link-anchor svg {
	width: 26px;
	height: 26px;
}

/*
 * Los cuatro estados, para ganarle al verde oscuro que theme.json pone en
 * todos los :hover/:focus/:active de enlace. Fondo beige al pasar y al
 * pulsar: el icono gana superficie sin perder contraste (verde oscuro sobre
 * beige, 12:1).
 */
.uts-de-interes .uts-de-interes__redes .wp-social-link:hover,
.uts-de-interes .uts-de-interes__redes .wp-block-social-link-anchor:hover,
.uts-de-interes .uts-de-interes__redes .wp-block-social-link-anchor:focus-visible,
.uts-de-interes .uts-de-interes__redes .wp-block-social-link-anchor:active {
	color: var(--wp--preset--color--verde-oscuro);
	background-color: var(--wp--preset--color--beige);
	transform: none;
}

.uts-de-interes .uts-de-interes__redes .wp-block-social-link-anchor:active {
	transition-duration: var(--wp--custom--transicion--pulsa);
}

/*
 * Entre 901 y 1.199 px los cinco iconos y los cuatro servicios no cabían en
 * una línea: a 1.024 «Cotizaciones» bajaba sola a una segunda fila. Se recorta
 * el aire lateral de los servicios y el área de cada icono (36 px, sigue por
 * encima de los 24 del SC 2.5.8).
 */
@media ( min-width: 901px ) and ( max-width: 1199px ) {

	.uts-de-interes .uts-de-interes__enlace {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.uts-de-interes__enlace::after {
		inset-inline: var(--wp--preset--spacing--40);
	}

	.uts-de-interes .uts-de-interes__redes .wp-block-social-link-anchor {
		min-width: 36px;
		min-height: 36px;
	}

	.uts-de-interes__item.abre-grupo {
		margin-inline-start: var(--wp--preset--spacing--30);
		padding-inline-start: var(--wp--preset--spacing--40);
	}
}

/*
 * Por debajo de 1.024 ni así: se va la cejilla, que es sólo un rótulo (el
 * nombre de la franja sigue en el aria-label del nav), igual que en móvil.
 */
@media ( min-width: 901px ) and ( max-width: 1023px ) {

	.uts-de-interes__cejilla {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Móvil · validado a 390 px y a 320 px
   -------------------------------------------------------------------------- */

@media ( max-width: 900px ) {

	.uts-de-interes {
		border-bottom-color: var(--wp--custom--traza--sutil);
	}

	/*
	 * En móvil las redes se van: la barra de servicio vive en la hamburguesa,
	 * así que las tres audiencias se quedan en la franja, y las redes siguen a
	 * mano en el pie.
	 */
	.uts-de-interes__item.es-redes {
		display: none;
	}

	/*
	 * En móvil sólo quedan las tres audiencias, repartidas a partes iguales.
	 * Los cuatro servicios y la cejilla se van: en una pantalla de 390 px
	 * obligarían a una segunda y una tercera fila justo encima del contenido,
	 * y el diseño aprobado ya resolvió que ahí no van.
	 */
	.uts-de-interes__cejilla,
	.uts-de-interes__item.es-servicio {
		display: none;
	}

	.uts-de-interes__interior {
		flex-wrap: nowrap;
	}

	.uts-de-interes__lista {
		flex: 1;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.uts-de-interes__item {
		flex: 1;
		min-width: 0;
	}

	.uts-de-interes .uts-de-interes__enlace {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
		text-align: center;
	}

	.uts-de-interes__enlace::after {
		inset-inline: var(--wp--preset--spacing--30);
	}
}

/*
 * A 320 px los tres nombres se reparten 257 px. Antes se les dejaba partir
 * palabra y «Estudiantes» quedaba cortado en «Estudiante / s», que se lee
 * peor que cualquier alternativa. Ahora se baja un paso el cuerpo y se les
 * quita el aire lateral: los tres nombres aprobados caben en una línea.
 *
 * El «break-word» se queda como último recurso, por si algún día renombran un
 * atajo con una palabra muy larga: preferimos un corte feo a que la página se
 * desborde en horizontal.
 */
@media ( max-width: 360px ) {

	.uts-de-interes .uts-de-interes__enlace {
		padding-inline: 0;
		overflow-wrap: break-word;
	}

	/*
	 * Los dos grupos se nombran a la vez: la regla general no les gana en
	 * especificidad a «.es-audiencia» y «.es-servicio», y sin esto las
	 * audiencias se quedaban a 14 px y «Estudiantes» cabía por los pelos.
	 */
	.uts-de-interes .es-audiencia .uts-de-interes__enlace,
	.uts-de-interes .es-servicio .uts-de-interes__enlace {
		font-size: var(--wp--preset--font-size--pequeno);
	}

	.uts-de-interes__enlace::after {
		inset-inline: 0;
	}
}