/* ===== MOBILE LAYOUT (até 1000px) ===== */
@media (max-width: 1000px) {

 html, body {
  margin: 0.5%;
  font-family: "Fredoka", sans-serif;
  background: #1e293b;
  color: #fff;
  height: 100%;
 }

 .categoria-btn-mobile {
  font-family: "Fredoka", sans-serif;
  font-weight: 600; /* pode ser 400, 500, 700 conforme o estilo desejado */
  font-size: 16px;
  color: #e64a51;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}
.site-name {
    font-family: "Fredoka", sans-serif;
    font-weight: 700; /* Negrito */
    font-size: 28px;
    margin-right: 20px;
    color: #e64a51; /* Branco puro para o texto e ícone */
    z-index: 10;
    position: relative;
    /* Adicione display flex ou text-align para centralizar se necessário */
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    width: 100%; /* Para centralizar o conteúdo */
    margin-top: 0px; /* Apenas para demonstração, ajuste conforme layout */
    margin-left: 10px;

    /* ✨ EFEITO DE LUZ ✨ */
    
 }
/*#ec8a39*/

.circulo-logo{
    width: 130px;
    height: 33px;
    border-radius: 30px;
    border: 2px solid #e64a51;
    background: linear-gradient(145deg, #2A3550, #121A2E);
    box-shadow:
        inset 2px 2px 4px rgba(255, 255, 255, 0.2), /* luz interna */
        inset -2px -2px 4px rgba(0, 0, 0, 0.4),     /* sombra interna */
        2px 2px 6px rgba(0, 0, 0, 0.5);             /* sombra externa */
}

 /* HEADER */
 header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  background: #1e293b;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-sizing: border-box;
 }
 .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* <-- alinha tudo à direita */
  gap: 10px;
  flex: 1;
 }
 .header-right input {
  padding: 5px 10px;
  border-radius: 4px;
  border: none;
  font-size: 14px;
 }

 /* Título e logo dentro do header */
 header h1, 
 header img.logo {
  font-size: 20px;
  color: #fff;
  margin: 0;
  flex-shrink: 0;
 }

 /*   * Bloco de busca global (linhas 72-97 do original) removido 
  * para evitar duplicidade. A lógica agora está 
  * corretamente definida dentro da #bottomBar.
  */

 .botoes-right{
  display: flex;
  align-items: center;    /* Centraliza verticalmente */
  gap: 10px;         /* Espaço entre os botões */
  justify-content: center;  /* Centraliza horizontalmente */
 }
 /*BOTÃO DOAÇÃO*/
 .doacao-btn {
  background-color: #E64A51;
  border: none;
  border-radius: 100px;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  cursor: pointer;
  margin: 0;
  text-decoration: none;
  display: flex;
 }

 .botao-quemsomos{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #e8b725; /* azul padrão */
  color: white;
  font-weight: bold;
  font-size: 20px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, background-color 0.2s;
  text-decoration: none;
 }
 .botao-quemsomos:hover{
  background-color: #b9bec4;
  transform: scale(1.1);
 }

 /* CATEGORIAS (botões horizontais logo abaixo do header) */
 #categoriasButtonsMobile,
 #catButtons {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  position: fixed;
  top: 56px; /* logo abaixo do header */
  left: 0;
  right: 0;
  z-index: 900; 
  box-sizing: border-box;
 }

 .categoria-btn-mobile {
  flex: 0 0 auto;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 16px;
  padding: 8px 14px;
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
 }

 .categoria-btn-mobile:hover,
 .categoria-btn-mobile.active {
  background: rgba(255,255,255,0.25);
  transform: translateY(-2px);
 }

 /* ÁREA DAS CATEGORIAS NO CONTEÚDO */
 .categoria {
  margin-top: 120px; 
 }

 .categoria h2 {
  font-family: 'Liter', sans-serif;
  margin-left: 16px;
  font-size: 22px;
  color: #fff;
 }

 /* MODAL DE VÍDEO */
 #videoModal {
  z-index: 2000; 
 }

 #navCategoriasMob {
  display: flex;
  flex-wrap: nowrap;     
  overflow-x: auto;      
  overflow-y: hidden;     
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  position: fixed;
  top: 56px; /* logo abaixo do header */
  left: 0;
  right: 0;
  z-index: 900;
  box-sizing: border-box;
  scroll-behavior: smooth;  
 }

 #navCategoriasMob::-webkit-scrollbar {
  display: none;
 }

 /*   * =============================================
  *  BLOCO DA BARRA INFERIOR CORRIGIDO
  *  (Substituindo o bloco antigo das linhas 293-330)
  * =============================================
  */

 /* ===== BARRA FIXA INFERIOR ===== */
 #bottomBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center; /* Centraliza o .search-container */
  padding: 0 16px;
  z-index: 1200; 
  box-sizing: border-box;
  border-top: 1px solid rgba(255,255,255,0.1);
 }

 /* O contêiner que o JS ativa */
 #bottomBar .search-container {
  display: flex;
  align-items: center;
  background-color: #333;
  border-radius: 25px;
  padding: 5px 8px;
  transition: all 0.4s ease;
 }

 /* O botão (usando a classe correta do HTML) */
 #bottomBar .search-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 5px;
 }

 /* O input (usando a classe correta do HTML) */
 #bottomBar .search-input {
  background: transparent;
  border: none;
  color: white;
  outline: none;
  /* 1. Começa escondido */
  width: 0;
  opacity: 0;
  visibility: hidden;
  padding-left: 0;
  transition: all 0.4s ease;
 }

 /* 2. A MÁGICA: O que acontece quando o JS adiciona a classe .active */
 #bottomBar .search-container.active .search-input {
  width: 180px; /* Expande a caixa de texto */
  opacity: 1;
  visibility: visible;
  padding-left: 8px; /* Espaço do ícone */
 }
 
 /* =============================================
  * FIM DO BLOCO CORRIGIDO
  * =============================================
  */

 /*DESABILITA BANNER*/
 .banner{display: none;}

 /* CONTAINER DE VÍDEOS */
 #categoriasContainer {
  position: relative;
  margin-top: 110px; /* espaço para header (56px) + categorias (cerca de 54px) */
  padding-bottom: 60px; /* espaço para não ficar escondido pela bottomBar */
  background: #1e293b; /* fundo igual ao da página */
  box-sizing: border-box;
 }

}