@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/publico/fuentes/fredoka-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/publico/fuentes/fredoka-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/publico/fuentes/fredoka-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/publico/fuentes/nunito-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/publico/fuentes/nunito-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/publico/fuentes/nunito-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/publico/fuentes/nunito-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap;
  src: url(/publico/fuentes/nunito-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Caveat Brush"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/publico/fuentes/caveat-brush-latin-400-normal.woff2) format("woff2"); }

:root {

  --color-azul: #1d3be8;
  --color-azul-hondo: #0e1a6b;
  --color-lima: #d9f84a;
  --color-coral: #ff5a4e;

  --color-coral-texto: #c4232e;

  --color-coral-nota: #e0463a;

  --color-tinta: #121a3d;
  --color-tinta-2: #4a5578;
  --color-tinta-3: #3a4466;
  --color-tinta-4: #2c3658;
  --color-papel: #ffffff;
  --color-blanco: #ffffff;
  --color-niebla: #f2f5ff;
  --color-cielo: #eaf1ff;
  --color-linea: #dfe6fd;
  --color-linea-punteada: #dbe2fb;
  --color-punteado: #9aa8e8;

  --color-sugerencia: #666e8d;
  --color-bruma: #e6ebff;
  --color-lavanda: #c9d2ff;
  --color-sobre-azul: #ffffff;
  --color-sobre-acento: #0e1a6b;
  --color-mal: #b42318;
  --color-mal-suave: #fde8e7;

  --color-turquesa: #3ad6cc;
  --color-mancha: #dff4fb;
  --color-menta: #e3fbf7;
  --color-menta-texto: #0b6b5f;
  --color-lila: #e7d6fb;
  --color-amarillo: #f6f59a;
  --color-celeste: #bfe7f7;
  --color-rosado: #fcd2e2;
  --color-mapa: #e8f0ff;
  --color-cerro: #c9ecd6;
  --color-rio: #7fe3d6;
  --color-cerro-texto: #166a43;

  --text-xs--line-height: normal;
  --text-sm--line-height: normal;
  --text-base--line-height: normal;
  --text-lg--line-height: normal;
  --text-xl--line-height: normal;
  --text-2xl--line-height: normal;
  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-nota: "Caveat Brush", "Fredoka", cursive;

  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --shadow-suave: 0 6px 14px rgb(14 26 107 / 0.07);
  --shadow-tarjeta: 0 14px 30px rgb(14 26 107 / 0.12);
  --shadow-alta: 0 18px 40px rgb(8 18 90 / 0.35);
}

:root {
  --sans: var(--font-sans);
  --titulo: var(--font-titulo);
  --nota: var(--font-nota);
  --fondo: var(--color-niebla);
  --papel: var(--color-papel);
  --hondo: var(--color-niebla);
  --tinta: var(--color-tinta);
  --tinta2: var(--color-tinta-2);
  --tinta3: var(--color-tinta-2);
  --linea: var(--color-linea);
  --acento: var(--color-azul);
  --acento-suave: var(--color-niebla);
  --sobre-acento: var(--color-sobre-azul);
  --mal: var(--color-mal);
  --mal-suave: var(--color-mal-suave);
  --r-xs: var(--radius-xs);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
  --r-pill: var(--radius-pill);
  --r-madriguera: var(--radius-lg);
  --sombra: var(--shadow-suave);
  --sombra-tarjeta: var(--shadow-tarjeta);
  --sombra-alta: var(--shadow-alta);
  color-scheme: light;
}