/*
 * Tipografias del portal EduKarla, alojadas en el propio servidor.
 * Quicksand para los titulos, Source Sans 3 para el cuerpo.
 *
 * Se sirven desde aca y no desde Google para que el portal no haga una
 * peticion a un tercero en cada carga: son pantallas con datos de menores
 * de edad. Ademas asi el portal funciona aunque el servidor no tenga
 * salida a internet.
 *
 * Solo se incluyen los subconjuntos latin y latin-ext, que es lo que el
 * espanol necesita.
 *
 * POR QUE `font-display: optional` Y NO `swap`
 *
 * Con `swap` el navegador pinta el texto con la fuente del sistema y despues
 * lo cambia por la definitiva. Ese cambio es el "salto de fuente": las letras
 * se ven de otro tamano por un instante. Con `optional` no hay cambio nunca:
 * el navegador espera unos 100 ms y, si la fuente no llego, usa el respaldo
 * para esa carga y no la reemplaza a mitad de camino.
 *
 * Eso solo funciona bien si la fuente llega a estar en cache, porque si no
 * cada pantalla saldria con el respaldo. Por eso van juntas tres cosas y
 * ninguna sirve sola:
 *
 *   1. `optional` aca, para que no haya reemplazo a mitad de pintado.
 *   2. La ruta /tipografias/, que manda cache de un anio (ver
 *      TipografiaController: el servidor de desarrollo no manda ninguna).
 *   3. El <link rel="preload"> de los layouts, para los cinco archivos que se
 *      usan de verdad, asi llegan dentro de esos 100 ms en la primera carga.
 *
 * Si alguna vez hay que reemplazar un .woff2, RENOMBRARLO: la cache es
 * `immutable` y el navegador no va a volver a preguntar por el mismo nombre.
 */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/tipografias/Quicksand-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;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url(/tipografias/Quicksand-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: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/tipografias/Quicksand-600-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: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/tipografias/Quicksand-600-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: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/tipografias/Quicksand-700-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: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/tipografias/Quicksand-700-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/tipografias/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url(/tipografias/SourceSans3-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/tipografias/SourceSans3-600-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url(/tipografias/SourceSans3-600-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/tipografias/SourceSans3-700-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: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url(/tipografias/SourceSans3-700-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;
}

/*
 * RESPALDOS CON METRICA AJUSTADA
 *
 * El problema que resuelven: mientras las fuentes se descargan, el navegador
 * pinta el texto con la del sistema y despues cambia. Como Source Sans 3 tiene
 * la equis un 4,4% mas chica que Segoe UI y otro alto de linea, ese cambio se
 * veia: las letras crecian y se achicaban a cada carga de pagina.
 *
 * Estas dos familias no traen ningun archivo. Toman la fuente del sistema y la
 * estiran para que ocupe lo mismo que la definitiva, asi el cambio deja de
 * notarse. Los numeros salen de medir los archivos reales:
 *
 *   Quicksand      equis 50,3%  ascendente 100,0%  descendente 25,0%
 *   Source Sans 3  equis 47,8%  ascendente 102,4%  descendente 40,0%
 *   Segoe UI       equis 50,0%  ascendente 107,9%  descendente 25,1%
 *
 * Los valores finales NO salen de esa cuenta a secas: se midieron en el
 * navegador comparando el ancho y el alto de un mismo texto con la fuente real
 * y con el respaldo, y se corrigieron hasta que coincidieran. La cuenta daba el
 * punto de partida; la medicion dio el numero.
 *
 * Medicion final, texto de 32px:
 *   cuerpo   real 435,1 x 46   respaldo 437,2 x 46
 *   titulos  real 453,2 x 37   respaldo 453,4 x 37
 *   sin ajustar, la del sistema daba 457,4 x 43: cinco por ciento mas ancha y
 *   tres pixeles mas baja, que es exactamente el salto que se veia.
 */

@font-face {
  font-family: 'Quicksand respaldo';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 99.1%;
  ascent-override: 93.4%;
  descent-override: 23.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Source Sans 3 respaldo';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  size-adjust: 95.1%;
  ascent-override: 107.6%;
  descent-override: 42.0%;
  line-gap-override: 0%;
}