/**
 * Iconos — EMPRENDERE.
 *
 * Deliberadamente diminuto. El `<svg>` que devuelve `Core\Iconos::obtener()` ya
 * trae `width`, `height`, `fill="none"` y `stroke="currentColor"` como atributos,
 * así que un icono se dibuja bien aunque esta hoja no llegue a cargarse. Aquí solo
 * están las tres cosas que los atributos no pueden resolver: cómo se sienta el
 * icono sobre la línea de texto, cómo se comporta dentro de una caja flexible y
 * cómo se compone con la etiqueta que lo acompaña.
 *
 * COLOR. El icono toma `currentColor`: hereda el color del texto y por tanto
 * hereda su contraste. Si hace falta pintarlo de otro color, la regla es la misma
 * que para el resto del sitio, con un matiz importante:
 *
 *   #B07A47 sobre #090909 / #141414 .... 5,42 / 5,02 ✔ icono y texto
 *   #B07A47 sobre #F3EFE6 .............. 3,20 ✔ SOLO como icono, nunca como texto
 *   #7A5636 sobre #F3EFE6 .............. 5,70 ✔ icono y texto
 *   #4A3425 sobre #F3EFE6 ............. 10,12 ✔ icono y texto
 *   #7A5636 / #4A3425 sobre oscuro ..... 3,05 / 1,72 ✘ nunca
 *
 * El matiz: WCAG 1.4.11 pide 3:1 a los elementos gráficos, no 4,5:1. Un icono de
 * bronce sobre beige cumple (3,20); la etiqueta que va a su lado, no. Por eso el
 * icono puede ir en bronce y el texto tiene que bajar a bronce oscuro o marrón.
 *
 * Y el recordatorio de siempre: ningún icono es el único portador de un
 * significado. Siempre lleva texto al lado, o `titulo` si va solo.
 */

.emp-icono {
	display: inline-block;

	/* Un SVG en línea se apoya en la línea base y queda alto respecto a la
	   minúscula. Este descenso lo centra sobre la altura de la x. */
	vertical-align: -0.125em;

	/* Dentro de un contenedor flexible, un icono no se encoge nunca: perder
	   proporción es peor que desbordar. */
	flex: 0 0 auto;
}

/**
 * Icono con etiqueta.
 *
 * El hueco va en `em` para que crezca con el texto, no con la caja. Y el conjunto
 * es `inline-flex` en vez de dos elementos sueltos porque así el icono y su
 * etiqueta no se separan nunca en un salto de línea.
 */
.emp-icono-texto {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/**
 * Icono que acompaña a un titular en versales.
 *
 * Los titulares de la marca llevan tracking amplio; sin este ajuste el icono se
 * pega a la primera letra y rompe el ritmo de la línea.
 */
.emp-icono-texto--versales {
	gap: 0.65em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* El sprite se inyecta en el pie y no debe ocupar ni pintar nada: solo existe
   para que los `<use>` de la página encuentren sus símbolos. Estaba resuelto con
   un estilo en línea; vive aquí porque es presentación. */
.emp-iconos-sprite {
	height: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}