/* ============================================================================
   Soneto Imóveis — componentes das páginas internas.

   Continuação de site.css: mesmos tokens, mesmas regras de raio, sombra e
   espaçamento. Está em arquivo separado só para manter cada um em tamanho
   legível; o site.css importa este no fim.

   Regra que vale em tudo aqui (seção 10): card sem sombra, hover que apenas
   sublinha o título, metadados com ícone + espaço — nunca ponto médio — e
   sombra somente em elemento que flutua de verdade.
   ============================================================================ */

/* ── Títulos de página e blocos de texto ─────────────────────────────────── */

.titulo-pagina {
    font-family: var(--serif-display);
    font-size: clamp(var(--texto-30), 4vw, var(--texto-48));
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 10px;
}

.sobretitulo {
    font-size: var(--texto-14);
    color: var(--pedra);
    margin: 0 0 6px;
}

.texto-conduzido {
    max-width: 62ch;
    color: var(--pedra);
    margin: 0 0 16px;
}

.secao--estreita .envoltorio {
    max-width: 780px;
}

.acoes-empilhadas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.link-discreto {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--sans);
    font-size: var(--texto-16);
    color: var(--terra-roxa);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.carregando {
    color: var(--pedra);
    padding: 40px 0;
}

/* ── Migalhas ────────────────────────────────────────────────────────────── */

.migalhas {
    padding: 20px 0 4px;
    font-size: var(--texto-14);
    color: var(--pedra);
}

.migalhas ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.migalhas li + li::before {
    content: '/';
    margin-right: 6px;
    color: var(--borda);
}

.migalhas a {
    color: var(--pedra);
}

.migalhas a:hover {
    color: var(--terra-roxa);
}

/* ── Busca rápida do hero ────────────────────────────────────────────────── */

.busca-rapida__finalidade {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.busca-rapida__finalidade input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.busca-rapida__finalidade label {
    padding: 8px 14px;
    border-bottom: 2px solid transparent;
    font-size: var(--texto-16);
    color: var(--pedra);
    cursor: pointer;
}

.busca-rapida__finalidade input:checked + label {
    color: var(--terra-roxa);
    border-bottom-color: var(--terra-roxa);
    font-weight: 500;
}

.busca-rapida__finalidade input:focus-visible + label {
    outline: 3px solid var(--ipe);
    outline-offset: 2px;
    border-radius: var(--raio-campo);
}

.busca-rapida__codigo {
    margin-top: 14px;
    font-size: var(--texto-14);
}

.busca-por-codigo {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: 10px;
}

.busca-por-codigo label {
    display: block;
    font-size: var(--texto-14);
    margin-bottom: 6px;
}

.busca-por-codigo input {
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    font-family: var(--sans);
    font-size: var(--texto-16);
    max-width: 160px;
}

/* ── Bairros em destaque ─────────────────────────────────────────────────── */

.bairros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.bairro {
    display: block;
    position: relative;
    border-radius: var(--raio-foto);
    overflow: hidden;
    color: var(--papel);
    text-decoration: none;
    aspect-ratio: 3 / 2;
}

.bairro__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bairro__foto--vazia {
    background: var(--vidro);
}

.bairro__nome {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 16px 14px;
    font-family: var(--serif-texto);
    font-size: var(--texto-21);
    /* Faixa escura só na base, para o nome ficar legível sobre qualquer foto. */
    background: linear-gradient(to top, rgba(37, 40, 45, .78), rgba(37, 40, 45, 0));
}

.bairro:hover .bairro__nome {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Chamada "anuncie" e depoimentos ─────────────────────────────────────── */

.chamada-anuncie {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}

.depoimentos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.depoimento {
    margin: 0;
}

.depoimento blockquote {
    margin: 0 0 12px;
    font-family: var(--serif-texto);
    font-size: var(--texto-21);
    line-height: 1.7;
}

.depoimento blockquote::before {
    content: '“';
}

.depoimento blockquote::after {
    content: '”';
}

.depoimento figcaption {
    font-size: var(--texto-14);
    color: var(--pedra);
}

/* ── Card de empreendimento ──────────────────────────────────────────────── */

.card-imovel__faixas {
    font-family: var(--serif-texto);
    font-size: var(--texto-18);
    color: var(--grafite);
    margin: 0 0 4px;
}

.card-imovel__unidades {
    font-size: var(--texto-14);
    color: var(--igapo);
    margin: 0 0 4px;
}

.selo--status {
    background: var(--igapo);
    color: var(--papel);
}

.selo--claro {
    background: var(--vidro);
    color: var(--grafite);
}

/* ── Busca ───────────────────────────────────────────────────────────────── */

.busca {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
    padding-bottom: clamp(48px, 6vw, 80px);
}

.busca__topo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}

.busca__contagem {
    color: var(--pedra);
    margin: 0;
}

.busca__controles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.campo--linha {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.campo--linha .campo__rotulo {
    margin-bottom: 0;
    white-space: nowrap;
    color: var(--pedra);
}

.campo--linha select {
    width: auto;
    padding-block: 8px;
}

.visualizacoes {
    display: flex;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    overflow: hidden;
}

.visualizacoes a {
    padding: 9px 14px;
    font-size: var(--texto-14);
    color: var(--pedra);
    text-decoration: none;
}

.visualizacoes a + a {
    border-left: 1px solid var(--borda);
}

.visualizacoes a.ativo {
    background: var(--terra-roxa);
    color: var(--papel);
}

/* Etiquetas de filtro aplicado */

.etiquetas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--vidro);
    border-radius: 999px;
    font-size: var(--texto-14);
    color: var(--grafite);
    text-decoration: none;
}

