/* =====================================================================
   AR Corretores de Imóveis — tema visual
   Override sobre main.css. Carregado depois do main.css no header.
   Paleta primária: #004aad / branco. Acento serifado.
   ===================================================================== */

:root {
  --ar-blue:        #004aad;
  --ar-blue-dark:   #003a87;
  --ar-blue-darker: #002a63;
  --ar-blue-soft:   #e8efff;
  --ar-blue-tint:   #f4f7ff;
  --ar-text:        #0a1230;
  --ar-muted:       #5a6478;
  --ar-line:        #d8def0;
  /* Hierarquia em sans-serif (Inter já carregada pelo template) */
  --ar-sans:        'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
  --ar-serif:       'Inter', 'Manrope', system-ui, sans-serif;
}

/* ---------- Variáveis globais redefinidas ---------- */
:root {
  --ztc-text-text-2: var(--ar-text);
  --ztc-text-text-3: var(--ar-text);
  --ztc-text-text-4: var(--ar-blue-dark);
  --ztc-bg-bg-3:     var(--ar-blue-dark);
  --ztc-bg-bg-4:     var(--ar-blue);
  --ztc-border-border-1: var(--ar-line);
}

/* ---------- Botão primário ---------- */
.theme-btn1,
button.theme-btn1 {
  background-color: var(--ar-blue) !important;
  border-radius: 4px !important;
  letter-spacing: .3px;
  font-weight: 600 !important;
}
.theme-btn1:hover {
  background-color: var(--ar-blue-dark) !important;
}
.theme-btn2 {
  border-radius: 4px !important;
}

/* ---------- Tipografia: hierarquia limpa em sans ---------- */
.hero-area-slider .hero1-section-area .hero-header-area h1,
.hero-inner-section-area .hero-header-area h1,
.hero-inner-section-area-sidebar .hero-header-area h1,
.heading1 h2,
.property-heading h2,
.text-anime-style-3 {
  font-family: var(--ar-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Eyebrow — pillzinho discreto acima dos títulos */
.heading1 h5,
.property-heading h5,
.team-header h5,
.project-heading h5 {
  font-family: var(--ar-sans) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 2.4px !important;
  color: var(--ar-blue) !important;
  background: var(--ar-blue-soft) !important;
  font-size: 12px !important;
  line-height: 12px !important;
  padding: 8px 14px !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

/* Sobrescreve qualquer font-family inline com 'Playfair Display' */
[style*="Playfair Display"],
[style*="playfair display"] {
  font-family: var(--ar-sans) !important;
}

/* Cards de pilares / diferenciais — títulos sem serif, com peso forte */
.ar-pillar h4,
.team1-section-area h4 {
  font-family: var(--ar-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ---------- Hero com overlay AR azul ---------- */
.hero-area-slider .hero1-section-area::after {
  background: linear-gradient(
    180deg,
    rgba(0, 74, 173, 0.78) 0%,
    rgba(0, 42, 99, 0.85) 100%
  ) !important;
  opacity: 1 !important;
}
.hero-inner-section-area::after,
.hero-inner-section-area-sidebar::after {
  background: linear-gradient(
    180deg,
    rgba(0, 74, 173, 0.85) 0%,
    rgba(0, 42, 99, 0.92) 100%
  ) !important;
  opacity: 1 !important;
}
.hero-area-slider .hero1-section-area .hero-header-area h5 {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-family: var(--ar-sans) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  font-size: 12px !important;
  line-height: 12px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
/* Linha decorativa serifada acima do H1 */
.hero-area-slider .hero1-section-area .hero-header-area h1::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: rgba(255,255,255,.55);
  margin: 0 auto 28px;
}

/* ---------- Header / topo do site ---------- */
.header-section-area,
.header2-section-area,
header.header1-section-area,
header.header2-section-area {
  background: #fff !important;
  border-bottom: 1px solid var(--ar-line);
}
.header-section-area .navbar a,
.header-section-area .navbar a:visited {
  color: var(--ar-text);
  font-weight: 500;
}
.header-section-area .navbar a:hover,
.header-section-area .navbar .active > a {
  color: var(--ar-blue) !important;
}
.ar-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ar-blue);
  text-decoration: none;
}
.ar-brand-mark svg {
  height: 56px;
  width: auto;
  display: block;
}
.ar-brand-mark--light { color: #fff; }
.ar-brand-mark--dark  { color: var(--ar-blue-dark); }

/* ---------- Cards de imóvel: identidade AR ---------- */
.property-boxarea,
.property-card,
.feature-property-boxarea {
  border: 1px solid var(--ar-line) !important;
  border-radius: 6px !important;
  overflow: hidden;
  background: #fff;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position: relative;
}
.property-boxarea:hover,
.feature-property-boxarea:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -18px rgba(0, 74, 173, .35);
  border-color: var(--ar-blue);
}
/* Faixa azul lateral marcadora */
.property-boxarea::before,
.feature-property-boxarea::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ar-blue);
  z-index: 4;
}
.property-boxarea img,
.feature-property-boxarea img {
  border-radius: 0 !important;
}
.property-boxarea h3 a,
.feature-property-boxarea h3 a {
  color: var(--ar-text);
}
.property-boxarea h3 a:hover,
.feature-property-boxarea h3 a:hover {
  color: var(--ar-blue);
}
.property-boxarea .price,
.feature-property-boxarea .price,
[class*="property-"] .price {
  color: var(--ar-blue) !important;
  font-weight: 700 !important;
}

/* Badge "Venda" / categoria sobre a imagem */
.property-boxarea .property-tag,
.feature-property-boxarea .property-tag,
.property-boxarea [class*="tag"],
.feature-property-boxarea [class*="tag"] {
  background: var(--ar-blue) !important;
  color: #fff !important;
  border-radius: 2px !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 11px;
}

/* ---------- Tabs de busca ---------- */
.tab-header .tab-btn {
  border-radius: 4px 4px 0 0 !important;
  font-weight: 600;
  letter-spacing: .3px;
}
.tab-header .tab-btn.active {
  background: var(--ar-blue) !important;
  color: #fff !important;
}
.search-filter-form,
.property-tab-section {
  border-radius: 6px !important;
  border: 1px solid var(--ar-line);
}

/* ---------- Filtros / inputs ---------- */
.nice-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea {
  border-radius: 4px !important;
}
.nice-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ar-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 74, 173, .12) !important;
}
.nice-select .option.selected,
.nice-select .option:hover {
  color: var(--ar-blue) !important;
}

