/* ESTILOS DESKTOP */

.product-b-desktop{
  align-items: flex-start;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.product-b-desktop h2{
  font-family: 'AzoSans-Bold';
  font-size: 65px;
  color:#552863;
  line-height: 83px;
}

/* ESTILOS MODULO BANNER PRINCIPAL */

.product-b-desktop .modulo01 {
  align-items: center;
  background-image: url(../img/fondo-banner-payroll.png);
  background-position: 50% 50%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  margin-top: 148px;
  min-height: 928px;
  padding: 100px 18%;
  width: 100%;
  z-index: 2;
}

.product-b-desktop .banner-heading {
  color: white;
  font-family: 'AzoSans-Bold';
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 70px;
  margin-left: 4.0px;
  margin-top: 10px;
  text-align: center;
  padding: 0 10%;
}

.product-b-desktop .banner-main-paragraph {
  align-self: flex-end;
  color: var(--white);
  font-family: 'AzoSans-Regular';
  font-size: 50px;
  letter-spacing: 0;
  line-height: 55px;
  margin-top: 33px;
  text-align: center;
  width: 100%;
  padding: 0 7%;
}

.product-b-desktop .banner-paragraph {
  align-self: flex-end;
  color: var(--white);
  font-family: 'AzoSans-Bold';
  font-size: 30px;
  letter-spacing: 0;
  line-height: 42px;
  margin-top: 50px;
  text-align: center;
  width: 100%;
  padding: 0 7%;
}

.product-b-desktop .banner-buttons {
  align-items: flex-start;
  display: flex;
  margin-top: 60px;
  min-width: 539px;
  font-family: 'AzoSans-Bold';
}

.product-b-desktop .banner-button-contacta{
  background-color: #FC6821 !important;
  color: white;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  display: flex;
  height: 49px;
  min-width: 223px;
  padding: 10px 30px 10px 30px;
  margin-right:38px;
  border:3px solid #FC6821;
}

.product-b-desktop .banner-button-contacta:hover{
  background-color: white !important;
  border-color: white;
  color:#FC6821 !important;
}

.product-b-desktop .contactanos {
  color:white;
}

.product-b-desktop .banner-button-whatsapp {
  align-items: center;
  background-color: transparent;
  border: 3px solid white;
  color:white;
  border-radius: 30px;
  display: flex;
  height: 49px;
  min-width: 223px;
  padding: 10px 29px 10px 34px;
}

.product-b-desktop .whatsapp{
  margin-right:10px;
}

.product-b-desktop .banner-button-whatsapp:hover{
  color:#552863;
  background-color: white;
} 

.fa-whatsapp{
font-size: 24px;
}

/* ESTILOS MODULO 01 ¿QUE ES EL PRODUCTO? */

.modulo02{
  width: 100%;
  padding:120px 3% 120px 13%;
  flex: 1;
}

.columnas-mod01{
  align-items: center;
  display: flex;
}

.modulo02 .col-izq{
  width:50%;
  height:100%;

}

.modulo02 .col-der{
  width:50%;
  height: 100%;
}

.modulo02 p{
  margin-top:36px;
}

.texto-naranja-mod01{
  color:#FC6821;
  margin-top: 24px;
  font-family:'AzoSans-Medium';
  font-size: 35px;
  line-height: 51px;
}

.mod01-text{
  color:#707070;
  font-family:'AzoSans-Regular';
  font-size:20px;
  line-height: 30px;
  padding-right: 6%;
}

.mod01-text span{
  font-family:'AzoSans-Bold';
}

.modulo02 .col-der img{
    width: 100%;
    margin-top:-180px;
}

.mod01-buttons {
  align-items: flex-start;
  margin-left: 48px;
  display: flex;
  min-width: 560px;
  font-family: 'AzoSans-Bold';
  position: relative;
  z-index: 2;
  margin-top:36px;
}

.mod01-buttons .contactanos-ahora{
  align-items: center;
  background-color: #552863;
  border: 3px solid #552863;
  border-radius: 30px;
  display: flex;
  height: 50px;
  padding: 10px 29px 10px 34px;
  margin-right:20px;
}

.mod01-buttons .contactanos-ahora:hover {
  background-color: transparent;
  border: 3px solid #552863;
}

.mod01-buttons .contactanos-ahora:hover .contactanos{
  color:#552863;
}

.mod01-buttons .que-es-button-whatsapp{
  align-items: center;
  background-color: transparent;
  border: 3px solid #FC6821;
  color: #FC6821;
  border-radius: 30px;
  display: flex;
  height: 50px;
  min-width: 223px;
  padding: 10px 24px 8px 24px;
}

.mod01-buttons .que-es-button-whatsapp:hover{
  background-color: #FC6821;
  box-shadow: 0px 0px 6px #00000029;
  color:white;
}

.entremodulos-1{
  width: 100%;
  height: 350px;
  background-image: url(../img/payroll-modulo-3-bg.png);
  background-size:cover;
  background-position: top center;
  margin-top:-180px;
}

.hide-sm-bg{
  width: 50%;
  display: flex;
  margin-top:-48px;
}

/*ESTILOS MODULO 02 CARACTERISTICAS*/

.modulo03{
  width: 100%;
  background-image: url(../img/backgournd-payroll-features.png);
  background-size: cover;
  background-position: top center;
  text-align: center;
  padding:44px 13% 162px 13%;
}

.modulo03 h2{
  color:white;
}

.flex-4-col{
  width:100%;
  height: 350px;
  display:flex;
  margin-top:48px;
}

.caracteristicas{
  width:25%;
  background-color: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  padding:2%;
  -webkit-margin-end:24px;
}

.caracteristicas:last-child{
  -webkit-margin-end:0;
}

.caracteristicas h3{
  font-family:'AzoSans-Bold';
  font-size:35px;
  line-height: 41px;
  color: #552863;
  margin:auto;
}

.caracteristicas img{
  max-width: 135px;
  margin:auto;
}

/*ESTILOS MODULO 03 CUADRADO FLOTANTE*/

.modulo04{
  width:100%;
  background-image: url(../img/background-polizas-contables.png);
  background-size:cover;
  background-position: bottom center;
  padding:0 7% 72px 7%;
}

.rectangulo-flotante{
  width:100%;
  height: fit-content;
  background-color:#F4F4F4;
  background-size: cover;
  border-radius: 24px;
  display:flex;
  padding: 80px 24px 80px 24px;
  align-items: center;
}

.rectangulo-flotante .col-izq{
  width:50%;
  padding:0 70px;
}

.rectangulo-flotante img{
  width:100%;
}

.rectangulo-flotante .col-der{
  width:50%;
  padding-right:4%;
}

.rectangulo-flotante h2{
  font-size:65px;
  line-height: 69px;
}

.rectangulo-flotante h3{
  font-family:'AzoSans-Medium';
  font-size:65px;
  line-height: 69px;
  color:#FC6821;
}

.rectangulo-flotante h4{
  font-family: 'AzoSans-Medium';
  font-size:35px;
  line-height:51px;
  color:#FC6821;
  padding-right: 14px;
}

.rectangulo-flotante p{
  color:#707070;
  font-size:20px;
  line-height: 30px;
  margin-top: 43px;
  padding-right: 6%;
}

.rectangulo-flotante p span{
  font-family: 'AzoSans-Bold';
}

/*ESTILOS MODULO 04 PROCESO PRODUCTO*/

.modulo05{
  width:100%;
  background-image: url(../img/background-proceso-varmus-payroll.png);
  background-size: 110%;
  display: flex;
  padding:40px 7% 120px 7%;
}

.modulo05 .col-izq{
  width: 50%;
}

.modulo05 h2 {
    color: white;
}

.modulo05 p{
  color:white;
  font-family:'AzoSans-Regular';
  font-size:20px;
  line-height: 30px;
  margin-top: 43px;
}

.modulo05 span{
  font-family:'AzoSans-Bold';
}

.modulo05 .col-der{
  width: 50%;
  text-align: center;
}

.modulo05 img{
  max-width: 700px;
}

.proceso-buttons {
  align-items: flex-start;
  display: flex;
  min-width: 560px;
  margin-top:60px;
  font-family: 'AzoSans-Bold';
}

.modulo05 .mas-info{
  font-family: 'AzoSans-Bold';
  align-items: center;
  background-color: #FC6821;
  border-radius: 30px;
  display: flex;
  height: 49px;
  min-width: 223px;
  padding: 10px 29px 10px 34px;
  margin-right:24px;
}

.modulo05 .mas-info:hover{
  background-color: white;
}

.modulo05 .info-button {
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
  color:white;
}

.modulo05 .mas-info:hover .info-button{
  color:#FC6821;
}

.modulo05 .proceso-whatsapp{
  align-items: center;
  background-color: transparent;
  border: 3px solid white;
  color: white;
  border-radius: 30px;
  display: flex;
  height: 50px;
  min-width: 223px;
  padding: 10px 29px 8px 34px;
}

.modulo05 .proceso-whatsapp:hover{
  background-color: white;
  box-shadow: 0px 0px 6px #00000029;
  color:#552863;
}

/* ESTILOS MOBILE */

.product-b-mobile .modulo-01, .product-b-mobile .modulo-02, .product-b-mobile .modulo-03, .product-b-mobile .modulo-04, .product-b-mobile .modulo-05, .product-b-mobile .entremodulos01 {
  text-align: center
}

.product-b-mobile h2{
  color:#552863;
  font-family: 'AzoSans-Bold';
  font-size: 32px;
  line-height: 40px;
}

.product-b-mobile p{
  font-size: 16px;
  line-height: 25px;
}

.product-b-mobile .modulo-01 a, .product-b-mobile .modulo-02 a, .product-b-mobile .modulo-05 a{
  padding:15px 35px 13px 35px;
  border-radius: 30px;
  color:white;
}

.product-b-mobile .botones {
  display: flex;
  justify-content: center;
  font-family:'AzoSans-Bold';
}

.product-b-mobile .botones a{
  margin-bottom:24px;
}

.product-b-mobile .btn-01{
  background-color: #FC6821;
  border:2px solid #FC6821; 
}

.product-b-mobile .btn-01:hover{
  background-color: white;
  border-color:white;
  color:#FC6821;
}

.product-b-mobile .btn-02{
  border:2px solid white;
  color:white !important;
  background-color:transparent;
}

.product-b-mobile .btn-02:hover{
  background-color: white;
  color:#552863 !important;
}

.product-b-mobile .modulo-01{
  background-image: url('../img/mobile-payroll-hero-background.png');
  background-size: cover;
  padding: 42px 10% 42px 10%;
  color:white;
}

.product-b-mobile .modulo-01 img{
  width:35%;
}

.product-b-mobile .modulo-01 h1{
  font-size:32px;
  line-height: 39px;
}

.product-b-mobile .modulo-01 span{
  font-family:'AzoSans-Bold';
}

.product-b-mobile .modulo-01 p{
  font-family:'AzoSans-Bold';
  padding:24px;
}

.product-b-mobile .modulo-02{
  padding:56px 10% 0 10%;
}

.product-b-mobile .modulo-02 h2{
  font-family: 'AzoSans-Bold';
  font-size: 32px;
  line-height: 40px;
  color: #552863;
}

.product-b-mobile .modulo-02 h3{
  font-family: 'AzoSans-Medium';
  font-size: 20px;
  line-height: 31px;
  color: #FC6821;
}

.product-b-mobile .modulo-02 p{
  color:#707070;
}

.product-b-mobile .modulo-02 span{
  font-family: 'AzoSans-Bold';
}

.product-b-mobile .modulo-02 .btn-03{
  background-color: #552863;
  border:2px solid #552863; 
  font-family:'AzoSans-Bold';
}

.product-b-mobile .modulo-02 .btn-03:hover{
  background-color: white;
  color:#552863;
}

.product-b-mobile .modulo-02 .btn-04{
  background-color:white;
  color:#FC6821;
  border: 2px solid #FC6821;
  font-family:'AzoSans-Bold';
}

.product-b-mobile .modulo-02 .btn-04:hover{
  background-color: #FC6821;
  color:white;
}

.product-b-mobile .entremodulos01 .img01{
  width: 80%;
}

.product-b-mobile .modulo-03{
  background-color: #5a1857;
  padding:24px 5% 60px 5%;
  margin-top:-4px;
}

.product-b-mobile .modulo-03 h2{
  color:white;
}

.product-b-mobile .modulo-03 .tarjeta-carousel{
  width: 280px;
  height: 324px;
  margin: auto;
  background-color: white;
  border-radius: 20px;
  padding:44px 24px;
  font-family: 'AzoSans-Bold';
  font-size: 30px;
  line-height: 40px;
  color: #552863;
}

.product-b-mobile .modulo-03 .carousel-indicators{
  position:relative;
  margin-top:32px;
}

.modulo-03 .carrusel-features img {
  width: auto !important;
  margin: auto;
}

.modulo-03 .carrusel-features .owl-dots{
  margin-top: 48px;
  margin-bottom: 24px;
}

.modulo-03 .carrusel-features .owl-dots .owl-dot.active span{
  background: white;
}

.modulo-03 .carrusel-features .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 1px solid white;
}

