/* ===========================================================================
   FICHA DO IMÓVEL — pages/detalhe.php
   ---------------------------------------------------------------------------
   RÉPLICA DE `detalhes-imovel-locacao.php` DA base, medida no ar em 2026-09-14
   (viewport 1440, imóvel 250):

     fotos ........... carrossel de largura total; cada foto 600x337, coladas
                       uma na outra, com uma seta de 50x50 em cada ponta
     grade ........... 770 de conteúdo + 30 + 370 de lateral (col-lg-8 + col-lg-4)
     selos ........... "Cód: 250" azul e "LOCAÇÃO" verde, 14/600, altura 32
     h1 .............. 36px/500 em MAIÚSCULAS, 30 acima e 15 abaixo
     seções .......... 22px/600 com um fio azul de 2px à esquerda e 10 de recuo
     detalhes ........ 4 por linha (170x40): ícone de 40 + rótulo 14/500 e
                       valor 14
     características . 3 por linha (257), 14/500, com o visto na frente
     mapa ............ o <address> com o endereço e o mapa de 350 de altura
     lateral ......... caixas com borda 2px #ededed, respiro 35/30/40/35 e 40
                       entre elas; título 18/600 com o mesmo fio azul

   ⚠ PRIMEIRA PASSADA (2026-09-14): a estrutura e os dados são os da
   referência; o acabamento fino (hover, foco, detalhes de espaçamento) ainda
   vai ser medido peça por peça.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   AS FOTOS
   --------------------------------------------------------------------------- */
/* LARGURA TOTAL, sem container: o carrossel dela atravessa a tela. O trilho
   rola com o dedo e encaixa em cada foto; as setas andam uma tela por vez. */
/* ⚠ SEM FUNDO E COM RESPIRO NAS PONTAS. Na base a faixa era cinza e
   atravessava a tela; na Busca a foto fica sobre o fundo da página, centrada na
   coluna, e as setas ficam FORA dela — os 60px de cada lado são o lugar delas.
   MEDIDO no print: a foto fecha 468 de largura numa coluna de ~857, com a seta
   a 130px de cada borda da foto. */
.ficha-fotos {
    position: relative;
    padding: 0 60px;
}

/* ⚠ AS FOTOS FICAM EMPILHADAS, UMA SOBRE A OUTRA — a troca é por MESCLA.
   O legado chama `flexslider()` sem opção, e o padrão dele é
   `animation: "fade"`: a foto de saída se apaga enquanto a de entrada aparece,
   as duas no mesmo lugar.

   `display: grid` com todas na célula 1/1 faz a pilha e ainda deixa a faixa com
   a altura da foto MAIS ALTA — sem posicionamento absoluto, que tiraria as
   fotos do fluxo e deixaria a faixa sem altura nenhuma.

   ⚠ AQUI ERA UM TRILHO QUE ROLAVA (`overflow-x: auto`), com a conta do
   `centerMode` do slick da base e clones nas duas pontas. Com mescla não há
   rolagem: a foto seguinte não espia mais pela borda da coluna. */
.ficha-fotos__trilho {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha-fotos__item {
    grid-area: 1 / 1;
    /* A de baixo não recebe clique nem foco enquanto estiver apagada. */
    visibility: hidden;
    opacity: 0;
    /* 600ms é o `animationSpeed` padrão do flexslider. */
    transition: opacity .6s ease, visibility .6s ease;
}

.ficha-fotos__item--ativo {
    visibility: visible;
    opacity: 1;
}

/* Quem pediu menos movimento troca de foto sem desvanecer. */
@media (prefers-reduced-motion: reduce) {
    .ficha-fotos__item {
        transition: none;
    }
}

/* A FOTO INTEIRA, CENTRADA — nada de recorte. MEDIDO no print: 468x630, ou
   seja, é a ALTURA que limita numa foto em pé; numa deitada manda a largura. */
.ficha-fotos__botao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ficha-fotos__botao img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 630px;
}

