/* ==========================================================================
   CONFIGURAÇÕES GLOBAIS E VARIÁVEIS
   ========================================================================== */

:root {
    --primary-color: rgba(2, 2, 26, 1);   /* Azul-Noite profundo */
    --subtle-bg: #f1f3f5;                /* Cinza sutil, limpo e sofisticado para transições */
    --accent-color: #d4af37;             /* Dourado institucional para destaques */
    --text-dark: #212529;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-dark);
    background-color: #ffffff;
    overflow-x: hidden;
}


/* ==========================================================================
   CABEÇALHO & MENU DE NAVEGAÇÃO (HEADER & NAVBAR)
   ========================================================================== */

/* Proporção e Dimensionamento do Logotipo no Header */
.logo-header {
    height: 55px;          /* Altura ideal para leitura sem estourar o tamanho do menu */
    width: auto;           /* Mantém a proporção exata da largura original automaticamente */
    object-fit: contain;   /* Garante que o arquivo não sofra distorções */
    transition: height 0.2s ease;
}

/* Customização do Menu (Header) */
.navbar-custom {
    background-color: var(--primary-color) !important;
}

.navbar-brand img {
    max-height: 50px;
}

.nav-link {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s ease;
}

.nav-link:hover, .nav-link.active {
    color: var(--accent-color) !important;
}

/* Redes Sociais do Topo */
.header-social-icons a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    transition: color 0.2s;
}

.header-social-icons a:hover {
    color: var(--accent-color);
}


/* ==========================================================================
   BANNER ROTATIVO (CARROSSEL PRINCIPAL)
   ========================================================================== */

/* Controle por Proporção Fluida (Elástico Definitivo contra cortes) */
.img-banner-carrossel {
    width: 100% !important;         /* Garante preenchimento total de parede a parede horizontalmente */
    height: auto !important;        /* Força a altura a acompanhar a proporção fluida */
    aspect-ratio: 16 / 5.5;         /* Mantém a proporção de faixa larga perfeita em qualquer monitor */
    object-fit: cover;              /* Adapta a imagem no espaço sem deformar ou esticar */
    object-position: center center; /* Mantém o ponto focal do banner 100% centralizado */
}

/* Ajuste de container para evitar frestas e imperfeições de renderização */
#home-banner, 
.carousel-inner, 
.carousel-item {
    width: 100%;
    background-color: var(--primary-color);
}


/* ==========================================================================
   SEÇÃO FRASE FIXA (MENSAGEM DE BOAS-VINDAS / ENDEREÇO)
   ========================================================================== */

.section-frase-fixa {
    background-color: var(--subtle-bg) !important;
    color: #343a40 !important; /* Texto escuro para dar leitura perfeita no fundo claro */
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}


/* ==========================================================================
   RODAPÉ (FOOTER)
   ========================================================================== */

footer {
    background-color: var(--primary-color) !important;
    color: rgba(255, 255, 255, 0.65);
}

footer h5 {
    color: #ffffff;
    letter-spacing: 0.5px;
}

footer a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s;
}

footer a:hover {
    color: var(--accent-color);
}


/* ==========================================================================
   REGRAS DE RESPONSIVIDADE (MOBILE & TABLET)
   ========================================================================== */

/* Tablets e Dispositivos Médios (Abaixo de 768px) */
@media (max-width: 768px) {
    .img-banner-carrossel {
        aspect-ratio: auto;          /* Desativa a proporção ultra-larga do desktop */
        height: auto !important;
        object-fit: contain;         /* Mostra o banner inteiro e sem nenhum corte na tela pequena */
    }
}

@media (max-width: 767.98px) {
    .carousel-item img {
        height: 50vh; /* Mantido para outras imagens genéricas do carrossel caso existam */
    }
}

/* Celulares e Dispositivos Pequenos (Abaixo de 576px) */
@media (max-width: 575.98px) {
    .logo-header {
        height: 42px; /* Ajuste milimétrico para o logotipo horizontal respirar bem no mobile */
    }
    
    .carousel-item img {
        height: 40vh; /* Evita que o banner tome a tela inteira vertical no mobile */
    }
}