/* Estilo para el contenedor de la lista de navegación */
ul {
    list-style-type: none;     /* Elimina los puntos de la lista */
    margin: 0;                 /* Quita el margen exterior */
    padding: 0;                /* Quita el relleno interno */
    display: flex;             /* Usa flexbox para organizar los elementos */
    flex-direction: column;   /* Los elementos se muestran en columna (uno debajo de otro) */
    /* Si quieres menú horizontal, cambia 'column' por 'row' */
  }

  /* Estilo para cada elemento de la lista */
  li {
    flex-grow: 1;              /* Permite que cada <li> crezca proporcionalmente */
  }

  /* Estilo general para los enlaces de navegación */
  a {
    display: block;            /* El enlace ocupa todo el espacio del <li> */
    padding: 1em;              /* Espaciado interno alrededor del texto */
    background-color: LightGray; /* Color de fondo del enlace */
    text-align: center;        /* Centra el texto */
    margin-bottom: 0.2em;      /* Espacio entre enlaces */
    text-decoration: none;     /* Quita el subrayado */
    color: #000000;            /* Color del texto (negro) */
  }

  /* Efecto cuando el mouse pasa por encima del enlace */
  a:hover {
    background-color: rgb(165, 87, 87); /* Cambia el fondo a rojo oscuro al pasar el mouse */
  }