body, html {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: rgb(63, 169, 176);
    padding: 10px 20px;
    color: white;
}

/* Ajustes generales para dispositivos móviles */
.Header {
    display: flex;
    align-items: center;  /* Alinea el logo y los botones verticalmente */
    justify-content: space-between; /* Separa el logo y los botones */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en dispositivos pequeños */
}

/* Ajustes para el logo */
.logo {
    margin-right: 20px;
}

.logo img {
    height: 50px; /* Reduce el tamaño del logo en móviles */
}

/* Estilo para los botones */
.botones {
    display: flex;
    gap: 10px; /* Espacio entre botones */
    align-items: center;
    flex-wrap: wrap; /* Permite que los botones se ajusten en pantallas pequeñas */
}

/* Estilo de los botones */
.boton {
    padding: 8px 15px; /* Reduce el padding en móviles */
    text-decoration: none;
    background-color: white;
    color: #333;
    font-size: 14px; /* Reduce el tamaño del texto */
    border-radius: 5px;
    border: 1px solid #ccc;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
}

/* Efecto hover */
.boton:hover {
    background-color: #f0f0f0;
    color: #007BFF;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .Header {
        flex-direction: column; /* Acomoda los elementos en columna en móviles */
        align-items: center; /* Centra los elementos */
        text-align: center;
    }

    .logo {
        margin-bottom: 10px; /* Espacio entre el logo y los botones */
        margin-right: 0;
    }

    .botones {
        justify-content: center; /* Centra los botones */
        gap: 8px;
    }

    .boton {
        width: 100%; /* Hace que los botones ocupen el ancho completo en móviles */
        max-width: 200px; /* Limita el ancho de los botones */
    }
}