/*==============================
            GENERALES
==============================*/


html{
  scroll-behavior: smooth;
}

*{
  transition: .5s;
}

.px-mobile{
  padding:0 10px;
}

@media(min-width:768px){
  .px-mobile{
      padding:0;
  } 
}

/*==============================
          FUENTES
==============================*/

@font-face {
  font-family: 'poppinsbold';
  src: url('../fonts/poppins-bold-webfont.woff2') format('woff2'),
       url('../fonts/poppins-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'poppinsmedium';
  src: url('../fonts/poppins-medium-webfont.woff2') format('woff2'),
       url('../fonts/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

*{
  font-family: 'poppinsmedium';
}

.titulos{
  font-size: 1.4rem !important;
  font-weight:400;
}

@media(min-width:992px){
  .titulos{font-size: 1.5rem !important}
}

/*==============================
          BOTONES
==============================*/
.btn-grad-red{
  text-decoration: none;
  background: #B31983;
  color: white;
  padding: 10px 20px;
  border-radius: 100px;
  letter-spacing: 2px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  line-height: 100%;
  height:36px;
  margin-top:10px;
}


.btn-grad-red:hover{
  background-color:#c70552;
  color:white;
      border:none;
}


#formulario button.btn-grad-red{
  text-align:center;
  margin: 20px auto;
  display:block;
}

.btn-grad-blue{
  background: linear-gradient(180deg, #7A2EFC 0%, #0477FF 100%);
  font-size:15px;
  padding:5px 20px ;
  border-radius: 26.3721px;
  color:white;
  text-decoration:none;
  display:inline-block;
  transition: all 1.5s;
  display:none;
}

.btn-vermas{
  color:#003A5D;
  font-family: 'poppinsbold';
  font-size:15px ;
  padding:5px 20px ;
  border-radius: 27px;
  border: 1px solid #003A5D;
  text-decoration:none;
  margin-top:10px;
  display:inline-block;
  transition: all .5s;
}

.plan-rojo .btn-vermas{
  border-color: #B31983;
  color:#B31983;;
}


.plan-rojo .btn-vermas:hover{
  background-color: #B31983;
  color:white ;
}

.plan-azul .btn-vermas:hover{
  background-color: #003A5D;
  color:white ;
} 

a.btn-grad-red:active, 
a.btn-grad-blue:active,
a.btn-grad-red:hover,
a.btn-grad-blue:hover{
  color:white !important;
}

#btn-slider:hover, 
#btn-header:hover, 
#btn-demo:hover{
  color: white !important;
}
#btn-demo{
  margin-top:20px;
  margin-bottom:0;
}

@media(min-width:1024px){
  #logo-img{
      min-height:40px;
  }

  .btn-grad-blue, .btn-vermas{
      padding:10px 30px;
      border-radius:40px;
  }

  .btn-grad-blue:hover{
      color:white;
      background:linear-gradient(180deg, #6127C5 0%, #076ADF 100%);
  }


  .btn-demo{
      font-size:15px;
  }
}



/*==============================
          HEADER
==============================*/

#top{
  background-color: #FFFFFF;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  min-height:50px;
}

#logo-img{
  width: 200px;
  height: auto;
}

@media (max-width: 479px){
  #logo-img {
      width: 155px;
  }
}

.animate__pulse{
  animation-duration: 2s;
}

/*==============================
      COLOR DEL TEXTO
==============================*/
.txt-gris{color:#6B6969;}
.txt-azul{color:#003A5D;}

/*==============================
          SLIDER
==============================*/

#slider{
  margin:2rem 0;
  text-align:center;
}

.slider-bajada{
  color:#D90559;
  font-size:20px;
  font-family: 'poppinsbold';
  margin:0;
}

.slider-titulo{
  color: #003A5D;
  font-size:40px;
  line-height:110%;
  font-family: 'poppinsbold';
  margin:0;
}

.slider__small{
  font-size: 32px;
}

.slider-titulo + p{
  color:white;
  font-size:1.25rem;
  line-height:110%;
  background-color: #B31983;
  padding:5px 10px;
  font-family: 'poppinsbold';
  margin:0;
  width:fit-content;
}

.slider-titulo + p + p{
  font-family: 'poppinsmedium';
  font-size: .875rem;
  line-height:120%;
  color:#6B6969;
  margin:0;
}

#slider img{
  animation-duration: 2s;
}






.slider-contenedortxt{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  margin-bottom:1.25rem;
}

#btn-form{
  margin-top: .625rem;
}

#btn-form:hover{
  background-color: #8E1468;
}

