:root {
  --azul: #1C3A5B;
  --branco: #FFFFFF;
  --cinza: #F5F5F5;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* CORREÇÃO ESTRUTURAL (Sticky Footer) */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* Garante que o conteúdo não cause barra de rolagem horizontal */
  
}

/* Torna o body um container flexível para empurrar o rodapé */
body {
  font-family: 'Inter', sans-serif;
  color: var(--azul);
  background: var(--branco);
  display: flex;
  flex-direction: column; /* Organiza os elementos em uma coluna */
}

/* Classe adicionada no HTML para envolver o conteúdo principal e garantir que ele cresça */
.content-wrapper {
  flex-grow: 1;
}

/* --- CORREÇÃO CHAVE: CONTAINER GLOBAL --- */
/* Esta classe é usada em várias seções para centralizar e dar espaçamento.
   Ajustamos o padding lateral para 40px no desktop. */
.container {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 40px; 
}
/* --- FIM CORREÇÃO CHAVE --- */


/* HEADER */
.header {
  position: fixed;
  width: 100vw;
  left: 0;   
  right: 0; 
  background: var(--branco);
  border-bottom: 1px solid #ddd;
  z-index: 1000;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* O padding horizontal agora é definido pela classe .container global, 
     mas mantemos o padding vertical de 10px */
  padding-top: 10px; 
  padding-bottom: 10px;
}

