/* =========================================================================
   arrenda-se.net — folha de estilo do portal
   Nenhum tamanho de letra desce abaixo de 15px (excepto a etiqueta legal
   "Publicidade" e as ajudas de formulário, que podem ir a 14px).
   ========================================================================= */

:root {
    /* Terracota queimado: o portal é português e mediterrânico, não mais um
       azul-corporativo de listagens imobiliárias. */
    --tinta:            #2b2723;
    --tinta-suave:      #5f574f;
    /* Escurecido de #8a8078: aquele dava 3.67 de contraste sobre o fundo e
       3.86 sobre os cartões, abaixo do mínimo de 4.5 do WCAG AA. Este dá
       4.83 e 5.08, e continua claramente mais claro do que --tinta-suave. */
    --tinta-ténue:      #756d66;
    --fundo:            #fbf9f6;
    --fundo-cartao:     #ffffff;
    --fundo-alterno:    #f4efe8;
    --linha:            #e3dbd1;
    --linha-forte:      #cfc4b6;

    --acento:           #b8502d;
    --acento-escuro:    #94391c;
    --acento-claro:     #f7e9e2;

    --verde:            #2f6b4f;
    --verde-claro:      #e4f0e9;
    --ambar:            #8a6212;
    --ambar-claro:      #fbf0d8;
    --vermelho:         #a3302a;
    --vermelho-claro:   #fbe7e5;

    /*
     * Escala de espaçamento vertical. Existe para que a distância entre duas
     * coisas diga quanto elas se relacionam: um título encostado ao que
     * introduz, um intervalo largo entre assuntos diferentes. Antes disto as
     * margens eram avulsas e as secções colavam-se umas às outras.
     */
    --v-xs:  8px;    /* dentro de um mesmo parágrafo de conteúdo */
    --v-s:   14px;   /* de um título para o que ele introduz */
    --v-m:   24px;   /* entre blocos de um mesmo assunto */
    --v-l:   40px;   /* entre assuntos */
    --v-xl:  64px;   /* entre fases de leitura */

    --raio:             10px;
    --raio-pequeno:     6px;
    --sombra:           0 1px 2px rgba(43, 39, 35, .06), 0 4px 14px rgba(43, 39, 35, .05);
    --sombra-forte:     0 2px 6px rgba(43, 39, 35, .10), 0 12px 32px rgba(43, 39, 35, .10);

    --largura:          1180px;
    --fonte: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --fonte-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--fonte-ui);
    font-size: 16px;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--acento); }
a:hover { color: var(--acento-escuro); }

h1, h2, h3, h4 {
    font-family: var(--fonte);
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}

h1 { font-size: 34px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

p { margin: 0 0 1em; }

.envolve {
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: 20px;
}

.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.salta-conteudo {
    position: absolute;
    left: -9999px;
    background: var(--tinta);
    color: #fff;
    padding: 12px 18px;
    z-index: 100;
}
.salta-conteudo:focus { left: 12px; top: 12px; }

/* ---- Cabeçalho --------------------------------------------------------- */

.cabecalho {
    background: var(--fundo-cartao);
    border-bottom: 1px solid var(--linha);
    position: sticky;
    top: 0;
    z-index: 40;
}

.cabecalho-linha {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 68px;
}

.marca { text-decoration: none; flex-shrink: 0; }

.marca-nome {
    font-family: var(--fonte);
    font-size: 24px;
    font-weight: 700;
    color: var(--tinta);
    letter-spacing: -.02em;
}
.marca-sufixo { color: var(--acento); }

.navegacao-principal {
    display: flex;
    gap: 22px;
    margin-right: auto;
}

.navegacao-principal a {
    color: var(--tinta-suave);
    text-decoration: none;
    font-size: 16px;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.navegacao-principal a:hover {
    color: var(--tinta);
    border-bottom-color: var(--acento);
}

.cabecalho-accoes {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-conta { position: relative; }

.menu-conta > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    list-style: none;
    padding: 6px 10px;
    border-radius: var(--raio-pequeno);
    font-size: 15px;
    color: var(--tinta-suave);
}
.menu-conta > summary::-webkit-details-marker { display: none; }
.menu-conta > summary:hover { background: var(--fundo-alterno); }

.avatar-mini {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--linha);
}

.menu-conta-lista {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 210px;
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra-forte);
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.menu-conta-lista a {
    padding: 9px 12px;
    border-radius: var(--raio-pequeno);
    color: var(--tinta);
    text-decoration: none;
    font-size: 15px;
}
.menu-conta-lista a:hover { background: var(--fundo-alterno); }

/* ---- Botões ------------------------------------------------------------ */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--raio-pequeno);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    /* Sem line-height fixo, um <a class="botao"> herda a entrelinha do corpo (~1.6)
       e um <button class="botao"> usa a "normal" (~1.2): ficavam com alturas
       diferentes lado a lado. Fixá-la iguala-os, e 1.2 ainda cobre o ícone de 17px. */
    line-height: 1.2;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