@media (min-width:768px){
  .slider-contenedortxt{
      align-items:flex-start
  }

  .slider-contenedortxt p + p{
      align-items:flex-start;
  }

  .slider-titulo{
      text-align:left;
  }

}

@media(min-width:992px){
  #slider{
      text-align:left;
  }

  .slider-bajada{
      font-size:1.25rem;
  }

  .slider-titulo{
      font-size:4rem;
      line-height:100%;
  }

  .slider-titulo + p{
      display:inline-block;
      font-size:1.5rem;
      padding:10px 20px;
      line-height:100%
  }

  .slider-titulo + p + p{
      font-size:.875rem;
  }

  #slider-img{
      max-height:500px;
      width:auto;
  }

  .slider__small{
      font-size: 3.2rem;
  }
}

@media screen and (min-width:1200px){

}

/*==============================
      HIGHLIGHTS
==============================*/

#highlights{
  margin:10px 0;
}



.high{
  font-family: 'poppinsbold' !important;
  background: #FFFFFF;
  /*box-shadow: 0px 0px 4px 6px rgba(107, 23, 236, 0.18);
  box-shadow: 0 2px 2px #ccc;*/
  box-shadow: 0 0px 4px rgba(107, 23, 236, 0.18);
  border-radius: 17px;
  text-align:center;
  color: #D90559;
  padding:25px 50px;
  margin-bottom:25px;
  margin-left:1.2rem;
  margin-right:1.2rem;
}

.high h2{
  font-size: 22px;
  font-weight:500;
}

.high img{
  margin-bottom:10px;
  min-height:35px;
  max-height:40px;
}

#highlights:target { 
  margin-top:120px !important;
}

@media(min-width:768px){
  .high h2{
      font-size: 1.5rem;
      margin-top:10px;
      line-height:120%;
  }

  
}

/*==============================
      BENEFICIOS
==============================*/
#beneficios{
  margin:2rem 0;
}

#beneficios img{
  max-height:none !important;
}


#beneficios h2{
  margin: 15px 0;
  text-align:center;
  font-weight: 500;
  font-size:1.15rem;
}

#beneficios p{
  display:inline-block;
  font-family: 'poppinsmedium';
  font-size:14px;
  font-weight:500;
  background: url('../img/check-icon.png') no-repeat left center;
  padding: 5px 0px 5px 35px;
  background-size:24px;
  margin:0;
}

@media(min-width:1024px){
  #beneficios h2{
      text-align:left;
  }

  #beneficios p{
      font-size: 1,5rem;
      background-position: center left;
  }
}


.beneficios__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:5px;
  flex-direction:column;
  width:fit-content;
}

.beneficios__list li{
  width:fit-content;
}

.beneficios__txt{
  display:flex;
  align-items:center;
  flex-direction:column;
}

@media screen and (min-width:992px){
  #beneficios h2{
      text-align:left;
  }

  .beneficios__list, .beneficios__list li{
      width: 100%;
  }

  .beneficios__txt{
      align-items:flex-start;
  }
}

#beneficios .container .row:nth-child(2) {
  margin-top: 2rem;
}


/*==============================
      COMO FUNCIONA
==============================*/

#comofunciona .container{
  background: linear-gradient(90deg, #4D1593 0%, #DA126A 100%);
  color:white;
  padding: 45px 20px;
}

#comofunciona h2{
  font-size:22px;
  font-family: 'poppinsbold';
  margin-bottom:30px;
  text-align:center
}

#comofunciona h3{
  font-size: 20px;
  font-family: 'poppinsbold';
  margin-bottom:10px;
  background:url('../img/num_01.svg') no-repeat center left;
  padding:10px 0;
  padding-left:45px;
  background-size: 35px;
}

.dos{background-image:url('../img/num_02.svg') !important;}
.tres{background-image:url('../img/num_03.svg') !important;}


#comofunciona p{
  font-size:1rem;
  font-family: 'poppinsmedium';
  font-weight: lighter;
  margin-bottom:20px;
}

@media(min-width:992px){

  #comofunciona{
      margin: 45px 0;
  }

  #comofunciona .container{
      border-radius: 20px;
      padding:40px;
  }

  #comofunciona h2{
      font-size:2.2rem;
      margin:0;
      text-align:center;
      margin-left:1rem;
  }

  #comofunciona p{
      font-size:.9rem;
      margin-bottom:0px;
  }
}

@media(min-width:992px){
  .g-lg-3, .gx-lg-3{
  --bs-gutter-x:5rem;
  }
}

