Ejercicio de programación con CSS: Proyecto CSS crear una navbar

Crea un archivo HTML básico con la estructura necesaria para la navbar. Incluye un contenedor principal con clase navbar, un logo (puede ser texto o imagen), una lista no ordenada para los enlaces de navegación y un botón de contacto.

Configura las variables CSS en el archivo de estilos para definir la paleta de colores (color principal, secundario, de fondo, de texto), tamaños de fuente y espaciados que utilizarás en toda la navbar.

Implementa el diseño base de la navbar utilizando flexbox para distribuir los elementos horizontalmente. El logo debe estar a la izquierda, los enlaces de navegación centrados y el botón de contacto a la derecha.

Añade estilos para los enlaces de navegación, incluyendo efectos hover que cambien suavemente el color o añadan un subrayado. Implementa también un estilo específico para indicar la página activa.

Configura la navbar para que permanezca fija en la parte superior de la ventana cuando el usuario haga scroll, utilizando la propiedad position: fixed.

Implementa transiciones CSS para todos los efectos interactivos, asegurando que los cambios de estado (como hover) sean suaves y no abruptos.

Crea una media query para dispositivos con un ancho máximo de 768px. Dentro de esta regla, modifica el diseño de la navbar para que el menú de navegación se oculte y aparezca un icono de hamburguesa (puedes usar un elemento con tres líneas horizontales estilizado con CSS).

Implementa la funcionalidad del menú hamburguesa utilizando solo CSS (sin JavaScript). Puedes usar un checkbox oculto y el selector :checked para mostrar/ocultar el menú al hacer clic en el icono.

Asegúrate de que el menú desplegable en la versión móvil tenga una animación suave al abrirse y cerrarse, utilizando propiedades como transform y transition.

Realiza pruebas en diferentes tamaños de pantalla para verificar que la navbar se adapta correctamente y mantiene su funcionalidad y apariencia en todos los dispositivos.