*{
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  text-decoration: none;
}
:root{
  --facebook: #3b5999;
  --whatsapp: #25d366;
  --azul: #161A30;
  --titulo-b: #262058;
  --guindo: #B6BBC4;
  --celeste: #31304D;
  --aqua: #F0ECE5;
  --txt-b: #1e272e;
  --txt-p: #444974;
  --txt-w: #ffffff;
}

html{
  font-size: 62.5%;
  }


h1{
  font-family: 'rubik', sans-serif;
  font-size: 3.5rem;
  text-align: justify;
  color: var(--titulo-b);
}
h2{
  font-family: 'rubik', sans-serif;
  font-size: 2.8rem;
  color: var(--titulo-b);
  text-align: justify;
}
h3{
  font-family: 'rubik', sans-serif;
  font-size: 2.3rem;
  color: var(--azul);
}
h4{
  font-family: 'rubik', sans-serif;
  font-size: 2rem;
}
p{
  font-family: 'roboto', sans-serif;
  font-size: 2.3rem;
  color: var(--titulo-b);
  text-align: justify;
}
span{
  font-family: 'roboto', sans-serif;
  font-size: 2.5rem;
  color: var(--titulo-b);
  text-align: justify;
}

.slider__link{
  width: 15vw;
  height: 8vh;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  background: var(--guindo);
  color: var(--azul);
  transition: .3s all ease-out;
  font-family: 'Lato', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;

}
      .slider__link:hover{
        color: var(--azul);
        background-color: var(--celeste);
      }
      
.linea{
  width: 100%;
  height:1px;
  border: none;
  background-color: var(--aqua);
}

#trabajando{
  display: none;
}




.head{
  width: 100%;
  height: 100vh;
  position: relative;
}
      .head .cabeceraMovil{
        display: none;
      }
      .capa__head{
        width: 100%;
        height: 100%;
        background: rgba(30, 39, 46, 0.753);
        position: absolute;
        z-index: 500;
      }

      .cabecera{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
      }
            .slider{
              width: 300%;
              display: flex;
              height: 100vh;
              margin-left: -100%;
            }
            .slider__cabecera{
              width: 100%;
              height: auto;
              position: relative;
            }
            .slider__img{
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            .conten__slider{
              width: 50%;
              height: 45vh;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              color: rgb(252, 252, 252);
              font-size: 20px;
              position: absolute;
              top: 32%;
              left: 8%;
              z-index: 750;

            }
                  .conten__slider h2{
                    font-size: 3.5rem;
                    color: var(--txt-w);
                    text-align: justify;
                  }
                  .conten__slider p{
                    color: var(--txt-w);
                    text-align: justify;
                  }
                  
                  .slider__cabecera .conten__slider .slider__link{
                    font-size: 1.8rem;
                  }
                  
      .slider__btn{
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(219, 228, 231, 0.6);
        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(--guindo);
        transition: all 300ms ease-out;
      }
      .slider__btn:hover{
      background: var(--azul);
      transition: all 300ms ease-out;
      }
      .slider__btn__left{
      left: 10px;
      }
      .slider__btn__right{
        right: 10px;
      }


.contenido__cabecera{
  width: 100%;
  height: 16vh;
  position: fixed;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  z-index: 750;
  transition: all 0.6s ease-in-out;
  background-color: var(--aqua);
}
      .checkbtn{
      display: none;
      }
      #check{
      display: none;
      }
      .logo{
        width: 10%;
        height: 80%;
      }
            .logo a img{
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
  .contenido__cabecera.stiky{
    width: 100%;
    height: 12vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    z-index: 750;
    background-color: var(--aqua);
    transition: all 0.6s ease-in-out;
  }
  .stiky .logo{
      transition: all 0.6s ease-in-out;
    }
    .stiky ul{
      transition: all 0.6s ease-in-out;
    }
    .stiky .menu ul li a{
      color: var(--azul);
      transition: all 0.6s ease-in-out;
    }
  .menu{
    width: 45%;
    height: auto;
    display: flex;
    justify-content: center;
  }
      .menu ul{
        width: 90%;
        height: auto;
        display: flex;
        justify-content: space-evenly;
        list-style: none;
      }
            .menu ul li{
              font-family: 'rubik', sans-serif;
              font-size: 1.6rem;
              font-weight: bold;
            }
                  .menu ul li a{
                    font-family: 'rubik', sans-serif;
                    font-size: 2.2rem;
                    font-weight: bold;
                    letter-spacing: .5px;
                  }
                  .menu ul li a:hover{
                    color: var(--azul);
                    transition: all 0.6s ease-in-out;
                  }
                  .menu ul li a.selected, a:active{
                    color: var(--txt-p);
                    transition: all 0.6s ease-in-out;
                  }

.media{
  width: 10%;
  height: 100%;
}
      .media ul li:first-child{
        display: none;
      }
      .media ul{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
      }
         .media ul li{
           width: 45px;
           height: 45px;
           display: flex;
           justify-content: center;
           background: var(--azul);
           box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
           transition: .2s all ease-out;
         }
             .media ul li a{
               line-height: 45px;
                font-size: 30px;
                color: #fff;
             }
       .media ul li:first-child:hover{
         transform: translateY(-3px) scale(1.1);
         background: var(--facebook);
       }
       .media ul li:nth-child(2):hover{
         transform: translateY(-3px) scale(1.1);
         background: var(--whatsapp);
       }


/**************************** Nosotros ***************************/


#TPortadaMovil{
  display: none;
}



