/**
 * Directorio público de socios.
 *
 * Las tarjetas van sobre beige y no sobre negro: una cuadrícula oscura de
 * cuarenta logotipos ajenos se lee como un catálogo de patrocinios, no como un
 * censo. Lo oscuro se reserva para lo que es de la casa —el banco de filtros y
 * la cabecera de la ficha—, y los fondos se declaran siempre, nunca se heredan:
 * la tarjeta tiene que verse igual caiga sobre el tema que caiga.
 *
 * IDEA RECTORA: EL ESTRIADO DE LA COLUMNA. El fuste de la «E» del logotipo
 * recorre el directorio siempre haciendo un trabajo y nunca de adorno suelto:
 * canto de tarjeta, cierre de cabecera, paso de la banda oscura al cuerpo de la
 * ficha, fondo del monograma y canto de la cartela. Lo dibuja la primitiva
 * `[data-emp-estriado]`, que existe con o sin JavaScript; el movimiento solo
 * añade que se descubra al entrar en pantalla.
 *
 * CONTRASTE (WCAG 2.1 AA). Las siete combinaciones que se usan:
 *
 *   #F3EFE6 sobre #141414 .. 16,05   #4A3425 sobre #F3EFE6 .. 10,12
 *   #B07A47 sobre #141414 ..  5,02   #7A5636 sobre #F3EFE6 ..  5,70
 *   #F3EFE6 sobre #090909 .. 17,35   #F3EFE6 sobre #4A3425 .. 10,12
 *   #090909 sobre #B07A47 ..  5,42
 *
 * No aparecen #7A5636 ni #4A3425 sobre oscuro (3,05 y 1,72). #B07A47 sobre beige
 * da 3,20 y por eso queda en filete, estriado, icono y monograma: WCAG 1.4.11
 * pide 3:1 a un elemento gráfico y 4,5:1 a su etiqueta, así que el icono va en
 * bronce y la palabra de al lado baja a bronce oscuro. Los rgba() son opacidades
 * de esos mismos colores para filetes; no añaden ninguno nuevo.
 *
 * DOS CLASES SOBRE CADA ENLACE Y CADA CONTROL. No es manía: es lo justo para
 * ganar, medido sobre el CSS que de verdad se sirve.
 *
 *   a:where( … )                 (0,0,1)  marca.css y theme.json
 *   button, select               (0,0,1)  GeneratePress
 *   button:focus, select:focus   (0,1,1)  GeneratePress, en línea
 *
 * La tercera es la que obliga: `select:focus` pinta #222222 sobre #F7F8F9 y
 * `button:focus` blanco sobre #3F4047 —dos grises que no están en la paleta— y
 * (0,1,1) le gana a cualquier regla de una sola clase, así que al enfocar, el
 * desplegable del banco oscuro se volvería una caja gris clara. De ahí que el
 * control y el botón lleven el bloque delante, que es (0,2,0). El modo de fallo
 * es benigno: debajo queda el enlace de theme.json, legible sobre beige.
 *
 * Y por lo mismo cada ajuste del estriado va con dos clases: la primitiva se
 * selecciona por atributo, que empata en especificidad con una clase suelta, y
 * ahí decidiría el orden de carga de las hojas. Con (0,2,0) deja de importar.
 *
 * COLISIÓN CERRADA: `--emp-texto` era aquí una pila de fuentes y en el tema es un
 * COLOR, así que el anillo de foco de `marca.css` resolvía a una lista de fuentes
 * y se descartaba en todo el directorio. Las familias pasan a
 * `--emp-fuente-titular` y `--emp-fuente-texto`, sobre los slugs que theme.json
 * declara de verdad (`titulares` y `texto`; antes se pedían `titular` y
 * `sistema`, que no existen y caían siempre a la pila suplente).
 */

.emp-directorio,
.emp-vista {
	--emp-negro: #090909;
	--emp-antracita: #141414;
	--emp-bronce: #B07A47;
	--emp-bronce-oscuro: #7A5636;
	--emp-marron: #4A3425;
	--emp-beige: #F3EFE6;

	/* Filetes y separadores: bronce rebajado. Es decoración, no información. */
	--emp-linea: rgba( 176, 122, 71, 0.30 );
	--emp-linea-firme: rgba( 74, 52, 37, 0.20 );

	/* El tema puede imponer sus familias; si no las define, se cae a una didona
	   de sistema para los titulares y a la sans del propio tema para los datos. */
	--emp-fuente-titular: var( --wp--preset--font-family--titulares, "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif );
	--emp-fuente-texto: var( --wp--preset--font-family--texto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif );

	font-family: var( --emp-fuente-texto );
}

.emp-directorio *,
.emp-directorio *::before,
.emp-directorio *::after,
.emp-vista *,
.emp-vista *::before,
.emp-vista *::after {
	box-sizing: border-box;
}

/* Texto solo para lectores de pantalla. Sin `display: none`, que los silencia. */
.emp-visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------- Envoltorio de vista */

.emp-vista {
	padding-block: clamp( 1.5rem, 5vw, 3.5rem );
}

.emp-vista__ancho {
	width: 100%;
	max-width: 74rem;
	margin-inline: auto;
	padding-inline: clamp( 1rem, 4vw, 2rem );
}

.emp-vista__cabecera {
	margin-bottom: clamp( 2rem, 5vw, 3rem );
}

/* Antetítulo con la columna al lado: el icono en bronce (3,20 basta para un
   elemento gráfico) y la palabra en bronce oscuro (5,70), que es lo que pide la
   norma para texto pequeño. */
.emp-vista__antetitulo,
.emp-ficha__antetitulo {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var( --emp-bronce-oscuro );
}

.emp-vista__antetitulo .emp-icono {
	color: var( --emp-bronce );
}

.emp-vista__titulo {
	margin: 0;
	font-family: var( --emp-fuente-titular );
	font-size: clamp( 2rem, 5.2vw, 3.25rem );
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --emp-marron );
}

