[Sugerencia] Solución al desafío: principios de la semántica HTML - Navegación

<!-- 
  Mejora semántica y accesibilidad aplicada:
  1. Se encapsula todo el contenido del encabezado dentro de un <header> para una estructura clara.
  2. El logo se coloca dentro de un <a> con la clase "encabezadologo" y el atributo aria-label para indicar su función.
  3. Se usa la etiqueta <nav> con un aria-label para señalar claramente que es la barra de navegación principal.
  4. Los enlaces de navegación se agrupan dentro de una lista <ul> para seguir una estructura más lógica.
  5. Se respetan las convenciones BEM añadiendo clases en la forma BlockElement--Modifier.
-->

<header class="encabezado">
  <!-- Enlace del logotipo, usado para volver a la página principal -->
  <a href="/" class="encabezado__logo" aria-label="Ir a la página principal">
    <img class="encabezado__logo--icono" alt="Logotipo de Jornada" src="./img/logoproviblanca-1@2x.png" />
  </a>

  <!-- Barra de navegación principal del sitio -->
  <nav class="encabezado__navegacion" aria-label="Navegación principal">
    <ul class="encabezado__navegacion--lista">
      <li class="encabezado__navegacion--item">
        <a class="encabezado__navegacion--enlace" href="#">Blog</a>
      </li>
      <li class="encabezado__navegacion--item">
        <a class="encabezado__navegacion--enlace" href="#">Paquete de viaje</a>
      </li>
      <li class="encabezado__navegacion--item">
        <a class="encabezado__navegacion--enlace" href="#">Contacto</a>
      </li>
    </ul>
  </nav>
</header>