body {
      margin: 0;
      /* Elimina el margen por defecto del navegador */
      font-family: Times new roman, sans-serif;
      /* Define la fuente principal del sitio */
    }

    /* Contenedor principal del menú de navegación */
    nav {
      background-color: #7900ac;
      /* Color de fondo oscuro para el menú */
      overflow: hidden;
      /* Evita que los elementos floten fuera del contenedor */
    }

    /* Estilo para cada enlace del menú */
    nav a {
      float: left;
      /* Alinea los enlaces horizontalmente */
      display: block;
      /* Hace que cada enlace ocupe todo el espacio disponible */
      color: white;
      /* Color del texto de los enlaces */
      text-align: center;
      /* Centra el texto dentro de cada enlace */
      padding: 14px 20px;
      /* Espaciado interno: 14px arriba/abajo, 20px izquierda/derecha */
      text-decoration: none;
      /* Elimina el subrayado de los enlaces */
    }

    /* Efecto visual al pasar el mouse sobre los enlaces */
    nav a:hover {
      background-color: #56008c;
      /* Cambia el fondo al pasar el mouse */
      color: white;
      /* Asegura que el texto siga siendo blanco */
    }

    /* Ícono del menú (☰), oculto por defecto en pantallas grandes */
    nav .icon {
      display: none;
      /* No se muestra hasta que se active en pantallas pequeñas */
    }

    /* Estilos para pantallas pequeñas (menos de 600px) */
    @media screen and (max-width: 600px) {
      nav a {
        display: none;
        /* Oculta todos los enlaces del menú */
      }

      nav a.icon {
        float: right;
        /* Alinea el ícono a la derecha */
        display: block;
        /* Muestra el ícono ☰ */
      }

      nav.responsive {
        position: relative;
        /* Permite posicionar el ícono correctamente */
      }

      nav.responsive a {
        float: none;
        /* Elimina el flotado para que los enlaces se apilen verticalmente */
        display: block;
        /* Muestra los enlaces como bloques uno debajo del otro */
        text-align: left;
        /* Alinea el texto a la izquierda */
      }

      nav.responsive a.icon {
        position: absolute;
        /* Posiciona el ícono de forma absoluta */
        right: 0;
        top: 0;
        /* Lo coloca en la esquina superior derecha */
      }
    }