/* Tipografía base */

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

* {
  margin: 16px 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;

}

body {
  /* font-family: "Inter", Arial, sans-serif; */
  font-family: "Open Sans", sans-serif;
  color: #121212;
}


@media (max-width: 768px) {

  /* movil */
  :root {
    --tamanio-letra: 16px;
  }

  /* Encabezamientos */
  .display {
    font-size: 36px;
    line-height: 120%;
  }

  h1 {
    font-size: 30px;
    line-height: 120%;
  }

  h2 {
    font-size: 28px;
    line-height: 120%;
  }

  h3 {
    font-size: 26px;
    line-height: 120%;
  }

  h4 {
    font-size: 24px;
    line-height: 120%;
  }

  h5 {
    font-size: 22px;
    line-height: 140%;
  }

  h6 {
    font-size: 20px;
    line-height: 140%;
  }

  .lead {
    font-size: 18px;
    line-height: 140%;

  }

  p.grande {
    font-size: 16px;
    line-height: 140%;
  }

  p {
    font-size: 16px;
    line-height: 140%;
  }

  p.mediano {
    font-size: 14px;
    line-height: 140%;
  }


  p.chico {
    font-size: 12px;
    line-height: 140%;
  }

  p.extrachico {
    font-size: 11px;
    line-height: 140%;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  /* tablet */

  :root {
    --tamanio-letra: 16px;
  }

  /* Encabezamientos */
  .display {
    font-size: 64px;
    line-height: 120%;
  }

  h1 {
    font-size: 56px;
    line-height: 120%;
  }

  h2 {
    font-size: 48px;
    line-height: 120%;
  }

  h3 {
    font-size: 40px;
    line-height: 120%;
  }

  h4 {
    font-size: 32px;
    line-height: 120%;
  }

  h5 {
    font-size: 28px;
    line-height: 140%;
  }

  h6 {
    font-size: 24px;
    line-height: 140%;
  }

  .lead {
    font-size: 20px;
    line-height: 140%;

  }

  p.grande {
    font-size: 18px;
    line-height: 140%;
  }

  p.mediano {
    font-size: 16px;
    line-height: 140%;
  }

  p {
    font-size: 16px;
    line-height: 140%;
  }

  p.chico {
    font-size: 14px;
    line-height: 140%;
  }

  p.extrachico {
    font-size: 12px;
    line-height: 140%;
  }

}

@media (min-width: 1024px) {
  /* desktop */

  :root {
    --tamanio-letra: 16px;
  }

  /* Encabezamientos */
  .display {
    font-size: 64px;
    line-height: 120%;
  }

  h1 {
    font-size: 56px;
    line-height: 120%;
  }

  h2 {
    font-size: 48px;
    line-height: 120%;
  }

  h3 {
    font-size: 40px;
    line-height: 120%;
  }

  h4 {
    font-size: 32px;
    line-height: 120%;
  }

  h5 {
    font-size: 28px;
    line-height: 140%;
  }

  h6 {
    font-size: 24px;
    line-height: 140%;
  }

  .lead {
    font-size: 20px;
    line-height: 140%;

  }

  p.grande {
    font-size: 18px;
    line-height: 140%;
  }

  p.mediano {
    font-size: 16px;
    line-height: 140%;
  }

  p {
    font-size: 16px;
    line-height: 140%;
  }

  p.chico {
    font-size: 14px;
    line-height: 140%;
  }

  p.extrachico {
    font-size: 12px;
    line-height: 140%;
  }

}