/* Importa a fonte Poppins do Google Fonts para deixar o texto mais bonito */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

/* Variáveis para facilitar ajustes de tamanho e responsividade */
:root {
  /* Tamanho padrão do texto, ajusta conforme o tamanho da tela */
  --font-size-base: clamp(14px, 1.2vw, 16px);
  /* Tamanho dos títulos, também responsivo */
  --font-size-title: clamp(20px, 2.5vw, 28px);
  /* Altura do cabeçalho, muda conforme a tela */
  --header-height: clamp(50px, 7vh, 60px);
  /* Altura da busca, pode ser alterada em breakpoints */
  --search-height: auto; /* valor padrão */
}

/* Garante que todos os elementos respeitem o tamanho da caixa */
* {
  box-sizing: border-box;
}

/* Estilo geral do corpo da página */
body {
  font-family: 'Poppins', sans-serif; /* Usa a fonte importada */
  background-color: #f9f7fc; /* Fundo clarinho */
  color: #3a2360; /* Texto roxo escuro */
  margin: 0;
  /* Espaço extra no topo para não ficar colado no header */
  padding-top: calc(var(--header-height) + 8px); /* small gap for breathing room */
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Container principal, centraliza e limita largura */
.container {
  max-width: 90vw;  /* Usa largura relativa */
  max-width: clamp(300px, 90vw, 900px); /* Mantém responsivo */
  margin: 0 auto;
  background: #fff; /* Fundo branco */
  border-radius: 1.25rem; /* Cantos arredondados */
  box-shadow: 0 0.5rem 1.5rem rgba(58, 35, 96, 0.1); /* Sombra suave */
  padding: clamp(20px, 3vw, 40px); /* Espaçamento interno responsivo */
}

/* Header fixo no topo, sempre visível */
header {
  background-color: rgba(58, 35, 96, 0.9); /* Roxo com transparência */
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* Fica acima dos outros elementos */
  display: flex;
  align-items: center;
  padding: 0 4vw;
}

/* Garante que o conteúdo não fique escondido atrás do header */
body {
  /* ...existing code... */
  padding-top: calc(var(--header-height) + 8px); /* small gap for breathing room */
}

/* Botões das áreas: ocupam metade da linha e têm largura mínima */
.grupo-areas button {
  flex: 1 1 45%;
  min-width: 140px;
}

/* Em telas menores, botões ocupam toda a largura para facilitar o toque */
@media (max-width: 900px) {
  .grupo-areas {
    gap: 10px;
    flex-direction: column;
  }
  .grupo-areas button {
    flex: 1 1 100%;
    min-width: 0;
  }

  header {
    padding: 0 3vw;
    height: calc(var(--header-height));
  }
}

/* Remove sombra do container em celulares para visual mais leve */
@media (max-width: 600px) {
  .container {
    box-shadow: none;
  }
  .botao-buscar {
    padding: 10px 12px;
  }
}

/* Menu de navegação no header: flexível e com rolagem horizontal se necessário */
header nav {
  display: flex;
  gap: clamp(12px, 1.5vw, 24px);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-grow: 1;
  justify-content: flex-end;
  min-width: 0;
}

/* Links do menu: brancos, sem sublinhado, com destaque no hover */
header nav a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(12px, 1.2vw, 16px);
  white-space: nowrap;
  transition: color 0.3s ease;
  flex-shrink: 0;
  padding: 0.3rem 0;
  margin-left: clamp(8px, 1vw, 24px);
}

header nav a:hover {
  color: #ff9f43; /* Laranja no hover */
}

/* Área da busca: input e botão lado a lado */
.topo {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 500px;
  margin: 0 auto 24px auto;
  width: 100%;
}

/* Input da busca: borda roxa, fundo claro, arredondado à esquerda */
.busca {
  flex: 1;
  padding: 12px 16px;
  font-size: 1rem;
  border: 2px solid #b583e3;
  border-right: none;
  border-radius: 30px 0 0 30px;
  outline: none;
  min-width: 0;
  height: 48px;
  background: #faf5ff;
  box-sizing: border-box;
}