.logo {
  height: 45px;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav a {
  text-decoration: none;
  color: var(--azul);
  font-weight: 500;
}

.nav a:hover {
  text-decoration: underline;
}

/* HOME */
.home {
  height: 100vh;
  background: var(--azul);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  
  /* Ajuste da área azul (seção home) */
  padding-top: 80px;
  padding-bottom: 40px;
}

.home-content h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.home-content p {
  font-size: 1.2rem;
  margin: 10px 0 20px;
  margin-bottom: 25px;
}

.btn {
  background: var(--branco);
  color: var(--azul);
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
  margin-bottom: 10px;
}

.btn:hover {
  background: #e4e4e4;
}

/* SEÇÕES GERAIS */
section {
  /* Mantém o padding do desktop, que será corrigido no mobile via media query */
  padding: 80px 40px; 
  text-align: center;
}

h2 {
  margin-bottom: 30px;
}

/* SERVIÇOS */
.servicos-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.servico-card {
  background: var(--cinza);
  padding: 30px;
  border-radius: 10px;
}

.servico-card h3 {
  margin-bottom: 10px;
}

.preco {
  margin-top: 15px;
  font-weight: bold;
}

/* --- PORTFÓLIO --- */

.portfolio {
  background: #f7f9fb;
  margin-top: 50px;
  /* Mantém o padding do desktop, que será corrigido no mobile via media query */
  padding: 120px 40px 80px 40px; 
}

.portfolio h2 {
  color: var(--azul);
  margin-bottom: 40px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  align-items: start;
}

.portfolio-item {
  background: white;
  border-radius: 10px;
  padding-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.portfolio-grid img {
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  margin-bottom: 10px;
}

.portfolio-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.portfolio-item h3 {
  color: var(--azul);
  font-size: 1.25rem;
  margin: 0 15px 5px 15px;
}

.portfolio-item p {
  color: #666;
  font-size: 1rem;
  margin: 0 15px;
}

/* --- FIM PORTFÓLIO --- */

/* FORMULÁRIO */
.form-pesquisa {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-pesquisa input,
.form-pesquisa select {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.form-pesquisa button {
  border: none;
  cursor: pointer;
}

/* CONTATO */
.contato p {
  margin: 5px 0;
}

.contato a {
  color: var(--azul);
  text-decoration: none;
}

.contato a:hover {
  text-decoration: underline;
}

/* FOOTER CORRIGIDO */
.footer {
  background: var(--azul);
  color: var(--branco);
  text-align: center;
  padding: 20px 0;
  
  /* Garantias do Sticky Footer */
  width: 100%;
  flex-shrink: 0;
}

/* BOTÃO WHATSAPP */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25d366;
  color: white;
  font-size: 24px;
  padding: 12px 16px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Nome da empresa no topo */
.empresa-nome {
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--branco);
  letter-spacing: 2px;
  margin-bottom: 15px;
}

/* Ajuste equilibrado da seção azul */
.home-content h1 {
  margin-bottom: 15px;
}

.home-content p {
  margin-bottom: 25px;
}

/* ================================================= */
/* ESTILOS GERAIS DO BOTÃO HAMBÚRGUER (linha 299) */
/* ================================================= */

.menu-toggle {
    /* Por padrão, o botão fica ESCONDIDO no desktop. */
    display: none; 
    
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Garante que fique por cima do menu fixo */
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background: var(--azul);
    transition: 0.3s;
} 

/* --- AJUSTE DO BOTÃO DO FORMULÁRIO --- */
.form-pesquisa .btn {
    background-color: #0056b3; /* mesmo azul do botão "Fale Conosco" */
    color: #fff; /* texto branco */
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}

.form-pesquisa .btn:hover {
    background-color: #003f80; /* tom um pouco mais escuro no hover */
}

/* ==================================== */
/* MEDIA QUERY: CORREÇÕES PARA CELULARES */
/* ==================================== */

@media (max-width: 768px) { 
     /* NOVO: AJUSTE DE ALTURA DO HEADER NO MOBILE */
    .header .container {
        padding-top: 5px;   /* Reduzido de 10px para 5px */
        padding-bottom: 5px;/* Reduzido de 10px para 5px */
    }
  /* 1. LAYOUT GERAL E TEXTOS: REDUÇÃO DO PADDING HORIZONTAL */
    /* Garante que o container use menos padding nas laterais (20px) */
    .container {
        padding: 0 20px;
    }

    /* Reduz o padding de TODAS as seções para 20px nas laterais */
    section {
        padding: 60px 20px; 
    } 
 
    /* Ajuste específico para o PORTFÓLIO */
    .portfolio {
        padding: 80px 20px 60px 20px; 
    }

    /* Reduz o tamanho de fontes grandes no mobile */
    .home h1 {
        font-size: 2em;
    }

   /* 2. MENU DE NAVEGAÇÃO E BOTÃO (Aparece no Mobile) */
    
    /* 1. Mostra o botão hambúrguer */
    .menu-toggle {
        display: block;
    }

    /* 2. Estilo e posição do menu mobile */
    .nav {
        /* Posição absoluta para cobrir a tela */
        position: absolute;
        top: 60px; /* Logo abaixo do header (60px logo + 20px padding) */
        left: 0;
        width: 100%;
        height: auto;
        background: var(--azul); /* Cor de fundo do menu */
        
        /* Oculta o menu, mas ele será mostrado pelo JavaScript */
        display: none; 
        padding: 20px 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 999;
    }

    .nav.active {
        display: block; /* Mostra quando o JS adicionar a classe 'active' */
    }

    .nav ul {
        flex-direction: column; /* Coloca os links em coluna */
        gap: 0;
        text-align: center;
        padding: 0;
    }

    .nav li {
        margin: 0;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav li:last-child {
        border-bottom: none;
    }

    .nav a {
        color: var(--branco); /* Links brancos no fundo azul */
        font-weight: 500;
        display: block;
    }   

    /* 3. GRID DE SERVIÇOS (Volta para uma coluna) */
    .servicos-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* 4. GRID DE PORTFÓLIO: DEVE FICAR EM UMA COLUNA */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* 5. CORREÇÃO DA IMAGEM DO PORTFÓLIO E ESPAÇAMENTO */
    .portfolio-item {
        text-align: center; /* Força a centralização de todo o conteúdo */
        padding: 0;
    }
    .portfolio-grid img {
        width: 100%;
        height: auto;
        max-width: 90%; /* Ajuste a largura da imagem para não encostar na borda */
        margin: 15px auto 10px auto; /* Centraliza */
        display: block;
        padding: 0; /* Remove padding desnecessário na imagem */
    }

    /* 6. Ajuste do espaçamento do título do Portfólio */
    .portfolio h2 {
        padding-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    /* 7. WHATSAPP FLUTUANTE */
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
    }

    /* 8. FORMULÁRIO */
    .form-pesquisa {
        padding: 20px;
    }
}