/* ============================================================
   JBM Business — ajustes cirúrgicos de header + mapa
   Não modifica css/style.css (build compilado) nem js/main.js.
   Carregado depois de style.css para ter precedência.
   ============================================================ */

/* ---------- NAVEGAÇÃO: garante que a página SEMPRE abre no topo ----------
   Pedido explícito: no celular, ao clicar num imóvel (de qualquer lista —
   destaques, "imóveis semelhantes", etc.), a página às vezes abria no meio
   da rolagem em vez de no topo, escondendo preço/fotos/botões até a pessoa
   rolar pra cima manualmente.
   O código de navegação (dentro de js/main.js) já chama window.scrollTo(0,0)
   toda vez que troca de página — o bug é do NAVEGADOR, não da chamada: existe
   um comportamento chamado "scroll anchoring" (o navegador tenta manter a
   mesma posição VISUAL quando o conteúdo da página muda de tamanho) que
   entra em conflito com esse scrollTo — ele reajusta a rolagem De volta
   LOGO DEPOIS que o React troca o conteúdo da página (uma lista home comprida
   por uma página de imóvel mais curta, por ex.), brigando com o scrollTo(0,0)
   que já tinha rodado um instante antes. Desligando esse comportamento do
   navegador, a rolagem para no topo e fica lá. */
html {
  overflow-anchor: none;
}

/* ---------- BARRA DE ROLAGEM: escura, combinando com o site ----------
   Por padrão o navegador desenha a barra de rolagem em branco/cinza claro
   (tema do sistema), o que destoa do visual escuro do site. Fundo (trilho)
   preto e o "polegar" (a parte que se arrasta) em cinza. */
html {
  scrollbar-color: #6b6b6b #0a0b0d; /* Firefox: polegar trilho */
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #0a0b0d;
}
::-webkit-scrollbar-thumb {
  background-color: #6b6b6b;
  border-radius: 6px;
  border: 2px solid #0a0b0d;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #8a8a8a;
}

