@charset "ISO-8859-1";

/* ==========================================================================
   Oportunidades_ImovelDetalhes.css - pagina /oportunidades/imoveis/<slug>/

   Uma unica pagina serve todos os imoveis, entao NAO ha nada especifico de
   imovel aqui: so as caixas da galeria, da ficha, do miolo e dos "outros".

   O cabecalho azul (.cv-pg-topo) e a faixa final (.cv-cta) moram no
   css.css GLOBAL -- nao repetir nada deles aqui, senao as internas
   divergem entre si (ver CLAUDE.md).

   ESTRUTURA VISUAL (refatorada):
   - HERO: galeria grande a esquerda + cartao de ficha FLUTUANTE a direita,
     que acompanha a rolagem (sticky) enquanto a galeria passa.
   - A ficha e um cartao branco elevado sobre faixa creme, nao uma coluna
     de texto solta.
   ========================================================================== */

.cv-imv-topo {
    /* faixa creme atras do hero: separa do cabecalho azul e faz o cartao
       branco da ficha "subir" da pagina. */
    padding: 54px 0 72px;
    background: linear-gradient(#efe9d3 0, #efe9d3 320px, #ffffff 320px);
}

/* A ficha acompanha a ALTURA da capa: as duas colunas ficam na mesma
   linha e a altura e ditada pela capa (aspect-ratio 3/2) -- ver
   .cv-imv-ficha, que se limita a essa altura em vez de estica-la. */
.cv-imv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 40px;
}

/* ============================ GALERIA ============================ */

.cv-imv-galeria {
    min-width: 0;
}

.cv-imv-foto {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    /* fundo escuro: as fotos tem proporcoes diferentes (retrato, 16:9) e o
       contain deixa faixa nas laterais -- no escuro vira moldura. */
    background: #0b294d;
    /* trava a caixa: a foto grande troca pelo JS e sem isso a pagina daria
       salto (CLS) a cada troca. 3:2 e mais generoso que 4:3 para paisagem. */
    aspect-ratio: 3 / 2;
    box-shadow: 0 18px 40px rgba(6, 35, 69, .16);
}

.cv-imv-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Contador "1 de 22" sobre a foto. */
.cv-imv-conta {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 100px;
    background: rgba(6, 35, 69, .78);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 13px;
    letter-spacing: .04em;
}

.cv-imv-conta-ico {
    width: 15px;
    height: 15px;
}

/* ================== FICHA (cartao, altura da capa) ================== */

/* A ficha ocupa toda a altura da linha (= altura da capa) e distribui o
   conteudo: selo/local/preco em cima, botao colado embaixo.

   Como a altura fica igual a da capa: as duas caixas dividem a MESMA
   linha do grid e a ficha usa height:100% com min-height:0. O min-height:0
   e o que impede o conteudo do cartao de empurrar a linha para baixo --
   sem ele o grid cresceria ate caber o texto e a capa ficaria menor. */
.cv-imv-ficha {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 32px 30px;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(6, 35, 69, .14);
    border-top: 3px solid #d2aa4c;
}

.cv-imv-h2 {
    font-size: 28px;
    line-height: 1.2;
    color: #062345;
    margin: 0 0 16px;
}

.cv-imv-h2--centro {
    text-align: center;
}

/* Na ficha o H2 e discreto: quem manda ali e o preco. */
.cv-imv-ficha .cv-imv-h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #46596e;
    font-family: inherit;
    margin-bottom: 14px;
}

/* ==========================================================================
   CAPA CLICAVEL (abre o zoom na foto 1)
   ========================================================================== */

/* O botao e so um involucro da imagem: nao pode ter caixa propria, senao
   ganharia fundo e borda do navegador por cima da foto. */
.cv-imv-foto-btn {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    /* cursor so quando o JS ligou o zoom (.tem-zoom): sem script o clique
       nao faz nada e a foto nao deve parecer clicavel */
    cursor: default;
}

.cv-imv-foto.tem-zoom .cv-imv-foto-btn {
    cursor: zoom-in;
}

/* Lupa: some por padrao e aparece no hover/foco. Sem JS nunca aparece. */
.cv-imv-foto-lupa {
    position: absolute;
    top: 14px;
    right: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(6, 35, 69, .78);
    color: #ffffff;
    opacity: 0;
    transition: opacity .25s var(--cv-ease);
}

.cv-imv-foto.tem-zoom .cv-imv-foto-lupa {
    display: flex;
}

