/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&family=Montserrat:wght@400;800&family=Oswald:wght@700&display=swap'); */
/* @import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css") */

  *{
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  text-decoration: none;
}



:root{
  --facebook: #3b5999;
  --whatsapp: #25d366;
  
  --primario: #082032;
  --secundario:#FF4C29;
  --secundario2: #2C394B;
  --pendiente: #334756;
  

  --titulo-b: #262058;
  --guindo: #B6BBC4;
  --celeste: #31304D;
  --aqua: #F0ECE5;
  --txt-b: #1e272e;
  --txt-p: #444974;
  --txt-w: #ffffff;
}


body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
html{
  font-size: 62.5%;
}
p{
  font-family: 'Roboto: wght @ 700', sans-serif;
  font-size: 1.7rem;
  line-height: 1.4;
  color: var(--primario);
  }
        @media (min-width:1380px) {
          p{
            font-size: 1.8rem;
            line-height: 1.5;
            }
        }
span{
  font-family: 'Roboto', sans-serif;
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--primario);
}
h1{
  font-family: 'Roboto', sans-serif;
  font-size: 3.4rem;
  color:var(--primario);
  line-height: 1.2;
}

h2{
  font-family: 'Roboto: wght @ 700', sans-serif;
  font-size: 3rem;
  color:var(--primario);
  letter-spacing: .5px;
}
h3{
  font-family: 'Roboto: wght @ 700', sans-serif;
  font-size: 2.7rem;
  color:var();
  letter-spacing: .5px;
}
h4{
  font-family: 'Roboto: wght @ 700', sans-serif;
  font-size: 1.2rem;
}

            @media (min-width:1380px) {
              h1{
                letter-spacing: 3px;
                }
              span{
                font-size: 2.4rem;
                }
            }

.slider__link{
  width: 12vw;
  height: 6vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--secundario);
  border-radius: 5px;
  text-align: center;
  color: var(--primario);
  font: bold 1.7rem 'Roboto',sans-serif;
  letter-spacing: 1px;
  transition: all 300ms ease-out;
  cursor: pointer;
  border: none;
}
      .slider__link a{
        color: var(--primario);
      }
      .slider__link:hover{
        transform: scale(1.08);
          overflow: hidden;
          transition: all 300ms ease-out;
      }



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




.cabecera{
  width: 100%;
  height: 10em;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items:flex-end;
  background-color: var(--txt-w);
  transition: all 0.6s ease-in-out;
  z-index: 10000;
  
}

.checkbtn{
  display: none;
}
#check{
  display: none;
}
      .cabecera .logo{
        width: 28%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .6s ease-in-out;
        background-color: var(--txt-w);
        }
              .cabecera .logo img{
                width: 50%;
                height: auto;
                object-fit: contain;
                transition: all .6s ease-in-out;
              }
      header.pegar{
        width: 100%;
        height: 6.6em;
        background-color: #082032;
        opacity: .95;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1000;
        transition: all .6s ease-in-out;
          }
        .cabecera_nav{
        width: 50%;
        height: 100%;
        padding: 0 8em;
        display: flex;
        justify-content:space-around;
        align-items: center;
        list-style: none;
        transition: all 0.6s ease-in-out;
          }
              .cabecera_nav li{
                width: auto;
                padding: 0 2em;
                text-align: center;
                transition: all 0.6s ease-in-out;
              }

              .cabecera ul li a{
                width:auto;
              color: var(--primario);
              font: 18px 'Roboto', sans-serif;
              z-index: 1;
              transition: all 0.6s ease-in-out;
              
              }
              .cabecera ul li:hover a{
                color: var(--secundario);
                transition: all 0.2s ease-in-out;
              }
                    .cabecera_contacto{
                      width: 25%;
                      height: 100%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      background-color: var(--secundario);
                      transition: all 0.6s ease-in-out;
                    }
                          .cabecera_contacto a{
                            width: auto;
                            height: auto;
                            color: var(--txt-w);
                            font: 18px 'Roboto',sans-serif;
                            z-index: 1;
                            transition: all 0.6s ease-in-out;
                            }
                            .cabecera .cabecera_contacto:hover a {
                              color: var(--primario);
                              transition: all 0.2s ease-in-out;
                            }

header.pegar .logo img{
  width: 40%;
  height: auto;
  transition: all .6s ease-in-out;
}
    header.pegar ul li a{
      color: var(--txt-w);
      font: 16px 'Roboto',sans-serif;
      letter-spacing: 1px;
    }
    header.pegar .cabecera_contacto a{
      color: var(--txt-w);
      font: 16px 'Roboto',sans-serif;
      letter-spacing: 1px;
    }
          .cabecera ul li a.selected, a:active{
            color: var(--secundario);
          }

          header.pegar a.selected, a:active{
            color: var(--secundario);
          }







    @media (min-width:1380px) {
      .cabecera ul li a{
        font: 20px 'Roboto',sans-serif;
        letter-spacing: 1px;
        }
      .cabecera_contacto a{
        font: 20px 'Roboto',sans-serif;
        letter-spacing: 1px;
        }
        
        header.pegar{
          height: 8em;
          transition: all .6s ease-in-out;
        }
        header.pegar ul li a{
          color: #d2dae2;
          font: 19px 'Roboto',sans-serif;
          letter-spacing: 1px;
        }
        header.pegar .cabecera_contacto a{
          color: #d2dae2;
          font: 19px 'Roboto',sans-serif;
          letter-spacing: 1px;
        }
  }



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


