@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lexend Deca', sans-serif;}
/*! Header */
.container{
  display: grid;
  padding: 30px 200px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 45px 400px 260px 700px 800px  320px 330px 150px;
  grid-template-areas: 
  "header header" 
  "main main"
  "division division"
  "introduccion introduccion"
  "tools tools"
  "descarga descarga"
  "redes redes"
  "footer footer"
  ;
  row-gap: 120px;
  background:repeating-linear-gradient(90deg,#25292e, #000000 ) ;
}
.containerHeader{
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.logo{
  display: flex;
  align-items: center;
  width: 100px;
}
.logo>img{
  width: 28px;
  margin-right: 10px;
}
.logo > p{
color: rgb(228, 199, 255)
;}
.navHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  }
 
li > a{
  text-decoration: none;
  color: white;
  font-weight: 300;
  font-size: 1rem;
  margin-right: 50px;
}

#btnOpen{
  background: rgb(217,74,255);
  background: linear-gradient(90deg, rgba(217,74,255,1) 0%, rgba(50,236,255,1) 100%);
  padding: 8px;
  width: 120px;
  border-radius: 20px;
  border-style: none;

  
}
#btnOpen > a{
  color: white;
  text-decoration: none;
  font-size: 1em;
  font-weight: 300;
}


/*! MAIN */

main{
  grid-area: main;
}

.content-main{
  display: flex;
  justify-content:space-between;
  background-size: 40%;
  background-repeat: no-repeat; 
  background-image:url("img/Speakers.png");
  background-position: 70% ;
  width: 100%;
  height:395px;

}
#titleMain{
  align-self: flex-end;
  width: 60%;
  font-size: 4em;
  margin-bottom: 40px;
  color: white;
  font-weight: 600;
}

#btnMain{
  align-self: flex-end;
  background: rgb(217,74,255);
  background: linear-gradient(90deg, rgba(217,74,255,1) 0%, rgba(50,236,255,1) 100%);
  padding: 10px;
  width: 100px;
  border-radius: 20px;
  border-style: none;
  margin-bottom: 50px;
  color: white; 
  font-weight: 300;
}

.division{
  grid-area: division; 
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%; 
  height:380px;
  left: 0;
  background: linear-gradient(50deg, rgba(217,74,255,1) 0%, 
    rgba(50,236,255,1) 100%);

}
.division > img{
  position: block;
  padding: 0 50px;
}


/*! INTRODUCCION */

.introduccion{
  grid-area: introduccion;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.introduccion> h1{
  color: white;
  margin-bottom: 15px;
}

.introduccion> p{
  color: gray;
  text-align: center;
  width: 40%;
  margin-bottom: 15px;
  font-size: 0.83em;

}
.introduccion> img{
  width: 75%;
  border-style: solid;
  border-radius: 20px;
  border-color: rgb(200, 80, 255);
}

/*! TOOLS HERRAMIENTAS */
.marca{
  display: block;
  position: static;
  width: 120px;
  z-index:1;
  color: white !important;
}


.tools{
  grid-area: tools;
  max-width: 100%;
  display: flex;
  flex-direction: column; 
  justify-content: space-between;
  align-items: center;
}
.description-tools{
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 40%;
  color: white;
}
.description-tools>p{
  font-size: 0.83em;
  color: #737980;
}
.card1, .card2, .card3, .card4{
  border-radius: 15px;
}
.description{
  width:80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}
.description>h2{
  color: white;
  margin-bottom: 5px;
}
.cards{
  width: 75%;
  height: 610px;
  display: flex;
  flex-flow: column wrap;
  gap: 10px;
  
}
.cards > *{
  background-color: #26272e;
}
.cards p{
  display: block;
  width: 70%;
  font-size: 0.83em;
  color: #737980;
}



.card1{
  width: 50%;
  height: 360px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap:wrap ;
  justify-content: space-between;
  position: relative;
  gap: 15px;
  overflow: hidden;

}

.card1 > img{
  position: absolute;
  width: 65%;
  right: 20px;
  bottom: 20px;
  z-index: 0;
}



.card2{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
  position: relative;
  width: 50%;
  height: 240px;
  padding: 20px;
  overflow: hidden ;
}
.card2> img{
  position: absolute;
  width: 80%;
  bottom: 0;
  right:0;
  left: 100px;
  z-index: 0;
}





.card3{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  width: 48.5%;
  height: 240px;
  padding: 20px;
  overflow: hidden;

}
.card3> img{
  position: absolute;
  width: 50%;
  right: 0;
  z-index: 0;
}




.card4{
  height: 360px;
  width: 48.5%;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;

}
.card4>img{
  position: absolute;
  width: 80%;
  bottom:-50px;
}

/*! DESCARGAS */

.descarga{
  grid-area: descarga;
  display: flex;
  justify-content: center;
}
.content-descarga{
  background-color: #26272e;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  width: 75%;
  padding: 20px;
  border-radius: 14px;
}

.descripcion-descarga{
  width: 70%;
  z-index: 1;
  color: white;
}
.descripcion-descarga > p{
  color: #737980 ;
;
}
.opciones-descarga{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 45%;
  overflow: scroll;
}
.opciones-descarga button{
  border-style: none;
  width: 100px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  cursor: pointer;
  background-color: #2c2d34;
  border-radius: 15px;
}

.opciones-descarga button:hover{
  background: linear-gradient(50deg, rgba(217,74,255,1) 0%, 
  rgba(50,236,255,1) 100%);
 
}

.opciones-descarga  button > img{
  width: 24px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
}
.opciones-descarga button > a{
  text-decoration: none;
  font-weight: bolder;
  color: #737980;
}


.img-descarga> img{
  position: absolute;
  right: -30px;
  top: -20px;
  width:45%;
  z-index: 0;
}


/*! REDES SOCIAL */

.social-media{
  grid-area: redes;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  padding: 20px;
  color: white;
}
.social-media > p{
  color: #737980;
}
.correos{
  width: 50%;
  min-width:450px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  
}
.correos img{
  width: 26px;
}
.hellocorreo, .helpcorreo{
  background-color: #26272e;
  margin: auto;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  width: 45%;
  padding: 30px 40px;
  border-radius: 8px;
  cursor: pointer;
}

:is(.hellocorreo, .helpcorreo) >a{
  color: #898b9a;
  text-decoration: none;
}
.redes-sociales{
  width: 65%;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
}
.redes-sociales img{
  width: 26px;
  margin-right: 5px;
}

.twitter, .facebook, .instagram, .youtube{
  width: 160px;
  min-width: 150px;
  background-color: transparent;
  border: #898b9a solid 1px;
  border-radius: 8px;
  padding:1px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

:is(.twitter, .facebook, .instagram, .youtube) a{
  color: #737980;
  text-decoration: none;

}

/*! FOOTER */

.footer{
  grid-area: footer;
  display: flex;
  justify-content: space-between;
  align-items: center; 
  border-top: gray solid 1px;
  color: #737980;
}
.diseño{

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 60px;
}

.diseño> p>a{
  text-decoration: none;
  color: violet;
}