.emp-vista__entradilla {
	margin: 1.1rem 0 0;
	max-width: 54ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var( --emp-bronce-oscuro );
}

/* El estriado cierra la cabecera en lugar de una línea de un píxel. Se desvanece
   hacia la derecha con una máscara: así el motivo entra sin cortar en seco. La
   máscara es una mejora; si el navegador no la entiende, sale la banda entera. */
.emp-vista .emp-vista__estriado {
	--emp-estria: rgba( 176, 122, 71, 0.65 );
	--emp-estria-paso: 7px;

	margin-top: clamp( 1.5rem, 4vw, 2.25rem );
	block-size: 1.25rem;
	-webkit-mask-image: linear-gradient( 90deg, #000 0%, #000 42%, transparent 100% );
	mask-image: linear-gradient( 90deg, #000 0%, #000 42%, transparent 100% );
}

/* --------------------------------------------------------------- Migas */

.emp-migas {
	margin-bottom: 1.5rem;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.emp-migas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La barra separadora es un nodo de texto que algunos lectores anuncian, así que
   se trata como texto y va en bronce oscuro (5,70), no en bronce (3,20). */
.emp-migas__paso + .emp-migas__paso::before {
	content: "/";
	margin-right: 0.75rem;
	color: var( --emp-bronce-oscuro );
}

.emp-migas .emp-migas__paso a {
	color: var( --emp-bronce-oscuro );
	text-underline-offset: 0.2em;
}

.emp-migas .emp-migas__paso a:hover,
.emp-migas .emp-migas__paso a:focus-visible {
	color: var( --emp-marron );
}

.emp-migas__paso [aria-current="page"] {
	color: var( --emp-marron );
	font-weight: 600;
}

/* ------------------------------------------------------------- Aviso de previa */

.emp-aviso-previa {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	background-color: var( --emp-antracita );
	border-left: 4px solid var( --emp-bronce );
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --emp-beige );
}

.emp-aviso-previa .emp-icono {
	margin-top: 0.15em;
	color: var( --emp-bronce );
}

.emp-aviso-previa strong {
	color: var( --emp-bronce );
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------- Listado */

.emp-directorio {
	margin-block: clamp( 1.5rem, 4vw, 2.5rem );
}

.emp-directorio__titulo {
	margin: 0 0 0.75rem;
	font-family: var( --emp-fuente-titular );
	font-size: clamp( 1.6rem, 3.5vw, 2.25rem );
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --emp-marron );
}

.emp-directorio__entradilla {
	margin: 0 0 1.5rem;
	max-width: 54ch;
	line-height: 1.7;
	color: var( --emp-bronce-oscuro );
}

/* ------------------------------------------------- Filtros: el banco oscuro */

/**
 * Un banco de filtros, no dos desplegables sueltos. Lleva título, una nota que
 * explica para qué sirve y las chapas del filtro puesto.
 *
 * Y sigue siendo un formulario GET con recarga completa: cada combinación tiene
 * su URL limpia, indexable y compartible. Eso es el activo de SEO comarcal y no
 * se negocia; el JavaScript solo adelanta el envío cuando se usa el ratón.
 */
.emp-directorio__filtros {
	position: relative;
	margin-bottom: 2rem;
	padding: clamp( 1.25rem, 3.5vw, 2rem );
	background-color: var( --emp-antracita );
	color: var( --emp-beige );
}

/* El filete estriado sustituye al borde superior macizo: mismo trabajo, dicho
   con el motivo de la marca. Va absoluto para no empujar el relleno del banco. */
.emp-directorio__filtros .emp-directorio__filete {
	--emp-estria: var( --emp-bronce );
	--emp-estria-paso: 5px;

	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 0.55rem;
}

.emp-directorio__intro {
	margin-bottom: 1.5rem;
}

.emp-directorio__filtros-titulo {
	display: flex;
	align-items: center;
	gap: 0.65em;
	margin: 0;
	font-family: var( --emp-fuente-titular );
	font-size: clamp( 1.15rem, 2.4vw, 1.5rem );
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --emp-beige );
}

.emp-directorio__filtros-titulo .emp-icono {
	color: var( --emp-bronce );
}

.emp-directorio__filtros-nota {
	margin: 0.6rem 0 0;
	max-width: 62ch;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var( --emp-beige );
}

.emp-directorio__campos {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 1.5rem;
}

.emp-directorio__filtro {
	flex: 1 1 15rem;
	min-width: 0;
}

.emp-directorio__etiqueta {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --emp-bronce );
}

/* Envoltorio del desplegable: existe solo para colgar de él la punta de flecha.
   El desplegable nativo la pinta con el color del sistema y sobre negro no
   siempre se distingue. */
.emp-directorio__campo {
	position: relative;
	display: block;
}

