/* Estilos gerais do body e layout */
body {
  background-color: rgba(10, 10, 10, 0.95);
  color: #FFFFFF;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* Previne scroll horizontal no body */
}

/* Header */
.site-header {
  padding: 15px 20px;
  background: transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* Mantém os itens centralizados verticalmente */
  max-width: 1200px;
  margin: 0 auto;
  width: 100%; /* Usa a largura disponível até o max-width */
  padding: 0 20px; /* Adiciona um padding nas laterais em telas menores */
}
.site-logo {
  height: 150px !important;
  width: auto !important;
  max-width: 400px !important; /* Ajuste se a largura for um problema */
  margin-right: 15px;
  display: block;
}

.site-name {
  font-size: 24px;
  font-weight: bold;
  color: #FBEC5D;
}
.auth-links {
  display: flex;
  align-items: center;
}
.auth-links a {
  font-weight: 700;
  padding: 10px 25px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-block;
  margin: 0 10px;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  border: 2px solid transparent;
}
.auth-links a.btn-custom-warning, .auth-links a.registrar {
  background: transparent;
  color: #FBEC5D;
  border: 2px solid #FBEC5D;
  box-shadow: 0 0 8px #FBEC5D;
  transition: box-shadow 0.3s ease, color 0.3s ease;
}
.auth-links a.btn-custom-warning:hover, .auth-links a.registrar:hover {
  box-shadow: 0 0 15px #F9D423, 0 0 20px #F9D423;
  color: #F9D423;
  background: rgba(249, 212, 35, 0.1);
}
.auth-links a.btn-custom-primary, .auth-links a.entrar {
  background: transparent;
  color: #4223F2;
  border: 2px solid #4223F2;
  box-shadow: 0 0 8px #4223F2;
  transition: box-shadow 0.3s ease, color 0.3s ease;
}
.auth-links a.btn-custom-primary:hover, .auth-links a.entrar:hover {
  box-shadow: 0 0 15px #5a3ef7, 0 0 20px #5a3ef7;
  color: #5a3ef7;
  background: rgba(90, 62, 247, 0.1);
}
.logo-and-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Container categorias (Primeiro carrossel) */
.container-categorias {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 40px 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(251, 236, 93, 0.8);
  color: #FBEC5D;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura total */
}
.container-categorias .container-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
  text-shadow: 0 0 10px #FBEC5D;
  text-align: center;
}
.container-categorias .category-items-container {
  display: flex;
  align-items: center;
  gap: 15px; /* Mantenha o gap reduzido */
  padding: 5px 0;
  flex-wrap: wrap; /* Mantenha */
  overflow-x: hidden; /* Mantenha */
  -webkit-overflow-scrolling: touch;
  /* transition: transform 10s linear; <-- CERTIFIQUE-SE QUE ESTA LINHA ESTÁ REMOVIDA OU COMENTADA */
  justify-content: center; /* Mantenha */
  /* Adicione uma largura fixa PROVISÓRIA ao container para testar */
  width: 100%;
  max-width: 800px; /* TENTE UMA LARGURA MENOR QUE SEU CONTAINER PRINCIPAL PARA FORÇAR A QUEBRA */
  margin: 0 auto; /* Centraliza esse container provisório */
}
.container-categorias .category-item {
  font-size: 1.05rem;
  font-weight: 600;
  cursor: default;
  padding: 5px 0;
  /* display: inline-block; <-- Pode manter ou remover */
  /* transition: color 0.3s ease; <-- Mantenha se quiser a troca de cor ao hover */
  color: #FBEC5D;
  text-align: center; /* Mantenha */
  flex: 1 1 auto; /* Mantenha */
  min-width: 100px; /* Mantenha o min-width reduzido */
  /* REMOVA QUALQUER OUTRA TRANSIÇÃO ALÉM DE COLOR, SE EXISTIR */
}
.container-categorias .category-item:hover {
  color: #fff;
}

/* Container de Imagens (O SEGUNDO CONTAINER QUE ESTÁ ULTRAPASSANDO) */
.container-imagens {
  background: url('../imagens/Abelha10.png') no-repeat center center / cover;
  position: relative;
  padding: 40px 20px;
  color: #FFFFFF;
  margin: 20px auto; /* Centraliza o container */
  max-width: 1200px; /* Limita a largura máxima */
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(251, 236, 93, 0.7);
  width: 100%; /* Garante que ocupe a largura disponível dentro do max-width */
  box-sizing: border-box; /* Inclui padding na largura total */
}
.container-imagens::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
  z-index: 0;
}
.container-imagens > * {
  position: relative;
  z-index: 1;
}

.container-title { /* Estilo global para títulos */
  font-size: 2rem;
  margin-bottom: 30px;
  color: #FBEC5D;
  font-weight: bold;
  text-align: center;
}

/* Wrapper para as imagens */
.imagens-wrapper {
  display: flex;
  justify-content: center;
  gap: 30px; /* Espaçamento entre as imagens */
  flex-wrap: wrap; /* Permite que as imagens quebrem para a próxima linha */
  align-items: center; /* Alinha verticalmente as imagens */
  width: 100%; /* Ocupa a largura disponível */
  box-sizing: border-box;
}

