/*HEADER-------------------------------------------------------------*/
#inicio {
  scroll-margin-top: 8dvh;
}

.section-header {
  min-height: 90dvh;
  display: flex;
}

.article-header {
  flex: 4;
  min-width: 300px;
}

.aside-header {
  flex: 2;
  min-width: 300px;
  max-width: 450px;
  align-items: end;
}

.ul-links {
  width: 100%;
  min-height: 40%;
  align-items:flex-end;
}

.a-link {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.a-link:hover{color: var(--negro);}

.a-link:hover .icon path,
.a-link:hover .icon circle {
  fill: var(--negro); /* Cambia el color de relleno de los elementos path y circle */
}


.a-link:hover .icon-cv circle {
  fill: var(--negro); /* Cambia el color de relleno de los elementos path y circle */
}

.a-link:hover .icon-cv path{
  fill: var(--acento);
}



.icon{
  height: 2.5em;
  width: 2.5em;
}

.animate-link{
  position: relative;
  z-index: 5;
  overflow: hidden;
}

.animate-link::before{
  content: '';
  position: absolute;

  width: 0;
  height: 100%;
  
  top: 0;
  left: 5%;/*inicia al comienzo del elemento*/
  
  background-color: var(--acento);
  transition: width 0.2s ease;
  transform: skewX(-20deg);

  z-index: -1;
}
.animate-link:hover::before{
  width: 90%;
}



@media(max-width:1108px){
  .icon{
    width: 2rem;
    height: 2rem;
  }
}



@media(max-width:600px) {

  .section-header{
    flex-direction: column;
  }

  .article-header{
    margin-bottom: 4rem;
  }

  .margin-top-128{
    margin-top: 4rem;
  }

  .margin-left-64{
    margin-left: 1rem;
  }

  .aside-header{
    padding: 0;
  }


  .ul-links{
    gap: 3dvh;
  }

  .aside-header{
    max-width: 100%;
    gap: 4dvh;
    padding: 4dvh 0;
  }

  .icon {
    height: 1.75em;
    width: 1.75em;
  }
  
}