@import  url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
@import  url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600&display=swap");
@import  url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300&display=swap");
@import  url("https://fonts.googleapis.com/css?family=Poppins&display=swap");


*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
   box-sizing: border-box;
}
/* breakpoints movil */

header{
  padding:20px 20px;
  position: relative;
}



.logo{
  position: absolute;
}
#toggle{
  display: none;
}
.nav-menu{
  position: absolute;
 
 
    
  
   
  
}
.nav-menu ul{

  margin: 0;
  padding: 0;
}
.nav-menu ul li >a{
  font-family:"IBM Plex Mono" ,monospace ;
  text-decoration: none;
  color: #FFFFFF;
  display: block;
  line-height: 35px;
}
.nav-menu li a:hover{
  color: #00F3BB;
  text-decoration-line: line-through;
}
.nav-menu  a:active{
 color:#060A24;
 
}
.navbar , .nav{
  display: flex;
  justify-content: flex-end;
}



.nav-menu ul{
  list-style: none;
  padding: 6px 35px;

 
  
}


label{
  display: block;
}
.nav-menu{
width: 90%;
  margin-top: -70%;
  transition: all 0.5s;
  background-color: #0000EC;

 
}
.nav{
  
  margin-top: 20px;
  
 
}
   
  label #cancel{
    display: none;
  }



#toggle:checked ~ .nav .nav-menu{
  margin: 0;
}
#toggle:checked ~  label #ico{
  display: none;
}
#toggle:checked ~ label #cancel{
display: block;
}

.title{
 width: 90%;
 height: 100%;
 margin-top: 40px;
 margin-bottom: 16px;
 margin-left: 10px;



}

.title h1{
    font-family : "IBM Plex Sans" , sans-serif;
   font-size: 36px;
line-height: 40px;
    width: 100%;
    font-weight: 600;
    
}
.title #linea{
    text-decoration-line: line-through;
}
 .punto {
   color : #0000ec;

    
  }
.title .paragraph{
  display:block;
    font-family : "IBM Plex Mono" ,sans-serif;
    font-size : 16px;
  line-height : 20px;
    text-align :justify;
 padding-top: 1em;
 color: #060A24;
    
   
}

.btn-main{
    width: 100%;
}

.btn {
    font-family : "IBM Plex Mono" ,monospace;
    font-size : 16px;
      text-transform :uppercase;
     text-align: center;
      display: inline-block;
     font-weight: bold;
      background-color: #00f3bb;
      text-decoration :none;
      color:#060a24;
      padding: 13px  90px;
     margin-top:40px;
    
  }

  .btn:hover {
   background :linear-gradient( 225deg ,  #0000fe  0% ,  #00f0b8  100% );
   color: #FFFFFF ;
    
  }
  .chapters{
      position: relative;
      padding-top: 4rem;
  }
  

 .chapters-elements iframe {
   max-width: 100%;
   width: 320px;
    height: 232px;
    border: 0px;
    margin:7px 20px;
   
   
     

  }
  .second-title{
      font-family: "IBM Plex Sans" , sans-serif;
     color: white;  
   font-size : 30px;
   text-transform: uppercase;       
     padding: 4%;
     
     
  }
  .bg-polygon {
 
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left:0;
 clip-path: polygon( 0  3% ,  100%  0 ,  100%  95% ,  0%  100% );
 clip-path:polygon( 0  3% ,  100%  0 ,  100%  95% ,  0%  100% );
 height: 1400px;
 background: linear-gradient( 225deg ,  #0000ff  0% ,  #0000a3  100% );;
 z-index: -1;

  }
  
 .about, .about-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .about-container  #celphone {
      width: 340px;
    height: 519px ;
    transform: translateY(15px);


   
  }
 

  .about-container,  .description, .secondary-title{

   width:90%;
   padding: 20px 0;
  
     
  }
  .description{
    margin: auto;
    word-spacing: 4px;
    
  }
 
  .secondary-title{
      font-family: "IBM Plex Sans" , sans-serif;
      font-size: 36px;
      padding-bottom: 10px;


  }

  .about-container .description p {
    font-family:"IBM Plex Mono" ,monospace;
    color: #060a24;
    font-size: 14px;
   line-height: 22px;
  }
  .container-interviews img{
    width: 100%;
  }
  .container-interviews {
    
    display:grid;
    grid-template-columns: repeat(1,1fr);
    margin: 0;
    padding: 0;
 
  }
  
.interviews .second{
  font-family: "IBM Plex Sans", sans-serif;
   display: block;
    margin-left: 20px;
    line-height: 50px;
    color: #060A24 ;
    font-size: 36px;
    padding-top: 20px;
    
}
.topics{
  padding-top: 40px;
}
.topics-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around; 
    -webkit-box-align: center;
        -ms-flex-align: center;
           align-items: center;
   text-align: center;
  }
  .topics-container{
    margin: 50px auto;
  }
  .topic{
    padding:1em 0;
  }
  .topics-container .topic-title {
    font-size: 24px;
    font-family: "IBM Plex Sans", sans-serif;
    line-height: 32px;
    color: #060a24;
    font-weight: 600;
    margin: 10px 0;
  }
  .dark-title{
    font-family: "IBM Plex Sans" , sans-serif;
    font-size: 30px;
    margin-left: 0.6em;
  
  }
  .container-news {
    position: relative;
    display: -webkit-box;
   display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            width: 100%;
            height: 341px;         
    
  }
  .container-news {
    -webkit-clip-path: polygon( 0  3% ,  100%  0,  100%  100% ,  0%  100% );
            clip-path: polygon( 0  3% ,  100%  0 ,  100%  100% ,  0%  100% );
  
         
           
  }
  .container-news .titulo-secundario {
   font-family: "IBM Plex Sans" , sans-serif;
    font-size: 36px;
    font-weight: 600;
    padding: 6%;
    color: #fff;
    text-align:center;
    width: 80%;
    padding: 50px;
    opacity: 100%;
  }
