/* =========================================================================
   ESSENZA v2 — listagem e página do imóvel.

   Arquivo separado do `v2.css` de propósito: estas regras só servem a duas
   telas, e a home (que é a página mais visitada e a que precisa abrir mais
   rápido) não tem por que baixá-las. Entra por `@push('styles')`.

   Depende dos tokens declarados em `v2.css` (`--e-ink`, `--e-paper`, ...) e
   segue o mesmo prefixo `e-` e o mesmo canto reto.
   ========================================================================= */

/* =========================================================================
   CABEÇALHO DAS DUAS TELAS

   Quem dá o fundo sólido é `@section('topo', 'is-solido')` na própria view,
   porque o `<header>` mora no layout e NÃO é descendente do conteúdo: uma
   regra `.e-interna .e-topo` nunca casaria.

   Também não há `padding-top` aqui: o cabeçalho é `sticky`, ou seja, ocupa
   lugar no fluxo. Só a home o sobrepõe, com margem negativa própria.
   ========================================================================= */
/* `.e-migalha` mora agora em `v2.css`: é cromo de toda página interna. */

/* =========================================================================
   LISTAGEM — duas colunas: filtro fixo à esquerda, resultados à direita
   ========================================================================= */
.e-catalogo {
    display: grid;
    grid-template-columns: 296px minmax(0, 1fr);
    gap: clamp(26px, 3vw, 52px);
    align-items: start;
    padding-block: 28px clamp(64px, 8vw, 110px);
}

/* ---- Coluna do filtro ----

   NENHUMA ROLAGEM AQUI DENTRO, e isso é a regra mais importante desta
   coluna.

   A primeira versão era `sticky` com `max-height` e `overflow-y: auto`, e a
   lista de bairros tinha uma segunda rolagem dentro da primeira. Duas barras
   de rolagem aninhadas, encostadas uma na outra, do lado de uma página que
   também rola: três superfícies de rolagem no mesmo lugar. Ninguém sabe o
   que vai se mexer quando girar a roda, e o resultado fica feio antes de
   ficar confuso.

   Agora a coluna acompanha a página, como qualquer outro conteúdo. O que
   antes exigia rolagem interna virou "ver os outros bairros" e "mais
   filtros", que abrem no lugar. */
.e-filtros {
    position: static;
    overflow: visible;
    max-height: none;
}

.e-filtros__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--e-ink);
    margin-bottom: 4px;
}
.e-filtros__titulo {
    font-family: var(--e-serif);
    font-size: 21px;
    font-weight: 400;
    margin: 0;
}
.e-filtros__limpar {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--e-gold);
    border-bottom: 1px solid transparent;
}
.e-filtros__limpar:hover { border-bottom-color: var(--e-gold); }

/* O "x" do filtro só existe na gaveta do celular. `html:not(.no-js)` porque
   sem JavaScript a gaveta nunca abre nem fecha: ali o filtro é uma coluna
   comum, e um botão de fechar seria um clique que não faz nada. */
.e-filtros__fechar {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--e-paper-edge);
    color: var(--e-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* `border: 0` ANTES do `border-bottom`, e `min-width: 0`.

   Os grupos de bairro e preço são `<fieldset>`, e o navegador desenha neles
   uma moldura própria em volta dos quatro lados. Declarar só o
   `border-bottom` deixava as outras três de pé: apareciam duas caixas
   cinzentas no meio da coluna, que não existiam em nenhum outro grupo.

   `min-width: 0` porque `<fieldset>` tem uma largura mínima intrínseca que
   ignora o `1fr` da grade e estoura a coluna em tela estreita. */
.e-grupo {
    border: 0;
    border-bottom: 1px solid var(--e-paper-edge);
    min-width: 0;
    margin: 0;
    padding: 20px 0;
}
.e-grupo:last-child { border-bottom: 0; }

.e-grupo > legend,
.e-grupo__rotulo {
    display: block;
    padding: 0;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--e-text-soft);
}

/* Campos de formulário. Contraste conferido contra o off-white: a borda é
   escura o bastante para o campo ser visível, e o texto do placeholder não
   é cinza-fantasma. */
