@media (max-width: 1024px){

/* HEADER y NAV */

    header{
        height: auto;
    }

     header .header__nav{
        flex-direction: column;
        height: 10%;
        padding: 0;
    }

     .nav__name{
        width: 100%;
        height: 2em;
        padding-top: 0.5em;
        font-size: 1.2rem;
        margin: 0.5em 0;
    }

    .nav__mobile-button{
        position: absolute;
        right: 1.5rem;
        top: 1em;
        opacity: 0;
        transition: all 1s;
        transform: none;
    }

    .nav__mobile-button i{
        font-size: 30px;
        color: white;
    }

   

    .nav__lista{
        flex-direction: column;
        width: 80%;
        height: auto;
        transition: all 1s;
        opacity: 0;
        height: 0;
        margin: 2em 0;
        padding: 0;
    }

    .nav__item{
        border-bottom: 3px double rgba(255, 166, 0, 0.726);
        width: 100%;
        text-align: center;
    }

    .nav__item--link{
        display: none;
    }

    .proyectos__item-container {
        position: relative;
        margin: 0.2em;
        width: 100%;
        padding-right: 0;
    }

    #select-arrow{
        color: white;
        position: absolute;
        right: 100px;
        top: 0;
        
   }

   .titulo{
    width: 60%;
   }

   .main__design-title{
        width: 45%;
   }

    /* QUIEN SOY */

    .header__quien-soy{
        flex-direction: column;
        height: 90%;
    }

    .quien-soy__retrato{
        order: -1;
        width: 55%;
        margin-bottom: 2em;
    }

    .quien-soy__tipografia{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .quien-soy__tipografia h1, .quien-soy__tipografia h3{
        font-size: 2rem;
        text-align: center;
    }

    .quien-soy__enlaces{
        margin: 3rem;
    }

    .enlaces__link{
        text-align: center;
        font-size: 0.8em;
    }

    .enlaces__link i{
        width: 100%;
    }


    .quien-soy__presentacion{
        text-align: center;
        width: 100%;
        margin-top: auto ;
    }

   

    .quien-soy__detalles{
        text-align: center;
        font-size: 1.8em;
    }
    
    /* SOBRE MI */

    .main__sobre-mi{
        flex-direction: column;
        align-items: center;
    }

    .sobre-mi__tipografia{
        width: 100%;
        text-align: center;
    }

    .sobre-mi__titulo{
        font-size: 2.2rem;
        width: 50%;
    }

    .sobre-mi__parrafo{
        align-self: center;
        width: 85%;
        font-size: 1.3em;
    }

    .sobre-mi__imagen{
        height: 90%;
    }
   
    /* Experiencia profesional */

    .experiencia-profesional__flex-containers{
        flex-direction: column;
        height: auto;
    }

    .experiencia-profesional__tipografia{
        width: 70%;
        order: -1;
        margin-bottom: 1em;
    }


  
    /* CONTACTO */

    .contacto__contenedor-form-redes{
        flex-direction: column;

    }

    .contacto .contacto__formulario{
        width: 100%;
    }

    .contenedor-redes{
        flex-direction: row;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .redes__links{
        width: 45%;
    }

    .redes__links:last-child{
        font-size: 14px;
    }
    
}

@media (min-width :1024px ) and (max-width: 1340px){
    header{
        height: auto;
        display: flex;
        flex-direction: column;
        height: auto;
    }

     header .header__nav{
        flex-direction: column;
        height: 10%;
        padding: 0;
    }

     .nav__name{
        width: 100%;
        height: 2em;
        padding-top: 0.5em;
        font-size: 1.2rem;
    }

    .nav__mobile-button{
        position: absolute;
        right: 1.5rem;
        top: 0.75em;
        opacity: 0;
        transition: all 1s;
        transform: none;
    }

    .nav__mobile-button i{
        font-size: 30px;
        color: white;
    }

    .nav__lista{
        flex-direction: column;
        width: 80%;
        height: 30vh;
        transition: all 1s;
        opacity: 0;
        height: 0;
        margin-top: 2em;
        padding: 0;
       
    }

    .nav__item{
        border-bottom: 3px double rgba(255, 166, 0, 0.726);
        width: 100%;
        text-align: center;
    }

    .proyectos__container{
        display: flex;
        flex-direction: column;
    }

    .proyectos__item-container {
        position: relative;
        margin: 0.4em;
        padding-right: 0;
        width: 100%;
        
    }

    .proyectos__item{
        border: 0px solid #2f2f2f;
        border-bottom: 1px solid #656565;
    }

    #select-arrow{
        color: white;
        position: absolute;
        right: 100px;
        top: 0;
        
   }

  

}