.etiqueta:hover {
    background: var(--borda);
}

/* Painel de filtros */

.filtros {
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio-painel);
    padding: 20px;
}

.filtros__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.filtros__titulo {
    font-family: var(--serif-texto);
    font-size: var(--texto-21);
    margin: 0;
}

.filtros__grupo {
    border: 0;
    border-top: 1px solid var(--borda);
    margin: 0;
    padding: 16px 0 4px;
}

.filtros__grupo legend {
    font-size: var(--texto-14);
    font-weight: 500;
    padding: 0;
    margin-bottom: 10px;
}

.filtros__lista {
    display: grid;
    gap: 8px;
}

.filtros__lista--rolagem {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.filtros__procurar {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    font-family: var(--sans);
    font-size: var(--texto-14);
}

.opcao {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--texto-16);
    cursor: pointer;
}

.opcao input {
    width: auto;
    accent-color: var(--terra-roxa);
}

.opcoes-lado-a-lado {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.opcoes-lado-a-lado label {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    font-size: var(--texto-14);
    cursor: pointer;
}

.opcoes-lado-a-lado input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.opcoes-lado-a-lado input:checked + span {
    font-weight: 500;
}

.opcoes-lado-a-lado label:has(input:checked) {
    border-color: var(--terra-roxa);
    background: var(--vidro);
    color: var(--terra-roxa);
}

.opcoes-lado-a-lado label:has(input:focus-visible) {
    outline: 3px solid var(--ipe);
    outline-offset: 2px;
}

.opcoes-lado-a-lado--numeros label {
    min-width: 54px;
    justify-content: center;
}

.filtros__acoes {
    border-top: 1px solid var(--borda);
    padding-top: 16px;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.contador-filtros {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--terra-roxa);
    color: var(--papel);
    font-size: var(--texto-14);
}

.cards--lista {
    grid-template-columns: 1fr;
}

.cards--lista .card-imovel {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

.cards--lista .card-imovel__midia {
    grid-row: span 6;
}

/* Estado vazio com formulário */

.vazio__formulario {
    max-width: 520px;
    margin: 40px auto 0;
    text-align: left;
}

/* Texto de SEO do bairro, depois da lista */

.texto-seo {
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: 24px;
    border-top: 1px solid var(--borda);
    max-width: 70ch;
}

.texto-seo h2 {
    font-family: var(--serif-texto);
    font-size: var(--texto-24);
    font-weight: 400;
}

/* ── Paginação ───────────────────────────────────────────────────────────── */

.paginacao {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: clamp(32px, 4vw, 56px);
}

.paginacao__numeros {
    list-style: none;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.paginacao a,
.paginacao__atual {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    justify-content: center;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    color: var(--grafite);
    text-decoration: none;
}

.paginacao a:hover {
    border-color: var(--terra-roxa);
    color: var(--terra-roxa);
}

.paginacao__atual {
    background: var(--terra-roxa);
    border-color: var(--terra-roxa);
    color: var(--papel);
}

.paginacao__intervalo {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 4px;
    color: var(--pedra);
}

/* ── Mapa ────────────────────────────────────────────────────────────────── */

.mapa {
    height: 380px;
    border-radius: var(--raio-foto);
    overflow: hidden;
    background: var(--vidro);
}

.mapa--escritorio {
    height: 280px;
    margin-top: 24px;
}

.mapa-busca {
    height: 480px;
    border-radius: var(--raio-foto);
    overflow: hidden;
    background: var(--vidro);
    margin-bottom: 32px;
}

.mapa__aviso,
.mapa-busca__aviso {
    padding: 24px;
    color: var(--pedra);
}

.balao-mapa {
    display: grid;
    gap: 4px;
    min-width: 200px;
}

.balao-mapa img {
    width: 100%;
    height: auto;
    border-radius: var(--raio-foto);
}

.balao-mapa strong {
    font-family: var(--serif-texto);
    font-size: var(--texto-16);
}

/* ── Galeria ─────────────────────────────────────────────────────────────── */

.galeria {
    margin-top: 12px;
}

.galeria__mosaico {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    aspect-ratio: 16 / 9;
}

.galeria__item {
    padding: 0;
    border: 0;
    background: var(--vidro);
    border-radius: var(--raio-foto);
    overflow: hidden;
    cursor: zoom-in;
}

.galeria__item:first-child {
    grid-row: span 2;
}

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

.galeria__sem-foto {
    aspect-ratio: 16 / 9;
    background: var(--vidro);
    border-radius: var(--raio-foto);
}

.galeria__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.galeria__todas img {
    width: 100%;
    height: auto;
    margin-bottom: 8px;
    border-radius: var(--raio-foto);
}

/* Tela cheia */

.tela-cheia {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(37, 40, 45, .94);
}

.tela-cheia[hidden] {
    display: none;
}

.tela-cheia__quadro {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 10px;
    max-height: 92vh;
}

.tela-cheia__quadro img {
    max-width: 100%;
    max-height: 84vh;
    object-fit: contain;
    border-radius: var(--raio-foto);
}

.tela-cheia__quadro figcaption {
    color: var(--vidro);
    font-size: var(--texto-16);
}

.tela-cheia__fechar,
.tela-cheia__seta {
    background: rgba(252, 252, 251, .14);
    border: 0;
    border-radius: 999px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--papel);
    cursor: pointer;
}

.tela-cheia__fechar:hover,
.tela-cheia__seta:hover {
    background: rgba(252, 252, 251, .28);
}

.tela-cheia__fechar {
    position: absolute;
    top: 16px;
    right: 16px;
}

.tela-cheia__contador {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--vidro);
    font-size: var(--texto-14);
    margin: 0;
}

/* ── Detalhe do imóvel ───────────────────────────────────────────────────── */

.detalhe__grade {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
    padding-block: clamp(32px, 4vw, 48px);
}

.detalhe__selos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.detalhe__titulo {
    font-family: var(--serif-texto);
    font-size: clamp(var(--texto-24), 3vw, var(--texto-36));
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 10px;
}

.detalhe__titulo--display {
    font-family: var(--serif-display);
    font-size: clamp(var(--texto-36), 5vw, var(--texto-60));
}

.detalhe__local {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pedra);
    margin: 0 0 6px;
}

