/* ===========================================================================
   FICHA DO IMÓVEL — pages/detalhe.php
   ---------------------------------------------------------------------------
   MEDIDO em sites.whmsam.com.br/Desenvolvimento/ICI/detalhes-imovel-venda.php
   (2026-08-24, viewport 1440x900):

     galeria ......... 1320x500 a 30px do cabeçalho; grade de 2 colunas de
                       652,5 com gap 15 e raio 4. Miniaturas: 2x2 de
                       318,75x243, mesmo gap.
     contador ........ 107x37 no canto de baixo da foto grande, fundo
                       rgba(0,0,0,.7), raio 30, 14px/500
     "+N" ............ cobre a última miniatura, rgba(0,0,0,.6), 24px/700
     ações ........... 65,5 de altura com 15 de respiro em cima; botões de
                       50,5 com padding 12/24, raio 10, 15px/600
     grade ........... 924px de conteúdo + 380px de lateral, gap 16
     caixa ........... padding 22, borda 1px #dedede, raio 10, 20 embaixo
     h1 .............. 30px/600 #333, 5 de respiro embaixo e 15 de margem
     h2 de seção ..... 20,8px/600 #202020, mesmo respiro
     destaques ....... 5 colunas de 162,8 com gap 16; cartão de 63,1 com
                       padding 12, fundo #f8f9fa, borda #e9ecef, raio 8
     valores ......... caixa de 380x315; "R$" 20px/500 #efc425 e o número
                       32px/600 #111827
     mapa ............ 878x400, raio 30
     semelhantes ..... 2 colunas de 431, gap 16

   O card de imóvel e a faixa "Ficou com alguma dúvida?" são componentes
   compartilhados e moram no style.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   GALERIA
   --------------------------------------------------------------------------- */
/* O respiro de baixo é PADDING, não margem das ações: margem do último filho
   num bloco sem borda escapa para fora (colapso) e o bloco fecha 15px curto. */
.galeria {
    margin-top: 30px;
    padding-bottom: 15px;
}

/* A altura mora AQUI, não na foto grande. Sem altura definida a fileira do
   grid é medida pelo conteúdo, e a coluna das miniaturas pede a altura natural
   das fotos (uma 4:3 em 318,75 de largura quer 425): a fileira estica e a
   galeria inteira desmonta. Com os 500 fixos as duas colunas ficam definidas e
   o `object-fit: cover` corta a foto em vez de empurrar o bloco. */
.galeria__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 500px;
    gap: 15px;
}

.galeria__principal,
.galeria__miniatura {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #f8f9fa;
    cursor: pointer;
}

.galeria__principal img,
.galeria__miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transicao);
}

.galeria__principal:hover img,
.galeria__miniatura:hover img {
    transform: scale(1.03);
}

/* Duas fileiras que dividem os 500 da foto grande: 242,5 cada com o gap de 15.
   Altura fixa de 243 fazia a coluna fechar 501 e desalinhar com a foto. */
.galeria__miniaturas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

/* Fica dentro da foto grande, no canto de baixo à esquerda. */
.galeria__contador {
    position: absolute;
    left: 15px;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(0, 0, 0, .7);
    font-size: 14px;
    font-weight: 500;
    color: var(--cor-branco);
}

.galeria__contador svg {
    width: 16px;
    height: 16px;
}

/* --- Galeria sem foto -----------------------------------------------------
   Mesmo placeholder do card (style.css + pages/partials/sem-foto.php), só que
   aqui ele preenche o vão que a <img> preenchia: os slots da grade já têm
   altura própria (500 no desktop, 250/80 no celular), então `100%` basta e os
   220px fixos do card não valem. */
.galeria .sem-foto {
    height: 100%;
}

/* Imóvel sem nenhuma foto: uma caixa só no lugar da grade de duas colunas. */
.galeria__grade--vazia {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 4px;
    overflow: hidden;
}

/* A caixa é grande (1320x500): a câmera de 44 do card fica perdida nela. */
.galeria__grade--vazia .sem-foto__icone,
.galeria__principal .sem-foto__icone {
    width: 64px;
    height: 64px;
}

.galeria__grade--vazia .sem-foto__texto,
.galeria__principal .sem-foto__texto {
    font-size: var(--fs-lg);
}

