/*
Theme Name: Base Brasilis
Description: Tema custom para basebrasilis.com — acolhedor, caloroso, "um abraço brasileiro"
Version: 2.0
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  /* paleta bandeira do Brasil (verde, amarelo, azul, branco), aquecida por um fundo creme e detalhes de terracota */
  --bg-cream:#FCF2E4;
  --bg-warm:#FBEAD6;
  --navy:#3E2B22;              /* texto principal — marrom-café, legibilidade quente */
  --green:#0E8A45;             /* verde-bandeira profundo — tags, acentos */
  --green-bright:#159C53;      /* verde-bandeira vivo — cor de marca principal, CTAs */
  --olive:#1E4FA0;             /* azul-bandeira — acento secundario (era verde-oliva) */
  --yellow:#FFC93C;            /* amarelo-bandeira — destaque */
  --yellow-dark:#D99A00;
  --terracota:#E2673E;         /* acento de calor, uso pontual (adesivo, detalhes) */
  --black:#3E2B22;             /* botao escuro = marrom-cafe, mais quente que preto puro */
  --text-muted:#8A7367;
  --card-bg:#FFFFFF;
  --border-soft:#EAE1CD;
  --radius-lg:28px;
  --radius-md:18px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }
/* Protecao geral: texto sem espaco (link colado, spam, etc.) nunca deve estourar
   o layout - vale pra qualquer texto de conteudo do site, nao so os lugares ja
   corrigidos individualmente. */
p, h1, h2, h3, h4, h5, h6, span, a, li, td, th{ overflow-wrap:anywhere; }
body{
  margin:0;
  background:var(--bg-cream);
  color:var(--navy);
  font-family:var(--font-body);
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .container{ padding-left:36px; padding-right:36px; } }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; }

/* ---------- Header ---------- */
.bb-header{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:22px; padding-bottom:22px; position:relative;
}
.bb-logo{ display:flex; align-items:center; gap:12px; }
.bb-logo img{ height:165px; width:auto; display:block; }

/* Menu do topo e sempre uma gaveta (☰), em qualquer tamanho de tela - deixa
   espaco pro logo e evita ter que reapertar o header cada vez que entra um
   servico novo (Empresas, Igrejas, Vagas, Classificados...). Flutua ancorada
   no botao, nao empurra o resto do header. */
.bb-nav-toggle{
  display:block; background:none; border:1px solid var(--border-soft); border-radius:12px;
  font-size:22px; line-height:1; cursor:pointer; color:var(--navy); padding:8px 12px;
}
.bb-nav{
  display:none; flex-direction:column; align-items:stretch; gap:0;
  position:absolute; top:100%; right:0; margin-top:10px; min-width:240px; z-index:20;
  background:#fff; border:1px solid var(--border-soft); border-radius:16px; padding:8px;
  box-shadow:0 12px 28px rgba(62,43,34,.14); font-weight:700; font-size:15px;
}
.bb-nav.is-open{ display:flex; }
.bb-nav a{ padding:14px 12px; border-bottom:1px solid var(--border-soft); white-space:normal; }
.bb-nav a:last-child{ border-bottom:none; }
.bb-nav a:hover{ color:var(--green-bright); }
.bb-nav .bb-cta{
  background:var(--green-bright); color:#fff; padding:11px 22px; border-radius:30px;
  box-shadow:0 6px 16px rgba(226,103,62,.3); text-align:center; margin-top:8px;
}

/* Campo de senha com botao "olho" (mostrar/ocultar) */
.bb-campo-senha{ position:relative; display:block; }
.bb-campo-senha input{ padding-right:42px !important; width:100%; box-sizing:border-box; }
.bb-campo-senha .bb-toggle-senha{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; border-radius:0; cursor:pointer; font-size:15px; line-height:1;
  padding:4px; width:auto; height:auto; display:flex; align-items:center; justify-content:center;
  opacity:.55; font-weight:400;
}
.bb-campo-senha .bb-toggle-senha:hover{ opacity:.9; }

/* Dropdown de sugestoes do autocomplete de endereco (Google Places) */
.bb-endereco-sugestoes{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:30; margin-top:4px;
  background:#fff; border:1px solid var(--border-soft); border-radius:10px;
  box-shadow:0 10px 24px rgba(62,43,34,.14); max-height:220px; overflow-y:auto;
}
.bb-endereco-sugestao-item{ padding:10px 14px; font-size:14px; font-weight:400; cursor:pointer; border-bottom:1px solid var(--border-soft); }
.bb-endereco-sugestao-item:last-child{ border-bottom:none; }
.bb-endereco-sugestao-item:hover{ background:var(--bg-warm); }

/* ---------- Hero ---------- */
.bb-hero{ padding:30px 0 28px; position:relative; }
.bb-hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr 0.6fr;
  grid-template-areas:"left map right";
  gap:32px; align-items:start; position:relative; z-index:1;
}
.bb-hero-left{ grid-area:left; }
.bb-hero-map{ grid-area:map; }
.bb-hero-right{ grid-area:right; }
.bb-hero-banner{
  width:100%; margin-top:24px;
  background:linear-gradient(120deg, var(--green-bright) 0%, var(--olive) 100%);
  border-radius:var(--radius-lg); padding:26px 32px; display:flex; align-items:center; justify-content:center;
  text-align:center; box-shadow:0 14px 30px rgba(21,156,83,.22);
}
.bb-hero-banner-text{
  font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.3;
  color:#fff; text-transform:uppercase; letter-spacing:.2px; margin:0; max-width:720px;
}