.detalhe__construtora {
    color: var(--igapo);
    margin: 0 0 6px;
}

.detalhe__codigo {
    color: var(--pedra);
    font-size: var(--texto-14);
    margin: 0;
}

.detalhe__faixas {
    font-family: var(--serif-texto);
    font-size: var(--texto-21);
    color: var(--terra-roxa);
    margin: 20px 0 0;
}

.detalhe__medidas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 28px 0;
    padding: 20px 0;
    border-block: 1px solid var(--borda);
}

.detalhe__medidas li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--grafite);
}

.detalhe__medidas svg {
    color: var(--pedra);
    flex-shrink: 0;
}

.detalhe__medidas small {
    color: var(--pedra);
}

.detalhe__bloco {
    margin-bottom: clamp(32px, 4vw, 48px);
}

.detalhe__bloco h2 {
    font-family: var(--serif-texto);
    font-size: var(--texto-24);
    font-weight: 400;
    margin: 0 0 16px;
}

.detalhe__subtitulo {
    font-size: var(--texto-16);
    font-weight: 500;
    color: var(--pedra);
    margin: 20px 0 10px;
}

.lista-caracteristicas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 20px;
    margin: 0;
    padding: 0;
}

.lista-caracteristicas li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lista-caracteristicas svg {
    color: var(--igapo);
    flex-shrink: 0;
}