/* Seta de 50x50 em cada ponta, centrada na altura da foto. */
/* MEDIDO no print da Busca: 34x34 REDONDA, cinza-claro, com a seta escura —
   bem menor que a de 50 da base, e FORA da foto. */
.ficha-fotos__seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    padding: 0;
    border: 0;
    border-radius: 100%;
    background: #ededed;
    color: #555;
    cursor: pointer;
    /* ESCONDIDAS até o mouse entrar no carrossel (`.slick-arrow-1` dela): aí
       aparecem e deslizam dos 15 para os 50 da borda, tudo em .3s. O foco pelo
       teclado também as mostra — as dela nem recebem foco. */
    opacity: 1;
    visibility: visible;
    transition: all .3s;
}

.ficha-fotos__seta:hover {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria);
    color: var(--cor-branco);
}

/* ⚠ AS SETAS FICAM SEMPRE NA TELA, uma em cada ponta do quadro, EM QUALQUER
   LARGURA. Duas coisas que não se repete aqui: a ficha do tema herdado só as
   mostrava no hover, e o slick da referência as REMOVE abaixo de 992, deixando
   só o arrasto. Sem seta no celular não há nada na tela dizendo que existe mais
   foto — arrasto é gesto que ninguém vê. */
.ficha-fotos__seta--anterior { left: 10px; }
.ficha-fotos__seta--proxima  { right: 10px; }

.ficha-fotos__seta svg {
    width: 14px;
    height: 14px;
}

/* Sem foto nenhuma: o mesmo bloco do card, na altura de uma foto. */
.ficha-fotos__vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 337px;
}
/* ---------------------------------------------------------------------------
   A GRADE — DUAS COLUNAS: fotos 7/12 e lateral 5/12
   ---------------------------------------------------------------------------
   MEDIDO em 2026-09-22 nos três prints do Sami. É o `col-md-7` + `col-md-5` do
   legado: a fileira é 30 mais larga que o container e cada coluna tira 30 de
   respiro, então a primeira mede (7/12)(100% + 30) − 30 e a segunda o resto.

   ⚠ TUDO O QUE ESTAVA AQUI ERA A FICHA DA base — carrossel de largura cheia,
   faixa de título, "detalhes do imóvel" em sete linhas com ícone, mapa e
   imóveis semelhantes. A Busca não tem nada disso.
   --------------------------------------------------------------------------- */

/* --- A linha do topo: migalha + título à esquerda, compartilhar à direita --- */

/* ⚠ A CAIXA CINZA DA MIGALHA NÃO VAI ATÉ A BORDA. No legado a linha é uma
   TABELA de duas células e a da esquerda encolhe até o título — medido no
   print: a caixa fecha em x=953, e o título com o selo termina no mesmo lugar.
   Aqui o flex dá o mesmo: a coluna da esquerda toma a largura do conteúdo. */
.ficha-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-top: 30px;
}

.ficha-topo__esq {
    min-width: 0;
}

/* MEDIDO no print: 24px, PRETO e em negrito — e em caixa alta pelo próprio
   texto, não por `text-transform`. O selo vem colado no fim da última linha. */
.ficha-topo__titulo {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    color: #000;
}

/* O SELO DA FINALIDADE — `.label.label-primary` do Bootstrap 3: azul-claro,
   branco, 75% do corpo do título, respiro de .2em/.6em e raio de 3. */
.ficha-topo__selo {
    display: inline-block;
    margin-left: 10px;
    padding: .2em .6em .3em;
    border-radius: 3px;
    background: #4fc3f7;
    font-size: 60%;
    font-weight: 700;
    line-height: 1;
    color: var(--cor-branco);
    vertical-align: middle;
    white-space: nowrap;
}

/* O BOTÃO DE COMPARTILHAR — quadrado escuro no canto direito da linha. */
.ficha-topo__share {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #2e3e49;
    color: var(--cor-branco);
    cursor: pointer;
    transition: background-color var(--transicao);
}

.ficha-topo__share:hover {
    background: #1f2b33;
}

.ficha-topo__share svg {
    width: 16px;
    height: 16px;
}

