/* Estilos generales para .ayuda-menu y sus elementos */
.ayuda-menu {
    display: flex;
    justify-content: space-around;
    align-items: center; /* Alinea verticalmente los elementos */
    width: 100%;
    padding: 10px;
    margin: 70px 0; /* Añade margen superior e inferior */
}

.ayuda-menu a {
    text-decoration: none;
    color: black; /* Color del texto del botón */
    padding: 15px 30px;
    margin: 5px;
    background-color: rgb(253, 190, 51); /* Fondo del botón */
    border: 1px solid black; /* Borde del botón */
    border-radius: 5px;
    font-size: 18px; /* Aumenta el tamaño del texto */
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
}

.ayuda-menu a:hover {
    background-color: rgb(69, 180, 50); /* Fondo al pasar el ratón */
    color: #ffffff; /* Color del texto al pasar el ratón */
    transform: scale(1.05);
}

.logo-links img {
    height: 60px; /* Altura del logo */
    width: auto; /* Ancho automático para mantener la proporción */
    margin: 5px;
    border: 1px solid black; /* Borde del botón */
    border-radius: 5px; /* Radio del borde para que coincida con los botones */
    background-color: rgb(253, 190, 51); /* Fondo del botón */
    padding: 10px 20px; /* Espaciado interno para coincidir con los botones */
}

/* Media queries para dispositivos móviles */
@media (max-width: 768px) {
    .ayuda-menu {
        flex-direction: column; /* Apila los elementos uno encima del otro */
        align-items: center; /* Centra los elementos */
    }

    .ayuda-menu a,
    .logo-links img {
        width: 80%; /* Ajusta el ancho de los botones y del logo */
        text-align: center; /* Centra el texto de los botones */
        margin: 10px 0; /* Añade margen vertical entre los elementos */
    }

    .logo-links img {
        padding: 10px 0; /* Ajusta el padding del logo para el diseño móvil */
    }
}