/* Quem Faz - versão para computador. Só entra a partir de 900px de largura: no celular
   nada aqui vale, e a tela continua exatamente como era.

   O que muda no notebook: os botões de baixo viram uma coluna fixa à esquerda (é lá
   que o mouse procura), a página deixa de ser uma tira de 480px no meio do vazio, e os
   anúncios se espalham em quantas colunas couberem.

   ⚠️ Este arquivo é só CSS e carrega por ÚLTIMO: o HTML e os app-*.js não sabem que ele
   existe. Nada aqui pode depender de classe que o JS liga ou desliga. */
@media (min-width:900px){
:root{--coluna:236px;--faixa-larga:1060px}

/* A moldura de celular some: sem fundo cinza em volta nem risco de borda. */
body{background:var(--papel)}
.app{max-width:none;margin:0 0 0 var(--coluna);background:transparent;box-shadow:none;
min-height:100vh;padding-bottom:40px}

/* Coluna da esquerda: a mesma <nav> de baixo do celular, de pé. O Sair, quando aparece, fica
   embaixo de Compartilhar. */
.nav{top:0;right:auto;bottom:0;width:var(--coluna);max-width:none;margin:0;
grid-auto-flow:row;grid-template-columns:1fr;grid-auto-rows:max-content;align-content:start;gap:4px;
padding:18px 12px;border-top:0;border-right:1px solid var(--linha)}
.nav button{flex-direction:row;justify-content:flex-start;gap:12px;height:46px;padding:0 14px;
border-radius:11px;font-size:15px}
.nav button svg{width:21px;height:21px}
.nav button[aria-current="page"]{background:var(--anil-claro)}
.nav button:hover{background:var(--papel)}
.nav button[aria-current="page"]:hover{background:var(--anil-claro)}

/* Cada bloco encosta na coluna e para na largura de leitura, em vez de esticar sem fim. */
.topo>*,.cats,.barra,.painel,.resumo,#resultados,.aba-cab,#meus-box,.form{
max-width:var(--faixa-larga);margin-left:auto;margin-right:auto}
.topo{padding:22px 28px 20px}
.cats,.barra,.resumo{padding-left:28px;padding-right:28px}
.painel,.lista,.vazio,.meus-h,.meus{margin-left:28px;margin-right:28px}
.marca{font-size:40px}
.lema{font-size:15px}
/* A busca acompanha a largura da faixa, alinhada com a marca — busca curta
   no meio de um topo largo fica solta. */

/* As categorias param de ser uma tira que rola para o lado e passam a quebrar em linhas: no computador
   aquela rolagem é invisível (a barra está escondida, e não há dedo para arrastar), então a última
   categoria aparecia cortada ao meio na borda e as seguintes não existiam para quem usa mouse. */
.cats{flex-wrap:wrap;overflow-x:visible;row-gap:8px;padding-top:18px;padding-bottom:4px}
.chip{cursor:pointer}
.chip:hover{border-color:var(--anil);color:var(--anil)}
.chip[aria-pressed="true"]:hover{border-color:var(--tinta);color:#fff}

/* Os anúncios em grade: quantas colunas couberem, cada uma com 340px no mínimo. */
.lista{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.card{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.card:hover{border-color:var(--anil);box-shadow:0 2px 10px rgba(20,27,69,.08)}

/* Anunciar é formulário: coluna estreita lê melhor que linha de ponta a ponta. */
.aba-cab,#meus-box,.form{max-width:760px}
.aba-cab{padding-top:28px}

/* A faixa de instalar e o aviso seguem a coluna da esquerda, em vez do meio da tela. */
.faixa{left:calc(var(--coluna) + 20px);right:auto;bottom:20px;width:420px;max-width:none;
margin:0;border-radius:14px}
body.com-faixa .app{padding-bottom:40px}
.aviso,body.com-faixa .aviso{left:calc(var(--coluna) + (100% - var(--coluna))/2);bottom:28px}

/* As folhas (anúncio, local, compartilhar) já abrem centradas; aqui só cabem mais largas. */
.folha{max-width:560px}
}