@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@200&display=swap");
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  border: none;
  font-family: "Heebo", sans-serif;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Haciendo uso del mixin de arriba con @include podemos declarar los valores máximos y minimos [en ese orden] 
en los breakpoints declarados en las variables: $font-lock-min & $font-lock-max: */
/* Haciendo uso del mixin de arriba con @include podemos declarar los valores máximos y minimos [en ese orden] 
en los breakpoints declarados en las variables: $font-lock-min & $font-lock-max: */
.BarraNav {
  font-size: 1.6rem;
}

/* Haciendo uso del mixin de arriba con @include podemos declarar los valores máximos y minimos [en ese orden] 
en los breakpoints declarados en las variables: $font-lock-min & $font-lock-max: */
p {
  font-size: 1.2rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  p {
    font-size: calc(
 1.2rem + 
 num(1rem)-num(1.2rem) * 
 (100vw - 768px) / 
 num(1024px)-num(768px));
  }
}

@media (min-width: 1024px) {
  p {
    font-size: 1rem;
  }
}

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  h1 {
    font-size: calc(
 2rem + 
 num(1.8rem)-num(2rem) * 
 (100vw - 768px) / 
 num(1024px)-num(768px));
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 1.8rem;
  }
}

h2 {
  font-size: 1.6rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  h2 {
    font-size: calc(
 1.6rem + 
 num(1.2rem)-num(1.6rem) * 
 (100vw - 768px) / 
 num(1024px)-num(768px));
  }
}

@media (min-width: 1024px) {
  h2 {
    font-size: 1.2rem;
  }
}

.hero {
  
  background-position: center;
  background-repeat: no-repeat;
}

.hero__box {
  height: 30%;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.hero__titulo {
  font-size: 2.5rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero__titulo {
    font-size: calc(
 2.5rem + 
 num(3rem)-num(2.5rem) * 
 (100vw - 768px) / 
 num(1024px)-num(768px));
  }
}

@media (min-width: 1024px) {
  .hero__titulo {
    font-size: 3rem;
  }
}

.hero__msg {
  font-size: 1.5rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero__msg {
    font-size: calc(
 1.5rem + 
 num(2rem)-num(1.5rem) * 
 (100vw - 768px) / 
 num(1024px)-num(768px));
  }
}

@media (min-width: 1024px) {
  .hero__msg {
    font-size: 2rem;
  }
}

.slide {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slide__contenido {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.serv__article {
  font-size: 1.5rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .serv__article {
    font-size: calc(
 1.5rem + 
 num(2rem)-num(1.5rem) * 
 (100vw - 768px) / 
 num(1024px)-num(768px));
  }
}

@media (min-width: 1024px) {
  .serv__article {
    font-size: 2rem;
  }
}

.serv__titulo {
  padding-top: 1rem;
  text-align: center;
}

.serv__texto {
  font-size: 2rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .serv__texto {
    font-size: calc(
 2rem + 
 num(1.4rem)-num(2rem) * 
 (100vw - 768px) / 
 num(1024px)-num(768px));
  }
}

@media (min-width: 1024px) {
  .serv__texto {
    font-size: 1.4rem;
  }
}

.serv__img {
  width: 250px;
  display: block;
  margin: auto;
}

.serv__img--MP {
  width: auto;
  height: 83px;
}

.navbar {
  text-align: center;
}

.error {
  height: 100%;
  width: auto;
  opacity: 0.6;
  text-align: center;
}

.error__img {
  background-image: url("../../assests/404Choca.jpg");
  background-position: center;
  background-size: cover;
}

.btn-sng1 {
  background-color: #2481A6;
  border: #2481A6;
}

.btn-sng1:hover {
  background-color: #04C4D9;
}

.btn-sng2 {
  background-color: #D9298A;
  border: #D9298A;
}

.btn-sng2:hover {
  background-color: #EA686F;
}

.btn-sng3 {
  background-color: #24a674;
  border: #24a674;
}

.btn-sng3:hover {
  background-color: #04C4D9;
}

.footer {
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  width: 100%;
  padding: 1rem;
  margin-top: 2rem;
}
/*# sourceMappingURL=main.css.map */