/* ===========================================================================
   FICHA DO IMÓVEL (pages/detalhe.php) NO DESENHO DA FICHA DA L TEDESCO (O detalhes.css DE LÁ, COM O AZUL DA
   CENTRAL NO LUGAR DO VERDE E OS ÍCONES DE img/imovel/). DEPOIS DO busca.css, DO fotos-fade.css E DO
   formulario-blocos.css.
   =========================================================================== */

/* A TRILHA (O interna.css DE LÁ): HOME / CIDADE / TIPO. */
.trilha {
    margin: 0 0 20px;
    padding: 14px 4px 17px;
    border-radius: 4px;
    background-color: #f5f5f5;
    line-height: 12px;
    list-style: none;
}

.trilha li {
    display: inline-block;
    margin: 0;
    color: #707070;
    font-size: 12px;
    font-weight: 300;
    line-height: 12px;
}

.trilha li + li::before {
    content: "/\00a0";
    padding: 0 5px;
    color: #ccc;
}

.trilha .ativo {
    color: #777;
}

.trilha a {
    color: #707070;
    font-weight: 400;
}

.trilha a:hover {
    color: #f17478;
}

/* DETALHES DE IMÓVEL QUE NÃO EXISTE: O ALERTA AMARELO DO BOOTSTRAP. */
.detalhes__aviso {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #faebcc;
    border-radius: 4px;
    background-color: #fcf8e3;
    color: #8a6d3b;
}

/* ---- DETALHES DO IMÓVEL À VENDA (.detail-top DO SITE ANTIGO) -------------------------- */

.detalhes {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .detalhes { margin-bottom: 20px; }
}

/* A FAIXA CINZA NA LARGURA TODA, COM A TRILHA À ESQUERDA E O COMPARTILHAR À DIREITA; O TÍTULO EMBAIXO.
   (NO SITE ANTIGO O CINZA SÓ COBRIA A TRILHA E O BOTÃO FICAVA FORA, À DIREITA.) NO CELULAR A TRILHA E O
   COMPARTILHAR NÃO APARECEM (COMO LÁ), ENTÃO A FAIXA SOME. */
.detalhes__cabeca {
    padding: 25px 0 28px;
}

@media (max-width: 767px) {
    .detalhes__cabeca { padding: 35px 0 16px; } /* DEPOIS DA BUSCA, QUE NO CELULAR TERMINA SEM RESPIRO */
}

.detalhes__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 0 0 15px;
    padding: 3px 3px 3px 4px;
    border-radius: 4px;
    background-color: #f5f5f5;
}

@media (max-width: 767px) {
    .detalhes__barra { display: none; }
}

.trilha.trilha--detalhes {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
}

.trilha--detalhes li {
    line-height: 28px;
}

/* O TÍTULO NÃO QUEBRA NO DESKTOP: CORTA COM RETICÊNCIAS. */
.detalhes__titulo {
    width: 100%;
    margin: 0 0 9px;
    overflow: hidden;
    font-family: inherit;
    font-size: 30px;
    font-weight: 500;
    line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .detalhes__titulo { max-width: 500px; font-size: 24px; line-height: 28px; }
}

@media (max-width: 767px) {
    .detalhes__titulo { max-width: 100%; margin-bottom: 5px; font-size: 18px; line-height: 20px; white-space: normal; }
}

.detalhes__etiqueta-caixa {
    position: relative;
    top: -3px;
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    font-size: 0;
    line-height: normal;
}

@media (max-width: 991px) {
    .detalhes__etiqueta-caixa { display: none; }
}

