/* =====================================================================
   StyleKit — base.css (núcleo)
   - Sistema ENXUTO de cores globais + raio global
   - Compatível com tokens antigos via "bridge"
   - Links e hovers herdam automaticamente o Destaque (accent)
   - Sem dependência do style.css legado
   ===================================================================== */

/* =======================
   1) Tokens globais (root)
   ======================= */
:root{
  /* ===== Cores mínimas que o usuário escolhe ===== */
  --page-bg:   #ffffff;   /* Fundo do site */
  --page-text: #0f172a;   /* Texto principal */
  --subtext:   #6b7280;   /* Texto secundário */
  --accent:    #0a66ff;   /* Cor de destaque (links, realces, chips) */

  /* Botões (o fundo pode ser o próprio accent por padrão) */
  --btn-bg:    var(--accent);
  --btn-text:  #ffffff;

  /* ===== Derivadas (auto, com fallback estável) ===== */
  --surface:   #f7f9fc;                 /* superfícies/cartões */
  --border:    #e5e7eb;                 /* linhas sutis */
  --link:      var(--accent);
  --link-hover: color-mix(in srgb, var(--accent) 85%, #000 15%);

  /* ===== Raio global ===== */
  --radius-ui: 12px;                    /* “Cantinhos” do site */
  --radius-sm: var(--radius-ui);
  --radius-md: var(--radius-ui);
  --radius-lg: calc(var(--radius-ui) + 4px);
  --radius-btn: var(--radius-ui);

  /* ===== Sombras padrões ===== */
  --shadow-1: 0 4px 10px rgba(0,0,0,.08);
  --shadow-2: 0 10px 22px rgba(0,0,0,.12);

  /* ===== Bridge de compatibilidade (tokens antigos) ===== */
  --color-bg:      var(--page-bg);
  --color-surface: var(--surface);
  --color-text:    var(--page-text);
  --color-muted:   var(--subtext);
  --color-primary: var(--accent);
  --color-accent:  var(--accent);

  /* Ícones sociais / WhatsApp (fallbacks) */
  --social-icon-size: 22px;
  --whatsapp-btn:  #25D366;
  --whatsapp-icon: #ffffff;

  /* CTA Simulação (fallbacks) */
  --simcta-bg:            var(--surface);
  --simcta-title-color:   var(--page-text);
  --simcta-text-color:    var(--subtext);
  --simcta-btn-bg:        var(--btn-bg);
  --simcta-btn-text:      var(--btn-text);
  --simcta-border-color:  var(--border);
}

/* =======================
   2) Base tipográfica/UI
   ======================= */
html, body{
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--page-text);
  font-family: var(--font-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: var(--font-size-base, 16px);
}

/* Links usam o destaque global */
a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-hover); filter: brightness(.98); }

/* Container padrão */
.wrap{ width: min(1150px,92%); margin-left: auto; margin-right: auto; }

/* Imagens responsivas */
img{ max-width: 100%; height: auto; display: block; }

/* Hero: garante leitura do título caso o componente use .hero .wrap h1 */
.hero .wrap h1{
  color: var(--hero-title, #fff);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Paginação genérica */
.paginacao .page{ transition: filter .2s, transform .06s; border-radius: var(--radius-md); }
.paginacao .page:hover{ transform: translateY(-1px); }

/* Swiper: respiro no carrossel (home quando presente) */
.imoveis-carousel{ margin-bottom: 56px; }

/* =======================
   3) Rodapé genérico
   ======================= */
.site-footer{
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--page-text);
  padding: 24px 16px;
}
.site-footer .footer-inner{

  margin: 0 auto;
  display: grid; gap: 12px;
}
.site-footer .footer-brand{ font-weight: 800; }
.site-footer .footer-rights{ font-size: .95rem; color: var(--subtext); }

/* ícones sociais do rodapé */
.footer-social{
  display: flex; align-items: center; gap: 12px;
}
.footer-social a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.footer-social img{ width: var(--social-icon-size); height: var(--social-icon-size); }

/* =======================
   4) WhatsApp FAB padrão
   ======================= */
.whatsapp-fab{
  position: fixed; right: 16px; bottom: 16px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--whatsapp-btn);
  display: grid; place-items: center;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
  border: 1px solid color-mix(in srgb, var(--whatsapp-btn) 55%, #0000);
}
.whatsapp-fab:hover{ transform: translateY(-1px); }
.whatsapp-fab:active{ transform: translateY(0); box-shadow: none; }
.whatsapp-fab img{ width: 26px; height: 26px; }

/* =======================
   5) Ajustes utilitários
   ======================= */
.card-imovel h3{ color: var(--page-text); font-weight: 800; }
.card-imovel .regiao{ color: var(--accent); font-weight: 600; }
.card-imovel .dorm{ color: var(--page-text); font-weight: 500; }

section.resultado .regiao,
.imoveis-carousel .regiao{ color: var(--page-text); font-weight: 600; }
section.resultado .dorm,
.imoveis-carousel .dorm{ color: var(--subtext); font-weight: 500; }

/* CTA "Faça uma simulação" — tokens globais */
#simulacao-cta{
  background: var(--simcta-bg);
  border-top: 1px solid var(--simcta-border-color);
  border-bottom: 1px solid var(--simcta-border-color);
}
#simulacao-cta .titulo-simulacao{ color: var(--simcta-title-color); }
#simulacao-cta .cta-button{
  background: var(--simcta-btn-bg);
  color: var(--simcta-btn-text);
  border-radius: var(--radius-btn);
}