/* Campo com FILETE embaixo, não caixa com moldura.

   A moldura de quatro lados desenhava um retângulo cinza em volta de cada
   controle; eram seis deles empilhados numa coluna cujo resto é só linha
   fina e tipografia. O filete faz o mesmo trabalho (diz onde se escreve) e
   pertence à mesma família de desenho.

   O filete é escuro o bastante para o campo ser visível sobre o off-white, e
   o foco troca a cor e engrossa: quem usa teclado precisa enxergar onde
   está. */
.e-campo {
    width: 100%;
    padding: 9px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #B9B4A9;
    border-radius: 0;
    font-family: var(--e-sans);
    font-size: 14.5px;
    font-weight: 300;
    color: var(--e-text);
    appearance: none;
    transition: border-color .25s var(--e-ease);
}
.e-campo::placeholder { color: #6E7483; }
.e-campo:hover { border-bottom-color: var(--e-text); }
.e-campo:focus {
    outline: none;
    border-bottom-width: 2px;
    border-bottom-color: var(--e-gold);
    padding-bottom: 8px;   /* compensa o filete mais grosso: nada pula */
}

select.e-campo {
    /* Seta própria: a nativa muda de desenho em cada sistema e destoa. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8' fill='none' stroke='%2358617A' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    padding-right: 22px;
    cursor: pointer;
}

/* Na coluna de ação da página do imóvel o fundo é branco e os campos são de
   preenchimento, não de filtro: ali a moldura ajuda a dizer "escreva aqui". */
.e-form .e-campo {
    padding: 11px 13px;
    background: var(--e-paper-pure);
    border: 1px solid #C9C5BC;
}
.e-form .e-campo:focus { border-color: var(--e-gold); border-width: 1px; padding-bottom: 11px; outline: 2px solid var(--e-gold); outline-offset: 1px; }

.e-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Segmentado: comprar / alugar */
.e-segmentos { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid #C9C5BC; }
.e-segmentos a {
    padding: 10px 6px;
    text-align: center;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--e-text-soft);
    border-right: 1px solid #C9C5BC;
    transition: background-color .25s var(--e-ease), color .25s var(--e-ease);
}
.e-segmentos a:last-child { border-right: 0; }
.e-segmentos a:hover { background: #EFEDE7; color: var(--e-text); }
.e-segmentos a[aria-current="true"] { background: var(--e-ink); color: #FFFFFF; }

/* Pílulas de número: dormitórios, vagas */
.e-pilulas { display: flex; flex-wrap: wrap; gap: 7px; }
.e-pilulas a {
    min-width: 44px;
    padding: 9px 12px;
    text-align: center;
    border: 1px solid #C9C5BC;
    background: var(--e-paper-pure);
    font-size: 13.5px;
    text-decoration: none;
    color: var(--e-text);
    transition: border-color .25s var(--e-ease), background-color .25s var(--e-ease), color .25s var(--e-ease);
}
.e-pilulas a:hover { border-color: var(--e-ink); }
.e-pilulas a[aria-current="true"] { background: var(--e-ink); border-color: var(--e-ink); color: #FFFFFF; }

/* ---- Linhas de escolha única (tipo, cidade, bairro) ----

   Eram `<input type="radio">` numa lista com rolagem própria. Radio é
   controle de formulário: pede um botão de enviar e traz o desenho do
   sistema operacional junto, que não combina com nada nesta página. Como a
   escolha é uma só, link faz o mesmo trabalho, muda a lista num clique e se
   parece com o resto do site: nome à esquerda, quantidade à direita,
   filete embaixo. */
.e-linhas { list-style: none; margin: 0; padding: 0; }

.e-linhas a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--e-paper-edge);
    font-size: 14.5px;
    text-decoration: none;
    color: var(--e-text);
    transition: color .25s var(--e-ease), border-color .25s var(--e-ease);
}
.e-linhas li:last-child a { border-bottom: 0; }
.e-linhas a:hover { color: var(--e-gold-deep); border-bottom-color: var(--e-gold); }

.e-linhas em { font-style: normal; font-size: 12.5px; color: var(--e-text-soft); }

/* O que está valendo: filete dourado à esquerda e nome em tinta cheia. Sem
   fundo colorido, que viraria um bloco no meio da coluna. */
.e-linhas a[aria-current="true"] {
    color: var(--e-ink);
    font-weight: 500;
    box-shadow: inset 2px 0 0 var(--e-gold);
    padding-left: 11px;
}
.e-linhas a[aria-current="true"] em { color: var(--e-gold); }

/* ---- "Ver os outros N bairros" / "Mais filtros" ----
   `<details>` nativo: abre e fecha sem JavaScript e sem rolagem aninhada. */
.e-mais { margin-top: 2px; }

.e-mais > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 0 0;
    font-size: 13px;
    color: var(--e-gold);
    cursor: pointer;
    list-style: none;
}
.e-mais > summary::-webkit-details-marker { display: none; }

/* Seta própria, que gira ao abrir. A nativa muda de desenho a cada sistema. */
.e-mais > summary::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate .25s var(--e-ease);
}
.e-mais[open] > summary::after { rotate: -135deg; translate: 0 1px; }

.e-mais--grupo {
    padding: 20px 0;
    border-bottom: 1px solid var(--e-paper-edge);
}
.e-mais--grupo > summary {
    padding: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--e-text-soft);
}
.e-mais--grupo[open] > summary { margin-bottom: 16px; }

