@media (max-width: 870px) {
    .header_pc{
        display: none;
    }

    nav {
        display: flex;
        padding: 0%;
        justify-content: space-between; /* Asegura separación entre logo y menú */
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .nav_links_container{
        display: none;
    }
    
.burg_menu_container {
    display: flex;
    align-items: center;
    position: relative; /* importante para posicionar el .nav_list relativo a esto */
    margin-left: auto;
}
.nav_list{
    right: 0;
    left: auto;
    position: absolute;
    top: 100%;
    z-index: 999;
    list-style: none;
    font-size: 4vh;
}
.nav_list.show {
    display: flex; /* Mostrar cuando se activa */
}

.header_mobile{
    display: grid;
    width: 100%;;
}
    
.contenedor_mobile{
        display: grid;
        grid-template-columns: 1fr 4fr;;
        background-color: #060b16ce;
        color: #fff;
        
        text-align: center;
        z-index: 19;
        height: 35vh;
        font-family: veka;
        padding-top: 0;
    }
.texto_header_mobile{
    font-size: 2.5vh;
}
    .mobile_nombre h1 {
  font-family: times;
  font-size: 5vh;
  margin-top: 2vh;
  margin-bottom: 0.5rem;
}
.mobile_links{
    color: #ffffff;
  transition: transform 0.2s; 
  text-decoration: none;}

  .mobile_redes{
    margin-top: 3vh;
  }
    
    .foto{
        width: 16vh;
        margin-top: 11vh;
    }

    .header_flexchild:first-child {
    flex:0;
    margin-right: 0vh;
    margin-left: 4vh;
}

.header_flexchild_4{
    margin-top: 4vh;
}
.correo_container{
    margin-top: 1vh;
}

.copiar_btn{
    display: none;
}
.toast{
    display: none;
}

.about_details {
    font-size: 2.5vh;

    padding: 3.5vh;
    border-radius: 8px;
}

.skills{
    grid-template-columns: 1fr 1fr 1fr;
}
}

@media (max-width: 480px){
    .skills{
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 720px){
    
    .header_mobile h1 {
        font-size: 1.1rem;
    }

    h2{
        font-size: 1.2rem;
    }
    
    .projects {
        padding: 1.6vh;
    }
}

@media (max-width: 400px){
    .projects {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Ajusta el número de columnas según el espacio disponible */
    }
    
    .project{
        min-height: 400px;
    }

    .project:hover{
        transform: scale(1.0);
}
}