.emp-directorio__campo::after {
	content: "";
	position: absolute;
	inset-inline-end: 1.1rem;
	inset-block-start: 50%;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-right: 2px solid var( --emp-bronce );
	border-bottom: 2px solid var( --emp-bronce );
	transform: translateY( -70% ) rotate( 45deg );
	pointer-events: none;
}

/* Con el bloque delante, y no `.emp-directorio__control` a secas: GeneratePress
   emite `select:focus { color: #222222; background-color: #F7F8F9 }` en línea,
   que es (0,1,1) y le ganaría a una sola clase. Sin esto, enfocar el desplegable
   lo convierte en una caja gris clara dentro del banco negro. */
.emp-directorio__filtros .emp-directorio__control {
	display: block;
	width: 100%;
	padding: 0.85rem 2.75rem 0.85rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var( --emp-beige );
	background-color: var( --emp-negro );
	border: 1px solid var( --emp-bronce );
	border-radius: 0;

	/* Se apaga la apariencia nativa porque la punta de flecha la dibujamos
	   nosotros; `appearance` a secas ya la retira en todos los navegadores
	   actuales y el prefijo cubre los antiguos de WebKit. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.emp-directorio__filtros .emp-directorio__control:hover {
	border-color: var( --emp-beige );
}

/* `:focus` además de `:focus-visible` porque el desplegable se abre con el ratón
   y ahí `:focus-visible` no entra: sin la primera, GeneratePress se queda con el
   color en ese estado exacto. El anillo sí se reserva a `:focus-visible`, que es
   lo que evita el halo al hacer clic. */
.emp-directorio__filtros .emp-directorio__control:focus,
.emp-directorio__filtros .emp-directorio__control:focus-visible {
	color: var( --emp-beige );
	background-color: var( --emp-negro );
	border-color: var( --emp-beige );
}

.emp-directorio__filtros .emp-directorio__control:focus-visible {
	outline: 2px solid var( --emp-beige );
	outline-offset: 2px;
}

.emp-directorio__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

/* El botón no se esconde nunca aunque el JavaScript envíe solo: es la única vía
   de quien usa el teclado, donde el envío automático no se dispara.

   Y va con el bloque delante por lo mismo que el desplegable: GeneratePress
   emite `button:focus { color: #FFF; background-color: #3F4047 }`, (0,1,1). */
.emp-directorio__filtros .emp-directorio__enviar {
	padding: 0.85rem 2rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --emp-negro );
	background-color: var( --emp-bronce );
	border: 2px solid var( --emp-bronce );
	border-radius: 0;
	cursor: pointer;
}

/* Se aclara al pasar por encima: oscurecer el bronce dejaría el texto negro en
   3,05 y perdería el AA. */
.emp-directorio__filtros .emp-directorio__enviar:hover,
.emp-directorio__filtros .emp-directorio__enviar:focus {
	color: var( --emp-marron );
	background-color: var( --emp-beige );
	border-color: var( --emp-beige );
}

.emp-directorio__filtros .emp-directorio__enviar:focus-visible {
	outline: 2px solid var( --emp-bronce );
	outline-offset: 3px;
}

/* ------------------------------------------------- Filtro activo: las chapas */

/**
 * Quien llega a `/socios/municipio/merida/` desde un buscador no ha tocado
 * ningún desplegable: tiene que ver qué está mirando y cómo salir de ahí sin
 * buscarlo. Cada chapa es un enlace que quita ESE filtro y conserva el otro.
 */
.emp-directorio__activos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --emp-linea );
}

.emp-directorio__activos-titulo {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --emp-bronce );
}

.emp-directorio__chapas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Chapa: fondo bronce con texto negro, 5,42. Dos clases porque es un enlace. */
.emp-directorio__chapas .emp-directorio__quitar {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45rem 0.85rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --emp-negro );
	background-color: var( --emp-bronce );
	border: 1px solid var( --emp-bronce );
}

.emp-directorio__chapas .emp-directorio__quitar:hover,
.emp-directorio__chapas .emp-directorio__quitar:focus-visible {
	color: var( --emp-negro );
	background-color: var( --emp-beige );
	border-color: var( --emp-beige );
}

/* El aspa se separa del nombre con un filete: se lee como «esto se cierra». */
.emp-directorio__quitar .emp-icono--cerrar {
	margin-inline-start: 0.15em;
	padding-inline-start: 0.5em;
	border-left: 1px solid rgba( 9, 9, 9, 0.35 );
	box-sizing: content-box;
}

.emp-directorio__activos .emp-directorio__limpiar {
	margin-inline-start: auto;
	font-size: 0.875rem;
	color: var( --emp-bronce );
	text-underline-offset: 0.2em;
}

.emp-directorio__activos .emp-directorio__limpiar:hover,
.emp-directorio__activos .emp-directorio__limpiar:focus-visible {
	color: var( --emp-beige );
}

/* -------------------------------------------------------------- Resumen */

.emp-directorio__resumen {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --emp-bronce-oscuro );
}

.emp-directorio__resumen .emp-icono {
	color: var( --emp-bronce );
}

/* --------------------------------------------------------- Estado vacío */

