/* header.css — copiado do site atual do cliente (ferri): barra superior, header, menu e mega menu. */

/* =============================================================
   TOP BAR
   ============================================================= */
.barra-topo {
  background: var(--cor-site-5);
  color: var(--cor-site-4);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  overflow: hidden;
  max-height: 42px;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}

.barra-topo.oculta {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.barra-topo__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  width: 100%;
  padding: 0 12px;
  gap: 16px;
}

.barra-topo__esquerda {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.barra-topo__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-site-4);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.barra-topo__item:hover {
  color: #fff;
}

.barra-topo__item i {
  font-size: 0.72rem;
  color: var(--cor-site-4);
  display: flex;
}

.barra-topo__sep {
  color: var(--cor-site-3);
}

.barra-topo__direita {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.barra-topo__creci {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cor-site-4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.barra-topo__creci i {
  font-size: 0.68rem;
}

.barra-topo__redes {
  display: flex;
  align-items: center;
  gap: 10px;
}

.barra-topo__rede {
  color: var(--cor-site-4);
  font-size: 0.75rem;
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1;
}

.barra-topo__rede:hover {
  color: #fff;
}

/* =============================================================
   HEADER PRINCIPAL
   ============================================================= */
.cabecalho {
  background: #fff;
  border-bottom: 1px solid #e8edf5;
  position: sticky;
  top: 0;
  z-index: 7;
  overflow: visible;
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.cabecalho--fixo {
  background: var(--cor-site-5);
  border-bottom-color: transparent;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  width: 100%;
  padding: 0 12px;
  gap: 20px;
}

/* Logo */
.cabecalho__logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.cabecalho__logo img {
  height: 44px;
  width: auto;
  transition: filter 0.3s;
}

.cabecalho--fixo .cabecalho__logo img {
  filter: brightness(0) invert(1);
}

/* Autoridade */
.cabecalho__autoridade {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-site-4);
  white-space: nowrap;
  flex-shrink: 0;
}

.cabecalho__autoridade::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cor-site-2);
  flex-shrink: 0;
}

.cabecalho--fixo .cabecalho__autoridade {
  color: var(--cor-site-claro);
}

.cabecalho--fixo .cabecalho__autoridade::before {
  background: var(--cor-site-claro);
}

/* Navegação */
.nav-principal {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: end;
  overflow: visible;
}