/* Miniatura leva SÓ a câmera: o aviso já está na foto grande ao lado, e
   repeti-lo em cinco caixas viraria ruído — sem contar que não caberia na fita
   de 80px do celular. */
.galeria__miniatura .sem-foto__icone {
    width: 28px;
    height: 28px;
}

.galeria__miniatura .sem-foto__texto {
    display: none;
}

/* "+11" sobre a última miniatura. */
.galeria__mais {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    font-size: 24px;
    font-weight: 700;
    color: var(--cor-branco);
}

/* 15 em cima e 15 embaixo: na referência o respiro de baixo mora numa fileira
   interna (`.gallery-nav-buttons`), e é ele que fecha os 580,5 do bloco da
   galeria (500 + 15 + 50,5 + 15). */
.galeria__acoes {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.galeria__botao {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50.5px;        /* MEDIDO nos dois botões da referência */
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

/* 16, não 18: lá o ícone é um glifo de fonte de 14x16 e o botão fecha 166 de
   largura — com 18 o nosso saía 8px mais largo. */
.galeria__botao svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* A referência põe texto BRANCO sobre o amarelo (1,5:1). Aqui vale a decisão
   do Sami de 2026-08-21: a tinta sobre amarelo é a escura, de um token só. */
.galeria__botao--cheio {
    background: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

/* O contornado é o único com fio: 2px, e o padding desconta para a altura
   fechar nos mesmos 50,5 do preenchido. */
.galeria__botao--contorno {
    border: 2px solid var(--cor-primaria);
    background: none;
    color: var(--cor-primaria-escura);
}

.galeria__botao--contorno:hover {
    background: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

/* ---------------------------------------------------------------------------
   GRADE DA FICHA
   --------------------------------------------------------------------------- */
/* Sem respiro em cima: a galeria já traz os 15px dela embaixo, e a grade
   começa colada, como na referência (`.ltn__shop-details-area` tem padding 0). */
.ficha {
    padding: 0 0 60px;
}

.ficha__grade {
    display: grid;
    grid-template-columns: minmax(0, 924px) 380px;
    gap: 16px;
    align-items: start;
}

.ficha__conteudo,
.ficha__lateral {
    min-width: 0;
}

/* A lateral é `sticky`? NÃO — a referência deixa ela rolar junto, e o
   formulário é alto demais para grudar sem cortar. */
.ficha__lateral {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* OS SEMELHANTES NÃO SÃO MAIS ITEM DA GRADE: viraram o último bloco de
   .ficha__conteudo (ver o porquê em detalhe.php — resumo: como item da segunda
   fileira, eles esperavam a lateral inteira terminar e abriam 550px de branco
   numa ficha de conteúdo curto). A largura medida continua sendo a mesma, 924
   em x=57, porque é a da coluna que os contém agora.

   A classe fica no HTML como gancho de leitura e para o JS/testes acharem o
   bloco; não precisa de propriedade nenhuma. */

/* O cartão branco de cada bloco. */
.ficha__caixa {
    padding: 22px;
    border: 1px solid var(--controle-borda, #dedede);
    border-radius: 10px;
    background: var(--cor-branco);
}

.ficha__conteudo > .ficha__caixa {
    margin-bottom: 20px;
}

.ficha__conteudo > .ficha__caixa:last-child {
    margin-bottom: 0;
}

.ficha__titulo {
    margin: 0 0 15px;
    padding-bottom: 5px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    color: #333;
}

/* O TÍTULO DE SEÇÃO TEM O FIO AMARELO DA MARCA — 50x3 seis pixels abaixo dele.
   Medido em `h4.page-title::after`. O <h1> do imóvel NÃO tem (conferido:
   `content: none`), e é o único título da página sem. */
.ficha__secao {
    position: relative;
    margin: 0 0 15px;
    padding-bottom: 5px;
    font-size: 20.8px;
    font-weight: 600;
    line-height: 1.1;
    color: #202020;
}

.ficha__secao::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 50px;
    height: 3px;
    background: var(--cor-primaria);
}

/* --- Destaques (quartos, salas, banheiros…) ------------------------------- */
/* `auto-fit` e não `repeat(5, …)`: com os cinco itens da referência dá as
   mesmas 5 colunas de 162,8 em 878, e com seis (quando o imóvel tem quartos
   cadastrados — ver o comentário em detalhe.php) a fileira quebra sozinha em
   vez de espremer. */
/* CINCO colunas FIXAS, como na referência (medido: 162,797px cada, gap 16, nos
   878 do conteúdo). Era `auto-fit`, que descarta coluna vazia — com um destaque
   só o cartão esticava pela caixa inteira, e num imóvel de terreno, que tem
   poucos destaques, isso ficava esquisito. Item que sobra do quinto cai para a
   linha de baixo, e é o que acontece com os seis do imóvel que tem quartos. */
.ficha__destaques {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha__destaque {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #f8f9fa;
}

.ficha__destaque-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--cor-branco);
    color: var(--cor-escura);
}

/* 20x20 e na tinta escura da marca — medido no `.feature-icon svg` da
   referência (fill #282828). */
.ficha__destaque-icone svg {
    width: 20px;
    height: 20px;
}

.ficha__destaque-texto {
    display: grid;
    min-width: 0;
}

.ficha__destaque-valor {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    color: #212529;
}

.ficha__destaque-rotulo {
    font-size: 12.8px;
    line-height: 1.4;
    color: #6c757d;
}

/* --- Descrição ------------------------------------------------------------ */
/* MEDIDO na referência: 16px, entrelinha 1 e tinta #282828 (ela escreve
   `style="line-height: 1"` no próprio parágrafo). Estava 1,7 e #464646, e a
   mesma descrição fechava 1176px de altura em vez de 729 — 447 a mais, quase
   uma tela inteira de diferença no meio da ficha.

   ⚠ Entrelinha 1 é apertado para texto corrido (a recomendação de acessibilidade
   é 1,5). Está assim porque é o que o site no ar faz e a descrição é o bloco que
   o cliente mais compara. Trocar por 1.5 é uma linha — mas aí a caixa cresce e
   deixa de bater com a referência. */
.ficha__descricao {
    font-size: var(--fs-base);
    line-height: 1;
    color: var(--cor-escura);
}

/* --- Mapa ----------------------------------------------------------------- */
/* O MAPA DEMORA, E A ESPERA TEM DE APARECER.
   O iframe é do Google, é `loading="lazy"` (só começa a baixar quando a pessoa
   chega perto dele) e ainda depende da rede de terceiro. Até responder, a
   caixa de 400px ficava BRANCA e vazia — parecia bloco quebrado, e foi assim
   que o cliente leu em 2026-08-31 ("o mapa sumiu"). Agora a área nasce cinza
   com um spinner, e o iframe cobre os dois quando carrega. */
.ficha__mapa {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    line-height: 0;
    /* O cinza sozinho já resolve metade: caixa cinza lê como "área de mapa",
       caixa branca lê como falha. */
    background: #f1f3f5;
}

/* O SPINNER FICA ACIMA DO IFRAME, não atrás. Atrás dependeria de o iframe ser
   transparente enquanto não carrega — o que é verdade hoje, mas é detalhe de
   navegador, não garantia. Acima, ele está visível até alguém tirá-lo, e quem
   tira é o `onload` do próprio iframe (ver detalhe.php).
   `pointer-events: none` para o mapa continuar arrastável no instante entre o
   load e o repintar. */
.ficha__mapa::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid rgba(0, 0, 0, .1);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: ficha-mapa-girando .8s linear infinite;
    pointer-events: none;
}

@keyframes ficha-mapa-girando {
    to { transform: rotate(360deg); }
}

/* Carregou: o spinner sai do DOM de vez (`content: none` apaga o
   pseudo-elemento, então a animação para junto — `opacity: 0` deixaria ela
   girando para sempre atrás do mapa). */
.ficha__mapa--pronto::after {
    content: none;
}

.ficha__mapa iframe {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}

/* ---------------------------------------------------------------------------
   LATERAL: VALORES
   --------------------------------------------------------------------------- */
.ficha__valores-topo {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
}

.ficha__valores-rotulo {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6b7280;
}

.ficha__preco {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
}

.ficha__preco-moeda {
    font-size: 20px;
    font-weight: 500;
    color: var(--cor-primaria-media);
}

.ficha__preco-numero {
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.ficha__valor-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    padding: 12px 0;
}

/* O FIO SEPARA UM ITEM DO SEGUINTE — por isso ele é `border-top` do item de
   baixo, e não `border-bottom` de cada um.
   Era o contrário (border-bottom em todos, zerada no `:last-child`). Funcionou
   enquanto o último item era o último elemento da lista; quando a linha do
   Total entrou depois dele, o `:last-child` passou a ser o Total e o IPTU
   voltou a desenhar a borda — o fio cinza dele encostava no fio amarelo do
   Total, dois traços colados (visto pelo cliente em 2026-08-31). Assim o
   problema não volta: item que não tem outro antes não desenha fio, seja ele
   qual for e venha o que vier depois. */
.ficha__valor-item + .ficha__valor-item {
    border-top: 1px solid #e9ecef;
}

.ficha__valor-rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4b5563;
}

/* MEDIDO: o ícone da linha de valor é amarelo (#efc425), não cinza como o
   texto ao lado. */
.ficha__valor-rotulo svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--cor-primaria-media);
}