/**
 * Un municipio sin socios todavía no es un error: es una plaza que queda libre.
 * Se trata con el mismo respeto que una tarjeta —columna, titular en didona y
 * una salida— en lugar de dejar una línea de aviso suelta.
 *
 * En la ruta del directorio una vista filtrada vacía devuelve 404 a propósito;
 * esto se ve incrustado en otra página y cuando el censo entero está vacío.
 */
.emp-directorio__vacio {
	position: relative;
	padding: clamp( 2rem, 6vw, 3.5rem ) clamp( 1.5rem, 5vw, 3rem ) clamp( 2.5rem, 6vw, 4rem );
	text-align: center;
	background-color: var( --emp-beige );
	border: 1px solid var( --emp-linea-firme );
}

.emp-directorio__vacio-marca {
	display: block;
	color: var( --emp-bronce );
}

.emp-directorio__vacio-titulo {
	margin: 1rem 0 0;
	font-family: var( --emp-fuente-titular );
	font-size: clamp( 1.3rem, 3vw, 1.75rem );
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --emp-marron );
}

.emp-directorio__vacio-texto {
	margin: 0.85rem auto 0;
	max-width: 46ch;
	line-height: 1.7;
	color: var( --emp-bronce-oscuro );
}

.emp-directorio__vacio-accion {
	margin: 1.75rem 0 0;
}

.emp-directorio__vacio .emp-directorio__vacio-enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.8rem 1.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --emp-marron );
	border: 2px solid var( --emp-bronce-oscuro );
}

.emp-directorio__vacio .emp-directorio__vacio-enlace:hover,
.emp-directorio__vacio .emp-directorio__vacio-enlace:focus-visible {
	color: var( --emp-beige );
	background-color: var( --emp-marron );
	border-color: var( --emp-marron );
}

.emp-directorio__vacio .emp-directorio__vacio-filete {
	--emp-estria: rgba( 176, 122, 71, 0.55 );

	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 0.5rem;
}

/* ------------------------------------------------------------- Tarjetas */

/* 16,5rem de mínimo y no 18: medido en el sitio real, el contenedor del tema deja
   915 px útiles y con 18rem la cuadrícula caía a dos columnas por 3 px. Tres
   columnas de 286 px es la densidad que le corresponde a un censo de cuarenta
   fichas; dos son una lista larga disfrazada de cuadrícula. */
.emp-directorio__rejilla {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 16.5rem, 1fr ) );
	gap: clamp( 1.25rem, 2.5vw, 1.75rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-directorio__item {
	display: flex;
}

/**
 * La tarjeta. Es la pieza que más se repite, así que respira: el logotipo con su
 * plaza propia, el nombre en didona con versales y el pie de acciones pegado al
 * fondo, para que una fila de tarjetas desiguales comparta línea de base.
 *
 * Sin sombra difusa y sin levantarse al pasar por encima: esa es la gramática de
 * un panel de aplicación. Aquí la reacción es la columna del canto, que se
 * levanta entera, y el filete del contorno, que se vuelve bronce.
 */
.emp-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var( --emp-beige );
	border: 1px solid var( --emp-linea-firme );
}

.emp-tarjeta:hover,
.emp-tarjeta:focus-within {
	border-color: var( --emp-bronce );
}

/**
 * Canto estriado: la columna del logotipo puesta de pie al borde de la tarjeta.
 *
 * El fuste es macizo y las estrías son las ACANALADURAS, no al revés: fondo
 * bronce con las líneas del color de la tarjeta encima. Al revés —hilos de
 * bronce sobre nada— y a 8 px de ancho quedaban dos rayas de un píxel que a
 * tamaño de página no se ven.
 *
 * En reposo llega a poco menos de la mitad y al pasar por encima se levanta
 * entera, animando solo `transform`, que no toca la maquetación.
 */
.emp-tarjeta__canto {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 0.6rem;
	background-color: var( --emp-bronce );
	transform: scaleY( 0.4 );
	transform-origin: top center;
	pointer-events: none;
}

.emp-tarjeta:hover .emp-tarjeta__canto,
.emp-tarjeta:focus-within .emp-tarjeta__canto {
	transform: scaleY( 1 );
}

/* Dos clases: la primitiva fija 0,75rem al canto vertical y aquí tiene que
   llenar su envoltorio, cargue la hoja de movimiento antes o después. */
.emp-tarjeta__canto .emp-tarjeta__estria {
	--emp-estria: var( --emp-beige );
	--emp-estria-paso: 4px;

	inline-size: 100%;
	block-size: 100%;
}

.emp-tarjeta__marca {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 9.5rem;
	padding: 1.75rem 1.5rem 1.5rem;
	border-bottom: 1px solid var( --emp-linea );
}

/* El `:not()` deja fuera al monograma: lleva su propia caja y un techo de 6rem
   lo aplastaría. */
.emp-tarjeta__logo:not( .emp-tarjeta__logo--monograma ) {
	max-width: 100%;
	max-height: 6rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

.emp-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.75rem;
	padding: 1.5rem;
}

.emp-tarjeta__nombre {
	margin: 0;
	font-family: var( --emp-fuente-titular );
	font-size: clamp( 1.2rem, 1rem + 0.6vw, 1.45rem );
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --emp-marron );
}

/* Dos clases: el nombre se queda en marrón (10,12) y no baja a bronce oscuro. */
.emp-tarjeta .emp-tarjeta__enlace {
	color: var( --emp-marron );
	text-decoration: none;
}