.cv-imv-foto.tem-zoom .cv-imv-foto-btn:hover .cv-imv-foto-lupa,
.cv-imv-foto.tem-zoom .cv-imv-foto-btn:focus-visible .cv-imv-foto-lupa {
    opacity: 1;
}

.cv-imv-foto-lupa svg {
    width: 19px;
    height: 19px;
}

/* No toque nao ha hover: a lupa fica sempre visivel, senao nada indica que
   a foto abre. */
@media (hover: none) {

    .cv-imv-foto.tem-zoom .cv-imv-foto-lupa {
        opacity: 1;
    }

}

/* BADGE sobre a foto de capa ("Destaque", "Com escritura"...). Mora dentro
   da .cv-imv-foto, no canto oposto ao contador de fotos. Mesmo desenho do
   .cv-oi-selo da listagem: a etiqueta e a mesma coisa nas duas telas. */
.cv-imv-selo {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(6, 35, 69, .88);
    font: 700 12px/1 'Aeonik', Arial, Helvetica, sans-serif;
    color: #efe9d3;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Sem foto nao ha badge sobre imagem: o selo volta a ser uma pilha na ficha
   (ver o PHP). Desfaz o position:absolute da regra acima -- e por isso vem
   DEPOIS dela: media query nao pesa, e entre regras de mesmo peso vence a
   ultima. */
.cv-imv-selo--ficha {
    position: static;
    display: inline-block;
    margin-bottom: 14px;
}

.cv-imv-local {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    color: #46596e;
    font-size: 15px;
}

.cv-imv-local-ico {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #d2aa4c;
}

.cv-imv-preco {
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e7e1cc;
    color: #0b294d;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.cv-imv-destaque {
    margin: 0 0 22px;
    color: #46596e;
    font-size: 16px;
    line-height: 1.65;
}

/* O botao ocupa a largura do cartao (acao principal da pagina) e o
   margin-top:auto o cola na base, absorvendo a folga do cartao. */
.cv-imv-ficha .cv-cta-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

/* ======================== OUTROS IMOVEIS ========================= */

.cv-imv-outros {
    padding: 74px 0 84px;
    background: #efe9d3;
}

.cv-imv-outros-lista {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin: 34px 0 0;
    padding: 0;
}

.cv-imv-outro a {
    display: block;
    height: 100%;
    padding-bottom: 20px;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s var(--cv-ease), box-shadow .3s var(--cv-ease);
}

.cv-imv-outro a:hover,
.cv-imv-outro a:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(6, 35, 69, .16);
}

.cv-imv-outro-foto {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #e7e1cc;
}

.cv-imv-outro-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s var(--cv-ease);
}

.cv-imv-outro a:hover .cv-imv-outro-foto img,
.cv-imv-outro a:focus-visible .cv-imv-outro-foto img {
    transform: scale(1.05);
}

.cv-imv-outro-h3 {
    margin: 18px 20px 6px;
    color: #062345;
    font-size: 18px;
    line-height: 1.3;
}

.cv-imv-outro-local {
    margin: 0 20px 8px;
    color: #46596e;
    font-size: 14px;
}

.cv-imv-outro-preco {
    margin: 0 20px;
    color: #0b294d;
    font-size: 17px;
    font-weight: 700;
}

.cv-imv-voltar {
    margin: 40px 0 0;
    text-align: center;
}

.cv-imv-voltar a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #0b294d;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.cv-imv-voltar-ico {
    width: 18px;
    height: 18px;
    transition: transform .25s var(--cv-ease);
}

.cv-imv-voltar a:hover .cv-imv-voltar-ico,
.cv-imv-voltar a:focus-visible .cv-imv-voltar-ico {
    transform: translateX(-3px);
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 1199px) {

    .cv-imv-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 30px;
    }

    .cv-imv-ficha {
        padding: 26px 24px;
    }

    .cv-imv-preco {
        font-size: 29px;
    }

}

