/* === Reset Básico e Configurações Gerais === */

/* Remove margens e paddings padrão dos navegadores e ajusta cálculo de tamanho */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Define estilos básicos para o corpo da página */
body {
    font-family: sans-serif; /* Uma fonte simples e comum */
    line-height: 1.6; /* Espaçamento entre linhas para melhor leitura */
    color: #333; /* Cor de texto principal (cinza escuro) */
    background-color: #f4f4f4; /* Cor de fundo levemente cinza */
}

/* Container para centralizar o conteúdo e limitar a largura */
.container {
    max-width: 960px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o container na página */
    padding: 0 20px; /* Espaçamento interno lateral */
    overflow: hidden; /* Evita que elementos flutuantes vazem */
}

/* Remove estilo padrão de listas */
ul {
    list-style: none;
}

/* Estilo padrão para links */
a {
    color: #007BFF; /* Cor azul padrão para links */
    text-decoration: none; /* Remove sublinhado */
}

a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

/* === Estilos do Cabeçalho === */
header {
    background-color: #333; /* Fundo escuro para o cabeçalho */
    color: #fff; /* Texto branco no cabeçalho */
    padding: 20px 0; /* Espaçamento interno vertical */
    border-bottom: 3px solid #007BFF; /* Linha azul na base */
}

header .container {
    display: flex; /* Usa Flexbox para alinhar itens lado a lado */
    justify-content: space-between; /* Espaça o título e a navegação */
    align-items: center; /* Alinha verticalmente ao centro */
}

header h1 {
    margin: 0; /* Remove margem padrão do h1 */
}

header nav ul {
    display: flex; /* Coloca itens do menu lado a lado */
}

header nav ul li {
    margin-left: 20px; /* Espaçamento entre itens do menu */
}

header nav ul li a {
    color: #fff; /* Cor dos links do menu */
    font-weight: bold;
}

header nav ul li a:hover {
    color: #007BFF; /* Muda cor ao passar o mouse */
    text-decoration: none;
}

/* === Estilos das Seções === */
section {
    padding: 40px 0; /* Espaçamento interno vertical para todas as seções */
    border-bottom: 1px solid #ddd; /* Linha separadora sutil */
}

section:last-of-type {
    border-bottom: none; /* Remove a borda da última seção */
}

section h2 {
    text-align: center; /* Centraliza títulos das seções */
    margin-bottom: 30px; /* Espaço abaixo dos títulos */
    color: #333;
}

/* === Estilo da Seção Hero (Boas-vindas) === */
.hero {
    background-color: #007BFF; /* Fundo azul chamativo */
    color: #fff; /* Texto branco */
    text-align: center;
    padding: 60px 0; /* Mais espaçamento vertical */
}

.hero h2 {
    font-size: 2.5em; /* Tamanho grande para o título principal */
    margin-bottom: 15px;
    color: #fff; /* Garante que o H2 seja branco */
}

.hero p {
    font-size: 1.2em;
    margin-bottom: 25px;
}

/* Estilo do botão Call-to-Action (Chamada para Ação) */
.cta-button {
    display: inline-block;
    background-color: #fff; /* Fundo branco */
    color: #007BFF; /* Texto azul */
    padding: 12px 25px;
    border-radius: 5px; /* Bordas arredondadas */
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave */
}

.cta-button:hover {
    background-color: #eee; /* Fundo levemente cinza ao passar o mouse */
    color: #0056b3; /* Azul um pouco mais escuro */
    text-decoration: none;
}

/* === Estilos da Seção Serviços === */
.servicos-grid {
    display: grid; /* Usa Grid Layout para organizar os serviços */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Cria colunas responsivas */
    gap: 20px; /* Espaço entre os itens do grid */
}

.servico-item {
    background-color: #fff; /* Fundo branco para cada item */
    padding: 20px;
    border: 1px solid #ddd; /* Borda sutil */
    border-radius: 5px; /* Bordas arredondadas */
    text-align: center;
}

.servico-item h3 {
    margin-bottom: 10px;
    color: #007BFF;
}

/* === Estilos do Rodapé === */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 30px; /* Espaço acima do rodapé */
}

/* === Responsividade Básica === */
/* Ajustes para telas menores (ex: celulares) */
@media (max-width: 768px) {
    header .container {
        flex-direction: column; /* Empilha título e navegação */
        text-align: center;
    }

    header nav ul {
        margin-top: 15px;
        justify-content: center; /* Centraliza itens do menu */
    }

     header nav ul li {
        margin: 0 10px; /* Reduz espaçamento no mobile */
    }

    .hero h2 {
        font-size: 2em; /* Reduz tamanho do título no mobile */
    }

    .servicos-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas pequenas */
    }
}