/* Input principal, responsivo e estilizado */
.topo > .busca,
.busca {
  flex: 1 1 100%;
  max-width: 820px;
  padding: clamp(10px, 1.5vw, 14px) clamp(18px, 2vw, 20px);
  border: 2px solid #b583e3;
  background: #faf5ff;
  color: #3a2360;
  border-radius: 30px 0 0 30px;
  box-sizing: border-box;
  outline: none;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Destaque no input quando está selecionado */
.topo > .busca:focus,
.busca:focus {
  border-color: #7e64b7;
  box-shadow: 0 6px 18px rgba(126,100,183,0.08);
}

/* Botão de busca: laranja, arredondado à direita, com ícone centralizado */
.topo > .botao-buscar,
.botao-buscar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.2vw, 12px) clamp(14px, 2vw, 18px);
  background-color: #ff9f43;
  color: #ffffff;
  border: none;
  border-radius: 0 30px 30px 0;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,159,67,0.22);
  font-size: var(--font-size-base);
  margin-left: -2px;
  line-height: 1;
  flex: 0 0 auto;
  height: 48px;
  padding: 0 18px;
  background: #ff9f43;
  color: #fff;
  border: 2px solid #b583e3;
  border-left: none;
  border-radius: 0 30px 30px 0;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-left: 0;
}

/* Botão de busca: muda cor e sombra ao passar o mouse ou focar */
.topo > .botao-buscar:hover,
.topo > .botao-buscar:focus,
.botao-buscar:hover,
.botao-buscar:focus {
  background-color: #e88e2a;
  box-shadow: 0 8px 20px rgba(232,142,42,0.22);
  outline: none;
}

/* Se houver regras que empilham a busca, sobrescrevemos aqui para manter input e botão na mesma linha */
@media (max-width: 900px) {
  .topo {
    display: flex !important;
    flex-direction: row !important; /* Sempre lado a lado */
    align-items: center !important;
    gap: 0 !important;
    padding: 0 1.5vw !important;
    max-width: 500px !important;
    margin: 0 auto 24px auto !important;
    width: 100% !important;
    flex-wrap: nowrap !important; /* nunca quebra linha */
  }
  .busca {
    border-radius: 28px 0 0 28px !important;
    height: 40px !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }
  .botao-buscar {
    border-radius: 0 28px 28px 0 !important;
    height: 40px !important;
    width: auto !important;
    font-size: 1.2rem !important;
    padding: 0 12px !important;
    margin-left: 0 !important;
    align-self: center !important;
    box-shadow: 0 6px 16px rgba(255,159,67,0.22) !important;
    min-width: 48px !important;
    max-width: none !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* Remova ou comente QUALQUER trecho que empilhe a busca em telas menores */
/*
@media (max-width: 900px) {
  .topo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    justify-content: center;
    padding: 0 1.5vw;
  }
  .busca {
    width: 100%;
    max-width: 100%;
    padding: clamp(10px, 1.5vw, 14px) clamp(16px, 3vw, 18px);
    border-radius: 28px;
    box-sizing: border-box;
  }
  .botao-buscar {
    width: 56px;
    height: 56px;
    max-width: 56px;
    padding: 0;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    box-shadow: 0 6px 16px rgba(255, 159, 67, 0.25);
    font-size: 1.1rem;
  }
}
*/

/* Remova também este trecho se ainda existir: */
/*
@media (max-width: 900px) {
  .topo > .botao-buscar {
    margin-left: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 28px;
  }
  .topo > .busca {
    height: auto;
    padding-top: clamp(10px, 1.5vw, 14px);
    padding-bottom: clamp(10px, 1.5vw, 14px);
  }
}
*/

/* Ajuste para tablets: remove gap extra */
@media (min-width: 600px) and (max-width: 1199px) {
  .topo {
    gap: 0;
  }
  .topo > .botao-buscar {
    margin-left: -2px;
  }
}

/* Legenda explicativa abaixo da busca */
.legenda {
  font-size: clamp(11px, 1vw, 13px);
  color: #6d529f;
  text-align: center;
  font-style: italic;
  margin-bottom: clamp(15px, 2vw, 20px);
}

/* Abas de navegação entre filtros */
.abas {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 2vw, 24px);
  background: #f4eefc;
  padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 18px);
  border-radius: 30px;
  margin: clamp(20px, 3vw, 30px) auto;
  max-width: 600px;
  flex-wrap: wrap;
}