.detalhes__etiqueta {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 6px 10px;
    border-radius: 2px;
    background-color: #4cc6f4;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---- COMPARTILHAR: O BOTÃO PRETO E O BALÃO VERDE QUE ABRE À ESQUERDA DELE ------------- */

.detalhes__acoes {
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    line-height: 0;
}

.detalhes__compartilhar {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    color: #fff;
    font-size: 12px;
}

.detalhes__botao-compartilhar {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-left: 3px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background-color: #000;
    color: inherit;
    font-size: inherit;
    line-height: 28px;
    text-align: center;
    opacity: .6;
}

.detalhes__botao-compartilhar:hover {
    background-color: var(--azul);
    opacity: .8;
}

.detalhes__balao {
    position: absolute;
    right: 30px;
    bottom: 50%;
    z-index: -1;
    display: flex;
    align-items: center;
    padding: 0 5px;
    border-radius: 3px;
    background-color: var(--azul);
    line-height: 1;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transform: translate(0, 50%);
    transition: opacity .15s linear;
}

.detalhes__balao.aberto {
    z-index: 5;
    visibility: visible;
    opacity: 1;
}

/* A SETINHA DO BALÃO, ROSA COMO NO TEMA, APONTANDO PARA O BOTÃO. */
.detalhes__balao::after {
    content: ' ';
    position: absolute;
    right: -14px;
    bottom: 7px;
    z-index: 2;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-left-color: #f17478;
}

/* CADA REDE NUM QUADRADO DE 30x30 COM O ÍCONE NO MEIO. (NO SITE ANTIGO, O padding DE 6px EM CIMA
   SOMADO À LINHA DE 30px EMPURRAVA O ÍCONE PARA BAIXO.) */
.detalhes__balao a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    vertical-align: top;
}

.detalhes__balao a .icone {
    vertical-align: 0;
}

.detalhes__balao a:hover {
    color: #000;
}

@media (max-width: 767px) {
    .detalhes__balao a { width: 24px; }
}

/* ---- FOTOS EM CIMA; EMBAIXO, OS TEXTOS À ESQUERDA E O FORMULÁRIO À DIREITA ------------------
   (NO SITE ANTIGO ERAM FOTOS 7/12 E DADOS 5/12 LADO A LADO; O SAMI PEDIU EMPILHADO, COM O FORMULÁRIO
   AO LADO DOS TEXTOS.) NO TABLET E NO CELULAR, TUDO EMPILHADO. */

.detalhes__midia,
.detalhes__conteudo {
    position: relative;
}

/* NA LARGURA DO TÍTULO (NA lau ESSES 15px DE RECUO COMPENSAVAM UMA LINHA DE GRADE QUE AQUI NÃO EXISTE: SOBRAVA UM
   RECUO A MAIS, MAIS VISÍVEL NO CELULAR). */
.detalhes__fotos,
.detalhes__dados {
    position: relative;
    min-height: 1px;
}

/* IMÓVEL SEM FOTO: O "FOTOS EM BREVE" (samiSiteFotoIndisponivel()) NO LUGAR DAS FOTOS, NA MESMA
   MARGEM E NO MESMO CANTO DO fotos-fade. */
.detalhes__fotos > .foto-indisponivel {
    /* NO FLUXO, NO LUGAR DAS FOTOS (O PADRÃO DO AVISO É ABSOLUTO, PARA COBRIR A FOTO DO CARTÃO; AQUI NÃO HÁ FOTO
       EMBAIXO E ELE COBRIA OS DADOS DO IMÓVEL). */
    position: relative;
    inset: auto;
    height: 400px;
    margin-bottom: 60px;
    border-radius: 4px;
    font-size: 18px;
}

.detalhes__fotos > .foto-indisponivel .icone {
    font-size: 60px;
}

@media (max-width: 767px) {
    .detalhes__fotos > .foto-indisponivel { height: 250px; }
}

@media (min-width: 992px) {
    .detalhes__dados {
        display: flex;
        align-items: flex-start;
        gap: 40px;
    }
}

.detalhes__info {
    flex: 1;
    min-width: 0;
}

/* O QUADRO DO FORMULÁRIO ACOMPANHA A ROLAGEM, ABAIXO DO CABEÇALHO FIXO. */
.detalhes__lateral {
    flex: 0 0 360px;
}

@media (min-width: 992px) {
    .detalhes__lateral {
        position: sticky;
        top: 100px;
    }
}

@media (max-width: 991px) {
    .detalhes__lateral { margin-top: 30px; }
}