/* Grupo dentro do "mais filtros": sem filete próprio, senão viram linhas
   dentro de linha. */
.e-grupo--solto { border-bottom: 0; padding: 0 0 18px; }
.e-grupo--solto:last-child { padding-bottom: 0; }

/* Lista de caixas (características) */
.e-caixas { display: grid; gap: 10px; }
.e-caixa { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.e-caixa input { width: 16px; height: 16px; accent-color: var(--e-gold); flex: 0 0 auto; }
.e-caixa span { flex: 1 1 auto; }

/* "Aplicar" como texto com filete, e não como bloco escuro.

   Só três controles dependem dele (preço, área, obra e características);
   todo o resto da coluna muda num clique. Um botão navy de largura cheia
   anunciava uma importância que ele não tem, e era a mancha mais pesada de
   uma coluna feita de filetes. */
.e-filtros__aplicar {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding: 0 0 6px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--e-gold);
    font-family: var(--e-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--e-ink);
    cursor: pointer;
    transition: gap .3s var(--e-ease);
}
.e-filtros__aplicar:hover { gap: 15px; }

/* ---- Coluna dos resultados ---- */
.e-resultados__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--e-paper-edge);
}
.e-resultados__conta {
    font-family: var(--e-serif);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 300;
    margin: 0;
}
.e-resultados__onde { margin: 5px 0 0; font-size: 14px; color: var(--e-text-soft); }

.e-ordenar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--e-text-soft); }
.e-ordenar select { min-width: 168px; }

/* Etiquetas do que está filtrado. Cada uma sai sozinha, sem derrubar as
   outras: sem isso a pessoa tem que limpar tudo e refazer. */
.e-aplicados { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 0; }
.e-aplicado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--e-paper-pure);
    border: 1px solid var(--e-paper-edge);
    font-size: 13px;
    text-decoration: none;
    color: var(--e-text);
}
.e-aplicado:hover { border-color: var(--e-gold); color: var(--e-gold-deep); }
.e-aplicado svg { opacity: .5; }

.e-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 2.6vw, 38px) clamp(20px, 2vw, 28px);
    padding-top: 28px;
}

/* `.e-nada` mora agora em `v2.css`, pelo mesmo motivo. */

/* Barra de páginas */
.e-paginas { display: flex; justify-content: center; gap: 6px; padding-top: 46px; flex-wrap: wrap; }
.e-paginas a, .e-paginas span {
    min-width: 42px;
    padding: 10px 12px;
    text-align: center;
    border: 1px solid var(--e-paper-edge);
    background: var(--e-paper-pure);
    font-size: 14px;
    text-decoration: none;
    color: var(--e-text);
}
.e-paginas a:hover { border-color: var(--e-ink); }
.e-paginas [aria-current="page"] { background: var(--e-ink); border-color: var(--e-ink); color: #FFFFFF; }
.e-paginas .is-inativo { opacity: .35; }

/* Botão que abre o filtro no celular. Fica escondido no desktop. */
.e-abrir-filtros { display: none; }

/* =========================================================================
   PÁGINA DO IMÓVEL
   ========================================================================= */

/* ---- Galeria: uma foto grande e duas ao lado ---- */
.e-galeria {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
    aspect-ratio: 16 / 9;
    max-height: 560px;
}
.e-galeria > a:first-child { grid-row: span 2; }
.e-galeria a { position: relative; display: block; overflow: hidden; background: #DDD9D1; }
.e-galeria img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--e-ease); }
.e-galeria a:hover img { scale: 1.04; }

