@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

:root {
  --font-body: "Quicksand", sans-serif;

  --body: 1rem;

  --title-extra-large: 4.25rem;
  --title-large: 3rem;
  --title-medium: 2.5rem;
  --title-small: 2rem;
  --title-xs: 1.75rem;
  --title-xxs: 1.4rem;

  --black: 900;
  --bold: 700;
  --medium: 500;
  --regular: 400;

  --c-azul-principal: #0a4d86;
  --c-azul-principal-1: #063054;
  --c-azul-pantone: #0f4c81;
  --c-blanco-clinica: #eaeaea;
  --c-negro-clinica: #1d1d1d;
  --c-blanco: #ffffff;
  --c-negro: #000000; 

  --b-radius-1: 10px;
  --b-radius-2: 20px;


  /* Transitions */
  --all-transition: all 0.6s ease;
}

@media screen and (max-width: 1440px) {
  :root {
    --title-extra-large: 3.6rem;
    --title-large: 3.2rem;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --title-extra-large: 3.5rem;
    --title-large: 3rem;
    --title-medium: 2.3rem;
    --title-small: 1.4rem;
     --title-xs: 1.3rem;
     --title-xxs: 1.2rem;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --body: 1.05rem;

    --title-extra-large: 3rem;
    --title-large: 1.75rem;
    --title-medium: 1.5rem;
    --title-small: 1.2rem;
     --title-xs: 1.1rem;
     --title-xxs: 1rem;
  }
}