/* "reset". Ele tira as margens que o navegador coloca por padrão */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Corpo geral da página */
body {
    font-family: Arial, sans-serif;
}

/* -------------------- */
/*header*/
/* -------------------- */

.cabecalho-principal {
    display: flex; /* coloca a logo e o menu lado a lado */
    justify-content: space-between; /* empurra a logo totalmente pra esquerda e o menu totalmente pra direita */
    align-items: center; /* centraliza*/
    padding: 15px 40px; /* espaçamento  nas bordas (15px em cima/baixo e 40px nas laterais) */
    background-color: #ffffff; 
}

/*  tamanho da logo */
.logo img {
    height: 120px; /* tamanho da logo */
    width: auto;
}

/* lista do menu */
.menu ul {
    list-style: none; /* tirei aquelas bolinhas padrão da lista */
    display: flex; 
    gap: 50px; /* espaço de 30px entre cada item do menu */
}

/*  texto dos links */
.menu a {
    text-decoration: none; /* tirei aquele sublinhado azul padrão dos links */
    font-size: 18px;
    color: #000000; 
    font-weight: bold; /* texto em negrito */
}

/* Efeito de passar o mouse por cima do link */
.menu a:hover {
    color: #225c93; 
}

/* -------------------- */
/* footer*/
/* -------------------- */


.rodape-principal {
    background-color: #000000; 
    color: #ffffff; /* Texto  */
    text-align: center; 
    padding: 30px 20px; /*  espaço : 30px em cima/baixo e 20px nas laterais */
    margin-top: 60px; /* rodapé para baixo, para não ficar colado nos cards de categorias */
    font-size: 17px; 
}

/* -------------------- */
/*main*/
/* -------------------- */

.banner-azul {
    background-color: #225c93; 
    color: #ffffff; 
    text-align: center; 
    padding: 60px 20px; /* espaços: 100px em cima e embaixo, 20px nas laterais */
}

/*título do banner */
.banner-azul h1 {
    font-size: 36px; /* Tamanho da fonte */
    font-weight: bold; /*negrito */
}

.introducao .texto-chamada {
    font-size: 22px;
    color: #000000; /*  texto normal */
    margin-bottom: 10px; /* Empurra os cards um pouco mais pra baixo */
    padding: 60px 60px;
    text-align: center;

}

/* Deixando a parte em negrito com a cor azul para destacar ainda mais */
.introducao .texto-chamada strong {
    color: #225c93;
}

/* -------------------- */
/* cards de categoria*/
/* -------------------- */

/* container para todos os cards */
.categorias-container {
    display: flex; /* Coloca um ao lado do outro */
    flex-wrap: wrap; /* joga para a linha de baixo (2 em cima, 2 embaixo) */
    justify-content: center; /* Centraliza os cards no meio da tela */
    gap: 30px; /* Espaçamento entre os cards */
    padding: 20px; 
    max-width: 1000px; /* tamanho máximo */
    margin: 0 auto; /* Centraliza o bloco todo no meio da página */
}

/* visual card */
.card-categoria {
    background-color: #ffffff; /* Fundo branco */
    color: #225c93; /* Texto  */
    text-decoration: none; /* Tira o sublinhado azul do link */
    font-size: 25px; /* Tamanho da letra */
    font-weight: bold; 
    
    /* Tamanho e formato do card */
    width: 300px; /* Largura */
    height: 150px; /* Altura */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    border-radius: 8px; /* Deixa caixa arredondada */
    
    /* Valores: lado, baixo, o quão esfumaçada ela é, e a cor (preto com 15% de transparência) */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); 
    
    /* O "transition" faz a mudança de cor do hover (demora 0.3 segundos)*/
    transition: all 0.3s ease; 
}

/* efeito do hover (Quando o mouse passa em cima) */
.card-categoria:hover {
    background-color: #225c93; /* O fundo vira azul */
    color: #ffffff; /* O texto vira branco */
    
    /*sombra para o card "subir" 5px e dara sensação de que ele pulou pra frente */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.25); 
    transform: translateY(-5px); 


}

/* -------------------- */
/* Seção de cada Entidade */
/* -------------------- */

/* 1. agrupa e separa */
.container-entidades {
    max-width: 1000px; /*  limite de largura */
    margin: 40px auto; /* centraliza e dá um espaço em cima e embaixo */
    padding: 0 20px;
    display: flex;
    flex-direction: column; /* "Dispõe os itens verticalmente, um abaixo do outro, de cima para baixo."*/
    gap: 60px; /* espaço entre cada entidade */
}

.cartao-entidade {
    background-color: #fcfcfc; 
    border: 1px solid #e0e0e0; 
    border-radius: 12px; /* pontas arredondadas */
    padding: 30px; 
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
}


.nome-entidade {
    color: #225c93;
    font-size: 24px;
    margin-bottom: 20px;
    border-bottom: 2px solid #225c93; /* linha embaixo do nome */
    padding-bottom: 10px;
}

.conteudo-entidade {
    display: flex; 
    align-items: flex-start; /* alinha os dois pelo topo */
    gap: 40px; /* espaço entre a imagem da logo e o texto */
}

.caixa-logo img {
    max-width: 180px; 
    height: auto;
    border-radius: 8px; 
}

.info-entidade {
    flex: 1; /* Diz para o texto se esticar e ocupar a tela que sobrou do lado da logo */
}

.descricao-entidade {
    margin-bottom: 25px; 
    line-height: 1.6; /* espaço entre as linhas do texto */
    color: #333333;
    text-align: justify; 
    font-size: 20px;
}

/*ícone e o texto fiquem alinhados lado a lado na mesma linha */
.lista-contatos li {
    display: flex;
    align-items: center;
    gap: 10px; /* Dá um espaço de 10px entre o ícone e o texto */
}

/* tamanho dos ícones das redes sociais */
.icone-rede-social {
    width: 18px; 
    height: 18px;
    object-fit: contain;
}

/* container da lista de contatos */
.lista-contatos {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaço entre as linhas */
    font-size: 18px;
    color: #555555;
    width: 100%; /* ocupa todo o espaço e joga as redes pra direita */
}

/* Cada item normal da lista */
.lista-contatos li {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre o ícone  e  texto */
}

/* Tamanho dos ícones de texto (endereço, email, site) */
.icone-contato {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* site e as redes sociais juntas */
.linha-site-redes {
    display: flex;
    justify-content: space-between; /*  site pra esquerda e as redes pra direita */
    align-items: center;
    width: 100%;
}

/*  ícone do site e o link */
.site-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ícones do Insta e Face */
.redes-sociais {
    display: flex;
    gap: 10px; /* Espaço entre as redes sociais */
}

/* Tamanho dos ícones das redes sociais (clicáveis) */
.icone-rede-social {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: transform 0.2s ease; /* Prepara o efeito de hover */
}

/* Efeito ao passar o mouse nas redes sociais */
.icone-rede-social:hover {
    transform: scale(1.1); /* cresce quando passa o mouse */
}

.ultima-atualizacao{
    text-align: left;      
    font-style: italic;    
    color: #666666;        
    margin-top: 30px;       
    font-size: 18px;         
}