/* =====================================================================
   Achei República — protótipo.

   Branco dominante, azul da logo como única cor de ação. O laranja da
   logo antiga e o roxo do protótipo anterior saíram: três cores de
   marca no mesmo produto confundem, e a versão azul da logo é a que
   combina com um produto de tecnologia.

   Regra que guia tudo aqui: o aluno decide em segundos, no celular,
   com uma mão. Então pouco texto, alvo grande e uma ação clara por
   tela. Nada de parede de caixinha.
   ===================================================================== */

:root {
    --azul: #007dec;
    --azul-forte: #0062ba;
    --azul-botao: #0069c9;
    --azul-fraco: #eaf5ff;
    --azul-linha: #cfe6fb;
    --petroleo: #26547c;

    --papel: #ffffff;
    --nevoa: #f7fafd;
    --tinta: #14202b;
    --tinta-suave: #5a6b7b;
    --tinta-fraca: #93a1ae;
    --linha: #e4ecf3;

    --verde: #12b76a;

    --raio: 14px;
    --raio-g: 24px;
    --sombra: 0 1px 2px rgba(20,32,43,.04), 0 16px 34px -18px rgba(20,32,43,.2);
    --sombra-alta: 0 30px 70px -26px rgba(0,98,186,.42);

    --display: 'Unbounded', system-ui, sans-serif;
    --texto: 'Plus Jakarta Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, select, input { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.14; letter-spacing: -0.02em; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: .95rem;
    padding: 15px 26px;
    border-radius: 999px;
    transition: transform .14s, background-color .2s, box-shadow .2s;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Fundo mais escuro que o azul da marca de propósito: branco sobre
   #007DEC dá 4,08:1 de contraste e reprova no mínimo de 4,5. Com
   #0069c9 sobe para 5,43 — e isso é o aluno conseguindo ler o botão no
   sol, na rua, que é onde ele vai usar. O #007DEC continua nos textos e
   detalhes, onde fica sobre branco e o problema não existe. */
.btn-azul { background: var(--azul-botao); color: #fff; box-shadow: 0 10px 24px -10px rgba(0,105,201,.75); }
.btn-azul:hover { background: var(--azul-forte); }

.btn-linha { border: 1.5px solid var(--linha); color: var(--tinta); background: #fff; }
.btn-linha:hover { border-color: var(--azul); color: var(--azul-forte); }

.btn-branco { background: #fff; color: var(--azul-forte); }
.btn-branco:hover { background: var(--azul-fraco); }

/* ---------- Topo ---------- */
/* Grudado no alto porque a página é de busca e se rola muito: trocar de
   cidade ou anunciar não pode exigir voltar lá em cima. */
.topo {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linha);
}

.topo-barra {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    height: 78px;
}

/* Largura fixa e altura livre: a logo é horizontal, então o que manda
   na presença dela é a largura. Assim trocar o arquivo por uma versão
   mais alta ou mais baixa não deforma nada.
   255px na proporção 4,607 do arquivo dá 55px de altura — por isso a
   barra acima subiu para 78px, senão a logo ficaria sufocada. */
.marca img { width: 255px; height: auto; }

/* No celular ela encolhe para caber ao lado do sanduíche com folga. */
@media (max-width: 520px) {
    .marca img { width: 200px; }
}

.menu {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
}
.menu a { font-size: .93rem; font-weight: 600; color: var(--tinta-suave); transition: color .18s; }
.menu a:hover { color: var(--azul-forte); }

.menu-botao {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 42px; height: 38px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--linha);
    border-radius: 10px;
}
.menu-botao span {
    display: block; width: 17px; height: 2px;
    border-radius: 2px; background: var(--tinta);
    transition: transform .2s, opacity .2s;
}
.menu-botao.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-botao.aberto span:nth-child(2) { opacity: 0; }
.menu-botao.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 1030px, e não um valor redondo escolhido no olho: a logo tem 255px, o
   menu inteiro tem 677 e a página reserva 48 de respiro lateral. Isso dá
   980 para caber espremido; com 48 de folga entre logo e menu, 1028.
   Abaixo disso o sanduíche resolve melhor. */
@media (max-width: 1030px) {
    .menu-botao { display: flex; }
    .menu {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px;
        background: #fff;
        border: 1px solid var(--linha);
        border-radius: 18px;
        box-shadow: var(--sombra);
    }
    .menu.aberto { display: flex; }
    .menu a { padding: 13px 14px; border-radius: 11px; }
    .menu a:hover { background: var(--azul-fraco); }
    .menu .btn { margin-top: 6px; }
}

/* ---------- Primeira dobra ---------- */
.heroi {
    position: relative;
    /* Respiro curto de propósito: a dobra inteira mais o seletor de
       cidade precisam caber numa tela de computador sem rolar, e a
       janela mais apertada que vale a pena atender tem uns 580px de
       altura útil. */
    padding: 30px 0 38px;
    overflow: hidden;
    background:
        radial-gradient(760px 380px at 88% -6%, rgba(0,125,236,.10), transparent 62%),
        radial-gradient(560px 320px at 4% 108%, rgba(38,84,124,.07), transparent 60%);
}

/* Largura cheia, sem coluna ao lado. A primeira dobra passou a ter uma
   ação só — dizer a cidade — e coluna dividida competiria com ela. */
.heroi-corpo { max-width: 54rem; }

.chapeu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--azul-forte);
    background: var(--azul-fraco);
    border: 1px solid var(--azul-linha);
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.chapeu .pisca {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--verde);
    box-shadow: 0 0 0 3px rgba(18,183,106,.2);
}

