/* --- VARIÁVEIS BASE --- */
:root {
    --azul-belenzier: #005691;
    --vermelho-belenzier: #cc0000;
}

html, body {
    height: 100%;
    margin: 0;
}

/* Garante que o conteúdo principal cresça para ocupar o espaço vazio */
.flex-grow-1 {
    flex-grow: 1 !important;
}

/* --- HEADER E NAVEGAÇÃO --- */
.navbar-belenzier {
    background-color: white;
    padding: 1rem 1rem;
}

.header-top-bar {
    background-color: var(--vermelho-belenzier);
    color: white;
    padding: 5px 0;
    font-weight: bold;
    text-align: center;
}

.nav-link {
    color: white !important;
    font-weight: 500;
    text-transform: uppercase;
}

.bg-menu-red {
    background-color: var(--vermelho-belenzier);
}

.brand-text {
    color: var(--azul-belenzier);
    font-style: italic;
    font-weight: bold;
    font-size: 2.5rem;
}

.logo-principal {
    max-height: 80px;
    width: auto;
    display: block;
    padding: 5px 0;
}

.navbar-brand {
    margin-right: 2rem;
    padding: 0;
}

/* --- PADRONIZAÇÃO DE TÍTULOS --- */
.section-title {
    color: var(--azul-belenzier);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--vermelho-belenzier);
    display: inline-block;
}

/* --- SEÇÃO DE CONTATOS (FUNDO CINZA) --- */
.contact-section {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 30px 0;
}

/* --- ESTILOS DOS CARDS DE CONTATO (Mais finos / Lado a lado) --- */
.contact-card {
    display: flex;
    flex-direction: row; /* Coloca ícone e texto lado a lado */
    align-items: center;
    justify-content: center; /* Centraliza tudo dentro do botão */
    padding: 12px 10px; /* Reduzimos o padding para o card ficar mais "fino" na altura */
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Ajuste do ícone */
.contact-card i {
    font-size: 1.8rem; /* Diminuí o ícone um pouquinho */
    margin-bottom: 0; /* Tiramos a margem de baixo */
    margin-right: 10px; /* Colocamos uma margem na direita para separar do texto */
}

/* Ajuste do texto */
.contact-card span {
    font-weight: 600;
    text-align: left; /* Alinhamos o texto à esquerda para acompanhar o ícone */
    font-size: 0.85rem;
    line-height: 1.2;
}

/* Efeito ao passar o mouse por cima (Hover) */
.contact-card:hover {
    transform: translateY(-3px); /* Levanta um pouco menos para ficar sutil */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    color: var(--azul-belenzier);
    text-decoration: none;
}

/* --- LISTA DE PRODUTOS E SERVIÇOS --- */
.product-icon {
    color: var(--azul-belenzier);
    font-size: 2.5rem;
}

.service-item {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    height: 100%;
}

    .service-item:hover {
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        border-color: var(--vermelho-belenzier);
    }

.service-icon {
    color: var(--vermelho-belenzier);
    font-size: 2rem;
    margin-right: 15px;
}

.service-text {
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* --- LOGOS DE FORNECEDORES (Tamanho reduzido e Efeito Premium) --- */
.logo-card {
    border: 1px solid #eaeaea;
    padding: 10px; /* Reduzimos o espaço interno (era 15px) */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px; /* Reduzimos a altura (era 100px) para deixar mais fino */
    background-color: #fff;
    transition: all 0.3s ease; /* Transição mais suave */
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* Sombra bem levinha por padrão */
}

/* A imagem da logo dentro do card */
.logo-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    /* Efeito: deixa a logo cinza e um pouco transparente */
    /*/filter: grayscale(100%) opacity(100%);*/
    transition: filter 0.3s ease; /* Anima a volta da cor */
}

/* O que acontece ao passar o mouse no CARD */
.logo-card:hover {
    transform: translateY(-3px) scale(1.02); /* Levanta sutilmente */
    box-shadow: 0 5px 12px rgba(0,0,0,0.08); /* Sombra mais destacada */
    border-color: #ddd;
}

/* O que acontece com a LOGO ao passar o mouse no CARD */
.logo-card:hover .logo-img {
    filter: grayscale(0%) opacity(100%); /* Volta a cor 100% original */
}
/* --- FOOTER --- */
.footer-belenzier {
    background-color: #222;
    color: white;
    padding: 20px 0;
    margin-top: 50px;
}

/* --- EFEITOS DO MENU PRINCIPAL --- */
.menu-link {
    transition: all 0.2s ease;
    border-radius: 4px; /* Arredonda levemente o botão no hover */
    padding: 8px 12px !important; /* Melhora a área de clique */
}

    .menu-link:hover {
        background-color: rgba(255, 255, 255, 0.15); /* Cria um fundo levemente branco/transparente */
        color: #fff !important;
        transform: translateY(-1px); /* Levanta 1 milímetro para dar sensação de clique */
    }


/* --- ESTILOS DOS CARDS DE CONTATO NO HEADER (Mais finos e compactos) --- */
.contact-card-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 6px 12px; /* Reduzimos bem o padding (mais fino) */
    background-color: #f8f9fa; /* Fundo cinza bem claro em vez de branco */
    border: 1px solid #e9ecef;
    border-radius: 50px; /* Bordas bem arredondadas, estilo "pílula" */
    text-decoration: none;
    color: #495057; /* Texto um pouco mais escuro */
    transition: all 0.2s ease;
    white-space: nowrap; /* Impede que o texto do botão quebre em duas linhas */
}

/* Ajuste do ícone */
.contact-card-nav i {
    font-size: 1.2rem; /* Ícone menor */
    margin-right: 6px; /* Menos espaço entre ícone e texto */
}

/* Ajuste do texto */
.contact-card-nav span {
    font-weight: 600;
    font-size: 0.75rem; /* Fonte menor para caber na barra */
    line-height: 1;
}

/* Efeito Hover */
.contact-card-nav:hover {
    background-color: #fff;
    border-color: #dee2e6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    color: var(--azul-belenzier);
    text-decoration: none;
}