:root{

  /* =========================
     COLORES INSTITUCIONALES
  ========================= */

  --azul-dark:#222a4c;
  --azul-main:#38559c;
  --azul-soft:#d9e8f3;
  --blanco:#ffffff;

  /* =========================
     COLORES FUNCIONALES
  ========================= */

  --bg-main:var(--blanco);

  --bg-dark:var(--azul-dark);

  --bg-soft:var(--azul-soft);

  --text-main:var(--azul-dark);

  --text-light:#5c678d;

  --border-soft:rgba(34,42,76,.12);

  --overlay-dark:
    rgba(15,20,40,.72);

  /* =========================
     BOTONES
  ========================= */

  --btn-primary:var(--azul-main);

  --btn-primary-hover:#2f4884;

  --btn-secondary:var(--azul-soft);

  /* =========================
     SOMBRAS
  ========================= */

  --shadow-lg:
    0 20px 60px rgba(34,42,76,.18);

  --shadow-md:
    0 10px 30px rgba(34,42,76,.12);

  --shadow-sm:
    0 4px 12px rgba(34,42,76,.08);

  /* =========================
     BORDES
  ========================= */

  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;

  /* =========================
     LAYOUT
  ========================= */

  --max-width:1400px;

  /* =========================
     TRANSITIONS
  ========================= */

  --transition:.3s ease;

}