/* Tablet: a ficha desce para baixo da galeria e deixa de flutuar. */
@media (max-width: 991px) {

    .cv-imv-topo {
        padding: 40px 0 56px;
        background: linear-gradient(#efe9d3 0, #efe9d3 220px, #ffffff 220px);
    }

    .cv-imv-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Empilhado, o cartao volta a ter a altura do proprio conteudo. */
    .cv-imv-ficha {
        height: auto;
    }


    .cv-imv-outros-lista {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 767px) {

    .cv-imv-foto {
        aspect-ratio: 4 / 3;
    }

    .cv-imv-h2 {
        font-size: 24px;
    }

    .cv-imv-preco {
        font-size: 27px;
    }


    .cv-imv-outros {
        padding: 54px 0 60px;
    }

    .cv-imv-outros-lista {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}

@media (max-width: 479px) {

    .cv-imv-ficha {
        padding: 22px 18px;
    }


    .cv-imv-conta {
        right: 10px;
        bottom: 10px;
        padding: 6px 10px;
        font-size: 12px;
    }


}

/* ==========================================================================
   MIOLO DO IMOVEL (Imoveis/<slug>.php)

   Blocos de montagem do conteudo proprio de cada imovel. Cada miolo escolhe
   os blocos que fazem sentido para AQUELE imovel -- o sitio usa .cv-mio-num
   para hectares, o apartamento usa .cv-mio-comodos para os ambientes -- e
   nenhum miolo precisa usar todos.

   Tudo aqui usa a mesma paleta e a mesma curva de hover do resto do site.
   ========================================================================== */

.cv-mio {
    padding: 74px 0 80px;
    background: #ffffff;
}

/* Alternativa em creme, para o miolo criar ritmo entre suas secoes. */
.cv-mio--creme {
    background: #efe9d3;
}

/* Alternativa em azul institucional (texto claro). */
.cv-mio--azul {
    background: #062345;
    color: #d8e0ea;
}

.cv-mio-h2 {
    font-size: 30px;
    line-height: 1.2;
    color: #062345;
    margin: 0 0 14px;
}

.cv-mio--azul .cv-mio-h2 {
    color: #ffffff;
}

.cv-mio-h2--centro {
    text-align: center;
}

.cv-mio-intro {
    max-width: 760px;
    margin: 0 0 34px;
    color: #46596e;
    font-size: 17px;
    line-height: 1.7;
}

.cv-mio--azul .cv-mio-intro {
    color: #b9c6d6;
}

.cv-mio-intro--centro {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Texto corrido do miolo. */
.cv-mio-texto {
    max-width: 760px;
    color: #46596e;
    font-size: 17px;
    line-height: 1.75;
}

.cv-mio-texto p {
    margin: 0 0 16px;
}

.cv-mio-texto strong {
    color: #0b294d;
}

/* ---------------- NUMEROS (hectares, m2, dormitorios) ---------------- */

.cv-mio-nums {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
}

.cv-mio-num {
    padding: 26px 20px;
    border-radius: 4px;
    background: #ffffff;
    border-top: 3px solid #d2aa4c;
    text-align: center;
}

.cv-mio--creme .cv-mio-num {
    background: #ffffff;
}

.cv-mio--azul .cv-mio-num {
    background: rgba(255, 255, 255, .06);
    border-top-color: #d2aa4c;
}

.cv-mio-num-valor {
    display: block;
    color: #0b294d;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.cv-mio--azul .cv-mio-num-valor {
    color: #ffffff;
}

.cv-mio-num-rotulo {
    display: block;
    margin-top: 7px;
    color: #46596e;
    font-size: 14px;
    letter-spacing: .03em;
}

.cv-mio--azul .cv-mio-num-rotulo {
    color: #b9c6d6;
}

/* ------------------- COMODOS / ITENS COM ICONE ------------------- */

.cv-mio-comodos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
}

.cv-mio-comodo {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 20px;
    border-radius: 4px;
    background: #efe9d3;
}

.cv-mio--creme .cv-mio-comodo {
    background: #ffffff;
}

.cv-mio--azul .cv-mio-comodo {
    background: rgba(255, 255, 255, .06);
}

.cv-mio-comodo-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: #b8922f;
}

.cv-mio-comodo-h3 {
    margin: 0 0 4px;
    color: #062345;
    font-size: 17px;
    line-height: 1.3;
}

.cv-mio--azul .cv-mio-comodo-h3 {
    color: #ffffff;
}

.cv-mio-comodo p {
    margin: 0;
    color: #46596e;
    font-size: 15px;
    line-height: 1.55;
}

.cv-mio--azul .cv-mio-comodo p {
    color: #b9c6d6;
}

/* ------------------------- DESTAQUE / CITACAO ------------------------- */

.cv-mio-frase {
    max-width: 860px;
    margin: 0 auto;
    padding: 30px 34px;
    border-left: 3px solid #d2aa4c;
    background: #efe9d3;
    color: #0b294d;
    font-size: 20px;
    line-height: 1.6;
}

.cv-mio--creme .cv-mio-frase {
    background: #ffffff;
}

.cv-mio--azul .cv-mio-frase {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}

/* --------------------------- LISTA SIMPLES --------------------------- */

.cv-mio-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 40px;
}

.cv-mio-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 0;
    break-inside: avoid;
    color: #46596e;
    font-size: 16px;
    line-height: 1.55;
}

