/* ===========================================================================
   FICHA DO IMÓVEL — pages/detalhe.php
   ---------------------------------------------------------------------------
   RÉPLICA DE `detalhes-imovel-locacao.php` DA PORTO, 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. */
.ficha-fotos {
    position: relative;
    background: var(--cor-fundo-band);
}

/* O CARROSSEL DELA É O SLICK com `centerMode` e folgas por largura (450 a
   partir de 1600, 250 até 1200, 200 até 992, 150 até 768, zero abaixo). Quem
   posiciona o trilho é o JS (imovel-midia.js), reproduzindo a conta do slick —
   por isso aqui não há `scroll-snap`: o encaixe nativo puxaria o trilho para o
   começo de uma foto e desfaria o quadro dela. */
/* ⚠ A ALTURA É A DA FOTO MAIS ALTA + 30, COM TETO DE 337 (medido no slick dela:
   em 360 a faixa fecha 300 = foto 4:3 de 270 + 30). No desktop o teto manda;
   nas telas estreitas a faixa encolhe junto com as fotos. */
.ficha-fotos__trilho {
    display: flex;
    max-height: 337px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    list-style: none;
}

.ficha-fotos__trilho::-webkit-scrollbar {
    display: none;
}

/* CADA FOTO: 600 de largura, ou menos quando a tela não comporta a folga das
   laterais (é a conta do slick: largura da faixa menos as duas folgas). A altura
   é a NATURAL da foto, cortada em 337 — uma foto 4:3 mostra só o topo, uma
   16:9 aparece inteira.

   ⚠ CORRIGIDO EM 2026-09-14: esta regra dizia "600x450 esticada". A foto de 450
   que medi era um CLONE do slick (outra foto, em 4:3); as de verdade seguem a
   proporção do arquivo. */
.ficha-fotos__item {
    flex: none;
    width: min(600px, calc(100% - 400px));
    padding-bottom: 30px;
    overflow: hidden;
}

.ficha-fotos__botao {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

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

/* Seta de 50x50 em cada ponta, centrada na altura da foto. */
/* MEDIDO: 50x50 REDONDA, fundo branco, borda 1px #e6ecf0 e a seta preta. */
.ficha-fotos__seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    padding: 0;
    border: 1px solid #e6ecf0;
    border-radius: 100%;
    background: var(--cor-branco);
    color: #000;
    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: 0;
    visibility: hidden;
    transition: all .3s;
}

.ficha-fotos:hover .ficha-fotos__seta,
.ficha-fotos:focus-within .ficha-fotos__seta {
    opacity: 1;
    visibility: visible;
}

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

.ficha-fotos__seta--anterior { left: 15px; }
.ficha-fotos__seta--proxima  { right: 15px; }

.ficha-fotos:hover .ficha-fotos__seta--anterior,
.ficha-fotos:focus-within .ficha-fotos__seta--anterior { left: 50px; }
.ficha-fotos:hover .ficha-fotos__seta--proxima,
.ficha-fotos:focus-within .ficha-fotos__seta--proxima  { right: 50px; }

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

/* A DICA: lupa de 20 e o texto centralizados. A altura sai do próprio texto,
   como no `.custom-col` dela: 25 de respiro em cima, a linha e 1,5em embaixo
   (78 no desktop, 71 abaixo de 992, quando a fonte cai para 14). A lupa fica
   no meio da caixa toda, e não da linha — por isso ela desce em relação ao
   texto. */
.ficha-fotos__dica {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-texto);
}

.ficha-fotos__dica img {
    width: 20px;
    height: 20px;
}

.ficha-fotos__dica p {
    margin: 0 0 1.5em 10px;
    padding-top: 25px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
}

/* AS BOLINHAS (só abaixo de 992, ver o responsivo): 10px cinza #c0c0c0 com 10
   de espaço, e a da vez com 15px no verde, descendo 2 — o `.slick-dots` dela.
   A faixa fecha 15 de altura e deixa 30 de margem embaixo (15 abaixo de 768). */
.ficha-fotos__pontos {
    display: none;
    margin: 0 0 30px;
    padding: 0;
    /* ARIAL como lá: as bolinhas ficam na linha de base, e é a fonte que decide
       onde ela cai dentro da linha de 14 — com a Nunito a faixa fechava 16. */
    font-family: Arial, sans-serif;
    line-height: 1;
    text-align: center;
    list-style: none;
}

