/* =====================================================================
   FORMOSO ALERTA COMPRA & VENDA
   Folha de estilo unica. Servida por /tema.css (o PHP entrega).
   ---------------------------------------------------------------------
   A marca do portal continua: vermelho E01B2E, preto e a fonte Archivo.
   O que muda e o jeito: aqui e vitrine, entao o desenho sai de "jornal"
   e vira "loja" — muito branco, foto grande, cartao limpo, botao claro.
   ===================================================================== */

/* ------------------------------------------------------------- cores */
:root{
  --vermelho:#E01B2E; --vermelho-esc:#B2101F; --vermelho-claro:#FDECEE;
  --preto:#0C0C0D;
  --tira:#0C0C0D;              /* fundo da tira de volta ao portal */
  --papel:#FFFFFF; --fundo:#F4F5F6; --superficie:#FFFFFF;
  --linha:#E2E4E7; --linha-forte:#CFD3D8;
  --texto:#15171A; --texto2:#5A6169; --texto3:#8D949C;
  --verde:#12805C; --verde-claro:#E6F5EF;
  --azul:#1F6FEB; --amarelo:#E9A73B; --amarelo-claro:#FDF3E2;
  --sombra:0 1px 2px rgba(15,20,25,.06), 0 4px 14px rgba(15,20,25,.06);
  --sombra-alta:0 8px 30px rgba(15,20,25,.14);
  --r:14px; --r-p:10px; --r-g:22px;
  --wrap:1240px;
  --display:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --corpo:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --topo:68px;
}
/* ---------------------------------------------------------------------
   TEMA ESCURO
   Duas portas para a MESMA lista de cores:
     1) o aparelho esta no escuro e a pessoa nao pediu claro;
     2) a pessoa clicou no botao e escolheu escuro.
   A lista aparece duas vezes de proposito: o CSS nao deixa uma regra so
   valer dentro de uma media query E fora dela. MEXEU NUMA, MEXA NA
   OUTRA — sao a mesma coisa escrita nos dois lugares.
   O color-scheme faz a barra de rolagem, o calendario e o seletor de
   arquivo do navegador virarem escuros junto. Sem ele, sobra um retangulo
   branco no meio da tela escura.
   --------------------------------------------------------------------- */
:root{color-scheme:light}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    color-scheme:dark;
    --papel:#131417; --fundo:#0C0C0D; --superficie:#1A1B1F;
    /* no escuro o fundo da pagina JA e preto: a tira precisa clarear um
       pouco, senao ela some e o link fica boiando no nada */
    --tira:#1F2126;
    --linha:#2A2C31; --linha-forte:#3A3D44;
    --texto:#F2F3F5; --texto2:#A8AEB6; --texto3:#7C838C;
    --vermelho-claro:#2A1216; --verde-claro:#0E241D; --amarelo-claro:#2A2114;
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
    --sombra-alta:0 10px 34px rgba(0,0,0,.6);
  }
}

:root[data-tema="escuro"]{
  color-scheme:dark;
  --papel:#131417; --fundo:#0C0C0D; --superficie:#1A1B1F;
  /* no escuro o fundo da pagina JA e preto: a tira precisa clarear um
     pouco, senao ela some e o link fica boiando no nada */
  --tira:#1F2126;
  --linha:#2A2C31; --linha-forte:#3A3D44;
  --texto:#F2F3F5; --texto2:#A8AEB6; --texto3:#7C838C;
  --vermelho-claro:#2A1216; --verde-claro:#0E241D; --amarelo-claro:#2A2114;
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
  --sombra-alta:0 10px 34px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:16px/1.55 var(--corpo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--display); line-height:1.18; margin:0 0 .5em; letter-spacing:-.015em}
h1{font-size:clamp(26px,4vw,38px); font-weight:800}
h2{font-size:clamp(20px,2.6vw,27px); font-weight:700}
h3{font-size:19px; font-weight:700}
p{margin:0 0 1em}
hr{border:0; border-top:1px solid var(--linha); margin:24px 0}
:focus-visible{outline:3px solid var(--vermelho); outline-offset:2px; border-radius:6px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px}
.wrap-estreito{max-width:720px; margin:0 auto; padding:0 18px}
.some-celular{display:initial}
.so-celular{display:none}

/* =====================================================================
   TIRA DE VOLTA AO PORTAL
   ---------------------------------------------------------------------
   A faixa fina acima do topo, com o caminho de volta para o site de
   noticias. Ela NAO e sticky de proposito (o .topo e): grudada no alto,
   comeria altura de tela no celular a visita inteira. Ela aparece
   quando a pessoa esta no comeco da pagina e some ao rolar.

   Altura pequena e texto miudo sao intencionais: isto e sinalizacao,
   nao chamada. Quem entrou aqui veio ver anuncio.
   ===================================================================== */