.cv-mio--azul .cv-mio-item {
    color: #b9c6d6;
}

.cv-mio-item-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 3px;
    color: #b8922f;
}

/* --------------------- TEXTO + FOTO LADO A LADO --------------------- */

.cv-mio-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 46px;
    align-items: center;
}

.cv-mio-duo-foto {
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 4 / 3;
    background: #e7e1cc;
}

.cv-mio-duo-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================ RESPONSIVO ============================ */

@media (max-width: 991px) {

    .cv-mio {
        padding: 54px 0 60px;
    }

    .cv-mio-nums {
        grid-template-columns: repeat(2, 1fr);
    }

    .cv-mio-comodos {
        grid-template-columns: repeat(2, 1fr);
    }

    .cv-mio-duo {
        grid-template-columns: 1fr;
        gap: 30px;
    }

}

@media (max-width: 767px) {

    .cv-mio-h2 {
        font-size: 25px;
    }

    .cv-mio-intro,
    .cv-mio-texto {
        font-size: 16px;
    }

    .cv-mio-comodos {
        grid-template-columns: 1fr;
    }

    .cv-mio-lista {
        columns: 1;
    }

    .cv-mio-frase {
        padding: 24px 22px;
        font-size: 18px;
    }

}

@media (max-width: 479px) {

    .cv-mio-nums {
        grid-template-columns: 1fr;
    }

    .cv-mio-num-valor {
        font-size: 26px;
    }

}

/* ==========================================================================
   TODAS AS FOTOS (.cv-imv-fotos) - carrossel de largura total + zoom

   O carrossel sai do container de 1170px e ocupa a largura da janela: as
   fotos ficam grandes e a faixa passa "por dentro" da tela. As setas ficam
   SOBRE a faixa (nao fora, como no carrossel da home), porque aqui nao ha
   margem lateral sobrando.
   ========================================================================== */

.cv-imv-fotos {
    /* Topo curto de proposito: a secao vem logo depois da ficha do imovel e
       ja abre com o proprio titulo -- 70px deixavam um vazio no meio da
       pagina. O rodape continua folgado, para separar do miolo seguinte. */
    padding: 28px 0 80px;
    background: #ffffff;
    /* o atalho da capa rola ate aqui: folga para o titulo nao colar no topo */
    scroll-margin-top: 20px;
    overflow: hidden;
}

.cv-imv-slider {
    position: relative;
    margin-top: 34px;
}

/* SEM scroll-snap e SEM scroll-behavior:smooth de proposito: os dois
   brigariam com a esteira continua do JS (que escreve scrollLeft a cada
   quadro). O salto das setas/pontos usa scrollTo({behavior:'smooth'}),
   que continua funcionando. */
.cv-imv-faixa {
    display: flex;
    gap: 16px;
    padding: 0 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* a barra some: quem navega usa seta, ponto ou o proprio dedo */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cv-imv-faixa::-webkit-scrollbar {
    display: none;
}

.cv-imv-faixa:focus-visible {
    outline: 2px solid #d2aa4c;
    outline-offset: 3px;
}

/* 3 fotos por tela no desktop. flex-basis com calc desconta o gap. */
.cv-imv-slide {
    flex: 0 0 calc((100% - 32px) / 3);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #0b294d;
    cursor: zoom-in;
    aspect-ratio: 3 / 2;
    transition: transform .3s var(--cv-ease), box-shadow .3s var(--cv-ease);
}

.cv-imv-slide img {
    width: 100%;
    height: 100%;
    /* contain: material em retrato e em 16:9 aparece inteiro, sem corte */
    object-fit: contain;
    display: block;
}

.cv-imv-slide:hover,
.cv-imv-slide:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(6, 35, 69, .22);
}

/* --------------------------- SETAS --------------------------- */

.cv-imv-slider .cv-slider-seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(6, 35, 69, .82);
    backdrop-filter: blur(4px);
    color: #ffffff;
    cursor: pointer;
    transition: background-color .25s var(--cv-ease), transform .25s var(--cv-ease);
}