.ficha__valor-numero {
    font-size: var(--fs-base);
    font-weight: 500;
    color: #111827;
}

/* A LINHA DO TOTAL (pedido do cliente, 2026-08-31 — ver $totalLocacao em
   detalhe.php). Não é um item da lista: é a soma dela, e precisa parecer isso.
   O fio de cima é mais forte que os separadores de 1px #e9ecef, e o número
   fica no tamanho e no peso do resto da caixa em vez de competir com o preço
   grande do topo. */
.ficha__valor-item + .ficha__valor-item--total {
    margin-top: 4px;
    padding-top: 14px;
    /* 2px e amarelo, no lugar do fio cinza de 1px que a regra acima daria.
       O seletor precisa das DUAS classes: com `.ficha__valor-item--total`
       sozinho a especificidade é menor que a do separador e o fio voltaria a
       ser cinza. */
    border-top: 2px solid var(--cor-primaria);
}

.ficha__valor-item--total .ficha__valor-rotulo {
    font-weight: 700;
    color: #111827;
}

.ficha__valor-item--total .ficha__valor-numero {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.ficha__whats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 4px;
    background: var(--cor-whatsapp);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--cor-branco);
    transition: filter var(--transicao);
}

.ficha__whats:hover {
    filter: brightness(.94);
    color: var(--cor-branco);
}