/* Botão de aba: estilizado, muda cor ao passar o mouse ou ativar */
.aba {
  background: transparent;
  color: #7e64b7;
  border: none;
  padding: clamp(10px, 1.5vw, 12px) clamp(20px, 2vw, 32px);
  font-weight: 600;
  font-size: var(--font-size-base);
  border-radius: 22px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.aba:hover {
  background-color: #fff3e6;
  color: #ff9f43;
  box-shadow: 0 4px 14px rgba(255, 159, 67, 0.2);
}

.aba.ativa {
  background-color: #7e64b7;
  color: white;
  box-shadow: 0 4px 16px rgba(126, 100, 183, 0.5);
}

/* Filtros de busca: caixa com fundo claro e borda laranja */
.filtros {
  background-color: #fff9f1;
  border: 2px solid #ff9f43;
  border-radius: 20px;
  padding: clamp(20px, 3vw, 32px) clamp(24px, 3vw, 36px);
  margin-bottom: clamp(30px, 4vw, 40px);
}

/* Esconde filtros quando não estão ativos */
.filtros:not(.ativo) {
  display: none;
}

/* Grupo de natureza: opções de filtro */
.grupo-natureza {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #7e64b7;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.grupo-natureza label {
  margin-right: clamp(16px, 2vw, 24px);
  font-weight: 400;
  color: #7e64b7;
  cursor: pointer;
}

.grupo-natureza input[type="checkbox"] {
  margin-right: 10px;
  accent-color: #7e64b7;
  cursor: pointer;
}

/* Botões das áreas: roxo, arredondados, com sombra */
.grupo-areas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 16px);
  margin-top: clamp(12px, 2vw, 16px);
}

.grupo-areas button {
  background-color: #7e64b7;
  color: white;
  border: none;
  padding: clamp(10px, 1.5vw, 14px) clamp(18px, 2vw, 24px);
  border-radius: 20px;
  flex: 1 1 45%;
  font-weight: 600;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0.375rem 1rem rgba(126, 100, 183, 0.25);
  user-select: none;
  min-width: 120px; /* mínimo para botões */
}

/* Botão ativo: laranja e com sombra mais forte */
.grupo-areas button.ativa {
  background-color: #ff9f43;
  box-shadow: 0 0.625rem 1.5rem rgba(255, 159, 67, 0.8);
  color: white;
}

/* Lista de resultados: caixa com rolagem, fundo branco e sombra */
.lista-resultados {
  max-height: clamp(300px, 60vh, 600px);
  overflow-y: auto;
  background: #ffffff;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 28px;
  box-shadow: 0 0.625rem 2rem rgba(126, 100, 183, 0.15);
  list-style: none;
  margin: 0;
}

/* Cada item da lista: fundo lilás claro, arredondado, espaçado */
.lista-resultados li {
  background-color: #f7f2fb;
  border-radius: 20px;
  padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 24px);
  margin: clamp(10px, 2vw, 14px) 0;
  font-weight: 600;
  color: #4e3c7a;
  transition: background-color 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Item da lista: muda cor ao passar o mouse */
.lista-resultados li:hover {
  background-color: #ede8fb;
  cursor: pointer;
}

/* Rodapé: fundo roxo escuro, texto branco, espaçamento menor */
.rodape {
  background-color:  #3a2360;
  color: #ffffff;
  padding: 1.5rem 1rem;
  margin-top: 3rem;
  font-size: 0.875rem;
}