.e-galeria__todas {
    position: absolute;
    right: 14px; bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,.94);
    color: var(--e-ink);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Visor de tela cheia */
.e-visor {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(5,13,30,.97);
    display: none;
    grid-template-rows: auto 1fr auto;
}
.e-visor[data-aberto="1"] { display: grid; }
.e-visor__barra { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; color: #FFFFFF; }
.e-visor__fechar, .e-visor__passo {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    color: #FFFFFF;
    cursor: pointer;
}
.e-visor__fechar:hover, .e-visor__passo:hover { background: rgba(255,255,255,.12); }
.e-visor__palco { display: grid; place-items: center; padding: 0 24px; min-height: 0; }
.e-visor__palco img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.e-visor__pe { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px 24px; color: var(--e-text-onink-soft); font-size: 13px; }

/* ---- Corpo: conteúdo + coluna de ação fixa ---- */
.e-imovel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    padding-block: clamp(34px, 4vw, 54px) clamp(64px, 8vw, 110px);
}

.e-imovel__nome {
    font-family: var(--e-serif);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 300;
    line-height: 1.14;
    margin: 0;
}
.e-imovel__onde { margin: 10px 0 0; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-text-soft); }

.e-imovel__selos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.e-selo {
    padding: 6px 11px;
    background: var(--e-ink);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
/* Carrega texto branco: precisa do dourado que segura contraste (5,25),
   não do de filete (3,14). */
.e-selo--ouro { background: var(--e-gold-deep); }

/* Os números essenciais. Linha de 4 ou 5, com filete, sem caixinhas. */
.e-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 0;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--e-paper-edge);
    border-bottom: 1px solid var(--e-paper-edge);
}
.e-numeros li { padding: 20px 16px 20px 0; }
.e-numeros strong {
    display: block;
    font-family: var(--e-serif);
    font-size: 27px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--e-ink);
}
.e-numeros span { display: block; margin-top: 3px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-text-soft); }

.e-bloco { padding-top: clamp(34px, 4vw, 52px); }
.e-bloco h2 {
    font-family: var(--e-serif);
    font-size: clamp(22px, 2.4vw, 29px);
    font-weight: 400;
    margin: 0 0 16px;
}
.e-bloco p { margin: 0 0 14px; line-height: 1.75; }
.e-bloco p:last-child { margin-bottom: 0; }

/* Características do imóvel, agrupadas */
.e-caracteristicas { display: grid; gap: 26px; }
.e-caracteristicas h3 {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--e-text-soft);
    margin: 0 0 12px;
}
.e-caracteristicas ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 9px 22px;
    margin: 0; padding: 0;
    list-style: none;
}
.e-caracteristicas li { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.e-caracteristicas li svg { flex: 0 0 auto; color: var(--e-gold); }

/* Ficha técnica em duas colunas, com filete esparso (uma linha por par, não
   uma borda por item). */
.e-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; margin: 0; }
.e-ficha > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--e-paper-edge); }
.e-ficha dt { color: var(--e-text-soft); font-size: 14px; }
.e-ficha dd { margin: 0; font-size: 14.5px; text-align: right; }

/* Barra de andamento da obra */
.e-obra { margin-top: 16px; }
.e-obra__trilho { height: 4px; background: var(--e-paper-edge); }
.e-obra__feito { height: 100%; background: var(--e-gold); }
.e-obra__conta { margin-top: 8px; font-size: 13px; color: var(--e-text-soft); }

/* ---- O QUE TEM NESSA REGIÃO ---- */
.e-entorno { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 32px; }
.e-entorno__grupo h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--e-text-soft);
    margin: 0 0 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--e-paper-edge);
}
.e-entorno__grupo h3 svg { color: var(--e-gold); flex: 0 0 auto; }
.e-entorno__grupo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.e-entorno__grupo li { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; }
.e-entorno__grupo li em { font-style: normal; color: var(--e-text-soft); font-size: 13px; white-space: nowrap; }