.ficha__whats svg {
    width: 20px;
    height: 20px;
    flex: none;
}

/* --- Botões do CRM (Imobiforce) -------------------------------------------
   O BOTÃO DE DENTRO É DESENHADO PELO WIDGET DELES, não por nós: o que dá para
   configurar lá é fundo, cor do texto e rótulo (ver public/js/imobiforce.js).
   Tamanho, cantos e tipografia ficam por conta destas regras, para os dois
   botões ficarem irmãos do "Consultar no WhatsApp" logo acima — a mesma altura
   de 14px de respiro, o mesmo raio de 4 e a mesma fonte.

   `:empty` importa: sem chave de CRM o container nem é impresso, mas com chave
   e widget fora do ar ele fica vazio — e uma caixa vazia com margem abriria um
   buraco no meio da lateral. */
.ficha__integracao {
    margin-top: 10px;
}

.ficha__integracao:empty {
    display: none;
}

/* O widget não avisa que tag vai usar (<button> ou <a>), então o alvo é o filho
   direto, seja ele qual for. */
.ficha__integracao > * {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 4px;
    font-family: var(--fonte);
    font-size: var(--fs-base);
    font-weight: 500;
    cursor: pointer;
    transition: filter var(--transicao);
}

/* Mesmo hover do WhatsApp ao lado: escurecer um passo. Serve para as duas
   cores (o amarelo do "Alugue Online" e o escuro do "Agendar Visita") sem
   precisar saber qual é qual — o `filter` não depende do valor de fundo, que
   além do mais é escolhido no PHP. */
.ficha__integracao > *:hover {
    filter: brightness(.94);
}

/* --- Compartilhar --------------------------------------------------------- */
.ficha__redes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha__redes a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f2f6f7;
    color: var(--cor-primaria-media);
    transition: background var(--transicao), color var(--transicao);
}