/* Container do rodapé: centralizado e flexível */
.rodape-container {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

/* Em telas médias, rodapé fica em linha */
@media (min-width: 768px) {
  .rodape-container {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}

/* Logo do rodapé: menor e proporcional */
.rodape-logo {
  height: 73px;
  width: auto;
  max-width: 190px;
  display: block;
}

/* Seções do rodapé: limitam largura */
.rodape-info,
.rodape-contato {
  max-width: 500px;
}

/* Título da seção de contato */
.rodape-contato h4 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  font-weight: bold;
}

/* Ajustes para telas bem pequenas */
@media (max-width: 480px) {
  .header-inner {
    gap: 10px;
  }
  header nav {
    gap: 12px;
  }
  header nav a {
    font-size: 13px;
    margin-left: 8px;
  }
  .logo-area img {
    height: 28px;
  }
  .logo-area span {
    font-size: 16px;
  }
  .grupo-areas button {
    flex: 1 1 100%;
  }
}

/* Busca em telas menores: input e botão empilhados */
@media (max-width: 900px) {
  .topo {
    display: flex !important;
    flex-direction: row !important; /* Sempre lado a lado */
    align-items: center !important;
    gap: 0 !important;
    padding: 0 1.5vw !important;
    max-width: 500px !important;
    margin: 0 auto 24px auto !important;
    width: 100% !important;
    flex-wrap: nowrap !important; /* nunca quebra linha */
  }
  .busca {
    border-radius: 28px 0 0 28px !important;
    height: 40px !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }
  .botao-buscar {
    border-radius: 0 28px 28px 0 !important;
    height: 40px !important;
    width: auto !important;
    font-size: 1.2rem !important;
    padding: 0 12px !important;
    margin-left: 0 !important;
    align-self: center !important;
    box-shadow: 0 6px 16px rgba(255,159,67,0.22) !important;
    min-width: 48px !important;
    max-width: none !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* Ajuste final: mantém input e botão sempre colados em telas menores */
@media (max-width: 1200px) {
  .container .topo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important; /* impedir quebra entre input e botão */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto 24px auto !important;
    padding: 0 1.5vw !important;
  }

  .container .topo .busca {
    flex: 1 1 auto !important;    /* ocupa espaço restante */
    min-width: 0 !important;      /* essencial para encolher dentro do flex */
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-right: none !important; /* alinhamento visual com o botão */
    border-radius: 30px 0 0 30px !important;
    margin: 0 !important;
    padding: clamp(10px, 1.2vw, 12px) clamp(16px, 2vw, 18px) !important;
  }

  .container .topo .botao-buscar {
    flex: 0 0 auto !important;    /* não expande, não encolhe de forma errática */
    min-width: 44px !important;   /* garante espaço para ícone/texto */
    width: auto !important;       /* anula larguras fixas anteriores */
    max-width: none !important;
    box-sizing: border-box !important;
    margin-left: -2px !important; /* remove a seam visual entre input e botão */
    border-left: none !important; /* evita borda dupla */
    height: 48px !important;      /* mantém altura consistente com o input */
    padding: 0 12px !important;   /* espaçamento interno controlado */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 28px 28px 0 !important; /* canto arredondado à direita */
    box-shadow: 0 6px 16px rgba(255,159,67,0.22) !important;
  }
}

/* Proteção: garante que não haja quebra entre input e botão */
.container .topo {
  flex-wrap: nowrap !important;
}
.container .topo .busca {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.container .topo .botao-buscar {
  flex: 0 0 auto !important;
  min-width: 44px !important;
  width: auto !important;
}

/* Correção de tamanho do botão em telas pequenas: mesma altura do input */
@media (max-width: 900px) {
  .container .topo,
  .topo {
    flex-wrap: nowrap !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .container .topo .busca,
  .topo .busca {
    height: 40px !important;             /* mesma altura do botão */
    min-height: 40px !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    box-sizing: border-box !important;
  }

  .container .topo .botao-buscar,
  .topo .botao-buscar {
    height: 40px !important;             /* garante altura igual ao input */
    min-height: 40px !important;
    line-height: 1 !important;
    font-size: 1rem !important;          /* reduz o tamanho do ícone/texto */
    padding: 0 12px !important;          /* não aumenta a altura, só largura */
    margin-left: -2px !important;        /* remove seam entre input e botão */
    border-left: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 28px 28px 0 !important;
    /* sobrescreve regras que definiam 56px/48px/etc */
    width: auto !important;
    max-width: none !important;
  }

  /* Caso o botão contenha um ícone/emoji, garanta que também não fique grande */
  .container .topo .botao-buscar > * ,
  .topo .botao-buscar > * {
    font-size: 1rem !important;
    line-height: 1 !important;
  }
}