/* CÓDIGO, CIDADE E ÁREA NUMA LINHA (COM OS ÍCONES DO SITE ANTIGO) E O PREÇO EMBAIXO. */
.detalhes__topo {
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.detalhes__resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.detalhes__resumo li {
    color: #727272;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
}

.detalhes__resumo .detalhes__local {
    padding-left: 20px;
    background: url('../img/imovel/address.png') no-repeat left;
}

.detalhes__resumo .detalhes__area {
    padding-left: 20px;
    background: url('../img/imovel/area.png') no-repeat left;
}

.detalhes__preco {
    display: block;
    color: #000;
    font-size: 30px;
    font-weight: 500;
    line-height: 34px;
}

@media (max-width: 767px) {
    .detalhes__preco { font-size: 26px; line-height: 30px; }
}

/* CONDOMÍNIO E IPTU, PEQUENOS, LOGO ABAIXO DO PREÇO. */
.detalhes__taxas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.detalhes__taxas li {
    color: #727272;
    font-size: 14px;
    line-height: 20px;
}

.detalhes__taxas strong {
    color: #333;
    font-weight: 500;
}

/* CADA BLOCO (DESCRIÇÃO, DETALHES, CARACTERÍSTICAS) COM TÍTULO CURTO E UMA LINHA FINA ENTRE ELES. */
.detalhes__bloco {
    padding: 25px 0;
    border-bottom: 1px solid #eee;
}

.detalhes__bloco:last-child {
    border-bottom: 0;
}

.detalhes__bloco-titulo {
    margin: 0 0 15px;
    color: #000;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

/* PALAVRA OU LINK LONGO SEM ESPAÇO (DESCRIÇÃO COLADA DE OUTRO LUGAR) QUEBRA EM VEZ DE ESTOURAR A
   LARGURA NO CELULAR. TEXTO NORMAL NÃO MUDA. */
.detalhes__titulo,
.detalhes__texto,
.detalhes__lista li {
    overflow-wrap: break-word;
}

.detalhes__texto {
    margin: 0;
    color: #333;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
}

@media (max-width: 991px) {
    .detalhes__texto { font-size: 14px; line-height: 22px; }
}

.detalhes__numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.detalhes__numero {
    padding-left: 22px;
    background: no-repeat left center;
    color: #727272;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
}

/* A FICHA DO CADASTRO (TIPO, FINALIDADE, ÁREAS, ANDAR...): RÓTULO PEQUENO EM CIMA E O VALOR EMBAIXO. */
.detalhes__ficha {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 22px 0 0;
}

/* OS GRUPOS DA FICHA ("Sobre o imóvel", "Prédio e posição", "Áreas"): O SUBTÍTULO PEQUENO EM AZUL, SEPARADO DO QUE
   VEM ANTES POR UMA LINHA TRACEJADA. */
.detalhes__subtitulo {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px dashed #e5e5e5;
    color: var(--azul);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    text-transform: uppercase;
}

.detalhes__bloco-titulo + .detalhes__subtitulo {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.detalhes__subtitulo + .detalhes__ficha {
    margin-top: 12px;
}

@media (max-width: 767px) {
    .detalhes__ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.detalhes__ficha:first-child {
    margin-top: 0;
}

.detalhes__ficha dt {
    color: #727272;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-transform: uppercase;
}

.detalhes__ficha dd {
    margin: 2px 0 0;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    overflow-wrap: break-word;
}

.detalhes__numero--banheiro { background-image: url('../img/imovel/bath.png'); }
.detalhes__numero--quarto { background-image: url('../img/imovel/bed.png'); }
.detalhes__numero--vaga { background-image: url('../img/imovel/garage.png'); }
.detalhes__numero--sala { padding-left: 0; }

/* LISTA EM COLUNAS, COM UM PONTO VERDE NA FRENTE DE CADA ITEM. */
.detalhes__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 3;
    column-gap: 24px;
}

@media (max-width: 767px) {
    .detalhes__lista { columns: 2; }
}

@media (max-width: 481px) {
    .detalhes__lista { columns: 1; }
}

.detalhes__lista li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 14px;
    color: #555;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    break-inside: avoid;
}

.detalhes__lista li::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--azul);
}

/* VÍDEO, TOUR 360° E MAPA: QUADRO 16:9 COM CANTO ARREDONDADO; O MAPA UM POUCO MAIS BAIXO. */
.detalhes__quadro {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 4px;
    background-color: #f2f2f2;
}

.detalhes__quadro--mapa {
    padding-top: 45%;
}

@media (max-width: 767px) {
    .detalhes__quadro--mapa { padding-top: 75%; }
}