.ficha-fotos__pontos li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 10px 0 0;
    border-radius: 100%;
    background: #c0c0c0;
    font-size: 0;
    vertical-align: baseline;
    cursor: pointer;
    transition: all .3s ease 0s;
}

.ficha-fotos__pontos li:hover,
.ficha-fotos__pontos li.ficha-fotos__ponto--ativo {
    width: 15px;
    height: 15px;
    margin-bottom: -2px;
    background: var(--cor-secundaria, #a9ca3d);
}

/* O botão cobre a bolinha inteira e não desenha nada (lá o botão é `display:
   none` e o clique é no <li>; aqui ele existe para o teclado). */
.ficha-fotos__pontos button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 100%;
    background: none;
    cursor: pointer;
}

/* 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
   --------------------------------------------------------------------------- */
/* DOIS TERÇOS E UM TERÇO, como o `col-lg-8` + `col-lg-4` de lá. A conta é a
   mesma da listagem: a fileira é 30 mais larga que o container, cada coluna
   tira 30 de respiro, então a primeira mede (2/3)(100% + 30) − 30, que é
   200%/3 − 10. Em 1440 isso dá 770 + 30 + 370. */
/* SEM RESPIRO EM CIMA: o que afasta do carrossel são as margens dos selos e do
   título. Lá a área é `pb-10` e mais nada. */
.ficha {
    padding-block: 0 10px;
}

.ficha__grade {
    display: grid;
    grid-template-columns: calc(200% / 3 - 10px) minmax(0, 1fr);
    gap: 30px;
}

.ficha__conteudo {
    min-width: 0;
    margin-bottom: 60px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--cor-texto);
}