.nav-principal ul {
  display: flex;
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.nav-principal ul li a {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  font-size: 0.855rem;
  font-weight: 500;
  color: #2d3748;
  text-decoration: none;
  letter-spacing: 0.01em;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.nav-principal ul li a:hover,
.nav-principal ul li.ativo a {
  color: var(--cor-site-1);
  border-bottom-color: var(--cor-site-1);
}

.cabecalho--fixo .nav-principal ul li a {
  color: var(--cor-site-3);
}

.cabecalho--fixo .nav-principal ul li a:hover,
.cabecalho--fixo .nav-principal ul li.ativo a {
  color: #fff;
  border-bottom-color: var(--cor-site-2);
}

/* ── IDENTIDADE ALUGAR (AZUL) / COMPRAR (VERMELHO) ── */
.nav-principal ul li.nav-alugar>a:hover,
.nav-principal ul li.nav-alugar.ativo>a,
.nav-principal ul li.nav-alugar.aberto>a {
  color: var(--cor-alugar);
  border-bottom-color: var(--cor-alugar);
}

.nav-principal ul li.nav-comprar>a:hover,
.nav-principal ul li.nav-comprar.ativo>a,
.nav-principal ul li.nav-comprar.aberto>a {
  color: var(--cor-comprar-escuro);
  border-bottom-color: var(--cor-comprar-escuro);
}

/* No cabeçalho fixo o fundo já é azul: o azul do "Alugar" viraria invisível */
.cabecalho--fixo .nav-principal ul li.nav-alugar>a:hover,
.cabecalho--fixo .nav-principal ul li.nav-alugar.ativo>a,
.cabecalho--fixo .nav-principal ul li.nav-alugar.aberto>a {
  color: #fff;
  border-bottom-color: #fff;
}

.cabecalho--fixo .nav-principal ul li.nav-comprar>a:hover,
.cabecalho--fixo .nav-principal ul li.nav-comprar.ativo>a,
.cabecalho--fixo .nav-principal ul li.nav-comprar.aberto>a {
  color: #fff;
  border-bottom-color: var(--cor-comprar);
}

/* Cabeçalho do mega menu na cor da pretensão */
.nav-principal ul li.nav-alugar .mega-menu__cabecalho {
  background: var(--cor-alugar);
}

.nav-principal ul li.nav-comprar .mega-menu__cabecalho {
  background: linear-gradient(135deg, var(--cor-site-5) 0%, var(--cor-comprar-escuro) 100%);
}


/* =============================================================
   MEGA MENU
   ============================================================= */
.nav-principal ul li.tem-mega {
  position: relative;
}

/* Chevron animado */
.nav-principal ul li.tem-mega>a {
  gap: 4px;
}

.nav-principal ul li.tem-mega>a .chevron-menu {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.5;
}

.nav-principal ul li.tem-mega>a .chevron-menu svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-principal ul li.tem-mega:hover>a .chevron-menu {
  transform: rotate(180deg);
  opacity: 1;
}

.mega-menu {
  position: absolute;
  top: 100%;
  transform: translateY(6px);
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(15, 31, 61, 0.16),
    0 4px 16px rgba(15, 31, 61, 0.08),
    0 0 0 1px rgba(15, 31, 61, 0.06);
  padding: 0;
  min-width: 500px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.nav-principal ul li.tem-mega .mega-menu.aberto {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* chevron gira quando aberto */
.nav-principal ul li.tem-mega.aberto>a .chevron-menu {
  transform: rotate(180deg);
  opacity: 1;
}


/* Menu pequeno (Seguros) */
.mega-menu--pequeno {
  min-width: 280px;
}

/* Cabeçalho interno do mega menu */
.mega-menu__cabecalho {
  background: linear-gradient(135deg, var(--cor-site-5) 0%, var(--cor-site-2) 100%);
  padding: 14px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mega-menu__cabecalho-icone {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-site-claro);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.mega-menu__cabecalho-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mega-menu__cabecalho-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.mega-menu__cabecalho-subtitulo {
  font-size: 0.68rem;
  color: var(--cor-site-claro);
  letter-spacing: 0.01em;
}

.mega-menu__cabecalho-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
  flex-shrink: 0;
}

.mega-menu__cabecalho-link:hover {
  color: #fff;
}

.mega-menu__cabecalho-link i {
  font-size: 0.65rem;
  transition: transform 0.2s;
}

.mega-menu__cabecalho-link:hover i {
  transform: translateX(3px);
}

/* Corpo do mega menu */
.mega-menu__corpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 16px 8px 12px;
}

.mega-menu__coluna {
  padding: 0 12px;
}

.mega-menu__coluna+.mega-menu__coluna {
  border-left: 1px solid var(--cor-site-4);
}

.mega-menu__coluna-titulo {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a0aec0;
  margin-bottom: 8px;
  padding-left: 10px;
}

.mega-menu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mega-menu__lista li a {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 8px 10px !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  border-bottom: none !important;
  gap: 10px !important;
  transition: background 0.15s, color 0.15s, transform 0.15s !important;
  position: relative;
}

.mega-menu__lista li a:hover {
  background: var(--cor-site-4) !important;
  color: var(--cor-site-1) !important;
  transform: translateX(2px) !important;
  border-bottom: none !important;
}

/* Ícone com fundo colorido */
.mega-menu__lista li a .icone-item {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--cor-site-4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--cor-site-1);
  transition: background 0.15s, color 0.15s;
}

.mega-menu__lista li a:hover .icone-item {
  background: var(--cor-site-1);
  color: #fff;
}

.mega-menu__lista li a .texto-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.mega-menu__lista li a .texto-item span {
  font-size: 0.72rem !important;
  color: #9aa5b4 !important;
  font-weight: 400 !important;
}

.mega-menu__lista li a:hover .texto-item span {
  color: var(--cor-site-claro) !important;
}

/* ── IDENTIDADE DENTRO DO MEGA MENU: ALUGAR azul / COMPRAR vermelho ── */
.nav-comprar .mega-menu__lista li a:hover {
  color: var(--cor-comprar-escuro) !important;
}

.nav-comprar .mega-menu__lista li a .icone-item {
  color: var(--cor-comprar-escuro);
}

.nav-comprar .mega-menu__lista li a:hover .icone-item {
  background: var(--cor-comprar-escuro);
  color: #fff;
}

.nav-alugar .mega-menu__lista li a:hover {
  color: var(--cor-alugar) !important;
}

.nav-alugar .mega-menu__lista li a .icone-item {
  color: var(--cor-alugar);
}

.nav-alugar .mega-menu__lista li a:hover .icone-item {
  background: var(--cor-alugar);
  color: #fff;
}

/* Rodapé do mega menu */
.mega-menu__rodape {
  background: var(--cor-site-4);
  border-top: 1px solid #edf0f7;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mega-menu__rodape-dica {
  font-size: 0.7rem;
  color: #a0aec0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mega-menu__rodape-dica i {
  color: var(--cor-site-4);
}

.mega-menu__rodape-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cor-site-1);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--cor-site-4);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.mega-menu__rodape-btn:hover {
  background: var(--cor-site-1);
  color: #fff;
}

.mega-menu__rodape-todos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  transition: color 0.2s;
}

.mega-menu__rodape-todos i {
  color: var(--cor-site-claro);
  font-size: 0.72rem;
}

.mega-menu__rodape-todos:hover {
  color: var(--cor-site-1);
}

.mega-menu__rodape-todos:hover i {
  color: var(--cor-site-1);
}

