/* 1. Reset básico e layout de página inteira */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background: #FFF;
}

/* 2. Remove o 'box-sizing' se não for padrão (boa prática) */
* {
    box-sizing: border-box;
}

/* 3. O 'super wrapper' - agora 100% fluido */
#tudo {
    position: relative;
    width: 100%;
    min-height: 100%;
    
    /* Remove as regras de 1000px */
    left: 0;
    margin-left: 0; 
}

/* 4. O Topo - 100% fluido */
#topo {
    width: 100%;
    position: relative; 
    border-bottom: 2px solid #4E4E4E;
    background: #FFF;
	padding-bottom:10px;
}

/* 5. A Imagem do Topo - forçar a esticar */
#topo img {
    width: 40%; /* Estica a imagem do topo */
    height: auto; /* Mantém a proporção */
    display: block; /* Remove espaço extra abaixo da imagem */
	margin: 0 auto;
}

/* 6. O Menu - 100% fluido (já era, mas garantindo) */
#div_menu {
    width: 100%;
}

/* 7. O Conteúdo Principal */
#principal {
    width: 100%;
    /* padding-bottom: 163px; (Já está no estilo.css, mantém o espaço do rodapé) */
}

/* 8. A 'miolo' do conteúdo */
#conteudo_principal {
    /* Em vez de margem fixa de 100px, 
       usamos uma largura máxima para leitura 
       e centralizamos automaticamente.
    */
    max-width: 1920px;  /* Aumenta o limite (ajuste se desejar) */
    margin-left: auto;   /* Centraliza */
    margin-right: auto;  /* Centraliza */
    padding-left: 50px;  /* Adiciona um pequeno preenchimento nas laterais */
    padding-right: 50px;
}

/* 9. O Rodapé - 100% fluido */
#rodape {
    width: 100%;
    position: absolute;
    bottom: 0;
    border-top: 2px solid #4E4E4E;
}

/* 10. A Imagem do Rodapé (se for usada) */
#rodape img {
    width: 100%;
    height: auto;
    display: block;
}