.cv-imv-slider .cv-slider-seta svg {
    width: 26px;
    height: 26px;
}

.cv-imv-slider .cv-slider-seta:hover,
.cv-imv-slider .cv-slider-seta:focus-visible {
    background: #0b294d;
    transform: scale(1.06);
}

.cv-imv-slider .cv-slider-seta--prev {
    left: 20px;
}

.cv-imv-slider .cv-slider-seta--next {
    right: 20px;
}

/* --------------------------- PONTOS --------------------------- */

.cv-imv-slider .cv-slider-pontos {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
}

.cv-imv-slider .cv-slider-ponto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfc7ab;
    cursor: pointer;
    transition: background-color .25s var(--cv-ease), transform .25s var(--cv-ease);
}

.cv-imv-slider .cv-slider-ponto:hover {
    background: #b8922f;
}

.cv-imv-slider .cv-slider-ponto.is-ativo {
    background: #d2aa4c;
    transform: scale(1.35);
}

/* ==========================================================================
   ZOOM (lightbox)
   ========================================================================== */

.cv-imv-zoom {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 90px;
    background: rgba(4, 20, 40, .94);
}

/* O [hidden] do HTML nao vence o display:flex acima -- por isso o !important
   (a mesma regra existe no css.css global, repetida aqui por seguranca). */
.cv-imv-zoom[hidden] {
    display: none !important;
}

.cv-imv-zoom-caixa {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.cv-imv-zoom-caixa img {
    max-width: 100%;
    /* desconta a legenda para a foto nunca estourar a altura da janela */
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
}

.cv-imv-zoom-conta {
    color: #b9c6d6;
    font-size: 14px;
    letter-spacing: .06em;
}

.cv-imv-zoom-fechar,
.cv-imv-zoom-seta {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    cursor: pointer;
    transition: background-color .25s var(--cv-ease), transform .25s var(--cv-ease);
}

.cv-imv-zoom-fechar:hover,
.cv-imv-zoom-fechar:focus-visible,
.cv-imv-zoom-seta:hover,
.cv-imv-zoom-seta:focus-visible {
    background: rgba(255, 255, 255, .24);
    transform: scale(1.08);
}

.cv-imv-zoom-fechar {
    top: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
}

.cv-imv-zoom-fechar svg {
    width: 24px;
    height: 24px;
}

.cv-imv-zoom-seta {
    top: 50%;
    width: 56px;
    height: 56px;
    margin-top: -28px;
}

.cv-imv-zoom-seta svg {
    width: 28px;
    height: 28px;
}

.cv-imv-zoom-seta--prev {
    left: 22px;
}

.cv-imv-zoom-seta--next {
    right: 22px;
}

/* ============================ RESPONSIVO ============================ */

@media (max-width: 1199px) {

    /* 2 fotos por tela. */
    .cv-imv-slide {
        flex-basis: calc((100% - 16px) / 2);
    }

}

@media (max-width: 991px) {

    .cv-imv-fotos {
        padding: 22px 0 60px;
    }

    .cv-imv-slider .cv-slider-seta {
        width: 44px;
        height: 44px;
        margin-top: -22px;
    }

    .cv-imv-slider .cv-slider-seta svg {
        width: 22px;
        height: 22px;
    }

    .cv-imv-zoom {
        padding: 30px 20px;
    }

    .cv-imv-zoom-seta {
        width: 46px;
        height: 46px;
        margin-top: -23px;
    }

    .cv-imv-zoom-seta--prev {
        left: 10px;
    }

    .cv-imv-zoom-seta--next {
        right: 10px;
    }

}

@media (max-width: 767px) {

    /* 1 foto por tela, ocupando quase toda a largura. */
    .cv-imv-slide {
        flex-basis: calc(100% - 40px);
    }

    .cv-imv-faixa {
        gap: 12px;
        padding: 0 20px;
    }

    /* No toque a pessoa arrasta: as setas so ocupariam espaco sobre a foto. */
    .cv-imv-slider .cv-slider-seta {
        display: none;
    }

    .cv-imv-zoom-caixa img {
        max-height: calc(100vh - 150px);
    }

}

/* ==========================================================================
   MIOLO #6 - Sitio de Bom Retiro

   Desenho proprio das 4 secoes do Oportunidades_ImovelDetalhes_6.php. Fica
   AQUI (e nao num CSS de imovel) porque o site nao carrega CSS por imovel:
   a pagina de detalhe e uma so. Se outro imovel quiser este tratamento,
   basta reusar as classes cv-s6-*.
   ========================================================================== */

/* Etiqueta de secao: caixa-alta com filete dourado a esquerda. */
.cv-s6-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #d2aa4c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.cv-s6-etiqueta::before {
    content: "";
    width: 26px;
    height: 2px;
    background: #d2aa4c;
}