.emp-tarjeta .emp-tarjeta__enlace:hover,
.emp-tarjeta .emp-tarjeta__enlace:focus-visible {
	color: var( --emp-marron );
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

/* Sector y municipio, cada uno con su icono. Ya no hace falta el punto medio que
   los separaba: el icono hace ese trabajo y además dice cuál es cuál. */
.emp-tarjeta__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --emp-bronce-oscuro );
}

.emp-tarjeta__dato {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.emp-tarjeta__dato .emp-icono {
	color: var( --emp-bronce );
}

.emp-tarjeta__meta .emp-tarjeta__dato a {
	color: var( --emp-bronce-oscuro );
	text-underline-offset: 0.2em;
}

.emp-tarjeta__meta .emp-tarjeta__dato a:hover,
.emp-tarjeta__meta .emp-tarjeta__dato a:focus-visible {
	color: var( --emp-marron );
}

.emp-tarjeta__resumen {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --emp-marron );
}

.emp-tarjeta__enlaces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin: auto 0 0;
	padding-top: 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-top: 1px solid var( --emp-linea );
}

.emp-tarjeta .emp-tarjeta__ficha,
.emp-tarjeta .emp-tarjeta__web {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	color: var( --emp-bronce-oscuro );
	text-underline-offset: 0.2em;
}

.emp-tarjeta .emp-tarjeta__ficha:hover,
.emp-tarjeta .emp-tarjeta__ficha:focus-visible,
.emp-tarjeta .emp-tarjeta__web:hover,
.emp-tarjeta .emp-tarjeta__web:focus-visible {
	color: var( --emp-marron );
}

.emp-tarjeta__ficha .emp-icono,
.emp-tarjeta__web .emp-icono {
	color: var( --emp-bronce );
}

/* La flecha de «Ver ficha» avanza un poco: se lee como invitación a entrar.
   Aquí va el recorrido y no la transición —esa la pone `.emp-transicion`, que la
   plantilla cuelga del icono con el argumento `clase`—, para que solo haya un
   sitio del que acordarse al apagar el movimiento con `reduce`. */
.emp-tarjeta:hover .emp-tarjeta__ficha .emp-icono--flecha,
.emp-tarjeta__ficha:focus-visible .emp-icono--flecha {
	transform: translateX( 0.2em );
}