.botao-primario {
    background: var(--acento);
    color: #fff;
}
.botao-primario:hover { background: var(--acento-escuro); color: #fff; }

.botao-simples {
    background: var(--fundo-cartao);
    border-color: var(--linha-forte);
    color: var(--tinta);
}
.botao-simples:hover { background: var(--fundo-alterno); color: var(--tinta); }

.botao-perigo {
    background: transparent;
    border-color: var(--vermelho);
    color: var(--vermelho);
}
.botao-perigo:hover { background: var(--vermelho-claro); }

.botao[disabled], .botao:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.botao-favorito {
    background: none;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pequeno);
    padding: 7px 12px;
    font-family: inherit;
    font-size: 15px;
    color: var(--tinta-suave);
    cursor: pointer;
    width: 100%;
}
.botao-favorito:hover { border-color: var(--acento); color: var(--acento); }
.botao-favorito.activo { color: var(--ambar); border-color: var(--ambar); }

/* ---- Avisos ------------------------------------------------------------ */

.aviso {
    padding: 14px 18px;
    border-radius: var(--raio);
    border: 1px solid;
    margin: 20px 0;
    font-size: 16px;
}
.aviso p:last-child, .aviso ul:last-child { margin-bottom: 0; }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }

.aviso-sucesso  { background: var(--verde-claro);    border-color: #b9d6c6; color: var(--verde); }
.aviso-erro     { background: var(--vermelho-claro); border-color: #eabfbb; color: var(--vermelho); }
.aviso-atencao  { background: var(--ambar-claro);    border-color: #e6d2a0; color: var(--ambar); }
.aviso-info     { background: var(--acento-claro);   border-color: #e8cabb; color: var(--acento-escuro); }

/* ---- Conteúdo ---------------------------------------------------------- */

.conteudo { min-height: 60vh; padding-bottom: 60px; }

.cabecalho-seccao {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 36px 0 18px;
}
.cabecalho-seccao h2 { margin: 0; }

.contagem { color: var(--tinta-ténue); font-size: 15px; }

/* ---- Formulários ------------------------------------------------------- */

.etiqueta {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta-suave);
    margin: 14px 0 5px;
}

.campo {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 16px;
    color: var(--tinta);
    background: var(--fundo-cartao);
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pequeno);
}

/*
 * Sem appearance:none, cada sistema desenha o <select> à sua maneira: no macOS
 * ignora parte do estilo, no Windows fica com outra altura, e o triângulo nativo
 * herda a cor do texto — o que o tornava invisível no rodapé escuro.
 * A seta é desenhada por nós, em SVG, e acompanha a cor do texto.
 */
select.campo {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235f574f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px 8px;
    cursor: pointer;
}

/*
 * A lista que abre é desenhada pelo sistema operativo e herda o fundo do
 * <select>. Num select de fundo escuro isso deixava texto escuro sobre escuro.
 * Fixamos as duas cores para a lista ser sempre legível.
 */
.campo option,
.campo optgroup {
    background-color: #ffffff;
    color: var(--tinta);
}
.campo:focus {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    border-color: var(--acento);
}

/*
 * Só os campos tinham foco visível. Quem navega por teclado não via onde
 * estava ao passar pelas ligações e pelos botões.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: 3px;
}

.heroi a:focus-visible,
.rodape a:focus-visible,
.rodape button:focus-visible {
    outline-color: #fff;
}

textarea.campo { min-height: 150px; resize: vertical; line-height: 1.6; }

/* Datas em AAAA-MM-DD: campo de texto, para o browser não impor o formato
   local do visitante. */
.campo-data {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    max-width: 190px;
    letter-spacing: .02em;
}

/* Ajuda sob o campo — 14px é o mínimo consentido para este caso. */
.ajuda-campo {
    font-size: 14px;
    color: var(--tinta-ténue);
    margin: 5px 0 0;
    line-height: 1.5;
}

.erro-campo {
    font-size: 15px;
    color: var(--vermelho);
    margin: 5px 0 0;
}

fieldset {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 16px 20px 20px;
    margin: 0 0 22px;
}

legend {
    font-family: var(--fonte);
    font-size: 18px;
    font-weight: 600;
    padding: 0 8px;
}

.caixas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px 18px;
}
.caixas-compactas { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }

.caixa {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    cursor: pointer;
    padding: 3px 0;
}
.caixa input { width: 17px; height: 17px; accent-color: var(--acento); flex-shrink: 0; }

.campo-grupo { min-width: 0; }

.linha-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 20px;
}

