/*Se agrega Fuentes */ 
@font-face{
	font-family:Ubuntu-Regular;
	src: url(Ubuntu-Regular.ttf);
}
@font-face{
	font-family:Ubuntu-Bold;
	src: url(Ubuntu-Bold.ttf);
}
@font-face{
	font-family:Ubuntu-Medium;
	src: url(Ubuntu-Medium.ttf);
}

@font-face{
	font-family:Ubuntu-Light;
	src: url(Ubuntu-Light.ttf);
}
@font-face{
	font-family:ArupalaGrotesk-Air;
	src: url(ArupalaGrotesk-Air.otf);
}

@font-face{
	font-family:ArupalaGrotesk-Bold;
	src: url(ArupalaGrotesk-Bold.otf);
}

@font-face{
	font-family:ArupalaGrotesk-Light;
	src: url(ArupalaGrotesk-Light.otf);
}

@font-face{
	font-family:ArupalaGrotesk-Medium;
	src: url(ArupalaGrotesk-Medium.otf);
}

@font-face{
	font-family:ArupalaGrotesk-Regular;
	src: url(ArupalaGrotesk-Regular.otf);
}

@font-face{
	font-family:ArupalaGrotesk-Ultra;
	src: url(ArupalaGrotesk-Ultra.otf);
}
/* ids */

#imageContainer {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}


/*clases*/