/* --- As duas colunas ------------------------------------------------------- */

.ficha {
    display: grid;
    grid-template-columns: calc((100% + 30px) * 7 / 12 - 30px) minmax(0, 1fr);
    gap: 30px;
    padding-top: 30px;
}

/* --- A lateral ------------------------------------------------------------- */

.ficha__lado {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* O CARTÃO DOS ATRIBUTOS — `.shadow.p-3.bg-white.rounded` com um
   `ul.list-inline` dentro: ícone em cima, texto embaixo, tudo numa linha só.
   MEDIDO no print: 108px de altura, respiro de 20, sombra suave. */
.ficha-atributos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 20px 24px;
    list-style: none;
    border-radius: 4px;
    background: var(--cor-branco);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.ficha-atributo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
    color: var(--cor-texto);
}

/* MEDIDO no print: o glifo fecha 30px, na cinza do `.text-muted`. */
.ficha-atributo__icone {
    display: block;
    color: #6c757d;
}

.ficha-atributo__icone svg {
    width: 30px;
    height: 30px;
}

/* AS CARACTERÍSTICAS — duas colunas (`.list-two-col` do legado), cada uma com
   um ✓ verde antes. MEDIDO no print: 16px de corpo, 38 de passo entre linhas.
   ⚠ SEM CARTÃO: elas ficam soltas sobre o fundo da página, entre o cartão dos
   atributos e o dos valores. */
.ficha-caracteristicas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha-caracteristicas li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--cor-texto);
}

.ficha-caracteristicas svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #22c55e;
}

/* O CARTÃO DE VALORES — `.bordaDetalhes` do legado: branco, raio 4, respiro de
   1em e uma borda de 1px #ebeff6. MEDIDO no print: o cartão fecha 240 de
   altura com as quatro linhas. */
.ficha-valores {
    padding: 24px;
    border: 1px solid #ebeff6;
    border-radius: 4px;
    background: var(--cor-branco);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

/* A PRIMEIRA LINHA É UM <h3> — 30px, na cinza do `.text-muted`, com o valor à
   direita em negrito. */
.ficha-valores__principal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    color: #6c757d;
}

.ficha-valores__principal strong {
    font-weight: 700;
}

.ficha-valores__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 11px;
    font-size: 16px;
    font-weight: 300;
    color: #6c757d;
}

.ficha-valores__fio {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
}

.ficha-valores__linha--total {
    margin-bottom: 0;
    font-size: 18px;
}

/* O BOTÃO "ENVIE UMA MENSAGEM" — BRANCO com sombra, não azul: no legado é o
   mesmo `.shadow.p-3.bg-white.rounded` dos outros cartões, com o texto
   centrado dentro. */
.ficha-mensagem {
    width: 100%;
    padding: 18px;
    border: 0;
    border-radius: 4px;
    background: var(--cor-branco);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--cor-escura);
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao);
}

.ficha-mensagem:hover {
    background: #2e3e49;
    color: var(--cor-branco);
}

/* O SEGUNDO BOTÃO ("Enviar ficha de locatário") é um <a>, não um <button>:
   precisa do respiro que separa os dois e de anular o que o link traz de
   fábrica (sublinhado e cor de link). O `display: block` é o que faz o <a>
   aceitar largura e respiro como o <button> ao lado. */
.ficha-mensagem--ficha {
    display: block;
    margin-top: 15px;
    text-align: center;
    text-decoration: none;
}

/* --- A descrição ----------------------------------------------------------- */

/* Cartão branco de largura cheia, abaixo das duas colunas. MEDIDO no print:
   respiro de 24, raio 4 e a mesma sombra dos outros cartões. */
