/* Centralizar o logo no header */
.header-area .logo {
  display: flex;
  align-items: center;
  height: 100%; /* ocupa a altura do header */
}

/* Ajuste do tamanho do logo no header */
.header-area .logo img {
  height:70px; /* ajuste o valor conforme o visual desejado */
  width: auto;  /* mantém a proporção */
  object-fit: contain;
}

/* Aumentar o espaçamento vertical do header */
.header-area.header-sticky {
  padding: 7px 0; /* antes era bem menor */
}

/* Ajustar também no estado fixo (quando o header gruda no topo) */
.header-area.header-sticky.sticky {
  padding: 10px 0;
}

/* ======= Seções de Banners ======= */
.banner-section {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.banner-section .banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* (Opcional) — caso queira um leve espaçamento entre seções: */
.banner-section + .banner-section {
  margin-top: 0; /* mude para 20px se quiser espaçamento */
}

@media (max-width: 768px) {
  .header-area .logo img {
    margin-top: 5px;
    height: 65px; /* menor em telas pequenas */
  }
}

/* ======= FAIXAS DE BOTÕES (banner premiação) ======= */
.banner-faixa-full {
  width: 100%;
  background-color: #460000; /* cor da faixa */
  display: flex;
  justify-content: center; /* centraliza os botões horizontalmente */
  flex-wrap: wrap; /* permite quebrar linha em telas pequenas */
  gap: 400px; /* espaçamento entre os botões, mais flexível */
  padding: 20px 0;
}

.banner-faixa-full .faixa-link {
  padding: 12px 30px;
  background-color: #660000; /* cor ligeiramente diferente para destaque dos botões */
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  min-width: 180px; /* evita botões muito pequenos */
  text-align: center;
  font-size: 1rem; /* tamanho padrão da fonte */
}

.banner-faixa-full .faixa-link:hover {
  background-color: #ff6600;
  color: #fff;
  text-decoration: none;
}

.banner-faixa-full .faixa-link-img {
  padding: 10px 25px;
  background-color: #660000; /* cor ligeiramente diferente para destaque dos botões */
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.3s ease;
  min-width: 180px; /* evita botões muito pequenos */
}

.banner-faixa-full .faixa-link-img:hover {
  background-color: #ff6600;
  color: #fff;
  text-decoration: none;
}

.banner-faixa-full .faixa-link-img img {
  max-width: 500px; /* define um tamanho máximo */
  width: auto;       /* mantém proporção */
  display: block;    /* evita espaços extras */
  margin: 0 auto;    /* centraliza a imagem no botão */
  transition: transform 0.5s ease; /* <<< adiciona a suavização */
}

.banner-faixa-full .faixa-link-img:hover img {
  transform: scale(1.05); /* leve zoom ao passar o mouse */
}

/* Responsividade: telas médias (tablets) */
@media (max-width: 1024px) {
  .banner-faixa-full {
    gap: 200px; /* reduz o gap em telas médias */
  }
  
  .banner-faixa-full .faixa-link {
    max-width: 180px;
    padding: 10px 25px;
    font-size: 1rem;
  }

  .banner-faixa-full .faixa-link-img img {
    width: 300px;
    padding: auto;
  }
}

/* Responsividade: telas pequenas (celulares) */
@media (max-width: 768px) {
  .banner-faixa-full {
    gap: 80px;
    padding: 15px 0;
  }

  .banner-faixa-full .faixa-link {
    max-width: 140px;
    padding: 8px 15px;
    font-size: 0.9rem;
  }

  .banner-faixa-full .faixa-link-img img {
    width: 250px;
    padding: auto;
  }
}

/* Responsividade: celulares muito estreitos (<480px) */
@media (max-width: 480px) {
  .banner-faixa-full {
    flex-direction: row; /* mantém lado a lado, se couber */
    gap: 25px;
    padding: 10px 0;
    justify-content: center;
  }

  .banner-faixa-full .faixa-link {
    flex: 0 0 auto; /* não cresce além do necessário */
    width: 40%; /* cada botão ocupa 45% da largura */
    min-width: 0; /* remove o mínimo que estava quebrando */
    max-width: none; /* remove limite máximo para respeitar 45% */
    padding: 6px 10px;
    font-size: 0.5rem; /* fonte menor */
  }

  .banner-faixa-full .faixa-link-img img {
    width: 170px;
    padding: auto;
  }
}

/* Responsividade: celulares muito estreitos (<360px) */
@media (max-width: 360px) {
  .banner-faixa-full {
    flex-direction: row; /* mantém lado a lado, se couber */
    gap: 30px;
    padding: 5px 0;
    justify-content: center;
  }

  .banner-faixa-full .faixa-link {
    flex: 0 0 35%; /* diminui a largura de 50% para 40% */
    max-width: none;
    min-width: 0; /* remove o mínimo que estava quebrando */
    padding: 4px 6px; /* padding menor para caber */
    font-size: 0.5rem; 
    box-sizing: border-box; /* inclui padding na largura */
  }

  .banner-faixa-full .faixa-link-img img {
    width: 150px;
    padding: auto;
  }
}

/* ==== Forçar comportamento MOBILE somente em width = 767px ==== */
@media (width: 767px) {
  /* Esconde menu padrão e habilita visual mobile */
  .header-area .main-nav .nav {
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    background: #fff !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
    z-index: 9999 !important;
  }

  /* Exibe botão menu (hamburger) */
  .header-area .menu-trigger {
    display: block !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 16px !important;
    top: 22px !important;
    z-index: 10000 !important;
  }

  /* Quando a main-nav tiver a classe .mobile-open mostramos o nav */
  .header-area .main-nav.mobile-open .nav {
    display: block !important;
  }

  /* Ajustes de itens do menu para mobile */
  .header-area .main-nav .nav li {
    width: 100% !important;
    display: block !important;
    border-top: 1px solid #eee !important;
    background: #fff !important;
  }

  .header-area .main-nav .nav li a {
    display: block !important;
    padding: 12px 18px !important;
    color: #1e1e1e !important;
    text-align: left !important;
    font-weight: 500 !important;
    background: none !important;
  }
}