/* css/style-principal.css */

/* Reset básico para melhor consistência em todos os elementos */
body, h1, h2, h3, p, img, a, span, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que padding e borda sejam incluídos na largura/altura do elemento */
}

/* Estilos globais para o corpo da página */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte moderna e legível */
    background-color: #f0f2f5; /* Um cinza claro suave para o fundo da página */
    color: #333; /* Cor padrão do texto */
    line-height: 1.6; /* Espaçamento entre linhas para melhor leitura */
    display: flex; /* Utiliza flexbox para organizar o layout principal */
    flex-direction: column; /* Empilha os elementos (header, main, footer) verticalmente */
    min-height: 100vh; /* Garante que o corpo ocupe a altura total da viewport, importante para sticky footer */
}

/* Estilo do Cabeçalho */
header {
    background-color: #f0f2f5; /* Mantenha o fundo do header similar ao body ou defina uma cor para ele */
    padding: 20px 0; /* Adiciona um padding vertical ao header */
}

header img {
    display: block;
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
    max-width: 500px; /* Limita a largura máxima da imagem para evitar que fique muito grande */
    height: auto; /* Mantém a proporção original da imagem */
}

/* Estilo do Cabeçalho Principal (caso você decida usá-lo no futuro) */
/* Atualmente, a classe .main-header não está no seu HTML, mas os estilos estão aqui caso queira ativar. */
.main-header {
    background-color: #2c3e50; /* Azul escuro */
    color: #fff; /* Texto branco */
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil para profundidade */
}

.main-header h1 {
    font-size: 2.5em; /* Tamanho do título principal */
    margin-bottom: 10px;
}

.main-header p {
    font-size: 1.1em;
    opacity: 0.9; /* Leve transparência para o subtítulo */
}

/* Estilo da Galeria de Imagens (container principal) */
.image-gallery {
    display: grid; /* Utiliza CSS Grid para o layout */
    grid-template-columns: 1fr; /* UMA única coluna para que os itens fiquem um abaixo do outro, ocupando a largura total disponível */
    gap: 30px; /* Espaçamento vertical entre os itens da galeria */
    padding: 30px; /* Padding interno para a galeria */
    max-width: 900px; /* Largura máxima da galeria para centralização em telas maiores */
    margin: 30px auto; /* Centraliza a galeria horizontalmente e adiciona margens verticais */
    flex-grow: 1; /* Permite que a galeria ocupe o espaço restante verticalmente, empurrando o footer para baixo */
}

/* Estilo para cada item individual da galeria */
.gallery-item {
    display: flex; /* Utiliza flexbox para organizar o conteúdo interno do item */
    flex-direction: column; /* Empilha a imagem, título e botão verticalmente */
    align-items: center; /* Centraliza o conteúdo horizontalmente dentro do item */
    background-color: #fff; /* Fundo branco para cada card */
    border-radius: 8px; /* Cantos levemente arredondados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra para dar um efeito de card */
    overflow: hidden; /* Garante que o conteúdo que exceda o arredondamento seja cortado */
    color: #333; /* Cor do texto padrão para o item */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave para efeitos de hover */
    padding-bottom: 15px; /* Adiciona um padding na parte inferior do card */
}

.gallery-item:hover {
    transform: translateY(-5px); /* Efeito de "elevação" ao passar o mouse */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada no hover */
}

/* Estilo para as imagens dentro de links (mapas) */
.gallery-item a img {
    cursor: pointer; /* Indica que a imagem é clicável */
    transition: opacity 0.3s ease; /* Adiciona uma transição para o hover */
}

.gallery-item a:hover img {
    opacity: 0.9; /* Leve escurecimento no hover para feedback visual */
}

/* Estilo para a imagem dentro do item da galeria */
.gallery-item img {
    width: 100%; /* A imagem ocupa 100% da largura do seu contêiner pai */
    height: auto; /* A altura se ajusta automaticamente para manter a proporção da imagem original */
    display: block; /* Remove qualquer espaço extra que navegadores podem adicionar abaixo de imagens */
    margin-bottom: 5px; /* Ajustado para aproximar as imagens */
    border-bottom: none; /* Garante que não haja borda inferior, ajustado para o novo layout */
}

/* Estilo para o título da imagem dentro do item da galeria */
.gallery-item .image-title {
    padding: 0 15px 10px; /* Padding para o título (cima/baixo, esquerda/direita, inferior) */
    font-weight: bold; /* Texto em negrito */
    font-size: 1.5em; /* Tamanho maior para o título */
    text-align: center; /* Centraliza o texto do título */
    width: 100%; /* Ocupa a largura total para centralização */
    margin-top: 10px; /* Adicionado para criar espaço entre a última imagem e o título */
}