/* Estilos para as figuras dentro do wrapper */
.imagens-wrapper figure {
  /* Define uma largura base para cada figura. */
  /* O `flex: 0 0 250px;` significa: */
  /* flex-grow: 0 (não cresce), flex-shrink: 0 (não encolhe), basis: 250px (tenta ter 250px de largura) */
  flex: 0 0 250px;
  text-align: center;
  margin-bottom: 20px; /* Espaço abaixo das figuras quando elas quebram */
  display: flex;
  flex-direction: column; /* Imagem e caption um abaixo do outro */
  align-items: center; /* Centraliza imagem e caption */
  box-sizing: border-box;
}

/* Estilos para as imagens dentro das figuras */
.imagens-wrapper img {
  max-width: 100%; /* Garante que a imagem não ultrapasse seu container (figure) */
  height: auto;    /* Mantém a proporção */
  display: block;  /* Remove espaço extra abaixo da imagem */
  width: 100%;     /* Faz a imagem ocupar toda a largura do figure */
  border-radius: 8px; /* Borda arredondada opcional */
}

/* Estilos para a legenda (figcaption) */
.imagens-wrapper figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #e0e0e0;
  font-weight: 500;
}

/* Botões padrão */
.btn {
  font-weight: 700;
  padding: 10px 25px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  text-decoration: none;
  display: inline-block;
  margin: 0 10px 0 0;
  border: 2px solid transparent;
}
.btn-warning {
  background: linear-gradient(45deg, #FBEC5D, #F9D423);
  color: #1a1a1a;
  border-color: #FBEC5D;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.btn-warning:hover {
  background: linear-gradient(45deg, #F9D423, #FBEC5D);
  box-shadow: 0 6px 12px rgba(251,236,93,0.7);
  color: #111;
}
.btn-primary {
  background: #4223F2;
  color: #FBEC5D;
  border-color: #4223F2;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.btn-primary:hover {
  background: #5a3ef7;
  box-shadow: 0 6px 12px rgba(66,35,242,0.7);
  color: #fff;
}

/* Content top (se precisar) */
.content-top {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 40px 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px #4223F2, inset 0 0 20px #4223F2;
  color: #FBEC5D;
  text-align: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}
.content-top h1 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #FBEC5D;
  text-shadow: 0 0 15px #4223F2;
}
.content-top p.lead {
  text-align: justify;
  color: #FBEC5D;
  text-shadow: 0 0 10px #4223F2;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0 15px;
}

/* Responsividade básica */
@media (max-width: 768px) {
  .header-container, .logo-and-name {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .content-top h1 {
    font-size: 1.8rem;
  }
  .content-top p {
    font-size: 1rem;
  }
  .row { /* Para o footer */
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .col-md-3, .col-md-6 {
    max-width: 100%;
    text-align: center;
  }
}

.site-footer {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100%; /* Ajustado para não ultrapassar a tela */
}
.site-footer h5 {
  margin-bottom: 15px;
  font-weight: bold;
  color: #FBEC5D;
}
.site-footer ul {
  padding-left: 0;
}
.site-footer ul li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer ul li a:hover {
  color: #FBEC5D;
}
.social-buttons a {
  color: #FBEC5D;
  font-size: 1.5rem;
  transition: color 0.3s ease;
}
.social-buttons a:hover {
  color: #fff;
}
.site-footer p {
  margin-bottom: 0.5rem;
}
/* === CSS PERSONALIZADO PARA O FOOTER EM COLUNAS === */
 .footer-custom-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
}

  .footer-column {
    flex: 1 1 30%; /* Flex-grow: 1, Flex-shrink: 1, Flex-basis: 30% */
    /* Isso significa que cada coluna tentará ocupar 30% do espaço, pode crescer se houver espaço extra e pode encolher. */
    /* A base de 30% garante que pelo menos 3 colunas caibam em uma linha (3 * 30% = 90% + espaçamento) */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
    padding: 0 15px; /* Adiciona um pouco de padding horizontal para separar as colunas */
    min-width: 280px; /* Garante que cada coluna tenha pelo menos 280px de largura antes de encolher */
  }

  /* Ajuste para telas menores (onde o Bootstrap ainda mostra empilhado) */
  @media (max-width: 767px) { /* Ponto de quebra para telas pequenas */
    .footer-column {
      flex-basis: 100%; /* Cada coluna ocupa 100% da largura, empilhando-as */
      text-align: center; /* Centraliza o conteúdo das colunas quando empilhadas */
    }
  }

  /* Removemos o 'row' padrão do Bootstrap para não interferir */
  .site-footer .row {
    display: block; /* Remove o display: flex; do row do Bootstrap para não colidir com nosso flexbox */
  }

  /* Para garantir que a classe .mb-4 funcione bem com o flexbox */
  .footer-column.mb-4 {
    margin-bottom: 20px; /* Ajuste o valor se necessário */
  }

  /* Se o seu Bootstrap tem um padding padrão no .row que afeta a centralização */
  .footer-custom-grid {
    padding-left: 0;
    padding-right: 0;
  }
/* Estilos para imagens laterais no carrossel de categorias */
.image-left, .image-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(251, 236, 93, 0.7);
  z-index: 10;
}

.image-left {
  left: -220px; /* Ajuste a distância da esquerda conforme necessário */
}

.image-right {
  right: -220px; /* Ajuste a distância da direita conforme necessário */
}

/* Esconde as imagens laterais em telas pequenas para não atrapalhar o layout */
@media (max-width: 768px) {
  .image-left, .image-right {
    display: none;
  }
}