/* ---------- Pills (categorias destaques) ---------- */
.nav-pills .nav-link {
  border-radius: 4px !important;
  color: var(--ar-text);
  font-weight: 500;
  border: 1px solid var(--ar-line);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--ar-blue) !important;
  color: #fff !important;
  border-color: var(--ar-blue) !important;
}

/* ---------- Footer ---------- */
.footer-section-area,
.footer1-section-area,
footer.footer1-section-area {
  background: var(--ar-blue-darker) !important;
  color: rgba(255, 255, 255, .78) !important;
  position: relative;
}
.footer-section-area::before,
.footer1-section-area::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ar-blue) 0%, #ffffff80 50%, var(--ar-blue) 100%);
}

/* Reset agressivo: tudo dentro do footer em sans-serif clara */
.footer-section-area,
.footer-section-area *,
.footer1-section-area,
.footer1-section-area * {
  font-family: var(--ztc-family-font1, 'Inter', 'Manrope', system-ui, sans-serif) !important;
}

/* Títulos do footer */
.footer-section-area h3,
.footer-section-area h4,
.footer-section-area h5,
.footer1-section-area h3,
.footer1-section-area h4,
.footer1-section-area h5 {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  font-size: 18px !important;
  margin-bottom: 16px !important;
}

/* Texto corrido / parágrafos / spans */
.footer-section-area p,
.footer-section-area span,
.footer-section-area li,
.footer-section-area .copyright p,
.footer1-section-area p,
.footer1-section-area span,
.footer1-section-area li,
.footer1-section-area .copyright p {
  color: rgba(255, 255, 255, .72) !important;
}

/* Links e ícones */
.footer-section-area a,
.footer-section-area a:visited,
.footer1-section-area a,
.footer1-section-area a:visited {
  color: rgba(255, 255, 255, .80) !important;
  text-decoration: none;
  transition: color .25s ease;
}
.footer-section-area a:hover,
.footer1-section-area a:hover {
  color: #ffffff !important;
}
/* Ícones SVG dentro de listas/links de contato — não afeta a marca AR */
.footer-section-area li > a > svg,
.footer1-section-area li > a > svg,
.footer-section-area .footer-content2 svg,
.footer1-section-area .footer-content2 svg {
  fill: rgba(255, 255, 255, .80);
}
.footer-section-area li > a:hover > svg,
.footer1-section-area li > a:hover > svg {
  fill: #ffffff;
}

/* Logo do footer — força cor branca */
.footer1-section-area .ar-brand-mark--light,
.footer-section-area .ar-brand-mark--light {
  color: #ffffff !important;
}

/* Botão CTA do footer (Instagram) — mantém visual primário */
.footer-section-area .theme-btn1,
.footer1-section-area .theme-btn1 {
  color: #ffffff !important;
}
.footer-section-area .theme-btn1 i,
.footer1-section-area .theme-btn1 i {
  color: #ffffff !important;
}

