/* Estilos generales para la sección */
.menu-section {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centrar verticalmente */
    padding: 60px 20px; /* Más padding para mejor espaciado */
    background-color: #ffffff; /* Fondo claro */
    border: 1px solid #e0e0e0;
    margin: 10px auto;
    max-width: 1200px;
    margin-bottom: 60px;
}

.menu-section p {
    font-size: 18px; /* Tamaño de fuente más grande */
    color: #555; /* Color gris oscuro */
    margin-bottom: 10px; /* Espacio entre párrafos */
    line-height: 1.5; /* Mejorar la legibilidad */
    text-align: justify;
    text-justify: inter-word; /* Justificar el texto */
    padding: 30px;
}

/* Estilos para el div de la izquierda (menuos) */
.menu-info {
    flex: 1;
    margin: 40px; /* Espacio entre el texto y la imagen */
    text-align: center; /* Centrar el texto horizontalmente */
}

.menu-info h2 {
    font-size: 36px; /* Tamaño de fuente más grande */
    color: #002244; /* Azul oscuro */
    margin-bottom: 30px; /* Más espacio debajo del título */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /* Convertir texto a mayúsculas */
}

/* Estilos para la lista de enlaces */
.menu-links {
    list-style: none; /* Eliminar viñetas de la lista */
    padding: 0;
}

.menu-links li {
    margin-bottom: 20px; /* Más espacio entre elementos de la lista */
}

.menu-links a {
    text-decoration: none; /* Eliminar subrayado de los enlaces */
    color: #002244; /* Azul oscuro */
    font-size: 20px; /* Tamaño de fuente más grande */
    font-weight: 500; /* Texto semi-negrita */
    transition: color 0.3s, transform 0.3s;
    display: inline-block; /* Para permitir transformaciones */
}

.menu-links a:hover {
    color: #D4AF37; /* Dorado al hacer hover */
    transform: scale(1.2); /* Desplazar ligeramente a la derecha */
}

/* Estilos para el div de la derecha (Imagen) */
.menu-image {
    flex: 1;
    text-align: center; /* Centrar la imagen */
}

.menu-image img {
    max-width: 100%;
    height: auto;
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilos responsivos */
@media (max-width: 1200px) {
    .menu-section {
        flex-direction: column;
        margin: 40px auto;
        padding: 40px 20px;
    }

    /* Forzar que en móvil todos los .menu-info aparezcan primero */
    .menu-info {
        order: 1; /* Texto primero */
        margin: 0;
        margin-bottom: 30px;
    }

    /* Forzar que en móvil todas las imágenes aparezcan después */
    .menu-image {
        order: 2; /* Imagen después */
    }

    .menu-info h2 {
        font-size: 28px;
    }

    .menu-links a {
        font-size: 18px;
    }

    .menu-image img {
        max-width: 90%;
    }
}