/* ===========================================================================
   DETALHE DO IMÓVEL (/vendas/{código} e /locacao/{código}) IGUAL AO SITE GLOBAL:
   fundo #f2f6f7, galeria em grade (1 foto grande + 4), título com ícones em
   imagem, descrição/características, coluna lateral com valores, "Saiba Mais" e
   "Compartilhar", e os imóveis semelhantes em card horizontal.
   =========================================================================== */
body { background: #f2f6f7; }

/* --- Galeria -------------------------------------------------------------------- */
.midia { padding: 93px 15px 0; }

.midia__grade {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-width: 1154px;
    margin-inline: auto;
    border-radius: 50px;
    overflow: hidden;
}

.midia__grade--unica { grid-template-columns: 1fr; }

.midia__principal,
.midia__mini {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: #e2e8ea;
    cursor: zoom-in;
}

.midia__principal { aspect-ratio: 1 / 1; }
.midia__grade--unica .midia__principal { aspect-ratio: 16 / 9; }

.midia__quatro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
}

.midia__principal img,
.midia__mini img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.midia__principal:hover img,
.midia__mini:hover img { transform: scale(1.05); }

.midia__acoes {
    position: absolute;
    right: 27px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.midia__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 54px;
    padding: 0 24px;
    border: 0;
    border-radius: 30px;
    background: var(--cor-site-1);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--cor-branco);
    cursor: pointer;
    transition: background .3s;
}

.midia__botao svg { width: 16px; height: 16px; fill: currentColor; }
.midia__botao--redondo { width: 54px; padding: 0; }
.midia__botao:hover { background: var(--cor-site-5); }

.galeria--sem-foto { position: relative; height: 420px; max-width: 1154px; margin-inline: auto; border-radius: 50px; overflow: hidden; }

/* --- Colunas ---------------------------------------------------------------------- */
.propriedade__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 338px;
    gap: 42px;
    max-width: 1154px;
    margin: 90px auto 0;
    padding-inline: 15px;
    align-items: start;
}

.propriedade__codigo { margin: 0; font-size: 14px; font-weight: 700; color: var(--cor-site-5); }

.propriedade__titulo { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--cor-site-5); }

.propriedade__local {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--cor-site-5);
}

.propriedade__local svg { width: 17px; height: 17px; fill: var(--cor-site-1); }

.propriedade__frase-oferta { margin: 10px 0 0; font-style: italic; color: var(--cor-site-4); }

/* Ícones em imagem (nome em cima, valor pequeno embaixo) */
.propriedade__icones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 20px;
    margin: 50px 0;
    padding: 0;
    list-style: none;
}

.propriedade__icone { display: flex; align-items: center; gap: 12px; }
.propriedade__icone img { width: 30px; height: 30px; flex: none; object-fit: contain; }
.propriedade__icone h6 { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--cor-site-5); }
.propriedade__icone small { display: block; font-size: 12px; color: var(--cor-site-4); }

.propriedade__titulo-secao {
    margin: 0 0 30px;
    padding-left: 12px;
    border-left: 2px solid var(--cor-site-1);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cor-site-5);
}

.propriedade__bloco { margin-bottom: 55px; }

.propriedade__descricao { font-size: 14px; line-height: 1.8; color: var(--cor-site-4); }

.propriedade__detalhes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 20px; margin: 0; }
.propriedade__detalhes div { min-width: 0; }
.propriedade__detalhes dt { font-size: 14px; font-weight: 600; color: var(--cor-site-5); }
.propriedade__detalhes dd { margin: 0; font-size: 12px; color: var(--cor-site-4); overflow-wrap: anywhere; }

.propriedade__lista-carac {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.propriedade__lista-carac li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--cor-site-5); }
.propriedade__lista-carac-icone { width: 20px; height: 20px; flex: none; fill: #28a745; }

.propriedade__midia iframe,
.propriedade__midia video,
.propriedade__mapa iframe { display: block; width: 100%; border: 0; border-radius: 20px; }
.propriedade__midia iframe, .propriedade__midia video { aspect-ratio: 16 / 9; height: auto; }
.propriedade__midias { display: grid; gap: 20px; }

.propriedade__nota { margin: 0 0 40px; font-size: 14px; color: var(--cor-site-4); }
.propriedade__nota a { font-weight: 700; color: var(--cor-site-5); text-decoration: underline; }

/* --- Coluna lateral --------------------------------------------------------------- */
.propriedade__cta { display: flex; flex-direction: column; gap: 40px; }

.propriedade__caixa {
    padding: 30px 28px;
    border: 2px solid #e6eef5;
    border-radius: 40px;
    background: var(--cor-branco);
}

.propriedade__caixa-titulo {
    margin: 0 0 22px;
    padding-left: 12px;
    border-left: 2px solid var(--cor-site-1);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-site-5);
}

.propriedade__valor-total { display: block; font-weight: 700; }

.propriedade__linhas { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.propriedade__linha { display: flex; align-items: center; gap: 12px; }
.propriedade__linha img { width: 30px; height: 30px; flex: none; object-fit: contain; }
.propriedade__linha h6 { margin: 0; font-size: 15px; font-weight: 500; color: var(--cor-site-5); }
.propriedade__linha small { display: block; font-size: 12px; color: var(--cor-site-4); }
.propriedade__linha--sem-icone { padding-left: 42px; }

.propriedade__form { display: grid; gap: 16px; }

.propriedade__form input {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 2px solid #dedede;
    border-radius: 15px;
    background: var(--cor-branco);
    font: inherit;
    font-size: 14px;
    color: var(--cor-site-5);
}

.propriedade__form input:focus { outline: none; border-color: var(--cor-site-1); }
.propriedade__form input::placeholder { color: var(--cor-site-4); }

.propriedade__enviar {
    min-height: 50px;
    border: 0;
    border-radius: 30px;
    background: var(--cor-site-1);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-branco);
    cursor: pointer;
    transition: background .3s;
}