.heroi h1 {
    font-size: clamp(1.95rem, 4.4vw, 2.9rem);
    font-weight: 800;
    margin-bottom: 16px;
}
.heroi h1 em { font-style: normal; color: var(--azul); }

.heroi-linha {
    font-size: 1rem;
    color: var(--tinta-suave);
    max-width: 46em;
    margin-bottom: 24px;
}

.heroi-acoes { display: flex; gap: 12px; flex-wrap: wrap; }

.heroi-prova {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--linha);
    font-size: .88rem;
    color: var(--tinta-suave);
}
.heroi-prova b {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.18rem;
    color: var(--tinta);
    line-height: 1.2;
}

/* ---------- Cartão de compatibilidade ---------- */
/* É o produto inteiro num cartão. Vem antes de qualquer anúncio de
   propósito: mostra na primeira olhada que aqui não é lista de
   classificados, é recomendação — e é o que o aluno manda no grupo. */
/* O cartão vive junto dos anúncios agora. Largura limitada para não
   virar uma faixa larga e rasa no computador: ele é um cartão, e a
   proporção é o que faz o número grande ter peso. */
.match {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 24px;
    box-shadow: var(--sombra);
    position: relative;
    max-width: 30rem;
    margin-bottom: 26px;
}

.match-topo {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--linha);
}

.match-nota {
    position: relative;
    width: 78px; height: 78px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--azul) var(--fatia, 0deg), var(--azul-fraco) 0);
    transition: background .9s ease;
}
.match-nota::after {
    content: '';
    position: absolute; inset: 7px;
    background: #fff; border-radius: 50%;
}
.match-nota b {
    position: relative; z-index: 1;
    font-family: var(--display); font-weight: 800; font-size: 1.24rem;
    color: var(--azul-forte);
}

.match-quem h3 { font-size: 1.14rem; font-weight: 700; margin-bottom: 3px; }
.match-quem p { font-size: .88rem; color: var(--tinta-suave); }

.match-lista { padding-top: 16px; display: grid; gap: 9px; list-style: none; }

.match-lista li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .93rem;
    opacity: 0; transform: translateY(6px);
    animation: entra .5s ease forwards;
}
.match-lista li:nth-child(1) { animation-delay: .15s; }
.match-lista li:nth-child(2) { animation-delay: .30s; }
.match-lista li:nth-child(3) { animation-delay: .45s; }
.match-lista li:nth-child(4) { animation-delay: .60s; }
.match-lista li:nth-child(5) { animation-delay: .75s; }

@keyframes entra { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .match-lista li { opacity: 1; transform: none; animation: none; }
    .match-nota { transition: none; }
}

.match-lista .ok {
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
    border-radius: 50%;
    background: rgba(18,183,106,.13);
    color: var(--verde);
    display: grid; place-items: center;
    font-size: .66rem; font-weight: 900;
}

.match-pe {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--linha);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.match-preco { font-family: var(--display); font-weight: 700; font-size: 1.28rem; }
.match-preco span { font-family: var(--texto); font-size: .8rem; font-weight: 500; color: var(--tinta-suave); }

/* ---------- Como funciona ---------- */
/* A foto ao lado dos passos, e não atrás do cartão do match: encoberta
   pelo cartão ela aparecia pela metade e não valia o peso que custa. */
.como-grade {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 34px;
    align-items: stretch;
}
@media (max-width: 900px) { .como-grade { grid-template-columns: 1fr; } }

.como-foto {
    border-radius: var(--raio-g);
    overflow: hidden;
    border: 1px solid var(--linha);
    min-height: 100%;
}
/* width/height do <img> valem como altura fixa: sem o height:auto eles
   engolem o object-fit e a foto sai com a altura original do arquivo. */
.como-foto img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
@media (max-width: 900px) { .como-foto img { min-height: 240px; max-height: 320px; } }

/* ---------- Seções ---------- */
.secao { padding: 86px 0; }
.secao.nevoa { background: var(--nevoa); }

.cabeca { max-width: 40em; margin-bottom: 44px; }
.cabeca h2 { font-size: clamp(1.7rem, 3.9vw, 2.45rem); font-weight: 800; margin-bottom: 12px; }
.cabeca p { color: var(--tinta-suave); font-size: 1.02rem; }

/* ---------- Como funciona ---------- */
/* Os três passos empilhados ao lado da foto: lidos de cima para baixo,
   na ordem em que acontecem. Lado a lado em três colunas eles perdem a
   noção de sequência. */
.passos { display: grid; gap: 16px; }

.passo {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 24px 26px;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 0;
    /* Os passos esticam para acompanhar a altura da foto ao lado; o
       conteúdo centralizado evita que sobre um vazio no pé de cada um. */
    align-content: center;
}
/* O número ocupa as duas linhas da coluna da esquerda; título e texto
   ficam empilhados na direita. Sem isto o texto cairia embaixo do
   número em vez de ao lado. */
.passo-num {
    grid-row: 1 / span 2;
    width: 40px; height: 40px; border-radius: 13px;
    background: var(--azul-fraco); color: var(--azul-forte);
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 800;
}
.passo h3 { grid-column: 2; font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; }
.passo p { grid-column: 2; color: var(--tinta-suave); font-size: .94rem; }

/* ---------- Vitrine ---------- */
/* A linha que segura os filtros à esquerda e a porta dos classificados
   à direita. Em tela estreita ela vira duas linhas, e a porta desce
   inteira em vez de espremer o seletor até o texto não caber. */