/*==================================== Portada========================================= */




#portada_inicio{
  width: 100%;
  height: 100vh;
  position: relative;
}
    .textoMovil{
      display: none;
    }
    .capa__inic{
      width: 100%;
        height: 100%;
        background:#000000;
        opacity: 58%;
        position: absolute;
        z-index: 500;
    }

    #portada_inicio .portada{
      width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        overflow: hidden;
        position: absolute;
    }

          .portada .slider{
            width: 300%;
            display: flex;
            height: 100vh;
            margin-left: -100%;
          }
          .portada .slider .slider__cabecera{
            width: 100%;
            height: auto;
            position: relative;
          }
                #portada_inicio .portada .slider .slider__cabecera img{
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
                #portada_inicio .portada .conten__slider{
            width: 100%;
            height: auto;
            padding: 8%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: rgb(252, 252, 252);
            font-size: 20px;
            position: absolute;
            z-index: 750;
          }
                .portada .conten__slider h2{
                  font-size: 3rem;
                  color: var(--txt-w);
                }
                #portada_inicio .portada .conten__slider span{
                  letter-spacing: 1px;
                  color: var(--txt-w);
                  text-align: left;
                  margin: 3rem 0;
                }
    #portada_inicio .portada .slider__btn{
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      font-size: 35px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 1000;
      color: var(--txt-w);
    }
    #portada_inicio .portada .slider__btn:hover{
    background: var(--secundario);
    }
    #portada_inicio .portada .slider__btn__left{
    left: 10px;
    }
    #portada_inicio .portada .slider__btn__right{
      right: 10px;
    }

    
    @media (min-width:1380px){
      .slider__link{
        font: bold 2.2rem 'Roboto',sans-serif;
      }
    }




/******************************NOSOTROS***************************/


      .nosotros{
        width: 100%;
        height:auto;
        margin-top: 15vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1;
      }

            .nst__img{
              width: 80%;
              height: 18vh;
              box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.5);
              border-radius: 5px;
              position: relative;
              margin-bottom: 10vh;
            }
                  .nst__img img{
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    object-fit: cover;
                    object-position: top;
                    position: absolute;
                  }
            .nst__img .capa__nos{
              width:100%;
              height:100%;
              border-radius: 5px;
              background: #000000;
              opacity: 58%;
              position: absolute;
              
            }

      .nosotros div{
        width: 75%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: start;
      }   
            .nosotros div .nos{
              width: 90%;
            }
            .nosotros div .mision{
              width: 35%;
              margin-top: 7vh;
            }
            .nosotros div .vision{
              width: 35%;
              margin-top: 7vh;
            }
      .nosotros div div h2{
        width: 100%;
        text-align: center;
        color: var(--primario);
        font-size: 3.4rem;
      }
      .nosotros div p{
        margin-top: 2vh;
        text-align: center;
        color: var(--primario);
        /* color: #0C2D57; */
        text-align: justify;
      }


@media screen and (max-width:1024px) and (max-height:768px) and (orientation:landscape) {
}
@media screen and (width:1280px) and (height:800px) and (orientation:landscape){

}






/****************************** SERVICIOS **************************/

/****************************** SERVICIOS **************************/