/* ---- Pesquisa ---------------------------------------------------------- */

/*
 * O .heroi define color:#fff para o texto sobre o gradiente escuro. Este cartão
 * tem fundo claro e vive lá dentro, por isso tem de repor a sua própria cor —
 * sem isto, as legendas e as etiquetas das caixas de selecção da pesquisa
 * avançada ficavam brancas sobre branco, invisíveis.
 */
.pesquisa {
    background: var(--fundo-cartao);
    color: var(--tinta);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 18px;
    box-shadow: var(--sombra);
    margin: 24px 0;
}

.pesquisa legend,
.pesquisa .caixa,
.pesquisa label { color: var(--tinta); }

.pesquisa .etiqueta { color: var(--tinta-suave); }

.pesquisa-linha-principal {
    display: grid;
    /* 230px e não 200: a seta do select ocupa 38px de padding à direita, e a
       200 o texto "Arrendar ou comprar" ficava cortado. */
    grid-template-columns: 1fr 230px auto;
    gap: 10px;
}

.campo-pesquisa { font-size: 17px; }

.pesquisa-avancada { margin-top: 14px; }

.pesquisa-avancada > summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--acento);
    padding: 6px 0;
}

.pesquisa-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--linha);
}
.pesquisa-grelha fieldset { margin: 0; }

.pesquisa-accoes { display: flex; gap: 10px; margin-top: 16px; }

/* ---- Cartões de anúncio ------------------------------------------------ */

.lista-anuncios { display: flex; flex-direction: column; gap: 14px; }

.cartao {
    display: grid;
    grid-template-columns: 172px 1fr 190px;
    gap: 18px;
    background: var(--fundo-cartao);
    color: var(--tinta);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 16px;
    box-shadow: var(--sombra);
    transition: box-shadow .15s, border-color .15s;
}
.cartao:hover { box-shadow: var(--sombra-forte); border-color: var(--linha-forte); }

.cartao-destacado {
    border-color: var(--ambar);
    background: linear-gradient(var(--fundo-cartao), var(--fundo-cartao)) padding-box,
                linear-gradient(135deg, var(--ambar), var(--acento)) border-box;
    border: 2px solid transparent;
}

.cartao-foto { position: relative; display: block; }
.cartao-foto img {
    width: 100%;
    height: 132px;
    object-fit: cover;
    border-radius: var(--raio-pequeno);
    background: var(--fundo-alterno);
}

.etiqueta-destaque {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--ambar);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 4px;
}

.cartao-corpo { min-width: 0; }

.cartao-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 7px;
    font-size: 15px;
    color: var(--tinta-ténue);
}

.crachá {
    font-size: 15px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
}
.crachá-arrendamento { background: var(--acento-claro); color: var(--acento-escuro); }
.crachá-venda        { background: var(--verde-claro);  color: var(--verde); }
.crachá-procura      { background: var(--ambar-claro);  color: var(--ambar); }
/* Diz de onde veio o anúncio antes de se abrir a ficha: quem clica já sabe que
   o contacto se faz noutro sítio, em vez de o descobrir lá dentro. */
.crachá-origem       { background: var(--fundo-alterno); color: var(--tinta-suave); font-weight: 500; }

/*
 * Uma procura não tem imóvel para fotografar. No lugar da fotografia fica o que
 * a pessoa procura, para o cartão continuar a ler-se de relance numa listagem.
 */
.cartao-foto-procura {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 132px;
    border-radius: var(--raio-pequeno);
    background: var(--ambar-claro);
    border: 1px dashed #d9c48a;
    text-decoration: none;
    text-align: center;
    padding: 10px;
}
.marca-procura-tipo {
    display: block;
    font-family: var(--fonte);
    font-size: 17px;
    font-weight: 600;
    color: var(--ambar);
}
.marca-procura-zona {
    display: block;
    font-size: 15px;
    color: var(--ambar);
    margin-top: 3px;
}

.painel-procura {
    border-left: 3px solid var(--ambar);
}

/* Sem miniatura: uma procura não tem imóvel para mostrar. */
.lista-lado-procura {
    grid-template-columns: 1fr;
    padding-left: 12px;
    border-left: 2px solid var(--ambar-claro);
}

.intro-procuras {
    font-size: 17px;
    color: var(--tinta-suave);
    max-width: 62ch;
    margin: 0 0 var(--v-m);
}

.filtros-lado {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: var(--v-m);
}

.cartao-titulo { font-size: 20px; margin: 0 0 6px; }
.cartao-titulo a { color: var(--tinta); text-decoration: none; }
.cartao-titulo a:hover { color: var(--acento); }

