/* 1. Limpando os espaços que o navegador coloca por padrão */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Definindo a fonte do site e a cor de fundo geral */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f9; /* Um cinza bem clarinho */
    color: #333333; /* Texto num tom de grafite, melhor para leitura que preto puro */
}

/* 3. Cabeçalho com tons de Areia e Terra */
header {
    background-color: #f7f1e3; /* Um tom areia sofisticado */
    color: #4b3621; /* Marrom terra escuro para o texto */
    padding: 30px 20px;
    text-align: center;
    border-bottom: 6px solid #556b2f; /* Verde oliva do cacto */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 4. Estilizando o Menu de Navegação */
nav {
    margin-top: 15px; /* Dá um espaço entre o título do site e os botões */
}

nav ul {
    list-style: none; /* Remove as bolinhas da lista */
    display: flex; /* Ferramenta mágica que coloca os itens lado a lado */
    justify-content: center; /* Centraliza os itens no meio da tela */
    gap: 20px; /* Cria um espaço de 20 pixels entre cada botão */
}

/* 5. Menu com contraste melhorado */
nav a {
    color: #4b3621;
    text-decoration: none;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 4px;
    transition: 0.3s;
}

/* 6. Destaque no Menu ao passar o mouse */
nav a:hover {
    background-color: #556b2f; /* Fundo verde ao passar o mouse */
    color: #ffffff; /* Letra branca para contraste */
}

/* 7. O Conteúdo Principal (Mais fluido e largo) */
main {
    max-width: 1100px; /* Era 900px. Isso alarga o site e aproveita mais a tela */
    margin: 20px auto; /* Reduzimos a margem para não sobrar tanto espaço vazio */
    background-color: white;
    padding: 30px 40px; 
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 8. Rodapé em harmonia com o topo */
footer {
    background-color: #ece4d0; /* Areia um pouco mais escuro */
    color: #2c1e12;
    padding: 40px 20px;
    margin-top: 30px;
    border-top: 2px solid #d1c4a8;
}

/* 9. Estilo dos Botões (Formulário e Saiba Mais) */
.botao-primario {
    background-color: #2b5329; /* Um tom de verde escuro e elegante */
    color: white; 
    padding: 15px 30px; 
    text-decoration: none; 
    font-size: 18px; 
    font-weight: bold; 
    border-radius: 8px; 
    transition: 0.3s; 
    display: inline-block; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}

/* 10. Estilo do Botão Hambúrguer (Escondido no PC) */
.menu-hamburguer {
    display: none; /* Escondido por padrão em telas grandes */
    font-size: 35px; /* Tamanho do ícone ☰ */
    background: none;
    border: none;
    color: #4b3621;
    cursor: pointer;
    margin-top: 15px;
}

/* 11. Responsividade (Celulares e Tablets) */
@media (max-width: 768px) {
    
    /* 1. MOSTRAR O BOTÃO: Forçamos o botão a aparecer nas telas pequenas */
    .menu-hamburguer {
        display: inline-block; 
    }
    
    /* 2. ESCONDER OS LINKS: Esconde a lista por padrão e arruma o visual dela */
    nav ul {
        display: none; 
        flex-direction: column;
        width: 100%;
        background-color: #f7f1e3;
        padding: 15px 0;
        border-radius: 8px;
        margin-top: 15px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    /* 3. A MÁGICA DO CLIQUE: Classe ativada pelo nosso JavaScript lá no HTML */
    nav ul.mostrar {
        display: flex;
    }
    
    /* Ajustes para economizar espaço no celular */
    header { padding: 15px; }
    header img { max-height: 100px; }
    main { padding: 20px 15px; margin: 10px; }
    footer div { text-align: center; width: 100%; }
}

/* 12. Estilo da Tabela de Equipamentos */
.tabela-equipamentos {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}

.tabela-equipamentos th {
    background-color: #556b2f; /* Cabeçalho verde oliva */
    color: #ffffff;
    padding: 15px;
    text-align: left;
    font-size: 16px;
}

.tabela-equipamentos td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0d8c3;
    color: #4b3621;
    font-size: 15px;
}

/* Efeito zebrado: uma linha branca, outra cor de areia bem clarinha */
.tabela-equipamentos tr:nth-child(even) {
    background-color: #fdfcf0;
}

/* Efeito ao passar o mouse na linha */
.tabela-equipamentos tr:hover {
    background-color: #ece4d0;
}