@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-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 Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-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;
}

/* Las fuentes de reserva son más anchas o más estrechas que las web, así que
   el texto ocupaba un número distinto de líneas mientras la fuente cargaba y
   el contenido saltaba al intercambiarse. Medido a 412 px: 31 px en la entrada
   de página y 23 px en la tarjeta de caso, con un CLS de 0,241 en /proyectos/.

   Cada plataforma resuelve una reserva distinta, y cada una necesita su propio
   factor. Los porcentajes salen de comparar el ancho de una misma cadena en
   cada fuente. Al declararse como familias separadas, local() falla en las
   plataformas que no tienen esa fuente y la pila continúa. */

@font-face {
  font-family: "Reserva sans Segoe";
  src: local("Segoe UI");
  size-adjust: 94.2%;
  ascent-override: 95%;
}

@font-face {
  font-family: "Reserva sans Roboto";
  src: local("Roboto"), local("Liberation Sans");
  size-adjust: 103.2%;
  ascent-override: 95%;
}

@font-face {
  font-family: "Reserva sans Arial";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 92.8%;
  ascent-override: 95%;
}

@font-face {
  font-family: "Reserva serif Georgia";
  src: local("Georgia");
  size-adjust: 106.8%;
}

@font-face {
  font-family: "Reserva serif Times";
  src: local("Times New Roman"), local("Liberation Serif"), local("Times");
  size-adjust: 116.6%;
}

:root {
  color-scheme: light;

  --font-sans: "Source Sans 3", "Reserva sans Segoe", "Reserva sans Roboto", "Reserva sans Arial", sans-serif;
  --font-serif: "Source Serif 4", "Reserva serif Georgia", "Reserva serif Times", serif;

  --color-canvas: #f6f7f5;
  --color-surface: #ffffff;
  --color-surface-secondary: #eef1ef;
  --color-text: #17201d;
  --color-text-secondary: #4c5b55;
  --color-text-muted: #64716b;
  --color-border: #d6ddd9;
  --color-border-strong: #b7c1bc;
  --color-inverse: #17201d;
  --color-inverse-text: #ffffff;

  --color-brand: #265f51;
  --color-brand-hover: #1f5044;
  --color-brand-active: #173d34;
  --color-brand-soft: #e2efeb;

  --color-info: #345e7a;
  --color-info-soft: #e7eff5;
  --color-valid: #2f6a4f;
  --color-valid-soft: #e5f1e9;
  --color-attention: #7a5a1f;
  --color-attention-soft: #f6eedb;
  --color-error: #8a3f3f;
  --color-error-soft: #f6e6e6;
  --color-exploration: #6a5278;
  --color-exploration-soft: #f0eaf3;

  --text-display: 2.625rem;
  --text-h1: 2.375rem;
  --text-h2: 1.875rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-lead: 1.1875rem;
  --text-body-large: 1.125rem;
  --text-body: 1rem;
  --text-compact: 0.9375rem;
  --text-label: 0.875rem;
  --text-metadata: 0.875rem;
  --text-note: 0.8125rem;

  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.65;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  --radius-1: 0.25rem;
  --radius-2: 0.5rem;
  --radius-3: 0.75rem;
  --radius-4: 1rem;
  --radius-round: 50%;
  --radius-pill: 999px;

  --border-subtle: 1px solid var(--color-border);
  --border-standard: 1px solid var(--color-border-strong);
  --border-emphasis: 2px solid var(--color-brand);
  --border-provisional: 1px dashed var(--color-border-strong);
  --focus-ring: 2px solid var(--color-brand);
  --focus-offset: 3px;

  --shadow-sm: 0 1px 2px rgb(23 32 29 / 0.05);
  --shadow-md: 0 10px 28px rgb(23 32 29 / 0.07);

  --page-margin: 1.25rem;
  --grid-gutter: 1rem;
  --container-global: 80rem;
  --container-standard: 70rem;
  --container-editorial: 47.5rem;
  --container-evidence: 70rem;
  --container-compact: 37.5rem;

  --transition-fast: 160ms ease;
}

@media (min-width: 30rem) {
  :root {
    --page-margin: 1.5rem;
  }
}

@media (min-width: 48rem) {
  :root {
    --text-display: 4rem;
    --text-h1: 3rem;
    --text-h2: 2.25rem;
    --text-h3: 1.75rem;
    --text-h4: 1.375rem;
    --text-lead: 1.3125rem;
    --text-body-large: 1.1875rem;
    --text-body: 1.0625rem;
    --page-margin: 2rem;
    --grid-gutter: 1.25rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --page-margin: 3rem;
    --grid-gutter: 1.5rem;
  }
}

@media (min-width: 80rem) {
  :root {
    --page-margin: 4rem;
  }
}