.cartao-descricao {
    color: var(--tinta-suave);
    font-size: 15px;
    margin: 0 0 9px;
}

.cartao-atributos {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0; padding: 0;
    font-size: 15px;
    color: var(--tinta-suave);
    flex-wrap: wrap;
}

.cartao-lado {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: stretch;
    justify-content: flex-start;
    border-left: 1px solid var(--linha);
    padding-left: 18px;
}

.cartao-preco {
    font-family: var(--fonte);
    font-size: 22px;
    font-weight: 700;
    color: var(--tinta);
    margin: 0 0 4px;
    text-align: right;
    line-height: 1.2;
    text-wrap: balance;
}

.cartao-lado .botao { width: 100%; }

/* ---- Grelha de cartões (montra) ---------------------------------------- */

.grelha-montra {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.montra-item {
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .15s, box-shadow .15s;
}
.montra-item:hover { transform: translateY(-2px); box-shadow: var(--sombra-forte); color: inherit; }

.montra-item img { width: 100%; height: 160px; object-fit: cover; background: var(--fundo-alterno); }

.montra-corpo { padding: 12px 14px 15px; }

.montra-titulo {
    font-family: var(--fonte);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.montra-preco { font-size: 16px; font-weight: 600; color: var(--acento); margin: 0; }
.montra-local { font-size: 15px; color: var(--tinta-ténue); margin: 3px 0 0; }

/* ---- Página inicial ---------------------------------------------------- */

.heroi {
    background: linear-gradient(160deg, #3a322c 0%, #5c4132 55%, #7d4a2c 100%);
    color: #fff;
    padding: 56px 0 44px;
}

.heroi h1 {
    color: #fff;
    font-size: 42px;
    max-width: 17ch;
    margin-bottom: .3em;
}

.heroi-sub {
    font-size: 19px;
    color: rgba(255, 255, 255, .82);
    max-width: 56ch;
    margin-bottom: 26px;
}

.heroi .pesquisa { margin-bottom: 0; }

.atalhos-tipo {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.atalho {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    text-decoration: none;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 15px;
}
.atalho:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.duas-colunas {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 34px;
    align-items: start;
}

/*
 * Um item de grelha tem min-width:auto, ou seja, nunca encolhe abaixo da
 * largura mínima do seu conteúdo. Bastava a tira de miniaturas da galeria
 * (quatro imagens de 118px) para a coluna passar a medir 502px e a página
 * inteira transbordar num ecrã de 390px — o overflow-x:auto da tira cria a
 * barra de deslocamento mas não reduz essa largura mínima.
 */
.duas-colunas > * { min-width: 0; }

.coluna-lado {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: var(--v-m);
}

/* Na entrada, a coluna da direita rola com a página em vez de acompanhar o
   scroll. O sticky faz sentido onde a coluna serve a leitura ao lado (a caixa de
   contacto na ficha), não na montra de entrada. */
body.pagina-inicial .coluna-lado {
    position: static;
    top: auto;
}

.painel {
    background: var(--fundo-cartao);
    color: var(--tinta);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 18px;
    box-shadow: var(--sombra);
}
.painel h2, .painel h3 { font-size: 18px; margin: 0 0 var(--v-s); }
.painel > :last-child { margin-bottom: 0; }

/* "Contactar o anunciante" a 25px partia em duas linhas na coluna estreita. */
.caixa-contacto h2 { font-size: 20px; margin: 0 0 var(--v-s); line-height: 1.2; }

.lista-lado { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

/* As ligações simples da lista (a lista de distritos) apareciam sublinhadas a
   cor-de-laranja, com o aspecto de ligação por omissão do browser. */
.lista-lado > li > a:not(.lista-lado-item) {
    display: block;
    padding: 3px 0;
    color: var(--tinta-suave);
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid transparent;
}
.lista-lado > li > a:not(.lista-lado-item):hover {
    color: var(--acento);
    border-bottom-color: var(--linha);
}

.lista-lado-item {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 11px;
    text-decoration: none;
    color: inherit;
    align-items: start;
}
.lista-lado-item img { width: 74px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--fundo-alterno); }
.lista-lado-item strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.lista-lado-item span { font-size: 15px; color: var(--acento); }

/* Etiqueta legal de publicidade — isenta do mínimo de 15px. */
.rotulo-publicidade {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tinta-ténue);
    margin: 0 0 5px;
}

/* ---- Detalhe do imóvel ------------------------------------------------- */

/*
 * A página de detalhe tem uma sequência de leitura: ver o imóvel, ver os
 * números, ler a descrição, conferir as características, situá-lo, e só depois
 * olhar para alternativas. O espaçamento acompanha essa sequência — largo entre
 * assuntos, apertado entre um título e aquilo que ele introduz.
 */
.detalhe-topo { margin: var(--v-m) 0 var(--v-l); }

.detalhe-corpo > * + * { margin-top: var(--v-l); }

/* A galeria e a ficha são a mesma fase — ver o imóvel — e ficam mais juntas. */
.detalhe-corpo > .galeria + .ficha { margin-top: var(--v-m); }

/* As alternativas são uma fase à parte: merecem uma pausa maior. */
.detalhe-corpo > .detalhe-semelhantes { margin-top: var(--v-xl); }

.detalhe-seccao > h2 {
    margin: 0 0 var(--v-s);
    /* Uma marca curta à esquerda do título ancora a coluna e separa os assuntos
       sem precisar de uma linha a toda a largura. */
    padding-left: 14px;
    border-left: 3px solid var(--acento);
    line-height: 1.1;
}

.detalhe-seccao > :last-child { margin-bottom: 0; }

.migalhas {
    font-size: 15px;
    color: var(--tinta-ténue);
    margin-bottom: 12px;
}
.migalhas a { color: var(--tinta-suave); text-decoration: none; }
.migalhas a:hover { color: var(--acento); }

.detalhe-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 26px;
    flex-wrap: wrap;
}

.detalhe-titulo { margin: 0 0 6px; font-size: 30px; }

.detalhe-local { color: var(--tinta-suave); font-size: 17px; margin: 0; }

.detalhe-preco-caixa { text-align: right; }

.detalhe-preco {
    font-family: var(--fonte);
    font-size: 32px;
    font-weight: 700;
    color: var(--acento);
    margin: 0;
    line-height: 1.15;
}

.detalhe-preco-nota { font-size: 15px; color: var(--tinta-ténue); margin: 2px 0 0; }

.galeria { margin: 0; }

.galeria-principal img {
    display: block;
    width: 100%;
    /* Altura definida, não "auto": com uma caixa de dimensões fixas o
       object-fit: cover corta mesmo as margens e mostra o centro. Com height
       auto + max-height, o browser mantinha a proporção e limitava-se a encolher
       a imagem toda até à altura — uma foto vertical ficava alta e estreita, sem
       encher o espaço e sem cortar nada. Assim enche a largura, mostra o máximo
       possível e recorta o resto ao centro. */
    height: clamp(260px, 46vh, 500px);
    object-fit: cover;
    object-position: center;
    border-radius: var(--raio);
    background: var(--fundo-alterno);
}

.galeria-miniaturas {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    min-width: 0;
    /* Deslocamento por passos, para as miniaturas ficarem sempre alinhadas. */
    scroll-snap-type: x proximity;
}
.galeria-miniaturas img { scroll-snap-align: start; }
.galeria-miniaturas img {
    width: 118px; height: 88px;
    object-fit: cover;
    border-radius: var(--raio-pequeno);
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.galeria-miniaturas img.activa,
.galeria-miniaturas img:hover { border-color: var(--acento); }

/*
 * A ficha usava o truque de um fundo com gap de 1px a fazer de linhas. Com sete
 * campos numa grelha de quatro, sobrava uma célula pintada e vazia no fim. As
 * linhas passam a ser bordas dos próprios campos, e uma linha incompleta deixa
 * de deixar buraco.
 */
.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    margin: 0;
}

.ficha-item {
    padding: 14px 18px;
    border-right: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
}
.ficha-rotulo { font-size: 15px; color: var(--tinta-ténue); margin: 0 0 var(--v-xs); }
.ficha-valor { font-size: 17px; font-weight: 600; margin: 0; line-height: 1.25; }

.lista-caracteristicas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px 24px;
    list-style: none;
    margin: 0; padding: 0;
    font-size: 16px;
}
.lista-caracteristicas li::before { content: "✓ "; color: var(--verde); font-weight: 700; }

.detalhe-localizacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v-m);
    flex-wrap: wrap;
    padding: 18px;
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}
.detalhe-localizacao p { margin: 0; }
.detalhe-localizacao .coordenadas {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    color: var(--tinta-ténue);
    margin-top: 3px;
}