/*==============================
          PLANES
==============================*/

#planes{
  margin: 40px 0;
  text-align:center;
}

#planes h2{
  color:#003A5D;
  font-size:27px;
  line-height:34.56px;
  font-family: 'poppinsbold';
}

#planes h2 + p {
  color: #6B6969;
  font-size:1rem;
}

.plan{
  background: #FFFFFF;
  box-shadow: 0px 0px 2.37995px 3.56992px rgba(107, 23, 236, 0.18);
  border-radius: 12.5158px;
  margin:20px 0;
  padding:20px 20px;
  position:relative;
}

.plan-descuento{
  border-radius: 20.4804px;
  color:white;
  display:inline-block;
  padding:10px 45px;
  position:absolute;
  top:-22px;
  left:calc(50% - 128px);
  margin:0;
}

div.plan-azul  p.plan-descuento{
  background: linear-gradient(180deg, #7A2EFC 0%, #0477FF 100%);
}

div.plan-rojo  p.plan-descuento{
  background: linear-gradient(180deg, #D30556 0%, #FF0468 100%);
}

.plan{
  transition: all 1s;
}

.plan h3{
  font-size:20px;
  font-weight: bold;
  font-family: 'poppinsbold';
  margin-top:20px;
}

.plan h3 + p{
  color: #003A5D;
  font-size:46px;
  font-family: 'poppinsbold';
  font-weight:700;
  margin-bottom:0px;
  line-height:68.76px;
}

.plan-rojo h3 + p{
  color: #B31983;
}

.plan h3 + p + p{
  color: #80868B;
  font-family: 'poppinsmedium';
  border-bottom: #80868B 1px solid;
  margin-bottom:20px;
  padding-bottom:20px;
}

.plan ul {
  list-style: none;
  margin:0;
  padding:0;
}

.plan ul li{
  font-size:14px;
  color: #6B6969;
  font-family: 'poppinsmedium';
  margin-bottom:15px;
}

.plan ul li.destacado{
  color: #003A5D;
  font-family: 'poppinsbold';
}

.plan-rojo ul li.destacado{
  color: #B31983;
}

.lista-vermas{
  padding:10px 5px;
  margin:10px 0;
  border-top: 1px solid #80868B;
}

.lista-vermas h4{
  color:#003A5D;
  margin:15px 0;
  font-family:'poppinsbold';
  border-radius:20px;
  display:inline-block;
  font-size:1.2rem;
}


.plan-rojo .lista-vermas h4{
  color:#D90559;
}

@media(min-width:1024px){
  #planes h2{
      margin-top:45px;
  }

  #planes h2 + p{
      margin-bottom:45px;
  }


  .plan li{
      font-size:1,5rem;
  }
}


.plan-close{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

.plan-open{
  max-height: 1000px;
  overflow: visible;
  opacity: 1;
}

/*==============================
      FORMULARIO
==============================*/

#formulario{
  background:url('../img/fondo-form-01-02.png') no-repeat center center;
  background-size: cover;
  padding:40px 0;
}

#formulario h2{
  color:white;
  text-align:center;
  font-size: 28px;
  font-family: 'poppinsbold';
  margin-bottom:30px;
}

.input, #formulario textarea{
  background-color: transparent;
  border:1px solid white;
  border-radius: 0 !important;
  color:white;
  font-size:15px;
  margin-bottom:20px;
}



#formulario ::placeholder{
  color:white;
  font-family: 'poppinsmedium';
}

.form-control{
  margin-top:10px;
  margin-bottom: 5px !important;
}

.error-txt{
  margin-top: 0;
  font-size: .8em;
  background-color: #c00;
  color: white;
  padding: 5px 10px;
  display:none;
}

.is-invalid{
  border: 2px solid red !important;
}

@media(min-width:1024px){
  #formulario{
      padding:45px 0;
      padding-bottom:10px;
  }
}

/*==============================
          CONTACTO
==============================*/

#contacto  div.telefonos {
 color:white;
 background: royalblue;
}

#contacto h2{
  font-size: 1.8rem;
  text-align:center;
  font-family: 'poppinsbold';
}

#contacto a{
  background: url('../img/icon-phone.svg') no-repeat left center;
  background-size:30px 30px;
  display:inline-block;
  padding:10px 0;
  padding-left: 35px !important;
  margin:0px auto;
  text-align:center;
  color:white;
  text-decoration:none;
}

#telefono1{
  background-image: url('../img/icon-phone.svg') !important;
}

#telefono2{
  background-image: url('../img/icon-whatsapp.svg') !important;
}