/* Estilo para os botões C-XX e P-XX */
.view-button {
    background-color: #3498db; /* Azul vibrante */
    color: #fff; /* Texto branco */
    border: none; /* Remove a borda padrão do botão */
    padding: 10px 25px; /* Padding interno do botão (vertical, horizontal) */
    border-radius: 50px; /* Cantos altamente arredondados para um formato de pílula */
    font-size: 1em;
    cursor: pointer; /* Indica que o elemento é clicável */
    transition: background-color 0.3s ease; /* Transição suave para o efeito hover */
    margin-top: 10px; /* Espaço acima do botão */
    width: auto; /* A largura é determinada pelo conteúdo do texto mais o padding */
    max-width: 300px; /* Limita a largura máxima do botão para não ficar muito grande */
    white-space: nowrap; /* Impede que o texto dentro do botão quebre linha */
    text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo e escondido */
    overflow: hidden; /* Garante que o texto excedente seja cortado antes do ellipsis */
    text-decoration: none; /* Remove sublinhado de links que se parecem com botões */
    display: inline-flex; /* Permite centralizar o texto verticalmente se necessário */
    align-items: center; /* Centraliza o texto verticalmente */
    justify-content: center; /* Centraliza o texto horizontalmente */
}

.view-button:hover {
    background-color: #2980b9; /* Azul mais escuro no hover */
}

/* Estilo para o grupo de botões (como C-01 a C-32) */
.button-group {
    display: flex; /* Utiliza flexbox para organizar os botões dentro do grupo */
    flex-wrap: wrap; /* Permite que os botões quebrem para a próxima linha se não houver espaço */
    justify-content: center; /* Centraliza os botões horizontalmente dentro do grupo */
    gap: 10px; /* Espaço entre os botões */
    padding: 0 15px 15px; /* Padding para o grupo de botões */
    width: 100%; /* Ocupa a largura total disponível */
}

/* Estilos para a Seção de Empresas Parceiras */
.partner-section {
    max-width: 900px; /* Largura máxima, alinhando com a galeria */
    margin: 40px auto; /* Margem superior e inferior, centraliza */
    padding: 0 30px; /* Padding nas laterais */
    text-align: center; /* Centraliza o título */
}

.partner-section h2 {
    font-size: 2em;
    color: #2c3e50; /* Cor escura do cabeçalho */
    margin-bottom: 30px;
    font-weight: bold;
}

.partner-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* TRÊS colunas fixas por linha em telas maiores */
    gap: 20px; /* Espaço entre os cards */
    justify-content: center; /* Centraliza os cards se houver menos do que o espaço permitiria */
}

.partner-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centraliza verticalmente o conteúdo se necessário */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 180px; /* Altura mínima para que os cards tenham tamanho semelhante */
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.partner-card img {
    max-width: 120px; /* Tamanho máximo para os logos dos parceiros */
    height: auto;
    margin-bottom: 15px;
    display: block; /* Remove espaço extra abaixo da imagem */
}

.partner-card h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 5px;
}

.partner-card p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.4;
}


/* Estilo do Rodapé */
.main-footer {
    background-color: #34495e; /* Um tom de azul escuro um pouco diferente do cabeçalho */
    color: #ecf0f1; /* Texto quase branco */
    text-align: center;
    padding: 15px;
    font-size: 0.9em;
    margin-top: auto; /* Empurra o footer para o final da página se o conteúdo for curto (sticky footer) */
}

/* Responsividade para telas menores (smartphones e tablets) */
@media (max-width: 768px) {
    .main-header h1 {
        font-size: 2em;
    }
    .main-header p {
        font-size: 1em;
    }
    .image-gallery {
        padding: 20px;
        max-width: 100%;
        margin: 20px auto;
    }
    .gallery-item .image-title {
        font-size: 1.2em;
    }
    .view-button {
        padding: 8px 15px;
        font-size: 0.9em;
    }

    /* Responsividade para a seção de parceiros */
    .partner-section {
        padding: 0 20px;
        margin: 30px auto;
    }
    .partner-section h2 {
        font-size: 1.8em;
    }
    .partner-cards-container {
        grid-template-columns: repeat(2, 1fr); /* DUAS colunas para tablets */
    }
    .partner-card img {
        max-width: 100px;
    }
}

@media (max-width: 480px) {
    .image-gallery {
        padding: 15px;
        gap: 20px;
    }

    /* Responsividade para a seção de parceiros */
    .partner-section {
        padding: 0 15px;
        margin: 20px auto;
    }
    .partner-section h2 {
        font-size: 1.5em;
    }
    .partner-cards-container {
        grid-template-columns: 1fr; /* UMA única coluna para telas muito pequenas (celulares) */
    }
}