@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap");
/* ################# COLORES ####################### */
:root {
  /* Primary Colors */
  --main-color: #1e3b5f;
  --main-color-light: #4c658d;
  --main-color-dark: #001535;
  /* Secondary Colors */
  --secondary-color: #00e5ff;
  --secondary-color-light: #6effff;
  --secondary-color-dark: #00b2cc;
  /* Tertiary Colors */
  --tertiary-color: #880e4f;
  --tertiary-color-light: #bc477b;
  --tertiary-color-dark: #560027;
  /* Complementary Colors */
  --complementary-color-10: #eceff1;
  --complementary-color-20: #cfd8dc;
  --complementary-color-30: #b0bec5;
  --complementary-color-40: #90a4ae;
  --complementary-color-50: #78909c;
  --complementary-color-60: #607d8b;
  --complementary-color-70: #546e7a;
  --complementary-color-80: #455a64;
  /* Fonts */
  --font-family: "Montserrat", sans-serif;
}

/* Reset de estilos */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Tamaño de fuente base */
html {
  font-size: 16px;
}

/* Jerarquía de textos */
.display-1 {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 2.7rem;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}
.display-2 {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 2rem;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
.heading-1 {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 2.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.heading-2 {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.heading-3 {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.heading-4 {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.heading-5 {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.body-large {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.body-medium {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.body-bold {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.body-normal {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.body-small {
  color: var(--main-color, #1e3b5f);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}