.tira-portal{background:var(--tira); border-bottom:1px solid rgba(255,255,255,.08)}
.tira-portal-linha{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; height:32px;
}
.tira-portal a{
  display:flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.72);
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  white-space:nowrap; min-width:0;
}
.tira-portal a:hover{color:#fff}
.tira-portal a b{font-weight:700; color:#fff}
.tira-portal .seta{font-size:16px; line-height:1; opacity:.7}
/* o foco do teclado precisa aparecer sobre fundo preto */
.tira-portal a:focus-visible{outline-color:#fff; outline-offset:3px}

@media (max-width:760px){
  .tira-portal-linha{height:30px}
  .tira-portal a{font-size:12px; gap:4px}
}

/* =====================================================================
   TOPO
   ===================================================================== */
.topo{
  position:sticky; top:0; z-index:60;
  background:var(--papel); border-bottom:1px solid var(--linha);
}
.topo-barra{display:flex; align-items:center; gap:16px; height:var(--topo)}
.marca{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.marca-simbolo{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:var(--vermelho); color:#fff;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.04em;
}
.marca-texto{display:flex; flex-direction:column; line-height:1}
.marca-texto b{font-family:var(--display); font-size:17px; font-weight:800; letter-spacing:-.02em}
.marca-texto b i{font-style:normal; color:var(--vermelho)}
.marca-texto span{font-size:10.5px; letter-spacing:.16em; color:var(--texto2); text-transform:uppercase; margin-top:3px}

.topo-busca{flex:1 1 auto; max-width:520px}
.busca-caixa{display:flex; align-items:center; background:var(--fundo);
  border:1.5px solid var(--linha); border-radius:999px; padding:0 6px 0 16px; height:44px}
.busca-caixa:focus-within{border-color:var(--vermelho); background:var(--papel)}
.busca-caixa input{flex:1; border:0; background:none; height:42px; outline:0; min-width:0}
.busca-caixa button{
  border:0; background:var(--vermelho); color:#fff; width:34px; height:34px;
  border-radius:50%; cursor:pointer; display:grid; place-items:center; flex:0 0 auto;
}
.busca-caixa button:hover{background:var(--vermelho-esc)}

.topo-menu{display:flex; align-items:center; gap:4px; margin-left:auto}
.topo-menu a{padding:9px 12px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--texto2); white-space:nowrap}
.topo-menu a:hover{background:var(--fundo); color:var(--texto)}
.topo-menu a.ativo{color:var(--vermelho)}
.sino{position:relative}
.bolha{
  position:absolute; top:2px; right:4px; min-width:17px; height:17px; padding:0 4px;
  background:var(--vermelho); color:#fff; border-radius:9px;
  font-size:11px; font-weight:700; display:grid; place-items:center; line-height:1;
}
.botao-anunciar{
  background:var(--vermelho); color:#fff !important; padding:10px 18px !important;
  border-radius:999px; font-weight:700 !important; box-shadow:0 2px 10px rgba(224,27,46,.3);
}
.botao-anunciar:hover{background:var(--vermelho-esc) !important; color:#fff !important}

/* ---- botao de trocar o tema ---- */
/* Fica sempre visivel, inclusive no celular: e um circulo de 38px, cabe
   ao lado do "Anunciar" sem empurrar nada para fora. */
.btn-tema{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--fundo); border:1px solid var(--linha); color:var(--texto2);
  cursor:pointer; display:grid; place-items:center; line-height:1; font-size:17px;
  padding:0; transition:color .12s, border-color .12s;
}
.btn-tema:hover{color:var(--texto); border-color:var(--linha-forte)}
/* a barra do painel e estreita: a marca precisa caber numa linha so */
.admin-lado .marca-texto b{font-size:14px; white-space:nowrap}
/* de dia mostra a lua (o que vem depois de clicar); de noite, o sol */
.btn-tema .ico-sol{display:none}
.btn-tema .ico-lua{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .btn-tema .ico-lua{display:none}
  :root:not([data-tema="claro"]) .btn-tema .ico-sol{display:block}
}
:root[data-tema="escuro"] .btn-tema .ico-lua{display:none}
:root[data-tema="escuro"] .btn-tema .ico-sol{display:block}

/* faixa de categorias */
.faixa-cat{border-bottom:1px solid var(--linha); background:var(--papel)}
.faixa-cat .rolo{display:flex; gap:6px; overflow-x:auto; padding:9px 0; scrollbar-width:none}
.faixa-cat .rolo::-webkit-scrollbar{display:none}
.faixa-cat a{
  flex:0 0 auto; padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--texto2); background:var(--fundo); white-space:nowrap; border:1px solid transparent;
}
.faixa-cat a:hover{color:var(--texto); border-color:var(--linha-forte)}
.faixa-cat a.ativo{background:var(--vermelho-claro); color:var(--vermelho); border-color:rgba(224,27,46,.25)}

/* =====================================================================
   AVISOS
   ===================================================================== */
.recado{
  display:flex; gap:10px; align-items:flex-start;
  margin:16px auto; padding:13px 16px; border-radius:var(--r);
  background:var(--verde-claro); color:var(--verde); font-weight:600; font-size:15px;
  border:1px solid rgba(18,128,92,.2);
}
.recado.erro{background:var(--vermelho-claro); color:var(--vermelho-esc); border-color:rgba(224,27,46,.22)}
.recado.aviso{background:var(--amarelo-claro); color:#8A5B08; border-color:rgba(233,167,59,.3)}

/* =====================================================================
   CAPA
   ===================================================================== */
.hero{
  background:linear-gradient(150deg,var(--vermelho) 0%,var(--vermelho-esc) 55%,#7C0A15 100%);
  color:#fff; padding:44px 0 40px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-120px; top:-140px; width:460px; height:460px;
  border-radius:50%; background:#fff; opacity:.06;
}
.hero::before{
  content:""; position:absolute; left:-80px; bottom:-180px; width:320px; height:320px;
  border-radius:50%; background:#fff; opacity:.05;
}
.hero .wrap{position:relative; z-index:1}
.hero h1{color:#fff; max-width:14ch; margin-bottom:8px}
.hero p.sub{font-size:17px; opacity:.92; margin-bottom:22px; max-width:46ch}
.hero-form{background:var(--papel); border-radius:var(--r-g); padding:14px; box-shadow:var(--sombra-alta)}
.hero-linha{display:flex; gap:10px}
.hero-linha input[type=search],.hero-linha input[type=text]{
  flex:1; height:52px; border:1.5px solid var(--linha); border-radius:var(--r);
  padding:0 16px; background:var(--fundo); outline:0; min-width:0;
}
.hero-linha input:focus{border-color:var(--vermelho); background:var(--papel)}
.hero-linha button{
  height:52px; padding:0 30px; border:0; border-radius:var(--r);
  background:var(--vermelho); color:#fff; font-weight:700; cursor:pointer; font-size:16px;
}
.hero-linha button:hover{background:var(--vermelho-esc)}
.hero-filtros{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px}
.hero-filtros select,.hero-filtros input{
  height:44px; border:1.5px solid var(--linha); border-radius:var(--r-p);
  padding:0 12px; background:var(--papel); outline:0; width:100%; color:var(--texto); font-size:14.5px;
}
.hero-numeros{display:flex; gap:22px; margin-top:20px; flex-wrap:wrap; font-size:14.5px}
.hero-numeros b{font-family:var(--display); font-size:20px; display:block; line-height:1.1}
.hero-numeros span{opacity:.85}

/* categorias em bloco */
.blocos-cat{display:grid; grid-template-columns:repeat(8,1fr); gap:12px}
.bloco-cat{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r);
  padding:16px 8px 13px; text-align:center; transition:.16s; display:block;
}
.bloco-cat:hover{transform:translateY(-3px); box-shadow:var(--sombra); border-color:var(--linha-forte)}
.bloco-cat .ico{font-size:27px; line-height:1; display:block; margin-bottom:8px}
.bloco-cat .nome{font-size:13px; font-weight:600; display:block; line-height:1.25}
.bloco-cat .qtd{font-size:11.5px; color:var(--texto3); display:block; margin-top:3px}

/* =====================================================================
   SECOES E GRADE
   ===================================================================== */
.secao{padding:34px 0}
.secao-topo{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px}
.secao-topo h2{margin:0}
.secao-topo a{font-size:14.5px; font-weight:700; color:var(--vermelho)}
.secao-topo .conta{font-size:14px; color:var(--texto2); font-weight:500}

.grade{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.grade-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}

/* ------------------------------------------------------------ cartao */
.cartao{
  position:relative; background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--r); overflow:hidden; transition:.18s; display:flex; flex-direction:column;
}
.cartao:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta); border-color:transparent}
.cartao-foto{display:block; position:relative; aspect-ratio:4/3; background:var(--fundo); overflow:hidden}
.cartao-foto img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.cartao:hover .cartao-foto img{transform:scale(1.05)}
.cartao-selos{position:absolute; left:9px; top:9px; display:flex; gap:5px; flex-wrap:wrap; max-width:80%}
.selo{
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;
  background:rgba(12,12,13,.78); color:#fff; letter-spacing:.02em; backdrop-filter:blur(4px);
}
.selo.destaque{background:var(--amarelo); color:#3A2703}
.selo.novo{background:var(--verde)}
.selo.vendido{background:var(--preto)}
.selo.pausado{background:#6B7280}
.selo.demo{background:#fff; color:var(--texto2); border:1px solid var(--linha-forte)}
.cartao-fotos{
  position:absolute; right:9px; bottom:9px; font-size:11.5px; font-weight:600;
  background:rgba(12,12,13,.72); color:#fff; padding:3px 8px; border-radius:8px;
}
.cartao-favorito{position:absolute; right:9px; top:9px; z-index:2; margin:0}
.coracao{
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--texto2); font-size:18px; line-height:1;
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.16); transition:.15s;
}
.coracao:hover{transform:scale(1.1); color:var(--vermelho)}
.coracao.ligado{color:var(--vermelho)}
.cartao-corpo{padding:12px 13px 14px; display:flex; flex-direction:column; gap:5px; flex:1}
.cartao-titulo{
  font-size:14.5px; font-weight:600; line-height:1.35; color:var(--texto);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cartao-titulo:hover{color:var(--vermelho)}
.cartao-preco{font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:-.02em; margin-top:auto}
.cartao-pe{display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--texto3)}
.cartao-lugar{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cartao-quando{flex:0 0 auto}
.cartao.em-destaque{border-color:rgba(233,167,59,.55); box-shadow:0 0 0 1px rgba(233,167,59,.3)}

/* linha de anuncio (painel e admin) */
.linha-anuncio{
  display:flex; gap:14px; align-items:center; padding:14px;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); margin-bottom:10px;
}
.linha-anuncio img{width:92px; height:70px; object-fit:cover; border-radius:var(--r-p); flex:0 0 auto; background:var(--fundo)}
.linha-anuncio .info{flex:1; min-width:0}
.linha-anuncio .info h3{font-size:16px; margin:0 0 3px}
.linha-anuncio .info h3 a:hover{color:var(--vermelho)}
.linha-anuncio .meta{font-size:13px; color:var(--texto3); display:flex; gap:14px; flex-wrap:wrap}
.linha-anuncio .acoes{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}

/* =====================================================================
   BOTOES
   ===================================================================== */
.botao,button.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--r-p); border:0; cursor:pointer;
  background:var(--vermelho); color:#fff; font-weight:700; font-size:15px;
  transition:.15s; text-align:center;
}
.botao:hover{background:var(--vermelho-esc); color:#fff}
.botao.grande{padding:15px 30px; font-size:16.5px; border-radius:var(--r)}
.botao.largo{width:100%}
.botao.fantasma{background:transparent; color:var(--texto); border:1.5px solid var(--linha-forte)}
.botao.fantasma:hover{background:var(--fundo); color:var(--texto); border-color:var(--texto3)}
.botao.zap{background:var(--verde)}
.botao.zap:hover{background:#0C6448}
.botao.escuro{background:var(--preto)}
.botao.escuro:hover{background:#2A2C31}
.botao.pequeno{padding:8px 14px; font-size:13.5px; border-radius:9px}
.botao.perigo{background:transparent; color:var(--vermelho); border:1.5px solid rgba(224,27,46,.4)}
.botao.perigo:hover{background:var(--vermelho-claro); color:var(--vermelho-esc)}
.botao[disabled]{opacity:.5; cursor:not-allowed}
.botao-linha{display:flex; gap:10px; flex-wrap:wrap}

/* =====================================================================
   FORMULARIOS
   ===================================================================== */
.painel{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-g);
  padding:26px; box-shadow:var(--sombra);
}
.painel + .painel{margin-top:18px}
.painel h2{margin-top:0}
.campo{margin-bottom:16px}
.campo label,.rotulo{display:block; font-size:14px; font-weight:700; margin-bottom:6px}
.campo .dica{font-size:13px; color:var(--texto3); margin:5px 0 0}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo input[type=password],
.campo input[type=number],.campo input[type=search],.campo input[type=file],.campo select,.campo textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--linha); border-radius:var(--r-p);
  background:var(--fundo); outline:0; color:var(--texto);
}
.campo textarea{min-height:150px; resize:vertical; line-height:1.55}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--vermelho); background:var(--papel)}
.campo input[aria-invalid=true]{border-color:var(--vermelho)}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.tripla{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.marcar{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; margin-bottom:10px; cursor:pointer}
.marcar input{width:19px; height:19px; flex:0 0 auto; margin-top:1px; accent-color:var(--vermelho)}
.escolhas{display:flex; gap:10px; flex-wrap:wrap}
.escolha{
  flex:1 1 140px; border:1.5px solid var(--linha); border-radius:var(--r-p); padding:12px 14px;
  cursor:pointer; background:var(--fundo); display:flex; gap:10px; align-items:center; font-weight:600; font-size:14.5px;
}
.escolha input{accent-color:var(--vermelho); width:18px; height:18px}
.escolha:has(input:checked){border-color:var(--vermelho); background:var(--vermelho-claro); color:var(--vermelho-esc)}
.erro-campo{
  background:var(--vermelho-claro); color:var(--vermelho-esc); padding:12px 15px;
  border-radius:var(--r-p); font-weight:600; margin-bottom:16px; font-size:14.5px;
  border:1px solid rgba(224,27,46,.22);
}

/* etapas do publicar */
.etapas{display:flex; gap:8px; margin-bottom:22px}
.etapa{
  flex:1; text-align:center; font-size:12.5px; font-weight:700; color:var(--texto3);
  padding-top:26px; position:relative;
}
.etapa::before{
  content:attr(data-n); position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:22px; border-radius:50%; background:var(--linha); color:var(--texto2);
  display:grid; place-items:center; font-size:12px;
}
.etapa::after{content:""; position:absolute; top:11px; left:0; right:50%; height:2px; background:var(--linha); z-index:-1}
.etapa:first-child::after{display:none}
.etapa.feita::before,.etapa.atual::before{background:var(--vermelho); color:#fff}
.etapa.atual{color:var(--vermelho)}
.etapa.feita{color:var(--texto2)}

/* =====================================================================
   PAGINA DO ANUNCIO
   ===================================================================== */
.anuncio-grade{
  display:grid; grid-template-columns:1fr 350px; gap:26px 26px; align-items:start;
  padding:24px 0 40px;
  grid-template-areas:"aviso lado" "galeria lado" "fichatopo lado" "fichacorpo lado";
}
.anuncio-grade > .aviso-status{grid-area:aviso}
.anuncio-grade > .galeria{grid-area:galeria}
.anuncio-grade > .ficha-topo{grid-area:fichatopo; margin-top:0}
.anuncio-grade > .ficha-corpo{grid-area:fichacorpo}
.anuncio-grade > .lateral{grid-area:lado}
.galeria{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-g); overflow:hidden}
.galeria-principal{position:relative; aspect-ratio:4/3; background:#0C0C0D}
.galeria-principal img{width:100%; height:100%; object-fit:contain}
.galeria-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.9); border:0; cursor:pointer; font-size:20px; display:grid; place-items:center;
  color:var(--preto); box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.galeria-nav:hover{background:#fff}
.galeria-nav.ant{left:12px} .galeria-nav.prox{right:12px}
.galeria-conta{
  position:absolute; right:12px; bottom:12px; background:rgba(12,12,13,.75); color:#fff;
  padding:4px 10px; border-radius:8px; font-size:12.5px; font-weight:600;
}
.miniaturas{display:flex; gap:8px; padding:10px; overflow-x:auto}
.miniaturas button{
  flex:0 0 auto; width:74px; height:56px; border-radius:8px; overflow:hidden; padding:0;
  border:2px solid transparent; cursor:pointer; background:var(--fundo);
}
.miniaturas button img{width:100%; height:100%; object-fit:cover}
.miniaturas button.ativa{border-color:var(--vermelho)}

.ficha{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-g); padding:24px; margin-top:18px}
.ficha .caminho{font-size:13px; color:var(--texto3); margin-bottom:10px}
.ficha .caminho a:hover{color:var(--vermelho)}
.ficha h1{margin-bottom:10px}
.ficha .preco{font-family:var(--display); font-size:36px; font-weight:800; letter-spacing:-.03em; margin:0 0 6px}
.ficha .preco small{font-size:14px; font-weight:600; color:var(--texto2); letter-spacing:0; margin-left:8px}
.ficha .metas{display:flex; gap:16px; flex-wrap:wrap; color:var(--texto2); font-size:14px; margin-bottom:18px}
.ficha .descricao{font-size:16px; line-height:1.7; white-space:normal}
.tabela-extras{width:100%; border-collapse:collapse; margin:18px 0}
.tabela-extras td{padding:10px 0; border-bottom:1px solid var(--linha); font-size:15px}
.tabela-extras td:first-child{color:var(--texto2); width:45%}
.tabela-extras td:last-child{font-weight:600}

.lateral{position:sticky; top:calc(var(--topo) + 16px); display:flex; flex-direction:column; gap:16px}
.caixa-contato{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-g); padding:20px; box-shadow:var(--sombra)}
.vendedor{display:flex; gap:12px; align-items:center; margin-bottom:16px}
.avatar{
  width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--vermelho); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:20px; flex:0 0 auto;
}
.avatar.grande{width:88px; height:88px; font-size:34px}
.vendedor .nome{font-weight:700; font-size:16px; line-height:1.25}
.vendedor .desde{font-size:13px; color:var(--texto3)}
.estrelas{color:var(--amarelo); font-size:14px; letter-spacing:1px}
.caixa-contato .botao{width:100%; margin-bottom:8px}
.protecao{font-size:12.5px; color:var(--texto3); line-height:1.5; margin:14px 0 0; padding-top:14px; border-top:1px solid var(--linha)}
.acoes-anuncio{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.acoes-anuncio a,.acoes-anuncio button{
  flex:1 1 auto; font-size:13.5px; font-weight:600; color:var(--texto2); background:var(--fundo);
  border:1px solid var(--linha); border-radius:9px; padding:9px 10px; text-align:center; cursor:pointer;
}
.acoes-anuncio a:hover,.acoes-anuncio button:hover{color:var(--texto); border-color:var(--linha-forte)}
.aviso-status{
  background:var(--amarelo-claro); border:1px solid rgba(233,167,59,.35); color:#8A5B08;
  padding:12px 16px; border-radius:var(--r); font-weight:600; margin-bottom:16px;
}

/* =====================================================================
   FILTROS DA BUSCA
   ===================================================================== */
.busca-grade{display:grid; grid-template-columns:270px 1fr; gap:24px; align-items:start; padding:24px 0 40px}
.filtros{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-g); padding:20px; position:sticky; top:calc(var(--topo) + 16px)}
.filtros h3{font-size:16px; margin-bottom:14px}
.filtros .grupo{padding:14px 0; border-top:1px solid var(--linha)}
.filtros .grupo:first-of-type{border-top:0; padding-top:0}
.filtros label.titulo{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--texto3); display:block; margin-bottom:8px}
.filtros select,
.filtros input:not([type=checkbox]):not([type=radio]){
  width:100%; padding:10px 12px; border:1.5px solid var(--linha); border-radius:9px;
  background:var(--fundo); outline:0; font-size:14.5px; color:var(--texto);
}
/* caixinha e bolinha ficam do tamanho de caixinha e bolinha — sem isto a
   regra acima esticava o radio ate 100% e empurrava a pagina pro lado */