/* Sobre fundo claro a etiqueta escurece para manter contraste. */
.cv-s6-etiqueta--escura {
    color: #b8922f;
}

.cv-s6-etiqueta--escura::before {
    background: #b8922f;
}

/* ------------------------- ABERTURA (numeros) ------------------------- */

.cv-s6-abre {
    position: relative;
    overflow: hidden;
    background: #062345;
    color: #d8e0ea;
}

/* "36,2" gigante como marca d'agua. Decorativo: o valor legivel esta na
   lista de numeros logo abaixo. */
.cv-s6-marca {
    position: absolute;
    right: -.06em;
    bottom: -.28em;
    color: #ffffff;
    font-size: 260px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    opacity: .05;
    pointer-events: none;
    user-select: none;
}

/* Variante em PALAVRA ("plano", "vale"): usada nos imoveis que nao tem
   metragem confirmada, onde um numero seria invencao. Corpo menor que o
   da variante numerica, porque a palavra e mais larga que 3 digitos. */
.cv-s6-marca--txt {
    font-size: 170px;
    letter-spacing: -.02em;
    text-transform: lowercase;
}

.cv-s6-abre-inner {
    position: relative;
    z-index: 1;
}

.cv-s6-h2 {
    color: #ffffff;
}

.cv-s6-abre-texto {
    max-width: 720px;
}

.cv-s6-abre-linha {
    margin: 0 0 42px;
    color: #b9c6d6;
    font-size: 17px;
    line-height: 1.7;
}

/* Os numeros em linha, separados por filete -- nao em cartoes. */
.cv-s6-nums {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.cv-s6-num {
    padding: 26px 24px 0 0;
    border-right: 1px solid rgba(255, 255, 255, .16);
}

.cv-s6-num:last-child {
    border-right: 0;
}

.cv-s6-num + .cv-s6-num {
    padding-left: 24px;
}

.cv-s6-num-valor {
    display: block;
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}

/* A unidade ("ha") menor e dourada, dentro do numero. */
.cv-s6-num-valor i {
    font-style: normal;
    font-size: 18px;
    font-weight: 600;
    color: #d2aa4c;
}

.cv-s6-num-rotulo {
    display: block;
    margin-top: 9px;
    color: #b9c6d6;
    font-size: 14px;
    line-height: 1.4;
}

/* ------------------------------ AGUA ------------------------------ */

.cv-s6-agua {
    background: #efe9d3;
}

.cv-s6-agua-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 54px;
    align-items: center;
}

.cv-s6-aguas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

/* Cartoes brancos com filete dourado a esquerda. */
.cv-s6-agua-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 20px 22px;
    border-radius: 6px;
    border-left: 3px solid #d2aa4c;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(6, 35, 69, .07);
}

.cv-s6-agua-ico {
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    color: #b8922f;
}

.cv-s6-agua-h3 {
    margin: 0 0 3px;
    color: #062345;
    font-size: 18px;
    line-height: 1.25;
}

.cv-s6-agua-item p {
    margin: 0;
    color: #46596e;
    font-size: 14px;
    line-height: 1.55;
}

/* ---------------------------- ESTRUTURA ---------------------------- */

.cv-s6-estrutura {
    background: #ffffff;
}

/* align-items padrao (stretch): a coluna dos apoios acompanha a altura do
   cartao da casa, e as 3 linhas da grade se ajustam para fechar junto. */
.cv-s6-est-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 26px;
    margin-top: 34px;
}

/* A casa e o cartao PRINCIPAL: azul, maior, com lista propria. */
.cv-s6-casa {
    padding: 32px 30px;
    border-radius: 6px;
    background: #062345;
    color: #b9c6d6;
    box-shadow: 0 16px 36px rgba(6, 35, 69, .18);
}

.cv-s6-casa-ico {
    width: 34px;
    height: 34px;
    color: #d2aa4c;
}