/* Clases MODAL */
.loader{
  position: fixed;
  top: 0;
  left: 0;
  background: #1c1643;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}



.disppear{
  animation: vanish 1s forwards;
}


@keyframes vanish {
  100%{
    opacity: 0;
    visibility: hidden;
  }
}

.degrademono{
  
                border-radius: 30px; /* radio de redondeo de 10px. Puedes ajustar este valor. */
                background-color:#7e96e3 ;
                background-image: 
  radial-gradient(circle farthest-corner at top left,#1c1643  0%, rgba(211, 231, 242, 0) 70%),
  radial-gradient(circle farthest-side at top right, #1c1643 0%, rgba(28, 22, 67, 0) 50%),
  radial-gradient(circle farthest-corner at bottom right, #ffffff 0%, rgba(126, 150, 227, 0) 33%),
   radial-gradient(circle farthest-corner at bottom left, #d3e7f2 0%, rgba(126, 150, 227, 0) 33%),
  radial-gradient(circle farthest-corner at top right, #ffffff 0%, rgba(255, 255, 255, 0) 50%),
  radial-gradient(ellipse at bottom center, #7e96e3 0%, rgba(255, 255, 255, 0) 80%);
                padding: 40px; /* espacio interno para que el contenido no esté pegado al borde */
                margin-top: 5px;
                height: 500px;

                
}

.fade-image {
  
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.fade-out {
  opacity: 0 !important;
}

.transition-image{
  opacity: 1; /* Opacidad inicial */
  transition: opacity 1s ease-in-out; /* Transición suave de 1 segundo */
  display: block;
  width: 100%;
  height: auto;

}

.diagramaimg{
padding: 10px;
text-align: center;
}



.CMODAL{
	background-color: #1c1643;
	border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 0px solid #000000;
}
.TM0{
    color: #ffffff;
  }
  .TM1{
    color: #ffffff;
  }
  .TM2{
    color: #ffffff;
    background-color:#7e96e3 ;
    padding-left: 7px;
    padding-right: 7px;
    margin-left: 6px;
    margin-right: 6px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px 20px 20px 20px;
  border: 0px solid #000000;
  
  }
  .INPUTMODAL{
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
  }
  .BOTONMODAL{
    background-color:#8C9CAF;  border-radius: 58px 58px 58px 58px;
    -moz-border-radius: 58px 58px 58px 58px;
    -webkit-border-radius: 58px 58px 58px 58px;
    border: 0px solid #000000;
  }
  /* FIN Clases MODAL */

  /* CLASES HEADER */

  

  .TextHeaderPM{
    color: white; 
    text-align: center;

  }
  
  .TextEnvHeaderPM{
    font-family:ArupalaGrotesk-Light;
    text-decoration: none; 
    color: white; 
    text-align:center;

  }

  .tex1inicio{
    font-family:ArupalaGrotesk-Regular;
    text-align: right; 
                    color: #ffffff;
                    font-size: 60px;
  }
  .tex2inicio{
                    text-align: right;
                    color: #ffffff;
                    font-size: 30px;
                    padding-left: 100px;
                  }

  .tex3inicio{
    text-align: right; 
    color: #ffffff;
    font-size: 30px;
  }    
  
  .tex1descarga{
    font-family: ArupalaGrotesk-Bold;
    color: #ffffff;
                    font-size: 30px;
                    margin-bottom: 30px;
  }
  
  .btdescarga{
    font-family:ArupalaGrotesk-Light;
    background-color: #8da6f1;
                      font-size: 30px;
                        border-radius: 20px;
                        padding: 10px;
   
  }

  .btextencion{
    font-family:ArupalaGrotesk-Light;
    background-color: #8da6f1;
                        font-size: 20px;
                        border-radius: 20px;
                        padding: 10px;
  }
  .contextencion{
    margin-top: 5px;
  }

.tex1porp{
  font-family:ArupalaGrotesk-Bold; 
                font-size: 50px;
                color: black;
}

.tex2porp{
  font-family:ArupalaGrotesk-Regular; 
                font-size: 30px;
                text-align: justify;
                color: black;
}
.conttex3porp{
  padding: 20px;
}
.tex3porp{
  font-family:ArupalaGrotesk-Regular; 
                font-size: 30px;
                text-align: justify;
                color: black;           
              border: white 3px solid;
              border-radius: 20px;
              padding: 20px;
}

.tex1cont{
  font-family:ArupalaGrotesk-Regular;
  font-size: 25px;
  padding: 10px;
  text-decoration: none;

}

.capcont{
 padding: 10px;
}

.btdesmanual{
  background-color: #1c1643;
  color: #ffffff;
  font-family:ArupalaGrotesk-Light;
  font-size: 30px;
                        border-radius: 20px;
                        padding: 20px;
   
}
.contbtdesmanual{
  padding: 20px;
  margin-top: 60px;
  margin-bottom: 60px;
}

.contenedorcaps{
  padding-left: 5px;
  padding-right: 5px;
}

.cap1porp{
  font-family:ArupalaGrotesk-Light; 
                        font-size: 25px;
                        color: white; text-align: center;
}
.cap2porp{
  font-family:ArupalaGrotesk-Light; 
                        font-size: 25px;
                        color: white; text-align: center;
}
.cap3porp{
  font-family:ArupalaGrotesk-Light; 
                        font-size: 25px;
                        color: white; text-align: center;
                        padding-top: 5px;
                        padding-bottom: 5px;
                        
}

.tex1quepodras{
  font-family:ArupalaGrotesk-Bold; 
                        font-size: 50px;
                        color: white; text-align: left;
}

.tex2quepodras{
            font-family:ArupalaGrotesk-Light; 
                        font-size: 45px;
                        color: white; text-align: center;
}




  .InFond{
     background-color:#7e96e3 ;
                background-image: 
  radial-gradient(circle farthest-corner at top left,#1c1643  0%, rgba(211, 231, 242, 0) 40%),
  radial-gradient(circle farthest-side at top right, #ffffff 0%, rgba(28, 22, 67, 0) 20%),
  radial-gradient(circle farthest-corner at bottom right, #7e96e3 0%, rgba(126, 150, 227, 0) 60%),
   radial-gradient(circle farthest-corner at bottom left, #d3e7f2 0%, rgba(126, 150, 227, 0) 50%),
  radial-gradient(circle farthest-corner at top right, #ffffff 0%, rgba(255, 255, 255, 0) 50%),
  radial-gradient(ellipse at bottom center, #7e96e3 0%, rgba(255, 255, 255, 0) 80%);
background-size:100% 100%; 
background-repeat: no-repeat; 
width: 100%; height: 100%;
margin-top: -35px; 
margin-bottom: -50px; 
  }
.contdescarga{
  border: 1px solid #ffffff; /* un borde sólido negro de 1px */
                border-radius: 30px; /* radio de redondeo de 10px. Puedes ajustar este valor. */
                padding: 100px;
                padding-left: 50px;
                padding-right: 50px;
                padding-bottom: 50px;
                margin: 50px;
                margin-top: -150px;
                margin-bottom: 100px;
}

.bordetexquepodras{
   padding: 3px 10px;
  border: white 3px solid;
  border-radius: 20px;
  padding: 20px;
}
.bordetexdescar1{
  margin-top: 0px;
   padding: 3px 10px;
  border: white 3px solid;
  border-radius: 20px;
  padding: 20px;
  background-color: #1c1643;
}

.bordetexdescar2{
   padding: 3px 10px;
  border: white 3px solid;
  border-radius: 20px;
  padding: 20px;
  background-color: #1c1643;
}


.textdescar1{
  color: white;
  font-size: 25px;
  text-align: center;
  font-family:ArupalaGrotesk-Regular; 
}
.textdescar2{
  color: white;
  font-size: 21px;
  text-align: center;
  font-family:ArupalaGrotesk-Regular; 
}

.contcontacto{
  margin-top: 20px;
}
  .ImgFondCont{
    
     background-color:#7e96e3 ;
                background-image: 
  radial-gradient(circle farthest-corner at top left,#1c1643  0%, rgba(211, 231, 242, 0) 70%),
  radial-gradient(circle farthest-side at top right, #ffffff 0%, rgba(28, 22, 67, 0) 20%),
  radial-gradient(circle farthest-corner at bottom right, #ffffff 0%, rgba(126, 150, 227, 0) 33%),
   radial-gradient(circle farthest-corner at bottom left, #d3e7f2 0%, rgba(126, 150, 227, 0) 33%),
  radial-gradient(circle farthest-corner at top right, #ffffff 0%, rgba(255, 255, 255, 0) 50%),
  radial-gradient(ellipse at bottom center, #7e96e3 0%, rgba(255, 255, 255, 0) 80%);
    background-size:100% 100%; 
background-repeat: no-repeat; 
width: 100%; height: 100%;
    text-align: center;
    border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 70px 70px 0px 0px;
    -webkit-border-radius: 70px 70px 0px 0px;
    border: 0px solid #000000;
    margin-top: -90px;
  position: relative;
    z-index:3;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
    margin-top: -170px;

    padding-bottom:50px;
  }

  .ImgFonDes{
    background-color: #1c1643;
      background-size:100% 100%; 
      background-repeat: no-repeat; 
      width: 100%; height: 100%;
      
      
      border-radius: 0px 60px 0px 60px;
      -moz-border-radius: 0px 60px 0px 60px;
      -webkit-border-radius: 0px 60px 0px 60px;
      border: 0px solid #000000;
      position: relative;
      margin-top: -300;
        z-index:3;

 -webkit-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
  }

  .fondoquepodras{
    background-color: #1c1643;
      background-size:100% 100%; 
      background-repeat: no-repeat; 
      width: 100%; height: 100%;
      padding-top: 100px;
      padding-bottom: 200px;
      
  }
  .FFooter{
    background-color:#d7e4f2; 
    z-index: 4;
  }

  .ImgFonVideo{
    background-color: #232323;
               margin-top: -100px;   
  }

  .TB1{
    font-family:Ubuntu-Bold;
  }
  .TB01{
    font-family:Ubuntu-Bold;
  }
  .TB010{
    font-family:Ubuntu-Regular;
  }
  .TB0101{
    font-family:Ubuntu-Regular;
    font-size:25px;
    margin-left: 900px;
    margin-right: 0px;
    margin-top: 15px;
  }
  .Caja_img{
    margin-top: 15px;
  }
  .TB2{
    font-family:Ubuntu-Regular;
    
  }
  .TC{
    font-family:ArupalaGrotesk-Bold; 
    font-size: 50px;
  }

  .TCC{
    font-family:ArupalaGrotesk-Regular; 
    font-size: 25px;
  }

  .TV{
    font-family:Ubuntu-Bold; 
    font-size: 100px;
  }

  .CTF{
    font-family:Ubuntu-Medium; 
    font-size: 28px;
    text-decoration: none;
  }

  .imginsta{
    width: 129px;
    height: 129px;
  }

  .NBS{
    background-color: #8da6f1;
    color: white;
     border-radius: 0px 0px 50px 50px;
          -moz-border-radius: 0px 0px 40px 40px;
          -webkit-border-radius: 0px 0px 40px 40px;
          border: 0px solid #000000; z-index: 500;
          -webkit-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 9px 1px rgba(0,0,0,0.75);
  }

  .LNV{
    background-color: white; 
    border-radius: 0px 50px 0px 50px;
-moz-border-radius: 0px 50px 0px 50px;
-webkit-border-radius: 0px 50px 0px 50px;
border: 0px solid #000000;
              padding-right: 50px;
              padding-left: 50px;
              margin-top: -8px;
              margin-bottom: -8px;
              margin-left: -23px;
  }

  .LNV1{
    background-color: white; 
    border-radius: 0px 25px 0px 25px;
-moz-border-radius: 0px 25px 0px 25px;
-webkit-border-radius: 0px 25px 0px 25px;
border: 0px solid #000000;
              padding-right: 50px;
              padding-left: 50px;
              padding-top: 15px;
              padding-bottom: 15px;
              margin-top: -8px;
              margin-bottom: -8px;
              margin-left: -23px;
  }





 

 .Capsula{
   background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(179,179,179,1) 100%);
                  background-size:contain;
                    border-radius: 50px 50px 50px 50px;
                    -moz-border-radius: 50px 50px 50px 50px;
                    -webkit-border-radius: 50px 50px 50px 50px;
                    border: 0px solid #000000;
                    text-align: center;
                    font-family:Ubuntu-Regular; 
                    font-size: 25px;
                    margin-bottom: 25px;
                    line-height:110%;
                    padding-left: 10px;
                    padding-right: 10px;
                    padding-top: 10px;
                    padding-bottom: 10px;
 }

 a {
  color: inherit;
}

#navbar {
  color: white;
 
}



/* --- --- carousel --- --- */
.carousel__contenedor{
  position: relative;
}

.carousel__anterior,
.carousel__siguiente {
  position: absolute;
  display: block;
  width: 30px;
  height: 30px;
  border: none;
  top: calc(50% -35px);
  cursor: pointer;
  line-height: 30px;
  text-align: center;
  background: none;
  color: #ffffff;
  opacity: 20%;
}