.valores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin: 0 0 16px;
    padding: 20px;
    background: var(--vidro);
    border-radius: var(--raio-painel);
}

.valores dt {
    font-size: var(--texto-14);
    color: var(--pedra);
    margin-bottom: 4px;
}

.valores dd {
    margin: 0;
    font-family: var(--serif-texto);
    font-size: var(--texto-21);
}

.valores small {
    font-size: var(--texto-14);
    color: var(--pedra);
}

.cartao-empreendimento {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-painel);
    text-decoration: none;
    color: var(--grafite);
}

.cartao-empreendimento:hover {
    border-color: var(--terra-roxa);
}

.cartao-empreendimento img {
    border-radius: var(--raio-foto);
    object-fit: cover;
}

.cartao-empreendimento span {
    display: grid;
    gap: 2px;
}

.cartao-empreendimento strong {
    font-family: var(--serif-texto);
    font-size: var(--texto-21);
    font-weight: 400;
}

.cartao-empreendimento small {
    color: var(--pedra);
}

/* Painel lateral */

.detalhe__lateral {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 20px;
}

.painel-contato {
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio-painel);
    box-shadow: var(--sombra-flutuante);
    padding: 24px;
}

.painel-contato__rotulo {
    font-size: var(--texto-14);
    color: var(--pedra);
    margin: 0;
}

.painel-contato__preco {
    font-family: var(--serif-texto);
    font-size: var(--texto-30);
    color: var(--terra-roxa);
    margin: 0 0 4px;
}

.painel-contato__preco--secundario {
    font-size: var(--texto-21);
    color: var(--grafite);
}

.painel-contato__preco small {
    font-size: var(--texto-16);
    color: var(--pedra);
}

.painel-contato__abas {
    display: flex;
    gap: 4px;
    margin: 20px 0 16px;
    border-bottom: 1px solid var(--borda);
}

.painel-contato__abas button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 10px;
    font-family: var(--sans);
    font-size: var(--texto-16);
    color: var(--pedra);
    cursor: pointer;
}

.painel-contato__abas button[aria-selected='true'] {
    color: var(--terra-roxa);
    border-bottom-color: var(--terra-roxa);
    font-weight: 500;
}

.painel-contato__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--borda);
}

.acao-secundaria {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 6px 8px;
    font-family: var(--sans);
    font-size: var(--texto-14);
    color: var(--pedra);
    cursor: pointer;
    border-radius: var(--raio-campo);
}

.acao-secundaria:hover {
    color: var(--terra-roxa);
    background: var(--vidro);
}

.acao-secundaria[aria-pressed='true'] {
    color: var(--terra-roxa);
}

.acao-secundaria[aria-pressed='true'] svg {
    fill: currentColor;
}

.cartao-corretor {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-painel);
}

.cartao-corretor img {
    border-radius: 999px;
    object-fit: cover;
}

.cartao-corretor__nome {
    font-family: var(--serif-texto);
    font-size: var(--texto-18);
    margin: 0 0 2px;
}

.cartao-corretor p {
    margin: 0;
    font-size: var(--texto-14);
}

/* Barra fixa do celular */

.barra-mobile {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: none;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--papel);
    border-top: 1px solid var(--borda);
    box-shadow: 0 -6px 20px rgba(37, 40, 45, .10);
}

.barra-mobile .botao {
    flex: 1;
    justify-content: center;
}