.linha-vitrine {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.linha-vitrine .fichas { margin-bottom: 0; flex: 1 1 auto; }

/* A porta dos classificados.

   Repete a moldura da barra de cidade de propósito: são as duas
   perguntas do site — onde você quer morar, e o que está faltando na
   casa. Parecidas na tela porque são irmãs. */
.classificados-porta {
    flex: 0 1 300px;
    /* Encostada na direita por conta própria, e não pelo space-between
       da linha. Cidade sem república esconde as fichas, e aí a porta
       ficava sendo o único filho do flex — que o space-between joga
       para a esquerda. Os classificados apareciam num canto em Alfenas
       e no outro em Varginha, sem nada explicar a mudança. */
    margin-left: auto;
    border: 1.5px solid var(--linha);
    border-radius: 13px;
    padding: 10px 14px;
    background: #fff;
}

.classificados-campo { display: flex; flex-direction: column; gap: 3px; }

.classificados-campo label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-fraca);
}

.classificados-campo select {
    width: 100%;
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--tinta);
    padding: 4px 26px 4px 0;
    border: 0;
    background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007dec'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right center;
    background-size: 20px;
    appearance: none;
    cursor: pointer;
}
.classificados-campo select:focus { outline: 2px solid var(--azul); outline-offset: 3px; }

/* O outro lado da mesma moeda, e menor de propósito: numa cidade
   universitária chega muito mais gente precisando do que saindo, e o
   caminho mais usado é o que fica maior. */
.classificados-desfazendo {
    display: inline-block;
    margin-top: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--azul);
    text-decoration: none;
}
.classificados-desfazendo:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .classificados-porta { flex: 1 1 100%; }
}

.fichas { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }

.ficha {
    font-size: .87rem; font-weight: 600;
    padding: 10px 17px; border-radius: 999px;
    border: 1px solid var(--linha); background: #fff;
    color: var(--tinta-suave);
    transition: all .16s;
}
.ficha:hover { border-color: var(--azul-linha); color: var(--azul-forte); }
.ficha.ativa { background: var(--azul); border-color: var(--azul); color: #fff; }

.abrir-filtros {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 700; color: var(--tinta-suave);
    padding: 8px 2px; margin-bottom: 26px;
}
.abrir-filtros:hover { color: var(--azul-forte); }
.abrir-filtros .seta { transition: transform .2s; }
.abrir-filtros.aberto .seta { transform: rotate(180deg); }

/* Os oitenta filtros continuam existindo, mas fechados por padrão.
   Abertos de largada viram um paredão de caixinha e o aluno desiste
   antes de ver o primeiro anúncio. */
.painel { display: none; margin-bottom: 30px; }
.painel.aberto { display: block; }

.painel-caixa {
    background: #fff; border: 1px solid var(--linha);
    border-radius: var(--raio-g); padding: 28px;
    display: grid; gap: 26px;
}

.grupo h4 {
    font-family: var(--texto);
    font-size: .73rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinta-fraca); margin-bottom: 12px;
}

.marcas { display: flex; gap: 8px; flex-wrap: wrap; }
.marca-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.marca-item span {
    display: inline-block;
    font-size: .86rem; padding: 8px 14px;
    border-radius: 999px; border: 1px solid var(--linha);
    color: var(--tinta-suave); cursor: pointer;
    transition: all .16s;
}
.marca-item input:checked + span {
    background: var(--azul-fraco); border-color: var(--azul);
    color: var(--azul-forte); font-weight: 700;
}
.marca-item input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

.campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 840px) { .campos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .campos { grid-template-columns: 1fr; } }

.campo label { display: block; font-size: .73rem; font-weight: 800; color: var(--tinta-fraca); margin-bottom: 6px; }
.campo select, .campo input {
    width: 100%; padding: 12px 13px;
    border: 1px solid var(--linha); border-radius: 12px;
    background: #fff; color: var(--tinta);
}
.campo select:focus, .campo input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }

.painel-pe { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.limpar { font-size: .88rem; font-weight: 700; color: var(--tinta-suave); }
.limpar:hover { color: var(--azul-forte); }

/* ---------- Cartões de anúncio ---------- */
.vitrine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 940px) { .vitrine { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .vitrine { grid-template-columns: 1fr; } }

.anuncio {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    overflow: hidden;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.anuncio:hover { transform: translateY(-3px); border-color: var(--azul-linha); box-shadow: var(--sombra); }

.anuncio-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(150deg, var(--azul-fraco), #dbeeff);
    display: grid; place-items: center;
}
/* Marcador honesto: ainda não há foto real de república nenhuma, e
   maquete não pode passar por anúncio de verdade. */
.anuncio-foto small {
    font-size: .7rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: #8fb8d8;
}

.selo-tipo {
    position: absolute; top: 12px; left: 12px;
    font-size: .72rem; font-weight: 700;
    background: rgba(255,255,255,.95); color: var(--tinta);
    padding: 5px 11px; border-radius: 999px;
}
.selo-match {
    position: absolute; top: 12px; right: 12px;
    font-family: var(--display); font-size: .78rem; font-weight: 800;
    background: var(--azul); color: #fff;
    padding: 6px 11px; border-radius: 999px;
}

.anuncio-corpo { padding: 18px; }
.anuncio-corpo h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 5px; }
.anuncio-onde { font-size: .87rem; color: var(--tinta-suave); margin-bottom: 13px; }

.mimos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 15px; }
.mimo {
    font-size: .76rem;
    background: var(--nevoa); border: 1px solid var(--linha);
    color: var(--tinta-suave);
    padding: 4px 10px; border-radius: 999px;
}