.cv-s6-casa-h3 {
    margin: 16px 0 8px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.25;
}

.cv-s6-casa-txt {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
}

.cv-s6-casa-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.cv-s6-casa-lista li {
    padding: 10px 0 10px 18px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: 14px;
    line-height: 1.45;
}

.cv-s6-casa-lista li:last-child {
    border-bottom: 0;
}

/* Marcador dourado desenhado em CSS (nao gasta icone do subset). */
.cv-s6-casa-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d2aa4c;
}

/* 2 colunas x 3 linhas (6 itens, numero PAR). As linhas dividem em partes
   iguais a altura disponivel, que e a do cartao da casa (align-items do
   .cv-s6-est-grid vale stretch) -- os dois lados terminam juntos. */
.cv-s6-apoios {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    height: 100%;
}

.cv-s6-apoio {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 20px;
    border-radius: 6px;
    background: #efe9d3;
    transition: transform .25s var(--cv-ease);
}

.cv-s6-apoio:hover {
    transform: translateY(-3px);
}

.cv-s6-apoio-ico {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin-top: 2px;
    color: #b8922f;
}

.cv-s6-apoio-h3 {
    margin: 0 0 4px;
    color: #062345;
    font-size: 16px;
    line-height: 1.3;
}

.cv-s6-apoio p {
    margin: 0;
    color: #46596e;
    font-size: 14px;
    line-height: 1.55;
}

/* ---------------------------- PRODUCAO ---------------------------- */

.cv-s6-prod {
    background: #0b294d;
    color: #b9c6d6;
}

.cv-s6-prod-topo {
    max-width: 760px;
    margin-bottom: 36px;
}

.cv-s6-prod-intro {
    margin: 0;
    color: #b9c6d6;
    font-size: 17px;
    line-height: 1.7;
}

