/* ==========================================
   1. CABEÇALHO (REMOVIDO STICKY PROBLEMÁTICO)
   ========================================== */
.header-principal {
  background-color: #ffffff;
  /* position: sticky/fixed removidos para eliminar o lag de GPU */
}

/* BARRA AZUL COM SOMBRA OTIMIZADA */
.barra-azul-divisoria {
  height: 4px;
  background-color: #003D7A !important;
  width: 100%;
}

/* ==========================================
   2. ELEMENTOS DISCRETOS DA BARRA SUPERIOR
   ========================================== */
.link-social-discreto {
  color: #6c757d;
  font-size: 0.85rem;
  transition: color 0.15s ease;
  text-decoration: none;
  padding: 2px 4px;
}

.link-social-discreto:hover {
  color: #003D7A;
}

/* ==========================================
   3. CAMPO DE BUSCA DO TOPO
   ========================================== */
.caixa-busca-topo {
  width: 280px;
}

.rounded-pill-start {
  border-top-left-radius: 50rem !important;
  border-bottom-left-radius: 50rem !important;
}

.rounded-pill-end {
  border-top-right-radius: 50rem !important;
  border-bottom-right-radius: 50rem !important;
}

/* ==========================================
   4. MENU DE NAVEGAÇÃO PRINCIPAL
   ========================================== */
.bg-menu-claro {
  background-color: #F8F9FA !important;
}

.navbar-nav .nav-link {
  color: #003D7A !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.2px;
}

.navbar-nav .nav-link:hover {
  color: #002855 !important;
  background-color: rgba(0, 61, 122, 0.08) !important;
  border-radius: 6px;
}

/* --- DROPDOWN DESKTOP SUAVE --- */
@media (min-width: 992px) {
  .navbar .dropdown-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    margin-top: 0;
    pointer-events: none;
  }

  .navbar .nav-item.dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto;
  }
}

.dropdown-menu .dropdown-item {
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 500 !important;
  color: #333333 !important;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #F1F4F7 !important;
  color: #003D7A !important;
}

/* ==========================================
   5. BANNER SLIDER - OTIMIZADO
   ========================================== */
#carouselDestaques,
#carouselDestaques .carousel-inner {
  background-color: transparent !important;
}

.container-banner-fit {
  width: 100% !important;
  height: 400px;
  background-color: #003D7A;
}

.img-banner-dinamico {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 5px;
  background-color: #ffffff;
  border: 2px solid #000000;
  opacity: 0.6;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: #000000;
}

/* ==========================================
   6. MENU RESPONSIVO (MOBILE LEVE E NATIVO)
   ========================================== */
@media (max-width: 991.98px) {
  .header-principal .navbar-collapse {
    max-height: 80vh;
    overflow-y: auto;
    background-color: #ffffff !important;
  }

  .navbar-nav .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    margin: 6px 0 12px 0 !important;
  }

  .navbar-nav .dropdown-menu .dropdown-item {
    color: #333333 !important;
    padding: 10px 20px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
  }

  .navbar-nav .dropdown-menu .dropdown-item:hover,
  .navbar-nav .dropdown-menu .dropdown-item:active {
    background-color: #F1F4F7 !important;
    color: #003D7A !important;
  }
}

/* Responsividade Banners */
@media (max-width: 1200px) { .container-banner-fit { height: 340px; } }
@media (max-width: 768px) { .container-banner-fit { height: 220px; } }
@media (max-width: 480px) { .container-banner-fit { height: 160px; } }