.anuncio-pe {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.preco { font-family: var(--display); font-weight: 700; font-size: 1.12rem; }
.preco span { font-family: var(--texto); font-size: .78rem; font-weight: 500; color: var(--tinta-suave); }
.ver { font-size: .88rem; font-weight: 700; color: var(--azul); }
.ver:hover { color: var(--azul-forte); text-decoration: underline; }

/* ---------- Cidades ---------- */
.cidades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 30px; }

/* Quatro degraus, e não dois. Pulando de 4 direto para 2, as fotos
   dobravam de tamanho de uma vez e um cartão de cidade virava um
   painel de 400px. */
@media (max-width: 1000px) { .cidades { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .cidades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .cidades { grid-template-columns: 1fr; } }

.cidade {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--linha);
    background: #fff;
}
.cidade img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.cidade figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 30px 16px 14px;
    background: linear-gradient(transparent, rgba(10,22,32,.82));
    color: #fff;
    /* Ancoradas no pé, e não centralizadas: nome de duas linhas como
       "Poços de Caldas" empurrava a etiqueta para o meio, e ela
       desalinhava das etiquetas dos cartões de nome curto. Pelo pé,
       todas as catorze ficam na mesma altura. */
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.cidade b { font-family: var(--display); font-weight: 700; font-size: .98rem; line-height: 1.25; }
.cidade .estado {
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    background: rgba(255,255,255,.2); padding: 3px 9px; border-radius: 999px;
    /* Nome de cidade longo empurrava a etiqueta e ela quebrava em duas
       linhas — "Poços de Caldas" era o caso. */
    white-space: nowrap;
    flex-shrink: 0;
}
.cidade.viva .estado { background: var(--verde); }

.proximas { display: flex; gap: 8px; flex-wrap: wrap; }
.proxima {
    font-size: .85rem; font-weight: 600;
    padding: 8px 14px; border-radius: 999px;
    border: 1px dashed var(--linha); color: var(--tinta-fraca);
}

/* ---------- Chamada do dono ---------- */
/* Marketplace morre por falta de oferta, não de procura. Esta seção é
   para o outro lado: quem tem vaga vazia e paga aluguel do mesmo jeito. */
.dono {
    background: var(--azul);
    color: #fff;
    border-radius: 28px;
    padding: 54px 46px;
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
    position: relative; overflow: hidden;
}
.dono::before {
    content: ''; position: absolute;
    width: 420px; height: 420px; border-radius: 50%;
    background: rgba(255,255,255,.12); filter: blur(70px);
    top: -160px; right: -70px; pointer-events: none;
}
@media (max-width: 840px) { .dono { grid-template-columns: 1fr; padding: 38px 26px; } }

.dono > * { position: relative; }
.dono h2 { font-size: clamp(1.55rem, 3.5vw, 2.1rem); font-weight: 800; margin-bottom: 12px; }
.dono p { color: rgba(255,255,255,.86); margin-bottom: 24px; }
.dono ul { display: grid; gap: 11px; list-style: none; }
.dono li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: rgba(255,255,255,.94); }
.dono li .ok { font-weight: 900; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--tinta); color: #92a3b2; padding: 44px 0; font-size: .89rem; }
.rodape-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rodape img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.rodape-links { display: flex; gap: 22px; flex-wrap: wrap; }
.rodape a:hover { color: #fff; }
.direitos { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }

/* ---------- Voltar ao topo ---------- */
.subir {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--azul);
    box-shadow: 0 10px 26px -8px rgba(0,125,236,.8);
    display: grid; place-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s, background-color .2s;
}
.subir.aparece { opacity: 1; visibility: visible; }
.subir:hover { background: var(--azul-forte); }
.subir svg { width: 20px; height: 20px; fill: #fff; }

/* ---------- Questionário ---------- */
/* Tela cheia e uma pergunta de cada vez. Formulário longo é onde o
   aluno desiste; aqui cada tela pede uma decisão só, em alvo grande o
   bastante para o polegar. */
.quiz {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10, 22, 32, .55);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    padding: 20px;
}
.quiz[hidden] { display: none; }

.quiz-caixa {
    width: min(560px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
    display: flex;
    flex-direction: column;
    animation: sobe .28s ease;
}
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .quiz-caixa { animation: none; } }

.quiz-topo {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px 0;
}

.quiz-progresso {
    flex: 1;
    height: 6px;
    background: var(--azul-fraco);
    border-radius: 999px;
    overflow: hidden;
}
.quiz-progresso span {
    display: block; height: 100%; width: 20%;
    background: var(--azul);
    border-radius: 999px;
    transition: width .32s ease;
}

.quiz-fechar {
    width: 34px; height: 34px; border-radius: 50%;
    color: var(--tinta-fraca); font-size: .9rem;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.quiz-fechar:hover { background: var(--nevoa); color: var(--tinta); }

.quiz-corpo { padding: 22px 26px 8px; }
.quiz-conta {
    font-size: .74rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--azul-forte);
}
.quiz-corpo h2 { font-size: 1.6rem; font-weight: 800; margin: 10px 0 6px; }
.quiz-dica { color: var(--tinta-suave); font-size: .94rem; margin-bottom: 22px; }

.quiz-opcoes { display: grid; gap: 10px; }

/* Alvo de 56px: dá para acertar com o polegar andando na rua, que é
   onde o aluno vai mexer nisto. */