.ficha__redes a:hover {
    background: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

.ficha__redes svg {
    width: 18px;
    height: 18px;
}

/* --- Semelhantes ---------------------------------------------------------- */
/* Duas colunas, não as quatro do resto do site: o bloco vive dentro da caixa,
   que já é estreita. */
/* Colunas de 431 com o card de 415 dentro: os 8px de folga de cada lado são
   os mesmos do slot da referência (lá é um `.padding-card` em volta; aqui é
   margem no próprio card, que evita mais um embrulho). Medido: grade 878,
   coluna 431, card 415x445 começando 8px abaixo do topo da grade. */
.grid-imoveis--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.grid-imoveis--2 .card-imovel {
    margin: 8px;
}

/* ---------------------------------------------------------------------------
   MODAL DE COMPARTILHAR
   --------------------------------------------------------------------------- */
.compartilhar[hidden] {
    display: none;
}

.compartilhar {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--gap-md);
}

.compartilhar__fundo {
    position: absolute;
    inset: 0;
    background: rgba(16, 22, 29, .55);
}

.compartilhar__caixa {
    position: relative;
    width: min(440px, 100%);
    padding: var(--gap-md);
    border-radius: var(--raio);
    background: var(--cor-branco);
    box-shadow: var(--sombra-lg);
}

.compartilhar__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.compartilhar__titulo {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
}

.compartilhar__fechar {
    width: 40px;
    height: 40px;
    border: 1px solid var(--cor-borda);
    border-radius: 50%;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.compartilhar__redes {
    margin-bottom: var(--gap);
}

.compartilhar__link {
    display: flex;
    gap: var(--gap-xs);
}

.compartilhar__link input {
    flex: 1;
    min-width: 0;
    padding: .7rem .8rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
}

.compartilhar__link .btn {
    flex: none;
}

/* ---------------------------------------------------------------------------
   PORTÃO DAS FOTOS
   ---------------------------------------------------------------------------
   Janela que pede nome e telefone antes de abrir a galeria cheia (pedido do
   cliente em 2026-08-25). Não tem equivalente na referência: o desenho segue o
   da janela de compartilhar, que já é a linguagem de modal do site — mesmo
   véu, mesmo cartão branco, mesmo raio.
   --------------------------------------------------------------------------- */
.portao[hidden] {
    display: none;
}

.portao {
    position: fixed;
    inset: 0;
    z-index: 120;   /* acima do visor: é ele quem manda abrir */
    display: grid;
    place-items: center;
    padding: var(--gap-md);
    overflow-y: auto;
}

.portao__fundo {
    position: absolute;
    inset: 0;
    background: rgba(16, 22, 29, .55);
}

.portao__caixa {
    position: relative;
    width: min(440px, 100%);
    padding: 28px;
    border-radius: var(--raio);
    background: var(--cor-branco);
    box-shadow: var(--sombra-lg);
    text-align: center;
}

.portao__fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--cor-texto-suave);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.portao__fechar:hover {
    background: var(--cor-fundo-alt);
    color: var(--cor-escura);
}

.portao__fechar svg {
    width: 14px;
    height: 14px;
}

/* Bolinha amarela com a câmera, para a janela ter cara de galeria e não de
   formulário. */
.portao__selo {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: var(--cor-sobre-primaria);
}

.portao__selo svg {
    width: 26px;
    height: 26px;
}

.portao__titulo {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cor-escura);
}

.portao__texto {
    margin: 0 0 20px;
    font-size: var(--fs-base);   /* 16px: era 14 e sumia debaixo do título */
    line-height: 1.5;
    color: var(--cor-texto-suave);
}

/* O formulário é o mesmo componente do resto do site; aqui só fica alinhado à
   esquerda (o texto acima é centrado) e com o botão ocupando a linha toda. */
.portao .form-lead {
    text-align: left;
}

.portao .form-lead__acoes .btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 575px) {
    .portao__caixa {
        padding: 22px 18px;
    }

    .portao__titulo {
        font-size: 19px;
    }
}

