@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
    font-family: 'raspoutine';
    src: url('../fuentes/raspoutinedemibold_tb-webfont.woff2') format('woff2'),
         url('../fuentes/raspoutinedemibold_tb-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.raleway-<uniquifier> {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


.red-hat-display-<uniquifier> {
  font-family: "Red Hat Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}



body{ padding: 0;
      margin: 0;
      overflow-x: hidden;}

*{ box-sizing: border-box; }


.clear{ clear: both; }




/* preloaderrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr*/
.preloader{ width: 100%;
            height: 100%;
            background: #000;
            position: fixed;
            z-index: 100000 }


.preloader-wrapp{ position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translateX(-50%)
                  translateY(-50%)}

.preloader-wrapp:after{ content: "Cargando...";position: absolute;
                        font-family: Raleway;
                        font-weight: 500;
                        font-size: 15px;
                        color: #0060FF;
                        bottom: -20px;
                        left: 50%;
                        transform: translateX(-50%);}





.icon-spinner10{ font-size: 50px;
                 color: #0060FF;
                 animation: animacion 1.5s infinite linear }


@keyframes animacion {
 
  100%{ transform: rotate(360deg);}

}





/*botonn arribaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/

.arriba{ width: 50px;
         height: 50px;
         border-radius: 50%;
         background: #6a00b5;
         position: fixed;
         left:20px;
         bottom:30px;
         cursor: pointer;
         z-index: 3;
         box-shadow: 0px 2px 3px 1px #111}


.arriba .icon-chevron-up1{ color: #fff;
                           position: absolute;
                           top: 50%;
                           left: 50%;
                           transform: translateX(-50%)
                           translateY(-50%);
                           font-size: 20px}

.arriba:hover{ background: #0060ff;}







.wrapp{ max-width: 1300px;
        margin: 0 auto}






/*portadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
#portada{ width: 100%;
          height: 100vh;
          position: relative;
          overflow: hidden;}

/*videooooooooooooooooooo*/
video{ min-width: 100%;
       min-height:100%;
       position: absolute;
       top: 50%;
       left: 50%;
       z-index: -1;
       transform: translateX(-50%) translateY(-50%);
       filter: grayscale(1);}


/*portadaaaaaaaaaaaaaaaa*/
.portada{ width: 100%;
          height: 100vh;
          background: rgba(0,0,0,.8);
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;}

/*textoo al centroooo*/
.portada-texto{ width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%)
                translateY(-50%);
                text-align: center;}       

.portada-texto h1{ color: #fff;
                   font-size: 100px;
                   line-height: 100px;
                   margin: 0}

.portada-texto h1 span{ color: #007ded;}

.portada-texto h2{ font-family:Raleway;
                    font-weight: 700;
                   color: #fff;
                   font-size: 22px;
                   margin: 10px 0px 0px 0px;
                   line-height: 20px}

.portada-texto h2 span{ color: #00aaff }



.portada-texto h3{ font-family:Raleway;
                   font-weight: 700;
                   color: #fff;
                   font-size: 20px;
                   margin:10px 0px 10px 0px;
                   display: inline-block;}

/*banderaaaa peruuuu*/
.bandera{ border:2px solid#fff;
          display: inline-block;
          width: 45px;
          height: 25px;
          position: relative;
          background-color: #ff0000}

.bandera:before{ content: "";
                 width:15px;
                 height:100%;
                 background-color: #fff;
                 position: absolute;
                 top: 0;
                 left: 50%;
                 transform: translateX(-50%);}




/*botonnn*/
.portada-texto a{ text-decoration: none; }

.portada-boton{ width: 180px;
                height: 50px;
                background:#0057bf;
                cursor: pointer;
                margin: 10px auto 0px auto;
                border-radius: 5px}

.portada-boton p{ font-family:Raleway;
                  font-size: 15px;
                  color: #fff;
                  line-height: 50px;
                  font-weight: 700;
                  margin: 0}

.portada-boton:hover{background:#0ed825}
















/*saludoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
#saludo{ width: 100%;
         padding: 0px 20px 0px 20px;
         position: relative;
         height: 500px;}

#saludo:before{ content: "";
                background: #247dff;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 120px;
                z-index: -1

                 }


/*imagennn mascotaaaaaaaaa*/
.saludo-mascota{ width: 50%;
                 float: left;
                 text-align: center;}

.saludo-mascota img{ width: 100%;
                     max-width: 450px;}




/*textoooooooooooooooooooooo*/
.saludo-texto{ width: 50%;
               float: left;
               padding: 70px 0px 0px 0px}

.saludo-texto h1{ font-family: raspoutine;
                  font-weight: 500;
                  font-size: 40px;
                  color: #fff;
                  margin: 0}

.saludo-texto h2{ font-family: raspoutine;
                  font-weight: 500;
                  font-size: 60px;
                  color: #247dff;
                  margin: 0}

.saludo-texto h3{ font-family: Raleway;
                  font-size: 16px;
                  color: #247dff;
                  margin: 0;
                  line-height: 25px;
                  font-weight: 700}

.saludo-texto h3 span{background: #247dff;
                      color: #fff;
                      border-radius: 50px;
                      padding: 5px 10px 5px 10px;
                      display: inline-block;}

.saludo-texto p{ font-family: Raleway;
                 font-size: 14px;
                 color: #222;
                 margin: 5px 0px 0px 0px;
                 text-align: justify;}

.saludo-texto h4 { font-family: Raleway;
                   font-size: 15px;
                   color: #222;
                   margin: 10px 0px 0px 0px;
                   font-weight: 700;
                   transform: skew(-10deg);}

.saludo-texto h4 span{ color: #247dff; }









/* preguntasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */

#preguntas{ width: 100%;
            margin:0px 0px 50px 0px;}

.pregunta{ width: 50%;
           float: left;
           padding: 50px 0px 50px 0px;
           position: relative;}

/*img de atrassssss*/
.pregunta-img{ position: absolute;
               z-index: -1;
               top: 50%;
               left: 50%;
               transform: translateX(-50%)translateY(-50%);}

/*preguntaaa 111111*/
.pregunta-forma{ width: 80%;
                 border-radius: 0px 50px 50px 0px;
                 background: rgba(0,96,255,.9);
                 position: relative;
                 text-align: center;
                 padding: 20px;
                 margin: 0 auto}

.pregunta-forma h1{ font-family: Raleway;
                    font-weight: 700;
                    font-size: 20px;
                    color: #fff;
                    margin: 0px 0px 5px 0px;}

.pregunta-forma p{ font-family: Raleway;
                    font-size: 14.5px;
                    line-height: 20px;
                    color: #fff;
                    margin: 0;
                    text-align: justify;}

/*numerooooo*/
.pregunta-forma-numero{ position: absolute;
                        width: 50px;
                        height: 50px;
                        background: #0060ff;
                        border-radius: 50%;
                        top: -25px;
                        left:-25px;
                        text-align: center;
                        border:4px solid#fff;}

.pregunta-forma-numero h2{ font-family: Red Hat Display;
                           font-weight: 800;
                           font-size: 14.5px;
                           color: #fff;
                           margin: 0;
                           line-height: 45px;}



/*preguntaaa 222222222222*/
.pregunta-forma2{ width: 80%;
                 border-radius: 0px 50px 50px 0px;
                 background: rgba(255,255,255,.9);
                 position: relative;
                 text-align: center;
                 padding: 20px;
                 margin: 0 auto;
                 border:4px solid#0060ff;}

.pregunta-forma2 h1{ font-family: Raleway;
                    font-weight: 700;
                    font-size: 20px;
                    color: #0060ff;
                    margin: 0px 0px 5px 0px;}

.pregunta-forma2 p{ font-family: Raleway;
                    font-size: 14.5px;
                    line-height: 20px;
                    color: #0060ff;
                    margin: 0;
                    text-align: justify;}

/*numerooooo*/
.pregunta-forma2-numero{ position: absolute;
                        width: 50px;
                        height: 50px;
                        background: #fff;
                        border-radius: 50%;
                        top: -25px;
                        left:-25px;
                        text-align: center;
                        border:4px solid#0060ff;}

.pregunta-forma2-numero h2{ font-family: Red Hat Display;
                            font-weight: 800;
                            font-size: 14.5px;
                            color: #0060ff;
                            margin: 0;
                            line-height: 45px;}







/*webbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*/

#web{ width: 100%;
      background: #0060ff;
      position: relative;
      padding: 50px 20px 100px 20px}

/*ondas arribaaaaaaaa*/
.onda-arriba{ background: url(../img/vector-web.png);
              position: absolute;
              top: -50px;
              left: 0;
              width: 100%;
              height: 60px;}


/*ondas abajooooooooo*/
.onda-abajo{ background: url(../img/vector2-web.png);
              position: absolute;
              bottom: -50px;
              left: 0;
              width: 100%;
              height: 60px;
              z-index: -1}


/*tituloooooooooooooooo*/
.web-titulo{ width: 100%;
             text-align: center;
             margin: 0px 0px 30px 0px}

.web-titulo h1{ font-family: Raleway;
                font-size: 20px;
                color: #fff;
                margin: 0 }

.web-titulo h1 span{ border-radius: 50%;
                     padding:13px 17px 13px 17px;
                     color: #fff;
                     font-family: Red Hat Display;
                     font-size: 14px;
                     margin:0px 10px 0px 0px;
                     border:4px solid#fff;}


/*infooooooooooooooooooooo*/
.web-info{ width: 100%;
           display: grid;
           grid-gap: 40px;
           grid-template-columns: repeat(3,1fr);}

.web-info-caja{text-align: center;}

.web-info-caja-circulo{ width:150px;
                        height: 150px;
                        margin: 0 auto;
                        border-radius: 50%;
                        overflow: hidden;}

.web-info-caja-circulo img{ width: 100%;}

.web-info-caja h1{ font-family:Raleway;
                   font-size: 16px;
                   color: #004fa5;
                   margin:20px 0px 15px 0px;
                   background-color: #fff;
                   display: inline-block;
                   border-radius: 50px;
                   padding: 5px 10px 5px 10px}

.web-info-caja p{ font-family:Raleway;
                  font-size: 14.5px;
                  line-height: 20px;
                  color: #fff;
                  margin: 0;
                  text-align: justify;}

















/*beneficiosssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/
#beneficios{ width: 100%;
             padding: 0px 20px 0px 20px}


.beneficios{ width: 100%;}

/*imagennnnn mascotaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.beneficios-img{ width: 600px;
                 margin: 0 auto;
                 position: relative;}

.beneficios-img img{  width: 100%;}

.beneficios-viñeta{ position: absolute;
                    padding: 20px;
                    background: #5c00d4;
                    border-radius: 20px;
                    top: 0;
                    right:0}

.beneficios-viñeta:before{ content: "";
                           position: absolute;
                           bottom:-10px;
                           left: 50%;
                           transform: translateX(-50%);
                           border-left: 15px solid transparent;
                           border-right: 15px solid transparent;
                           border-top:20px solid#5c00d4}

.beneficios-viñeta h1{ font-family: raspoutine;
                       font-weight: 500;
                       font-size: 40px;
                       color:#fff;
                       margin: 0; }

.beneficios-viñeta h2{ font-family: raspoutine;
                       font-weight: 500;
                       font-size: 32px;
                       color:#fff;
                       margin: 0; }

/* infooooooooooooooooooooooooooooooooooooooooooo */
.beneficios-info{ width: 100%;
                  display: grid;
                  grid-template-columns: repeat(3,1fr);
                  grid-gap: 20px;
                  padding: 0px 0px 100px 0px}

.beneficios-info-caja{ text-align: center;
                       border-radius: 10px;
                       background: #0060ff;
                       padding: 20px}

.beneficios-info-caja:nth-child(2n){background: #5c00d4}

.beneficios-info-caja h1{ font-family: Raleway;
                          font-size: 20px;
                          font-weight: 700;
                          color: #fff;
                          margin: 0}

.beneficios-info-caja h2{ font-family: Raleway;
                          font-size: 20px;
                          font-weight: 700;
                          color: #fff;
                          margin: 0}

.beneficios-info-caja p{  font-family: Raleway;
                          font-size: 14px;
                          line-height: 20px;
                          color: #fff;
                          margin: 5px 0px 0px 0px;
                          text-align: justify;}












/*procesooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
#proceso{ width: 100%;
          background: #0060ff;
          position: relative;
          padding: 100px 20px 50px 20px}

.proceso-vector{ width: 100%;
                 height: 160px;
                 background: url(../img/herramientas/puntero.png);
                 position: absolute;
                 top: -70px;
                 left: 0;
                 z-index: -1}

/*tituloooooooo*/
.proceso-titulo{ width: 100%;
                 text-align: center;
                 margin: 0px 0px 30px 0px}

.proceso-titulo h1{ font-family:raspoutine;
                    font-weight: 500;
                    font-size: 25px;
                    color: #fff;
                    margin: 0}

.proceso-titulo h2{ font-family:raspoutine;
                    font-weight: 500;
                    font-size: 40px;
                    color: #fff;
                    margin: 0}


/*infooooooooooo*/
.proceso-info{ width: 100%;
               display: grid;
               grid-template-columns: repeat(4,1fr);
               grid-gap: 20px;
               position: relative;}

.proceso-info:before{ content: "";
                      width: 100%;
                      height: 10px;
                      background: #fff;
                      position: absolute;
                      top: 25px;
                      left: 50%;
                      transform: translateX(-50%);
                      border-radius: 50px}               

.proceso-info-caja{ text-align: center;}

/*numerooo con circuloooo*/
.proceso-info-numero{ width: 50px;
                      height: 50px;
                      margin: 0 auto;
                      background: #6a00b5;
                      border:5px solid#0060ff;
                      border-radius: 50%;
                      text-align: center;
                      position: relative;
                      z-index: 1}
/*numerooooo*/
.proceso-info-numero h2{ font-family: Raleway;
                         font-size: 15px;
                         font-weight: 1000;
                         color: #fff;
                         margin: 0;
                         line-height: 40px; }

/*imagennnnnn*/
.proceso-info-caja-img{ width: 100%}

.proceso-info-caja img{ width: 100%;
                        max-width: 100px }

/*titulooo de cajaaa*/
.proceso-info-caja h1{ font-family: Raleway;
                       font-weight: 700;
                       font-size: 15px;
                       text-align: center;
                       color: #fff;
                       margin: 0px;
                       background: #6a00b5;
                       padding: 4px 10px 4px 10px;
                       border-radius: 50px;
                       display: inline-block;}

/*parrafoooo de cajaaa*/
.proceso-info-caja p{  font-family: Raleway;
                       font-size: 13px;
                       line-height: 18px;
                       color: #fff;
                       text-align: justify;
                       margin: 5px 0px 0px 0px}















/* herramientasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */

#herramientas{ width: 100%;
               background: #0060ff;
               padding: 100px 0px 50px 0px}

/*hoptimizacionnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/
.hoptimizacion{ width:40%;
                float: left;
                padding: 0px 20px 0px 20px}

.hoptimizacion-titulo{ width: 100%;
                       margin: 0px 0px 30px 0px}
.hoptimizacion-titulo-centro{ width: 200px;
                              margin: 0 auto;
                              text-align: center;
                              background: #03d400;
                              border-radius: 20px;
                              padding: 10px 0px 10px 0px}

.hoptimizacion-titulo-centro h1{ font-family: raspoutine;
                                 font-weight: 500;
                                 font-size: 20px;
                                 color: #fff;
                                 margin: 0}
.hoptimizacion-titulo-centro h2{ font-family: raspoutine;
                                 font-weight: 500;
                                 font-size: 40px;
                                 color: #fff;
                                 margin: 0;
                                 line-height: 40px}
/*infooooooooooo*/
.hoptimizacion-info{ width: 90%;
                     display: grid;
                     grid-template-columns: repeat(1,1fr);}

.hoptimizacion-info-caja{ width: 100%;
                          margin: 0px 0px 25px 0px;}

.hoptimizacion-info-caja h1{ font-family: Raleway;
                             font-size: 15px;
                             color: #6a00b5;
                             margin: 0;
                             background: #fff;
                             border-radius: 50px;
                             display: inline-block;
                             padding: 5px 10px 5px 10px}

.hoptimizacion-info-caja h1 span{ color:#0060ff;font-size: 18px}                             

.hoptimizacion-info-caja p{ font-family: Raleway;
                            font-size: 13px;
                            line-height: 17px;
                            color: #fff;
                            margin: 10px 0px 0px 0px;
                            text-align: justify;}



/*hlineaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.hlinea{ width: 10%;
         float: left;
         position: relative;
         height: 600px}

.hlinea:before{content: "";
               width: 2px;
               height: 500px;
               background: #fff;
               position: absolute;
               left: 30%;
               top: 50%;
               transform: translateY(-50%)
               translateX(-30%);
              }





/*hbusquedaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.hbusqueda{ width:50%;
            float: left;
            padding: 0px 20px 0px 20px}


.hbusqueda-titulo{ width: 100%;
                       margin: 0px 0px 30px 0px}
.hbusqueda-titulo-centro{ width: 200px;
                          margin: 0 auto;
                          text-align: center;
                          background: #6a00b5;
                          border-radius: 20px;
                          padding: 10px 0px 10px 0px}

.hbusqueda-titulo-centro h1{ font-family: raspoutine;
                             font-weight: 500;
                             font-size: 23px;
                             color: #fff;
                             margin: 0}

.hbusqueda-titulo-centro h2{ font-family: raspoutine;
                             font-weight: 500;
                             font-size: 25px;
                             color: #fff;
                             margin: 0;
                             line-height: 25px}
/*infooooooooooo*/
.hbusqueda-info{ width: 90%;
                 display: grid;
                 grid-template-columns: repeat(1,1fr)}

.hbusqueda-info-caja{ width: 100%;
                      margin: 0px 0px 25px 0px}

.hbusqueda-info-caja h1{  font-family: Raleway;
                          font-size: 15px;
                          color: #6a00b5;
                          margin: 0;
                          background-color: #fff;
                          display: inline-block;
                          border-radius: 50px;
                          padding: 5px 10px 5px 10px}

.hbusqueda-info-caja h1 span{ color:#0060ff;
                              font-size: 18px}                             

.hbusqueda-info-caja p{ font-family: Raleway;
                        font-size: 13px;
                        line-height: 17px;
                        color: #fff;
                        margin: 10px 0px 0px 0px;
                        text-align: justify;}












/* widgetttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt */

#widget{ background-color: #1CBC00;
         width: 100%;
         padding: 0px 20px 0px 20px;}

.widget{ background:url(../widget/fondo-banner.png);
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center center;
         width: 100%;}


/*textooooooooooooooooooooooooooooooooooooo*/
.widget-texto{ width: 50%;
               float: left;
               height: 400px;
               position: relative;}

.widget-texto-centro{ position: absolute;
                      width: 100%;
                      top: 50%;
                      left: 50%;
                      transform: translateY(-50%)
                      translateX(-50%);
                      text-align: center;}

.widget-texto h1{ font-family:Raleway;
                  font-size: 50px;
                  color: #fff;
                  margin: 0;
                  line-height: 40px;}

.widget-texto h2{ font-family:Raleway;
                  font-size: 70px;
                  line-height: 60px;
                  color: #fff;
                  margin: 0;
                  font-weight: 800}

.widget-texto h3{ font-family:Raleway;
                  font-size: 17px;
                  color: #fff;
                  margin: 10px 0px 0px 0px;
                  background-color: #007200;
                  display: inline-block;
                  padding: 10px 15px 10px 15px;
                  border-radius: 20px}

.widget-texto h4{ font-family:Raleway;
                  font-size: 14px;
                  color: #fff;
                  margin:5px 0px 0px 0px;
                  font-weight: 500}

/*btnnnn*/
.widget-texto-centro a{ text-decoration: none; }
.widget-texto-btn{ width: 140px;
                   height: 40px;
                   margin: 10px auto 0px auto;
                   background-color: #6A00B5;
                   color: #fff;
                   border-radius: 50px;
                   text-align: center;
                   position: relative;}

.widget-texto-btn p{ font-family: Raleway;
                     font-weight: 700;
                     font-size: 13px;
                     
                     margin: 0;
                     line-height: 40px;
                     position: relative;
                     z-index: 1}

.widget-texto-btn span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  opacity: .8;
  animation:pulseanimation  2s ease-out infinite;
  animation-delay: calc(1s * var(--i));
}

@keyframes pulseanimation{

  100%{
    opacity: 0;
    transform: scale(1.3)
  }
}
.widget-texto-btn:hover{ background-color: #fff;color:#6A00B5}




/*imagennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/
.widget-img{ width: 50%;
             float: left;
             height: 400px;
             position: relative;}


.widget-img img{ width: 100%;
                 max-width: 600px;
                 position: absolute;
                 bottom: 0;
                 left: 50%;
                 transform: translateX(-50%);}




















/* aplicacionessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */
#app{ width: 100%;
      background: #0060ff;
      padding: 50px 20px 100px 20px;
      position: relative;}

.app-vector{  width: 100%;
              height: 160px;
              background: url(../img/herramientas/puntero.png);
              position: absolute;
              bottom:-70px;
              left: 0;
              z-index: }





/*tituloooooooooooooooo*/
.app-titulo{ width: 100%;
             margin: 0px 0px 20px 0px}

.app-titulo-centro{ width: 250px;
                    padding: 20px;
                    text-align: center;
                    margin: 0 auto;
                    border:3px solid#fff;
                    position: relative;
                    border-radius: 20px}

.app-titulo-centro img{ position: absolute;
                        top: -100px;
                        right: -150px;
                        width: 100%;
                        max-width: 200px}

.app-titulo-centro h1{ font-family: raspoutine;
                       font-weight: 500;
                       font-size: 30px;
                       color: #fff;
                       margin: 0 }

.app-titulo-centro h2{ font-family: raspoutine;
                       font-weight: 500;
                       font-size: 30px;
                       color: #fff;
                       margin: 0;}

.app-titulo-centro h2 span{ background: #6a00b5;
                            border-radius: 50px;
                            padding: 4px 10px 4px 10px}

/*infooooooooooooooooooooooo*/
.app-info{ width: 100%;
           display: grid;
           grid-gap: 30px;
           grid-template-columns: repeat(3,1fr);}

.app-info-caja{ text-align: center; }

.app-info-caja-icono img{ width: 100%;
                          max-width: 100px }

.app-info-caja h1{ font-family: Raleway;
                   font-size: 20px;
                   color: #fff;
                   margin: 5px 0px 5px 0px;
                   background: #6a00b5;
                   padding: 5px 10px 5px 10px;
                   border-radius: 50px;
                   display: inline-block;}
           
.app-info-caja p{ font-family: Raleway;
                  font-size: 13px;
                  line-height: 17px;
                  color: #fff;
                  margin: 0;
                  text-align: justify;}









/* planesssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss */
#soporte{ width: 100%;
          background: #6a00b5;
          padding: 100px 20px 50px 20px}

/*tituloooooooooooooooooo*/
.soporte-titulo{ width: 100%;
                 margin: 0px 0px 20px 0px}

.soporte-titulo h1{ font-family: raspoutine;
                    font-weight: 500;
                    font-size: 30px;
                    color: #fff;
                    margin: 0}

.soporte-titulo h1 span{ color: #0060ff;
                         font-family: Raleway;
                         font-weight: 700;}                    

/*infoooooooooooooooooooo*/
.soporte-info{width: 100%}

/*textooooooo*/
.soporte-info-texto{width: 60%;
                    float: left;}

.soporte-info-texto h1{ font-family: raspoutine;
                        font-weight: 500;
                        font-size: 20px;
                        color: #fff;
                        margin: 10px 0px 10px 0px;
                        background: #0060ff;
                        padding: 5px 10px 5px 10px;
                        border-radius: 50px;
                        display: inline-block;}

.soporte-info-texto h1 span{ color: #fff }

.soporte-info-texto p{  font-family: Raleway;
                        font-size: 14px;
                        line-height: 20px;
                        color: #fff;
                        margin: 0px 0px 30px 0px;
                        text-align: justify;}

/*imagennnnnn*/
.soporte-info-img{ width: 40%;
                   float: left;
                   text-align: center;}

.soporte-info-img img{ width: 100%;
                       max-width: 350px }










/*planessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/
#planes{ width: 100%;
         background: #0060ff;
         padding: 100px 20px 120px 20px}

/*tituloooooooooooooooooooooooo*/
.planes-titulo{ width: 100%;}

.planes-titulo-centro{ width: 300px;
                       margin: 0 auto;
                       text-align: center;
                       position: relative;}

.planes-titulo-centro img{ position: absolute;
                           top: -50px;
                           right: -150px;
                           width: 100%;
                           max-width: 150px }

.planes-titulo-centro h1{ font-family: raspoutine;
                          font-weight: 500;
                          font-size: 40px;
                          color: #fff;
                          margin: 0}

.planes-titulo-centro h2{ font-family: raspoutine;
                          font-weight: 500;
                          font-size: 50px;
                          color: #fff;
                          margin: 0;
                          line-height: 50px}

.planes-titulo p{ width: 50%;
                  margin: 0 auto;
                  font-family: Raleway;
                  font-size: 13px;
                  line-height: 17px;
                  color: #fff;
                  text-align: justify; }






/*hostttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt*/
#host{ width: 100%;
       background: #fff;
       position: relative;
       padding: 30px 20px 50px 20px}

/*nubeeeeeeeeeeeeeee*/
.host-nube{ width: 100%;
            background: url(../img/planes/nubes.png);
            background-position: center center;
            position: absolute;
            top: -100px;
            left: 0;
            height: 100px;}

/*hosttttttttttttttttt*/
.host{ width: 100%;
       display: grid;
       grid-gap: 20px;
       grid-template-columns: repeat(3,1fr);}

.host-caja{ box-shadow: 0px 2px 5px 1px #999;
            padding: 40px 20px 30px 20px;
            border-radius: 20px;
            position: relative;}

.host-caja:nth-child(2){ padding: 60px 20px 30px 20px;  }            

/*titulooo*/
.host-caja h1{ font-family: Red Hat Display;
               font-weight:900;
               font-size: 20px;
               color: #111;
               margin: 0 }
/*parrafoo*/
.host-caja p{ font-family: Raleway;
               font-size: 14px;
               color: #444;
               margin: 0}
/*preciooo*/
.host-caja h2{ font-family: Red Hat Display;
               font-weight: 900;
               font-size: 40px;
               color: #000;
               margin: 15px 0px 0px 0px }
/*año del precio*/
.host-caja h2 span{ color: #444;
                    font-size: 14px;
                    font-weight: 500;}

/*descuento*/
.host-caja h3{ font-family: Red Hat Display;
               font-weight: 500;
               font-size: 20px;
               color: #999;
               margin: 0px 0px 0px 0px;
               position: relative;}

.host-caja h3:before{ content: "";
                      position: absolute;
                      top: 50%;
                      left: 0;
                      transform: translateY(-50%);
                      width: 87px;
                      height: 2px;
                      background: #999}
/*descuento extra*/
.host-caja h3 span{ background: linear-gradient(90deg,rgba(89, 45, 250, 1) 0%, rgba(71, 118, 255, 1) 100%);
                    border-radius: 50px;
                    font-size: 14px;
                    font-weight: 300;
                    padding: 4px 10px 4px 10px;
                    color: #fff;}

/*botonnnn de host*/
.host-caja-btn{ width: 80%;
                margin: 30px auto 30px auto;
                border-radius: 40px;
                border:2px solid#0060ff;
                text-align: center;
                font-size: 14px;
                color: #0060ff;
                font-family: Raleway;
                padding:10px 0px 10px 0px }

/*subtitulo caracteristicas*/
.host-caja h4{ font-family: Raleway;
               font-weight: 500;
               font-size: 15px;
               color: #0060ff;
               margin: 15px 0px 5px 0px}

/*listaaa de caracteristicas*/
.host-caja ul{ padding: 0px 0px 0px 5px;
               margin: 0 }

.host-caja ul li{ font-family: Red Hat Display;
                  font-size: 14px;
                  color: #222;
                  line-height: 30px;
                  list-style: none;}

.host-caja ul li span{ color: #6a00b5;font-size: 16px }

/*popularrrr*/
.host-caja-popular{ width: 100%;
                    height: 40px;
                    background: linear-gradient(90deg,rgba(89, 45, 250, 1) 0%, rgba(71, 118, 255, 1) 100%);
                    position: absolute;
                    left: 0;
                    top: 0;
                    border-radius:20px 20px 0px 0px;
                    text-align: center;}

.host-caja-popular p{ font-family:Raleway;
                      font-size: 15px;
                      color: #fff;
                      font-weight: 700;
                      margin: 0;
                      line-height: 40px}







/*firmasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/

#firma{ width:100%;
        background:linear-gradient(90deg,rgba(89, 45, 250, 1) 0%, rgba(71, 118, 255, 1) 100%);
        padding: 20px}


/*textooooooooooooooooooooooooooooooooooooo*/
.firma-texto{ width: 50%;
               float: left;
               height: 500px;
               position: relative;}

.firma-texto-centro{ position: absolute;
                      width: 100%;
                      top: 50%;
                      left: 50%;
                      transform: translateY(-50%)
                      translateX(-50%);
                      text-align: center;}

.firma-texto h1{ font-family:Raleway;
                  font-size: 50px;
                  color: #fff;
                  margin: 0;
                  line-height: 40px;}

.firma-texto h2{ font-family:Raleway;
                  font-size: 70px;
                  line-height: 60px;
                  color: #fff;
                  margin: 0;
                  font-weight: 800}

.firma-texto h3{ font-family:Raleway;
                  font-size: 17px;
                  color: #fff;
                  margin: 10px 0px 0px 0px;
                  background-color: #6A00B5;
                  display: inline-block;
                  padding: 10px 15px 10px 15px;
                  border-radius: 20px}

.firma-texto h4{ font-family:Raleway;
                  font-size: 14px;
                  color: #fff;
                  margin:5px 0px 0px 0px;
                  font-weight: 500}


/*firmaaaa ejemploooooooooooooooooooooo*/

.firma{width: 400px;
       height: 200px;
       background: linear-gradient(269deg,rgba(85, 0, 160, 1) 38%, rgba(87, 52, 251, 1) 100%);
       border-radius: 20px;
       border: 2px solid#fff;
       padding: 10px;
       margin: 20px auto 0px auto}

/*logoooooooo*/
.firma-logo{ width:135px;
             float: left;
             height: 100%;
             position: relative;}

.firma-logo img{ width: 100%;
                 position: absolute;
                 top: 50%;
                 left: 50%;
                 transform: translateX(-50%)
                 translateY(-50%);}

/*lineaaaaaaaa*/
.firma-linea{ width: 5px;
              float: left;
              background-color: #fff;
              height: 100% }

/*datossssssssss*/
.firma-datos{ width: 236px;
              float: left;
              padding: 0px 0px 0px 10px}

.firma-datos h5{ font-family:Raleway;
                 font-size: 25px;
                 color: #fff;
                 margin: 0 }

.firma-datos-linea{ width: 100%;
                    height: 1px;
                    background-color: #fff;
                    margin: 5px 0px 5px 0px}

.firma-datos h6{ font-family:Raleway;
                 font-size: 12px;
                 color: #fff;
                 margin: 0 }

.firma-datos p{ font-family:Red Hat Display;
                 font-size: 13px;
                 color: #fff;
                 margin: 0;
                 text-align: justify;
                 line-height: 20px}
.firma-datos p span{color: #CEFF00}

/*imagennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/
.firma-img{ width: 50%;
            float: left;
            height: 500px;
            position: relative;}

.firma-img img{ width: 100%;
                max-width: 600px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%)
                translateY(-50%); }




















/* contactoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo */
#contacto{ width: 100%;
           padding: 70px 20px 50px 20px;
          background:#efefef}

/*contactooooooooooooooooooooooooo*/
/*tituloooooo y parrafo*/
.contacto{ width: 50%;
           float: left; }

.contacto-titulo{ width: 100% }

.contacto-titulo h1{ font-family: raspoutine;
                     font-weight: 500;
                     font-size: 25px;
                     color: #fff;
                     margin: 0;}

.contacto-titulo h1 span{ background: #0060ff;
                          border-radius:50px;
                          padding: 5px 20px 5px 20px}

.contacto-titulo h2{ font-family: Red Hat Display;
                     font-size: 25px;
                     font-weight: 500;
                     color: #0060ff;
                     margin: 10px 0px 0px 0px;}

.contacto-titulo p{ font-family: Raleway;
                     font-size: 14px;
                     font-weight: 500;
                     color: #444;
                     margin: 0;
                     text-align: justify;}


/*datossssssssssssssss*/
.contacto-datos{ width: 100% }

/*tituloooo*/
.contacto-datos-titulo{ width: 100%;
                        margin: 30px 0px 20px 0px}

.contacto-datos-titulo h1{  font-family: Raleway;
                            font-size: 18px;
                            color: #fff;
                             }

.contacto-datos-titulo h1 span{ background: linear-gradient(90deg,rgba(89, 45, 250, 1) 0%, rgba(71, 118, 255, 1) 100%);
                                border-radius:50px;
                                padding: 5px 20px 5px 20px}

/*datossss*/
.contacto-datos-datos{ width: 100%}
.contacto-datos-datos-item{ width: 50%;
                            float: left;}

.contacto-datos-datos-item h1{ font-family: Raleway;
                                font-weight: 800;
                               font-size: 18px;
                               color: #222;
                               margin: 0 }
/*iconossssss*/
.contacto-datos-datos-item h1 .icon-whatsapp{ color: #10d300;
                                              font-size: 30px}

.contacto-datos-datos-item h1 .icon-envelope{ color: #0060ff;
                                              font-size: 30px}

.contacto-datos-datos-item p{ font-family: Red Hat Display;
                              font-size: 15px;
                               color: #222;
                               margin: 0 }

/*herramientasssss*/
.contacto-herramientas{ width: 100%;
                        float: left;
                        margin: 40px 0px 0px 0px;}

.contacto-herramientas h1{ font-family: Raleway;
                           font-weight: 1000;
                           font-size: 15px;
                           color: #444;
                           margin: 0 }

.contacto-herramientas-item{ width: 50px;
                             height: 50px;
                             float: left; }

.contacto-herramientas-item img{ width: 100% }






/*widgettttttttttttttttttttttttttttt*/
.contacto-widget{ width: 50%;
                  float: left; }








/*pieeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee*/
#pie{width: 100%;
     background:#0060ff;
     padding: 30px 0px 0px 0px}

.pie{width: 100%;
     padding: 0px 20px 0px 20px}

/*likeeeeee*/
.pie-like{ float: left;}

.pie-like p{ font-family: Raleway;
             font-size: 12px;
             color: #fff;
             margin: 0}









/*whatsappp*/
.pie-whatsapp{float: right;}

.pie-whatsapp p{ font-family: Raleway;
                font-size: 14px;
                color: #fff;
                margin: 0}
/*iconooo*/
.pie-whatsapp p .icon-whatsapp{ color: #10d300;
                                font-size: 18px}               


/*copyyyyy*/
.pie-copy{ width: 100%;
           float: left;
           text-align: center;
           background: #0047af;
           padding: 15px 0px 15px 0px}

.pie-copy p{  font-family: Raleway;
              font-size: 12px;
              color: #fff;
              margin: 0}