.opcao {
    display: flex; align-items: center; gap: 13px;
    min-height: 56px;
    padding: 12px 18px;
    border: 1.5px solid var(--linha);
    border-radius: 15px;
    background: #fff;
    font-size: .98rem; font-weight: 600;
    text-align: left;
    transition: border-color .16s, background-color .16s;
}
.opcao:hover { border-color: var(--azul-linha); background: var(--azul-fraco); }

.opcao .marca {
    width: 22px; height: 22px; flex-shrink: 0;
    border: 2px solid var(--linha);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .62rem; color: transparent;
    transition: all .16s;
}
.opcao.escolhida { border-color: var(--azul); background: var(--azul-fraco); }
.opcao.escolhida .marca { background: var(--azul); border-color: var(--azul); color: #fff; }

.quiz-opcoes.multi { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .quiz-opcoes.multi { grid-template-columns: 1fr; } }
.quiz-opcoes.multi .marca { border-radius: 7px; }

.quiz-pe {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 26px 24px;
}
.quiz-voltar { font-size: .92rem; font-weight: 700; color: var(--tinta-suave); padding: 10px 2px; }
.quiz-voltar:hover { color: var(--tinta); }
.quiz-voltar[hidden] { visibility: hidden; display: block; }
.quiz-pe .btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* Aviso que aparece na vitrine depois de responder. */
.resultado-aviso {
    display: none;
    align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--azul-fraco);
    border: 1px solid var(--azul-linha);
    border-radius: var(--raio);
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: .93rem;
}
.resultado-aviso.aparece { display: flex; }
.resultado-aviso b { font-weight: 800; }
.resultado-aviso button {
    margin-left: auto; font-size: .88rem; font-weight: 700;
    color: var(--azul-forte); text-decoration: underline;
}

/* ---------- Seletor de cidade ---------- */
/* Um cartão que cavalga a borda entre a primeira dobra e o resto: a
   escolha de cidade separa fisicamente "o que é o produto" de "o que
   tem perto de você". */
.barra-cidade { position: relative; z-index: 2; margin-top: -34px; }

.barra-caixa {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.barra-campo { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 260px; }

.barra-campo label {
    font-size: .74rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinta-fraca);
    white-space: nowrap;
}

/* Continua sendo um <select> de verdade: no celular ele abre a roda
   nativa do sistema, que é mais fácil de acertar do que qualquer lista
   que eu desenhasse. */
.barra-campo select {
    flex: 1;
    min-width: 0;
    font-family: var(--display);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--tinta);
    padding: 10px 40px 10px 14px;
    border: 1.5px solid var(--linha);
    border-radius: 13px;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007dec'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 20px;
    appearance: none;
    cursor: pointer;
}
.barra-campo select:hover { border-color: var(--azul-linha); }
.barra-campo select:focus { outline: 2px solid var(--azul); outline-offset: -1px; }

.barra-conta {
    font-size: .92rem;
    color: var(--tinta-suave);
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
}
.barra-conta b { color: var(--tinta); font-weight: 800; }
.barra-conta .bolinha {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--verde);
    box-shadow: 0 0 0 3px rgba(18,183,106,.18);
}
.barra-conta.vazia .bolinha { background: var(--tinta-fraca); box-shadow: 0 0 0 3px rgba(147,161,174,.2); }

@media (max-width: 640px) {
    .barra-campo { flex-direction: column; align-items: stretch; gap: 8px; }
    .barra-campo label { white-space: normal; }
    .barra-conta { white-space: normal; }

    /* A fonte de título é larga: em tela estreita ela cortava o
       "Escolha sua próxima moradia" no meio. */
    .barra-campo select {
        font-family: var(--texto);
        font-size: 1rem;
        padding-right: 34px;
    }
}

/* ---------- Cidade sem anúncio ---------- */
/* Não é tela de erro: é o pedido de cadastro na hora exata em que a
   falta de oferta fica evidente para quem está olhando. */
.vazio {
    text-align: center;
    background: var(--nevoa);
    border: 1px dashed var(--azul-linha);
    border-radius: var(--raio-g);
    padding: 54px 28px;
}
.vazio[hidden] { display: none; }
.vazio-icone { font-size: 2.4rem; margin-bottom: 14px; }
.vazio h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: 10px; }
.vazio p { color: var(--tinta-suave); max-width: 34em; margin: 0 auto 22px; }

/* O hidden precisa vencer o display da grade, senão o anúncio de outra
   cidade continuaria aparecendo. */
.anuncio[hidden], .vitrine[hidden] { display: none; }

/* Estes usam flex, então o hidden precisa ser dito explicitamente. */
.fichas[hidden], .abrir-filtros[hidden] { display: none; }

/* ---------- Folga para o cabeçalho grudado ---------- */
/* O cabeçalho tem 68px e fica fixo no alto. Sem esta folga, todo link de
   âncora — os do menu e a troca de cidade — para com o título escondido
   atrás da barra. */
#como, #republicas, #cidades, #anunciar, #cidade, #quem-somos, #contato {
    scroll-margin-top: 98px;
}

/* Botão dentro do menu: o texto tem de ser branco.
   Sem esta regra, o seletor .menu a (0-1-1) vence .btn-azul (0-1-0) na
   disputa de especificidade e pinta o texto do botão com o cinza do
   menu, sobre o fundo azul. Fica ilegível. */