/* ── Imóvel indisponível ─────────────────────────────────────────────────── */

.indisponivel {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: center;
}

.indisponivel__foto {
    width: 100%;
    height: auto;
    border-radius: var(--raio-foto);
    /* A foto perde a cor: o imóvel saiu do ar, e a página não deve parecer
       um anúncio ativo. */
    filter: grayscale(1);
    opacity: .75;
}

/* ── Tipologias ──────────────────────────────────────────────────────────── */

.tipologias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.tipologia {
    border: 1px solid var(--borda);
    border-radius: var(--raio-painel);
    padding: 16px;
}

.tipologia h3 {
    font-family: var(--serif-texto);
    font-size: var(--texto-18);
    font-weight: 400;
    margin: 12px 0 8px;
}

.tipologia__planta {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--vidro);
    border-radius: var(--raio-foto);
    overflow: hidden;
    cursor: zoom-in;
}

.tipologia__planta img {
    width: 100%;
    height: auto;
    display: block;
}

.tipologia__dados {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: var(--texto-14);
    color: var(--pedra);
}

.tipologia__preco {
    margin: 10px 0 0;
    color: var(--terra-roxa);
    font-family: var(--serif-texto);
}

.abas-link {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 28px;
}

.abas-link a {
    padding: 8px 14px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    font-size: var(--texto-14);
    color: var(--pedra);
    text-decoration: none;
}

.abas-link a.ativo {
    background: var(--terra-roxa);
    border-color: var(--terra-roxa);
    color: var(--papel);
}

/* ── Formulários de lead ─────────────────────────────────────────────────── */

.formulario-lead__titulo {
    font-family: var(--serif-texto);
    font-size: var(--texto-21);
    font-weight: 400;
    margin: 0 0 16px;
}

.formulario-lead__dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.formulario-lead__tripla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.campo--consentimento label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--texto-14);
    color: var(--pedra);
    cursor: pointer;
}

.campo--consentimento input {
    width: auto;
    margin-top: 3px;
    accent-color: var(--terra-roxa);
}

.formulario-lead__retorno {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: var(--raio-campo);
    background: var(--vidro);
    color: var(--grafite);
    font-size: var(--texto-16);
}

.formulario-lead__retorno--erro {
    background: #FBEAE8;
    color: #8A2A23;
}

/* ── Contato ─────────────────────────────────────────────────────────────── */

.contato {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.canais {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
}

.canal {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-campo);
    text-decoration: none;
    color: var(--grafite);
}

a.canal:hover {
    border-color: var(--terra-roxa);
}

.canal strong {
    font-size: var(--texto-14);
    font-weight: 500;
    color: var(--pedra);
}

.ficha-empresa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--borda);
}

.ficha-empresa dt {
    font-size: var(--texto-14);
    color: var(--pedra);
    margin-bottom: 4px;
}

.ficha-empresa dd {
    margin: 0;
}

/* ── Equipe ──────────────────────────────────────────────────────────────── */

.equipe {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 32px;
}

.corretor__foto {
    border-radius: 999px;
    object-fit: cover;
    margin-bottom: 12px;
}

.corretor__foto--vazia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: var(--vidro);
    color: var(--pedra);
    font-family: var(--serif-display);
    font-size: var(--texto-36);
}

.corretor__nome {
    font-family: var(--serif-texto);
    font-size: var(--texto-21);
    font-weight: 400;
    margin: 0 0 4px;
}

.corretor__bio {
    color: var(--pedra);
    font-size: var(--texto-16);
    margin: 8px 0 12px;
}

/* ── Anuncie ─────────────────────────────────────────────────────────────── */

.anuncie {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 720px;
}

.anuncie__formulario {
    border: 1px solid var(--borda);
    border-radius: var(--raio-painel);
    padding: clamp(20px, 3vw, 32px);
}

.etapas {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 24px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--borda);
    font-size: var(--texto-14);
    color: var(--pedra);
}

.etapas li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.etapas span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--borda);
}

.etapas .ativa {
    color: var(--terra-roxa);
    font-weight: 500;
}

.etapas .ativa span {
    background: var(--terra-roxa);
    border-color: var(--terra-roxa);
    color: var(--papel);
}