.ficha-descricao {
    margin-top: 40px;
    padding: 24px;
    border-radius: 4px;
    background: var(--cor-branco);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.ficha-descricao__rotulo {
    display: block;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.ficha-descricao__texto {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 28px;
    color: var(--cor-texto);
}

/* --- A janela de mensagem --------------------------------------------------- */

.ficha-modal[hidden] {
    display: none;
}

/* A JANELA DE MENSAGEM — o `#modal01` do legado.

   ⚠ O DESENHO NÃO É O DELE. O modal do Bootstrap 3 da referência é uma caixa
   branca de canto reto, sem sombra e sem respiro entre os campos, com o botão
   fora da vista quando a janela é baixa. Isto aqui é o mesmo formulário num
   desenho que cabe na tela: cabeçalho e botão FIXOS nas pontas, só o miolo
   rola, e o que rola tem barra fina em vez da barra cheia do sistema. */
.ficha-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ficha-modal__fundo {
    position: absolute;
    inset: 0;
    background: rgba(7, 28, 31, .55);
    /* O fundo escurece E desfoca de leve: a página atrás para de competir com o
       formulário sem sumir de vez. */
    backdrop-filter: blur(2px);
    animation: ficha-modal-fundo .2s ease;
}

.ficha-modal__caixa {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: min(90vh, 640px);
    overflow: hidden;
    border-radius: 12px;
    background: var(--cor-branco);
    box-shadow: 0 24px 64px rgba(7, 28, 31, .3);
    animation: ficha-modal-entra .22s ease;
}

/* Quem pediu menos movimento vê a janela aparecer no lugar. */
@media (prefers-reduced-motion: reduce) {
    .ficha-modal__fundo,
    .ficha-modal__caixa {
        animation: none;
    }
}

@keyframes ficha-modal-fundo {
    from { opacity: 0; }
}

@keyframes ficha-modal-entra {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
}

/* --- Cabeçalho, fixo no topo ----------------------------------------------- */

.ficha-modal__topo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
}

.ficha-modal__titulo {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    color: #000;
}

.ficha-modal__fechar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 100%;
    background: none;
    color: #959595;
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao);
}

.ficha-modal__fechar:hover {
    background: #f2f2f2;
    color: #000;
}

.ficha-modal__fechar svg {
    width: 16px;
    height: 16px;
}

/* --- O miolo: é ele que rola ------------------------------------------------ */

.ficha-modal .form-lead {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* O formulário inteiro rola; cabeçalho e botão ficam parados. A barra é fina e
   discreta — a do sistema, cheia, cortava a janela ao meio. */
.ficha-modal__miolo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 24px 4px;
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
}

.ficha-modal__miolo::-webkit-scrollbar {
    width: 6px;
}

.ficha-modal__miolo::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #d6d6d6;
}

.ficha-modal .form-campo {
    margin-bottom: 14px;
}

.ficha-modal__desafio {
    margin-bottom: 14px;
}

/* --- O botão, fixo no pé ---------------------------------------------------- */

.ficha-modal__acao {
    flex: 0 0 auto;
    padding: 16px 24px;
    border-top: 1px solid #eee;
}

/* O "ENVIAR" é o `.btn.btn-primary` do legado — o azul do site. */
.ficha-modal__enviar {
    width: 100%;
    padding: 13px 15px;
    border: 0;
    border-radius: 6px;
    background: #3333ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857143;
    letter-spacing: .04em;
    color: var(--cor-branco);
    cursor: pointer;
    transition: background-color var(--transicao);
}

.ficha-modal__enviar:hover {
    background: #2a2ad9;
}