.emp-tarjeta__web {
	margin-left: auto;
	overflow-wrap: anywhere;
	text-transform: none;
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ Monograma */

/**
 * Monograma para quien no ha entregado logotipo o no ha dado permiso para
 * publicarlo. No es un hueco: es una pieza de marca. La inicial en didona sobre
 * un campo de estrías —el fuste— y un filete de bronce debajo, que es la basa.
 *
 * Todo el conjunto es decoración (`aria-hidden` en el marcado; el nombre está
 * escrito al lado), y por eso el bronce a 3,20 sobre beige vale aquí.
 *
 * El campo se queda en beige PURO: llevaba un velo de bronce al 7 % y ese velo
 * dejaba el fondo en #EEE7DB y la inicial en 2,99, por debajo del 3,00 que pide
 * un elemento gráfico. Medido, no estimado.
 */
.emp-monograma {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 7rem;
	block-size: 7rem;
	overflow: hidden;
	background-color: var( --emp-beige );
	border: 1px solid var( --emp-linea );
	border-bottom: 2px solid var( --emp-bronce );
}

.emp-monograma .emp-monograma__fondo {
	--emp-estria: rgba( 176, 122, 71, 0.32 );
	--emp-estria-paso: 7px;

	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.emp-monograma__inicial {
	position: relative;
	font-family: var( --emp-fuente-titular );
	font-size: 2.75rem;
	line-height: 1;
	letter-spacing: 0.1em;

	/* El tracking añade aire a la derecha de la última letra; esta sangría lo
	   compensa para que la inicial quede ópticamente centrada. */
	text-indent: 0.1em;
	color: var( --emp-bronce );
}

.emp-ficha__logo--monograma {
	inline-size: 11rem;
	block-size: 11rem;
}

.emp-ficha__logo--monograma .emp-monograma__inicial {
	font-size: 4.5rem;
}

/* ---------------------------------------------------------- Paginación */

.emp-directorio__paginacion {
	margin-top: clamp( 2rem, 4vw, 3rem );
}

.emp-directorio__paginas {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.emp-directorio__paginas .emp-directorio__pagina a,
.emp-directorio__paginas .emp-directorio__pagina span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-width: 2.9rem;
	height: 100%;
	padding: 0.65rem 0.9rem;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-align: center;
	text-decoration: none;
	color: var( --emp-bronce-oscuro );
	border: 1px solid var( --emp-linea-firme );
}

.emp-directorio__paginas .emp-directorio__pagina a:hover,
.emp-directorio__paginas .emp-directorio__pagina a:focus-visible {
	color: var( --emp-beige );
	background-color: var( --emp-marron );
	border-color: var( --emp-marron );
}

.emp-directorio__pagina--anterior a,
.emp-directorio__pagina--siguiente a {
	text-transform: uppercase;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Una sola flecha en el catálogo: la de «Anterior» es la misma girada. */
.emp-directorio__pagina--anterior .emp-icono--flecha {
	transform: scaleX( -1 );
}

.emp-directorio__pagina--actual span {
	color: var( --emp-beige );
	background-color: var( --emp-marron );
	border-color: var( --emp-marron );
	font-weight: 700;
}

.emp-directorio__pagina--salto {
	display: flex;
	align-items: center;
	padding: 0.65rem 0.25rem;
	color: var( --emp-bronce-oscuro );
	border: 0;
}

/* --------------------------------------------------------------- Ficha */

/**
 * La ficha es una PÁGINA, no una tarjeta grande.
 *
 * Es la que aterriza desde una búsqueda por el nombre de la empresa, así que se
 * monta como una publicación: banda de encabezado oscura a todo el ancho de la
 * columna, filete estriado que marca el paso al cuerpo, y un cuerpo a dos
 * columnas donde el relato de la empresa manda y el contacto queda al lado como
 * una cartela de museo.
 */
.emp-ficha {
	position: relative;
}

.emp-ficha__cabecera {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp( 1.5rem, 4vw, 3rem );
	padding: clamp( 1.75rem, 5vw, 3rem );
	background-color: var( --emp-antracita );
	color: var( --emp-beige );
}

/* La plaza del logotipo es un plinto: la pieza de la que arranca la página. Con
   9rem quedaba pequeña al lado de un titular de 48 px; a 11 se sostienen las dos. */
.emp-ficha__marca {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 11rem;
	min-height: 11rem;
	background-color: var( --emp-beige );
}

/* La imagen sí necesita el marco de relleno; el monograma trae el suyo y llena
   la plaza entera, que es lo que le da presencia. */
.emp-ficha__logo:not( .emp-ficha__logo--monograma ) {
	max-width: 12rem;
	max-height: 6rem;
	width: auto;
	height: auto;
	margin: 1.5rem;
	object-fit: contain;
}

.emp-ficha__identidad {
	flex: 1 1 20rem;
}

.emp-ficha__antetitulo {
	color: var( --emp-bronce );
}

.emp-ficha__antetitulo .emp-icono {
	color: var( --emp-bronce );
}

.emp-ficha__titulo {
	margin: 0;
	font-family: var( --emp-fuente-titular );
	font-size: clamp( 1.9rem, 4.8vw, 3rem );
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --emp-beige );
}

.emp-ficha__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0.75rem;
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Dos clases: sobre antracita el bronce da 5,02 y el bronce oscuro que ponía la
   regla del tema daba 2,82, que la norma prohíbe. */
.emp-ficha__meta .emp-ficha__dato {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45rem 0.85rem;
	color: var( --emp-bronce );
	border: 1px solid var( --emp-bronce );
	text-decoration: none;
}

.emp-ficha__meta .emp-ficha__dato:hover,
.emp-ficha__meta .emp-ficha__dato:focus-visible {
	color: var( --emp-negro );
	background-color: var( --emp-bronce );
}

/* Este va en el flujo, no absoluto: es el escalón entre la banda oscura y el
   cuerpo de la página, y tiene que ocupar su sitio. */
.emp-ficha .emp-ficha__filete {
	--emp-estria: var( --emp-bronce );
	--emp-estria-paso: 5px;

	display: block;
	inline-size: 100%;
	block-size: 0.5rem;
}

.emp-ficha__cuerpo {
	display: grid;
	gap: clamp( 2rem, 5vw, 3rem );
	margin-top: clamp( 2rem, 5vw, 3rem );
}

@media ( min-width: 60em ) {

	.emp-ficha__cuerpo {
		grid-template-columns: minmax( 0, 1.7fr ) minmax( 17rem, 1fr );
		align-items: start;
	}

	/* Sin cartela de contacto el relato no se queda en media página: ocupa la
	   medida de lectura y punto. */
	.emp-ficha__cuerpo--sin-cartela {
		grid-template-columns: minmax( 0, 1fr );
	}
}

.emp-ficha__descripcion {
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var( --emp-marron );
}

.emp-ficha__descripcion > :first-child {
	margin-top: 0;
}

.emp-ficha__descripcion > :last-child {
	margin-bottom: 0;
}

.emp-ficha .emp-ficha__descripcion a {
	color: var( --emp-bronce-oscuro );
	text-underline-offset: 0.2em;
}

.emp-ficha .emp-ficha__descripcion a:hover,
.emp-ficha .emp-ficha__descripcion a:focus-visible {
	color: var( --emp-marron );
}

/* La cartela de contacto, con su propio canto estriado. */
.emp-ficha__contacto {
	position: relative;
	padding: clamp( 1.5rem, 3vw, 2rem );
	padding-inline-start: clamp( 1.75rem, 3.5vw, 2.25rem );
	background-color: var( --emp-beige );
	border: 1px solid var( --emp-linea-firme );
}

/* Mismo fuste que el de la tarjeta: macizo, con las acanaladuras dibujadas
   encima. Aquí llega entero de arriba abajo, que es lo que sostiene la cartela. */
.emp-ficha__contacto-canto {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 0.6rem;
	background-color: var( --emp-bronce );
	pointer-events: none;
}

.emp-ficha__contacto-canto .emp-ficha__contacto-estria {
	--emp-estria: var( --emp-beige );
	--emp-estria-paso: 4px;

	inline-size: 100%;
	block-size: 100%;
}

.emp-ficha__seccion {
	margin: 0 0 1.5rem;
	font-family: var( --emp-fuente-titular );
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --emp-marron );
}

.emp-ficha__lista {
	display: grid;
	gap: 1.1rem;
	margin: 0;
}

.emp-ficha__fila {
	display: grid;
	gap: 0.3rem;
}

.emp-ficha__fila dt {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --emp-bronce-oscuro );
}

