/* --------------- PORTADA ----------------- */

.contenedor-hero{
position: relative;
background: linear-gradient(to right, rgba(28,64,223,1) 0%, rgba(18,121,231,1) 100%);
}
.curve{
  height: 90vh;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
#particles-js{
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  z-index: 50;
}

#svgPortada{
  position: absolute;
  top: 0;
  height: 100%;
  right: 0;
}
#svgPortada path{
  fill: #HeroGradient;
}

#svgPortadaFinal{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 100;

}

#svgPortadaFinal path {
  fill: #ffffff;
}

.portada{

  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: start;
}

.portada h1 {
  width: 50%;
  position: absolute;
  margin: 0;
  padding: 0;
  color: #F5F8F8;
  z-index: 80;
  cursor: default;
  margin-left: 120px;
  margin-top: 77px;
}

/* --------------- END PORTADA ----------------- */


/* --------------------CONTENIDO ------------------- */


    /* NOSOTROS */
.contenedor{
  margin: 0 auto;
  height: auto;
}

.info{
  height: 50%;
  background: #ffffff;
  display: grid;
  grid-auto-columns: 1fr 0.8fr;
  grid-template-areas: "text img";
  /* margin-top: 100px; */
}
.img-content {
  display: flex;
  position: relative;
  grid-area: img;
  align-items: center;
  align-content: flex-end;
  justify-content: center;
}



.nosotros-img{
  width: 60%;
}

.tex-content{
  display: flex;
  margin-left: 80px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-self: end;
  grid-area: text;
  margin-top: 100px;
  z-index: 20;
}
.tex-content p{

  /* text-align: center; */
  line-height: 20px;
  width: 70%;
  margin-right: 0;
  padding: 10px;
}
                      /* END NOSOTROS */

                        /* SERVICIOS */
.servicios {
  position: relative;
  height: 500px;
  background: #ffffff;
  display: grid;
  grid-template: 1fr / 0.8fr 1fr;
}

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


#imgServ{
  width: 60%;

}

.serv-text{
  display: flex;
  width: 80%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.serv-text p{
  line-height: 20px;
  padding: 10px 20px;

}
  /* ----------------------END SERVICIOS -----------------*/


/*----------------------- ITEMS-------------------------- */

.item-container {
  padding-top: 2em;
  padding-bottom: 5em;
  width: 90%;
  margin:0px auto;
  margin-top: 50px;
  display: grid;
  grid-template-columns:  repeat(3, 1fr);
}
.item {
  height: 400px;
  /* transform: scale(0.5); */
  transition: .5s;
  display: grid;
  justify-items:center;
  align-items: center;
  grid-gap: 5px;
  margin: 8px;
  background: white;
  will-change: transform;
  grid-template-rows: auto 40px auto auto;
  grid-template-areas: "a"
                       "b"
                       "c"
                        "d";
}


.item img {
  justify-self: center;
  grid-area: a;

}

.t-soft{
  margin: 0;
  grid-area: b;
  align-self: end;
  text-align: center;
}
.t-text{
  width: 90%;
  padding: 10px;
  line-height: 18px;
  text-align: center;
  font-size: 0.8em;
  grid-area: c;
  justify-self: center;
  align-self: center;
}
.item a {
  grid-area: d;
  margin-bottom: 10px;
  width: 50%;
  justify-self: center;
  font-size: 0.9em;
  padding: 3px;
}

/* ------------------------END ITEMS -----------------------------*/





/*---------------------------- CONTACTO ---------------------------- */


/* ---------------------------FOOTER ---------------------------------- */

.foot-container{
  padding-top: 20px;
  background: rgba(0,0,0,0.9);
  height: 70px;
  color: #F5F8F8;
}
.foot-links{
  display: flex;
  justify-content: center;
  width: 50%;
  margin: 0 auto;
}
.foot-links a {
  color: white;
  font-size: 0.9em;
  margin-right: 15px;
}
.foot-links a:before {
  content: '|';
  font-size: 1.1em;
  color: #0AD3FF;
  padding-right:  15px;
}
.foot-links a:first-child:before{
  display: none;
}

.legal{
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

/* ---------------------------END FOOTER ---------------------------------- */

/* ---------------------------------BOTONES ---------------*/


/* ---------------------- END BOTONES -------------------- */




/* ---------------------- RESPONSIVE ---------------------*/
/*------------------------ RESPONSIVE ---------------- */


@media screen and (max-width: 800px) {



/*---------------------------- NOSOTROS--------- */

  .info{
        height: auto;
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-rows: 1.5fr 1fr;
        grid-template-areas: "img"
                              "text";
        padding-top: 30px;
  }

  #svgInfo{
    width: 40%;
  }
  .nosotros-img{
    width: 60%;
  }
  .tex-content{
      margin: 0 auto;
      width: 90%;

  }
  .tex-content p{
      text-align: center;
  }
/*------------------------END NOSOTROS--------- */

/*------------------------- SERVICIOS ------------- */

  .servicios{
      height: auto;
      grid-template: 300px auto / 1fr;
  }

  #imgServ{
    width: 40%;
  }

  .serv-text{
      margin: 0 auto;
      text-align: center;
  }

/*------------------------- END SERVICIOS ------------- */

/*------------------- -------ITEMS--------------------- */
  .item-container {
        grid-template-columns: repeat(2, 1fr);
        width: 95%;
  }

/*------------------- -------END ITEMS--------------------- */

}



@media screen  and (max-width: 650px) {

  #svgPortada{
    display: none;
  }
  .portada h1 {
    width: 70%;
    position: static;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
  }

  .portada{
    top: 35%;
  }

  .titulo{
    font-size: 1em;
  }

  /* CONTENIDO */
  .info{
        grid-template-rows: 1.1fr 1fr;
  }

  #svgInfo{
    width: 40%;
    bottom: 5px;
  }
  .nosotros-img{
    width: 60%;
    bottom: 10px;
  }


  .item-container{
    grid-template-columns: 1fr;
    width: 80%;
  }

}

@media screen and (max-width: 550px) {
  .info{
        grid-template-rows: 0.8fr 1fr;
  }
}

@media screen and (max-width: 500px) {

  .portada h1 {
    width: 80%;
    position: static;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
  }

  .info{
        grid-template-rows: 0.7fr 1fr;
        padding-top: 30px;
  }

  .item-container{
    width: 95%;
  }

}

@media screen and (max-width: 450px) {
  .info{
        grid-template-rows: 0.6fr 1fr;
  }

}

@media screen and (max-width: 400px) {




    .info{
          grid-template-rows: 0.5fr 1fr;
    }
    #svgInfo{
      width: 40%;
      bottom: 15%;
    }
    .nosotros-img{
      width: 60%;
      bottom: 20%;
    }

    #imgServ{
     width: 60%;
    }
}
@media screen and (max-width: 300px) {
  .info{
        grid-template-rows: 0.3fr 1fr;
  }
}