/* Asegúrate de que el body y html no tengan márgenes ni padding */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif; /* Fuente por defecto para todo el documento */
}

/* Estilos para el menú de navegación */
.menu {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px 0px 20px 0px;
}

.menu .nav {
    list-style: none; /* Elimina los puntos de la lista */
    display: flex;
    margin: 0;
    padding: 0;
}

.menu .nav li {
    margin: 0 20px; /* Espaciado entre los elementos del menú */
}

.menu .nav li a {
    text-decoration: none; /* Sin subrayado */
    color: #fff; /* Texto blanco */
    font-weight: bold;
    padding: 10px;
    transition: background-color 0.3s ease; /* Transición para el hover */
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8125em; /* Tamaño de la fuente */
}

.menu .nav li a:hover {
    background-color: white; /* Color de fondo al pasar el mouse */
    color: #000;
    border-radius: 5px; /* Bordes redondeados para el hover */
}

.pais {
    margin-top: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Estilos para cada país */
.pais img {
    width: 50px; /* Ancho de las imágenes */
    height: auto; /* Altura automática para mantener la proporción */
    margin: 10px; /* Espacio entre las imágenes */
    transition: transform 0.3s ease; /* Transición para el efecto hover */
}

/* Efecto hover */
.pais img:hover {
    transform: scale(1.1) rotate(360deg); /* Escalar y girar en el hover */
}