@media(min-width:768px){



  #contacto h2{
      font-family: 'poppinsbold';
      text-align:center;
      font-size: 1.3rem;  
  }

  #contacto a{
      margin:0 auto;
      font-size:15px;
      padding-left:25px;
      text-align:left;
      background-position: center left;
  }

  #contacto.gracias{
      background:none;
      margin-bottom:20px;
  }

  #contacto div.telefonos{
      border-radius: 20px;
  }
  
  
  
}

/*==============================
          FOOTER
==============================*/

#bottom{
  margin:10px auto;
  text-align:center;
}


#bottom img{
  display:block;
  min-width:150px;
  margin: 0 auto;
}

.terminos{
  color:#6B6969;
  font-family: 'poppinsmedium';
  font-size:11px !important;
  text-align:center;
  text-decoration:none;
}

#logo-footer{
  max-height:30px;
}

@media(min-width:768px){
  #bottom{margin-top:20px;}
  #bottom.gracias{
      margin-top:0px !important;
  }
  
}

/*==============================
          BTN-WHATSAPP
==============================*/

body{
  position:relative;
}

#btn-whatsapp{
  background: url('../img/btnwhatsapp-icon.png') no-repeat center center #0D9F16;
  position:fixed;
  bottom:20px;
  right:20px;
  width:50px;
  height:50px;
  overflow: hidden;
  text-indent: -1000px;
  border-radius:100%;
  box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

@media(min-width:1024px){
  #btn-whatsapp{
      width:75px;
      height:75px;
      background-size:30px;
  }
}


/*==============================
          GRACIAS
==============================*/

#gracias, #error{
  padding: 2.5rem 0 0;
}


#gracias h1, #error h1{
  color:#00B881;
  font-size:3rem;
  font-family: 'poppinsbold';
}

#error h1{
  color:red;
}

.img-gracias{
  width:100px;
}



/* NUEVO */
.slider-form{
  background-color:rgba(250, 250, 250, 0.95);
  padding:20px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.50);
}

.form-control{
  border-radius:0 !important;
}

/* CACINAB */

.cacinab{
  margin:2rem auto;
  padding:0 10px;
}

.cacinab__container{
  padding:20px;
  background-color: #D9DADB;
  display: flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
}

.cacinab__descuento{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.cacinab__descuento p{
  margin:0;
  padding:0;
}

.cacinab__porcentaje{
  font-size: 37px;
  font-weight:800;
  line-height:100%;
}



.cacinab__descuento-txt{
  font-weight:800;
}

.cacinab__underline{
  text-decoration:underline;
}

.cacinab__txt-destacado{
  font-weight:700;
}

.cacinab__info{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:15px;
  justify-content:center;
}

.cacinab__txt{
  margin:0;
  padding:0;
  font-weight:400;
  font-size:.875rem;
}

@media (min-width:640px){
  .cacinab__container{
      flex-direction:row;
      gap:1rem;
      align-items:center;
      max-width: 650px;
  }

  .cacinab__img{
      padding:0 2rem;
  }

  .cacinab__info{
      align-items:flex-start;
      gap:5px;
  }

  .cacinab{
      display:flex;
      justify-content:center;
      align-items:center;
  }
  
  
}


@media (min-width:992px){
  .cacinab__container{
      max-width: 700px;
      gap:2.5rem;
  }

  .cacinab__txt{
      font-size:.875rem;
  }

  .cacinab__picture{
      padding:0 1.25rem;
  }

  .cacinab__porcentaje{
      font-size: 37px;
      margin-top:5px !important;
  }

  .cacinab__descuento-txt{
      font-size: 1.5rem;
  }
}


/* CONTACT */

.divisor{
  background: url("https://www.grupotodo.com.ar/wp-content/uploads/2021/04/linea-gt.svg");
  background-image: url(https://www.grupotodo.com.ar/wp-content/uploads/2021/04/linea-gt.svg);
  background-size: cover;
  width: 100%;
  max-width: 1200px;
  height:20px;
  margin-bottom:2rem;
  margin-left:auto;
  margin-right: auto;
}

.contact__container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  gap:15px;
  margin-bottom:20px;
}

.contact__services{
  display: flex;
  justify-content: center;
  align-items: center;
  list-style:none;
  padding:.3125rem .625rem;
  margin:0;
  background: #0063A6;
  gap: .625rem;
}

.contact__services li{
  font-weight:800;
  color: #FFF;
  margin:0;
  font-size:.75rem;
  line-height:.75rem;
  text-align:center;
  text-transform:uppercase;
}



.contact__title{
  font-size:3rem;
  line-height:100%;
  font-weight:800;
  color: #0063A6;
  text-transform:uppercase;
  text-align:center;
  margin:0;
} 

.contact__services li:nth-child(2){
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  padding:0 10px;
}

@media (max-width:405px){

  .contact__title{
      font-size: 2.4rem;
  }

  .contact__services li{
      font-size: .625rem;
  }
}



@media screen and (min-width:640px){
  .contact__title{
      font-size:3rem;
      margin:0;
  }
}

.contact__telefonos{
  display:flex;
  justify-content:center;
  align-items:center;
  column-gap:20px;
  flex-wrap:wrap;
  row-gap:10px;
}

.contact__telefono{
  text-decoration:none;
  background: #B31983;
  color:white;
  padding:10px 20px;
  border-radius:100px;
  letter-spacing: 2px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 1rem;
  line-height:100%;
  }
  
  #telefono1, #telefono2{
      background-image: none !important;
  }