.caixa-contacto {
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 22px;
    box-shadow: var(--sombra);
}

/*
 * Anúncio importado: a caixa não recolhe dados, encaminha. O contorno mais
 * marcado e a barra ao lado separam-na da caixa de contacto normal — são coisas
 * diferentes e não devem parecer a mesma.
 */
.caixa-origem {
    border-color: var(--linha-forte);
    border-left: 4px solid var(--acento);
}
.caixa-origem .origem-nota {
    color: var(--tinta-suave);
    margin: 0 0 var(--v-m);
}
/*
 * O rótulo leva o nome da imobiliária, que tanto pode ser "Zome" como "Keller
 * Williams Portugal", e vive numa coluna estreita. O .botao é nowrap por
 * omissão — bem, para os rótulos curtos do resto do sítio — mas aqui isso punha
 * o texto a sair pela borda. Este quebra, e o entrelinhamento e o espaçamento
 * fazem com que duas linhas pareçam de propósito e não um acidente.
 */
.botao-origem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
    text-wrap: balance;
}
.botao-origem .ico { flex: none; }

.contacto-anunciante {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: var(--v-m);
    margin-bottom: var(--v-m);
    border-bottom: 1px solid var(--linha);
}
.contacto-anunciante img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--linha); }

/* Acções secundárias da coluna lateral: recolhidas por omissão. */
.accoes-secundarias > details > summary {
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--acento);
    padding: 2px 0;
    list-style: none;
}
.accoes-secundarias > details > summary::-webkit-details-marker { display: none; }
.accoes-secundarias > details > summary::before {
    content: "+ ";
    font-weight: 400;
}
.accoes-secundarias > details[open] > summary::before { content: "– "; }
.accoes-secundarias > details[open] > summary { margin-bottom: var(--v-s); }