.menu a.btn-azul,
.menu a.btn-azul:hover { color: #fff; }

/* Selo de exemplo no cartão da primeira dobra. Some quando o
   questionário é respondido e o cartão passa a mostrar resultado real. */
.match { position: relative; }
.match-selo {
    position: absolute;
    top: -11px; left: 24px;
    font-size: .68rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    background: var(--tinta);
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
}
.match-selo[hidden] { display: none; }

/* ---------- Quem somos ---------- */
.quem { display: grid; grid-template-columns: 1.35fr .65fr; gap: 46px; align-items: start; }
@media (max-width: 900px) { .quem { grid-template-columns: 1fr; gap: 32px; } }

.quem .cabeca { margin-bottom: 20px; }
.quem-texto { color: var(--tinta-suave); margin-bottom: 14px; max-width: 44em; }

.quem-numeros { list-style: none; display: grid; gap: 14px; }
.quem-numeros li {
    background: var(--nevoa);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 22px 24px;
}
.quem-numeros b {
    display: block;
    font-family: var(--display); font-weight: 800;
    font-size: 1.9rem; color: var(--azul);
    line-height: 1.1; margin-bottom: 4px;
}
.quem-numeros span { font-size: .92rem; color: var(--tinta-suave); }

/* ---------- Contato ---------- */
.contatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .contatos { grid-template-columns: 1fr; } }

.contato {
    display: block;
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    padding: 26px;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
a.contato:hover { border-color: var(--azul-linha); transform: translateY(-3px); box-shadow: var(--sombra); }

.contato-icone { font-size: 1.6rem; display: block; margin-bottom: 12px; }
.contato b { display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: 5px; }
.contato span:not(.contato-icone) { font-size: .92rem; color: var(--tinta-suave); word-break: break-word; }

/* ---------- Contato ---------- */
/* Um caminho só, verde do WhatsApp, alvo grande. Num produto para quem
   procura moradia, e-mail é caminho que ninguém percorre: a pessoa quer
   mandar mensagem e ter resposta hoje. */
.zap {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    background: #1f9d55;
    color: #fff;
    padding: 20px 32px 20px 24px;
    border-radius: 999px;
    box-shadow: 0 14px 30px -12px rgba(31,157,85,.75);
    transition: background-color .2s, transform .15s;
}
.zap:hover { background: #177a42; }
.zap:active { transform: translateY(1px); }

.zap-icone {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.zap-icone svg { width: 26px; height: 26px; fill: #fff; }

.zap-texto b { display: block; font-family: var(--display); font-size: 1.08rem; line-height: 1.3; }
.zap-texto span { font-size: .95rem; color: rgba(255,255,255,.88); }

@media (max-width: 480px) {
    .zap { width: 100%; justify-content: center; padding: 18px 22px; }
}

/* A seção de repúblicas some inteira enquanto ninguém escolheu cidade. */
.secao[hidden] { display: none; }

/* ---------- Seletor de faculdade ---------- */
/* Aparece só quando a ficha "Perto da faculdade" está acesa. Sem ele a
   ficha não quer dizer nada: perto de qual? */
.ficha-faculdade {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--azul-fraco);
    border: 1px solid var(--azul-linha);
    border-radius: var(--raio);
    padding: 14px 18px;
    margin-bottom: 22px;
}
.ficha-faculdade[hidden] { display: none; }

.ficha-faculdade label {
    font-size: .74rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--azul-forte);
}

.ficha-faculdade select {
    font-family: var(--display);
    font-size: 1rem; font-weight: 700;
    color: var(--tinta);
    padding: 9px 38px 9px 14px;
    border: 1.5px solid var(--azul-linha);
    border-radius: 11px;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007dec'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 18px;
    appearance: none;
    cursor: pointer;
}
.ficha-faculdade select:focus { outline: 2px solid var(--azul); outline-offset: -1px; }


/* ---------- Contato centralizado ---------- */
/* A seção tem um caminho só. Centralizada, o olho cai direto no botão
   em vez de varrer da esquerda. */
#contato .cabeca {
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#contato .wrap { text-align: center; }
#contato .zap { text-align: left; }

/* =====================================================================
   DENUNCIAR ANÚNCIO

   O botão fica no pé da foto porque os dois cantos de cima já são dos
   selos, e porque denúncia não pode competir com o preço na leitura.
   Discreto de propósito: quem precisa dele procura, e quem não precisa
   não tropeça.
   ===================================================================== */
.denunciar {
    position: absolute;
    right: 10px; bottom: 10px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(20, 32, 43, .08);
    border-radius: 999px;
    color: var(--tinta-fraca);
    cursor: pointer;
    opacity: .75;
    transition: opacity .18s, color .18s, background .18s;
}
.denunciar svg { width: 16px; height: 16px; }
.denunciar:hover { opacity: 1; color: #c0392b; background: #fff; }
.denunciar:focus-visible { opacity: 1; outline: 2px solid var(--azul); outline-offset: 2px; }

.denuncia {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(10, 22, 32, .55);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    padding: 20px;
}
.denuncia[hidden] { display: none; }

.denuncia-caixa {
    position: relative;
    width: min(520px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
    padding: 30px 30px 26px;
    animation: sobe .28s ease;
}

.denuncia-fechar {
    position: absolute;
    top: 16px; right: 16px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: var(--nevoa);
    border: 0; border-radius: 999px;
    font-size: 15px; color: var(--tinta-suave);
    cursor: pointer;
}
.denuncia-fechar:hover { background: var(--linha); color: var(--tinta); }
.denuncia-fechar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.denuncia-caixa h2 {
    font-family: var(--display);
    font-size: 1.32rem; font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 40px 4px 0;
}

.denuncia-alvo {
    font-weight: 700; font-size: .98rem;
    color: var(--azul-forte);
    margin: 0 0 8px;
}

.denuncia-dica {
    font-size: .88rem; line-height: 1.5;
    color: var(--tinta-suave);
    margin: 0 0 20px;
}

.denuncia-erro,
.denuncia-obrigado {
    font-size: .9rem; line-height: 1.5;
    border-radius: var(--raio);
    padding: 13px 15px;
    margin: 0 0 16px;
}
.denuncia-erro     { background: #fdf0ee; color: #8f2c19; border: 1px solid #f3c9c1; }
.denuncia-obrigado { background: #eafaf1; color: #0b6b41; border: 1px solid #b7e7cd; }

.denuncia-motivos { border: 0; padding: 0; margin: 0 0 18px; }

.denuncia-motivos legend {
    font-size: .82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--tinta-suave);
    padding: 0; margin-bottom: 10px;
}

.denuncia-motivos label {
    display: flex; align-items: flex-start; gap: 11px;
    border: 1.5px solid var(--linha);
    border-radius: var(--raio);
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.denuncia-motivos label:hover { border-color: var(--azul-linha); background: var(--nevoa); }
.denuncia-motivos label:has(input:checked) { border-color: var(--azul); background: var(--azul-fraco); }
.denuncia-motivos label:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }

.denuncia-motivos input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--azul); flex: none; }
.denuncia-motivos b { display: block; font-size: .95rem; color: var(--tinta); }
.denuncia-motivos span span { display: block; font-size: .81rem; line-height: 1.45; color: var(--tinta-suave); margin-top: 2px; }

.denuncia-detalhe {
    display: block;
    font-size: .84rem; font-weight: 700;
    color: var(--tinta);
    margin-bottom: 7px;
}
.denuncia-detalhe span { font-weight: 500; color: var(--tinta-fraca); }

.denuncia-caixa textarea {
    width: 100%;
    font-family: var(--texto); font-size: .95rem;
    color: var(--tinta);
    border: 1.5px solid var(--linha);
    border-radius: var(--raio);
    padding: 12px 14px;
    resize: vertical;
    margin-bottom: 18px;
}
.denuncia-caixa textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 4px var(--azul-fraco);
}

.denuncia-caixa .btn { width: 100%; justify-content: center; }
.denuncia-caixa .btn:disabled { opacity: .6; cursor: progress; }

@media (max-width: 520px) {
    .denuncia-caixa { padding: 26px 20px 22px; border-radius: 20px; }
}


/* ---------------------------------------------------------------------
   CLASSIFICADOS — a volta para a busca

   Quem chega aqui veio de uma cidade e quer poder voltar para ela. O
   link existia no HTML sem uma linha de estilo: saía como link cru do
   navegador, letra miúda ao pé de um título enorme, e passava batido.
   Vira uma pílula — a mesma linguagem das fichas logo abaixo, para ser
   lido como coisa em que se clica.
   --------------------------------------------------------------------- */
.voltar-busca {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 9px 16px 9px 13px;
    border: 1px solid var(--azul-linha);
    border-radius: 999px;
    background: var(--azul-fraco);
    font-size: .88rem;
    font-weight: 700;
    color: var(--azul-forte);
    text-decoration: none;
    transition: all .16s;
}

.voltar-busca:hover {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
}

.voltar-busca:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 3px;
}

/* Nas páginas de caixa — entrar, criar conta, recuperar a senha,
   anunciar — a caixa é estreita e centrada. A volta se alinha pela
   borda esquerda dela, e não pela da tela: jogada no canto da janela
   ela pareceria ter sobrado de outra página. */
.voltar-linha { width: 100%; max-width: 560px; margin: 0 auto; }
.voltar-linha.larga { max-width: 720px; }


/* ---------------------------------------------------------------------
   CLASSIFICADOS — a vitrine dos itens

   Grade parecida com a das repúblicas, mas com quadros menores: um
   ventilador não precisa da mesma área que uma casa, e a pessoa está
   passando o olho por muitos de uma vez.
   --------------------------------------------------------------------- */
.itens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
}