/* ---------------------------------------------------------------------------
   VISOR DE FOTOS (o "Ver todas as fotos")
   ---------------------------------------------------------------------------
   MEDIDO no lightGallery 2.7.1 da referência (detalhes-imovel-venda.php, com
   `counter`, `showThumbByDefault`, thumb 100x80), em 1434x900:

     fundo ......... #000 sobre a tela toda
     barra de cima . 47 de altura, SEM fundo, POR CIMA da foto (não empurra)
     contador ...... à esquerda, padding 12/0/0/20, 16px, #999, "1 / 16"
     fechar ........ 50x47 no canto direito, 24px, #999, sem fundo
     setas ......... 42x39 a 20px da borda, fundo rgba(0,0,0,.45), 22px, #999
     foto .......... centrada no que sobra ACIMA da fita, no tamanho natural
                     (`max-*: 100%` só reduz — imagem pequena não é esticada)
     legenda ....... colada embaixo da área da foto, padding 10/40, <p> de
                     12px #fefefe (é o título do imóvel, igual em toda foto)
     fita .......... 100 de altura (90 no celular), fundo #0d0a0a
     miniatura ..... 100x80, raio 4, margem 0 5 5 0, borda 2px transparente
     miniatura ativa borda #efc425 (o mesmo amarelo médio do preço do card)

   NÃO usamos o lightGallery: são 3 arquivos de terceiro (bundle + thumbnail +
   zoom) vindos de CDN, e o projeto não tem CDN nem biblioteca. O desenho é o
   mesmo, medido número a número.
   --------------------------------------------------------------------------- */
.visor[hidden] {
    display: none;
}

/* PILHA VERTICAL, medida na referência em 900 de altura:
     47 barra + 710 foto + 43 legenda + 100 fita = 900.
   Ou seja, barra e legenda OCUPAM espaço (não flutuam por cima), e é por isso
   que a foto fica centrada em 47..757, e não na tela inteira. */
.visor {
    position: fixed;
    inset: 0;
    z-index: 110;
    /* MEDIDO: o contador e a legenda da referência NÃO saem na fonte do site.
       A janela do lightGallery herda a pilha do sistema, e é com ela que o
       "1 / 16" aparece para quem visita. Copiada igual — com a Inter os
       algarismos ficam visivelmente mais estreitos que os do site no ar. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.visor__fundo {
    position: absolute;
    inset: 0;
    background: #000;
}

.visor__janela {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 47px minmax(0, 1fr) auto;
}

.visor__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.visor__palco {
    position: relative;
}

/* Legenda + fita num bloco só, como o `.lg-components` da referência: os 143px
   (43 + 100) sobem e descem juntos. */
.visor__base {
    display: grid;
}

/* `overflow-x: auto` para arrastar com o dedo e rolar com shift+roda, mas SEM
   a barra: o lightGallery arrasta a fita por transform e não mostra barra
   nenhuma — a nossa, amarela pelo estilo do site, aparecia como um risco no pé
   do visor. Quem mantém a miniatura da vez à vista é o `scrollIntoView` do
   imovel-midia.js. */
.visor__trilha {
    height: 100px;
    display: flex;
    overflow-x: auto;
    padding: 10px 0 0;
    background: #0d0a0a;
    justify-content: center;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Edge antigo */
}

.visor__trilha::-webkit-scrollbar {
    display: none;
}

.visor__contagem {
    padding: 12px 0 0 20px;
    font-size: 16px;
    line-height: 1;
    color: #999;
    font-variant-numeric: tabular-nums;
}

.visor__fechar {
    width: 50px;
    height: 47px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: #999;
    cursor: pointer;
    transition: color var(--transicao);
}

.visor__fechar svg {
    width: 15px;
    height: 15px;
}

/* Percentagem não resolve contra altura vinda de `1fr`/`bottom` — o Chrome a
   trata como indefinida para o filho e `max-height: 100%` virava `none`, com a
   foto em pé passando do rodapé. Absoluto resolve contra a caixa do palco, que
   é definida, e as margens automáticas centram. `width/height: auto` é o que
   impede o esticão: foto menor que o palco fica no tamanho dela, igual lá. */
.visor__foto {
    position: absolute;
    inset: 0;
}

/* SPINNER DO VISOR — amarelo sobre o preto, no meio do palco.
   Ele quase não aparece: as fotos grandes são pré-carregadas depois do `load`
   da página (ver precarregarFotos() em imovel-midia.js), então o normal é a
   foto já estar em cache quando alguém abre o visor. Isto é a rede para os
   casos em que ela não está: visor aberto nos primeiros segundos, foto que a
   fila ainda não alcançou, ou pré-carga desligada por economia de dados/2G.

   `paused` por padrão e `running` só com a classe: invisível ele não gira à
   toa enquanto a pessoa navega pelas fotos já carregadas. */
.visor__palco::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 4px solid rgba(255, 255, 255, .22);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    opacity: 0;
    animation: visor-girando .8s linear infinite paused;
    transition: opacity .15s ease;
    /* O palco inteiro é área de clique (as setas, e o preto que fecha) — o
       anel não pode roubar nada disso. */
    pointer-events: none;
}