.ligacao-secundaria {
    margin: var(--v-s) 0 0;
    padding-top: var(--v-s);
    border-top: 1px solid var(--linha);
    font-size: 15px;
}

.contacto-linha { font-size: 17px; margin: 0 0 var(--v-xs); }
.contacto-linha strong { color: var(--tinta-suave); font-weight: 600; font-size: 15px; display: block; }

/* ---- Perfil (cartão único, avatar uma só vez) -------------------------- */

.painel-cartao {
    background: var(--fundo-cartao);
    color: var(--tinta);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 26px;
    margin-bottom: 24px;
}

.identidade {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--linha);
    margin-bottom: 22px;
}

.identidade-avatar {
    width: 86px; height: 86px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--linha);
    background: var(--fundo-alterno);
    flex-shrink: 0;
}

.identidade-dados h1 { font-size: 25px; margin: 0 0 3px; }
.identidade-dados p { margin: 0; color: var(--tinta-suave); font-size: 16px; }
.identidade-papel {
    display: inline-block;
    margin-top: 7px;
    font-size: 15px;
    background: var(--acento-claro);
    color: var(--acento-escuro);
    padding: 2px 10px;
    border-radius: 999px;
}

.zona-largar {
    border: 2px dashed var(--linha-forte);
    border-radius: var(--raio);
    padding: 26px 20px;
    text-align: center;
    cursor: pointer;
    display: block;
    background: var(--fundo);
    transition: border-color .15s, background .15s;
}
.zona-largar:hover, .zona-largar.sobrevoo {
    border-color: var(--acento);
    background: var(--acento-claro);
}
.zona-largar-titulo { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.zona-largar-ajuda { font-size: 14px; color: var(--tinta-ténue); margin: 0; }

.accoes-foto { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---- Tabelas ----------------------------------------------------------- */

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
}

.tabela th, .tabela td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--linha);
}

.tabela th {
    background: var(--fundo-alterno);
    font-size: 15px;
    font-weight: 600;
    color: var(--tinta-suave);
    letter-spacing: .01em;
}

.tabela tr:last-child td { border-bottom: none; }
.tabela td.numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.data { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; white-space: nowrap; }

.tabela-envolve { overflow-x: auto; }

/* ---- Peças que faltavam ------------------------------------------------ */

/* Barra de ordenação das listagens: sem isto, o rótulo, a lista e o botão
   empilhavam-se em três linhas. */
