@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {

  /* fonts */

  --font-body: "Open Sans", sans-serif;

  --bold: bold;
  --medium: 500;
  --light: 300;

  --italic: italic;
  --title-large: 2.75rem;
  --title-medium: 2rem;
  --title-small: 1.5rem; 
  --title-xs: 1.125rem; 

  --l-spacing: 0em;
  --body: 1.125rem;

  /* colors */

  --primario: #008ed0;
  --secundario: #004d70;
  --texto: #000000;
  --gris-claro: #f5f5f5;
  --blanco: #ffffff;
  --gradient-btn: linear-gradient(to right, #008ed0, #004d70, #008ed0, #004d70);
  --gradient-azul: linear-gradient(87.7deg, #333333 0%, #004d70 102.93%);
  --gradient-blanco: linear-gradient(-180deg, #f5f5f5 0%, #ffffff 100%);

  /* Transitions */

  --all-transition: all 0.4s ease;
}

@media screen and (max-width: 1280px) {
  :root {
    --title-large: 2.7rem;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --title-large: 2.5rem;
    --title-medium: 2rem;
    --title-small: 1.25rem;
    --title-xs: 1.15rem; 
  }
}


@media screen and (orientation: landscape) and (max-width: 844px) {

  :root {
    --body: 1.05rem;
    --title-large: 1.75rem;
    --title-medium: 1.5rem;
    --title-small: 1.2rem;   
  }
}

@media screen and (max-width: 600px) {
  :root {
    --body: 1.05rem;
    --title-large: 1.75rem;
    --title-medium: 1.5rem;
    --title-small: 1.2rem;
  }
}