.servT{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
      .servT h1{
        width: 80%;
        height: auto;
        margin: 15vh 0 3vh 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5rem;
        font-weight: 800;
      }
      .servT span{
        width: 80%;
        height: auto;
        margin-bottom: 5vh;
        text-align: center;
      }
      .caja__servT{
        width: 26%;
        height: 35vh;
        margin: 3vh 1vw;
        border-radius: 8px;
        box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        position: relative;
      }
            .caja__servT img{
              width: 100%;
              height: 100%;
              transition: all 500ms ease-out;
              object-fit: cover;
            }
            .capa__servT{
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              top: 0%;
              position: absolute;
              background: rgba(0, 0, 0, 0.60);
              transition: all 500ms ease-out;
              opacity: 0;
              visibility: hidden;
              text-align: center;
            }
            .servT figure:hover .capa__servT{
              width: 100%;
              height: 100%;
              top: 0%;
              opacity: 1;
              visibility: visible;
              display: flex;
              flex-direction:  column;
              justify-content: center;
              align-items: center;
            }
            .servT figure:hover img{
              transform: scale(1.3);
            }
                .caja__servT .capa__servT h2{
                  color: #fff;    
                  transition: all 500ms ease-out;
                  margin-top: 25px;
                  color: var(--txt-w);
                }
                .caja__servT .capa__servT p{
                  margin: 2rem 0;
                  text-align: justify;
                  color: var(--txt-w);
                  width: 100%;
                  max-width: 85%;
                }

                .capa__servT span{
                  width: 33%;
                  height: 3rem;
                  position: relative;
                }


@media screen and (min-width:800px) and (orientation: landscape){


  
}





/****************************** VENTAJAS **************************/

/****************************** VENTAJAS **************************/




#vent{
  width: 100%;
  height: auto;
  margin: 15vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

      .caja_ventajas{
        width: 85%;
        height: 85vh;
        display: flex;
      }

            .ventajas__titulo{
              width: 50%;
              height: auto;
              padding: 4vh 0;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
            }

                  .ventajas__picture{
                    width: 90%;
                    height: 45%;
                  }

                        .ventajas__picture img{
                          width: 100%;
                          height: 100%;
                          object-fit: cover;
                        }

                  .ventajas__titulo span{
                    width: 90%;
                    height: auto;
                    font-size: 2rem;
                    text-align: justify;
                  }

            .ventajas__texto{
              width: 50%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: end;
            }
                  .slider__link__movil{
                    display: none;
                  }

                  .ventajas__texto div{
                    width: 100%;
                    height: 18%;
                    padding: 1vh 2vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    background-color: var(--primario);
                    border-radius: 5px;
                    color: var(--txt-w);
                  }

                        .ventajas__texto div h3{
                          width: 100%;
                          text-align: end;
                          color: var(--secundario);
                        }

                        .ventajas__texto div p{
                          text-align: justify;
                          margin-top: 1vh;
                          color: var(--txt-w);
                        }


@media (min-width:1380px){
  .caja_ventajas{
    height: 80vh;
  }
}

/************************************ CONTACTO **************************************/



.contact__index{
  width: 100%;
  height: 55vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-image: url("../img/reunionN.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

      .contact__capa{
        width: 100%;
        height: 55vh;
        background: #000000;
        opacity: 68%;
        position: absolute;
      }
      .contact__text{
          width: 80%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative;
        }
              .contact__text span{
                width: 70%;
                font-size: 3rem;
                font-weight: 700;
                color: #d2dae2;
                text-align: center;
                letter-spacing: 2px;
              }
              .contact__text a{
                width: 27%;
                height: 7vh;
                margin-top: 3vh;
                display: flex;
                flex-direction: column;
                justify-content:center;
                align-items: center;
                position: relative;
                overflow: hidden;
                border-radius: 15px;
              }
              .contact__text a h3{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: #ffffff;
                font-size: 2.5rem;
                background-color: var(--primario);
                transition: all 0.6s ease-in-out;
              }
              .contact__text a h3:hover{
                background-color: var(--secundario);
                transform: scale(1.05);
                color: var(--txt-w);
                overflow: hidden;
                transition: all 0.6s ease-in-out;
              }
              .contact__text .animate__bounce{
                animation-delay: 1s;
                animation-duration: 1s;
              }


/*************************************FOOTER****************************************/

footer{
  width: 100%;
  height: 28vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #082032;
  
}
      .contenidoFooter{
        width: 85%;
        height: 90%;
        display: flex;
        justify-content:center;
        align-items: center;
      }
              .contenidoFooter hr{
                width: 1px;
                height: 80%;
                background-color: var(--txt-w);
                border: none;
              }
              .contenidoFooter__visita{
                width: 35%;
                height: auto;
                margin-right: 1vw;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-end;
              }
                    .img__blog{
                      width: 2rem;
                      height: auto;
                      margin-right: .7vw;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    }
                          .img__blog img{
                            width: 100%;
                            height: auto;
                            object-fit: cover;
                          }
                    .contenidoFooter__visita h3{
                      width: auto;
                      color: var(--txt-w);
                      
                    }
                    .contenidoFooter__visita p{
                      width: auto;
                      height: auto;
                      margin-top:1vh;
                      text-align: right;
                      font-size: 1.7rem;
                      color: var(--txt-w);
                    }
            .contenidoFooter__image{
              width: 30%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
                  .contenidoFooter__image h1{
                    width: auto;
                    font-size: 5rem;
                    color: var(--secundario);
                  }
            .info__contacto{
              width: 35%;
              height: auto;
              margin-left: 1vw;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              
            }
                  .box__info{
                    width:auto;
                    height: auto;
                    display: flex;
                    margin-top: 1vh;
                    font-size: 1.7rem;
                  }
                        .box__info i{
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          color: var(--secundario);
                        }
                        .box__info p{
                          width: 100%;
                          margin-left: 1vw;
                          color: var(--txt-w);
                          text-align: left;
                        }

            footer hr{
              width: 100%;
              height: .3rem;
              background-color:var(--secundario);
              border: none;
            }

            footer h4{
              width: 100%;
              height:10%;
              display: flex;
              justify-content:center;
              align-items: center;
              color: var(--txt-w);
            }




/* **********************************SERVICIOS**************************************/

/* **********************************SERVICIOS**************************************/

/* **********************************SERVICIOS**************************************/





#portadaServicios{
  width: 100%;
  height:60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portadaServicios__picture{
  width: 100%;
  height: 60%;
  position: absolute;
}
      .portadaServicios__picture img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
      }

#portadaServicios h1{
  color: #2e3c46;
  letter-spacing: 1px;
  position: relative;
}






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

/* BLOQUE 1======================================== */



#servicios{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

      .container__servicios{
        width: 85%;
        height: 50vh;
        margin: 12vh 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
      }
          .box__serv{
            width: 25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            border-radius: 6px;
            box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            }
                  .box__serv .animate__bounce {
                    animation-delay: .5s;
                    animation-duration: 3s;
                  }
                  .box__serv figure{
                    width: 100%;
                    height: 31%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }
                        .box__serv figure img{
                          width: 35%;
                          height: auto;
                        }
                  .box__serv h2{
                    width: 100%;
                    height: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }
                  .box__serv p{
                    width: 100%;
                    height: auto;
                    padding: 0 5%;
                    display: flex;
                    justify-content: center;
                    align-items:start;
                    text-align: justify;
                  }

                  






/* *********************************SOLUCIONES**********************************/

/* *********************************SOLUCIONES**********************************/

/* *********************************SOLUCIONES**********************************/









#portada{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

      .portada__picture{
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
      }
            .portada__picture img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

.circle {
  width: 71%;
  height: 50%;

  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  flex-wrap: wrap;
  position: relative;
}
        .circle h1{
          width: 100%;
          height: auto;
          text-align: center;
          letter-spacing: 1px;
          color: #d2dae2;
        }
        .circle div picture{
          width: 100px;
          height: 100px;
          border-radius: 100%;
          box-shadow :  inset 0   0   15px #302c2c;
          display: flex;
          align-items: center;
          justify-content: center;
        }
              /* .circle div picture:hover a{
                width: 100%;
                height: 100%;
                transition-duration: 600ms;
              } */
              .circle div picture img{
                width: 57%;
                height: auto;
                object-fit: contain;
                object-position: center;
              }

        .circle div picture h3{
          font-size: 1.8rem;
          position: absolute;
          opacity: 0;
        }
              .circle div picture h3 a{
                color: #d2dae2;
              }
        .circle div picture:hover img{
          opacity: 0;
          transition-duration: 600ms;
        }
              .circle div picture:hover h3{
                opacity: 1;
                transition-duration: 600ms;
              }

.circle .animate__bounce{
  animation-delay: 1s;
  animation-duration: 3s;
}
        .circle div{
          transition: all 600ms ease-out;
        }
        .circle div:hover{
          transform: scale(1.2);
          transition: all 600ms ease-out;
          transform-origin: center center;
          cursor: pointer;
        }


@media screen and (min-width:1520px) {
  .circle div picture{
    width: 125px;
    height: 125px;
  }
}





/*==========SECTION 1 INTRO=========== */





#redes{
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;
}
      .redes__galeria{
        width: 52%;
        height: 80%;
        padding: 2% 2%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
      }
            .redes__imagen{
              width: 25%;
              overflow: hidden;
              margin: 6px;
              box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
              border-radius: 6px;
              line-height:0;
              transition: all .6s ease-in-out;
            }
                  .redes__imagen img{
                    width: 200%;
                    height: 100%;
                    object-fit: cover;
                    transition: all .6s ease-in-out;
                  }
                        .redes__imagen:hover{
                          flex: 50%;
                          transition: all .6s ease-in-out;
                        }
                        .redes__imagen:hover img{
                          width: 100%;
                          height: 100%;
                          transition: all .6s ease-in-out;
                        }


      #redes .redes_texto{
        width: 42%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
      }
            #redes .redes_texto h1{
              margin-bottom: 8vh;
              text-align: center;
            }
            #redes .redes_texto p{
              width: 100%;
              text-align: justify;
            }