/* ---------- Sidebar mobile ---------- */
.sidebar-area {
  background: #fff !important;
}

/* ---------- Misc: remove resíduos verdes/dourados do template original ---------- */
[style*="#073B3A"], [style*="#073b3a"] { background: var(--ar-blue) !important; }
.bg-theme, .bg-primary-theme { background: var(--ar-blue) !important; }
.text-theme, .text-primary-theme { color: var(--ar-blue) !important; }

/* ---------- Detalhe da página de imóvel ---------- */
.property-details-section h2,
.property-details-section .price {
  color: var(--ar-blue);
}
.property-details-section .price {
  font-family: var(--ar-serif);
  font-weight: 700;
}

/* ---------- Selo / divisor AR (sans, peso 600, uppercase com tracking sutil) ---------- */
.ar-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ar-blue);
  font-family: var(--ar-sans);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1;
}
.ar-divider::before,
.ar-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ar-line);
}

/* ---------- Página interna (banner topo) com fundo azul AR ---------- */
.hero-inner-section-area,
.hero-inner-section-area-sidebar {
  background: var(--ar-blue) !important;
}

/* ---------- Botão WhatsApp flutuante (se houver) ---------- */
.whatsapp-float {
  background: #25D366 !important;
}

/* ---------- Pagination ---------- */
.pagination .active a,
.pagination .page-item.active .page-link {
  background: var(--ar-blue) !important;
  border-color: var(--ar-blue) !important;
  color: #fff !important;
}

/* =====================================================================
   HEADER SPLIT (logo central alta) — desktop
   ===================================================================== */
.ar-header-split {
  background: #fff !important;
  border-bottom: 1px solid var(--ar-line);
  box-shadow: 0 2px 14px -10px rgba(10, 18, 48, .15);
  height: 152px;
}
.ar-header-split .container {
  height: 100%;
}
.ar-header-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  gap: 40px;
}

/* Navegação (esquerda e direita) */
.ar-header-split .ar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 36px;
}
.ar-header-split .ar-nav--left  ul { justify-content: flex-start; }
.ar-header-split .ar-nav--right    { display: flex; align-items: center; gap: 24px; }
.ar-header-split .ar-nav--right ul { gap: 28px; }

.ar-header-split .ar-nav a {
  color: var(--ar-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .3px;
  position: relative;
  padding: 6px 0;
  transition: color .25s ease;
}
.ar-header-split .ar-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--ar-blue);
  transition: width .3s ease;
}
.ar-header-split .ar-nav a:hover,
.ar-header-split .ar-nav a.is-active {
  color: var(--ar-blue);
}
.ar-header-split .ar-nav a:hover::after,
.ar-header-split .ar-nav a.is-active::after {
  width: 100%;
}

/* CTA azul à direita */
.ar-header-split .ar-cta,
.ar-header-split .ar-nav .ar-cta,
.ar-header-split .ar-cta:visited,
.ar-header-split .ar-cta:hover {
  white-space: nowrap;
  padding: 12px 18px !important;
  color: #ffffff !important;
}
.ar-header-split .ar-cta::after { display: none !important; }

/* Logo central — entre os navs, com os menus grudados a ela via gap do flex */
.ar-brand-center {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ar-blue);
  text-decoration: none;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: transform .35s ease;
}
.ar-brand-center:hover { transform: translateY(-1px); }
.ar-mark-tall {
  height: 140px;
  width: auto;
  display: block;
  margin-top: 10px;
}

/* Páginas internas: hero compacto com texto centralizado verticalmente,
   já compensando o header fixo (152px desktop / 70px mobile) */
.hero-inner-section-area,
.hero-inner-section-area-sidebar {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 152px;
  padding-bottom: 0;
}
.hero-inner-section-area > .container,
.hero-inner-section-area-sidebar > .container {
  width: 100%;
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .hero-inner-section-area,
  .hero-inner-section-area-sidebar {
    min-height: 240px;
    padding-top: 80px;
    padding-bottom: 16px;
  }
}

/* =====================================================================
   HEADER SPLIT — telas muito largas: dá mais respiro
   ===================================================================== */
@media (min-width: 1400px) {
  .ar-header-split .ar-nav ul { gap: 44px; }
  .ar-mark-tall { height: 140px; }
  .ar-header-split { height: 152px; }
}

/* =====================================================================
   HEADER — abaixo de lg fica oculto (mobile usa o header próprio)
   ===================================================================== */
@media (max-width: 991px) {
  .ar-header-split { display: none !important; }
}