.bb-cards-4{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.bb-card-sm{
  background:#fff; border:2.5px solid var(--navy); border-radius:24px;
  padding:16px 18px; transition:transform .18s ease, box-shadow .18s ease;
  display:flex; align-items:center; gap:16px;
}
.bb-card-sm:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(62,43,34,.12); }
.bb-card-sm-icon{
  flex:none; width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  font-size:32px;
}
.bb-card-sm-body{ min-width:0; }
.bb-card-sm .bb-tag{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.bb-card-sm h3{ margin:4px 0 4px; font-size:15px; font-family:var(--font-display); font-weight:600; line-height:1.2; }
.bb-card-sm p{ color:var(--text-muted); font-size:12.5px; margin:0; line-height:1.35; }
.bb-card-sm .bb-btn{ display:none; }
.bb-eyebrow{
  display:inline-flex; align-items:center; gap:6px; background:#FBEAD6; color:var(--yellow-dark);
  font-size:13px; font-weight:800; padding:7px 16px; border-radius:20px; margin-bottom:20px;
}
.bb-hero h1{
  font-size:52px; line-height:1.06; margin:0 0 18px; color:var(--navy); font-weight:600;
  letter-spacing:-.5px;
}
.bb-hero h1 em{ color:var(--green-bright); font-style:italic; }
.bb-hero p.bb-lead{ color:#6B5A4E; font-size:17px; max-width:440px; margin:0 0 24px; }

.bb-searchbox{
  display:flex; gap:10px; background:#fff; border:1px solid var(--border-soft);
  border-radius:18px; padding:10px; margin-bottom:18px; box-shadow:0 8px 24px rgba(62,43,34,.06);
}
.bb-searchbox select, .bb-searchbox input{
  border:none; outline:none; font-size:14px; padding:10px; flex:1; background:transparent; color:var(--navy);
  font-family:var(--font-body); font-weight:600;
}
.bb-searchbox .divider{ width:1px; background:var(--border-soft); }

.bb-btn{
  display:inline-block; padding:15px 24px; border-radius:16px; font-weight:800; font-size:14px;
  text-align:center; cursor:pointer; border:none; letter-spacing:.2px;
  /* Reset completo de <button> nativo (2026-09-11, bug real visto em producao:
     "Copiar link" - o unico <button> no meio de varios <a> - ficava com fonte,
     altura e largura diferentes dos outros mesmo com o mesmo CSS). Sem esses 3,
     o navegador ainda aplica fonte/line-height/aparencia proprios de controle de
     formulario por baixo do pano, so' "border:none" nao cobre isso. */
  font-family:inherit;
  line-height:normal;
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}
/* color:#fff com !important nas 3 abaixo de proposito - paginas com
   .bb-page-content (ex: [bb_compartilhar]) tem uma regra ".bb-page-content a"
   mais especifica que forcava o texto desses botoes pra verde mesmo sendo
   um <a> estilizado como botao, nao um link de texto comum. */
.bb-btn-black{ background:var(--navy); color:#fff !important; }
.bb-btn-green{ background:var(--green-bright); color:#fff !important; box-shadow:0 8px 20px rgba(226,103,62,.28); }
.bb-btn-blue{ background:var(--olive); color:#fff !important; box-shadow:0 8px 20px rgba(30,79,160,.28); }
.bb-btn-yellow{ background:var(--yellow); color:var(--navy) !important; }
/* box-shadow em vez de border de proposito (2026-09-04) - uma border de verdade
   soma ao tamanho da caixa mesmo com box-sizing:border-box quando a altura e'
   automatica (nao fixa), entao esse botao ficava alguns pixels mais alto que os
   outros 3 da mesma fileira, empilhados - box-shadow "inset" desenha o contorno
   por cima sem ocupar espaco nenhum no layout. */
.bb-btn-white{ background:#fff; color:var(--navy) !important; box-shadow:inset 0 0 0 2px var(--border-soft); }
.bb-btn-block{ display:block; width:100%; margin-bottom:12px; }
/* Versao mais compacta (2026-09-04) - usada na fileira de botoes de contato
   (telefone/e-mail/whatsapp/site) da caixa "Contato e Detalhes" - o padding
   padrao do .bb-btn (15px em cima/embaixo) ficava alto empilhado 4x seguidas. */
.bb-btn-compact{ padding:11px 20px; }
/* Icone SVG dentro do botao (ver bb_icone_botao_svg no mu-plugin) - alinha com
   o texto e da um respiro antes da palavra/numero. */
.bb-btn svg{ vertical-align:-3px; margin-right:7px; }

.bb-hero-map{
  background:linear-gradient(160deg, #FFF7EC 0%, var(--bg-warm) 100%);
  border-radius:var(--radius-lg); border:1px solid var(--border-soft);
  display:block; padding:28px 22px; position:relative; overflow:hidden;
}
.bb-hero-map img{ border-radius:var(--radius-md); }

/* Selo/abraço central — compacto, nao estica com a altura das colunas vizinhas */
.bb-abraco{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:16px; }
.bb-abraco-rings{
  position:relative; width:100px; height:100px; display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.bb-abraco-ring{ position:absolute; border-radius:50%; opacity:.5; }
.bb-abraco-seal{
  position:relative; z-index:2; width:66px; height:66px; border-radius:50%;
  background:conic-gradient(from -40deg, var(--yellow), var(--green-bright) 45%, var(--olive) 85%, var(--yellow));
  display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow:0 10px 22px rgba(21,156,83,.3), 0 0 0 5px #fff;
}
.bb-abraco-tag{ font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--navy); margin-top:0; }

.bb-join-box{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:26px;
  box-shadow:0 10px 28px rgba(62,43,34,.05);
}
.bb-join-box h3{ margin:0 0 6px; font-size:19px; }
.bb-join-box p{ color:var(--text-muted); font-size:13px; margin:0 0 16px; }
.bb-join-box input{
  width:100%; padding:11px 13px; margin-bottom:10px; border:1px solid var(--border-soft);
  border-radius:12px; font-size:14px; font-family:var(--font-body);
}
.bb-join-note{ font-size:11px; color:var(--text-muted); margin-top:10px; text-align:center; }

.bb-ad-box{
  background:linear-gradient(160deg, var(--yellow) 0%, #E9962A 100%); border-radius:var(--radius-lg);
  padding:24px; text-align:center; margin-top:22px; color:#4A2F0C;
}
.bb-ad-box h4{ margin:8px 0; font-size:17px; }
.bb-ad-box p{ font-size:12.5px; margin:0 0 16px; opacity:.85; }
.bb-ad-box .bb-btn{ width:100%; background:var(--navy); color:#fff; }

.bb-hero-photo{
  margin-top:26px; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 16px 36px rgba(62,43,34,.12);
}
.bb-hero-photo img{ width:100%; height:320px; object-fit:cover; display:block; }

/* ---------- Faixa emocional ---------- */
/* Era --navy, igual ao rodape - depois que a faixa verde "Vamos, juntos..."
   (bb-cta-final, ficava entre essa faixa e o rodape) foi removida da home
   2026-08-28, as duas faixas escuras ficaram coladas e indistinguiveis uma
   da outra. Passou por --terracota, mas o usuario preferiu voltar pro
   creme (--bg-cream, mesmo fundo do bloco "Nossa Comunidade" no topo da
   home) - ainda funciona pra separacao visual porque fica entre duas
   faixas escuras (bb-stats-band em cima, rodape embaixo). */
.bb-quote-strip{
  background:var(--bg-cream); color:var(--navy); padding:46px 0; margin:20px 0 0;
}
.bb-quote-strip-inner{ display:flex; align-items:center; gap:36px; }
.bb-quote-strip-text{ flex:2 1 0; text-align:center; }
.bb-quote-strip p{
  font-family:var(--font-display); font-style:italic; font-size:26px; max-width:640px; margin:0 auto;
  line-height:1.4;
}
.bb-quote-strip span{ display:block; margin-top:14px; font-size:13px; opacity:.65; font-style:normal; font-family:var(--font-body); letter-spacing:.3px; }
.bb-quote-strip-divider{ width:1.5px; align-self:stretch; background:var(--border-soft); flex:none; }
.bb-quote-strip-insta{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.bb-quote-strip-insta .bb-insta-icone{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:50%; border:1.8px solid var(--terracota); color:var(--terracota); transition:background .2s, color .2s;
}
.bb-quote-strip-insta .bb-insta-icone:hover{ background:var(--terracota); color:#fff; }
.bb-quote-strip-insta .bb-insta-texto{ font-size:13.5px; font-weight:800; color:var(--terracota); letter-spacing:.2px; }
@media (max-width:820px){
  .bb-quote-strip-inner{ flex-direction:column; gap:26px; }
  .bb-quote-strip-divider{ display:none; }
}

/* ---------- Sections gerais ---------- */
/* padding-top/bottom em vez do atalho "padding:64px 0" de proposito - o
   atalho zerava o padding esquerdo/direito de QUALQUER elemento que tivesse
   as duas classes juntas (class="bb-section container"), porque essa regra
   vem depois da .container no arquivo e ganha a briga do CSS. Isso deixava
   paginas inteiras (arquivos de empresa/evento/igreja etc.) coladas na
   borda da tela, sem margem nenhuma - em qualquer tamanho de tela, nao so
   celular. */
.bb-section{ padding-top:64px; padding-bottom:64px; }
.bb-section-head{ margin-bottom:36px; text-align:center; }
.bb-section-head.left{ text-align:left; }
.bb-section-head h2{ font-size:34px; margin:8px 0 10px; color:var(--navy); font-weight:600; }
.bb-filtros{ display:flex; gap:12px; flex-wrap:wrap; margin:0 0 32px; }
.bb-filtros input[type=text]{
  flex:1; min-width:220px; border:1px solid var(--border-soft); border-radius:12px;
  padding:12px 16px; font-size:14px; font-family:var(--font-body); background:#fff;
}
.bb-filtros select{
  border:1px solid var(--border-soft); border-radius:12px; padding:12px 16px;
  font-size:14px; font-family:var(--font-body); background:#fff; color:var(--navy); min-width:200px;
}
.bb-filtros button{
  background:var(--green-bright); color:#fff; border:none; border-radius:12px;
  padding:12px 26px; font-weight:800; cursor:pointer; font-family:var(--font-body); font-size:14px;
}
/* flex-wrap aqui tambem: se so o .bb-filtros externo quebra linha mas esse grupo
   (endereco+pin+raio) fica rigido por dentro, ele nao cabe no espaco que sobra e
   passa por cima do botao Buscar em vez de quebrar - flex-wrap resolve os dois. */
.bb-filtro-raio{ display:flex; flex-wrap:wrap; gap:8px; flex:1; min-width:280px; align-items:center; }
.bb-filtro-raio-endereco{ flex:1; min-width:160px; display:block; position:relative; }
.bb-filtro-raio-endereco input[type=text]{ width:100%; min-width:0; box-sizing:border-box; }
.bb-filtro-raio select{ min-width:150px; flex:none; }
.bb-filtro-raio button{
  background:#fff; color:var(--navy); border:1px solid var(--border-soft); border-radius:12px;
  padding:0 14px; font-size:16px; cursor:pointer; flex:none;
}
.bb-filtro-raio button:hover{ background:var(--bg-warm); }
/* flex:none no botao "Buscar": sem isso ele encolhia (shrink padrao do flex) em vez
   de quebrar pra proxima linha quando a barra ficava sem espaco, e sobrepunha o
   filtro de raio - era o bug visto em producao 2026-08-28. */
.bb-filtros > button{ flex:none; }
@media (max-width: 620px){
  .bb-filtros{ flex-direction:column; }
  .bb-filtros select, .bb-filtros button{ width:100%; }
  .bb-filtro-raio{ flex-direction:column; min-width:0; align-items:stretch; }
  .bb-filtro-raio-endereco{ min-width:0; }
  .bb-filtro-raio button{ padding:12px; }
}
.bb-section-head p{ color:var(--text-muted); max-width:520px; margin:0 auto; }
.bb-section-head.left p{ margin:0; }

.bb-cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.bb-card{
  background:var(--card-bg); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:26px; transition:transform .18s ease, box-shadow .18s ease;
}
.bb-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(62,43,34,.1); }
.bb-card .bb-tag{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.bb-card .bb-tag.green{ color:var(--green-bright); }
.bb-card .bb-tag.navy{ color:var(--olive); }
.bb-card .bb-tag.yellow{ color:var(--yellow-dark); }
.bb-card h3{ margin:12px 0 8px; font-size:20px; overflow-wrap:anywhere; word-break:break-word; }
.bb-card p{ color:var(--text-muted); font-size:14px; margin:0; overflow-wrap:anywhere; word-break:break-word; }

/* ---------- Listagem de empresas/igrejas/classificados (linha horizontal) ----------
   Pedido do Thomas 2026-08-28: era um grid de cards verticais com foto grande em
   cima; virou uma lista de linhas - foto pequena (25% do tamanho antigo) a esquerda,
   depois nome, tipo, [preco/local quando existe] e por fim a descricao preenchendo
   o resto da linha, cortada com "…" pra nunca deixar a linha crescer mais alta que
   a foto. Como todas usam largura FIXA de foto (nao mais aspect-ratio dependente da
   coluna do grid), a altura da linha fica sempre identica em qualquer tela. */
.bb-empresa-grid{ display:flex; flex-direction:column; gap:10px; }
.bb-empresa-card{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; align-items:stretch; gap:14px; transition:border-color .15s ease, box-shadow .15s ease;
}
.bb-empresa-card:hover{ border-color:var(--green-bright); box-shadow:0 6px 16px rgba(62,43,34,.08); }
.bb-empresa-card .thumb{
  width:96px; height:60px; flex:none; background:var(--bg-warm); position:relative; overflow:hidden;
  /* cantos esquerdos arredondados direto na propria foto - o overflow:hidden do
     .bb-empresa-card ja devia cuidar disso, mas o navegador as vezes nao recorta
     o filho de um flex container do jeito esperado (bug visto em producao
     2026-08-28: a linha ficava arredondada mas a foto quadrada, sobrepondo o
     canto). Deixar o arredondamento tambem aqui garante o visual certo sempre. */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  /* Continuou quadrado especificamente no iPhone/Safari mesmo com border-radius
     direto aqui - e um bug conhecido do WebKit: overflow:hidden + border-radius
     nao recorta direito quando o elemento tambem tem position:relative (preciso
     disso pro selo VENDIDO). transform forca o Safari a compositar isso numa
     camada propria, o que corrige o recorte. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.bb-empresa-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.bb-empresa-card .thumb.thumb-logo img{ object-fit:contain; background:#fff; padding:14px; } /* logo nunca deve ser cortada (2026-08-31) */
.bb-thumb-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:22px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.15));
}
.bb-thumb-placeholder.c1{ background:linear-gradient(135deg, var(--green-bright), var(--olive)); }
.bb-thumb-placeholder.c2{ background:linear-gradient(135deg, var(--yellow), #E9962A); }
.bb-thumb-placeholder.c3{ background:linear-gradient(135deg, var(--olive), var(--green)); }
.bb-empresa-card .body{
  display:flex; align-items:center; gap:16px; min-width:0; flex:1; padding:0 16px 0 0;
}
/* h3/.cat/.loc: flex-shrink:1 (nao "none") de proposito - em telas bem estreitas
   isso deixa eles tambem cortarem com "…" em vez de estourar a linha; na pratica,
   com espaco normal eles ficam do tamanho do conteudo (flex-grow:0) e quem cede
   espaco primeiro e a .desc, que tem flex-grow. Mantém a linha sempre numa unica
   altura (a da foto) em qualquer largura de tela - nunca quebra pra 2 linhas. */
.bb-empresa-card h3{
  margin:0; font-size:15px; font-family:var(--font-display); font-weight:600; color:var(--navy);
  flex:0 1 auto; min-width:32px; max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bb-empresa-card .cat{
  font-size:12px; color:var(--green-bright); font-weight:800; flex:0 1 auto; min-width:24px; max-width:150px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bb-empresa-card .loc{
  font-size:13px; color:var(--text-muted); flex:0 1 auto; min-width:24px; max-width:150px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bb-empresa-card .desc{
  font-size:13.5px; color:var(--text-muted); flex:1 1 40px; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Selo "VENDIDO" (classificados) - tamanho base usado na pagina unica (dentro da
   caixa "Fotos", ao lado do carrossel); a regra mais especifica logo abaixo
   encolhe ele quando aparece dentro do card pequeno do arquivo/listagem. */
.bb-selo-vendido{
  position:absolute; background:#B3261E; color:#fff; font-weight:800;
  font-size:12px; padding:5px 12px; border-radius:20px; letter-spacing:.3px;
}
/* Versao reduzida pra caber numa foto de 60px de altura (card do arquivo) -
   era pensado pra foto grande de antes, ficava maior que a propria foto. */
.bb-empresa-card .thumb .bb-selo-vendido{
  position:absolute; top:4px; right:4px; background:#B3261E; color:#fff; font-weight:800;
  font-size:8px; padding:2px 5px; border-radius:8px; letter-spacing:.3px;
}
@media (max-width: 620px){
  .bb-empresa-card .body{ gap:10px; padding:0 12px 0 0; }
  .bb-empresa-card h3{ max-width:none; flex:1 1 auto; }
  .bb-empresa-card .cat{ max-width:150px; flex:none; }
  /* mobile: so nome + tipo. Cidade e descricao somem - nao sobra espaco real pra
     4-5 campos numa linha so de ~300px sem quebrar a regra de "nunca crescer mais
     alto que a foto" (o filtro de cidade no topo da pagina cobre essa busca). */
  .bb-empresa-card .loc, .bb-empresa-card .desc{ display:none; }
}

/* ---------- Empresas: filtro em caixa + grid de cards (2026-09-10) ----------
   Port do formato da pagina de Service Providers do Kennelpedia (pedido
   explicito do Thomas). Classes isoladas/proprias, deliberadamente SEM tocar
   em .bb-filtros/.bb-empresa-grid/.bb-empresa-card (compartilhadas com
   Igreja/Evento/Vaga/Classificado) - so a pagina de Empresas usa isso. */
.bb-provider-filtros{
  background:var(--bg-warm); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:24px 26px; margin-bottom:28px;
}
.bb-provider-filtros .bb-campo{ margin-bottom:18px; }
.bb-provider-filtros .bb-campo:last-of-type{ margin-bottom:0; }
.bb-provider-filtros label.bb-campo-titulo{ display:block; font-weight:800; font-size:13px; color:var(--navy); margin-bottom:8px; }
.bb-provider-filtros label.bb-campo-titulo .hint{ font-weight:400; color:var(--text-muted); }
.bb-provider-filtros input[type=text], .bb-provider-filtros select{
  width:100%; box-sizing:border-box; padding:11px 14px; border-radius:12px; border:1px solid var(--border-soft);
  font-family:var(--font-body); font-size:14px; background:#fff; color:var(--navy);
}
.bb-provider-filtros .bb-campo-linha{ display:flex; gap:14px; flex-wrap:wrap; }
.bb-provider-filtros .bb-campo-linha > div{ flex:1; min-width:160px; }
.bb-filtro-checkboxes{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.bb-filtro-checkboxes label{ display:flex; align-items:center; gap:6px; font-weight:400; font-size:13.5px; color:var(--navy); cursor:pointer; }
.bb-filtro-checkboxes input[type=checkbox]{ width:auto; margin:0; accent-color:var(--green-bright); }
.bb-filtro-checkboxes .contagem{ color:var(--text-muted); }
.bb-provider-filtros .bb-campo-acoes{ display:flex; gap:14px; align-items:center; }
.bb-provider-filtros .bb-campo-acoes a{ color:var(--text-muted); font-weight:700; font-size:13px; }
@media (max-width:600px){
  .bb-provider-filtros{ padding:18px; }
  .bb-provider-filtros .bb-campo-linha > div{ min-width:0; flex-basis:100%; }
}

.bb-provider-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
@media (max-width:1000px){ .bb-provider-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:720px){ .bb-provider-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; } }
@media (max-width:480px){ .bb-provider-grid{ grid-template-columns:1fr; } }
.bb-provider-card{
  display:flex; flex-direction:column; background:var(--card-bg); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.bb-provider-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(62,43,34,.10); border-color:var(--green-bright); }
.bb-provider-card .thumb{ aspect-ratio:4/3; background:var(--bg-warm); overflow:hidden; }
.bb-provider-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.bb-provider-card .thumb.thumb-logo img{ object-fit:contain; background:#fff; padding:16px; }
.bb-provider-card .thumb .bb-thumb-placeholder{ width:100%; height:100%; border-radius:0; }
.bb-provider-card .body{ padding:14px 16px 16px; }
.bb-provider-card h3{ font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--navy); margin:0 0 4px; line-height:1.3; }
.bb-provider-card .cat{ display:block; color:var(--green); font-weight:700; font-size:12px; margin-bottom:3px; }
.bb-provider-card .loc{ display:block; color:var(--text-muted); font-size:12.5px; }

/* ---------- Single empresa/evento ---------- */
.bb-single{ padding-top:50px; padding-bottom:50px; }
/* Era object-fit:cover (16/6, depois 16/9) - fotos de celular sao quase sempre
   verticais, e cover sempre vai cortar uma foto vertical de algum jeito quando
   o container e horizontal (so muda o quanto). Trocado pra "contain": a foto
   inteira sempre aparece, sem cortar nada - fotos verticais ficam com barras
   vazias nos lados (preenchidas com --bg-warm, mesmo fundo do container, pra
   nao parecer um "buraco"), fotos horizontais praticamente preenchem o espaco
   inteiro sem barra nenhuma. Afeta TODAS as paginas de detalhe (empresa/igreja/
   evento/vaga/classificado/biblioteca), a regra e compartilhada. */
/* max-width:35% + margin:auto centralizado - a foto e um ADORNO, nao o
   principal do post (pedido explicito do Thomas 2026-08-28); passou de 100%
   pra 70% e ainda dominava a pagina, entao reduziu mais uma vez pra bem menor.
   Reduz largura E altura juntas (a altura segue via aspect-ratio). */
.bb-single .cover{ border-radius:var(--radius-lg); overflow:hidden; margin:0 auto 24px; aspect-ratio:16/9; background:var(--bg-warm); max-width:35%; }
.bb-single .cover img{ width:100%; height:100%; object-fit:contain; }

/* ---------- Carrossel de fotos (empresa/igreja/evento/vaga/classificado) ----------
   Padronizacao visual dos cadastros, 2026-08-28: substitui a foto de capa gigante
   em cima do titulo por um bloco de fotos "adorno" dentro da coluna esquerda, do
   lado da descricao - mockup aprovado pelo Thomas. Mesma logica de nao-cortar
   (object-fit:contain + fundo --bg-warm) da capa da Biblioteca. Miniatura clicada
   troca a foto principal - JS delegado em footer.php, um listener so pro site
   inteiro (nao precisa duplicar script em cada template). */
.bb-carrossel-principal{
  aspect-ratio:4/3; max-width:380px; margin:0 auto 14px; border-radius:var(--radius-md);
  overflow:hidden; background:var(--bg-warm); position:relative;
}
.bb-carrossel-img{ width:100%; height:100%; object-fit:contain; display:none; }
.bb-carrossel-img.ativa{ display:block; }
.bb-carrossel-miniaturas{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.bb-mini-btn{
  width:52px; height:52px; border-radius:10px; overflow:hidden; border:2px solid transparent;
  padding:0; cursor:pointer; background:none; flex:none; transition:border-color .15s ease, transform .15s ease;
}
.bb-mini-btn:hover{ transform:translateY(-2px); }
.bb-mini-btn.ativa{ border-color:var(--green-bright); }

.bb-single h1{ font-size:36px; margin:0 0 8px; }
.bb-page-content{ max-width:760px; }
.bb-page-content p{ color:#6B5A4E; font-size:15px; line-height:1.7; margin:0 0 16px; }
.bb-page-content h2{ font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.3; color:var(--navy); margin:32px 0 12px; }
.bb-page-content h2:first-child{ margin-top:0; }
.bb-page-content ul{ margin:0 0 16px; padding-left:22px; color:#6B5A4E; font-size:15px; line-height:1.7; }
.bb-page-content li{ margin-bottom:6px; }
.bb-page-content a{ color:var(--green); font-weight:700; }
.bb-meta-row{ display:flex; gap:16px; flex-wrap:wrap; color:var(--text-muted); font-size:14px; margin-bottom:24px; }
.bb-info-grid{ display:grid; grid-template-columns:2fr 1fr; gap:32px; margin-top:24px; }
.bb-info-box{
  background:#fff; border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:22px; margin-bottom:16px;
  overflow-wrap:anywhere; word-break:break-word;
}
.bb-info-box p, .bb-info-box div{ overflow-wrap:anywhere; word-break:break-word; }
.bb-info-box h4{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--green-bright); font-family:var(--font-body); font-weight:800; }
/* Caixa "Divulgue" - QR e texto lado a lado (2026-09-11), botoes numa fileira
   so embaixo, todos do mesmo tamanho (.bb-btn-compact). */
.bb-qrcode-topo{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.bb-qrcode-topo img{ flex:none; width:110px; height:110px; margin:0; border-radius:12px; border:1px solid var(--border-soft); }
.bb-qrcode-topo p{ margin:0; font-size:12.5px; color:var(--text-muted); }
.bb-qrcode-botoes{ display:flex; flex-wrap:wrap; gap:8px; }
.bb-qrcode-botoes .bb-btn{ flex:1 1 0; min-width:130px; white-space:nowrap; font-size:13px; padding-left:14px; padding-right:14px; }
@media (max-width:480px){
  .bb-qrcode-topo{ flex-direction:column; align-items:flex-start; }
  .bb-qrcode-topo img{ margin:0 auto; }
}
.bb-tags-lista{ display:flex; flex-wrap:wrap; gap:8px; }
.bb-noticia-acoes{ display:flex; gap:12px; margin:18px 0 28px; flex-wrap:wrap; }
.bb-like-btn, .bb-share-btn{
  display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--navy);
  border:1px solid var(--border-soft); border-radius:30px; padding:10px 20px;
  font-size:14px; font-weight:800; font-family:var(--font-body); cursor:pointer; text-decoration:none;
}
.bb-like-btn:hover, .bb-share-btn:hover{ border-color:var(--green-bright); color:var(--green-bright); }
.bb-like-btn.liked{ background:#FBE7E7; border-color:#F3C9C9; color:#B3261E; cursor:default; }
.bb-like-count{ opacity:.7; }
.bb-card-stats{ display:flex; gap:14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border-soft); font-size:12.5px; color:var(--text-muted); }

/* Tela "Estatisticas" da area logada (2026-08-28) */
.bb-stat-tile{ background:var(--bg-warm); border-radius:var(--radius-md); padding:14px 22px; min-width:130px; text-align:center; flex:1; }
.bb-stat-tile strong{ display:block; font-size:28px; font-family:var(--font-display); color:var(--navy); line-height:1.2; }
.bb-stat-tile span{ font-size:12px; color:var(--text-muted); font-weight:700; }
.bb-tabela-stats{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
.bb-tabela-stats th{ text-align:left; padding:8px 10px; border-bottom:2px solid var(--border-soft); color:var(--text-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; }
.bb-tabela-stats td{ padding:10px; border-bottom:1px solid var(--border-soft); }
/* Grafico de barras do painel "Estatisticas do Site" (2026-09-23) - CSS
   puro, sem lib de grafico externa (mesma filosofia do resto do site). */
.bb-stats-grafico{ display:flex; align-items:flex-end; gap:2px; height:140px; background:var(--bg-warm); border-radius:12px; padding:10px 8px 0; }
.bb-stats-barra{ flex:1 1 0; min-width:2px; background:var(--green-bright); border-radius:3px 3px 0 0; transition:opacity .15s; cursor:default; }
.bb-stats-barra:hover{ opacity:.7; }
.bb-stats-eixo{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); margin-top:4px; padding:0 8px; }
.bb-tag-pill{
  background:var(--bg-warm); color:var(--navy); border:1px solid var(--border-soft);
  border-radius:30px; padding:6px 14px; font-size:13px; font-weight:700;
}
/* Filtro de periodo do painel "Estatisticas do Site" (2026-09-30) - reusa
   .bb-tag-pill mas como link clicavel, com estado ativo em destaque. */
.bb-stats-periodo-filtro{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.bb-stats-periodo-filtro .bb-tag-pill{ text-decoration:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.bb-stats-periodo-filtro .bb-tag-pill:hover{ border-color:var(--green-bright); }
.bb-stats-periodo-filtro .bb-tag-pill.ativo{ background:var(--green-bright); border-color:var(--green-bright); color:#fff; }
.bb-chat-cabecalho{ padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--border-soft); font-size:14px; }
.bb-chat-cabecalho p{ margin:0; }
.bb-chat-mensagens{ display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto; padding-right:4px; }
.bb-chat-bolha{
  max-width:75%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5;
  background:var(--bg-warm); align-self:flex-start; position:relative;
}
.bb-chat-bolha.minha{ background:var(--green-bright); color:#fff; align-self:flex-end; }
.bb-chat-bolha.sistema{ background:transparent; border:1px dashed var(--border-soft); color:var(--text-muted); font-size:12.5px; align-self:center; max-width:90%; text-align:center; }
.bb-chat-hora{ display:block; font-size:11px; opacity:.7; margin-top:4px; }
.bb-info-box a.bb-btn{ margin-top:6px; }

/* ---------- Formulario de cadastro ---------- */
.bb-form-empresa{
  max-width:640px; display:flex; flex-direction:column; gap:14px; background:#fff;
  border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:30px;
}
.bb-form-empresa label{ font-size:13px; font-weight:700; color:var(--navy); display:flex; flex-direction:column; gap:6px; }
.bb-form-empresa input, .bb-form-empresa select, .bb-form-empresa textarea{
  border:1px solid var(--border-soft); border-radius:12px; padding:11px 13px; font-size:14px; font-family:var(--font-body);
}
/* Seletor de pais + campo mascarado do telefone/WhatsApp (2026-08-29) */
.bb-tel-grupo{ display:flex; gap:8px; }
.bb-tel-pais{ flex:none; width:auto; padding-right:6px !important; }
.bb-tel-input{ flex:1; min-width:0; }

/* Linha de item com avatar/thumb + info + acoes, usada na lista de Usuarios e
   nas listas de Moderacao (empresa/igreja/evento/vaga/classificado/biblioteca/
   bate-papo) - 2026-08-29. Antes era tudo inline style num flex-row unico sem
   quebra: numa tela estreita, o bloco de acoes (largura fixa) espremia o nome
   pra uma coluna tao fina que ele quebrava letra por letra. Agora empilha
   (acoes descem pra linha de baixo) assim que nao cabe mais tudo numa linha so. */
.bb-usuario-row{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.bb-usuario-info{ flex:1 1 180px; min-width:0; }
.bb-usuario-acoes{ flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-left:auto; }
.bb-form-empresa button{
  background:var(--green-bright); color:#fff; border:none; border-radius:14px; padding:15px; font-weight:800; cursor:pointer;
}
@media (max-width: 600px){
  .bb-form-empresa{ padding:18px; gap:12px; }
}

/* filiais / enderecos extras */
.bb-filial-item{
  border:1px solid var(--border-soft); border-radius:14px; padding:16px; margin-top:10px;
  background:var(--bg-cream); display:flex; flex-direction:column; gap:14px;
}
.bb-filial-remover{
  background:none; border:none; color:#B3261E; font-weight:700; font-size:13px; cursor:pointer; padding:0; align-self:flex-start;
}
#bb-filial-add{
  background:none; border:1.5px dashed var(--border-soft); color:var(--olive); border-radius:12px;
  padding:11px 16px; font-weight:800; font-size:13.5px; cursor:pointer; margin-top:10px;
}
.bb-outros-campo input{ width:100%; }
.bb-contato-layout{ display:flex; gap:44px; align-items:flex-start; }
.bb-contato-texto{ flex:1; min-width:280px; padding-top:8px; }
.bb-contato-texto h3{ font-family:var(--font-display); font-weight:600; font-size:30px; line-height:1.15; color:var(--navy); margin:0 0 18px; }
.bb-contato-texto p{ color:#6B5A4E; font-size:15px; line-height:1.65; margin:0 0 16px; }
.bb-contato-texto .bb-contato-assinatura{ color:var(--navy); font-size:15px; margin-bottom:0; }
.bb-contato-layout .bb-form-empresa{ flex:1; min-width:300px; }
@media (max-width: 860px){
  .bb-contato-layout{ flex-direction:column; gap:28px; }
}
/* Overlay "Aguarde, estamos processando..." ao enviar qualquer formulario
   (2026-09-23) - ver o JS/HTML correspondente no wp_footer do mu-plugin. */
#bb-overlay-processando{ display:none; position:fixed; inset:0; z-index:99999; background:rgba(21,15,10,.6); align-items:center; justify-content:center; }
#bb-overlay-processando.ativo{ display:flex; }
.bb-overlay-caixa{ background:#fff; border-radius:var(--radius-lg); padding:32px 40px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3); }
.bb-overlay-spinner{ width:40px; height:40px; border:4px solid var(--border-soft); border-top-color:var(--green-bright); border-radius:50%; margin:0 auto 16px; animation:bb-girar .8s linear infinite; }
.bb-overlay-caixa p{ margin:0; font-weight:700; color:var(--navy); }
@keyframes bb-girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .bb-overlay-spinner{ animation:none; } }

.bb-msg{ padding:14px 18px; border-radius:12px; margin-bottom:16px; font-size:14px; }
.bb-msg-ok{ background:#EAF1E4; color:var(--olive); }
.bb-msg-erro{ background:#FBE7E7; color:#B3261E; }

/* ---------- Toggle publicar/ocultar (painel de moderacao) ---------- */
.bb-toggle{
  display:inline-block; width:44px; height:24px; border-radius:20px; position:relative;
  flex:none; transition:background .2s ease;
}
.bb-toggle.on{ background:var(--green-bright); }
.bb-toggle.off{ background:#D8CFC0; }
.bb-toggle-knob{
  position:absolute; top:3px; width:18px; height:18px; border-radius:50%; background:#fff;
  transition:left .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.bb-toggle.on .bb-toggle-knob{ left:23px; }
.bb-toggle.off .bb-toggle-knob{ left:3px; }

/* ---------- Login / Registro / Minha Conta ---------- */
.bb-auth-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.bb-auth-col h3{ margin:0 0 14px; font-size:19px; }
.bb-auth-col .bb-form-empresa{ max-width:none; }
/* Traducao em ingles ao lado de cada campo/rotulo do cadastro (2026-09-12) -
   pedido da Twilio pra revisar o texto de consentimento SMS em ingles, sem
   duplicar a pagina inteira. Inline nos rotulos curtos, em bloco (linha
   propria) dentro dos paragrafos longos dos checkboxes de consentimento.
   2026-09-15: tirado o estilo "apagado" (cinza/pequeno) do paragrafo de
   consentimento - a Twilio disse que nao conseguiu revisar o texto em
   ingles, entao agora ele tem o MESMO peso visual do portugues, com um
   rotulo "English" bem visivel separando os dois (nao mudei os rotulos
   curtos de campo, tipo "Nome / Name", que continuam discretos). */
.bb-auth-en{ color:inherit; font-weight:inherit; font-style:normal; font-size:1em; }
.bb-auth-en-block{ display:block; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border-soft); }
.bb-auth-en-label{ display:block; font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--olive); margin-bottom:3px; }
.bb-auth-en a{ font-weight:700; }
.bb-auth-opcional{ margin:0 0 6px; font-size:12.5px; font-weight:700; color:var(--text-muted); }
.bb-conta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.bb-dados-layout{ display:flex; gap:32px; align-items:flex-start; }
.bb-dados-layout .bb-form-empresa{ flex:1; min-width:0; }
.bb-foto-preview-box{
  flex:none; width:220px; height:220px; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--border-soft); background:var(--bg-warm);
}
.bb-foto-preview-box img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 720px){
  .bb-dados-layout{ gap:14px; }
  .bb-foto-preview-box{ width:96px; height:96px; }
}
@media (max-width: 480px){
  .bb-foto-preview-box{ width:76px; height:76px; }
}
/* Colunas tipo "mural" (nao grid) de proposito - com grid, cada LINHA fica
   com a altura do maior grupo dela, sobrando espaco vazio embaixo dos grupos
   curtos. Com columns, cada coluna se preenche de cima pra baixo sozinha,
   sem espaco sobrando entre grupos de tamanhos diferentes. */
.bb-menu-grupos{ columns:3; column-gap:36px; max-width:1240px; }
.bb-menu-grupo{ break-inside:avoid; margin-bottom:28px; }
.bb-menu-grupo h5{ margin:0 0 10px; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--green-bright); }
.bb-menu-grupo-itens{ display:flex; flex-direction:column; gap:8px; }
.bb-conta-menu-item{
  display:flex; flex-direction:row; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--border-soft); border-radius:12px;
  padding:13px 16px; text-align:left; font-weight:700; color:var(--navy); font-size:14px; position:relative;
  transition:border-color .15s ease, background .15s ease;
}
.bb-conta-menu-item span{ font-size:18px; flex:none; }
.bb-conta-menu-item:hover{ border-color:var(--green-bright); background:var(--bg-warm); color:var(--green-bright); }
.bb-badge-novo{
  margin-left:auto; background:var(--terracota); color:#fff;
  font-size:11px; font-weight:800; min-width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 4px; flex:none;
}
@media (max-width: 900px){
  .bb-auth-tabs, .bb-conta-grid{ grid-template-columns:1fr; }
  .bb-menu-grupos{ columns:2; }
}
@media (max-width: 560px){
  .bb-menu-grupos{ max-width:none; columns:1; }
}

/* ---------- Footer ---------- */
.bb-footer{ background:var(--navy); color:#F3E7DA; padding:28px 0 26px; margin-top:0; }
.bb-footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; margin-bottom:36px; }
.bb-footer h4{ font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:#D9A97C; margin:0 0 14px; }
.bb-footer a{ display:block; font-size:14px; color:#F3E7DA; margin-bottom:10px; opacity:.85; }
.bb-footer a:hover{ opacity:1; color:var(--yellow); }
.bb-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; font-size:12.5px; color:#D9A97C; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px){
  .bb-hero-grid{ grid-template-columns:1fr; grid-template-areas:"left" "map" "right"; }
  .bb-hero-banner-text{ font-size:20px; }
  .bb-cards-3, .bb-cards-4{ grid-template-columns:1fr; }
  .bb-footer-grid{ grid-template-columns:1fr; }
  .bb-info-grid{ grid-template-columns:1fr; }
  .bb-hero h1{ font-size:36px; }
  .bb-quote-strip p{ font-size:20px; }

  .bb-footer img{ height:64px; }
  .bb-logo img{ height:112px; }
}

/* Banner de instalar o app (PWA, 2026-08-30) */
#bb-pwa-banner{
  position:fixed; top:0; left:0; right:0; z-index:9999; display:flex; align-items:center; gap:14px;
  background:var(--green-bright); color:#fff; padding:12px 16px; font-size:15.5px; font-weight:700; line-height:1.4;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
#bb-pwa-banner span{ flex:1; }
#bb-pwa-banner strong{ font-weight:900; }
#bb-pwa-banner button{ flex:none; border:none; border-radius:20px; padding:8px 14px; font-weight:800; font-size:13px; cursor:pointer; }
#bb-pwa-banner #bb-pwa-instalar{ background:#fff; color:var(--green-bright); }
#bb-pwa-banner #bb-pwa-fechar{ background:transparent; color:#fff; font-size:18px; padding:4px 8px; line-height:1; }
@media (max-width:600px){
  #bb-pwa-banner{ flex-wrap:wrap; }
  #bb-pwa-banner span{ flex:1 1 100%; }
}

/* Tutorial "o que da pra cadastrar" em Minha Conta (2026-08-30) */
.bb-tutorial-box{ border:2px solid var(--green-bright); margin-bottom:24px; }
.bb-tutorial-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:16px; }
.bb-tutorial-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:16px;
  border-radius:var(--radius-md); background:var(--bg-warm); text-decoration:none; color:var(--navy);
  transition:transform .15s, box-shadow .15s;
}
.bb-tutorial-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(62,43,34,.1); }
.bb-tutorial-icone{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.bb-tutorial-card strong{ font-size:14px; line-height:1.3; }
.bb-tutorial-card span:last-child{ font-size:12.5px; color:var(--text-muted); line-height:1.4; }
@media (max-width:820px){ .bb-tutorial-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .bb-tutorial-grid{ grid-template-columns:1fr; } }

/* Reivindicar cadastro "sem dono" (2026-08-30) */
.bb-reivindicar-box{ border:2px dashed var(--olive); background:var(--bg-warm); }
.bb-reivindicar-box .bb-btn{ margin-top:10px; }
/* Mascote ao lado do texto (2026-09-11) - 1/3 imagem, 2/3 texto+botao. */
.bb-reivindicar-flex{ display:flex; align-items:center; gap:18px; }
.bb-reivindicar-mascote{ width:33%; max-width:120px; flex:none; height:auto; border-radius:10px; margin:0; }
.bb-reivindicar-conteudo{ flex:1; min-width:0; }
@media (max-width:480px){
  .bb-reivindicar-flex{ flex-direction:column; text-align:center; }
  .bb-reivindicar-mascote{ width:140px; max-width:55%; }
}
.bb-reiv-modal{ border:none; border-radius:var(--radius-lg); padding:26px; max-width:480px; width:90%; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.bb-reiv-modal::backdrop{ background:rgba(62,43,34,.55); }
.bb-reiv-modal label{ font-size:13px; font-weight:700; color:var(--navy); display:block; }
.bb-reiv-modal textarea{ width:100%; border:1px solid var(--border-soft); border-radius:12px; padding:11px 13px; font-size:14px; font-family:var(--font-body); margin-top:6px; }

/* "Caramelo, busque as informações!" - preenchimento automatico via IA no
   cadastro de Empresa (2026-08-31, so ADM por enquanto) */
.bb-caramelo-box{ border:2px dashed var(--green-bright); background:var(--bg-warm); border-radius:var(--radius-md); padding:18px; margin-bottom:20px; }
.bb-caramelo-titulo{ font-weight:800; font-size:15px; color:var(--navy); margin:0 0 4px; }
.bb-caramelo-sub{ font-size:12.5px; color:var(--text-muted); margin:0 0 12px; line-height:1.4; }
.bb-caramelo-box label{ margin-bottom:8px; }
#bb-caramelo-btn{ margin-top:4px; }
.bb-caramelo-status{ font-size:12.5px; font-weight:700; margin:10px 0 0; min-height:16px; }
.bb-caramelo-status.erro{ color:#B3261E; }
.bb-caramelo-status.aviso{ color:var(--olive); }
.bb-caramelo-status.ok{ color:var(--green-bright); }

/* Lista de endereços clicável (principal + filiais) que troca o mapa
   embutido (2026-08-31) - cada <p class="bb-endereco-item"> tem o endereço
   completo em data-bb-mapa-endereco; clicar troca a classe "ativo" (JS) e o
   CSS abaixo mostra o selo "no mapa" so no item ativo. */
.bb-endereco-item{ cursor:pointer; padding:6px 8px; margin:0 -8px 2px; border-radius:8px; transition:background .15s; line-height:1.45; }
.bb-endereco-item:hover{ background:var(--bg-warm); }
/* Destaque do endereco ativo do mesmo tamanho/escala dos botoes de contato
   acima dele (2026-09-04, pedido do Thomas) - mesmo padding do .bb-btn-compact
   e sem o "sangramento" de -8px nas bordas, pra alinhar exatamente com a
   largura deles em vez de vazar um pouco mais pra fora. */
.bb-endereco-item.ativo{ background:var(--bg-warm); font-weight:700; padding:11px 20px; margin-left:0; margin-right:0; border-radius:16px; }
.bb-endereco-linha2{ display:inline-block; color:var(--text-muted); font-size:12.5px; font-weight:400; margin-top:1px; }
.bb-endereco-mapa-selo{ display:none; background:var(--green-bright); color:#fff; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; vertical-align:middle; white-space:nowrap; margin-left:6px; }
.bb-endereco-item.ativo .bb-endereco-mapa-selo{ display:inline-block; }
/* Espaco entre o endereco em destaque e o mapa embutido (2026-09-13, pedido
   do Thomas) - igual aos 12px de .bb-btn-block entre os botoes de contato,
   em vez do margin-bottom:2px que o .bb-endereco-item base deixava (pensado
   pra lista de filiais, nao pra esse espaco antes do mapa). */
.bb-mapa{ margin-top:12px; }

/* "Convidar Donos" (2026-08-31) */
.bb-convite-item{ border:1px solid var(--border-soft); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:var(--bg-warm); }
.bb-convite-check{ display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; }
.bb-convite-check input{ width:auto; flex:none; }
.bb-convite-campos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.bb-convite-campos label{ font-size:12px; font-weight:700; color:var(--text-muted); }
.bb-convite-campos input{ margin-top:4px; }
@media (max-width:560px){ .bb-convite-campos{ grid-template-columns:1fr; } }
.bb-convite-envio{ border-top:2px solid var(--border-soft); padding-top:16px; margin-top:6px; }

/* Paginacao das 5 paginas de listagem (2026-09-11) - ver bb_render_paginacao_html em functions.php. */
.bb-paginacao{ display:flex; align-items:center; justify-content:center; gap:16px; margin:32px 0 8px; flex-wrap:wrap; }
.bb-paginacao-info{ color:var(--text-muted); font-size:13px; }
.bb-paginacao-desabilitado{ color:var(--border-soft); font-weight:800; font-size:14px; padding:11px 20px; }

/* Aviso de "possivel duplicata" na Moderacao (2026-09-11) - ver
   bb_render_aviso_duplicata_html no mu-plugin. */
.bb-aviso-duplicata{
  font-size:11.5px; color:#8A5A00; background:#FFF6E0; border:1px solid #F0DDA0;
  border-radius:8px; padding:5px 9px; margin-top:4px; display:block;
}
.bb-aviso-duplicata a{ color:#8A5A00; font-weight:800; text-decoration:underline; margin:0 3px; }
.bb-aviso-duplicata-motivo{ color:#A3873F; }

/* CSS da home (front-page.php) - movido de um <style> solto dentro do
   <body> pra ca (2026-09-14, achado pelo validador do W3C: <style> sem
   o atributo 'scoped' (removido da especificacao) so e valido dentro
   do <head>, nunca direto no <body>). */
.bb-hero2{ position:relative; margin:6px 0 0; }
.bb-hero2-photo{ position:relative; height:560px; overflow:hidden; }
.bb-hero2-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.bb-hero2-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(21,15,10,.82) 0%, rgba(21,15,10,.38) 42%, rgba(21,15,10,.05) 70%);
}
.bb-hero2-photo::before{
  content:""; position:absolute; top:0; left:0; right:0; height:140px; z-index:1;
  background:linear-gradient(180deg, rgba(15,10,7,.6) 0%, rgba(15,10,7,0) 100%);
}

.bb-carousel{ position:absolute; inset:0; }
.bb-carousel-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.bb-carousel-slide.is-active{ opacity:1; }
.bb-carousel-caption{ position:absolute; left:24px; bottom:14px; z-index:2; display:flex; flex-direction:column; gap:1px; }
.bb-carousel-caption b{ color:rgba(255,255,255,.92); font-weight:800; font-size:11.5px; }
.bb-carousel-caption span{ color:rgba(255,255,255,.6); font-size:10px; }
.bb-carousel-nav{
  position:absolute; right:24px; bottom:12px; z-index:2; display:flex; align-items:center; gap:10px;
  color:rgba(255,255,255,.7); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
.bb-carousel-btn{
  width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; line-height:1; padding:0;
}
.bb-carousel-btn:hover{ background:rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce){ .bb-carousel-slide{ transition:none; } }

.bb-hero-logo{ position:absolute; top:18px; left:0; right:0; z-index:2; }
.bb-hero-logo img{ height:170px; width:auto; display:block; filter:drop-shadow(0 3px 10px rgba(0,0,0,.35)); }

.bb-hero2-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 0 40px; }
.bb-eyebrow2{
  display:inline-block; background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  color:#FCE9CF; font-weight:800; font-size:12.5px; letter-spacing:.3px;
  padding:7px 14px; border-radius:30px; margin-bottom:16px; border:1px solid rgba(255,255,255,.25);
}
.bb-hero2 h1{ color:#fff; font-family:var(--font-display); font-weight:600; font-size:46px; line-height:1.1; max-width:640px; margin:0; }
.bb-hero2 h1 em{ color:var(--yellow); font-style:italic; }
.bb-hero2-sub{ color:#F1DFC8; font-size:16.5px; max-width:760px; margin-top:14px; white-space:nowrap; }
@media (max-width:820px){ .bb-hero2-sub{ white-space:normal; max-width:100%; } }
.bb-hero2-actions{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }

/* No celular a logo de 170px e o titulo de 46px nao cabem no espaco entre
   o topo e o rodape da foto - a logo chegava a ficar por baixo do selinho
   "pra quem sente saudade". Aqui tudo encolhe pra caber direito. */
@media (max-width:600px){
  .bb-hero2-photo{ height:620px; }
  .bb-hero-logo{ top:14px; }
  .bb-hero-logo img{ height:112px; }
  .bb-hero2-content{ padding-left:36px; padding-right:36px; }
  .bb-eyebrow2{ font-size:11px; padding:6px 12px; margin-bottom:10px; }
  .bb-hero2 h1{ font-size:26px; }
  .bb-hero2-sub{ font-size:14px; margin-top:10px; }
  .bb-hero2-actions{ margin-top:18px; }
  .bb-hero2-actions .bb-btn2{ padding:12px 20px; font-size:13px; }
  .bb-carousel-caption b{ font-size:10.5px; }
  .bb-carousel-caption span{ display:none; }
}
.bb-hero2 .bb-btn2{
  display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px;
  padding:14px 26px; border-radius:30px; background:var(--green-bright); color:#fff;
  box-shadow:0 10px 24px rgba(21,156,83,.35);
}

.bb-stat-chips{ position:absolute; top:26px; right:24px; z-index:2; display:flex; flex-direction:column; gap:10px; }
.bb-stat-chip{
  background:rgba(255,255,255,.94); border-radius:16px; padding:12px 18px;
  box-shadow:0 10px 24px rgba(0,0,0,.18); min-width:150px;
}
.bb-stat-chip b{ display:block; font-family:var(--font-display); font-size:22px; color:var(--green-bright); line-height:1; }
.bb-stat-chip span{ font-size:11.5px; color:var(--text-muted); font-weight:700; }
@media (max-width:820px){ .bb-stat-chips{ position:static; flex-direction:row; flex-wrap:wrap; margin:-40px 20px 20px; } }

.bb-home-section{ padding:64px 0; }
.bb-home-section-head{ max-width:900px; margin:0 auto 36px; text-align:center; }
.bb-eyebrow3{ display:block; color:var(--terracota); font-weight:800; font-size:12.5px; letter-spacing:.4px; text-transform:uppercase; margin-bottom:10px; }
.bb-home-section-head h2{ font-family:var(--font-display); font-weight:600; font-size:32px; margin:0; }
.bb-home-section-head p{ color:var(--text-muted); margin-top:10px; font-size:15px; }

/* auto-fit em vez de repeat(4,1fr) fixo (2026-09-30) - a quantidade de cards
   muda conforme tipos ficam escondidos/religados (ver
   bb_tipos_ocultos_temporariamente no mu-plugin), entao a grade se acomoda
   sozinha (3, 4, 5... colunas) em vez de sobrar espaco vazio torto. */
.bb-feat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:26px; }
@media (max-width:1100px){ .bb-feat-grid{ grid-template-columns:repeat(2,1fr); } }
.bb-feat-card{ display:block; background:var(--card-bg); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 10px 28px rgba(62,43,34,.08); }
.bb-feat-photo{ height:160px; overflow:hidden; }
.bb-feat-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.bb-feat-photo-fallback{ display:flex; align-items:center; justify-content:center; font-size:40px; }
.bb-feat-card-body{ padding:20px 22px 24px; }
.bb-feat-icon{
  width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-top:-42px; margin-bottom:14px; position:relative; z-index:1;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.bb-feat-card-body h3{ font-family:var(--font-display); font-weight:600; font-size:18px; margin:0 0 6px; }
.bb-feat-card-body p{ font-size:13.5px; color:var(--text-muted); margin:0; }
@media (max-width:900px){ .bb-feat-grid{ grid-template-columns:1fr; } }

.bb-quem{ background:var(--bg-warm); }
.bb-quem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.bb-quem-photos{ position:relative; }
.bb-quem-photo.main{ border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-cream); }
.bb-quem-photo.main img{ width:100%; height:auto; max-height:460px; object-fit:contain; display:block; margin:0 auto; }
.bb-quem-credit{ font-size:10px; color:var(--text-muted); margin-top:8px; }
.bb-quem-text span.bb-eyebrow3{ margin-bottom:12px; }
.bb-quem-text h2{ font-family:var(--font-display); font-weight:600; font-size:30px; margin:0 0 16px; }
.bb-quem-text p{ font-size:15px; color:var(--navy); margin:0 0 22px; }
@media (max-width:900px){ .bb-quem-grid{ grid-template-columns:1fr; gap:70px; } .bb-quem-photos{ margin-bottom:10px; } }

.bb-stats-band{ background:var(--navy); color:#fff; }
.bb-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; padding-top:44px; padding-bottom:44px; }
.bb-stats-grid div b{ display:block; font-family:var(--font-display); font-size:38px; color:var(--yellow); }
.bb-stats-grid div span{ font-size:12.5px; color:#DCC6AC; font-weight:700; }
@media (max-width:820px){ .bb-stats-grid{ grid-template-columns:1fr 1fr; gap:34px; } }