.emp-ficha__fila dt .emp-icono {
	color: var( --emp-bronce );
}

.emp-ficha__fila dd {
	margin: 0;
	overflow-wrap: anywhere;
	color: var( --emp-marron );
}

.emp-ficha__lista .emp-ficha__fila dd a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	color: var( --emp-bronce-oscuro );
	text-underline-offset: 0.2em;
}

.emp-ficha__lista .emp-ficha__fila dd a:hover,
.emp-ficha__lista .emp-ficha__fila dd a:focus-visible {
	color: var( --emp-marron );
}

.emp-ficha__fila dd .emp-icono {
	align-self: center;
	color: var( --emp-bronce );
}

.emp-ficha__pie {
	margin-top: clamp( 2rem, 4vw, 3rem );
}

.emp-ficha__pie .emp-ficha__volver {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.8rem 1.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --emp-marron );
	border: 2px solid var( --emp-bronce-oscuro );
}

.emp-ficha__pie .emp-ficha__volver:hover,
.emp-ficha__pie .emp-ficha__volver:focus-visible {
	color: var( --emp-beige );
	background-color: var( --emp-marron );
	border-color: var( --emp-marron );
}

/* Volver es ir hacia atrás: la misma flecha del catálogo, del revés. */
.emp-ficha__volver .emp-icono--flecha {
	transform: scaleX( -1 );
}

/* -------------------------------------------------------- Relacionados */

.emp-relacionados {
	position: relative;
	margin-top: clamp( 2.5rem, 6vw, 4rem );
	padding-top: 2rem;
}

.emp-relacionados .emp-relacionados__filete {
	--emp-estria: rgba( 176, 122, 71, 0.55 );
	--emp-estria-paso: 7px;

	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 0.9rem;
	-webkit-mask-image: linear-gradient( 90deg, #000 0%, #000 35%, transparent 100% );
	mask-image: linear-gradient( 90deg, #000 0%, #000 35%, transparent 100% );
}

.emp-relacionados__titulo {
	margin: 0 0 1.5rem;
	font-family: var( --emp-fuente-titular );
	font-size: clamp( 1.2rem, 2.6vw, 1.5rem );
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --emp-marron );
}

.emp-relacionados__lista {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 16rem, 1fr ) );
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

/* El color va declarado aunque las dos líneas de dentro lleven el suyo: sin él,
   GeneratePress pinta `a:hover` en #222222 y cualquier texto que se añadiera
   luego a esta ficha saldría en un gris que no está en la paleta. */
.emp-relacionados__lista .emp-relacionados__item a {
	display: block;
	padding: 1.1rem 1.25rem;
	text-decoration: none;
	color: var( --emp-marron );
	background-color: var( --emp-beige );
	border: 1px solid var( --emp-linea-firme );
	border-left: 3px solid var( --emp-bronce );
}

.emp-relacionados__lista .emp-relacionados__item a:hover,
.emp-relacionados__lista .emp-relacionados__item a:focus-visible {
	color: var( --emp-marron );
	border-left-color: var( --emp-marron );
}

.emp-relacionados__nombre {
	display: block;
	font-family: var( --emp-fuente-titular );
	font-size: 1.05rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --emp-marron );
}

.emp-relacionados__sector {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --emp-bronce-oscuro );
}

.emp-relacionados__sector .emp-icono {
	color: var( --emp-bronce );
}

.emp-relacionados__todas {
	margin: 0;
	font-size: 0.9375rem;
}

.emp-relacionados .emp-relacionados__todas a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var( --emp-bronce-oscuro );
	text-underline-offset: 0.2em;
}

.emp-relacionados .emp-relacionados__todas a:hover,
.emp-relacionados .emp-relacionados__todas a:focus-visible {
	color: var( --emp-marron );
}

.emp-relacionados__todas .emp-icono {
	color: var( --emp-bronce );
}

/* ------------------------------------------------------------- Ajustes */

/**
 * Movimiento reducido.
 *
 * Aquí no hay ni una transición escrita a mano: todas las pone `.emp-transicion`
 * y `movimiento.css` ya las anula en esta consulta. Lo único que queda por hacer
 * es quitar los dos RECORRIDOS —la flecha que avanza y la columna del canto que
 * se levanta—, porque sin transición no se recorren: saltan. El cambio de estado
 * se conserva entero: el borde sigue volviéndose bronce y el canto sigue estando.
 */
@media ( prefers-reduced-motion: reduce ) {

	.emp-tarjeta:hover .emp-tarjeta__ficha .emp-icono--flecha,
	.emp-tarjeta__ficha:focus-visible .emp-icono--flecha {
		transform: none;
	}

	/* La columna del canto se queda entera desde el principio, en vez de crecer
	   de golpe al pasar por encima. El motivo se ve igual y no hay salto: el
	   afuera de la tarjeta sigue avisando del hover con el borde. */
	.emp-tarjeta__canto {
		transform: none;
	}
}