.itens[hidden] { display: none; }

.item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    overflow: hidden;
    background: #fff;
}

.item-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--nevoa);
    overflow: hidden;
}

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

/* Sem foto, o quadro diz o cômodo em vez de ficar um buraco cinza. */
.item-foto.sem-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tinta-fraca);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.item-quantas {
    position: absolute;
    right: 8px; bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(12, 22, 36, .72);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
}

.item-corpo { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }

.item-corpo h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.3; }

.item-preco { font-size: 1.12rem; font-weight: 800; }

/* Doação em verde: é a palavra que faz o olho parar na lista. */
.item-preco.doacao { color: var(--verde); }

.item-conta {
    font-size: .88rem;
    color: var(--tinta-suave);
    line-height: 1.5;
    /* Três linhas e corta: o cartão é a chamada, não o anúncio inteiro. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-zap { margin-top: 6px; justify-content: center; }


/* ---------------------------------------------------------------------
   A PÁGINA DE UMA VAGA

   O cartão da busca é a chamada; esta é a casa inteira. A ordem da
   página é a ordem em que a pessoa decide: primeiro as fotos, depois o
   preço e o trajeto, depois o texto, e o botão de falar no fim — quando
   ela já sabe se vale a mensagem.
   --------------------------------------------------------------------- */
#vaga { padding-top: 34px; }

.voltar-linha-solta { margin-bottom: 6px; }

#carregando { color: var(--tinta-suave); font-size: 1rem; }

.vaga-galeria { margin-bottom: 26px; }

.vaga-foto-grande {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--raio-g);
    border: 1px solid var(--linha);
    display: block;
    background: var(--nevoa);
}