.presentacion{
  width: 100%;
  height: auto;
  padding: 0 5%;
  margin: 20vh 0;
  display:  flex;
  flex-wrap: wrap;
  justify-content: space-evenly;  
}
      .img__presentacion{
        width: 40%;
        height: 60vh;
        border-radius: 10px;
      }
            .img__presentacion img{
              width: 100%;
              height: 100%;
              border-radius: 10px;
              object-fit: contain;
            }
      .texto__presentacion{
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }
            .texto__presentacion span{
              color: var(--titulo-b);
            }
            .texto__presentacion p{
              text-align: justify;
            }


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



.servicios{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
      .contenedor__servicios{
        width: 85%;
        height: auto;
        margin-bottom: 30vh;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
      }
            .contenedor__servicios h1{
              width: 100%;
              height: auto;
              margin-bottom:2vh;
              text-align: center;
            }
            .caja__servicios{
              width: 28%;
              height: 30vh;
              margin-top: 7vh;
              border-radius: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
                  .caja__servicios img{
                    width: 20%;
                    height: auto;
                    object-fit: contain;
                  }
                  .caja__servicios h3{
                    margin-top: 3vh;
                    text-align: center;
                    color: var(--azul);
                  }
            .contenedor__servicios a{
              margin-top: 7vh;
            }



/***************************** GALERIA *****************************/


.galeria{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15vh;
  
}
      .galeria h1{
        width: 50%;
        text-align: center;
        margin-bottom: .5em;
      }
      .galeria .conteiner__galeria{
        width: 80%;
        height: auto;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
      }
            .galeria .carrousel{
              width: 35%;
              height: auto;
              margin-top: 3vh;
              border-radius: 10px;
              overflow: hidden;
            }
                  .carrousel .caja__img, .caja__img2, .caja__img3, .caja__img4{
                    width: 300%;
                    border-radius: 10px;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: space-between;
                    align-items: center;
                    overflow: hidden;
                    transition: all .5s ease;
                    transform: translateX(0%);
                  }

                        .carrousel img{
                          width: calc(100% / 3);
                          height: 33vh;
                          border-radius: 10px;
                          object-fit: cover;
                        }
                  .carrousel h2{
                    width: 100%;
                    padding-top: .4em;
                    text-align: center;
                  }

                  .carrousel .capa__galeria{
                    display: none;
                  }
                  .carrousel .puntos{
                    width: 100%;
                    margin: 1em 0 0;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: center;
                    align-items: center;
                  }
                        .carrousel .punto, .punto2, .punto3, .punto4{
                          width: 2em;
                          height: 2em;
                          margin: .2em;
                          border-radius: 10px;
                          background-color: var(--azul);
                          cursor: pointer;
                        }
                        .carrousel .punto.activo{
                          background-color:var(--txt-p);
                        }
                        .carrousel .punto2.activo{
                          background-color:var(--txt-p);
                        }
                        .carrousel .punto3.activo{
                          background-color:var(--txt-p);
                        }
                        .carrousel .punto4.activo{
                          background-color:var(--txt-p);
                        }







/****************************** CONTADOR *****************************/



.cont{
  width: 100%;
  height: 180vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
      .img__contador{
        width: 100%;
        height: 180vh;
        position: absolute;
      }
            .img__contador img{
              width: 100%;
              height: 180vh;
              object-fit:cover;
            }
      .capa__contador{
        width: 100%;
        height: 180vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgba(2, 2, 3, 0.70);
        position: absolute;
        color: var(--txt-w);
      }
            .capa__contador h1{
              width: 40%;
              height: 10%;
              text-align: center;
              color: var(--txt-w);
            }
            .capa__contador span{
              width: 50%;
              height: auto;
              text-align: center;
            }
      .caja__contador{
        width: 80%;
        height: 45%;
        padding: 5%;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: var(--azul);
        box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
        position: relative;
      }

            .caja__contador h1{
              width: 90%;
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
              color: var(--txt-w);
            }
            .contenido__contador{
              width: 60%;
              height: auto;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
                  .contenido__contador span{
                    margin: 4vh 0;
                  }
                  .contenido__contador p{
                    color: var(--txt-w);
                    text-align: justify;
                  }
            .conteos{
              width: 40%;
              height: auto;
              display: flex;
              justify-content:end;
              align-items: center;
              flex-wrap: wrap;
            }
                  .contador{
                    width: 55%;
                    height: 25vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    border-radius: 10px;
                    background: rgba(2, 2, 3, 0.55);
                    background-color: var(--celeste);
                    position: relative;
                  }
                        .contador h3{
                          color: var(--txt-w);
                        }
                        .cont__cantidad{
                          font-size: 2rem;
                          color: var(--txt-w);
                          font-family: 'Merriweather Sans', sans-serif;
                        }

      .contenido__contactanos{
        width: 100%;
        height: 35%;
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
      }
            .contenido__contactanos span{
              font-family: 'rubik', sans-serif;
              font-size: 3.2rem;
              text-align: justify;
              color: var(--titulo-b);
              letter-spacing: .5px;
            }
            .contenido__contactanos p{
              width: 70%;
              height: auto;
              margin-top: 2vh;
              margin-bottom: 5vh;
              color: var(--txt-w);
              text-align: center;
            }

                        

            


      footer{
        width: 100%;
        height: auto;
        padding: 0 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--azul);
        /* background: linear-gradient(180deg,var(--txt-w),var(--guindo)); */
      }
            .contenido__footer{
              width: 90%;
              height: 45vh;
              margin-bottom: 15vh;
              display: flex;
              justify-content: space-around;
              align-items: center;
            }
                  .box__footer{
                    width: 20%;
                    height: 100%;
                    padding: 2% 0;
                    margin-top: 15vh;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border-radius: 10px;
                    background: var(--azul);
                  }
                  .fastContact{
                    width: 30%;
                  }
                        .box__footer h3,ul{
                          width: auto;
                          height: auto;
                          color: var(--txt-w);
                          list-style: none;
                        }
                        .box__footer hr{
                          width: 90%;
                          height: 2px;
                          margin: 3vh 0;
                          border: none;
                          background-color: var(--aqua);
                        }
                        .box__footer ul li{
                          width: auto;
                          margin-top:1vh;
                          font-family: 'roboto', sans-serif;
                          font-size: 2.3rem;
                        }
                              .font__icon{
                                width: auto;
                                font-family: 'Roboto', sans-serif;
                                font-size: 2rem;
                                color: var(--guindo);
                                transition: all 300ms ease-out;
                              }
                        .box__footer ul li a{
                          font-size: 2rem;
                        }

                        .box__footer ul li a:hover{
                          color: var(--celeste);
                          cursor: pointer;
                          transition: all 300ms ease-out;
                        }
                        .icon__footer{
                          margin-right:.5vw;
                        }
            .firma{
              width: 100%;
              height:8vh;
              padding: 0 5%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #fff;
            }
            .firma h4,span{
              color: var(--aqua);
              font-size: 1.7rem;
              font-weight: bold;
            }





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

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

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





.head2{
  width: 100%;
  height: 60vh;
  position: relative;
}
      .img__cabecera{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
      }
                  .slider__img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    position: absolute;
                  }
            .conten__portada{
              width: 40%;
              height: auto;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              color: rgb(252, 252, 252);
              font-size: 20px;
              position: relative;
              top:10%;
              z-index: 750;
            }
                  .conten__portada h1{
                    color: var(--txt-w);
                  }
                  .conten__slider p{
                    color: var(--txt-w);
                  }
  .contenido__cabecera.stiky{
    width: 100%;
    height: 12vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    z-index: 750;
    background-color: var(--aqua);
    transition: .3s all ease-out;
  }
    .stiky ul{
      transition: all 0.1s;
    }
  .menu{
    width: 45%;
    height: auto;
    display: flex;
    justify-content: center;
  }
      .menu ul{
        width: 90%;
        height: auto;
        display: flex;
        justify-content: space-evenly;
        list-style: none;
      }
            .menu ul li{
              font-family: 'Lato', sans-serif;
              font-size: 1.2rem;
              font-weight: bold;
            }
                  .menu ul li a{
                    color:var(--azul);
                  }
                  .menu ul li a:hover{
                    color: var(--txt-p);
                  }
.media{
  width: 10%;
  height: 100%;
}
      .media ul{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
      }
         .media ul li{
           width: 45px;
           height: 45px;
           display: flex;
           justify-content: center;
           background: var(--azul);
           box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
           transition: .2s all ease-out;
         }
             .media ul li a{
               line-height: 45px;
                font-size: 30px;
                color: #fff;
             }
       .media ul li:first-child:hover{
         transform: translateY(-3px) scale(1.1);
         background: var(--facebook);
       }
       .media ul li:nth-child(2):hover{
         transform: translateY(-3px) scale(1.1);
         background: var(--whatsapp);
       }




/**************************** HISTORIA ****************************/

       #portadaNosotros{
        display: none;
       }

       

       .historia{
         width: 100%;
         height: auto;
         margin-top: 10vh;
         margin-bottom: 10vh;
         padding: 0 7.5% 0 7.5%;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
         align-items: center;
       }
            .historia h1{
              width: 100%;
              padding-bottom: 2em;
              color: var(--azul);
            }
            .historia .box__h{
              width: 30%;
              height: auto;
              padding: 2em;
              border:3px solid var(--azul);
              border-radius: 10px;
            }
                  .historia h3{
                    width: auto;
                    text-align: center;
                  }
                  .historia p{
                    width: auto;
                    height: auto;
                    text-align: justify;
                    margin-top: 4vh;
                    margin-bottom: 3vh;
                  }

                  .box__h ul{
                    margin-top: 4vh;
                    margin-left: 7vh;
                    list-style:none;
                  }

                  .box__h ul li{
                    width: auto;
                    font-family: 'roboto', sans-serif;
                    font-size: 2.2rem;
                    color: var(--azul);
                  }
                        .font__icon2{
                          width: auto;
                          font-family: 'roboto', sans-serif;
                          font-size: 2.2rem;
                          color: var(--titulo-b);
                        }
                  .historia a{
                    width: 25%;
                    height: 10vh;
                    margin-top: 10vh;
                  }
            


@media screen and (width:1280px) and (height:800px) and (orientation:landscape){
  .historia{
    margin-bottom: 10vh;
  }
}

/**************************** DEPARTMENT ****************************/



.departamento{
  width: 100%;
  height: 90vh;
  margin-top: 25vh;
  padding: 0 7.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
      .eq__departamento{
        width: 60%;
        height: 85%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
            .eq__departamento h2{
              margin-bottom: 2vh;
            }
            .box__eq{
              margin-top: 3vh;
            }
            .box__eq p{
              text-align: left;
            }
      .img__departamento{
        width: 35%;
        height: 85%;
        border-radius: 8px;
      }
            .img__departamento img{
              width: 100%;
              height: 100%;
              object-fit: cover;
              border-radius: 8px;
            }



/************************* RAZONES ***************************/



.razones{
  width: 100%;
  height: auto;
  padding: 0 7.5%;
  margin-top: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
      .intro__razones{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
      }
            .titulo__intro{
              width: 55%;
              height: auto;
              padding-left: 5vh;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
                  .titulo__intro span{
                    font-size: 2.2rem;
                    font-weight: 600;
                    color: var(--azul);
                    text-align: justify;
                  }  
                  .titulo__intro p{
                    text-align: justify;
                    margin: 3vh 0 3vh 0;
                  }
                  .img__razones{
                    width: 45%;
                    height: 50vh;
                    border-radius: 8px;
                  }
                        .img__razones img{
                          width: 100%;
                          height: 100%;
                          border-radius: 8px;
                          object-fit: cover;
                        }


      .contenido__razones{
        width: 100%;
        height: auto;
        margin-top: 8vh;
        display: flex;
        justify-content: space-between;
      }
            .box__contenido{
              width: 30%;
              height: auto;
              margin-bottom: 3vh;
              /* box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); */
            }
            .box__contenido p{
              text-align: left;
              margin-top: 2vh;
            }

@media screen and (width:1280px) and (height:800px) and (orientation:landscape){
  .razones{
    margin-top: 10vh;
  }
}



.contactanos2{
  width: 100%;
  height:85vh;
  margin-top: 25vh;
  position: relative;
}
      .img__contactanos2{
        width: 100%;
        height: 65vh;
        position: absolute;
      }
            .img__contactanos2 img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
      .capa__contactanos2{
        display: none;
      }
      .contenido__contactanos2{
        width: 100%;
        height: 65vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgba(2, 2, 3, 0.55);
        position: relative;
      }
           
            .contenido__contactanos2 span{
              font-family: 'rubik', sans-serif;
              font-size: 3.2rem;
              text-align: justify;
              color: var(--aqua);
              letter-spacing: .5px;
            }
            .contenido__contactanos2 p{
              width: 70%;
              height: auto;
              margin-top: 2vh;
              margin-bottom: 5vh;
              color: var(--txt-w);
              text-align: center;
            }



            



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

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

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

/* TODO: Revisar posicion de clase */









.portafolio{
  width: 100%;
  height: auto;
  margin-top: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
      /* .portafolio span{
        margin-top: 2vh;
      } */
      .contenedor__portafolio{
        width: 85%;
        height: auto;
        margin-top: 7vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
            .caja__portafolio{
              width: 30%;
              height: 35vh;
              margin-top: 3vh;
              display: flex;
              flex-direction: column;
              position: relative;
            }
                  .img__fondo{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 10px;
                    position: relative;
                    opacity: 0;
                    transition: all 500ms ease-out;
                  }
                      .caja__portafolio:hover .img__fondo{
                        width: 100%;
                        height: 100%;
                        opacity: 1;
                        transition: all 500ms ease-out;
                      }
                  .texto__portafolio{
                    width: 100%;
                    height: 100%;
                    padding: 0 2vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    position: absolute;
                  }
                        .texto__portafolio p{
                          text-align:  left;
                        }
                        .texto__portafolio h3{
                          margin: 2vh 0 1vh 0;
                          text-align: center;
                        }
                        figure:hover .texto__portafolio{
                          background-color: rgba(30, 39, 46, 0.55);
                          cursor: pointer;
                          border-radius: 10px;
                          transition: all 500ms ease-out;
                        }
                        figure:hover .texto__portafolio h3{
                          color: var(--txt-w);
                          transition: all 500ms ease-out;
                        }
                        figure:hover .texto__portafolio p{
                          color: var(--txt-w);
                          transition: all 500ms ease-out;
                        }
                        figure:hover .texto__portafolio img{
                          display: none;
                        }

                  /* .img__icono{
                    width: 10%;
                    height: auto;
                    object-fit: cover;
                  } */

@media screen and (width:1280px) and (height:800px) and (orientation:landscape){
  .img__fondo{
    opacity: 1;
  }
  .texto__portafolio{
    background-color: rgba(30, 39, 46, 0.55);
    cursor: pointer;
    border-radius: 10px;
    transition: all 500ms ease-out;
  }
  .texto__portafolio h3{
    color: var(--txt-w);
    transition: all 500ms ease-out;
  }
  .texto__portafolio p{
    color: var(--txt-w);
    transition: all 500ms ease-out;
  }
  .texto__portafolio img{
    display: block;
  }
}

/*************************** COMPLEMENTARIOS ***************************/



.complementarios{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
      .complementarios h2{
        width: 40%;
        height: auto;
        margin-top: 15vh;
        text-align: center;
      }
      .box__complementarios{
        width: 85%;
        height: auto;
        margin-top: 3vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
            .texto__complementarios{
              width: 50%;
              height: auto;
              margin-top: 8vh;
              display: flex;
            }
                  .texto__complementarios img{
                    width: 12%;
                    height: auto;
                    object-fit: contain;
                  }
                  .texto__complementarios div{
                    width: 82%;
                    height: auto;
                    margin-left: 5%;
                    display: flex;
                    flex-direction: column;
                  }
                  .texto__complementarios div p{
                    text-align: left;
                    margin-top: 2vh;
                  }








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

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

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






.contacto{
  width: 100%;
  height: auto;
  margin: 15vh 0 10vh 0;
  padding: 0 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
      .span__contacto{
        width: 100%;
        height: auto;
        font-size: 2.3rem;
        margin-bottom: 10vh;
        padding: 0 5%;
        text-align: center;
        color: var(--azul);
      }
      .info__contacto{
        width: 45%;
        height: 60vh;
        padding: 5vh 3vw;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background-color: rgba(188, 222, 227, 0.75);
      }
            .box__info{
              width: 100%;
              height: auto;
              display: flex;
              align-items: center;
            }
                  .box__info i{
                    font-size: 2.4rem;
                    color: var(--azul);
                    height: auto;
                    object-fit: contain;
                  }
                  .contenido__info{
                    width: 90%;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-left: 20px;
                  }
                        .contenido__info p{
                          text-align: left;
                          font-size: 2rem;
                        }
                        .contenido__info span{
                          color: var(--titulo-b);
                          text-align: left;
                          font-size: 1.6rem;
                        }
      .formContact{
        width: 45%;
        height: 60vh;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        background-color: rgba(188, 222, 227, 0.75);
      }
            .infoUsuario{
              width: 90%;
              height:100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              
            }
                  .infoUsuario p{
                    width: 100%;
                    height: 10%;
                    margin-bottom: 3vh;
                  }

                  .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;
                  }
                  
                  .infoUsuario textarea{
                    width: 100%;
                    height: 200%;
                    resize: none;
                    border: none;
                    border-radius: 8px;
                    background-color: var(--aqua);
                    font-family: 'roboto', sans-serif;
                    color: var(--titulo-b);
                    text-align: justify;
                  }
                .infoUsuario input{
                  width: 100%;
                  height: 100%;
                  border: none;
                  border-radius: 8px;
                  background-color: var(--aqua);
                }

                      .infoUsuario p input{
                        padding-left:5%;
                        font-size: 1.6rem;
                      }
                      .infoUsuario p textarea{
                        padding-left:5%;
                        font-size: 1.6rem;
                        padding-top: 1vh;
                      }

                form.formContact button{
                  width: 45%;
                  height: 100%;
                  background-color: var(--azul);
                  font-weight: 600;
                  font-size: 2rem;
                  margin-top: 6vh;
                  color: var(--aqua);
                  border: none;
                  border-radius: 25px;
                  box-shadow: 0px 0px 8px #833471;
                  cursor: pointer;
                  transition: all 300ms ease-out;
                  margin-left: 27.5%;
                }
                form.formContact button:hover{
                  transform: scale(1.1);
                }

.map{
  width: 100%;
  height: auto;
  margin-bottom: 10vh;
  display: flex;
  justify-content: center;
  border-radius: 10px;
}
      .map iframe{
        border-radius: 10px;
        box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.5);
      }






    #trabajando{
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #161A30;
    }
          #trabajando div{
            width: 50%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          
          } 
                #trabajano .logoTrab,h1,span{
                  text-align: center;
                }

                    .logoTrab{
                      width: 28%;
                      height: auto;
                    }
                          .logoTrab img{
                            width: 100%;
                            height: auto;
                            object-fit: contain;
                          }
                    #trabajando h1{
                      margin-top: 4vh;
                      color: var(--aqua);
                      font-size: 2rem;
                    }
                    #trabajando span{
                      margin-top: 2vh;
                      font-size: 1.3rem;
                      color: var(--aqua);
                    }



/* #2e3c46 */