/* Modo de alto contraste de Windows: desaparecen los fondos, y los límites de
   tarjetas, desplegables y botones tienen que seguir existiendo. El estriado es
   una imagen de fondo y ahí no se pinta: las piezas que lo llevan necesitan un
   borde que las sustituya.

   Los selectores repiten la especificidad de la regla que anulan —dos clases—
   porque una consulta de medios no añade ni un punto: escritos con una sola
   clase, el `block-size: 0` perdería contra el alto normal y quedarían bandas
   vacías en el sitio de las estrías. */
@media ( forced-colors: active ) {

	.emp-tarjeta,
	.emp-directorio__filtros .emp-directorio__control,
	.emp-directorio__filtros .emp-directorio__enviar,
	.emp-directorio__chapas .emp-directorio__quitar,
	.emp-directorio__vacio,
	.emp-directorio__vacio .emp-directorio__vacio-enlace,
	.emp-directorio__paginas .emp-directorio__pagina a,
	.emp-directorio__paginas .emp-directorio__pagina span,
	.emp-ficha__pie .emp-ficha__volver,
	.emp-ficha__contacto,
	.emp-ficha__meta .emp-ficha__dato {
		border: 1px solid ButtonBorder;
	}

	.emp-directorio__pagina--actual span {
		border: 2px solid Highlight;
	}

	.emp-vista .emp-vista__estriado,
	.emp-relacionados .emp-relacionados__filete,
	.emp-directorio__filtros .emp-directorio__filete,
	.emp-ficha .emp-ficha__filete,
	.emp-directorio__vacio .emp-directorio__vacio-filete {
		border-top: 1px solid ButtonBorder;
		block-size: 0;
	}

	.emp-tarjeta__canto,
	.emp-ficha__contacto-canto {
		border-left: 2px solid ButtonBorder;
	}

	.emp-directorio__campo::after {
		border-color: ButtonText;
	}
}

/* ---------------------------------------------------------------------------
   9 · Cierre del listado
   ---------------------------------------------------------------------------
   La invitación a entrar en el directorio, al final de cada vista. Venía de la
   página `/directorio/` que duplicaba este listado; al consolidar en `/socios/`
   se trajo aquí y ahora aparece también en las vistas por municipio y sector.

   Banda a sangre en negro, con la misma mecánica que las del tema: se estira a
   los lados con márgenes negativos y recupera la retícula por dentro.
   --------------------------------------------------------------------------- */

.emp-vista__cierre {
	background-color: var( --emp-negro );
	color: var( --emp-beige );                      /* 17,35 sobre negro */
	margin-block-start: clamp( 3rem, 8vw, 6rem );
	padding-block: clamp( 3rem, 7vw, 5.5rem );
	padding-inline: 1.5rem;
	position: relative;
	text-align: center;
}

/* El estriado de la columna como remate superior, igual que en las bandas del
   tema: cose visualmente esta pieza con el resto del sitio. */
.emp-vista__cierre::before {
	background-image: repeating-linear-gradient(
		90deg,
		var( --emp-estria, rgba( 176, 122, 71, 0.65 ) ) 0,
		var( --emp-estria, rgba( 176, 122, 71, 0.65 ) ) 1px,
		transparent 1px,
		transparent var( --emp-estria-paso, 7px )
	);
	content: "";
	height: 3px;
	inset-inline: 0;
	opacity: 0.5;
	position: absolute;
	top: 0;
}

.emp-vista__cierre-interior {
	margin-inline: auto;
	max-width: 46rem;
}

.emp-vista__antetitulo--centrado {
	justify-content: center;
}

.emp-vista__cierre-titulo {
	color: var( --emp-beige );                      /* 17,35 sobre negro */
	font-family: var( --emp-fuente-titular );
	font-size: clamp( 1.75rem, 1.1rem + 2.4vw, 3rem );
	line-height: 1.12;
	margin-block: 0.75rem 0;
}

.emp-vista__cierre-texto {
	color: var( --emp-beige );
	margin-block-start: 1.25rem;
}

.emp-vista__cierre-accion {
	margin-block-start: 2rem;
}

/* Bronce con texto NEGRO, no beige: beige sobre bronce da 3,20 y no pasa AA
   para texto de botón. Negro sobre bronce da 5,42. */
.emp-vista__cierre-accion .wp-element-button {
	background-color: var( --emp-bronce );
	color: var( --emp-negro );
	display: inline-block;
	font-family: var( --emp-fuente-texto );
	font-size: 1rem;
	letter-spacing: 0.02em;
	padding: 0.9em 1.9em;
	text-decoration: none;
	transition: background-color 180ms ease;
}

.emp-vista__cierre-accion .wp-element-button:hover,
.emp-vista__cierre-accion .wp-element-button:focus-visible {
	background-color: var( --emp-beige );           /* 17,35 con texto negro */
	color: var( --emp-negro );
}

@media ( prefers-reduced-motion: reduce ) {
	.emp-vista__cierre-accion .wp-element-button {
		transition: none;
	}
}

/* El antetítulo hereda el bronce oscuro pensado para fondo claro, y sobre el
   negro de esta banda daba 3,05: la combinación que ACUERDO §4 marca «Nunca».
   Sobre oscuro va el bronce medio, 5,42. Detectado midiendo la cascada real, no
   leyendo la hoja: el color venía heredado desde fuera de este archivo. */
.emp-vista__cierre .emp-vista__antetitulo,
.emp-vista__cierre .emp-vista__antetitulo span,
.emp-vista__cierre .emp-vista__antetitulo svg {
	color: var( --emp-bronce );
}