.e-entorno__aviso { font-size: 13px; color: var(--e-text-soft); margin-top: 18px; }

/* Esqueleto enquanto a consulta não volta. Tem a forma do conteúdo final,
   não é um disco girando. */
.e-esqueleto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 32px; }
.e-esqueleto > div { display: grid; gap: 9px; }
.e-esqueleto i {
    display: block;
    height: 11px;
    background: linear-gradient(90deg, #E9E6DF 25%, #F2F0EA 50%, #E9E6DF 75%);
    background-size: 240% 100%;
}
.e-esqueleto i:first-child { height: 13px; width: 55%; }

@media (prefers-reduced-motion: no-preference) {
    .e-esqueleto i { animation: e-brilho 1.5s linear infinite; }
}
@keyframes e-brilho { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* ---- Coluna de ação ---- */
.e-acao {
    position: sticky;
    top: 96px;
    background: var(--e-paper-pure);
    border: 1px solid var(--e-paper-edge);
    padding: clamp(22px, 2.4vw, 30px);
}
.e-acao__valor { font-family: var(--e-serif); font-size: clamp(28px, 3vw, 36px); font-weight: 500; color: var(--e-ink); margin: 0; }
.e-acao__encargos { margin: 7px 0 0; font-size: 13.5px; color: var(--e-text-soft); }
.e-acao__indisponivel {
    margin: 0 0 16px;
    padding: 11px 13px;
    background: #FBF1E6;
    border-left: 3px solid var(--e-gold);
    font-size: 13.5px;
}

.e-acao__botoes { display: grid; gap: 10px; margin-top: 22px; }
.e-acao__dica { margin: 12px 0 0; font-size: 12.5px; color: var(--e-text-soft); text-align: center; }

.e-acao__separador {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--e-text-soft);
}
.e-acao__separador::before, .e-acao__separador::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--e-paper-edge); }

.e-form { display: grid; gap: 13px; }
.e-form label { display: grid; gap: 6px; font-size: 13px; color: var(--e-text-soft); }
.e-form textarea.e-campo { resize: vertical; min-height: 88px; line-height: 1.55; }

.e-aviso { padding: 11px 13px; font-size: 13.5px; }
.e-aviso--bom { background: #ECF5EE; border-left: 3px solid #2E7D4F; }
.e-aviso--ruim { background: #FBECEC; border-left: 3px solid #B3261E; }

/* ---- Semelhantes ---- */
.e-semelhantes { padding-block: clamp(56px, 7vw, 92px); background: var(--e-paper-pure); border-top: 1px solid var(--e-paper-edge); }
.e-semelhantes__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 30px); }

/* =========================================================================
   TELAS MENORES
   ========================================================================= */
@media (max-width: 1180px) {
    .e-catalogo { grid-template-columns: 252px minmax(0, 1fr); }
    .e-imovel { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 980px) {
    /* O filtro vira gaveta: numa tela estreita, uma coluna fixa de 250px
       deixaria o cartão do imóvel com menos da metade da largura. */
    .e-catalogo { grid-template-columns: minmax(0, 1fr); }

    .e-abrir-filtros { display: inline-flex; }

    .e-filtros {
        position: fixed;
        inset: 0;
        z-index: 70;
        max-height: none;
        background: var(--e-paper);
        padding: 20px var(--e-gutter) 32px;
        transform: translateX(-100%);
        transition: transform .4s var(--e-ease);
        overflow-y: auto;
    }
    .e-filtros[data-aberto="1"] { transform: translateX(0); }
    .e-filtros__topo { position: sticky; top: 0; background: var(--e-paper); padding-top: 4px; z-index: 1; }

    html:not(.no-js) .e-filtros__fechar { display: grid; place-items: center; }

    .e-imovel { grid-template-columns: minmax(0, 1fr); }
    /* A coluna de ação deixa de ser fixa e vai para o fim do conteúdo: presa
       no topo de uma tela estreita, ela cobriria o imóvel. */
    .e-acao { position: static; }

    .e-galeria { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 4 / 3; }
    .e-galeria > a:nth-child(n+2) { display: none; }

    .e-semelhantes__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .e-lista { grid-template-columns: minmax(0, 1fr); }
    .e-semelhantes__grade { grid-template-columns: minmax(0, 1fr); }
    .e-resultados__topo { flex-direction: column; align-items: flex-start; }
    .e-ficha > div { padding: 11px 0; }
    .e-numeros { grid-template-columns: repeat(2, 1fr); }
    .e-numeros li { padding: 16px 12px 16px 0; }
}

/* Sem JavaScript o filtro não pode ficar inacessível no celular. */
.no-js .e-filtros { position: static; transform: none; }

/* =========================================================================
   VITRINES — o índice

   Grade de três, com a foto saindo do acervo da própria vitrine. Nenhuma das
   publicadas tem imagem de capa cadastrada, então depender de `cover_image`
   seria desenhar uma grade de retângulos cinza.
   ========================================================================= */
.e-vitrines {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 26px);
}

