/*
 * Zaguán — iconos inline.
 *
 * Los SVG del helper zaguan_icon() no traen width/height propios: el tamaño lo
 * manda el CSS, de modo que un icono siempre acompaña al texto que lo rodea.
 *
 * Sin esto, el `svg { display:block; max-width:100% }` del reset los estiraría
 * al ancho del contenedor.
 */

.zaguan-icon {
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	vertical-align: -0.125em; /* Alinea con la línea base del texto. */
	flex: none; /* No se deforma dentro de contenedores flex. */
	fill: none;
	stroke: currentColor;
}

/* Los logos de marca (Simple Icons) son de relleno, no de trazo. */
.zaguan-icon--facebook,
.zaguan-icon--instagram,
.zaguan-icon--linkedin,
.zaguan-icon--youtube {
	fill: currentColor;
	stroke: none;
}

/* Icono junto a texto dentro de enlaces y botones. */
.zaguan-icon + span,
span + .zaguan-icon {
	margin-inline-start: 0.5em;
}