/* --- Responsivo ------------------------------------------------------------
   `col-md-*` do Bootstrap 3 vale de 992 para cima; abaixo disso as duas
   colunas viram uma, que é o que o site no ar faz.
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .ficha {
        grid-template-columns: 1fr;
    }

    .ficha-topo__titulo {
        font-size: 20px;
    }
}

@media (max-width: 575.98px) {
    .ficha-caracteristicas {
        grid-template-columns: 1fr;
    }
}

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

/* =============================================================================
   PILHA DAS JANELAS DA FICHA — todas ACIMA DO CABEÇALHO (999, style.css).
   -----------------------------------------------------------------------------
   Eram 100/110/130, ou seja, DEBAIXO do cabeçalho: com o visor ou o
   compartilhar aberto, a barra do topo e a logo ficavam acesas e por cima do
   escuro, e era o cabeçalho que recebia o clique lá em cima. O Sami mostrou em
   2026-09-08 ("o nosso overlay deve sobrescrever também a header") — e a
   referência faz isso, porque a janela dela é modal do Bootstrap (z-index 1055,
   acima do cabeçalho dela).

   A escala do site, para não brigar com as outras camadas:
     999 .... cabeçalho
    1100 .... véu das gavetas (`.menu-fundo`, style.css)
    1150 .... visor de fotos            <- aqui
    1160 .... janela de compartilhar    <- aqui (e a barra da listagem)
    1200 .... gaveta do menu (o ☰ cobre tudo)
    1250 .... tarja "Link copiado!"     <- aqui (aviso de ação, acima de todos)
   ============================================================================= */
.compartilhar {
    position: fixed;
    inset: 0;
    z-index: 1160;
    display: grid;
    place-items: center;
    padding: var(--gap-md);
}

/* MEDIDO no modal da referência: o `.modal-backdrop` dela é preto puro a 70%
   (o Bootstrap com o `opacity: .7` do tema). Era `rgba(16,22,29,.55)` aqui —
   mais claro e azulado, o que deixava a janela menos destacada. */
.compartilhar__fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .7);
}

/* MEDIDO: raio 20, borda de 1px preta a 20% e NENHUM respiro próprio — quem
   tem respiro é o topo (16) e o corpo (30), como no modal da referência. */
.compartilhar__caixa {
    position: relative;
    /* MEDIDO: 285px na referência (`.modal-dialog` dela fecha 285x318 numa
       janela de 1440). Eram 500 aqui, o que esticava os quatro botões de 223
       para 438 e dava uma janela larga e vazia — o Sami comparou os dois prints
       em 2026-09-08. */
    width: min(285px, 100%);
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 20px;
    background: var(--cor-branco);
    box-shadow: var(--sombra-lg);
}

/* SEM VÃO ENTRE O TÍTULO E O "×", e o "×" com margem NEGATIVA de 8px: é o que
   faz o título caber em UMA linha numa janela de 285px. A conta é a mesma da
   referência (o `.btn-close` do Bootstrap tem `margin: -.5rem -.5rem -.5rem
   auto`): 283 de janela − 32 de respiro = 251, menos os 30 do "×" mais os 8 que
   ele devolve = 229, exatamente o que o texto "Compartilhe como preferir" pede
   em 18px/700. Com vão, o título quebrava em duas linhas e o cabeçalho ia de 60
   para 74px. */
.compartilhar__topo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 16px;
    border-bottom: 1px solid var(--cor-borda);
}

/* MEDIDO: 18px/700 NA TINTA FORTE — é o único título de janela do site que não
   é escuro. */
.compartilhar__titulo {
    margin: 0;
    font-size: 18px;
    /* 1,5 DE ENTRELINHA, e não a 1,15 dos títulos do site: é o que dá os 27px de
       caixa do `.modal-title` dela e, com o "×" fora da conta (margem negativa,
       logo abaixo), os 60px de cabeçalho medidos na referência. */
    line-height: 1.5;
    font-weight: 700;
    color: var(--cor-primaria-forte);
}

.compartilhar__corpo {
    padding: 30px;
}

/* MEDIDO: 30x30, raio 4, SEM borda e SEM fundo — é o `.btn-close` dela, um "×"
   solto ao lado do título. A bolinha de 40px com fio cinza que estava aqui não
   existe na referência e disputava atenção com o título. */
.compartilhar__fechar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    /* OS NEGATIVOS SÃO DE PROPÓSITO — o de baixo/cima tira o botão da conta da
       ALTURA (quem manda nela é o título, como lá), o da direita devolve os 8px
       que o título precisa. É o `margin: -.5rem -.5rem -.5rem auto` do
       `.btn-close` do Bootstrap, que é o que a referência usa. */
    margin: -8px -8px -8px 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cor-escura);
    cursor: pointer;
    transition: color var(--transicao);
}

