/* Estilos generales*/
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}

.menu-container {
background-color: #333;
padding: 10px 20px;
font-weight: 700;

}

.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}

.menu > li {
position: relative;
padding: 15px 20px;
color: white;
cursor: pointer;
}

.menu > li a {
color: white;
text-decoration: none;
}

.menu > li:hover {
background-color: #444;
}

.submenu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
display: none;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.submenu li {
padding: 10px 20px;
}

.submenu li a {
color: white;
text-decoration: none;
}

.submenu li:hover {
background-color: #555;
}

/* Mostrar el submenú al pasar el cursor */
.menu > li:hover .submenu {
display: block;
}

/* Responsivo */
@media (max-width: 768px) {
.menu {
flex-direction: column;
}
.menu > li {
text-align: center;
}
}