.visor--carregando .visor__palco::after {
    opacity: 1;
    animation-play-state: running;
}

@keyframes visor-girando {
    to { transform: rotate(360deg); }
}

.visor__palco img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* 43 de altura na referência = 10 de padding + 5 de margem do <p> + 18 de
   linha + 10 de padding. Aqui o <p> É a legenda, então os 5 entram no
   padding de cima. */
.visor__legenda {
    margin: 0;
    padding: 15px 40px 10px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: #fefefe;
}

/* `top: 50%` com `margin-top: -10px` é o que o lightGallery faz — e sim, isso
   deixa a seta 9,5px ABAIXO do centro, porque os -10 foram pensados para um
   ícone de 20px e o botão fecha 39 com o respiro. Copiado como está: centrar
   de verdade deslocaria a seta em relação ao site no ar.

   z-index porque a foto é absoluta e nasce ANTES da seta "próxima" no HTML. */
.visor__seta {
    position: absolute;
    z-index: 2;
    top: 50%;
    margin-top: -10px;
    width: 42px;
    height: 39px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(0, 0, 0, .45);
    color: #999;
    cursor: pointer;
    transition: color var(--transicao);
}

.visor__fechar:hover,
.visor__seta:hover {
    color: #fff;
}

.visor__seta svg {
    width: 22px;
    height: 22px;
}

.visor__seta--anterior { left: 20px; }
.visor__seta--proxima  { right: 20px; }

/* MEDIDO: borda BRANCA na miniatura parada, amarela na da vez. O ajuste da
   referência pede `transparent`, mas o CSS do próprio lightGallery carrega
   depois e vence com `#fff` — o que vale é o que aparece na tela. */
.visor__trilha button {
    flex: none;
    width: 100px;
    height: 80px;
    margin: 0 5px 5px 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    transition: border-color var(--transicao);
}

.visor__trilha button[aria-current="true"],
.visor__trilha button:hover {
    border-color: #efc425;
}

.visor__trilha img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
   ABRIR E FECHAR — MEDIDO quadro a quadro na referência
   ---------------------------------------------------------------------------
   ABRIR (o que se vê): a página ESCURECE primeiro, sozinha, e só depois o
   visor aparece. Cronometrado no site no ar:

     0 -> 300ms   só o preto entra (a página continua à vista, escurecendo)
     300 -> 450   o conteúdo aparece com um fade curto, já montado

   A foto (0,5 -> 1) e o bloco de baixo (143px -> 0) TAMBÉM animam nesse
   intervalo, mas por baixo da janela ainda transparente — quem visita não vê.
   Estão aqui mesmo assim, com os tempos de lá: se um dia a janela aparecer
   antes, o movimento é o certo.

   FECHAR, cronometrado igual:

     0 -> 250ms   barra e setas apagam no lugar
     0 -> 300ms   o preto sai
     0 -> 350ms   o bloco de baixo desce os 143px
     0 -> 400ms   a FOTO ENCOLHE até sumir, indo para o canto de cima

   O canto é herança da referência: o lightGallery encolhe a foto de volta
   para a miniatura de onde ela saiu, mas lá a galeria que ele lê está num
   `<div>` com `display: none` — retângulo de tamanho zero em (0,0). Então a
   foto voa para o canto da tela. Copiado como está; para encolher no lugar,
   é só tirar o `transform-origin` daqui.
   --------------------------------------------------------------------------- */
.visor__fundo {
    opacity: 0;
    transition: opacity .3s ease-in;
}

