/* O CSS cuida de toda a beleza, cores, tamanhos e visual do site */

body {
    font-family: Arial, sans-serif; /* Define a letra padrão do site */
    margin: 0;                     /* Tira margens brancas da tela */
    padding: 0;
    background-color: #f4f6f9;     /* Cor de fundo cinza bem clarinho */
    color: #333;                   /* Cor do texto geral (cinza escuro) */
}

.container {
    max-width: 1200px;             /* Limita a largura do site para não espalhar demais em telas grandes */
    margin: 0 auto;                /* Centraliza o conteúdo na tela */
    padding: 20px;
}

/* Estilo do Topo (Cabeçalho) */
.topo {
    background-color: #0b2545;     /* Cor de fundo Azul Escuro (cor clássica de cartório) */
    color: white;                  /* Texto branco */
    text-align: center;            /* Centraliza o texto */
    padding: 30px 0;               /* Espaço dentro do topo, em cima e embaixo */
}
.topo h1 { margin: 0; font-size: 24px; }
.topo p { margin: 10px 0 0 0; font-size: 14px; opacity: 0.8; }

/* Espaçamento da introdução */
.introducao {
    text-align: center;
    margin: 40px 0;
}

/* Grid: Organiza os blocos de serviço em colunas automáticas */
.grid-servicos {
    display: grid;
    /* Divide em colunas que se ajustam sozinhas. Se a tela for pequena (celular), vira 1 coluna */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;                     /* Espaço de 20 pixels entre cada bloco */
    margin-bottom: 50px;
}

/* Estilo dos Blocos (Quadrados de Serviços) */
.card {
    background: white;             /* Fundo branco para contrastar com o fundo do site */
    padding: 25px;
    border-radius: 8px;            /* Deixa as pontas do quadrado arredondadas */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Cria uma sombra leve embaixo do bloco */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empurra o botão sempre para o final do bloco */
}
.card h3 { color: #0b2545; margin-top: 0; }
.card p { font-size: 14px; color: #666; line-height: 1.5; }

/* Estilo dos Botões */
.botao {
    display: inline-block;
    background-color: #134074;     /* Azul um pouco mais claro que o topo */
    color: white;
    padding: 12px 20px;
    text-decoration: none;         /* Tira aquele sublinhado padrão de links */
    border-radius: 4px;            /* Pontas levemente arredondadas */
    font-weight: bold;
    font-size: 14px;
    transition: background 0.3s;   /* Faz o efeito de mudar de cor ser suave */
}

/* Quando o usuário passa o mouse por cima do botão */
.botao:hover {
    background-color: #8da9c4;     /* Muda para azul claro */
    color: #0b2545;                /* Texto muda para azul escuro */
}

/* Estilo do Rodapé */
.rodape {
    background-color: #0b2545;
    color: white;
    text-align: center;
    padding: 20px 0;
    font-size: 13px;
    width: 100%;
}