.ordenacao {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.ordenacao .etiqueta { margin: 0; white-space: nowrap; }
.ordenacao .campo { width: auto; min-width: 200px; }

/* Bloco de publicidade. O <ins> do AdSense recebe as dimensões do Google; aqui
   só reservamos altura mínima, para o conteúdo não saltar quando o anúncio
   carrega. */
.publicidade {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.publicidade ins { display: block; width: 100%; }
.publicidade img { max-width: 100%; height: auto; display: block; }
.publicidade a { display: block; line-height: 0; }

/* A medida gravada no banner reserva o espaço, mas nunca passa da coluna onde
   está: um 300x250 numa coluna de 230 saía por fora do painel. */
.publicidade,
.espaco-publicitario { max-width: 100%; }

/* Um banner de imagem tem a medida que tem; só as posições largas precisam de
   altura reservada, e essas recebem-na do próprio banner quando ela é conhecida. */
.publicidade-direita,
.publicidade-esquerda { min-height: 0; }
.publicidade-topo,
.publicidade-rodape,
.publicidade-intercalada .publicidade { min-height: 90px; }

.publicidade-rodape-envolve { margin: 30px auto 0; }
.publicidade-topo-envolve { margin: 18px auto 0; }

/* Publicidade a meio do conteúdo: separada do que vem antes e do que vem
   depois, para não se confundir com um resultado da lista.
   O nome não repete o da posição de propósito — .publicidade-conteudo é o
   bloco de dentro, e com o mesmo nome as duas molduras somavam-se. */
.publicidade-intercalada {
    margin: 24px 0;
    padding: 14px 0;
    border-top: 1px solid var(--linha);
    border-bottom: 1px solid var(--linha);
    text-align: center;
}
.publicidade-intercalada .publicidade { justify-content: center; }

/* Faixa vertical ao lado do conteúdo.
   Só aparece quando sobra espaço dos dois lados da coluna de leitura — abaixo
   disso a medida do texto vale mais do que o banner, e a faixa desaparece. Fica
   presa à janela, e não à página: assim acompanha quem lê sem ter de adivinhar
   onde acaba o cabeçalho de cada página, que muda de página para página. */
.faixa-lateral {
    display: none;
}
@media (min-width: 1560px) {
    .faixa-lateral {
        display: block;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 160px;
        max-height: calc(100vh - 40px);
        overflow: hidden;
        /* Fundo próprio: a faixa passa por cima de bandas claras e escuras, e
           sem ele parecia um buraco no desenho ao atravessar o heroi. */
        background: var(--fundo-cartao);
        border: 1px solid var(--linha);
        border-radius: var(--raio);
        padding: 8px;
    }
    .faixa-lateral-esquerda { left: 16px; }
    .faixa-lateral .publicidade { min-height: 0; }
    .faixa-lateral .rotulo-publicidade { text-align: center; }
}

/* Nas posições largas o rótulo acompanha o banner, que está centrado. */
.publicidade-topo-envolve .rotulo-publicidade,
.publicidade-rodape-envolve .rotulo-publicidade,
.publicidade-intercalada .rotulo-publicidade { text-align: center; }

/* Espaço reservado, apresentado apenas fora de produção: mostra onde o anúncio
   vai aparecer enquanto não estiver configurado. */
.espaco-publicitario {
    min-height: 250px;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio-pequeno);
    background: var(--fundo-alterno);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
}
.espaco-publicitario span {
    font-size: 15px;
    /* Sobre o fundo alterno, o tom ténue ficava a 4.44 de contraste. */
    color: var(--tinta-suave);
}
.espaco-publicitario-rodape { min-height: 90px; }

.formulario-newsletter { display: block; }
.formulario-newsletter .etiqueta:first-child { margin-top: 0; }

/* Metadados do cartão: o tipo em destaque discreto, o local a seguir. */
.cartao-tipo { font-weight: 600; color: var(--tinta-suave); }
.cartao-local { color: var(--tinta-ténue); }
.cartao-local::before { content: "· "; }

/* ---- Paginação --------------------------------------------------------- */

.paginacao {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin: 34px 0;
    flex-wrap: wrap;
}

.paginacao-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pequeno);
    background: var(--fundo-cartao);
    color: var(--tinta);
    text-decoration: none;
    font-size: 15px;
}
.paginacao-item:hover { border-color: var(--acento); color: var(--acento); }
.paginacao-item.actual {
    background: var(--acento);
    border-color: var(--acento);
    color: #fff;
    font-weight: 600;
}
.paginacao-corte { color: var(--tinta-ténue); padding: 0 4px; }

/* ---- Estado vazio ------------------------------------------------------ */

.vazio {
    text-align: center;
    padding: 56px 20px;
    background: var(--fundo-cartao);
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio);
}
.vazio h2 { font-size: 21px; }
.vazio p { color: var(--tinta-suave); max-width: 50ch; margin-inline: auto; }

/* ---- Formulários centrados (entrar, registar) -------------------------- */

.folha-estreita { max-width: 460px; margin: 44px auto; }
.folha-media    { max-width: 760px; margin: 32px auto; }

.folha-estreita .painel-cartao,
.folha-media .painel-cartao { margin-bottom: 18px; }

.ligacoes-abaixo {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
    flex-wrap: wrap;
}

/* ---- Mapa -------------------------------------------------------------- */

#mapa-imoveis {
    height: 620px;
    border-radius: var(--raio);
    border: 1px solid var(--linha);
    background: var(--fundo-alterno);
}

/* ---- Estatísticas ------------------------------------------------------ */

.cartoes-numero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 22px 0;
}