@media screen and (min-height:800px){
  #redes{
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: center;
  }
        .redes__galeria{
          width: 52%;
          height: 70%;
          padding: 2% 2%;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
        }
}



/* ===============================BLOQUE 2============================ */

#bloque2_redes{
  width: 100%;
  height: auto;
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

      .network{
        width: 85%;
        height: auto;
        display: flex;
        border-radius: 6px;
        box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
      }
            .network__imagen{
              width: 35%;
              height: 60vh;
            }
                .network__imagen img{
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 6px 0 0 6px;
                }

            .network__contenido{
              width: 65%;
              height: auto;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
            }

                  .network__texto{
                    width: 97%;
                    height: auto;
                    display: flex;
                    flex-direction:column;
                    justify-content: space-evenly;
                  }
                        .network__texto  h1{
                          width: 97%;
                          height: auto;
                          display: flex;
                          justify-content: flex-end;
                        }
                        .network__texto p{
                          width: 90%;
                          height: auto;
                          margin-top: 3vh;
                          display: flex;
                          align-self: center;
                        }

                  .caract{
                    width: 80%;
                    height: auto;
                    display: flex;
                    justify-content: space-evenly;
                    align-self: center;
                    flex-wrap: wrap;
                  }
                        .caracteristicas{
                          width: 40%;
                          height: auto;
                          margin-top: 2vh;
                          padding: 1vh;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                          background-color: var(--primario);
                          opacity: .9;
                        }
                              .caracteristicas h3{
                                font-size: 2rem;
                                color: rgb(255, 255, 255);
                              }
                  .network div .caract .caracteristicas:hover{
                    transform: scale(1.05);
                    transition: 300ms;
                  }


                  /***************CABLEADO****************/


      .cableado{
        width: 85%;
        height: auto;
        margin-top: 12vh;
        display: flex;
        box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
        border-radius: 6px;
      }
            .cableado div{
              width: 65%;
              height: auto;
              padding: 3%;
              display: flex;
              flex-direction: column;
            }
                  .cableado div h1{
                    width: 50%;
                    display: flex;
                  }
                  .cableado div p{
                    height: 85%;
                    display: flex;
                    align-items: center;
                  }
            .cableado__imagen{
              width: 35%;
              height: 60vh;
            }
                .cableado__imagen img{
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  border-radius: 0 6px 6px 0;
                }


                  /**************VIDEOVIGILANCIA**************/


      .videovig{
        width: 85%;
        height:  auto;
        display: flex;
        flex-direction: column;
        margin-top: 12vh;
        box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
        border-radius: 6px;
      }
              #bloque2_redes .videovig_a{
                width: 100%;
                height: auto;
                display: flex;
              }
                      .videovig__imagen{
                        width: 35%;
                        height: 50vh;
                      }
                          .videovig__imagen img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 6px 0 0 0;
                          }
                      .contenido{
                        width: 65%;
                        height:auto;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;
                      }
                            .videovig div  h1{
                              width: 97%;
                              height: auto;
                              display: flex;
                              justify-content: flex-end;
                            }
                            .videovig div p{
                              width: 90%;
                              height: auto;
                              padding-left: 5%;

                            }
                            .v_videov{
                              width: 100%;
                              height: auto;
                              margin: 4vh 0 7vh 0;
                              display: flex;
                              justify-content: space-evenly;
                              align-content: space-evenly;
                              flex-wrap: wrap;
                            }
                                  .v_videov div{
                                    width: 30%;
                                    height: auto;
                                    padding: 1vh;
                                    margin-top: 2vh;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background-color: var(--primario);
                                    opacity: .9;

                                  }
                                  .v_videov div h3{
                                    text-align: center;
                                    font-size: 2rem;
                                    color: rgb(255, 255, 255);
                                  }
                                  .v_videov div h3 br{
                                    display: none;
                                  }

                            .v_videov div:hover{
                              transform: scale(1.05);
                              transition: all 300ms ease-out;
                            }


                  /***************GPS**************/


      .GPS{
        width: 85%;
        height: auto;
        margin-top: 12vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
        border-radius: 6px;
      }
              .GPS .bGPSarriba{
                width: 100%;
                height: auto;
                display: flex;
                justify-content: center;
                align-items: center;
              }
                      .GPS .bGPSarriba .GPStexto{
                        width: 65%;
                        height: auto;
                        padding: 3%;
                        display: flex;
                        flex-direction: column;
                      }
                            .GPS .bGPSarriba .GPStexto p{
                              padding-top: 3%;
                            }

                      .GPS__imagen{
                        width: 35%;
                        height: 50vh;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      }
                          .GPS__imagen img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 0 6px 0 0;
                          }

                      /* TODO checar porque se mueve pagina de inicio al agregar movimientos en h1 o 2 y p */

              .GPSabajo{
                width: 100%;
                height: auto;
                margin: 6vh 0;
                display: flex;
                justify-content: space-around;
              }
              .GPS .GPSabajo div ul{
                margin-top: 2%;
              }
              .GPSabajo div h3{
                font-size: 2.5rem;
              }

                  .GPSabajo div hr{
                    width: 80%;
                    height: 2px;
                    margin: 3% 0;
                    border: none;
                    background-color:#2e3c46;
                  }

                      .GPS .GPSoluciones,.GPSalcance{
                        width: 30%;
                        height: auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }

                      .GPS .GPSabajo .GPSeg{
                        width: 30%;
                        height: auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }

                      .GPSeg__figure{
                        width: 100%;
                        height: 10vh;
                        display: flex;
                        justify-content:center;
                        align-items: center;
                      }
                      .GPSeg__figure img{
                        width: 12%;
                        height: auto;
                        margin-right: 3%;
                        object-fit: cover;
                      }


                                          /* TODO PONER ICONO DE TELEFONO  COMPUTADORA SUSTITYENDO TEXTO (DESCRIPCION CORTA) */

                    /**************ACCESO**************/


       .acceso{
          width: 85%;
          height: 80vh;
          margin-top: 12vh;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
          border-radius: 6px;
        }
                .intro{
                  width: 40%;
                  height: 80%;
                  padding-left: 3%;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-evenly;
                }
                        .acceso__imagen{
                          width: 97%;
                          height: 60%;
                        }
                            .acceso__imagen img{
                              width: 100%;
                              height: 100%;
                              object-fit: cover;
                            }
                .subclas{
                  width: 60%;
                  height: 90%;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-evenly;
                  align-items: center;
                }
                        .acceso .subclas div{
                          width: 90%;
                          height: 25%;
                          display: flex;
                          justify-content: space-between;
                          align-items: center;
                          box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
                        }
                                .subclas div h3{
                                  width: 35%;
                                  height: 100%;
                                  display: flex;
                                  justify-content: center;
                                  align-items: center;
                                  text-align: center;
                                  color:#2e3c46;
                                  font-size: 2.5rem;
                                }

                                .subclas div p{
                                  width: 65%;
                                  height: 100%;
                                  padding-right: 1%;
                                  display: flex;
                                  justify-content: center;
                                  align-items: center;

                                }


