@charset "UTF-8";

h1 {
  font-size: 2.6rem;
  line-height: 3.1rem;
  font-weight: 400;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}
h6 {
  font-size: 2.6rem;
  line-height: 2.6rem;
  font-weight: 300;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  text-transform: none;
}
.head.imagen {
  background-image: url('../../images/header-home-sin-sombra.jpg');
}
.head.imagen p {
  line-height: 1.2rem;
  margin-bottom: 30px !important;
}
.comercios-img{
  position: relative;
  right: -30px;
  top: 0px;
  width: 100%;
  height: auto;
}
.btn {
  padding: 15px 35px 14px 35px !!important;
}
.tilde-naranja li{
  padding-left: 19px !important;
}
.tilde-naranja li::before {
  left: unset;
  margin-left: -20px;
  width: 14px;
  height: 14px;
  top: 3px;
}
.btn-border {
  color: #0147ba !important;
  transition: 0.2s !important;
  background-color: #fff !important;
  border: 1px solid #0147ba !important;
  padding: 12px 25px 11px 25px !important;
}
.btn-border:hover,
.btn-border:focus,
.btn-border.focus,
.btn-border.active {
  color: #fff !important;
  background-color: #0147ba !important;
  border: 1px solid #0147ba !important;
}
.ico{
  font-size: 1.6rem;
  color: #fff;
  margin: 0 auto 20px auto;
}
.metodo h3, .metodo p{
  color: #0147ba;
}
.ico-gris{
  font-size: 1.6rem;
  color: #0147ba;
  margin: 0 auto 20px auto;
  max-width: 25px;
}
.metodo p, .beneficio p{
  line-height: 1.5rem;
}
.comercios p.min{
  font-size: 0.9rem;
  line-height: 1rem;
}
.comercios h3 {
  font-size: 1.5rem;
  line-height: 1.8rem;
}
.beneficio h3{
  margin-bottom: 20px;
  max-width: 195px;
  margin: 0px auto 20px auto;
}
.comercios h4 {
  font-size: 1.1rem;
  line-height: 1.5rem;
  color: #838383 !important;
  font-weight: 400 !important;
}
.texto-color1 h4 {
  color: #0147ba !important;
}
hr.claro{
  border: none;
  border-top: 1px solid #5571b7;
  width: 100%;
}


.carousel-casos.owl-carousel,
.carousel-casos .owl-stage-outer,
.carousel-casos .owl-stage,
.carousel-casos .owl-item,
.carousel-casos .owl-item > div {
  width: 100%;
  height: 1000px;
  align-items: center;
  justify-content: center;
}

.carousel-casos img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1366px) {
  .carousel-casos.owl-carousel,
  .carousel-casos .owl-stage-outer,
  .carousel-casos .owl-stage,
  .carousel-casos .owl-item,
  .carousel-casos .owl-item > div {
    height: 650px;
  }
}



.card-color{
  background-color: #0147ba;
  border-radius: 10px;
  border: none;
  width: 100%;
  padding: 40px 20px 60px 20px;
  margin-bottom: 30px;
  flex-direction: row;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0);
  transition: all .2s ease;
  color: #fff;
}
.card-color .ico-img{
  text-align: center;
  padding-bottom: 20px;
}
.card-color .ico-img img{
  width: 100%;
  max-width: 240px;
  margin: 0px;
}
.card-color h3{
  margin-bottom: 5px;
}
.card-ejemplo{
  background-color: #fff;
  border-radius: 10px;
  border: none;
  width: 100%;
  padding: 35px 30px;
  margin-bottom: 30px;
  flex-direction: row;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0);
  transition: all .2s ease;
  text-align: left;
}
.table-sm td, .table-sm th {
    padding: .3rem;
}
.card-ejemplo h4{
  margin-bottom: 0px !important;
}
.card-ejemplo p{
  color: #838383 !important;
  margin-bottom: 5px !important;
}
.card-ejemplo table{
  margin-bottom: 0px !important;
}
table{
  color: #838383 !important;
}
.beneficio p{
  max-width: 90%;
  margin: 0px auto;
}
.tilde-azul {
  list-style: none;
  padding: 0px !important;
  margin: 0px !important;
  text-align: center !important;
}
.tilde-azul li {
  display: inline-block !important;
  position: relative;
  padding-left: 32px;
  padding-right: 12px;
  margin-bottom: 10px;
  line-height: 1.4rem;
  max-width: 500px;
  font-size: 1.1rem !important;
  line-height: 1.25rem !important;
  color: #0147ba !important;
}
.tilde-azul li::before {
  margin-left: 10px;
  background-image: none !important;
}
.btn-blanco {
  padding: 15px 45px 14px 45px !important;
}
.accordion p{
  max-width: 90%;
}
.accordion ul li p{
  margin-left: 0px !important;
}
.accordion ul{
  margin-left: -20px;
}
.parallax{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 250px 0px;
}
.parallax p{
  font-size: 1rem;
  line-height: 1.3rem;
  font-weight: 400;
}
.parallax p b{
  font-weight: 600;
}
#parallax-no-pos, #parallax-pix, #parallax-qr, #parallax-plataforma{
  background-position: left;
}
#parallax-no-pos #cont, #parallax-pix #cont, #parallax-qr #cont, #parallax-plataforma #cont{
  margin-left: auto;
}

