- Ajustando el diseño para pantallas más pequeñas
.presentacion {
    padding: 6% 13%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}
- Implementando media queries para cambios en el diseño
@media (max-width: 1023px){
    .presentación{
        flex-direction: column;
        padding: 5%;
    }
   }
- Refinando el diseño responsivo
@media (max-width: 1200px){
    .presentación{
        flex-direction: column-reverse;
        padding: 5%;
    }
   }
- Ajustando el encabezado para pantallas más pequeñas
@media (max-width: 1023px){
    .header{
        padding: 10%;
    }
}
- Centrando elementos del menú en pantallas más pequeñas
@media (max-width: 1023px){
     .header__menu{
        justify-content: center;
    }
}
- Refinando el diseño responsivo del encabezado
.header{
    padding: 2% 0% 0% 15%;
}
.header__menu{
    display: flex;
    gap: 80px;
}
....
@media (max-width: 1023px){
    .header{
        padding: 10%;
    }
    .header__menu{
        justify-content: center;
    }
    .presentacion{
        flex-direction: column-reverse;
        padding: 5%;
    }
    .presentacion__contenido{
        width: auto;
    }
}