.modulo-03 .carrusel-features .owl-dots .owl-dot:hover span{
  background: white;
  opacity: .8;
}

.modulo-03 .carrusel-features .owl-nav{
  display:none;
}

.product-b-mobile .modulo-04{
  background-color: #F4F4F4;
  border-radius: 30px 30px 0 0;
  margin-top: -32px;
  padding: 40px 5% 0 5%;
  color:white;
}

.product-b-mobile .modulo-04 h3{
  color: #FC6821;
  font-family: 'AzoSans-Medium';
  font-size: 20px;
  line-height: 31px;
}

.product-b-mobile .modulo-04 p{
  color:#707070;
  line-height: 1.5; 
  padding:0 10%;
  position: relative;
}

.product-b-mobile .modulo-05{
  background-color: #5a1857;
  color:white;
  margin-top: -4px;
}

.product-b-mobile .modulo-05 h2{
  color:white;
}

.product-b-mobile .modulo-05 p{
  font-family: 'AzoSans-Bold';
}

.product-b-mobile .part-01{
  background-image: url('../img/mobile-attendance-background-modulo05.png');
  background-size: cover;
  padding: 24px 10% 60px 10%;
}

.product-b-mobile .part-02{
  padding:0 10% 80px 10%;
  text-align: center;
}

.product-b-mobile .part-02 img{
  width: 100%;
  max-width: 300px;
}

/*  ESTILOS DIFERENTES KIOSK */
.kiosk .modulo01{
  padding: 100px 13%;
  background-image: url(../img/fondo-banner-kiosk.png);
}

.kiosk .modulo01 h1, .kiosk .modulo01 p{
  color: #552863;
}

.kiosk .banner-button-contacta:hover{
  border-color: #FC6821;
}

.kiosk .banner-button-whatsapp{
    border-color: #552863;
    color: #552863;
}

.kiosk .banner-button-whatsapp:hover{
  background-color: #552863;
  color: white;
}

.kiosk .modulo02{
  padding: 120px 8% 120px 13%;
}

.kiosk .modulo02 .col-izq {
    width: 53%;
  }

.kiosk .modulo02 .col-der {
  width: 47%;
}

.kiosk .entremodulos-1{
  background-image: url(../img/kiosk-modulo-3-bg.png);
}

.kiosk .modulo03{
  background-color:#ff5f00;
  background-image: none;
}

.kiosk .modulo04{
  background-image: url(../img/background-recursos-humanos.png);
}

.kiosk .rectangulo-flotante{
  background-color: #552863;
}

.kiosk .modulo04 h2, .kiosk .modulo04 h3, .kiosk .modulo04 h4, .kiosk .modulo04 p {
  color:white;
}

.kiosk .modulo05{
  background-color: #ff5f00;
  background-image: none;
}

.kiosk .modulo05 p{
  font-family: 'AzoSans-Bold';
}

.kiosk .modulo05 .mas-info{
  background-color: #552863;
}

.kiosk .modulo05 .mas-info:hover{
  background-color: white;
}

.kiosk .modulo05 .mas-info:hover .info-button{
  color:#552863;
}

.kiosk .modulo05 .proceso-whatsapp:hover{
  color:#FC6821;
}

.kiosk .modulo-01{
  background-image: url('../img/mobile-dashboard-hero-background.png') !important;
  color: #552863;
}

.kiosk .btn-01:hover{
  border-color: #FC6821;
}

.kiosk .btn-02{
  border-color: #552863;
  color: #552863 !important;
  background-color:transparent;
}

.kiosk .btn-02:hover{
  background-color: #552863;
  color:white !important;
}

.kiosk .modulo-03{
  background-color: #ff5f00;
}

.kiosk .modulo-04{
  background-color: #552863;
  padding: 40px 5% 40px 5%;
}

.kiosk .modulo-04 h2, .kiosk .modulo-04 h3, .kiosk .modulo-04 p{
  color:white;
}

.kiosk .modulo-05{
  background-color: #ff5f00;
}

.kiosk .modulo-05 .part-01{
  background-image: none;
}

.kiosk .modulo-05 .btn-01{
  background-color: #552863;
}

.kiosk .modulo-05 .btn-01:hover{
  background-color: white;
  color:#552863;
}

.kiosk .modulo-05 .btn-02{
  border-color: white;
  color:white !important;
}

.kiosk .modulo-05 .btn-02:hover{
  background-color: white;
  color:#FC6821 !important;
}

@media (max-width:499px){
  .carousel-control-next, .carousel-control-prev{
    display: none;}
  .product-b-mobile .btn-02{
    border:2px solid #552863;
    color: #552863 !important;
    background-color:white;}
}

@media (min-width:613px){
  .btn-01{
    margin-right: 24px;}
}

@media (min-width:760px){
  .btn-04{
    margin-left: 12px;}
}

@media (max-width:767px){
  .desktop{
    display:none;}
}