#empeza-hoy .btn {
  padding: 15px 25px 14px 25px !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
}





/* ------- RESPONSIVE ------- */


@media (max-width: 1199px) {

  .navbar-expand-xl>.container, .navbar-expand-xl>.container-fluid, .navbar-expand-xl>.container-lg, .navbar-expand-xl>.container-md, .navbar-expand-xl>.container-sm, .navbar-expand-xl>.container-xl {
      padding-right: 10px;
      padding-left: 10px;
  }

}


@media (max-width: 991px) {

  h1 {
    max-width: 80%;
    margin: 0 auto 10px auto;
  }
  ul.tilde-naranja li {
    margin: 5px auto;
  }
  .head.imagen {
    background-image: url('../../images/header-home-mobile.jpg');
  }
  .comercios-img{
    right: 0px;
    top: 0px;
  }
  .metodo{
    padding-bottom: 40px;
  }
  .metodo h3{
    font-size: 1.3rem;
    line-height: 1.6rem;
    margin-bottom: 10px;
  }
  ul.tilde-naranja li{
    font-size: 0.9rem !important;
  }
  .tilde-azul li {
    display: block !important;
    font-size: 1.1rem !important;
    line-height: 1.25rem !important;
  }
  .tilde-azul li::before {
    margin-left: -25px;
  }
  .beneficio h3{
    font-size: 1.3rem;
    line-height: 1.6rem;
    max-width: 85%;
    margin: 0 auto 10px auto;
  }
  #parallax-no-pos, #parallax-qr, #parallax-pix, #parallax-plataforma, #parallax-plataforma-de-cobro{
    background-position: center;
  }
  #parallax-no-pos #cont, #parallax-qr #cont, #parallax-pix #cont, #parallax-plataforma #cont, #parallax-plataforma-de-cobro #cont{
    margin-left: auto;
    margin-right: auto;
  }

}

@media (max-width: 768px) {

  h1 {
    font-size: 1.6rem;
    line-height: 2.1rem;
  }
  h6{
    font-size: 1.7rem;
    line-height: 1.9rem;
  }
  .beneficio{
    margin-top: 40px;
  }
  .accordion p, .comercios p, #como-cobrar p, #metodos p, #quiero-telepagos p, #preguntas-frecuentes p{
    font-size: 0.9rem;
    line-height: 1.3rem;
    max-width: 75%;
    margin: 0 auto;
  }
  #preguntas-frecuentes p{
    font-size: 0.9rem !important;
    line-height: 1.3rem !important;
    max-width: 100%;
    margin-left: 0px;
  }
  #pre-footer p{
    font-size: 0.7rem !important;
    line-height: 1rem !important;
    max-width: 100%;
  }
  footer p{
    font-size: 0.8rem !important;
    line-height: 1.1rem !important;
  }

}

@media (max-width: 576px) {
  h1 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  #empeza-hoy .btn {
    font-size: 1.1rem !important;
  }
}