.cartao-numero {
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 18px;
    box-shadow: var(--sombra);
}
.cartao-numero .valor {
    font-family: var(--fonte);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.cartao-numero .rotulo { font-size: 15px; color: var(--tinta-ténue); margin: 4px 0 0; }

.barras {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 150px;
    padding: 14px;
    background: var(--fundo-cartao);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow-x: auto;
}
.barra {
    flex: 1 0 14px;
    background: var(--acento);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}

/* ---- Rodapé ------------------------------------------------------------ */

.rodape {
    background: var(--tinta);
    color: rgba(255, 255, 255, .78);
    padding: 44px 0 0;
    margin-top: 50px;
}

.rodape-grelha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 32px;
    padding-bottom: 34px;
}

.rodape-bloco h2 {
    font-size: 17px;
    color: #fff;
    margin-bottom: 12px;
}

.rodape-bloco ul { list-style: none; margin: 0; padding: 0; }
.rodape-bloco li { margin-bottom: 7px; }
.rodape-bloco a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 15px; }
.rodape-bloco a:hover { color: #fff; }

.rodape-newsletter { grid-column: span 2; }
.rodape-newsletter p { font-size: 15px; color: rgba(255, 255, 255, .66); }
.rodape-newsletter .etiqueta { color: rgba(255, 255, 255, .78); }
.rodape-newsletter .campo {
    /* Cor sólida, não translúcida: a lista do <select> herda este fundo, e uma
       cor com alfa compunha-se de forma imprevisível sobre o popup do sistema. */
    background-color: #3d3833;
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

.rodape-newsletter .campo::placeholder {
    /* rgba(255,255,255,.5) dava contraste insuficiente sobre este fundo. */
    color: rgba(255, 255, 255, .72);
}

.rodape-newsletter select.campo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.rodape-newsletter .campo:focus {
    outline-color: #fff;
    border-color: #fff;
}
.rodape-newsletter .botao { margin-top: 14px; }

/* CAPTCHA do rodapé: a imagem e o botão de recarregar lado a lado. */
.captcha-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    flex-wrap: wrap;
}
/* Por omissão as cores servem fundo claro (o formulário de registo). O rodapé,
   que é escuro, tem a sua própria variante mais abaixo. */
.captcha-imagem {
    display: block;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--linha);
    background: #f4efe8;   /* fundo claro da própria imagem */
    max-width: 100%;
    height: auto;
}
.captcha-recarregar {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--linha-forte);
    background: var(--fundo-cartao);
    color: var(--tinta-suave);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.captcha-recarregar:hover { background: var(--fundo-alterno); color: var(--tinta); }

/* Variante para o rodapé escuro. */
.rodape-newsletter .captcha-imagem { border-color: rgba(255, 255, 255, .25); }
.rodape-newsletter .captcha-recarregar {
    border-color: rgba(255, 255, 255, .25);
    background: transparent;
    color: rgba(255, 255, 255, .78);
}
.rodape-newsletter .captcha-recarregar:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.campo-captcha {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    max-width: 180px;
}
.campo-captcha::placeholder { letter-spacing: 0; text-transform: none; }

.rodape-fim {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 18px 20px;
    font-size: 15px;
    color: rgba(255, 255, 255, .55);
}
.rodape-fim p { margin: 0; }

/* ---- Adaptação a ecrãs estreitos --------------------------------------- */

@media (max-width: 980px) {
    .duas-colunas { grid-template-columns: 1fr; }
    .coluna-lado { position: static; }
    .rodape-newsletter { grid-column: span 1; }
}

@media (max-width: 760px) {
    h1 { font-size: 27px; }
    .heroi h1 { font-size: 31px; }
    .heroi { padding: 36px 0 30px; }

    .cabecalho-linha { flex-wrap: wrap; gap: 12px; min-height: auto; padding-block: 12px; }
    .navegacao-principal { order: 3; width: 100%; margin: 0; gap: 18px; }
    .cabecalho-accoes { margin-left: auto; }

    .pesquisa-linha-principal { grid-template-columns: 1fr; }

    .cartao { grid-template-columns: 1fr; }
    .cartao-foto img { height: 190px; }
    .cartao-lado {
        border-left: none;
        border-top: 1px solid var(--linha);
        padding-left: 0;
        padding-top: 14px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    /* O preço não pode partir: "315 000 €" caía em três linhas espremidas
       contra o botão. Fica com a largura de que precisa e o botão ocupa o resto. */
    .cartao-preco {
        text-align: left;
        margin: 0;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .cartao-lado form { flex: 1 1 auto; min-width: 0; }
    .cartao-lado > .botao { flex: 1 1 auto; width: auto; }

    .detalhe-cabecalho { flex-direction: column; }
    .detalhe-preco-caixa { text-align: left; }

    .identidade { flex-direction: column; text-align: center; }
}

@media print {
    .cabecalho, .rodape, .caixa-contacto, .paginacao, .botao { display: none; }
    body { background: #fff; font-size: 12pt; }
    a { color: inherit; text-decoration: none; }
}