/* Achadinhos - vitrine publica (instalavel)
 *
 * Mesma paleta do painel, mas a hierarquia muda: aqui quem manda e a foto e o
 * preco. O visitante chegou de um post e decide em segundos.
 */
:root{
  color-scheme: dark;
  --bg:#0f1216;
  --card:#171b21;
  --card2:#1e232b;
  --borda:#2a303a;
  --borda2:#363d49;
  --txt:#e8eaed;
  --txt2:#9aa4b2;
  --txt3:#6b7684;
  --acento:#0cc1e0;        /* ciano do logo */
  --acento-esc:#0aa8c4;
  --acento-fraco:rgba(12,193,224,.12);
  --alerta:#ff9e01;        /* laranja do logo */
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
  padding-bottom:40px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

/* ---------- topo ---------- */
.topo{background:#0b0e12;border-bottom:1px solid var(--borda);
  position:sticky;top:0;z-index:40;padding:12px 0}
.topo-linha{display:flex;align-items:center;gap:12px}
.marca{display:flex;align-items:center;gap:11px;min-width:0}
.marca .logo{width:46px;height:46px;object-fit:contain;flex:0 0 auto}
.marca .nome{font-weight:800;font-size:20px;letter-spacing:-.5px;line-height:1.1;min-width:0}
.marca .nome small{display:block;font-size:11px;font-weight:500;color:var(--txt3);
  letter-spacing:.2px;margin-top:1px}
@media(max-width:420px){
  .marca .logo{width:38px;height:38px}
  .marca .nome{font-size:17px}
}
.btn-instalar{margin-left:auto;background:var(--acento);color:#02323b;border:0;
  border-radius:9px;padding:9px 16px;font:700 13px/1 inherit;cursor:pointer}
.btn-instalar:hover{background:var(--acento-esc)}

/* ---------- convite de instalacao ---------- */
.convite{background:var(--acento-fraco);border-bottom:1px solid rgba(12,193,224,.28)}
.convite-linha{display:flex;align-items:center;gap:12px;padding:11px 0;
  font-size:13.5px;color:var(--txt);flex-wrap:wrap}
.convite-acoes{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
.btn-mini{background:var(--acento);color:#02323b;border:0;border-radius:8px;
  padding:7px 13px;font:700 12.5px/1 inherit;cursor:pointer}
.btn-mini.fantasma{background:transparent;color:var(--txt2);border:1px solid var(--borda2)}

/* ---------- filtros ---------- */
.filtros{display:flex;gap:8px;margin:18px 0 12px}
.filtros input{flex:1;min-width:0;background:var(--card);border:1px solid var(--borda2);
  border-radius:10px;padding:11px 14px;font-size:15px;font-family:inherit;color:var(--txt)}
.filtros input::placeholder{color:var(--txt3)}
.filtros input:focus{outline:2px solid var(--acento);outline-offset:-1px}
.btn-buscar{background:var(--card2);color:var(--txt);border:1px solid var(--borda2);
  border-radius:10px;padding:11px 16px;font:600 14px/1 inherit;cursor:pointer;
  display:inline-flex;align-items:center}
.btn-buscar:hover{background:#262c36}

.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;
  -webkit-overflow-scrolling:touch}
.chips a{flex:0 0 auto;background:var(--card);border:1px solid var(--borda);
  border-radius:20px;padding:7px 15px;font-size:13px;font-weight:600;color:var(--txt2);
  white-space:nowrap}
.chips a.on{background:var(--acento);border-color:var(--acento);color:#02323b}

.contagem{font-size:12.5px;color:var(--txt3);margin-bottom:12px}

/* ---------- grade de ofertas ---------- */
.grade{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:660px){.grade{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:960px){.grade{grid-template-columns:repeat(4,1fr)}}

.oferta{background:var(--card);border:1px solid var(--borda);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column}
.oferta.destaque{border-color:rgba(12,193,224,.45)}

/* A foto do anuncio vem com fundo branco: uma placa clara dentro do card escuro
   fica intencional, em vez de um retangulo branco solto. */
.oferta .foto{position:relative;display:block;background:#f4f5f7;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.oferta .foto img{width:100%;height:100%;object-fit:contain;padding:8px}
.oferta .sem-foto{font-size:40px;opacity:.25}
.selo-off{position:absolute;left:8px;top:8px;background:var(--alerta);color:#3a2400;
  font-size:11px;font-weight:800;padding:4px 8px;border-radius:7px;letter-spacing:.2px}

.oferta .corpo{padding:11px 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.oferta .titulo{font-size:13px;font-weight:600;line-height:1.35;color:var(--txt);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oferta .precos{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:auto}
.oferta .antigo{font-size:12px;color:var(--txt3);text-decoration:line-through}
.oferta .agora{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--txt)}
.btn-oferta{display:block;text-align:center;background:var(--acento);color:#02323b;
  border-radius:9px;padding:10px;font-size:13.5px;font-weight:700}
.btn-oferta:hover{background:var(--acento-esc)}

/* ---------- carregar mais ---------- */
.mais{display:flex;justify-content:center;margin:22px 0 8px}
.btn-mais{background:var(--card2);color:var(--txt);border:1px solid var(--borda2);
  border-radius:10px;padding:12px 24px;font:700 14px/1 inherit;cursor:pointer}
.btn-mais:hover{background:#262c36}
.btn-mais:disabled{opacity:.55;cursor:default}

/* ---------- vazio ---------- */
.vazio{text-align:center;padding:56px 20px;color:var(--txt2)}
.vazio .ic{font-size:44px;display:block;margin-bottom:12px;opacity:.8}
.vazio h2{font-size:17px;color:var(--txt);margin-bottom:8px}
.vazio p{font-size:14px;max-width:420px;margin:0 auto 16px}

/* ---------- rodape ---------- */
.rodape{border-top:1px solid var(--borda);margin-top:36px;padding:22px 0 10px}
.aviso-afiliado{font-size:13px;color:var(--txt2);line-height:1.55;margin-bottom:10px}
.aviso-afiliado b{color:var(--txt)}
.letra-miuda{font-size:11.5px;color:var(--txt3);line-height:1.55}