@media (min-width:1380px) {
  .intro{
    width: 50%;
  }
  .intro .acceso__imagen{
    height: 60%;
  }
  .subclas{
    width: 50%;
  }
}




                    /**************ALARMAS*************/


        .alarmas{
          width: 85%;
          height: auto;
          margin-top: 12vh;
          display: flex;
          box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
          border-radius: 6px;
        }
                    .alarmas div{
                      width: 65%;
                      height:auto;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-evenly;
                    }
                          .alarmas div h1{
                            width: 97%;
                            height: auto;
                            display: flex;
                            justify-content: flex-end;
                          }
                          .alarmas div p{
                            width: 90%;
                            height: auto;
                            padding-left: 5%;
                          }
              .alarmas__imagen{
                width: 35%;
                height: 60vh;
              }
                  .alarmas__imagen img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 6px 0 0 6px;
                  }


@media screen and (min-height:820px) {
  .network__imagen{
   height: 40vh;
 }
  .cableado__imagen{
    height: 40vh;
  }
  .videovig__imagen{
    height: 40vh;
  }
  .GPS__imagen{
    height: 40vh;
  }
  .alarmas__imagen{
    height: 40vh;
  }
  .acceso__imagen{
    height: 40%;
  }
}


/***************************** CARRUSEL *****************************/

  #carr{
    width: 100%;
    height: 80vh;
    margin: 15vh 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
    #carr h1{
      width: 87%;
      height: 10%;
      margin-left: 13%;
    }
    #carr p{
      width: 50%;
      height:10%;
      margin: 1% 8% 0 0;
      display: flex;
      align-self: flex-end;
    }
   .carrusel {
    width: 18%;
    height: 30%;
    margin-bottom: 5%;
    perspective:90em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
        .carrusel .carrusel__lista{
          width: 100%;
          position: absolute;
          animation: rotar 35s infinite linear;
          transform-style: preserve-3d;
        }
        .carrusel .carrusel__lista:hover{
          animation-play-state: paused;
          cursor: pointer;
        }
              .carrusel .carrusel__lista figure{
                width: 100%;
                height: 80%;
                position: absolute;
              }
              .carrusel__lista figure:nth-child(1){transform: rotateY(24deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(2){transform: rotateY(48deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(3){transform: rotateY(72deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(4){transform: rotateY(96deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(5){transform: rotateY(120deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(6){transform: rotateY(144deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(7){transform: rotateY(168deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(8){transform: rotateY(192deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(9){transform: rotateY(216deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(10){transform: rotateY(240deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(11){transform: rotateY(264deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(12){transform: rotateY(288deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(13){transform: rotateY(312deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(14){transform: rotateY(336deg) translateZ(500px);}
              .carrusel__lista figure:nth-child(15){transform: rotateY(360deg) translateZ(500px);}

                    .carrusel__lista figure img{
                      width: 70%;
                      height: 68px;
                      object-fit: contain;
                    }

                    .carrusel__lista figure img:hover{
                      transform: scale(1.2);
                      transition: all 300ms;
                    }

      @keyframes rotar {
        from{
          transform: rotateY(0deg);
        }
        to{
          transform: rotateY(360deg);
        }
      }

@media screen and (min-width:1537px){
  .carrusel__lista figure img{
    width: 50%;
  }
}
@media screen and (min-width:1800px){
  .carrusel__lista figure img{
    width: 40%;
  }
}
@media screen and (min-height:820px){
  #carr{
    height: 50vh;
  }
}


/* ************************************SOLUCIONES************************************* */



/* *************************************** BLOG *******************************************/

/* *************************************** BLOG *******************************************/

/* *************************************** BLOG *******************************************/






/******************************   UNDER CONSTRUCTION *****************************/

.construccion{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
      .fondo__const{
        width: 100%;
        height: 100vh;
        position: relative;
      }
            .fondo__const img{
              width: 100%;
              height: auto;
              object-fit: contain;
            }
      .capa__const{
        width: 100%;
        height: 100vh;
        background:#000000;
        opacity: 70%;
        position: absolute;
      }
      .texto__const{
        width: 38%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position:absolute;
        color: var(--txt-w);
        text-align: justify;
      }
            .texto__const h1{
              color: var(--secundario);
            }
            .texto__const h3{
              margin-top: 3rem;
              color: var(--txt-w);
            }
            .texto__const P{
              margin-top: 3rem;
              color: var(--txt-w);
            }
            .texto__const button{
              margin-top: 3rem;
            }



/******************************   UNDER CONSTRUCTION *****************************/


.slider{
  width: 100%;
  height: 90vh;
  /* margin-top: 16vh; */
  overflow: hidden;
  position: relative;
}
    .capa__slider{
      width: 100%;
      height: 90vh;
      position: absolute;
      background: rgba(129, 124, 143, 0.64);
      z-index: 500;
    }
    .slides{
      width: 300%;
      height: 90vh;
      display: flex;
    }
          .slides input{
            display: none;
          }
          .slide{
            width: 100vw;
            transition: 2s;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
          }
                .capa__slider{
                  width: 100%;
                  height: 90vh;
                  position: absolute;
                  background: rgba(13, 17, 20, 0.75);
                  z-index: 500;
                }
                .slide img{
                  width: 100%;
                  height: 90vh;
                  position: absolute;
                  object-fit: contain;
                }
                .texto__slide{
                  position: relative;
                  width: 40%;
                  height: 30vh;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  z-index: 750;
                }
                      .texto__slide h1{
                        font-size: 48px;
                        color: rgb(246, 246, 246);
                        text-align: center;
                      }
                            .texto__slide h1:hover{
                              color: rgb(212, 147, 147);
                              transition: all 0.5s ease-out;
                            }

                      .copy__portada,
                      .copy__texto{
                        position: relative;
                        width: 100%;
                        height: auto;
                        margin-top: 2em;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      }
                            .copy__portada img,
                            .copy__texto img{
                              width: 3em;
                              height: auto;
                              margin-right: 1em;
                              object-fit: cover;
                              position: relative;
                            }
                            .copy__portada p{
                              font-family: 'Cantarell', sans-serif;
                              font-style: italic;
                              font-size: 14px;
                              color: rgb(241, 241, 241);
                            }
                            .copy__portada p a{
                              color: rgb(212, 147, 147);
                            }
                            .copy__portada p i{
                              width: auto;
                              height: auto;
                              margin-left: 1rem;
                              font-size: 15px;
                              color: rgb(241, 241, 241);
                            }


    .nav__manual{
      position: absolute;
      width: 100%;
      margin-top: -20vh;
      display: flex;
      justify-content: center;
      z-index: 1000;
    }
          .manual-btn{
            width: 4em;
            border: 2px solid var(--secundario);
            padding: 1px;
            transition: 500ms;
            cursor: pointer;
          }
          .manual-btn:not(:last-child){
            margin-right: 1.5em;
          }
          .manual-btn:hover{
            background: var(--secundario);
          }
    #radio1:checked ~ .second{
      margin-left: 0;
    }
    #radio2:checked ~ .first{
      margin-left: -33.3%;
    }
    #radio3:checked ~ .third{
      margin-left: -66.3%;
    }

/* Navegacion automatica y gound de botones:checked */

    .nav__auto{
      position: absolute;
      width: 100%;
      margin-top: 70vh;
      display: flex;
      justify-content: center;
      z-index: 1000;
    }
          .nav__auto div{
            width: 4em;
            border: 2px solid rgb(240, 58, 10);
            padding: 1px;
            transition: 500ms;
          }
          .nav__auto div:not(:last-child){
            margin-right: 1.5em;
          }

    #radio1:checked ~ .nav__auto .auto-btn1{
      background: rgb(240, 58, 10);
    }
    #radio2:checked ~ .nav__auto .auto-btn2{
      background: rgb(240, 58, 10);
    }
    #radio3:checked ~ .nav__auto .auto-btn3{
      background: rgb(240, 58, 10);
    }



/**************************** NEWS ********************************** */

/**************************** NEWS ********************************** */


.news{
  width: 100%;
  height: auto;
  margin-top: 15vh;
  margin-bottom: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
      .box__news{
        width: 85%;
        height: 65vh;
        display: flex;
      }
            .img__news{
              width: 50%;
              height: 65vh;
              background-color: rgb(50, 170, 180);
            }
                  .img__news img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                  }
            .container__news{
              width: 50%;
              padding: 3%;
              height: auto;
              display: flex;
              align-items: flex-start;
              flex-direction: column;
              justify-content: space-around;
              background: rgb(252, 227, 208);
            }
                  .copy__texto{
                    display: flex;
                    justify-content: flex-start;
                  }
                  .copystyle{
                    font-family: 'Cantarell', sans-serif;
                    font-style: italic;
                    font-weight: bold;
                    font-size: 1.4rem;
                  }
                  .copystyle i{
                    color: #2e3c46;
                    margin-left: .8rem;
                    font-weight: bold;
                  }
                  .copystyle a{
                    color: rgb(240, 72, 12);
                  }



/**************************** POSTS ******************************/

/**************************** POSTS ******************************/


.posts{
  width: 100%;
  height: auto;
  margin-top: 15vh;
  display: flex;
  justify-content: center;
}
      .box__posts{
        width: 85%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
            .box__posts div:not(:last-child){
              margin-right: 3em;
            }
            /* TODO: Arreglar para futuros posts, ya que al agregar mas divs solo se aplicara regla a ultima fila */
       .content__posts{
         width: 32%;
         height: auto;
         margin-top: 3vh;
         padding: 3vh;
         display: flex;
         flex-direction: column;
         background: rgb(252, 227, 208);

       }
             .img__posts{
               width: 100%;
               height: 30vh;
             }
                   .img__posts img{
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                   }
             .content__posts a{
               margin-top: 3vh;
             }
             .content__posts span{
               margin-top: 3vh;
             }




.copywrite{
  margin-top: 15vh;
  width: 100%;
  height: auto;
}
      .content__copyw{
        width: 100%;
        height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content:  center;
        align-items: center;
        position: relative;
      }
          .img__copyw{
            width: 100%;
            height: 80vh;
            position: absolute;
          }
                .img__copyw img{
                  width: 100%;
                  height: 80vh;
                  object-fit: cover;
                }
          .capa__copyw{
            width: 85%;
            height: 70vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(13, 17, 20, 0.75);
            position: relative;
          }
                .capa__copyw h2,
                .capa__copyw span{
                  color: var(--txt-w);
                  opacity: 1;
                  transition: all 0.5s ease-out;
                  position: relative;
                }
                .content__copyw:hover .capa__copyw h2,
                .content__copyw:hover .capa__copyw span{
                  opacity: 0;
                }
          .text__copyw1{
            width: 85%;
            height: 70vh;
            padding: 5vh;
            display: flex;
            clip-path: polygon(0 0, 0 100%, 100% 0);
            background-color: var(--secundario);
            position: absolute;
            opacity: 0;
            transition: all 0.5s ease-out;
          }
          .text__copyw2{
            width: 85%;
            height: 70vh;
            padding: 5vh;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            clip-path: polygon(100% 0, 0 100%, 100% 100%);
            background-color: var(--secundario);
            position: absolute;
            opacity: 0;
            transition: all 0.5s ease-out;
          }
          .text__copyw1:hover,
          .text__copyw2:hover{
            opacity: 1;
          }
                .p__text1{
                  width: 50%;
                }
                .p__text2{
                  width: 50%;
                }









/* ***************************************CONTACTO*******************************************/

/* ***************************************CONTACTO*******************************************/

/* ***************************************CONTACTO*******************************************/







.formulario{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
      .capa__contact{
        width: 100%;
        height: 100%;
        background: #000000;
        opacity: 58%;
        position: absolute;
        z-index: 800;
      }
      .formulario__picture{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 750;
      }
          .formulario__picture img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
      .formulario__titulo{
        width: 70%;
        height: auto;
        margin-top: 15vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 850;
      }
            .formulario__titulo h1{
              color: var(--txt-w);
            }
            .formulario__titulo p{
              color: var(--txt-w);
              margin-top: 1%;
              letter-spacing: 1px;
            }




      /***************** llenado de formulario ******************/



            .formContact{
              width: 40%;
              height: 60%;
              margin-top: 5vh;
              border-radius: 15px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
              position: relative;
              background-color: rgba(30, 35, 38, 0.52);
              z-index: 850;
            }
                  .infoUsuario{
                    width: 100%;
                    height: 90%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;

                  }
                        .infoUsuario p{
                          width: 90%;
                          height: 10%;
                          text-align: center;
                        }
                        .send, .alert{
                          display: flex;
                          justify-content: center;
                          align-items: center;
                        }
                        .send{
                          width: 90%;
                          height: 10%;
                          background-color: rgb(160, 231, 184);
                          font-size: 1.8rem;
                        }
                        .alert{
                          width: 90%;
                          height: 10%;
                          background-color: rgb(237, 156, 82);
                          font-size: 1.8rem;
                        }
                      form.formContact input,
                      form.formContact textarea{
                        width: 100%;
                        min-width: 100%;
                        max-width: 91%;
                        min-height: 100%;
                        max-height: 60px;
                        border: none;
                        border-radius: 8px;
                        background-color: #ffffff;
                        color: #2e3c46;
                      }

                            .infoUsuario p input{
                              padding-left:5%;

                            }
                            .infoUsuario p textarea{
                              padding-left:5%;
                              padding-top: 1.2vh;
                            }

                      form.formContact button{
                        background-color: var(--secundario);
                        font-weight: 600;
                        font-size: 18px;
                        margin-top: 1%;
                        color: #ffffff;
                        width: 60%;
                        height: 100%;
                        border: none;
                        border-radius: 25px;
                        cursor: pointer;
                        transition: all 0.6s ease-in-out;
                      }
                      form.formContact button:hover{
                        transform: scale(1.1);
                        transition: all 0.6s ease-in-out;
                        box-shadow: 0px 0px 6px #ffffff;
                      }