/* ---------- SELETOR DE IDIOMA (BR): bandeira real em vez de emoji ----------
   O botão "BR" do cabeçalho usa o emoji de bandeira 🇧🇷 (span aria-hidden
   dentro do botão). Em alguns ambientes Windows/Chrome esse emoji cai
   para uma renderização em texto ("BR") em vez do desenho da bandeira.
   Aqui a bandeira vira uma imagem de verdade (SVG em img/flags/brazil.svg)
   como background do próprio botão, recortada em círculo perfeito pelo
   border-radius:50% que o botão já tem (classe rounded-full). O emoji
   original só fica invisível (opacity:0) — nada na estrutura/DOM muda.
   Escopo restrito ao grupo de idiomas do cabeçalho (o mesmo componente
   de bandeiras também é usado dentro do menu mobile/gaveta, que não deve
   ser alterado). */
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="Português"] {
  background-image: url("../img/flags/brazil.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="Português"] span {
  opacity: 0;
}

/* ---------- SELETOR DE IDIOMA (US): bandeira real em vez de emoji ----------
   Mesma técnica e mesmo escopo (só o cabeçalho) usados na bandeira do
   Brasil acima — consistência entre os dois seletores. */
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="English"] {
  background-image: url("../img/flags/usa.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="English"] span {
  opacity: 0;
}

/* ---------- SELETOR DE IDIOMA (ES): bandeira real em vez de emoji ----------
   Mesma técnica e mesmo escopo (só o cabeçalho) usados nas bandeiras do
   Brasil e dos EUA acima — completa o conjunto uniforme dos três. */
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="Español"] {
  background-image: url("../img/flags/spain.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
header.header-shadow div[class*="border-l border-white/15 pl-5"] button[aria-label="Español"] span {
  opacity: 0;
}

/* ---------- HEADER: aproveitar mais a largura ----------
   O container original (max-w-7xl mx-auto) trava o conteúdo em 1280px e
   centraliza, criando margens vazias enormes e simétricas em telas largas.
   Aqui ele passa a ocupar a largura real do header. O padding horizontal
   original (px-5 md:px-8 = 20px/32px) também é reduzido aqui para a logo
   e os ícones ficarem praticamente colados nas bordas da viewport. */
header.header-shadow .max-w-7xl {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 10px;
}
@media (min-width: 768px) {
  header.header-shadow .max-w-7xl {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------- HEADER: bloco logo+ícones compacto ----------
   O build original tem "h-24 md:h-28" nesse bloco, mas o utilitário
   "md:h-28" nem existe no CSS compilado — na prática o bloco ficava com
   ~136px de altura (bem mais que a logo), sobrando folga vazia em
   cima/embaixo. Altura automática (do tamanho do conteúdo) com um
   respiro pequeno e fixo — barra fina, sem espaço sobrando, igual à
   referência enviada. */
header.header-shadow div.flex.items-center.justify-between.h-24 {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 8px;
  padding-bottom: 6px;
}

/* ---------- HEADER: logo — tamanho proporcional à referência ---------- */
header.header-shadow div.flex.items-center.justify-between.h-24 > button.shrink-0 img {
  height: 4rem;
}
@media (min-width: 768px) {
  header.header-shadow div.flex.items-center.justify-between.h-24 > button.shrink-0 img {
    height: 5.25rem;
  }
}

/* ---------- HEADER: menu de navegação — colado, sem folga extra ----------
   A <nav> (Início/Vendas/Aluguel/...) fica logo abaixo do bloco
   logo+ícones, com uma caixa enxuta e uma folga mínima antes do vídeo —
   barra fina de ponta a ponta, como na referência. */
header.header-shadow nav[class*="h-[52px]"] {
  height: 30px;
  border-top: none;
  border-bottom: none;
  margin-top: -10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}
/* Os botões do menu herdam um padding vertical de .5rem (8px) definido
   em "header nav button" (style.css) — isso os deixava com ~35px de
   altura, mais alto que a caixa da nav (26px), e a metade de baixo
   "vazava" para fora do header, por cima do vídeo. Reduzindo o padding,
   o botão passa a caber inteiro dentro da caixa mais fina. */
header.header-shadow nav[class*="h-[52px]"] button {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ---------- HEADER MOBILE: WhatsApp + idiomas visíveis junto do menu ----------
   O grupo de ícones (busca/favoritos/whats/idiomas) só aparecia em telas
   ≥1024px ("hidden lg:flex"); no celular só sobrava o botão de menu
   (hambúrguer). Aqui o grupo passa a aparecer também no mobile, mas só
   com WhatsApp + idiomas (busca e favoritos continuam escondidos, como
   pedido) — reposicionado para colar ao lado do hambúrguer, à direita. */
@media (max-width: 1023px) {
  header.header-shadow div.flex.items-center.justify-between.h-24 {
    justify-content: flex-start;
  }
  header.header-shadow div[class*="hidden lg:flex items-center gap-6"] {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 14px;
  }
  header.header-shadow div[class*="hidden lg:flex items-center gap-6"] > button:nth-child(1),
  header.header-shadow div[class*="hidden lg:flex items-center gap-6"] > button:nth-child(2) {
    display: none !important;
  }
}

/* ---------- HEADER: degradê transparente (logo) -> opaco (menu) ---------- */
/* position:fixed tira o header do fluxo para flutuar sobre o vídeo do
   hero (que ocupa 100vh). O topo (linha da logo) fica translúcido, para
   o vídeo aparecer por trás; a partir da linha do menu (Início/Vendas/
   Aluguel/Quem Somos) fica opaco, garantindo legibilidade do texto do
   menu contra qualquer fundo (inclusive nas páginas sem vídeo). */
header.header-shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background-color: #0a0b0d !important;
  background-image: linear-gradient(
    to bottom,
    rgba(10, 11, 13, 0.12) 0%,
    rgba(10, 11, 13, 0.55) 45%,
    #0a0b0d 68%,
    #0a0b0d 100%
  ) !important;
}

/* ---------- HERO: remove o escurecimento do rodapé do vídeo ----------
   O bundle original tem duas camadas de overlay sobre o vídeo do hero:
   uma que escurece o RODAPÉ do vídeo (esta, sólida embaixo perto do
   botão do WhatsApp e do painel de busca) e outra que escurece só o
   topo (mantida, ajuda o header translúcido acima a não "sumir" contra
   um vídeo muito claro). A pedido, a camada de baixo é removida por
   completo — o vídeo fica visível sem nenhum escurecimento no rodapé. */
section.relative.bg-black div[class*="bg-gradient-to-t from-black via-black/20 to-black/10"] {
  display: none !important;
}

/* Hero: como o header saiu do fluxo do documento, o vídeo passa a
   ocupar a viewport inteira (o header flutua translúcido por cima).
   A segunda declaração (100dvh) sobrescreve a primeira em navegadores
   que suportam viewport dinâmica — no celular, "100vh" conta a área
   escondida atrás da barra de endereço retrátil, então o bloco de busca
   centralizado por porcentagem (ver mais abaixo) ficava mais baixo do
   que o meio da tela realmente visível. "100dvh" acompanha a barra de
   endereço abrindo/fechando e mantém a centralização correta. */
.h-\[calc\(100vh-96px\)\],
.md\:h-\[calc\(100vh-164px\)\] {
  height: 100vh !important;
  height: 100dvh !important;
}

/* O container do vídeo do hero tem um max-h-[900px] no build original
   (pensado para um header não-fixed). Em telas com bastante altura
   (monitores grandes, notebooks com pouca escala) isso sobrava um vão
   branco embaixo do vídeo, do tamanho do fundo da página. Removendo o
   teto, o vídeo sempre preenche 100% da viewport, sem espaço vazio. */
div[class*="max-h-[900px]"] {
  max-height: none !important;
}

/* Demais páginas (Vendas, Aluguel, Quem Somos, etc.) não têm o vídeo
   de fundo do hero e, como o header virou fixed, precisam de um
   respiro no topo equivalente à altura do header para o título não
   ficar escondido atrás dele. */
main.page-transition {
  padding-top: 96px;
}
@media (min-width: 768px) {
  main.page-transition {
    padding-top: 112px;
  }
}
@media (min-width: 1024px) {
  main.page-transition {
    padding-top: 144px;
  }
}
/* Home (tem o vídeo do hero): sem respiro, o vídeo fica rente ao topo. */
main.page-transition:has(section.relative.bg-black) {
  padding-top: 0 !important;
}

/* ---------- Banner de cookies: removido a pedido ----------
   O componente calculava sua própria visibilidade via localStorage e não
   empurrava o header (que é fixed) — ao aparecer, ele ficava sobreposto
   ao topo do header (mesmo z-index de camada, "por cima" dele) cobrindo
   parte da logo. Como o pedido é remover o aviso por completo, ele fica
   oculto em vez de corrigido. */
div[class*="relative z-40 bg-black border-b border-white/10"] {
  display: none !important;
}

/* ---------- QUEM SOMOS: reorganizar em pilha vertical ----------
   DOM original: grid de 2 colunas com [div.max-w-xl (eyebrow+título+texto)] e
   [div.card-img (imagem)] lado a lado — título gigante de um lado, bloco de
   texto enorme do outro. Sem alterar o React, usamos display:contents no
   wrapper para "desembrulhar" seus filhos e reordená-los com `order` dentro
   de um único fluxo vertical: QUEM SOMOS -> título -> imagem -> texto.
   Escopo pelo alt da foto dos sócios para não afetar nenhum outro bloco
   grid+max-w-xl reutilizado em outras páginas. */
main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  gap: 0;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) > div.max-w-xl {
  display: contents;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) p.text-xs {
  order: 1;
  width: 100%;
  text-align: center;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) h1 {
  order: 2;
  width: 100%;
  text-align: center;
  margin-bottom: 2.5rem !important;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) > div.card-img {
  order: 3;
  width: 100%;
  margin-bottom: 2.75rem;
}

main.page-transition div.grid:has(img[alt="Sócios da JBM Business"]) div.space-y-6 {
  order: 4;
  width: 100%;
  max-width: 760px;
}

/* ---------- HERO MOBILE: bloco de busca centralizado e mais "dinâmico" ----------
   No mobile, o wrapper do formulário de busca é `absolute inset-x-0
   bottom-0`, ou seja, sempre colado no rodapé do vídeo — por isso ficava
   baixo/apertado. Ele é reposicionado para o centro vertical do vídeo só
   no mobile (o desktop não foi tocado).
   O elemento também tem a classe "reveal", uma animação de entrada
   (fadeUp) que define transform:translateY(...) via @keyframes — uma
   animação CSS tem prioridade sobre uma declaração normal no cascade,
   então o "transform: translateY(-50%)" sozinho era ignorado. Por isso
   o !important aqui: é o que faz a centralização realmente vencer.
   O cartão do formulário também fica mais transparente (deixa o vídeo
   aparecer atrás, como na referência) e com cantos arredondados + sombra
   para uma cara mais moderna (sem adicionar aba de "Temporada" nem
   nenhum campo novo — só reposição + estilo). */
@media (max-width: 767px) {
  section.relative.bg-black div[class*="inset-x-0 bottom-0 pl-4"] {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    /* O wrapper original tem padding assimétrico (pl-4=16px / pr-20=80px
       — pensado pra abrir espaço pros ícones do header no desktop). No
       mobile isso empurrava o cartão pra esquerda, parecendo "torto".
       Com o padding igual dos dois lados, o cartão fica realmente
       centralizado. */
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  section.relative.bg-black div[class*="bg-black/85 backdrop-blur"] {
    background-color: rgba(0, 0, 0, 0.55) !important;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
}

/* ---------- "ONDE ESTAMOS" + Google Maps: retângulo horizontal ----------
   Existe uma regra mais específica em style.css ("footer a[class*=
   'aspect-square']"), de um ajuste anterior, fixando a largura em
   15rem/17rem/19rem (pensada para o mapa quadrado original). Ela vencia
   a nossa "width:100%" na especificidade — por isso !important aqui
   também, não só no aspect-ratio/max-width. */
a[href*="Nereu%20Ramos"] {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- RODAPÉ MOBILE: blocos lado a lado em vez de empilhados ----------
   O grid do rodapé só vira grade (md:grid-cols-12) a partir de 768px; no
   celular ele é "grid" sem colunas definidas, então os 4 blocos (Logo,
   Links, Contato, Instagram) ficavam um embaixo do outro. Aqui ele vira
   uma grade de 2 colunas: Logo ocupa a linha toda, Links e Contato ficam
   lado a lado, Instagram ocupa a linha seguinte. */
@media (max-width: 767px) {
  footer.bg-black div[class*="grid md:grid-cols-12"] {
    display: grid;
    /* minmax(0,1fr) — não "1fr" puro — porque por padrão uma coluna de
       grid não encolhe abaixo do min-content do que está dentro dela;
       "Empreendimentos" (uma palavra só, sem quebra) fazia a coluna dos
       links "engordar" e empurrar a de contato para ~90px. Com min 0,
       as duas colunas ficam realmente iguais e o texto quebra a linha
       se precisar. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 28px;
  }
  footer.bg-black div[class*="grid md:grid-cols-12"] > div:nth-child(1),
  footer.bg-black div[class*="grid md:grid-cols-12"] > div:nth-child(4),
  footer.bg-black div[class*="grid md:grid-cols-12"] > div:nth-child(5) {
    grid-column: 1 / -1;
  }

  /* Bloco "Onde Estamos" + mapa: o grid interno (md:grid-cols-2) também
     só vira colunas a partir de 768px; sem isso, o item com aspect-ratio
     (o mapa) fica dentro de uma coluna implícita "auto" e o algoritmo de
     grid encolhia a largura dele para bem menos que o container — o
     mapa ficava pequeno/deslocado. Definir a coluna explicitamente
     (1fr) resolve o encolhimento e o mapa preenche a largura toda. */
  footer.bg-black div[class*="pt-9 border-t border-white/10 grid md:grid-cols-2"] {
    grid-template-columns: 1fr;
  }
}

/* No desktop (≥768px) esse mesmo grid vira 2 colunas (texto | mapa) pelo
   "md:grid-cols-2" do Tailwind. Só que o mapa tem "aspect-ratio" +
   "width:100% !important" (regra acima) e nenhum tamanho intrínseco
   próprio — isso faz o algoritmo de grid entrar num loop de cálculo e
   encolher a coluna do mapa para ~3px (mapa some por completo). Fixar as
   colunas com minmax(0,1fr) resolve o mesmo jeito que no mobile. */
@media (min-width: 768px) {
  footer.bg-black div[class*="pt-9 border-t border-white/10 grid md:grid-cols-2"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- PÁGINA DO IMÓVEL: galeria com fotos do mesmo tamanho ----------
   Referência pedida: todas as fotos distribuídas em grade, do mesmo tamanho
   (sem uma "principal" maior e miniaturas menores embaixo). A grade em si já
   vem do JSX (js/main.js, classe .imovel-galeria-grid) — aqui só ajusta
   quantas colunas cabem em cada largura de tela. */
main.page-transition .imovel-galeria-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 640px) {
  main.page-transition .imovel-galeria-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- CANTOS ARREDONDADOS (site inteiro usa cantos retos por padrão) ----------
   Referência pedida: cards e fotos mais "suaves", não tão quadrados/duros.
   O projeto nunca usou nenhuma classe Tailwind de arredondamento de tamanho
   (só "rounded-full" pra círculos), então isso é tudo CSS puro aqui — não dá
   pra simplesmente adicionar "rounded-lg" etc. no JSX porque o CSS compilado
   (css/style.css) não tem essas regras (o Tailwind não gera nada que não foi
   usado no build original). Aplicado nos cards de imóvel (listagem/destaques/
   semelhantes), nas fotos da galeria do imóvel e no cartão de preço. */
.card,
main.page-transition .imovel-galeria-grid > div,
main.page-transition .imovel-price-card > div.card {
  border-radius: 14px;
  overflow: hidden;
}
.card-img {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
/* Botões de ação (Whatsapp/Compartilhar/Contato) também levemente arredondados,
   pra combinar com os cards — sem exagerar, mantendo a linha reta do resto do site. */
main.page-transition .imovel-price-card a,
main.page-transition .imovel-price-card button {
  border-radius: 8px;
}

/* ---------- LISTAGEM (Vendas/Aluguel/Empreendimentos/Favoritos): 2 colunas ----------
   Referência pedida: cards maiores, 2 por linha (não 3), mais parecido com o
   site de referência. Só essa grade específica — "Imóveis semelhantes" (na
   página do imóvel) usa o mesmo componente de card mas continua em 3
   colunas, que já estava do jeito que foi pedido antes. */
@media (min-width: 1024px) {
  main.page-transition .listagem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- LISTAGEM: card HORIZONTAL e compacto (padrão Pioneiro Imóveis) ----------
   Pedido explícito: com 2 colunas + card vertical original (foto em cima,
   ocupando a largura toda, texto embaixo) cada card ficou enorme — só uns 2
   cabiam na tela, obrigando a rolar muito pra ver os próximos. A referência
   (Pioneiro Imóveis) usa card HORIZONTAL: foto pequena e fixa à esquerda,
   informações à direita — bem mais compacto, cabendo várias linhas na
   mesma tela ("6 imóveis" foi o pedido). O componente de card (`P` no
   bundle) é reaproveitado em 3 lugares (listagem, destaques da home,
   "imóveis semelhantes"); por isso o escopo é só `.listagem-grid`, os
   outros dois continuam com o card vertical original. */
@media (min-width: 640px) {
  main.page-transition .listagem-grid .card {
    flex-direction: row;
  }
  main.page-transition .listagem-grid .card-img {
    width: 240px;
    flex-shrink: 0;
    aspect-ratio: 4 / 3 !important;
  }
  main.page-transition .listagem-grid .card > button {
    padding: 14px 18px;
    justify-content: center;
  }
}
/* Nome do imóvel: alguns títulos (principalmente os importados via REST) são
   frases longas tipo anúncio ("Apartamento Pronto em Porto Belo por R$ 1,4
   Milhão | 30% de Entrada + 48x") — sem limitar linhas, esse card específico
   ficava muito mais alto que os outros e desalinhava a grade. */
main.page-transition .listagem-grid h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- HOME: cards de "Destaques" compactos no mobile ----------
   Pedido explícito: no celular, os cards de "Destaques Vendas"/"Destaques
   Locação"/"Empreendimentos" da home (card vertical original, foto ocupando
   a largura toda) ficavam enormes — só um cabia na tela por vez. Mesmo
   tratamento horizontal já usado na listagem (ver acima), só que aqui é
   o INVERSO: essas 3 seções ficam em 2-4 colunas no desktop (o pedido foi só
   sobre o celular), então o horizontal entra apenas abaixo de 640px. */
@media (max-width: 639px) {
  main.page-transition .destaque-grid .card {
    flex-direction: row;
  }
  main.page-transition .destaque-grid .card-img {
    width: 200px;
    flex-shrink: 0;
    aspect-ratio: 4 / 3 !important;
  }
  main.page-transition .destaque-grid .card > button {
    padding: 12px 16px;
    justify-content: center;
  }
  main.page-transition .destaque-grid h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------- PÁGINA DO IMÓVEL: galeria / cartão de preço / "Sobre o imóvel" ----------
   Os 3 blocos (galeria, cartão de preço, "Sobre o imóvel" — que inclui
   Características e Localização) são os 3 filhos diretos de
   ".imovel-galeria-wrap", NESSA ORDEM no HTML: galeria, cartão, sobre.
   Essa ordem no HTML é proposital — é a ordem que faz sentido no MOBILE
   (onde o wrap não vira grid de verdade, só empilha): fotos → cartão de
   preço (valor/WhatsApp logo visível, sem rolar a página toda) → texto.
   Pedido explícito: antes o cartão só aparecia depois de todo o texto no
   celular, exigindo rolar muito pra ver o valor/contato.
   No DESKTOP (≥1024px) o visual precisa ser diferente (galeria+texto numa
   coluna larga à esquerda, cartão fixo à direita) — como a ordem no HTML
   não pode mudar (é a ordem certa pro mobile), aqui cada um dos 3 blocos
   ganha uma posição EXPLÍCITA dentro do grid (linha/coluna), em vez de
   deixar o navegador posicionar automaticamente na ordem do HTML. */
main.page-transition .imovel-price-card {
  margin-top: 16px;
}
@media (min-width: 1024px) {
  main.page-transition .imovel-price-card {
    margin-top: 0;
  }
  main.page-transition .imovel-price-card > div.card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  /* Pedido explícito: o cartão não pode "respirar" de tamanho de um imóvel
     pro outro (ficava fino num, largo noutro) — isso acontecia porque um
     "fr" sem minmax(0,...) deixa a coluna livre pra crescer/encolher
     conforme o CONTEÚDO (nome do imóvel mais longo/curto, etc). Trocando a
     3ª coluna por um valor fixo em px, o cartão sempre tem exatamente a
     mesma largura, não importa o imóvel — e a galeria/texto (minmax(0,1fr)
     nas 2 primeiras) preenchem o resto sem estourar. */
  main.page-transition .imovel-galeria-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 360px;
  }
  /* Galeria: linha 1, colunas 1-2. */
  main.page-transition .imovel-galeria-grid {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  /* "Sobre o imóvel" (+ Características + Localização): linha 2, colunas 1-2
     — ou seja, embaixo da galeria, do mesmo jeito que antes parecia no HTML,
     só que agora por posição explícita (não mais por estar logo depois da
     galeria no HTML, já que no HTML ele vem depois do cartão). */
  main.page-transition .imovel-sobre {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  /* Cartão de preço: ocupa as 2 linhas de uma vez (coluna 3 inteira),
     "grudado" (sticky) ao lado da galeria + do texto — como ele é bem mais
     curto que galeria+texto juntos, sobra espaço pra ele acompanhar a
     rolagem sem nunca deixar um vão em branco. */
  main.page-transition .imovel-price-card {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}
main.page-transition .imovel-price-card {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* ---------- PÁGINA DO IMÓVEL: fotos maiores, menos vão entre elas ----------
   Pedido explícito: as fotos ficaram pequenas e com espaço grande entre
   elas depois que a galeria dividiu a largura com o cartão de preço.
   Menos colunas (fotos maiores) e menos "gap" entre elas. */
main.page-transition .imovel-galeria-grid {
  gap: 4px;
  /* Quando o imóvel tem poucas fotos (cabem numa linha só), o grid.pai
     (.imovel-galeria-wrap) tenta esticar essa galeria pra acompanhar a
     altura do cartão de preço ao lado (align-items:stretch é o padrão do
     CSS Grid) — sobrava um espaço em branco embaixo das fotos, como se
     tivesse "comido" fotos. align-self:start trava a galeria na altura
     real do conteúdo dela (as fotos), não na do vizinho. */
  align-self: start;
}
@media (min-width: 640px) {
  main.page-transition .imovel-galeria-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- PÁGINA DO IMÓVEL: clicar numa foto abre ela, sem exagero ----------
   Pedido explícito: as fotos são clicáveis (antes não eram), mas a primeira
   versão ocupava a tela inteira e ficou "gigantesca" — aqui é mais contido,
   com cantos arredondados e uma moldura, tipo uma janela por cima da página
   em vez de tomar a tela toda.
   Causa raiz do tamanho "gigante": o <main class="page-transition"> tem uma
   animação de entrada (".45s ... pageIn", @keyframes com opacity+translateY)
   e QUALQUER elemento com uma animação CSS que anime "transform" vira
   "containing block" de elementos position:fixed dentro dele — isso vale
   mesmo com "transform:none!important" sobrescrevendo o valor computado,
   porque o Chrome decide isso pela animação estar associada ao elemento,
   não pelo valor final resolvido. Ou seja, a lightbox (fixed, devia cobrir
   a tela toda) estava se posicionando em relação à altura TOTAL da página
   (não da janela), daí o tamanho gigante/errado.
   A correção real é desligar a animação em si (não só o transform) — o
   projeto já faz exatamente isso em @media(prefers-reduced-motion:reduce)
   (animation:none em .page-transition), então isso não é uma novidade, só
   passa a valer sempre. Com a animação desligada, o <main> deixa de ser
   containing block e o position:fixed volta a se comportar normal. */
main.page-transition {
  animation: none !important;
}
main.page-transition .imovel-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
main.page-transition .imovel-lightbox-img {
  max-width: min(100%, 900px);
  max-height: min(100%, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- PÁGINA DO IMÓVEL: "Sobre o imóvel" sem seções estruturadas ----------
   Quando a integração não tem descrição em seções (ex.: REST/Vista, ou DWV pra
   imóvel usado/terceiro), cai no texto corrido puro (`u.desc`) — que costuma vir
   com quebras de linha reais (parágrafos, "CONDIÇÕES DE PAGAMENTO" etc.). Sem
   isso, o navegador colapsa todas as quebras e vira uma parede de texto só. */
main.page-transition .imovel-desc {
  white-space: pre-line;
}

/* ---------- PÁGINA DO IMÓVEL: modal do QR Code ----------
   Reaproveita o mesmo overlay .imovel-lightbox (fixed, já corrigido pra não
   herdar o bug do containing block do <main>) só que com um cartão branco
   central em vez de uma foto — mesmo padrão do "Acesse no celular" da
   referência (Pioneiro Imóveis). */
main.page-transition .imovel-qr-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
main.page-transition .imovel-qr-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
main.page-transition .imovel-qr-card p {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 18px;
}
main.page-transition .imovel-qr-card img {
  display: block;
  margin: 0 auto 20px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

/* ---------- BARRA DE BUSCA: cantos arredondados ----------
   Pedido explícito: o formulário de busca (abas Vendas/Aluguel/Código +
   campos Cidade/Bairro/Tipo/etc) estava com cantos quase retos ("rounded-sm"
   do Tailwind, só 2px), igual o resto do site — arredondar mais, só essa
   caixa (aparece no Início e no topo de Vendas/Aluguel/Empreendimentos),
   sem mexer no visual geral do site. O seletor pega as duas variantes dela
   (fundo escuro semi-transparente na home, fundo branco nas outras páginas)
   porque as duas sempre terminam com essas mesmas classes. */
div[class$="w-full rounded-sm"] {
  border-radius: 16px !important;
  overflow: hidden;
}

/* ---------- HOME: balãozinho "Siga-nos no Instagram" sobre o vídeo do hero ----------
   Pedido explícito: um cardzinho pequeno e dinâmico, não um canto qualquer da
   tela — fica perto do topo direito do vídeo, com o ícone do Instagram e o
   texto, subindo levemente no hover para parecer "vivo". Só na home (a seção
   com o vídeo é exclusiva dela).
   O header é "fixed", z-30 e sempre com fundo preto opaco (mesmo na home),
   com 88px de altura no mobile e 128px no desktop — por isso o "top" do
   balão precisa ficar abaixo disso, senão fica escondido atrás do header. */
.hero-insta-badge {
  position: absolute;
  top: 100px;
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hero-insta-badge:hover {
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.6);
  border-color: var(--gold);
}
.hero-insta-badge svg {
  color: var(--gold);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .hero-insta-badge {
    top: 152px;
    right: 32px;
    padding: 12px 20px;
    font-size: 13px;
  }
}