.detalhes__quadro iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.detalhes__endereco {
    margin: 0 0 15px;
    padding-left: 20px;
    background: url('../img/imovel/address.png') no-repeat left center;
    color: #555;
    font-size: 14px;
    line-height: 20px;
}

/* VÍDEO OU TOUR DE UM SERVIÇO QUE NÃO SE EMBUTE: LINK PARA ABRIR EM OUTRA ABA. */
.detalhes__link-externo {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--azul);
    border-radius: 4px;
    color: var(--azul);
    font-size: 14px;
}

.detalhes__link-externo:hover {
    background-color: var(--azul);
    color: #fff;
}

/* ---- "ENVIE SUA MENSAGEM" (.contact-form DO SITE ANTIGO, QUE LÁ FICAVA ESCONDIDO) -----------
   NUM QUADRO COM BORDA. OS CAMPOS SÃO OS DO formulario-blocos.css (O .form-control DE LÁ); O
   BOTÃO, O .btn-secondary .btn-block (AS CORES DO "ENVIAR" DO CONTATO, NA LARGURA TODA). */
.detalhes__form {
    padding: 25px;
    border: 1px solid #dedede;
    border-radius: 4px;
    background-color: #fff;
}

.detalhes__form-titulo {
    margin: 0 0 18px;
    color: #000;
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.detalhes__form .grupo {
    margin-bottom: 15px;
}

/* SÓ O TEXTO DENTRO DA CAIXA, COMO LÁ: O RÓTULO FICA PARA LEITOR DE TELA. */
.detalhes__form .grupo label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.detalhes__form .campo-texto {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
}

/* A MENSAGEM COM ESPAÇO PARA ESCREVER (A CAIXA DE 42px DOS OUTROS CAMPOS A ACHATAVA NUMA LINHA). */
.detalhes__form textarea.campo-texto {
    height: auto;
    min-height: 110px;
    resize: vertical;
}

.detalhes__form .campo-texto:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.detalhes__enviar {
    display: block;
    width: 100%;
    margin: 0;
    padding: 11px 15px;
    border: 0;
    border-radius: 4px;
    background-color: var(--azul);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857;
    text-align: center;
    cursor: pointer;
    transition: background-color .3s ease;
}

/* A COR PRINCIPAL DO SITE, COM O VERMELHO NO HOVER, COMO OS OUTROS BOTÕES. */
.detalhes__enviar:hover,
.detalhes__enviar:focus-visible {
    background-color: var(--vermelho);
}

.detalhes__enviar:disabled {
    opacity: .7;
    cursor: wait;
}

@media (max-width: 991px) {
    .detalhes__enviar { padding-top: 15px; padding-bottom: 15px; }
}

/* "Preencher ficha de locatário" (SÓ NA LOCAÇÃO E COM LAYOUT DE FICHA NO PAINEL), ABAIXO DO "Enviar": O MESMO
   TAMANHO, EM CONTORNO AZUL PARA NÃO DISPUTAR COM O ENVIO. */
.detalhes__ficha-locatario {
    display: block;
    margin-top: 10px;
    padding: 10px 15px;
    border: 1px solid var(--azul);
    border-radius: 4px;
    background-color: #fff;
    color: var(--azul);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857;
    text-align: center;
    transition: all .3s ease;
}

.detalhes__ficha-locatario:hover,
.detalhes__ficha-locatario:focus-visible {
    background-color: var(--azul);
    color: #fff;
}

@media (max-width: 991px) {
    .detalhes__ficha-locatario { padding-top: 14px; padding-bottom: 14px; }
}

/* ---- GALERIA AMPLIADA (LIGHTGALLERY) -------------------------------------------------------
   A FOTO DO SLIDER MOSTRA QUE AMPLIA. O PADRÃO DO LIGHTGALLERY (1040/1050) FICARIA ABAIXO DO
   CABEÇALHO FIXO E DO CHAT: ABERTO, ELE COBRE TODOS. */
.fotos-fade--ampliar .fotos-fade__slide.ativo {
    cursor: zoom-in;
}

.fotos-fade--ampliar .fotos-fade__slide:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: -2px;
}

.lg-backdrop {
    z-index: 1000040;
}

.lg-outer {
    z-index: 1000050;
}