.visor__janela {
    opacity: 0;
    transition: opacity .15s ease .3s;   /* o atraso é a espera do preto */
}

.visor__palco img {
    transform: scale(.5);
    opacity: 0;
    /* Curva medida no lightGallery: passa um pouco de 1 e volta. */
    transition: transform .5s cubic-bezier(.12, .415, .01, 1.19), opacity .25s;
}

.visor__base {
    transform: translateY(100%);
    transition: transform .35s ease-out;
}

.visor--aberto .visor__fundo,
.visor--aberto .visor__janela,
.visor--aberto .visor__palco img {
    opacity: 1;
}

.visor--aberto .visor__palco img,
.visor--aberto .visor__base {
    transform: none;
}

/* A janela não apaga junto: cada peça sai do seu jeito, abaixo. */
.visor--fechando .visor__janela {
    opacity: 1;
    transition: none;
}

/* A foto fica no tamanho cheio; quem encolhe é o embrulho. */
.visor--fechando .visor__palco img {
    opacity: 1;
    transform: none;
    transition: none;
}

.visor--fechando .visor__foto {
    transform: scale(0);
    transform-origin: 0 0;
    transition: transform .4s cubic-bezier(0, 0, .25, 1);
}

.visor--fechando .visor__topo,
.visor--fechando .visor__seta {
    opacity: 0;
    transition: opacity .25s ease-out;
}

/* Quem pediu menos movimento no sistema abre e fecha sem animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
    /* Os dois anéis param de girar, mas CONTINUAM na tela: não são enfeite,
       são o que diz que o mapa e a foto estão vindo. Parados ainda cumprem. */
    .ficha__mapa::after,
    .visor--carregando .visor__palco::after {
        animation: none;
    }

    .visor__fundo,
    .visor__janela,
    .visor__palco img,
    .visor__foto,
    .visor__base {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Trava o fundo enquanto o visor ou o modal estão abertos. */
body.ficha-travada {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .ficha__grade {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

@media (max-width: 991px) {
    /* Uma coluna, e a lateral SOBE: no site no ar os valores e o formulário
       vêm antes do título no celular. Lá isso é feito duplicando o bloco no
       HTML; aqui é `order`, com uma marcação só (regra 9). */
    .ficha__grade {
        grid-template-columns: minmax(0, 1fr);
    }

    .ficha__lateral {
        order: -1;
    }

    .galeria__grade {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    /* MEDIDO: no celular a foto grande fecha 250 e a fita de miniaturas 80,
       com o gap de 15 — os 345 da coluna inteira. */
    .galeria__principal {
        height: 250px;
    }

    /* A fileira da grade virou `auto` acima, e `height: 100%` dentro de fileira
       indefinida colapsa para a altura do conteúdo. Daí o número aqui — o mesmo
       da foto grande. */
    .galeria__grade--vazia .sem-foto {
        height: 250px;
    }

    /* No celular as miniaturas viram uma fita de quatro embaixo, numa fileira
       só — daí o `grid-template-rows` do desktop precisar ser desfeito. */
    .galeria__miniaturas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: 80px;
    }

    /* MEDIDO: os botões encolhem para 45 de altura e 10/15 de respiro, senão
       os dois não cabem lado a lado em 354. */
    .galeria__botao {
        height: 45px;
        padding: 0 15px;
    }

    .galeria__botao--contorno {
        padding: 0 13px;
    }
}

@media (max-width: 767px) {
    /* O título NÃO encolhe no celular: a referência mantém os 30px e deixa
       quebrar em duas linhas (medido: 308x71). */
    .ficha__destaque-icone {
        width: 30px;
        height: 30px;
    }

    .ficha__destaques {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9.6px;
    }

    .ficha__destaque {
        padding: 8px;
        gap: 8px;
    }

    .grid-imoveis--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .galeria__botao {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* MEDIDO no lightGallery da referência a 390x844: a fita fecha 90 em vez de
   100 (respiro de 5 em cima, não 10) — a miniatura continua 100x80. Barra,
   setas e legenda não mudam de tamanho no celular. */
@media (max-width: 1024px) {
    .visor__trilha {
        height: 90px;
        padding-top: 5px;
    }
}