.vaga-galeria.sem-foto {
    display: grid;
    place-items: center;
    min-height: 200px;
    border: 1px dashed var(--linha);
    border-radius: var(--raio-g);
    background: var(--nevoa);
    color: var(--tinta-fraca);
    font-weight: 600;
}

.vaga-miniaturas { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.vaga-mini {
    width: 86px; height: 66px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.vaga-mini img { width: 100%; height: 100%; object-fit: cover; }
.vaga-mini.ativa { border-color: var(--azul); }
.vaga-mini:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.vaga-cabeca { margin-bottom: 28px; }
.vaga-cabeca h1 {
    font-family: var(--display);
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.vaga-onde { color: var(--tinta-suave); font-size: 1.02rem; margin-bottom: 14px; }

.vaga-selos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }

.vaga-selo {
    font-size: .8rem; font-weight: 700;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--azul-fraco);
    color: var(--azul-forte);
}

/* Os quatro números que decidem: aluguel, caução, trajeto e a data.
   Lado a lado porque a pessoa compara os quatro de uma vez, e não um
   depois do outro. */
.vaga-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    overflow: hidden;
}

.vaga-numero { background: #fff; padding: 16px 18px; }
.vaga-numero b { display: block; font-size: 1.24rem; font-weight: 800; line-height: 1.2; }
.vaga-numero small { display: block; margin-top: 3px; color: var(--tinta-fraca); font-size: .82rem; }

.vaga-bloco { margin-bottom: 28px; }
.vaga-bloco h2, .vaga-contato h2 {
    font-family: var(--display);
    font-size: 1.16rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.vaga-dica { color: var(--tinta-fraca); font-size: .9rem; line-height: 1.5; margin-bottom: 12px; }

.vaga-texto p { color: var(--tinta-suave); line-height: 1.62; margin-bottom: 10px; }
.vaga-texto p:last-child { margin-bottom: 0; }

.vaga-pilulas { display: flex; flex-wrap: wrap; gap: 8px; }

.vaga-pilula {
    font-size: .86rem;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--linha);
    color: var(--tinta-suave);
}

/* O botão de falar fica numa faixa própria no fim: é a única ação da
   página, e não deve competir com as etiquetas logo acima. */
.vaga-contato {
    margin-top: 34px;
    padding: 24px 26px 26px;
    border: 1px solid var(--azul-linha);
    border-radius: var(--raio-g);
    background: var(--azul-fraco);
}
.vaga-contato .btn { margin-top: 4px; }

@media (max-width: 560px) {
    .vaga-foto-grande { max-height: 280px; }
    .vaga-contato { padding: 20px; }
    .vaga-contato .btn { width: 100%; justify-content: center; }
}


/* ---------------------------------------------------------------------
   A VITRINE COM CASAS DE VERDADE

   Os seis cartões de exemplo continuam no HTML e só aparecem em cidade
   que ainda não tem nenhuma casa cadastrada. Estas regras são o que
   separa um do outro na tela.
   --------------------------------------------------------------------- */

/* O quadro do cartão era um gradiente com "Foto em breve" no meio.
   Agora que existe foto de verdade, ela ocupa o quadro inteiro. */
.anuncio-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* O selo de compatibilidade vira o aviso de que aquilo é maquete.
   Cinza e não azul: o azul é a cor do que é real no site. */
.selo-exemplo {
    background: rgba(12, 22, 36, .62) !important;
    font-family: inherit !important;
    font-size: .7rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* A faixa que explica os exemplos, acima da grade. Mesmo desenho do
   aviso de "ordenado para você": é o mesmo tipo de recado, uma linha
   dizendo por que a lista abaixo é o que é. */
.aviso-exemplo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--linha);
    border-radius: 14px;
    background: var(--nevoa);
    color: var(--tinta-suave);
    font-size: .92rem;
    line-height: 1.5;
}
.aviso-exemplo b { color: var(--tinta); }
.aviso-exemplo .btn { flex: 0 0 auto; }

@media (max-width: 560px) {
    .aviso-exemplo { padding: 14px 16px; }
    .aviso-exemplo .btn { width: 100%; justify-content: center; }
}


/* ---------------------------------------------------------------------
   QUEM MORA, ONDE FICA, E O CAMINHO DA DENÚNCIA
   --------------------------------------------------------------------- */

/* "Só estudantes · 4 moradores hoje" — a resposta que hoje o anunciante
   digita quinze vezes por semana no WhatsApp. */
.vaga-quem {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--tinta);
    margin-bottom: 14px;
}

.vaga-endereco {
    font-size: 1rem;
    color: var(--tinta-suave);
    margin-bottom: 14px;
}

.vaga-mapa {
    width: 100%;
    height: 300px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    display: block;
}

.vaga-mapa-link { margin-top: 12px; }

/* O botão de denunciar da página inteira. No cartão da vitrine ele é
   uma bandeirinha flutuante no canto da foto, porque lá não cabe frase.
   Aqui cabe, e a frase funciona melhor: a pessoa precisa entender o que
   o botão faz antes de clicar num que acusa alguém. */
.vaga-denuncia { margin-top: 22px; text-align: center; }

.denunciar-linha {
    position: static;
    width: auto; height: auto;
    display: inline;
    padding: 6px 4px;
    background: none;
    border: 0;
    border-radius: 0;
    opacity: 1;
    font: inherit;
    font-size: .86rem;
    color: var(--tinta-fraca);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.denunciar-linha:hover { background: none; color: #c0392b; }

@media (max-width: 560px) {
    .vaga-mapa { height: 220px; }
    .vaga-mapa-link { width: 100%; justify-content: center; }
}