.e-vitrine {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px;
    overflow: hidden;
    background: var(--e-ink);
    color: #FFFFFF;
    text-decoration: none;
}

.e-vitrine img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: scale .9s var(--e-ease);
}
.e-vitrine:hover img { scale: 1.05; }

/* Véu que garante o contraste do texto sobre QUALQUER foto: a capa vem do
   acervo e pode ser tanto uma sala clara quanto um mar estourado de sol. */
.e-vitrine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,13,30,.90) 0%, rgba(5,13,30,.38) 52%, rgba(5,13,30,.12) 100%);
}

/* Sem foto: o ícone da vitrine sobre o navy, com o rastro dourado da marca.
   É honesto — a vitrine existe, só não tem o que mostrar agora. */
.e-vitrine--sem-foto {
    background:
        radial-gradient(70% 60% at 50% 30%, rgba(224,182,98,.16), transparent 65%),
        var(--e-ink);
}
.e-vitrine--sem-foto::after { background: none; }

.e-vitrine__icone {
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -70%;
    color: var(--e-gold-bright);
    opacity: .9;
}

.e-vitrine__texto { position: relative; z-index: 1; display: block; padding: 24px; }

.e-vitrine__nome {
    display: block;
    font-family: var(--e-serif);
    font-size: clamp(23px, 2.2vw, 30px);
    font-weight: 400;
    line-height: 1.15;
}
.e-vitrine__sub {
    display: block;
    margin-top: 7px;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255,255,255,.80);
}
.e-vitrine__conta {
    display: block;
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--e-gold-bright);
}

/* =========================================================================
   VITRINE ABERTA — a faixa de abertura

   Bloco navy dentro da página clara, como o painel institucional da home.
   Não é inversão de tema: é a separação entre a curadoria e a lista.
   ========================================================================= */
.e-vitrine-capa {
    background: var(--e-ink);
    color: var(--e-text-onink);
    padding-block: clamp(34px, 5vw, 60px);
    text-align: center;
}
.e-vitrine-capa .e-titulo { color: #FFFFFF; margin-inline: auto; max-width: 20ch; }
.e-vitrine-capa__icone { display: inline-block; color: var(--e-gold-bright); margin-bottom: 14px; }
.e-vitrine-capa__sub {
    margin: 12px auto 0;
    max-width: 54ch;
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--e-text-onink-soft);
}
.e-vitrine-capa__texto { margin: 14px auto 0; max-width: 62ch; font-size: 15px; line-height: 1.7; color: var(--e-text-onink-soft); }
.e-vitrine-capa__conta {
    margin: 20px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--e-gold-bright);
}

/* Sem o filtro lateral, a lista destas telas usa a largura inteira: três
   colunas em vez das duas da busca. */
.e-lista--larga { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0; }

.e-vitrine-saida { margin-top: 34px; text-align: center; font-size: 14.5px; color: var(--e-text-soft); }
.e-vitrine-saida a { color: var(--e-ink); border-bottom: 1px solid var(--e-gold); text-decoration: none; }
.e-vitrine-saida a:hover { color: var(--e-gold-deep); }

@media (max-width: 1080px) {
    .e-vitrines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e-lista--larga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .e-vitrines { grid-template-columns: minmax(0, 1fr); }
    .e-lista--larga { grid-template-columns: minmax(0, 1fr); }
    .e-vitrine { min-height: 260px; }
}