.etapas .concluida span {
    background: var(--vidro);
    border-color: var(--vidro);
    color: var(--terra-roxa);
}

.etapa {
    border: 0;
    margin: 0;
    padding: 0;
}

.etapa legend {
    font-family: var(--serif-texto);
    font-size: var(--texto-21);
    padding: 0;
    margin-bottom: 16px;
}

.anuncie__acoes {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* ── Comparação ──────────────────────────────────────────────────────────── */

.comparacao {
    overflow-x: auto;
}

.comparacao__tabela {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.comparacao__tabela th,
.comparacao__tabela td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    vertical-align: top;
}

.comparacao__tabela tbody th {
    font-weight: 400;
    color: var(--pedra);
    font-size: var(--texto-14);
    width: 180px;
}

.comparacao__linha--diferente {
    background: var(--vidro);
}

.comparacao__imovel {
    display: grid;
    gap: 6px;
    min-width: 200px;
}

.comparacao__imovel a {
    display: grid;
    gap: 8px;
    text-decoration: none;
    color: var(--grafite);
}

.comparacao__imovel img {
    width: 100%;
    height: auto;
    border-radius: var(--raio-foto);
}

.comparacao__titulo {
    font-family: var(--serif-texto);
    font-size: var(--texto-16);
    line-height: 1.4;
}

.comparacao__imovel a:hover .comparacao__titulo {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.comparacao__imovel p {
    margin: 0;
    font-size: var(--texto-14);
}

/* ── Barra de comparar e avisos flutuantes ───────────────────────────────── */

.barra-comparar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: var(--grafite);
    color: var(--papel);
    box-shadow: 0 -8px 28px rgba(37, 40, 45, .2);
}

.barra-comparar .link-discreto {
    color: var(--vidro);
}

.aviso-flutuante {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 120%);
    z-index: 60;
    max-width: min(440px, calc(100vw - 32px));
    padding: 14px 18px;
    border-radius: var(--raio-painel);
    background: var(--grafite);
    color: var(--papel);
    box-shadow: var(--sombra-flutuante);
    transition: transform var(--transicao);
}

.aviso-flutuante.visivel {
    transform: translate(-50%, 0);
}

.aviso-flutuante--erro {
    background: #8A2A23;
}

.sem-rolagem {
    overflow: hidden;
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */

@media (min-width: 992px) {
    .so-no-celular {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .detalhe__grade {
        grid-template-columns: 1fr;
    }

    .detalhe__lateral {
        position: static;
    }

    .contato {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .busca {
        grid-template-columns: 1fr;
    }

    /* No celular os filtros viram gaveta que cobre a tela. */
    .busca__filtros {
        position: fixed;
        inset: 0;
        z-index: 50;
        overflow-y: auto;
        background: var(--papel);
        padding: 16px;
        transform: translateX(-100%);
        transition: transform var(--transicao);
    }

    .busca__filtros--aberta {
        transform: translateX(0);
    }

    .filtros {
        border: 0;
        padding: 0;
    }

    .barra-mobile {
        display: flex;
    }

    /* A barra fixa não pode cobrir o fim da página. */
    .detalhe {
        padding-bottom: 84px;
    }

    .galeria__mosaico {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        aspect-ratio: auto;
        /* Carrossel por rolagem: o próximo pedaço aparece e indica que há mais. */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .galeria__mosaico::-webkit-scrollbar {
        display: none;
    }

    .galeria__item {
        flex: 0 0 88%;
        scroll-snap-align: center;
        aspect-ratio: 4 / 3;
    }

    .galeria__item:first-child {
        grid-row: auto;
    }

    .indisponivel {
        grid-template-columns: 1fr;
    }

    .cards--lista .card-imovel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .formulario-lead__dupla,
    .formulario-lead__tripla {
        grid-template-columns: 1fr;
    }

    .tela-cheia {
        grid-template-columns: 1fr;
        padding: 8px;
    }

    .tela-cheia__seta {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .tela-cheia__seta--anterior {
        left: 8px;
    }

    .tela-cheia__seta--proxima {
        right: 8px;
    }

    .detalhe__medidas {
        gap: 16px 20px;
    }
}