Haga lo que hicimos 07

Ajustando el diseño para pantallas más pequeñas

.presentacion {
    display: flex;
    gap: 20px; /Ajusta el valor según sea necesario/
}

Implementando media queries para cambios en el diseño

@media screen and (max-width: 1023px) {
    .presentacion {
        flex-direction: column;
        align-items: center; 
    }
}

Refinando el diseño responsivo

@media screen and (max-width: 1200px) {
    .presentacion {
        flex-direction: column-reverse;
    }
}

Ajustando el encabezado para pantallas más pequeñas

.encabezado {
    padding: 20px 10px;
    text-align: center; 
}

Centrando elementos del menú en pantallas más pequeñas

.header__menu {
    display: flex;
    justify-content: center;
    align-items: center; /* Opcional: centra verticalmente si es necesario */
}

Refinando el diseño responsivo del encabezado

.encabezado {
    padding: 15px 20px; 
    display: flex;
    justify-content: center;
    align-items: center;
}