.container-news .btn-principal{
    font-family: "IBM Plex Mono" ,monospace;
    font-size: 16px;
      text-transform :uppercase;
     text-align: center;
      display: inline-block;
     font-weight: bold;
      background-color: #00f3bb;
      text-decoration :none;
      color:#060a24;
      padding: 15px;
     width: 80%;
    
}

.container-news  a:hover {
 background:linear-gradient( 225deg ,  #0000fe  0% ,  #00f0b8  100% );
  color: #fff;
}
.social-media{
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
      justify-content:space-evenly;
     margin:30px 0;
 
}
[class^="fab fa"]{
    font-size: 16px;
    color:black;
  
}
.footer{

 text-align: center;
    margin-top: 20px;
    
}
.footer p{
    font-size:14px;
    color:#060A24 100%;
    font-family : "IBM Plex Mono" ,monospace;


}

/* breakpoints desktop */

@media screen and (min-width:768px){
  header{
    padding:0;
    position: relative;
  }
  
  body, html{
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .logo{
   padding: 20px 80px;
  }
 
 .nav-menu{
   width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
  
  }

  
#toggle{
  display: none;
}

  label{
   display: none;
 }
.nav-menu ul li >a{

  text-decoration: none;
  color: #060A24;
  display: block;
  line-height: 30px;
  padding: 20px;
}

.nav-menu li{
  border-bottom:none
}


.nav-menu ul{
display: flex;
flex-direction: row-reverse;
list-style: none;


 
}

.nav{
padding: 0;
margin: 0;
  
}




.title {
  padding:80px 0 0 100px;
 margin-top: 100px;
 width: 70%;
    
  


}
.title  h1 {
font-size: 64px;
 font-weight: 600 ;
 margin-bottom: 20px;
}
.title .btn-main{
  width: 30%;
 margin-top: 35px;
}

.btn {
  font-family : "IBM Plex Mono" ,monospace;
  font-size: 16px;
    text-transform :uppercase;
   text-align: center;
    display: inline-block;
   font-weight: bold;
    background-color: #00f3bb;
    text-decoration :none;
    color:#060a24;
    padding: 15px  30px;
   
  
}
.title .paragraph {
 font-family: "IBM Plex Mono" ,monospace;
 font-size: 16px ;
 text-align: justify;
 
 
}
.bg-polygon {
  -webkit-clip-path:polygon( 0 14% ,  100%  0 ,  100%  85% ,  0%  100% );
          clip-path:polygon( 0  14% ,  100%  0 ,  100%  85% ,  0%  100% );
  height: 950px;
  z-index: -1 ;
}
.chapters-elements{
  display: grid;
  grid-template-columns: repeat(2,1fr);
 
  
 
  
}
.chapters{
  padding: 5rem;
}



.chapters-elements iframe{
  width:584px;
  height: 232px;
  margin-bottom: 20px;

  
 
}

.chapters .second-title{
  font-family:  "IBM Plex Sans" , sans-serif;
  font-size: 48px;
  text-align: justify;
  margin: 30px 20px 0 0;
  
}

.about-container  #celphone {
  width: 340px;
height: 519px ;
transform: translateY(-40px);



}
.about ,.about-container {
 display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
       justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
       align-items: center;
}
.about-container{

  width:65%;
    
 }
.about-container,  .description, .secondary-title{

  width:90%;
  padding: 20px 0;
 
    
 }
.container-interviews{
  
  display:grid;
  grid-template-columns: repeat(3,1fr);
  margin: 0;
  padding: 0;
}
.interviews .second{
 
  margin:0 0 20px 100px;
  line-height: 42px;
  color: #060A24 ;
  font-size: 40px;
 
  
}
.topics-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around; 
  -webkit-box-align: center;
      -ms-flex-align: center;
         align-items: center;
 text-align: center;

}
.topics {
 margin:0 120px;
  
}
.topic{
  padding: 1em 0;
}

