/* Banners próprios (app anuncios). Cores por item via --bn-bg / --bn-ac / --bn-fg. */
.bn[hidden]{display:none}
.bn-item{display:none;background:var(--bn-bg);color:var(--bn-fg)}
.bn-item.on{display:flex}
.bn-selo{display:inline-block;background:var(--bn-selo,#facc15);color:#111827;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}
.bn-titulo{font-weight:800;line-height:1.25}
.bn-texto{opacity:.85;line-height:1.4}
.bn-cta{background:var(--bn-ac);color:#fff;font-weight:800;text-decoration:none;border-radius:10px;white-space:nowrap;text-align:center}
.bn-cta:hover{filter:brightness(1.08)}
.bn-fechar{background:transparent;border:0;color:var(--bn-fg);opacity:.6;font-size:1.3rem;line-height:1;cursor:pointer;padding:4px 6px}
.bn-fechar:hover{opacity:1}

/* --- barra no topo --- */
.bn-topo .bn-item{align-items:center;gap:14px;padding:10px 20px;max-width:1180px;margin:0 auto;border-radius:0}
.bn-topo{background:var(--bn-bg,#0f172a)}
.bn-topo .bn-body{flex:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.95rem}
.bn-topo .bn-titulo{font-size:1rem}
.bn-topo .bn-texto{font-size:.88rem}
.bn-topo .bn-cta{padding:9px 16px;font-size:.9rem}
@media (max-width:760px){.bn-topo .bn-item{flex-wrap:wrap;gap:8px;padding:10px 40px 10px 14px;position:relative}.bn-topo .bn-body{flex:1 1 100%;font-size:.9rem;gap:6px}.bn-topo .bn-titulo{font-size:.95rem}.bn-topo .bn-texto{display:none}.bn-topo .bn-cta{flex:1 1 100%;padding:10px}.bn-topo .bn-fechar{position:absolute;top:6px;right:8px}}

/* --- coluna da direita (só perfis/posts, só desktop) --- */
@media (min-width:1100px){
  .main-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;max-width:var(--container);margin:0 auto;padding:0 24px;position:relative}
  .main-grid > .main-col{min-width:0}
  .main-grid > .main-col .container{max-width:none;padding-left:0;padding-right:0}
  .main-aside{padding:28px 0 40px}
  .bn-lateral{position:sticky;top:84px}
}
/* Tela larga: sobra margem fora do quadro de 1160px → o banner vai PARA FORA, na margem
   direita, e o conteúdo volta a ocupar o quadro inteiro, centralizado (como o CNPJ Biz).
   1160 + 2×(300 + 40 de folga) = 1840px. */
@media (min-width:1840px){
  .main-grid{grid-template-columns:minmax(0,1fr)}
  .main-grid > .main-col .container{max-width:var(--container);padding-left:24px;padding-right:24px}
  .main-grid{padding:0}
  .main-aside{position:absolute;top:0;bottom:0;left:calc(100% + 40px);width:300px;padding:28px 0 40px}
}
/* Mobile/tablet: a coluna não cabe ao lado — o banner alto vai ABAIXO do conteúdo,
   em largura total (Gilson: "coloca o banner em algum lugar"). */
@media (max-width:1099px){
  .main-aside{display:block;padding:8px 20px 36px}
  .bn-lateral{position:static}
  .bn-lateral .bn-tall{width:100%;max-width:420px;margin:0 auto;min-height:0}
  .bn-lateral .bn-tall .bn-topicos{margin-top:4px}
}

/* --- banner alto (estilo peça de marca) --- */
.bn-lateral{display:block}
.bn-tall{flex-direction:column;gap:18px;width:300px;min-height:560px;padding:22px 22px 20px;border-radius:18px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 85% 6%, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(168deg, var(--bn-bg) 0%, color-mix(in srgb, var(--bn-bg) 58%, var(--bn-ac)) 100%);
  box-shadow:0 18px 50px rgba(2,6,23,.25)}
.bn-tall-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bn-logo{height:22px;width:auto;max-width:120px;display:block;opacity:.95}
.bn-pill{font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#111827;background:var(--bn-selo,#facc15);padding:5px 11px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(250,204,21,.35)}
.bn-tall-body{display:flex;flex-direction:column;gap:10px;flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:18px 16px}
.bn-eyebrow{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.bn-tall .bn-h{font-size:1.55rem;font-weight:800;line-height:1.12;letter-spacing:-.02em}
.bn-sub{font-size:.9rem;line-height:1.45;opacity:.85}
.bn-topicos{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-direction:column;gap:8px}
.bn-topicos li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 12px;font-size:.86rem;font-weight:600;display:flex;align-items:center;gap:8px}
.bn-topicos li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bn-ac);flex-shrink:0}
.bn-tall .bn-cta{padding:13px 16px;font-size:.95rem;border-radius:12px}
/* Na coluna de 772px os cards de números do perfil ficam estreitos: não deixa quebrar
   palavra no meio ("Microempr/esa") — hifeniza (html lang=pt-BR) e reduz um pouco. */
@media (min-width:1100px){
  .main-grid > .main-col .stats{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
  .main-grid > .main-col .stat .n{font-size:1.45rem;overflow-wrap:normal;hyphens:auto}
}
