/* =========================
   Variables globales
========================= */
:root {
  --color-primary-blue: #0f4a86;
  --color-light-blue: #2563eb;
  --color-primary-orange: #d76b26;
  --color-light-orange: #fe6800;
  --color-light-orange-rgb: 254, 104, 0;
  --color-link-orange: #ac5b29;
  --color-grey-primary: #9ca2af;
  --color-light-grey: #e8e9e8;
  --color-light-grey-rgb: 232, 233, 232;
  --color-less-light-grey: #eeeeee;
  --color-another-light-grey: #bfbfc0;
  --color-light: #fefeff;
  --color-dark: #3b4145;
  --color-white: #fff;
  --color-black: #000;

  --icon-color: #0f4a86;
  --icon-color-secondary: #d76b26;

  --color-black-divider: rgba(0, 0, 0, 0.12);
  --color-black-divider-lighter: rgba(0, 0, 0, 0.06);

  --mobile-navbar-overlay-alpha: 0.64;

  --font-base: "Arial", "Roboto", sans-serif;

  --font-size-big: 1.5rem;
  --font-size: 1.125rem;
  --font-size-medium: 1.075rem;
  --font-size-small: 1rem;

  --font-bold: 500;

  --line-height: 1.5;
  --line-height-small: 1.2;
  --line-height-big: 1.8;

  --icon-size: 1.5rem;
  --icon-size-small: 1rem;
  --icon-size-big: 3.5rem;

  --border-radius-small: 8px;
  --border-radius-medium: 12px;
  --border-radius-big: 16px;

  --navbar-height: 60px;
  --footer-height: 180px;
}

@media (min-width: 991px) {
  :root {
    --navbar-height: 40px;
    --footer-height: 60px;
  }
}

/* =========================
   Reset / Global
========================= */
html {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size);
  background-color: var(--color-grey);
  color: var(--color-black);
  line-height: var(--line-height);
  margin: 0;

  padding-top: var(--navbar-height);
}

a {
  text-decoration: none;
}

p {
  text-align: justify;
}

/* =========================
   Utilidades
========================= */
/* Aquí van custom padding, margins, etc. 
En caso de que los de bootstrap no sean 
los requeridos */
.text-orange {
  color: var(--color-primary-orange);
}

.text-blue {
  color: var(--color-primary-blue);
}