.dark.title{
  font-family:"IBM Plex Sans" , sans-serif ;
  font-size: 48px;
  color: #060A24;
  margin-left: 60px;
  margin-bottom: 40px;

}  
 

.secondary-title{
  font-family: "IBM Plex Sans" , sans-serif;
  font-size: 48px;

}

.about-container .description p {
font-family:"IBM Plex Mono" ,monospace;
color: #060a24;
font-size: 16px;
line-height: 20px;
}
.about-container{

  width:70%;
    
 }
 .description{
   margin: auto;
   word-spacing: 4px;
 width: 39%;
   
 }
 .secondary-title{
  font-family: "IBM Plex Sans" , sans-serif;
  font-size: 36px;
 display:inline;
 line-height: 90px;


}




.container-news .bottom-polygon, .bottom-poly-deskt {
  width: 100%;
  height: 100%;
position: absolute;
 top: 0;
  bottom: 0;
 right: 0;
 left: 0;
 background: linear-gradient( 225deg ,  #0000ff  0% ,  #0000a3  100% );;
  -webkit-clip-path: polygon( 0  25% ,  100%  0 ,  60%  100% ,  0%  100% );
  clip-path:polygon( 0  25% ,  100%  0 ,  100%  100% ,  0%  100% );
  z-index: -1;

}
.container-news{
  height: 65vh;
  padding: 120px 0;
}
.container-news .titulo-secundario {
  font-family: "IBM Plex Sans" , sans-serif;
   font-weight: 600;
   color: #fff;


   
 }
 
.container-news .btn-principal{
  font-family: "IBM Plex Mono" ,monospace;
  font-size: 18px;
    text-transform :uppercase;
   text-align: center;
    display: block;
   font-weight: bold;
    background-color: #00f3bb;
    text-decoration :none;
    color:#060a24;
    padding:15px;
   width: 25%;
 
}


.footer{
  margin-top: 0 ;
  display: -webkit-box;
  display : -ms-flexbox;
display : flex;
  -webkit-box-orient : horizontal;
  -webkit-box-direction : normal;
      -ms-flex-direction : row;
        flex-direction: row;
  -webkit-box-pack : justify;
      -ms-flex-pack : justify;
          justify-content: space-between;
  
}
.social-media{
  display: -webkit-box;
    display: -ms-flexbox;
   display: flex;
   justify-content: flex-end;
  
}
.social-media a, i{
  padding: 0 30px 0 0;
  
}
.footer p{
  padding: 30px 0 0 35px;
 
}

}