/* Ficha tecnica: rotulo a esquerda, valor a direita, uma linha por dado. */
.cv-s6-ficha {
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.cv-s6-linha {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.cv-s6-linha dt {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cv-s6-linha-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: #d2aa4c;
}

.cv-s6-linha dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

/* ============================ RESPONSIVO ============================ */

@media (max-width: 1199px) {

    .cv-s6-marca {
        font-size: 200px;
    }

    .cv-s6-marca--txt {
        font-size: 130px;
    }

    .cv-s6-agua-grid {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 34px;
    }

    .cv-s6-est-grid {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .cv-s6-num-valor {
        font-size: 34px;
    }

}

@media (max-width: 991px) {

    .cv-s6-marca {
        font-size: 150px;
    }

    .cv-s6-marca--txt {
        font-size: 100px;
    }

    .cv-s6-nums {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Em 2 colunas o filete da direita sobra na 2a coluna. */
    .cv-s6-num:nth-child(2n) {
        border-right: 0;
    }

    .cv-s6-num:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, .16);
        margin-top: 4px;
    }

    .cv-s6-num + .cv-s6-num {
        padding-left: 0;
    }

    .cv-s6-num:nth-child(2n) {
        padding-left: 24px;
    }

    .cv-s6-agua-grid,
    .cv-s6-est-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cv-s6-linha {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 18px;
    }

}

@media (max-width: 767px) {

    .cv-s6-marca {
        font-size: 110px;
        bottom: -.2em;
    }

    .cv-s6-marca--txt {
        font-size: 74px;
    }

    .cv-s6-abre-linha {
        margin-bottom: 30px;
        font-size: 16px;
    }

    .cv-s6-apoios {
        grid-template-columns: 1fr;
    }

    .cv-s6-casa {
        padding: 26px 22px;
    }

    /* A ficha empilha: rotulo em cima, valor embaixo. */
    .cv-s6-linha {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .cv-s6-linha dd {
        font-size: 15px;
    }

    .cv-s6-prod-intro {
        font-size: 16px;
    }

}

@media (max-width: 479px) {

    .cv-s6-nums {
        grid-template-columns: 1fr;
    }

    .cv-s6-num,
    .cv-s6-num:nth-child(2n) {
        padding: 20px 0 0;
        border-right: 0;
    }

    .cv-s6-num + .cv-s6-num {
        border-top: 1px solid rgba(255, 255, 255, .16);
        margin-top: 0;
    }

    .cv-s6-num-valor {
        font-size: 30px;
    }

    .cv-s6-agua-item {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .cv-s6-agua-ico {
        grid-row: auto;
    }

}

/* ==========================================================================
   TITULO "OUTROS IMOVEIS" (.cv-imv-outros-tit)

   Estilo diferenciado do H2 padrao: etiqueta em caixa-alta acompanhada de
   dois filetes dourados, um de cada lado do texto -- marca a virada da
   pagina (do imovel para a navegacao) sem competir com os H2 do miolo.
   ========================================================================== */

.cv-imv-outros-tit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0;
    color: #062345;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    /* fonte do corpo, nao a Afterglow dos titulos: e um rotulo de secao. */
    font-family: inherit;
}

/* Os dois filetes crescem ate o limite do container. */
.cv-imv-outros-tit::before,
.cv-imv-outros-tit::after {
    content: "";
    flex: 1 1 auto;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, rgba(210, 170, 76, 0), #d2aa4c);
}

.cv-imv-outros-tit::after {
    background: linear-gradient(90deg, #d2aa4c, rgba(210, 170, 76, 0));
}

@media (max-width: 767px) {

    .cv-imv-outros-tit {
        gap: 12px;
        font-size: 13px;
        letter-spacing: .16em;
    }

    .cv-imv-outros-tit::before,
    .cv-imv-outros-tit::after {
        max-width: 60px;
    }

}

/* ==========================================================================
   MODAL "TENHO INTERESSE"

   O formulario e o da /contato/ (.cv-fc-*, do Contato.css, carregado antes
   desta pagina). Aqui so mora a CAIXA que o envolve.

   ARMADILHA: os tokens --fc-* sao declarados em .cv-fc, que nao existe
   nesta pagina -- sem redeclara-los, os campos ficariam sem cor, sem raio e
   sem sombra. Por isso a caixa da modal os repete.
   ========================================================================== */

.cv-imv-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(6, 35, 69, .72);
    overflow-y: auto;
    /* -webkit- junto: sem ele o desfoque nao acontece no Safari. */
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

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

.cv-imv-modal-caixa {
    --fc-azul: #062345;
    --fc-azul-claro: #0b294d;
    --fc-ouro: #d2aa4c;
    --fc-creme: #efe9d3;
    --fc-linha: #e3ddc8;
    --fc-linha-forte: #cfc7ab;
    --fc-texto: #37475c;
    --fc-suave: #7d8899;
    --fc-erro: #b00020;
    --fc-raio: 16px;
    --fc-raio-g: 22px;
    --fc-sombra: 0 24px 60px rgba(6, 35, 69, .09);

    position: relative;
    width: 100%;
    max-width: 620px;
    margin: auto;
    padding: 38px 40px 40px;
    border-radius: var(--fc-raio-g);
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(6, 35, 69, .32);
}

.cv-imv-modal-fechar {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--fc-suave);
    cursor: pointer;
    transition: background-color .25s var(--cv-ease), color .25s var(--cv-ease);
}

.cv-imv-modal-fechar:hover,
.cv-imv-modal-fechar:focus-visible {
    background: #f2f0e8;
    color: var(--fc-azul);
}

.cv-imv-modal-fechar svg {
    width: 20px;
    height: 20px;
}

.cv-imv-modal-head {
    margin-bottom: 26px;
    /* espaco do botao de fechar, para o titulo longo nao correr por baixo */
    padding-right: 44px;
}

.cv-imv-modal-tit {
    margin: 4px 0 6px;
    font: 400 27px/1.25 'Afterglow', Georgia, serif;
    color: var(--fc-azul);
}

.cv-imv-modal-lead {
    font-size: 15px;
    color: var(--fc-suave);
}

/* O veu do Contato.css so aparece com .cv-fc-card.esta-enviando, que nao
   existe aqui: a modal liga a propria classe (ver o JS). */
.cv-imv-modal .cv-fc-veu.esta-visivel {
    opacity: 1;
}

@media (max-width: 767px) {

    .cv-imv-modal {
        padding: 20px 16px;
    }

    .cv-imv-modal-caixa {
        padding: 32px 22px 26px;
    }

    .cv-imv-modal-tit {
        font-size: 23px;
    }

}

/* ==========================================================================
   "ou chame no WhatsApp" - alternativa discreta sob o botao principal
   ========================================================================== */

.cv-imv-zap {
    display: inline-block;
    margin-top: 14px;
    font-size: 15px;
    color: #46596e;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .25s var(--cv-ease);
}

.cv-imv-zap:hover,
.cv-imv-zap:focus-visible {
    color: #b8922f;
}