.compartilhar__fechar:hover {
    color: var(--cor-primaria-forte);
}

/* MEDIDO NA REFERÊNCIA: quatro botões LARGOS, um por linha, com 8px entre eles
   (o `d-grid gap-2` dela) — e não os quadradinhos da lateral. */
.compartilhar__lista {
    display: grid;
    gap: 8px;
}

/* O MESMO BOTÃO DA GALERIA: pílula preenchida na tinta, ícone à esquerda do
   texto. `.botao-acao` é a classe dela; aqui o desenho vem da mesma fonte que
   .galeria__botao--cheio, para os dois não saírem de sincronia. */
.compartilhar__botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--cor-primaria-forte);
    border-radius: 30px;
    background: var(--cor-primaria-forte);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--cor-branco);
    cursor: pointer;
    transition: filter var(--transicao);
}

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

.compartilhar__botao svg {
    flex: none;
    width: auto;
    height: 16px;
}

/* ⚠ AQUI MORAVA `.compartilhar__url`, o campo só-de-leitura com o endereço do
   imóvel. Saiu em 2026-09-08 junto com o campo no HTML: a referência não tem
   campo nenhum na janela, e o link a copiar passou para o atributo
   `data-compartilhar-link` (ver pages/detalhe.php). */

/* ---------------------------------------------------------------------------
   TARJA "LINK COPIADO!"
   ---------------------------------------------------------------------------
   O canto de cima à direita, com a barrinha verde escoando em 2s — é o
   `#mensagemCopiado` da referência. Fica fora dos botões porque são DOIS que
   copiam, e um deles é só ícone (ver pages/detalhe.php).
   --------------------------------------------------------------------------- */
.copiado[hidden] {
    display: none;
}

.copiado {
    position: fixed;
    top: 16px;
    right: 16px;
    /* MEDIDO: 250 de largura, 16 de cada borda da tela, raio 4. */
    /* ACIMA DE TUDO: é aviso de ação, e o botão que o dispara mora DENTRO da
       janela de compartilhar (1160). Ver a escala no bloco do `.compartilhar`. */
    z-index: 1250;
    width: 250px;
    overflow: hidden;
    padding: 16px;
    border: 1px solid #badbcc;
    border-radius: 4px;
    background: #d1e7dd;
    color: #0f5132;
}

.copiado__texto {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: var(--fs-base);
    font-weight: 500;
    color: inherit;
}

.copiado__texto svg {
    flex: none;
    width: auto;
    height: 16px;
}

/* A BARRA ESCOA DA DIREITA PARA A ESQUERDA em 2s — o JS põe 100% e solta para
   0%, e a transição faz o resto (ver public/js/imovel-midia.js). */
.copiado__barra {
    display: block;
    width: 0;
    height: 4px;
    background: #28a745;
    transition: width 2s linear;
}

/* ---------------------------------------------------------------------------
   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 na folha dela — o amarelo médio do preço do
                     card DELA. Aqui é `var(--cor-primaria)`, o vermelho da base, pelo mesmo raciocínio (trocado em 2026-09-08)

   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;
    /* Ver a escala no bloco do `.compartilhar`. */
    z-index: 1150;
    /* 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;
    justify-content: center;
    background: #0d0a0a;
    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;
}

.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: var(--cor-branco);
}

/* `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);
}

/* MINIATURA DA VEZ (e a sob o ponteiro): borda na cor da marca.
   ⚠ ERA `#efc425` cravado — o amarelo médio da base, que na folha de origem
   era "o mesmo do preço do card". Aqui o preço é vermelho, e o amarelo ficou
   como único resquício de paleta que o visitante ainda via (o Sami mandou
   trocar em 2026-09-08). Token, e não hex: é o que impede o resquício de
   voltar na próxima carteira. */
.visor__trilha button[aria-current="true"],
.visor__trilha button:hover {
    border-color: var(--cor-primaria);
}

.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) {
    .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;
}

/* 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;
    }
}