.contact__telefono-icon{
  height:1rem;
  width:1rem;
}

.contact__telefono:hover{
  color:white;
}

.contact__redes{
  display:flex;
  justify-content:center;
  list-style:none;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
}

.contact__red a{
  color:#0063A6;
  font-weight:500;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
}



.contact__icon-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: #0063A6;
  border-radius:100px;
  height: 30px;
  width:30px;
}

.contact__icon{
  height:18px;
  width:18px;
}

@media screen and (min-width:768px){

  .contact{
      width:80%;
      margin-left:auto;
      margin-right: auto;
  }

  .contact__redes .contact__red:nth-child(2){
      border-left: 1px solid #0063A6;
      border-right: 1px solid #0063A6;
      padding:0 10px;
  }

  .contact__redes{
      flex-direction:row;
      gap:10px;
  }

}

.btn-back{
  text-decoration: none;
  background: #0063A6;
  color: white;
  padding: 10px 20px;
  border-radius: 100px;
  letter-spacing: 2px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  line-height: 100%;
  height: 36px;
  margin: 1rem 0;
  text-align:center;
  width:fit-content;
  margin-left: auto;
  margin-right: auto;
}

.btn-back:hover{
  color:white;
}

#landing-form .input-alert {
  display: flex;
  align-items: center;
  gap: .3125rem;
  font-size: .75rem;
  color: #C00;
  margin-bottom: .3125rem;
  flex-wrap: nowrap;
  text-align: left;
  justify-content: flex-start;
}

#landing-form label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#landing-form .form-group{
margin:0;
}

#btn-form {
  font-weight: 700;
  border-radius: 100px;
  padding: 10px 20px;
  display: flex;
}

#landing-form .input--error {
  color: #721c24;
  background-color: #f8d7da;
  border: #f5c6cb 2px solid;
}


/* PRESENCIA ONLINE */

.presencia{
  margin-bottom: 1rem;
}

.presencia__titulo{
  margin: 15px 0;
  text-align:center;
  color: #003A5D;
  font-size: 24px;
  line-height: 110%;
  font-family: 'poppinsbold';
}


.presencia__texto{
  color: white;
    font-size: 1.1rem;
    line-height: 110%;
    background-color: #B31983;
    padding: 5px 10px;
    margin: 0 auto;
    width: fit-content;
}


/* Modal */

    .modal {
        display: flex;
        justify-content:center;
        align-items:flex-start;
        padding-top:75px;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
        background-color: #fefefe;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 500px;
        text-align: center;
        position:relative;
        justify-content:center;
        align-items:center;
        
        transition: all .5s;
        animation: entrada 1s;
    }

    @keyframes entrada{
        0%{
            transform: scale(.95);
        }
        100%{
            transform: scale(1);
        }
    }


    .close {
        color: #aaa;
        position:absolute;
        top:20px;
        right:20px;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .img-gracias {
        width: 100px;
        margin-bottom: 5px;
    }

    .btn-back {
        text-decoration: none;
        background: #B31983;
        color: white;
        padding: 10px 20px;
        border-radius: 100px;
        letter-spacing: 2px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
        line-height: 100%;
        height: 36px;
    }

    .btn-back:hover{
        text-decoration:none;
        background-color: #8E1468;
    }

    .modal__text{
        color: #6B6969;
        font-size: 0.875rem;
        margin-bottom:5px;
    }

    .modal__title{
        color: #00B881;
        font-size: 1.75rem;
        font-weight:600;
        margin:0;
        margin-top:10px;
    }