/* Mega pequeno (Seguros) */
.mega-menu--pequeno {
  min-width: 280px;
}

.mega-menu--pequeno .mega-menu__corpo {
  grid-template-columns: 1fr;
}

.mega-menu--pequeno .mega-menu__coluna+.mega-menu__coluna {
  border-left: none;
}

/* Sticky */
.cabecalho--fixo .mega-menu {
  top: calc(100% + 2px);
}

/* Ações */
.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25d366;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
  transition: background 0.2s, transform 0.15s;
}

.btn-whatsapp:hover {
  background: #1dba58;
  transform: translateY(-1px);
}

.btn-area-cliente {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--cor-site-5) !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 8px 15px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.2s, transform 0.15s !important;
  height: auto !important;
}

.btn-area-cliente:hover {
  background: var(--cor-site-2) !important;
  transform: translateY(-1px) !important;
}

.cabecalho--fixo .btn-area-cliente {
  background: var(--cor-site-1);
}

.cabecalho--fixo .btn-area-cliente:hover {
  background: var(--cor-site-1);
}

/* ── "Ver todos os imóveis" dentro do mega menu ──
   O cabeçalho do menu agora é azul (Alugar) ou vermelho (Comprar),
   então o botão precisa ser branco com o texto na cor da pretensão. */
.nav-alugar .mega-menu__cabecalho .btn-area-cliente,
.nav-comprar .mega-menu__cabecalho .btn-area-cliente {
  background: #fff !important;
}

.nav-alugar .mega-menu__cabecalho .btn-area-cliente:hover,
.nav-comprar .mega-menu__cabecalho .btn-area-cliente:hover {
  background: rgba(255, 255, 255, 0.88) !important;
}

.nav-alugar .mega-menu__cabecalho .btn-area-cliente {
  color: var(--cor-alugar) !important;
}

.nav-comprar .mega-menu__cabecalho .btn-area-cliente {
  color: var(--cor-comprar-escuro) !important;
}

/* Subtítulo do cabeçalho: o azul claro não lê bem sobre o vermelho */
.nav-alugar .mega-menu__cabecalho-subtitulo,
.nav-comprar .mega-menu__cabecalho-subtitulo {
  color: rgba(255, 255, 255, 0.85);
}

.btn-anunciar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--cor-site-5) !important;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--cor-site-1);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.btn-anunciar:hover {
  background: var(--cor-site-4);
  border-color: var(--cor-site-1);
  color: var(--cor-site-1) !important;
  transform: translateY(-1px);
}

.cabecalho--fixo .btn-anunciar {
  border-color: var(--cor-site-4);
  color: var(--cor-site-3) !important;
}

.cabecalho--fixo .btn-anunciar:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--cor-site-claro);
  color: #fff !important;
}

/* Mobile hamburger */
.cabecalho__mobile {
  display: none;
  align-items: center;
  gap: 8px;
}

.mobile-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  font-size: 1.1rem;
  text-decoration: none;
}

.mobile-whatsapp svg {
  width: 20px;
  height: 20px;
}

.btn-menu-mobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.btn-menu-mobile span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--cor-site-5);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.cabecalho--fixo .btn-menu-mobile span {
  background: #fff;
}


/* =============================================================
   RESPONSIVO
   ============================================================= */
@media (max-width: 1299px) {

  .cabecalho__autoridade,
  .cabecalho__acoes,
  .nav-principal {
    display: none !important;
  }

  .cabecalho__mobile {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .barra-topo__direita {
    display: none;
  }

  .barra-topo__sep {
    display: none;
  }
}

/* Utilitários que o markup copiado do ferri usava do Bootstrap. */
.container-fluid { width: 100%; padding-inline: 1rem; }
.px-3 { padding-inline: 1rem; }
.d-flex { display: flex; }
.gap-2 { gap: .5rem; }
.align-items-center { align-items: center; }
@media (max-width: 991px) {
  .barra-topo { display: none; }
}

/* Ícones Phosphor (SVG inline) no header: acompanham o tamanho da fonte do contêiner. */
.barra-topo svg,
.btn-anunciar svg,
.btn-area-cliente svg,
.icone-item svg,
.mega-menu__cabecalho-icone svg {
  width: 1em;
  height: 1em;
  flex: none;
}
.barra-topo__item svg,
.barra-topo__creci svg { font-size: 0.8rem; }
.btn-anunciar svg,
.btn-area-cliente svg { font-size: 0.9rem; }
.icone-item svg { font-size: 1rem; }
.mega-menu__cabecalho-icone svg { font-size: 1.1rem; }

/* Cabeçalho do mega menu numa linha só (sem quebrar título/subtítulo em largura apertada). */
.mega-menu--pequeno { width: max-content; }
.mega-menu__cabecalho-titulo,
.mega-menu__cabecalho-subtitulo { white-space: nowrap; }
.mega-menu__cabecalho .d-flex { flex-shrink: 0; }