/* ============================================================
   Tipografias propias
   ============================================================
   Antes esto se pedia a fonts.googleapis.com: dos conexiones a
   servidores ajenos antes de poder pintar una sola letra, y el
   navegador enterandose del archivo real recien despues de leer
   ese CSS. Ahora los archivos viajan con el sitio.

   Oswald y Source Sans 3 son variables: un archivo cubre todo el
   rango de pesos, asi que el titular en 700 y el mismo texto en
   500 salen de la misma descarga. IBM Plex Mono no tiene version
   variable, van los dos pesos que usamos.

   font-display: swap - primero se lee con la de sistema y despues
   entra la buena. En un sitio donde lo que importa es el dato
   tecnico, que el texto tarde en aparecer es peor que verlo
   cambiar de forma una vez.

   size-adjust y los overrides igualan la caja de la tipografia de
   respaldo con la real, para que ese cambio no mueva el renglon. */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('fuentes/oswald-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('fuentes/oswald-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fuentes/source-sans-3-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('fuentes/source-sans-3-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   Respaldos con la misma medida
   ------------------------------------------------------------
   Con font-display: swap el texto se lee enseguida con una
   tipografía del sistema y después entra la buena. El problema es
   el salto: Arial es 9% más ancha que Source Sans 3, así que en el
   cambio los renglones se reacomodan y el párrafo se mueve bajo el
   ojo del que ya estaba leyendo.

   size-adjust achica la de respaldo hasta que ocupa exactamente lo
   mismo. Los tres porcentajes salieron de medir la misma frase en
   canvas con una y con otra, no de una tabla.

   El body ya fija line-height: 1.6, así que la altura del renglón
   no depende de las métricas verticales de cada archivo y alcanza
   con igualar el ancho. */

@font-face {
  font-family: 'Source Sans 3 respaldo';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto');
  size-adjust: 91.4%;
  font-weight: 200 900;
  font-style: normal;
}

@font-face {
  font-family: 'Oswald respaldo';
  src: local('Arial Narrow'), local('Arial'), local('Roboto Condensed');
  size-adjust: 81%;
  font-weight: 200 700;
  font-style: normal;
}

@font-face {
  font-family: 'IBM Plex Mono respaldo';
  src: local('Courier New'), local('Courier');
  size-adjust: 100%;
  font-weight: 400 500;
  font-style: normal;
}