@font-face {
	font-family: 'Serif-light';
	font-display: swap;
	src: url('../fonts/SerifaStd-Light.woff2');
}
@font-face {
	font-family: 'Serif-regular';
	font-display: swap;
	src: url('../fonts/SerifaStd-Roman.woff2');
}
@font-face {
	font-family: 'Serif-bold';
	font-display: swap;
	src: url('../fonts/SerifaStd-Bold.woff2');
}
@font-face {
	font-family: 'Serif-black';
	font-display: swap;
	src: url('../fonts/SerifaStd-Black.woff2');
}
@font-face {
	font-family: 'Montserrat-regular';
	font-display: swap;
	src: url('../fonts/Montserrat-Regular.ttf');
}
@font-face {
	font-family: 'Montserrat-semi-bold';
	font-display: swap;
	src: url('../fonts/Montserrat-SemiBold.ttf');
}

@font-face {
	font-family: 'Montserrat-medium';
	font-display: swap;
	src: url('../fonts/Montserrat-Medium.ttf');
}

/* style.css declara `* { font-family: 'Montserrat-regular' }`, y el selector
   universal alcanza a cada descendiente directamente: una declaración que
   acierta al elemento siempre gana a la heredada, así que poner una de estas
   clases en un contenedor no cambiaba el texto que va dentro de otra etiqueta.
   Por eso se nombra también a los descendientes, envueltos en :where() para
   que no sumen especificidad: así un hijo con su propia clase de fuente sigue
   mandando sobre la del contenedor. */
.montserrat-medium,
:where(.montserrat-medium) * {
	font-family: 'Montserrat-medium';
}

.montserrat-semi-bold,
:where(.montserrat-semi-bold) * {
	font-family: 'Montserrat-semi-bold';
}