/* =======================
   6) Raios globais (aplicação)
   ======================= */
button, .btn, .paginacao .page,
input, select, textarea,
.card, .chip, .badge{
  border-radius: var(--radius-md);
}
a.btn, button.btn{ border-radius: var(--radius-btn); }

/* =======================
   7) Compatibilidade leve
   ======================= */
/* Nada aqui seta cores do cabeçalho (isso é do header.css).
   Todo o site herda dos tokens acima, e os presets só
   precisam reatribuir os 6 tokens + --radius-ui. */
/* =====================================================================
   Localização (single-imovel) — usa tokens do StyleKit (base.css)
   ===================================================================== */

[data-el="single.location"] .loc-wrap{
  width: min(1150px, 92%);
  margin-inline: auto;
  padding: 12px 16px 0;
}

[data-el="single.location"] .loc-head{ margin-bottom: 12px; }

[data-el="single.location"] .loc-title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--page-text);
}

/* Grid: mobile 1 col, desktop 2 col */
[data-el="single.location"] .loc-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 992px){
  [data-el="single.location"] .loc-grid{
    grid-template-columns: 520px 1fr;
  }
}

/* Cartões (coluna esquerda) */
[data-el="single.location"] .loc-card{
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
[data-el="single.location"] .loc-card + .loc-card{ margin-top: 12px; }

[data-el="single.location"] .loc-card-title{
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--page-text);
}
[data-el="single.location"] .loc-card-address{
  margin: 0 0 10px 0;
  line-height: 1.45;
  font-size: 14px;
  color: var(--subtext);
}

[data-el="single.location"] .loc-actions{
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* Botões */
[data-el="single.location"] .btn-wa,
[data-el="single.location"] .btn-map{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  font-weight: 700; font-size: 13px;
  text-decoration: none;
  border-radius: var(--radius-btn);
  transition: filter .2s, transform .06s, background .2s, border-color .2s;
}

/* WhatsApp = CTA primária (usa tokens de botão) */
[data-el="single.location"] .btn-wa{
  background: transparent;
  color: #0f172a;
  border:  1px solid #0a66ff;
}
[data-el="single.location"] .btn-wa:hover{ filter: brightness(.98); transform: translateY(-1px); }

/* Links do mapa = CTA neutra */
[data-el="single.location"] .btn-map{
  background: var(--surface);
  color: var(--page-text);
  border: 1px solid var(--border);
}
[data-el="single.location"] .btn-map:hover{
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border) 40%);
  color: var(--page-text);
  filter: brightness(0.99);
}

/* Coluna direita (mapa) */
[data-el="single.location"] .loc-right{ width: 100%; }

[data-el="single.location"] .loc-map{
  position: relative;             /* <- garante ancoragem do iframe absoluto */
  width: 100%;
  aspect-ratio: 16/9;             /* altura estável no mobile */
  background: var(--surface);     /* evita “faixa” preta em gaps de carregamento */
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
@media (min-width: 1200px){
  [data-el="single.location"] .loc-map{
    aspect-ratio: auto;
    height: 500px;                /* altura confortável no desktop */
  }
}

/* O iframe do MAPA deve SEMPRE ocupar 100% do contêiner,
   ignorando qualquer regra global de iframes (vídeo etc.) */
[data-el="single.location"] .loc-map iframe{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
  aspect-ratio: auto !important;  /* neutraliza aspect-ratio herdado */
}