.filtros .faixa{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ordenar{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--texto2)}
.ordenar select{padding:8px 12px; border-radius:9px; border:1.5px solid var(--linha); background:var(--papel); color:var(--texto)}
.resultado-topo{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px}

/* =====================================================================
   ABAS, PAGINACAO, VAZIO
   ===================================================================== */
.abas{display:flex; gap:4px; border-bottom:1px solid var(--linha); margin-bottom:20px; overflow-x:auto}
.abas a{
  padding:11px 16px; font-weight:600; font-size:14.5px; color:var(--texto2);
  border-bottom:3px solid transparent; white-space:nowrap;
}
.abas a:hover{color:var(--texto)}
.abas a.ativo{color:var(--vermelho); border-bottom-color:var(--vermelho)}
.abas .qtd{font-size:12px; color:var(--texto3); margin-left:5px}

.paginacao{display:flex; gap:6px; justify-content:center; align-items:center; margin:32px 0; flex-wrap:wrap}
.paginacao a,.paginacao span{
  min-width:40px; height:40px; padding:0 12px; border-radius:10px; display:grid; place-items:center;
  background:var(--papel); border:1px solid var(--linha); font-weight:600; font-size:14.5px;
}
.paginacao a:hover{border-color:var(--texto3)}
.paginacao .atual{background:var(--vermelho); color:#fff; border-color:var(--vermelho)}
.paginacao .pulo{border:0; background:none}

.vazio{
  text-align:center; padding:52px 22px; background:var(--papel);
  border:1px dashed var(--linha-forte); border-radius:var(--r-g); color:var(--texto2);
}
.vazio h2,.vazio h3{color:var(--texto)}
.vazio p{margin-bottom:18px}

/* =====================================================================
   PERFIL E LOJA
   ===================================================================== */
.capa-perfil{
  background:linear-gradient(135deg,var(--vermelho),var(--vermelho-esc)); color:#fff;
  padding:34px 0 30px;
}
.capa-perfil.loja{background:linear-gradient(135deg,#15171A,#3A3D44)}
.perfil-topo{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.perfil-topo .avatar{border:3px solid rgba(255,255,255,.4)}
.perfil-topo h1{color:#fff; margin-bottom:4px}
.perfil-dados{display:flex; gap:20px; flex-wrap:wrap; font-size:14.5px; opacity:.95}
.perfil-dados b{font-family:var(--display); font-size:18px; display:block; line-height:1.2}
.selo-verificada{background:rgba(255,255,255,.2); padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:700}

.avaliacao{border-top:1px solid var(--linha); padding:16px 0; display:flex; gap:12px}
.avaliacao:first-of-type{border-top:0}
.avaliacao .avatar{width:40px; height:40px; font-size:16px}
.avaliacao .quem{font-weight:700; font-size:14.5px}
.avaliacao .quando{font-size:12.5px; color:var(--texto3)}
.avaliacao p{margin:6px 0 0; font-size:15px}

.dados-loja{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:6px}
.dado-loja{background:var(--fundo); border-radius:var(--r-p); padding:13px 15px}
.dado-loja .rot{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto3); font-weight:700}
.dado-loja .val{font-size:15px; font-weight:600; margin-top:3px; word-break:break-word}

/* =====================================================================
   FOTOS NO PUBLICAR
   ===================================================================== */
.solta-foto{
  border:2px dashed var(--linha-forte); border-radius:var(--r-g); padding:34px 20px; text-align:center;
  background:var(--fundo); cursor:pointer; display:block; transition:.15s;
}
.solta-foto:hover,.solta-foto.sobre{border-color:var(--vermelho); background:var(--vermelho-claro)}
.solta-foto .icone{font-size:34px; line-height:1; margin-bottom:8px}
.solta-foto b{display:block; font-size:16px; margin-bottom:4px}
.solta-foto span{font-size:13.5px; color:var(--texto3)}
.fotos-grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:16px}
.foto-item{position:relative; border-radius:var(--r-p); overflow:hidden; border:1px solid var(--linha); background:var(--fundo)}
.foto-item img{width:100%; aspect-ratio:4/3; object-fit:cover}
.foto-item .barra{display:flex; gap:4px; padding:6px; background:var(--papel)}
.foto-item .barra button{
  flex:1; font-size:12px; font-weight:600; padding:6px 4px; border-radius:7px; cursor:pointer;
  border:1px solid var(--linha); background:var(--fundo); color:var(--texto2);
}
.foto-item .barra button:hover{border-color:var(--texto3); color:var(--texto)}
.foto-item.principal{border-color:var(--vermelho); box-shadow:0 0 0 1px var(--vermelho)}
.foto-item .etiqueta{
  position:absolute; left:7px; top:7px; background:var(--vermelho); color:#fff;
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px;
}

/* =====================================================================
   MENSAGENS
   ===================================================================== */
.conversas{display:flex; flex-direction:column; gap:8px}
.conversa-item{
  display:flex; gap:12px; align-items:center; padding:12px 14px; background:var(--papel);
  border:1px solid var(--linha); border-radius:var(--r);
}
.conversa-item:hover{border-color:var(--linha-forte)}
.conversa-item img{width:56px; height:44px; object-fit:cover; border-radius:8px; flex:0 0 auto}
.conversa-item .txt{flex:1; min-width:0}
.conversa-item .txt b{display:block; font-size:15px}
.conversa-item .txt span{display:block; font-size:13.5px; color:var(--texto3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nao-lidas{background:var(--vermelho); color:#fff; border-radius:999px; padding:2px 9px; font-size:12px; font-weight:700}

.bate-papo{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r-g); overflow:hidden}
.bate-papo-topo{display:flex; gap:12px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--linha)}
.bate-papo-topo img{width:52px; height:42px; object-fit:cover; border-radius:8px}
.baloes{padding:18px; display:flex; flex-direction:column; gap:10px; max-height:56vh; overflow-y:auto; background:var(--fundo)}
.balao{max-width:76%; padding:11px 15px; border-radius:16px; font-size:15px; line-height:1.5; position:relative}
.balao.meu{align-self:flex-end; background:var(--vermelho); color:#fff; border-bottom-right-radius:5px}
.balao.dele{align-self:flex-start; background:var(--papel); border:1px solid var(--linha); border-bottom-left-radius:5px}
.balao .hora{display:block; font-size:11px; opacity:.75; margin-top:5px}
.enviar{display:flex; gap:10px; padding:14px; border-top:1px solid var(--linha)}
.enviar textarea{
  flex:1; min-height:46px; max-height:130px; padding:12px 14px; border:1.5px solid var(--linha);
  border-radius:var(--r); resize:vertical; background:var(--fundo); outline:0; color:var(--texto);
}
.enviar textarea:focus{border-color:var(--vermelho); background:var(--papel)}

/* avisos (sino) */
.aviso-item{display:flex; gap:12px; padding:14px; border:1px solid var(--linha); border-radius:var(--r); background:var(--papel); margin-bottom:8px}
.aviso-item.novo{border-left:4px solid var(--vermelho)}
.aviso-item .quando{font-size:12.5px; color:var(--texto3)}
.aviso-item b{font-size:15px}

/* =====================================================================
   RODAPE
   ===================================================================== */
.rodape{background:var(--preto); color:#C8CDD3; margin-top:40px; padding:40px 0 26px}
.rodape-grade{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:26px}
.rodape h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px}
.rodape a{color:#C8CDD3; font-size:14.5px; display:block; padding:4px 0}
.rodape a:hover{color:#fff}
.rodape .marca-texto b{color:#fff}
.rodape .marca-texto span{color:#8D949C}
.rodape p{font-size:14px; line-height:1.6; color:#9AA2AC}
.rodape-pe{border-top:1px solid #26282D; margin-top:28px; padding-top:18px; font-size:13px; color:#8D949C;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}

/* =====================================================================
   MENU DE BAIXO (CELULAR) E BOTAO FLUTUANTE
   ===================================================================== */
.menu-baixo{display:none}
.flutuante{display:none}

/* =====================================================================
   PAINEL ADMINISTRATIVO
   ===================================================================== */
.admin{display:grid; grid-template-columns:230px 1fr; min-height:100vh}
.admin-lado{background:var(--preto); color:#C8CDD3; padding:18px 0}
.admin-lado .marca{padding:0 18px 18px; border-bottom:1px solid #26282D; margin-bottom:14px}
.admin-lado .marca-texto b{color:#fff}
.admin-lado a{display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:11px 18px; font-size:14.5px; font-weight:600; color:#C8CDD3}
.admin-lado a:hover{background:#1A1B1F; color:#fff}
.admin-lado a.ativo{background:var(--vermelho); color:#fff}
.admin-lado .conta-badge{background:rgba(255,255,255,.18); border-radius:999px; padding:1px 8px; font-size:12px}
.admin-lado a.ativo .conta-badge{background:rgba(0,0,0,.25)}
.admin-lado .grupo{font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:#6B7280;
  padding:16px 18px 6px; font-weight:700}
.admin-corpo{padding:26px 28px 60px; background:var(--fundo); min-width:0}
.admin-topo{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.admin-topo h1{margin:0; font-size:26px}

.numeros{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:24px}
.numero{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:16px 18px}
.numero .rot{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--texto3); font-weight:700}
.numero .val{font-family:var(--display); font-size:30px; font-weight:800; line-height:1.15; margin-top:4px}
.numero .obs{font-size:13px; color:var(--texto2)}
.numero.alerta{border-color:rgba(224,27,46,.35); background:var(--vermelho-claro)}
.numero.alerta .val{color:var(--vermelho-esc)}

.grafico{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:20px; margin-bottom:18px}
.grafico h3{margin-bottom:16px}
.barras{display:flex; align-items:flex-end; gap:6px; height:170px}
.barra-col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; height:100%}
.barra{width:100%; background:var(--vermelho); border-radius:5px 5px 0 0; min-height:3px; position:relative}
.barra.suave{background:rgba(224,27,46,.28)}
.barra-col .dia{font-size:10.5px; color:var(--texto3); white-space:nowrap}
.barra-col .val{font-size:11.5px; font-weight:700; color:var(--texto2)}
.legenda{display:flex; gap:16px; font-size:13px; color:var(--texto2); margin-top:12px}
.legenda i{width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:5px}

.tabela{width:100%; border-collapse:collapse; background:var(--papel); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--linha); font-size:14.5px}
.tabela th{background:var(--fundo); text-align:left; padding:11px 13px; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--texto3); font-weight:700; white-space:nowrap}
.tabela td{padding:12px 13px; border-top:1px solid var(--linha); vertical-align:middle}
.tabela tr:hover td{background:var(--fundo)}
.tabela .mini{width:64px; height:48px; object-fit:cover; border-radius:7px; background:var(--fundo)}
.tabela .acoes{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.rolar-lado{overflow-x:auto}

.marca-status{font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--fundo); color:var(--texto2); border:1px solid var(--linha)}
.marca-status.ativo{background:var(--verde-claro); color:var(--verde); border-color:rgba(18,128,92,.25)}
.marca-status.bloqueado,.marca-status.aberta{background:var(--vermelho-claro); color:var(--vermelho-esc); border-color:rgba(224,27,46,.25)}
.marca-status.em_analise,.marca-status.pendente{background:var(--amarelo-claro); color:#8A5B08; border-color:rgba(233,167,59,.3)}
.marca-status.vendido{background:var(--preto); color:#fff; border-color:var(--preto)}

.filtro-linha{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center}
.filtro-linha input:not([type=checkbox]):not([type=radio]),.filtro-linha select{
  padding:9px 12px; border:1.5px solid var(--linha); border-radius:9px; background:var(--papel);
  color:var(--texto); outline:0; font-size:14.5px;
}
.filtro-linha input[type=search]{min-width:230px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{padding:6px 13px; border-radius:999px; background:var(--papel); border:1px solid var(--linha);
  font-size:13.5px; font-weight:600; color:var(--texto2)}
.chip:hover{border-color:var(--texto3)}
.chip.ativo{background:var(--vermelho); color:#fff; border-color:var(--vermelho)}

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

/* tela de entrar do painel */
.entrada{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--fundo)}
.entrada .caixa{width:100%; max-width:400px; background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--r-g); padding:32px; box-shadow:var(--sombra-alta)}
.entrada .marca{justify-content:center; margin-bottom:22px}

/* =====================================================================
   CELULAR
   ===================================================================== */
@media (max-width:1080px){
  /* a barra do painel cai para 190px: a marca encolhe junto */
  .admin-lado .marca-texto b{font-size:12px}
  .grade{grid-template-columns:repeat(3,1fr)}
  .blocos-cat{grid-template-columns:repeat(6,1fr)}
  .anuncio-grade{grid-template-columns:1fr 320px}
  .admin{grid-template-columns:190px 1fr}
}
@media (max-width:900px){
  .busca-grade{grid-template-columns:1fr}
  .filtros{position:static}
  /* no celular a caixa de contato sobe: foto, preco, botao do WhatsApp,
     e so depois a descricao — e o caminho que a pessoa faz de verdade */
  .anuncio-grade{grid-template-columns:1fr;
    grid-template-areas:"aviso" "galeria" "fichatopo" "lado" "fichacorpo"}
  .lateral{position:static}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .duas-colunas{grid-template-columns:1fr}
  .topo-busca{display:none}
  .topo-menu a.some-celular{display:none}
}
@media (max-width:760px){
  :root{--topo:60px}
  body{padding-bottom:66px}          /* espaco do menu de baixo */
  .some-celular{display:none !important}
  .so-celular{display:initial}
  .grade{grid-template-columns:repeat(2,1fr); gap:12px}
  .blocos-cat{grid-template-columns:repeat(4,1fr); gap:9px}
  .hero{padding:28px 0 26px}
  .hero-filtros{grid-template-columns:1fr 1fr}
  .hero-linha{flex-wrap:wrap}
  .hero-linha button{width:100%}
  .painel{padding:20px 17px; border-radius:var(--r)}
  .ficha{padding:20px 17px}
  .ficha .preco{font-size:30px}
  .dupla,.tripla{grid-template-columns:1fr}
  .secao{padding:24px 0}
  .cartao-preco{font-size:18px}
  .linha-anuncio{flex-wrap:wrap}
  .linha-anuncio .acoes{width:100%; justify-content:flex-start}
  .admin{grid-template-columns:1fr}
  .admin-lado{display:flex; overflow-x:auto; padding:8px; gap:4px}
  .admin-lado .marca,.admin-lado .grupo{display:none}
  .admin-lado a{white-space:nowrap; padding:9px 13px; border-radius:9px}
  .admin-corpo{padding:18px 15px 60px}
  .rodape-grade{grid-template-columns:1fr}
  .balao{max-width:88%}

  /* menu de baixo */
  /* O botao do tema entra aqui em cima e o celular estreito nao tem
     folga nenhuma: a marca, o botao do tema e o "Anunciar" competem
     pelos mesmos 360px. Por isso tudo encolhe um pouco de uma vez.
     Medido em 320, 360 e 390px — nenhum deles pode empurrar a pagina
     para o lado. */
  .topo-barra{gap:8px}
  .marca{gap:8px; min-width:0}
  .marca-simbolo{width:34px; height:34px; font-size:17px}
  .marca-texto{min-width:0}
  .marca-texto b{font-size:15px}
  .topo-menu{gap:2px}
  .btn-tema{width:32px; height:32px; font-size:15px}
  .botao-anunciar{padding:9px 13px !important; font-size:13px !important}

  .menu-baixo{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--papel); border-top:1px solid var(--linha);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .menu-baixo a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    font-size:10.5px; font-weight:600; color:var(--texto3); padding:5px 2px; position:relative;
  }
  .menu-baixo a .ico{font-size:19px; line-height:1}
  .menu-baixo a.ativo{color:var(--vermelho)}
  .menu-baixo a.destaque .ico{
    background:var(--vermelho); color:#fff; width:42px; height:42px; border-radius:50%;
    display:grid; place-items:center; margin-top:-16px; box-shadow:0 4px 14px rgba(224,27,46,.4);
    font-size:24px; font-weight:400;
  }
  .menu-baixo .bolha{top:-2px; right:22%}
}
@media (max-width:420px){
  .blocos-cat{grid-template-columns:repeat(3,1fr)}
  .hero-filtros{grid-template-columns:1fr}
}

/* ------------------------------------------------------------ extras */
.mono{font-family:var(--mono); font-size:13px}
.centro{text-align:center}
.meia{color:var(--texto2)}
.pequeno{font-size:13.5px}
.espaco{margin-top:18px}
.nada{list-style:none; margin:0; padding:0}
@media print{ .topo,.rodape,.menu-baixo,.lateral,.tira-portal{display:none} }
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }