@import "../multiple.css";


/* ------------- BANNER CENTRAL ------------- */

.banner-central{
    height: 660px;
    padding-top: 82px;
    background-image: url(../../../img/redesignOfertas/negocios/banner-negocios.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 5rem;
    position: relative;
}

.banner-central::before{
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .1);
}

.banner-central p{
    margin: 0;
}

.banner-central .container, .banner-central .row{
    height: 100%;
}

.banner-central .colInfo{
    position: initial;
}

.banner-central .firstInfo{
    transform: translateY(-5rem);
    font-weight: bold;
}
.banner-central .firstInfo .franjaBanner{
    background-color: var(--main-blue);
    color: #fff;
    padding: 8px 6px;
    font-size: 24px;
    width: fit-content;
    margin-bottom: 20px;
}
.banner-central .firstInfo .franjaBannerMobile{
  display: none;
}
.banner-central .firstInfo .mainInfo{
    margin-top: 2rem;
    font-size: 9rem;
    line-height: 1;
    text-align: center;
}
.banner-central .firstInfo .mainInfo .typeInfo{
    font-size: 40px;
    text-align: left;
    color: #FFFFFF;
    line-height: 3rem;
}
.banner-central .firstInfo .mainInfo .dto > span{
    font-size: .38em;
}
.banner-central .firstInfo .mainInfo .subTitle{
    font-size: 28px;
    text-align: left;
    color: #FFFFFF;
    font-weight: 400;
}

.banner-central .firstInfo .mainInfo .mainTitle {
  margin-bottom: 1rem;
}

.banner-central .mainForm{
    min-height: 344px;
    background-color: #fff;
    width: 414px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 20px;
    position: relative;
    top: -3rem;
}
.banner-central .mainForm .form_pp p{
    font-size: 22px;    
    font-weight: bold;
    margin-bottom: 2rem;
}
.banner-central .mainForm .input-phone{
    border: 1px solid #212529;
    height: 60px;
    width: 82%;
    text-align: center;
    font-size: 22px;    
    background-image: url(../../../img/redesignOfertas/phoneIconGris.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 1.2rem center;
    margin-bottom: 15px;
}
.banner-central .mainForm .input-phone::placeholder{
    padding-left: 10%;
}
.banner-central .mainForm .input-phone::-moz-placeholder{
    padding-left: 10%;
}
.banner-central .mainForm .input-phone::-webkit-input-placeholder{
    padding-left: 10%;
}

.banner-central .mainForm .terminos{
    margin-bottom: 20px;
}

.banner-central .mainForm .terminos input{
    transform: scale(1.3);
    margin-right: 10px;
}

.banner-central .mainForm .succes-form_pp,
.banner-central .mainForm .fail-form_pp {
  display: flex;
  flex-direction: column;
}

.banner-central .mainForm .succes-form_pp .img {
  height: 25px;
  width: 25px;
  padding: 3px;
  border-radius: 50%;
  outline: 2px solid #08A800;
  margin: auto;
  margin-bottom: 15px;
  background-size: 50%;
}

.banner-central .mainForm .fail-form_pp .img {
  height: 25px;
  width: 25px;
  padding: 3px;
  border-radius: 50%;
  outline: 2px solid #C00202;
  margin: auto;
  margin-bottom: 15px;
  background-size: 50%;
}

.banner-central .mainForm .succes-form_pp p.title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 5px;
  text-align: center;
  color: #08A800;
}
.banner-central .mainForm .fail-form_pp p.title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 5px;
  text-align: center;
  color: #C00202;
}

.banner-central .mainForm .succes-form_pp p.horario-title {
  font-weight: 800;
  margin: 15px 0;
}
.banner-central .mainForm .succes-form_pp p.horario {
  font-size: 15px;
}

.banner-central .calcBanner{
  background-color: var(--action-color);
  position: fixed;
  right: 0;
  top: 34rem;
  z-index: 100;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 16px 0 0 16px;
  width: 228px;
  height: 68px;
  font-size: 20px;
  text-align: center;
  line-height: normal;
  cursor: pointer;
}
.banner-central .calcBanner p{
  margin: 0;
  color: #fff;
}

/* ------------- FIN BANNER CENTRAL ------------- */



/* ------------- FRANJA BANNER ------------- */

.franjaBanner{
    background-color: var(--main-blue);
    color: #fff;
    text-align: center;
    font-size: 26px;
    padding: 4px 0;
}

/* ------------- FIN FRANJA BANNER ------------- */

/* ------------- SECTION IMG PROMO ------------- */

.imagen-section {
  padding-bottom: 3rem !important;
}

.imagen-section .container .img-banner-promo {
  background-image: url(../../../img/redesignOfertas/negocios/imagen-promo.webp);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  background-position: center;
  position: relative;
}

.imagen-section .container .img-banner-promo::before{
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .1);
}

.imagen-section .container .img-banner-promo .main-info-img {
  color:#FFFFFF;
  font-weight: 700;
  line-height: normal;
  font-size: 32px;
  margin: 0px;
  position: relative;
  width: 45%;
  margin-left: auto;
  padding: 3rem;
}

/* ------------- FIN SECTION IMG PROMO ------------- */

/* ------------- SECTION VENTAJAS ------------- */

section.ventajasSection{
    padding: 4rem 0;
    padding-bottom: 2.2rem;
}
.cardVentajas{
    margin: auto;
    width: 14rem;
    text-align: center;
}
.cardVentajas img{
    height: 60px;
    margin: auto;
    margin-bottom: 1.6rem;

}
.cardVentajas h3{
    width: fit-content;
    margin: auto;
    color: var(--action-color);
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 4px;
}
.cardVentajas p{
    line-height: normal;
    font-size: 16px;
}

/* ------------- FIN SECTION VENTAJAS ------------- */

  /* ------------- FAQS ------------- */

.preguntas_frecuentes{
  background-position-x: center;
  padding-top: 2rem;
  position: relative;
  padding-bottom: 2rem;
  text-align: left;
}
.preguntas_frecuentes p{
  margin: 0;
}
.preguntas_frecuentes .card-body{
text-align: left;
padding-left: 0;
}
.preguntas_frecuentes > .container:first-of-type{
  display: flex;
  justify-content: space-evenly;
}
.preguntas_frecuentes .infoFaqs{
  width: 100%;
  max-width: 28rem;
}
.preguntas_frecuentes .titleFaqs{
  width: 100%;
  margin-bottom: 1rem;
  text-align: left;
  font-size: 34px;
  font-weight: 900;    
}
.preguntas_frecuentes .titleFaqs b{
  color: var(--action-color);
}

.preguntas_frecuentes .textFaqs{
  font-size: 18px;
  line-height: 1.3;
}
.preguntas_frecuentes .faqsMainImg{
  position: relative;
  top: -2rem;
  z-index: -1;
  height: 232px;
}

.preguntas_frecuentes .btn{
  border-radius: 0;
  padding: 0;
  padding-bottom: 0.6rem;
  width: 94%;
}

.preguntas_frecuentes #preguntasFrec .box{
  margin-bottom: 2rem;
}

.offset{
  border-bottom: 2px solid #8080805e;
  border-radius: 0!important;
}
.preguntas_frecuentes .offset {
  background-color: transparent;
  width: 42rem;
  position: relative;
  max-width: 100%;
}
.preguntas_frecuentes .btn{
  border-radius: 0;
}
.preguntas_frecuentes .respuesta{
  border: 0;
}

.preguntas_frecuentes .title{
  width: 50%;
  margin: auto;
  text-align: center;
  font-size: 28px;
  padding-top: 15px;
}
.preguntas_frecuentes .title h1{
  font-weight: bold;
}
.preguntas_frecuentes .title h3{
  font-size: 22px;
}
.preguntas_frecuentes .pregunta .p3 {
  font-size: 16px;
  text-align: left;
  margin: 0;
  padding-bottom: 12px;
  display: flex;
  cursor: pointer;
}
.preguntas_frecuentes .pregunta .p3 img{
  width: 30px;
  margin-right: 10px;
}
.preguntas_frecuentes .pregunta:hover {
  text-decoration: none!important;
}

/* ------------- FIN FAQS ------------- */

/* ------------- FOOTER ------------- */

footer{
  background-color: var(--action-color);
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
footer .container, footer .row{
  height: 100%;
}
footer a{
  color: white;
  margin: 0 1rem;
  cursor: pointer;
}
footer a:hover{
  color: white;
  text-decoration: underline!important;
}

/* ------------- FIN FOOTER ------------- */

/* ------------- SECTION CALCULADORA ------------- */

.calculadoraSection {
  padding-top: 8% !important;
  padding-bottom: 2%;
  text-align: center;
  position: fixed;
  z-index: 900;
  width: 100%;
  height: 100%;
  top: 0;
  display: none;
}

.calculadora {
  background-color: #fff;
  width: 780px;
  max-width: 95%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.calculadoraSection .close-section {
  top: 0;
  background-color: #000000D9;
}

.calculadora .closeimg {
    color: var(--action-color);
    text-align: right;
    padding-right: 38px;
    font-size: 25px;
    margin-top: 0;
    position: absolute;
    z-index: 99;
}

.close-section {
  height: 100%;
  position: absolute;
  width: 100%;
  background-color: #00000099;
 }   

.calculadoraSection h2{
  margin-top: 2rem;
  margin-bottom: 6px;
}

.calculadoraSection h3.subTitle{
  font-size: 16px;
  text-align: center;
  margin: 1rem 5rem;
}
.calculadoraSection .calculadoraContainer{
  height: 19rem;
  margin: auto;
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculadoraSection .calculadoraContainer .formArea {
  width: 35rem;
}

.calculadoraSection .calculadoraContainer .formArea .progress {
  width: 100%;
  height: 15px;
  margin-bottom: 1.2rem;
  background-color: #F2F2F2
}

.calculadoraSection .calculadoraContainer .formArea .progress .bar {
  --por-val: 2%;
  width: var(--por-val);
  height: 100%;
  background-color: var(--action-color);
  line-height: 1;
  transition: width .8s ease-in-out;
  -o-transition: width .8s ease-in-out;
  -moz-transition: width .8s ease-in-out;
}
.calculadoraSection .calculadoraContainer .formArea .progress .pct {
  float: right;
  transform: translate(120%, -50%);
  top: 50%;
  position: relative;
  font-size: 14px;
}

.calculadoraSection .calculadoraContainer .formArea .inputForm{
  display: flex;
  justify-content: center;
}
.calculadoraSection .calculadoraContainer .formArea .inputForm > div:first-of-type{
  margin-right: 2rem;
  text-align: left;
}
.calculadoraSection .calculadoraContainer .formArea .inputForm label{
  font-weight: 300;
  margin-bottom: 4px;
}
.calculadoraSection .calculadoraContainer .formArea .inputForm input{
  height: 40px;
  width: 200px;
  padding-left: 6px;
  font-weight: 100;
  border: 0;
  border-radius: 4px;
  background-color: #F2F2F2;
}
.calculadoraSection .calculadoraContainer .formArea .terminos{
  cursor: pointer;
  margin-top: 1rem;
  font-size: 16px;
  font-weight: 100;
}
.calculadoraSection .calculadoraContainer .formArea .input-check{
  transform: scale(1.2);
  margin-right: 6px;
}
.calculadoraSection .calculadoraContainer .formArea .calcButton{
  padding: 12px 20px;
  margin-top: 1rem;
}  

.calculadoraSection .checkSelectCalc input[type="radio"]{
  position: absolute;
  left: -200vw;
}
.calculadoraSection .checkSelectCalc label{
  cursor: pointer;
  background-color: #fff;
  border-radius: 25px;
  color: var(--main-blue);
  text-align: center;
  padding: 5px 1.6rem;
  border: 2px solid var(--main-blue);
  font-size: 18px;
  margin-right: 1.5rem;
  transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
}
.calculadoraSection .checkSelectCalc label:hover{
  background-color: var(--main-blue);
  color: #fff;
}
.calculadoraSection .checkSelectCalc input[type="radio"]:checked + label{
  background-color: var(--main-blue);
  color: #fff;
}
.calculadoraSection .slidecontainer #myRange{
  -webkit-appearance: none;
  background: #11b1ce63;
  border-radius: 16px;
  outline: none;
  height: 15px;
  width: 100%;
}
.calculadoraSection .slidecontainer #myRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--main-blue);
  cursor: pointer;
}

.calculadoraSection .slidecontainer #myRange::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--main-blue);
  cursor: pointer;
}
.calculadoraSection .imgResult{
  width: 11rem;
  margin-bottom: 1rem;
}

/* ------------- FIN SECTION CALCULADORA ------------- */