* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 50px;
}

.menu {
    width: 100%;
    height: 50px;
    display: flex;
    perspective: 200px;
    position: relative;
    z-index: 99;
}

.menu ul {
    display: flex;
    margin: auto;
}

.menu li {
    list-style: none;
    padding: 15px 20px;
    /* Quita estas líneas si solo contienen los <a> */
    /* color: black; */
    /* text-decoration: none; */
}

/* --- CAMBIOS CLAVE AQUÍ --- */
.menu a { /* Selecciona todos los enlaces (<a>) dentro de .menu */
    color: black; /* Color de texto negro para todos los enlaces */
    text-decoration: none; /* Elimina el subrayado de todos los enlaces */
    /* Asegúrate de que el enlace ocupe todo el espacio del <li> para que sea clicable */
    display: block; 
}

.menu li:hover a { /* Cuando pasas el mouse sobre el <li>, el enlace dentro se pone negro */
    color: black;
}
/* --- FIN DE CAMBIOS CLAVE --- */


.menu li:hover {
    background: rgba(220, 220, 220, 0.5); /* Gris claro elegante */
    /* Quita esta línea ya que el color del texto lo manejamos en .menu li:hover a */
    /* color: black; */ 
    cursor: pointer;
    transition: all 300ms;
}

.menu ul li ul {
    flex-direction: column;
    position: absolute;
    background: rgba(245, 250, 255, 0.95); /* Azul claro sutil */
    margin-top: 15px;
    transform: rotateY(240deg) scale(0);
    transition: all 1s;
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.menu ul li:hover > ul {
    transform: rotateY(0deg) scale(1);
    transition: all 1s;
}

.menu ul li ul:before {
    content: '';
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 8px solid rgba(245, 250, 255, 0.95);
    position: absolute;
    margin-top: -8px;
    margin-left: 20px;
}

.menu ul li ul li ul li {
    position: relative;
}

.menu ul li ul li:hover > ul {
    transform: rotateY(0deg) scale(1);
}

.menu ul li ul li ul {
    right: -90px;
    top: 36px;
    background: rgba(255, 240, 220, 0.95); /* Beige moderno */
    border-radius: 6px;
}

.menu ul li ul li ul:before {
    position: absolute;
    border-bottom: 8px solid rgba(255, 240, 220, 0.95);
    margin-top: 18px;
    margin-left: -14px;
    transform: rotate(-90deg);
}