.propriedade__enviar:hover { background: var(--cor-site-4); }

.propriedade__crm { display: grid; gap: 10px; margin-top: 16px; }
.propriedade__whats { display: block; margin-top: 12px; padding: 13px; border-radius: 30px; background: #25D366; font-size: 14px; font-weight: 700; text-align: center; color: var(--cor-branco); }
.propriedade__whats svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: currentColor; }

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

.propriedade__compartilhamento a,
.propriedade__compartilhamento button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: #f2f6f7;
    color: var(--cor-site-4);
    cursor: pointer;
    transition: background .3s, color .3s;
}

.propriedade__compartilhamento svg { width: 16px; height: 16px; fill: currentColor; }
.propriedade__compartilhamento a:hover,
.propriedade__compartilhamento button:hover { background: var(--cor-site-1); color: var(--cor-site-5); }

/* --- Semelhantes ---------------------------------------------------------------------- */
.propriedade__relacionados { max-width: 960px; margin: 0 auto; padding: 60px 15px 90px; }

.propriedade__relacionados-cabecalho { margin-bottom: 40px; text-align: center; }

.propriedade__relacionados-selo {
    display: inline-block;
    margin-bottom: 12px;
    padding: 2px 20px;
    border-radius: 30px;
    background: var(--cor-site-1);
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-branco);
}

.propriedade__relacionados-titulo { margin: 0; font-size: 26px; font-weight: 700; color: var(--cor-site-5); }
.propriedade__relacionados-grade { display: grid; gap: 30px; }

/* --- Responsivo --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .propriedade__grade { grid-template-columns: 1fr; margin-top: 60px; }
    .propriedade__icones,
    .propriedade__detalhes,
    .propriedade__lista-carac { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .midia { padding-top: 40px; }
    .midia__grade { grid-template-columns: 1fr; border-radius: 30px; }
    .midia__quatro { display: none; }
    .midia__principal { aspect-ratio: 4 / 3; }
    .midia__acoes { right: 14px; bottom: 12px; }
    .midia__botao { height: 46px; padding: 0 18px; }
    .midia__botao--redondo { width: 46px; padding: 0; }
    .propriedade__titulo { font-size: 20px; }
}

@media (max-width: 480px) {
    .propriedade__icones,
    .propriedade__detalhes,
    .propriedade__lista-carac { grid-template-columns: 1fr; }
}

/* --- Lightbox: clicar em qualquer foto da galeria amplia em tela cheia,
   com setas pra ver as outras (ver public/js/imovel-midia.js). Criada pelo
   próprio JS na primeira vez que abre — não existe pronta no HTML. --- */
.midia-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 16, .95);
}
.midia-lightbox[hidden] { display: none; }

.midia-lightbox__palco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    max-width: min(92vw, 1400px);
    max-height: 92vh;
}

.midia-lightbox__img {
    max-width: 100%;
    max-height: 66vh;
    object-fit: contain;
}

.midia-lightbox__miniaturas {
    display: flex;
    gap: .5rem;
    max-width: 100%;
    padding: .25rem;
    overflow-x: auto;
    overscroll-behavior: contain;
}

.midia-lightbox__miniatura {
    flex: none;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--raio-sm);
    overflow: hidden;
    cursor: pointer;
    opacity: .55;
    transition: opacity var(--transicao), border-color var(--transicao);
}

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

.midia-lightbox__miniatura:hover { opacity: .85; }

.midia-lightbox__miniatura--ativa {
    border-color: var(--cor-primaria);
    opacity: 1;
}

@media (max-width: 640px) {
    .midia-lightbox__img { max-height: 56vh; }
    .midia-lightbox__miniatura { width: 48px; height: 48px; }
}

.midia-lightbox__fechar,
.midia-lightbox__seta {
    position: absolute;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--cor-branco);
    cursor: pointer;
    transition: background var(--transicao);
}
.midia-lightbox__fechar:hover,
.midia-lightbox__seta:hover { background: var(--cor-primaria); color: var(--cor-primaria-tinta); }

.midia-lightbox__fechar {
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
}

.midia-lightbox__seta {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
}
.midia-lightbox__seta svg { width: 22px; height: 22px; }
.midia-lightbox__seta--anterior { left: 18px; }
.midia-lightbox__seta--proxima { right: 18px; }

.midia-lightbox__contador {
    color: rgba(255, 255, 255, .8);
    font-family: var(--fonte);
    font-size: var(--fs-sm);
}

@media (max-width: 640px) {
    .midia-lightbox__seta { width: 40px; height: 40px; }
    .midia-lightbox__seta--anterior { left: 6px; }
    .midia-lightbox__seta--proxima { right: 6px; }
}

/* Ícone Phosphor cinza, usado quando não há PNG próprio para o item (public/img/detalhes/). */
.propriedade__icone-svg { width: 30px; height: 30px; flex: none; fill: #b5bcbf; }

.propriedade__endereco { display: flex; align-items: flex-start; gap: 8px; margin: -10px 0 18px; font-size: 14px; line-height: 1.5; color: var(--cor-site-5); }
.propriedade__endereco svg { width: 17px; height: 17px; flex: none; margin-top: 2px; fill: var(--cor-site-1); }