/* --- CONFIGURAÇÕES GERAIS --- */
body {
    background: #f4f2ec url(../img/fundo.png) repeat-x;
    font: 14px "Lucida Grande", sans-serif; /* Aumentado para melhor leitura em celular */
    margin: 0;
    padding: 0;
}

#container {
    max-width: 1080px; /* Mudado de width para max-width */
    width: 95%;        /* Garante margem em telas pequenas */
    margin: 0 auto;
}

/* --- RESPONSIVIDADE (MOBILE FIRST) --- */

/* Ajuste para o conteúdo e lateral não ficarem um do lado do outro no celular */
#conteudo, aside {
    width: 100% !important; 
    float: none !important;
}

header {
    height: auto; /* Permite que o menu quebre linha no celular */
    overflow: hidden;
    padding: 20px 0;
}

nav ul {
    float: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap; /* Faz os links quebrarem linha se não couberem */
    justify-content: center;
}

nav ul li {
    float: none;
    margin: 5px;
}

/* --- AJUSTES DE IMAGEM --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- MEDIA QUERIES (DESKTOP) --- */
@media (min-width: 768px) {
    #conteudo {
        width: 710px !important;
        float: left !important;
    }
    aside {
        width: 330px !important;
        float: right !important;
    }
    nav ul {
        float: right;
    }
}

/* Seu estilo de botões e formulários permanece similar, 
   mas certifique-se de que a classe .botao seja fácil de tocar com o dedo */
input.botao {
    cursor: pointer;
    border-radius: 5px;
}