/* --- Selos, título e endereço --------------------------------------------- */
.ficha__selos {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.ficha__selo {
    display: inline-block;
    margin: 0 25px 5px 0;
    padding: 5px 15px 2px;
    background: var(--cor-primaria);
    font-size: 14px;
    font-weight: 600;
    line-height: 25.2px;
    color: var(--cor-branco);
    text-transform: uppercase;
}

/* O selo da seção ("LOCAÇÃO") é o verde da marca. */
.ficha__selo--secao {
    background: var(--cor-secundaria, #a9ca3d);
}

.ficha__titulo {
    margin: 30px 0 15px;
    font-family: var(--fonte-display);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--cor-escura);
    text-transform: uppercase;
    text-wrap: wrap;
}

/* INLINE-BLOCK como o <label> de lá: a caixa fecha no texto, não na coluna. */
.ficha__endereco {
    display: inline-block;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

.ficha__pino {
    display: inline-block;
    width: 14px;
    height: 14px;
    color: var(--cor-primaria);
}

/* --- Títulos de seção ------------------------------------------------------ */
/* `h4.title-2` de lá: 22/600 com o fio azul de 2px à esquerda. */
.ficha__secao {
    margin: 30px 0;
    padding-left: 10px;
    border-left: 2px solid var(--cor-primaria);
    font-family: var(--fonte-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--cor-escura);
}

/* As três listas de características usam `title-2 mb-10`: 10 embaixo em vez de 30. */
.ficha__secao--lista {
    margin-bottom: 10px;
}

/* O TÍTULO DO MAPA É OUTRO BICHO (`pr-d-title`): 20px/500, sem o fio azul e sem
   recuo, com 30 em cima e 15 embaixo. */
.ficha__secao--mapa {
    margin: 30px 0 15px;
    padding-left: 0;
    border-left: 0;
    font-size: 20px;
    font-weight: 500;
}

.ficha__descricao {
    margin: 24px 0;
}

/* --- Detalhes do imóvel ---------------------------------------------------- */
/* QUATRO POR LINHA: item de 170x40 com 19 de respiro à direita (mais o espaço
   entre os `inline-block`), 16 acima e 15 abaixo. */
.ficha__detalhes {
    margin: 0 0 45px;
    padding: 0;
    list-style: none;
}

/* LINHA DE 16 dentro do item: é ela que faz o item fechar 40 de altura (o
   ícone), e não 53. E a largura é do CONTEÚDO com piso de 170 — na lateral,
   "Valor do Aluguel" passa disso e fecha 175, como lá. */
.ficha__detalhe {
    display: inline-flex;
    align-items: center;
    min-width: 170px;
    margin: 16px 19px 15px 0;
    /* `line-height: 1`, não 16 fixos: abaixo de 992 o corpo cai para 14 e a
       linha dela acompanha; com 16 cada fileira saía 0,2 mais alta. */
    line-height: 1;
    vertical-align: top;
}

.ficha__detalhe-icone {
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 12px;
}

.ficha__detalhe-texto {
    display: block;
    min-width: 0;
}

.ficha__detalhe-rotulo {
    display: block;
    margin-bottom: 6px;
    font-family: var(--fonte-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

/* INLINE (como o <small> dela): a caixa do texto fecha 16, não 14. E em EM
   (`small { font-size: .875em }`): 14 sobre os 16 do desktop, mas 12,25 abaixo
   de 992, quando o corpo cai para 14. */
.ficha__detalhe-valor {
    font-size: .875em;
    line-height: 1;
}

/* --- Características (imóvel, condomínio e proximidades) ------------------- */
/* TRÊS POR LINHA (257 cada), com o visto na frente. */
/* FLEX, e não `inline-block`: lá as <li> saem coladas no HTML (`</li><li>`) e
   três de 257 cabem nos 770. Com a nossa marcação indentada entra um espaço de
   4px entre elas e o terceiro item caía de linha. Em flex o espaço não conta. */
.ficha__itens {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 0 60px;
    padding: 0;
    list-style: none;
}

/* TRÊS POR LINHA. ⚠ NÃO dá para cravar os 257 medidos: 257x3 = 771 e a coluna
   tem 770, então o terceiro caía para a linha de baixo. Um terço da largura dá
   os mesmos 256,7 e mantém os três, como lá.
   BLOCO com a marca e o texto EM LINHA, como a <li> dela (<img> + <label>
   inline-block). É isso que decide a quebra no celular: quando o rótulo não
   cabe ao lado da marca, ele desce INTEIRO para baixo dela (a 375, "Clube
   Social" e "Ponto de Taxi" fazem isso lá). Em flex o texto quebrava ao lado
   da marca e a lista saía com outra altura. */
.ficha__item {
    display: block;
    width: calc(100% / 3 - .01px);
    /* ⚠ `min-width: 0`: item de flex não encolhe abaixo do próprio conteúdo sem
       isso, e "Posto de Combustível" empurrava o terceiro da linha para baixo. */
    min-width: 0;
    margin-top: 15px;
    padding: 5px;
    font-size: 14px;
    font-weight: 500;
}

/* O VISTO É A IMAGEM DELA (círculo verde), 24x24, no meio da linha; o espaço
   até o texto é o do próprio HTML entre a <img> e o rótulo. */
.ficha__item-marca {
    display: inline;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.ficha__item-texto {
    display: inline-block;
}

/* --- Mapa ------------------------------------------------------------------ */
/* SEM MARGEM EMBAIXO: lá os 16 do <address> se FUNDEM com os 60 da coluna (e
   fica 60). Aqui a coluna é item de grade, que não funde margem, e os dois
   somavam 76 — a lateral descia 16 no celular. */
.ficha__mapa {
    display: block;
    margin: 0;
    font-style: normal;
}

/* INLINE, não `block`: no <address> dela o iframe fica na linha de texto, e é
   isso que dá os 360 do bloco (350 do mapa + a descida da linha). */
.ficha__mapa iframe {
    width: 100%;
    height: 350px;
    border: 0;
}

/* ---------------------------------------------------------------------------
   A LATERAL
   --------------------------------------------------------------------------- */
.ficha__lateral {
    min-width: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--cor-texto);
}

/* Mesma casca da coluna de busca da listagem: borda 2px #ededed. */
.ficha__caixa {
    margin-bottom: 40px;
    padding: 35px 30px 40px 35px;
    border: 2px solid #ededed;
}

.ficha__caixa-titulo {
    margin: 0 0 25px;
    padding-left: 10px;
    border-left: 2px solid var(--cor-primaria);
    font-family: var(--fonte-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--cor-escura);
    /* O `capitalize` é da folha dela — por isso "Chame No WhatsApp" na tela. */
    text-transform: capitalize;
}

/* --- Valores ---------------------------------------------------------------- */
.ficha__valores {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* MESMO ITEM DO "Detalhes do imóvel", inclusive as margens: eles são a mesma
   peça na folha dela (`property-detail-feature-list`). */
.ficha__valor {
    display: inline-flex;
    align-items: center;
    min-width: 170px;
    margin: 16px 19px 15px 0;
    /* `line-height: 1`, não 16 fixos: abaixo de 992 o corpo cai para 14 e a
       linha dela acompanha; com 16 cada fileira saía 0,2 mais alta. */
    line-height: 1;
    vertical-align: top;
}

.ficha__valor-icone {
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 12px;
}

.ficha__valor-rotulo {
    display: block;
    margin-bottom: 6px;
    font-family: var(--fonte-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

/* Em EM, como o valor dos detalhes: 12,25 abaixo de 992. */
.ficha__valor-numero {
    font-size: .875em;
    line-height: 1;
}

/* "Valor Total:" é o mesmo título das caixas, com 16 acima e nada abaixo. */
.ficha__total {
    margin: 16px 0 0;
}

/* --- Botões ----------------------------------------------------------------- */
/* INLINE-BLOCK com o texto CENTRALIZADO, como o `.btn` do tema: quando a caixa
   estreita (992–1199) quebra o rótulo em duas linhas, as duas saem centradas,
   e o ícone do WhatsApp corre NA LINHA junto com o texto ("ícone CHAME NO" /
   "WHATSAPP"). Em flex o ícone virava uma coluna à parte. */
.ficha__botao {
    display: inline-block;
    text-align: center;
    padding: 17px 40px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--cor-primaria);
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--cor-branco);
    cursor: pointer;
    transition: all .3s ease 0s;
}

/* `theme-btn-1:hover` dela: fundo preto e o texto continua BRANCO (sem a
   varredura — este botão não tem `btn-effect-1`). */
.ficha__botao:hover {
    background: #000;
    color: var(--cor-branco);
}

/* O do WhatsApp é verde e vai em MAIÚSCULAS, como lá. */
.ficha__botao--whats {
    background: #198754;
    border-color: #198754;
    text-transform: uppercase;
}

/* O DO WHATSAPP TEM VARREDURA (`btn-effect-1`): a faixa branca cobre o botão
   (classe `.botao-varredura`, style.css), o fundo por baixo passa ao verde do
   hover do Bootstrap (#157347) e o texto e a borda escurecem. Fotografado com o
   :hover forçado no site dela. */
.ficha__botao--whats:hover {
    border-color: #146c43;
    background: #157347;
    color: var(--cor-escura);
}

/* ÍCONE EM EM, como o glifo de fonte dela: a caixa do <i> mede 1em de altura
   e 1em + 2 de largura (18x16 no desktop, 16x14 no celular). O que separa do
   texto é o espaço do próprio HTML, que acompanha a fonte. */
.ficha__botao svg {
    width: calc(1em + 2px);
    height: 1em;
    vertical-align: -.125em;
}

/* --- Formulário ------------------------------------------------------------- */
/* Os campos da ficha são os de lá: 60 de altura, borda 1px #e4ecf2 e 30 entre
   um e outro; o botão, 200x60 no azul. */
.ficha__caixa--form .campo input,
.ficha__caixa--form .campo textarea {
    width: 100%;
    padding: 1px 40px 1px 11px;
    border: 1px solid #e4ecf2;
    border-radius: 0;
    background: var(--cor-branco);
    font-family: var(--fonte-display);
    font-size: 16px;
    line-height: 1.8;
    color: var(--cor-texto);
}

.ficha__caixa--form .campo input {
    height: 60px;
}

.ficha__caixa--form .campo textarea {
    height: 150px;
    padding: 15px 20px 15px 11px;
}

/* 30 ENTRE OS CAMPOS, como lá (é a margem de cada um). */
.ficha__caixa--form .form-lead,
.ficha__caixa--form .form-lead__campos {
    gap: 30px;
}

/* O BOTÃO É 200x60: respiro 17/40 em 16px, sem raio e sem versalete. */
/* O BOTÃO DE ENVIAR É 200x60: respiro 17/40 em 16px, sem raio, sem negrito e
   sem versalete. (A classe é a do botão padrão do site — `.btn`; aqui ele veste
   a roupa da ficha dela.) */
/* ⚠ QUEM ESTICAVA O BOTÃO ERA O `flex: 1` de `.form-lead__acoes .btn` (style.css):
   num flex row ele cresce até o fim da linha, e nenhuma largura resolve isso.
   Aqui ele volta a ter o tamanho do conteúdo, como o botão de 200 da referência. */
.ficha__caixa--form .form-lead__acoes {
    align-items: flex-start;
}

.ficha__caixa--form .form-lead__acoes .btn {
    flex: none;
    min-width: 0;
}

.ficha__caixa--form .form-lead button[type="submit"]:hover {
    background: #000;
    color: var(--cor-branco);
}

.ficha__caixa--form .form-lead button[type="submit"] {
    align-self: flex-start;
    width: auto;
    padding: 17px 40px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--cor-primaria);
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    text-transform: none;
}

/* --- Compartilhar ----------------------------------------------------------- */
/* O MESMO BLOCO DA LISTAGEM (`.busca-social` em imoveis.css): quadrados de 40
   no cinza, com o ícone da rede no meio e azul no hover. */
.ficha__redes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha__redes li {
    display: inline-block;
    margin: 16px 10px 0 0;
}

.ficha__redes li:last-child {
    margin-right: 0;
}

.ficha__redes a,
.ficha__redes button {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--cor-fundo-band);
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 40px;
    color: var(--cor-texto);
    text-align: center;
    cursor: pointer;
    transition: all .3s ease 0s;
}

.ficha__redes li:hover a,
.ficha__redes li:hover button {
    background: var(--cor-primaria);
    color: var(--cor-branco);
}

.ficha__redes svg {
    display: inline-block;
    width: auto;
    height: 16px;
    margin: 0 2px;
    vertical-align: -2px;
}

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

/* ---------------------------------------------------------------------------
   RESPONSIVO — medido em detalhes-imovel-locacao.php (2026-09-14)
     ≤ 1199 ... caixas da lateral com 20 de respiro nos lados; h1 em 30 até 992
     ≤ 991 .... a lateral DESCE para baixo da coluna; texto herdado em 14;
                botões com respiro 12/25; carrossel com folga de 150
     ≤ 768 .... some a dica "Clique na foto para ampliar!"
     ≤ 767 .... selos em 12; botões em 14 com respiro 10/20; carrossel sem folga

   ⚠ AQUI MORAVA O RESPONSIVO DA FICHA DA INOVA (galeria em grade, lateral
   dissolvida com `display: contents`, formulário escondido atrás de um botão).
   Ele fazia a lateral inteira SUMIR abaixo de 992 na ficha nova — saiu todo.
   --------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ficha__caixa {
        padding: 35px 20px 40px 20px;
    }
}

/* O h1 de lá fica em 30 SÓ nesta faixa; abaixo de 992 volta aos 36. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ficha__titulo {
        font-size: 30px;
    }
}

@media (max-width: 991.98px) {
    /* UMA COLUNA: o conteúdo em cima e a lateral inteira embaixo, na mesma ordem
       do desktop. Os 60 de margem do conteúdo separam as duas. */
    .ficha__grade {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    /* `body { font-size: 14px }` da responsive.css dela. */
    .ficha__conteudo,
    .ficha__lateral {
        font-size: 14px;
    }

    .ficha__botao,
    .ficha__caixa--form .form-lead button[type="submit"] {
        padding: 12px 25px;
    }

    /* SEM SETAS abaixo de 992: o slick dela as remove nessa faixa, e o
       carrossel anda só no dedo. */
    .ficha-fotos__seta {
        display: none;
    }

    .ficha-fotos__pontos {
        display: block;
    }

    .ficha-fotos__item {
        width: min(600px, calc(100% - 300px));
    }

    /* A dica também herda os 14: a faixa fecha 71 em vez de 78. */
    .ficha-fotos__dica p {
        font-size: 14px;
    }
}

/* O h1 de lá em 26 nesta faixa (`h1` da responsive.css dela), e o título do
   mapa (um `h4` comum) em 18. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ficha__titulo {
        font-size: 26px;
    }

    .ficha__secao--mapa {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .ficha-fotos__dica {
        display: none;
    }
}

@media (max-width: 767.98px) {
    /* `.ltn__blog-meta li { margin-right: 10px; font-size: 12px }` dela. */
    /* Linha de 1,8 como o resto: em 12px o selo fecha 29 de altura, não 32. */
    .ficha__selo {
        margin-right: 10px;
        font-size: 12px;
        line-height: 1.8;
    }

    .ficha__titulo {
        font-size: 24px;
    }

    .ficha__secao--mapa {
        font-size: 17px;
    }

    .ficha__botao {
        padding: 10px 20px;
        font-size: 14px;
        line-height: 21px;
    }

    /* O de enviar é `[type="submit"].btn`: 12/30 em 14. */
    .ficha__caixa--form .form-lead button[type="submit"] {
        padding: 12px 30px;
        font-size: 14px;
        line-height: 21px;
    }

    .ficha-fotos__pontos {
        margin-bottom: 15px;
    }

    .ficha-fotos__item {
        width: min(600px, 100%);
    }
}

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