@media (min-width:768px) and (max-width: 1199px) {
  .product-b-mobile p{
    font-size: 18px;
    line-height: 26px;}
  .product-b-mobile h2 {
    font-size: 46px !important;
    line-height: 51px !important;}
  .product-b-mobile .modulo-02 h3 {
    font-size: 24px;}
  .product-b-mobile .modulo-01 {
    background-image: url(../img/fondo-banner-payroll.png);
    padding: 42px 15% 72px 15%;
    margin-top:-2px;}
  .product-b-mobile .modulo-01 h1 {
    padding:0 10% 0 10%;}
  .product-b-mobile .modulo-01 h1 span{
    font-size:40px;
    margin-bottom:24px;}
  .product-b-mobile .modulo-01 img {
    width: 25%;}
  .product-b-mobile .entremodulos01 .img01 {
    width: 50%;
    margin-top:32px;}
  .entremodulos01 .img02{
    margin-top:-48px;}
  .product-b-mobile .modulo-02{
    padding:80px 15% 0 15%;}
  .product-b-mobile .part-01 {
    margin-top: -72px;
    padding: 0 5% 80px 5%;}
  .modulo-04 img {
    width: 60%;}
  .modulo-04 p {
    font-family: 'AzoSans-Bold';
    line-height: 21px;
    padding: 0 5%;}
  .entremodulos02 {
    margin-top: -48px;}
  img.movil{
    display:none;}
  img.desktop{
    max-width: 600px !important;
    margin-top:-60px}
}

@media screen and (max-width: 1199px) {
  .screen.product-b-desktop, .hide-sm-bg, .hide-this-buttons{ 
    display: none;}
  .botones {
    flex-flow: wrap;}
}

@media screen and (min-width: 1200px) {
  .product-b-mobile, .desktop { 
    display: none;}
}

@media (min-width:1200px) and (max-width: 1699px) {
  .product-b-desktop .modulo01{
    padding: 90px 5%;
    min-height:800px;}
  .kiosk .modulo01 {
    padding: 90px 10%;}
  .product-b-desktop .banner-main-paragraph {
    font-size: 40px;
    margin-top: 0;}
  .product-b-desktop .banner-paragraph{
    font-size: 24px;}
  .product-b-desktop .modulo02{
    padding: 100px 13% 80px 13%;}
  .product-b-desktop .modulo02 .col-izq, .product-b-desktop .modulo02 h2{
    width: 100%;
    text-align: center;
    justify-content: center;}
  .product-b-desktop .mod01-buttons {
    justify-content: center;
    margin-left: 0;}
  .product-b-desktop .modulo02 .col-der{
    display: none;}
  .product-b-desktop .modulo03{
    padding: 44px 6% 100px 6%;}
  .product-b-desktop .caracteristicas h3{
    font-size: 28px;
    line-height: 32px;
    margin-top: 0;}
  .product-b-desktop .caracteristicas .flex-4-col{
    gap:12px;}
  .product-b-desktop .rectangulo-flotante .col-izq, .product-b-desktop .rectangulo-flotante .col-der{
    display:none;}
  .product-b-desktop .rectangulo-flotante .hide-sm-bg{
    display:flex;
    flex-flow: column;
    width: 100%;
    text-align: center;
    padding: 24px 5% 0 5%;}
  .product-b-desktop .rectangulo-flotante img{
    width:50%;}
  .product-b-desktop .rectangulo-flotante h2{
    font-size:55px;
    line-height: 65px;}
  .product-b-desktop .rectangulo-flotante h3{
    font-size:35px;
    line-height: 1.2;}
  .product-b-desktop .rectangulo-flotante p{
    padding-left:6%;}
  .product-b-desktop .modulo05 h2 {
    font-size: 58px;
    line-height: 1.2;
    max-width: 800px;}
  .product-b-desktop .modulo05 .col-izq {
    width: 60%;}
  .product-b-desktop .modulo05 .col-izq p{
    padding-right: 60px;}
  .product-b-desktop .modulo05 .col-der {
    width: 40%;
    align-items: center;
    display: flex;}
  .product-b-desktop .modulo05 img{
    width:100%;}
}

  @media screen and (min-width: 1700px) {
    .hide-sm-bg, .hide-this-buttons{
      display: none;}
    .proceso-buttons{
      gap: 24px;}
    .proceso-whatsapp{
    padding: 10px 24px 8px 24px !important;}
    .rectangulo-flotante .col-izq{
      width:45%;
      padding: 0 2%;}
    .rectangulo-flotante .col-der{
      width:55%;}
  }