/* ════════════════════════════════════════════════════════════
   AppSocial — Design System
   3 cores: Azul (#2563EB) · Slate (#1E293B) · Branco/Cinza
   ════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }

:root {
  /* Cores principais */
  --azul:         #2563EB;
  --azul-hover:   #1D4ED8;
  --azul-fundo:   #EFF6FF;
  --azul-borda:   #BFDBFE;

  --slate:        #1E293B;
  --slate-800:    #1E293B;
  --slate-700:    #334155;
  --slate-600:    #475569;

  --vermelho:     #DC2626;
  --verde:        #16A34A;
  --ouro:         #D97706;

  /* Neutros */
  --fundo:        #F1F5F9;
  --card:         #FFFFFF;
  --borda:        #E2E8F0;
  --borda-2:      #CBD5E1;
  --txt:          #1E293B;
  --txt-muted:    #64748B;
  --txt-dim:      #94A3B8;

  /* Sidebar admin */
  --sidebar-w:    240px;
  --sidebar-bg:   #1E293B;
  --topbar-h:     60px;

  /* Sidebar pública (desktop) */
  --pub-sidebar-w: 260px;

  /* Header público (fixed) — usado pra compensar o conteúdo que fica por baixo */
  --pub-header-h: 60px;

  /* Tokens */
  --r:     8px;
  --r-lg:  12px;
  --sombra: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --t:     150ms ease;

  /* ── Tema público — valores light (padrão) ──────────────── */
  --card-2:              #F8FAFC;
  --secao-alt-bg:        var(--card);
  --hero-bg:             #050810;
  --hero-img:            none;
  --tag-cor:             #4ade80;
  --badge-ser-bg:        var(--azul-fundo);
  --badge-ser-borda:     var(--azul-borda);
  --badge-ser-cor:       var(--azul);
  --card-hover-borda:    rgba(37,99,235,.3);
  --card-hover-shadow:   0 4px 20px rgba(0,0,0,.1);
  --faq-hover-bg:        var(--card-2);
  --step-num-bg:         var(--azul);
  --nav-mobile-shadow:   0 -4px 20px rgba(0,0,0,.1);
  --drawer-item-cor:     #475569;
  --drawer-item-hover-bg:  #f1f5f9;
  --drawer-item-hover-cor: #0f172a;
  --drawer-ativa-cor:    #059669;
  --drawer-ativa-bg:     rgba(5,150,105,.06);
  --drawer-ativa-borda:  #059669;
  --drw-user-bg:         rgba(5,150,105,.06);
  --drw-user-borda:      rgba(5,150,105,.18);
  --drw-user-nome-cor:   var(--txt);
  --drw-user-email-cor:  var(--txt-muted);
  --drw-section-label-cor: var(--txt-dim);
  --drw-rede-btn-bg:     var(--card-2);
  --drw-rede-btn-borda:  var(--borda);
  --drw-guest-borda:     var(--borda);
  --drw-footer-borda:    var(--borda);
  --drawer-header-borda: var(--borda);
  --drawer-header-nome-cor: var(--txt);
  --drw-fechar-bg:       rgba(0,0,0,.06);
  --drw-fechar-cor:      var(--txt-muted);
  --saldo-card-bg:       #fffbeb;
  --saldo-card-borda:    #fde68a;
  --saldo-label-cor:     #92400e;
  --saldo-valor-cor:     #92400e;
  --saldo-btn-bg:        #f59e0b;
  --saldo-btn-hover:     #d97706;
  --perigo-cor:          #dc2626;
  --form-label-cor:      var(--txt);
  --form-hint-cor:       var(--txt-muted);

  font-size: 16px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--fundo);
  color: var(--txt);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* iOS Safari dá zoom automático na página ao focar em qualquer campo com
   font-size menor que 16px — é isso que parece "zoom ao clicar". Trava o
   tamanho mínimo só no mobile pra não mudar o design dos forms no desktop. */
@media (max-width: 767px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ── Layout ─────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 200; flex-shrink: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 199;
}
.sidebar-overlay.visivel { display: block; }

.sidebar-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--txt-muted); font-size: 1.1rem;
  padding: .4rem .5rem; border-radius: var(--r);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--fundo); color: var(--txt); }

.conteudo {
  margin-left: var(--sidebar-w);
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.aberta { transform: translateX(0); }
  .conteudo { margin-left: 0; }
  .sidebar-toggle { display: flex; align-items: center; justify-content: center; }
  .pagina { padding: 1rem .75rem; }
  .tabela-wrap { background: transparent; border: none; box-shadow: none; border-radius: 0; }
  .tabela-wrap table { display: block; }
  .tabela-wrap thead { display: none; }
  .tabela-wrap tbody { display: flex; flex-direction: column; gap: .5rem; }
  .tabela-wrap tbody tr {
    display: flex; flex-direction: column;
    border: 1px solid var(--borda); border-radius: var(--r-lg);
    background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.06);
    overflow: hidden; margin: 0;
  }
  .tabela-wrap tbody tr:last-child { border-bottom: 1px solid var(--borda); }
  .tabela-wrap tbody tr:hover { background: var(--card); }
  .tabela-wrap td {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .9rem; text-align: right;
    border-bottom: 1px solid var(--borda);
  }
  .tabela-wrap td:last-child { border-bottom: none; }
  .tabela-wrap td::before {
    content: attr(data-label);
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--txt-muted);
    text-align: left; flex-shrink: 0; margin-right: .5rem;
  }
  .tabela-wrap td.td-nome {
    flex-direction: column; align-items: flex-start;
    text-align: left; background: var(--fundo); padding: .75rem .9rem;
  }
  .tabela-wrap td.td-nome::before { display: none; }
  .tabela-wrap td.td-nome span { -webkit-line-clamp: unset; overflow: visible; max-width: none; }
  .tabela-wrap td[data-label=""] { justify-content: flex-start; }
  .tabela-wrap td[data-label=""]::before { display: none; }
}

.topbar {
  height: var(--topbar-h);
  background: var(--card);
  border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 300; flex-shrink: 0;
}

.pagina { flex: 1; padding: 1.5rem; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar-logo {
  display: flex; align-items: center; gap: .65rem;
  padding: 1rem 1rem 1rem 1.25rem;
  height: var(--topbar-h);
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none; flex-shrink: 0;
}
.sidebar-logo-icone {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .9rem; flex-shrink: 0; overflow: hidden;
}
.sidebar-logo-icone img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-logo-nome {
  font-weight: 700; font-size: .95rem; color: #fff;
  white-space: nowrap; letter-spacing: -.01em;
}

.sidebar-nav { padding: .75rem 0; flex: 1; }

.nav-group { margin-bottom: .25rem; }
.nav-group-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
  padding: .75rem 1.25rem .35rem;
}

.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem .5rem 1.25rem;
  color: rgba(255,255,255,.6);
  font-size: .83rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
  background: none; border-right: none; border-top: none; border-bottom: none;
  width: 100%; text-align: left;
}
.nav-item i { width: 1rem; text-align: center; font-size: .8rem; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.ativo {
  background: rgba(255,255,255,.09);
  color: #fff; font-weight: 600;
  border-left-color: var(--azul);
}

.nav-sep {
  border: none; border-top: 1px solid rgba(255,255,255,.07);
  margin: .5rem 0;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar-titulo { font-size: .95rem; font-weight: 600; color: var(--txt); flex: 1; }

.topbar-actions {
  display: flex; align-items: center; gap: .5rem; margin-left: auto;
}

.topbar-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r);
  background: none; border: 1px solid var(--borda);
  color: var(--txt-muted); cursor: pointer; flex-shrink: 0;
  transition: background var(--t), color var(--t); font-size: .85rem;
}
.topbar-icon-btn:hover { background: var(--fundo); color: var(--txt); }

.topbar-usuario {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .35rem .65rem; border-radius: var(--r);
  background: none; border: 1px solid var(--borda);
  font-family: inherit; transition: background var(--t);
}
.topbar-usuario:hover { background: var(--fundo); }
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--azul); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.topbar-usuario-info { display: none; }
@media (min-width: 480px) {
  .topbar-usuario-info { display: block; }
}
.topbar-usuario-nome { font-size: .8rem; font-weight: 600; color: var(--txt); }
.topbar-usuario-cargo { font-size: .7rem; color: var(--txt-muted); line-height: 1; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 1.25rem;
  box-shadow: var(--sombra);
}
.card-titulo {
  font-size: .8rem; font-weight: 600; color: var(--txt-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem;
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat-card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--sombra); }
.stat-valor { font-size: 1.75rem; font-weight: 800; color: var(--txt); line-height: 1; }
.stat-label { font-size: .78rem; color: var(--txt-muted); margin-top: .25rem; }
.stat-icone {
  width: 40px; height: 40px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; margin-bottom: .75rem;
}
.si-azul  { background: var(--azul-fundo); color: var(--azul); }
.si-verde { background: #F0FDF4; color: var(--verde); }
.si-ouro  { background: #FFFBEB; color: var(--ouro); }

/* ── Tabela ─────────────────────────────────────────────────── */
.tabela-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--borda); background: var(--card); box-shadow: var(--sombra); }

table { width: 100%; border-collapse: collapse; font-size: .82rem; }
thead th {
  padding: .75rem 1rem; text-align: left;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--txt-muted);
  background: var(--fundo); border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
thead th:first-child { border-radius: var(--r-lg) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--r-lg) 0 0; }

tbody tr { border-bottom: 1px solid var(--borda); transition: background var(--t); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #FAFBFC; }
td { padding: .7rem 1rem; color: var(--txt); vertical-align: middle; }

.td-nome { font-weight: 500; max-width: 320px; }
.td-nome > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ibadge { display:inline-flex;align-items:center;gap:.2rem;font-size:.62rem;font-weight:600;padding:.1rem .38rem;border-radius:4px;white-space:nowrap;line-height:1.4 }
.ibadge i { font-size:.55rem }
.ibadge-azul   { background:var(--azul-fundo);color:var(--azul);border:1px solid var(--azul-borda) }
.ibadge-ok     { background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0 }
.ibadge-laranja{ background:#fff7ed;color:#ea580c;border:1px solid #fed7aa }
.ibadge-roxo   { background:#faf5ff;color:#9333ea;border:1px solid #e9d5ff }
.ibadge-amarelo{ background:#fefce8;color:#ca8a04;border:1px solid #fef08a }
.ibadge-info   { background:var(--fundo);color:var(--txt-muted);border:1px solid var(--borda) }

/* ── Chips de plataforma (filtro rápido em listas de serviços) ─ */
.srv-filtro-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; color: var(--txt-muted);
  background: var(--card); border: 1.5px solid var(--borda-2);
  border-radius: 999px; padding: .32rem .7rem .32rem .55rem;
  cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t);
}
.srv-filtro-chip:hover { border-color: var(--azul); color: var(--txt); }
.srv-filtro-chip.is-ativo { background: var(--azul-fundo); border-color: var(--azul); color: var(--azul); }
.srv-filtro-chip i { font-size: .82rem; }
.srv-filtro-chip .srv-filtro-count {
  font-size: .68rem; font-weight: 700; color: var(--txt-dim);
  background: var(--fundo); border-radius: 999px; padding: .05rem .4rem;
}
.srv-filtro-chip.is-ativo .srv-filtro-count { background: #fff; color: var(--azul); }

.categoria-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; }
.categoria-badge i {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: #fff; background: var(--azul);
}

.td-preco { font-weight: 600; white-space: nowrap; }
.td-num   { color: var(--txt-muted); white-space: nowrap; }

/* ── Formulários ────────────────────────────────────────────── */
.form-grupo { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem; }
.form-label { font-size: .8rem; font-weight: 600; color: var(--txt); }
.form-hint  { font-size: .73rem; color: var(--txt-muted); }

.input, .select, textarea {
  width: 100%; padding: .55rem .8rem;
  border: 1px solid var(--borda-2); border-radius: var(--r);
  background: var(--card); color: var(--txt);
  font-size: .85rem; font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
.input:focus, .select:focus, textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-fundo);
}
/* Inputs em contexto público usam card-2 (levemente distinto do fundo do card) */
.pub-body .input, .pub-body .select, .pub-body textarea {
  background: var(--card-2);
}
.input::placeholder { color: var(--txt-dim); }
.input-sm  { padding: .35rem .65rem; font-size: .8rem; }
.select-sm { padding: .35rem .65rem; font-size: .8rem; width: auto; }
.input-preco { width: 7rem; text-align: right; }

.input-grupo { display: flex; gap: 0; }
.input-grupo .input { border-radius: var(--r) 0 0 var(--r); flex: 1; }
.input-grupo .btn   { border-radius: 0 var(--r) var(--r) 0; flex-shrink: 0; }
.input-grupo-addon {
  padding: .55rem .75rem;
  background: var(--fundo); border: 1px solid var(--borda-2);
  font-size: .83rem; color: var(--txt-muted); white-space: nowrap;
  display: flex; align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Botões
   Uso padrão : <button class="btn btn-primario">Salvar</button>
   CTA        : <button class="btn btn-primario btn-cta">Pedir</button>
   Modificadores: btn-sm · btn-lg · btn-full
   ══════════════════════════════════════════════════════════════ */

/* Tokens de tema — alterados pelo .pub-body.tema-dark */
:root {
  --btn-sombra: #1e3a8a;
  --btn-glow:   rgba(37,99,235,.35);
  --btn-glow-2: rgba(37,99,235,.65);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1.1rem; font-size: .83rem; font-weight: 600; line-height: 1;
  border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  text-decoration: none; outline: none;
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s, background .1s, border-color .1s;
}
.btn:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.btn i { font-size: .78rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none !important; transform: none !important; }

.btn-primario {
  background: var(--azul); color: #fff; border-color: transparent;
  box-shadow: 0 4px 0 var(--btn-sombra);
  transform: translateY(0); transition: transform .1s, box-shadow .1s, background .1s;
}
.btn-primario:hover:not(:disabled) {
  background: var(--azul-hover);
  transform: translateY(2px); box-shadow: 0 2px 0 var(--btn-sombra);
}
.btn-primario:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }

.btn-secundario {
  background: var(--card); color: var(--txt); border-color: var(--borda-2);
  box-shadow: 0 4px 0 var(--borda);
  transform: translateY(0); transition: transform .1s, box-shadow .1s, background .1s;
}
.btn-secundario:hover:not(:disabled) {
  background: var(--fundo);
  transform: translateY(2px); box-shadow: 0 2px 0 var(--borda);
}
.btn-secundario:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }

.btn-perigo {
  background: #FEF2F2; color: var(--vermelho); border-color: #FECACA;
  box-shadow: 0 4px 0 #FECACA;
  transform: translateY(0); transition: transform .1s, box-shadow .1s, background .1s;
}
.btn-perigo:hover:not(:disabled) {
  background: #FEE2E2;
  transform: translateY(2px); box-shadow: 0 2px 0 #FECACA;
}
.btn-perigo:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }

.btn-sucesso {
  background: #F0FDF4; color: var(--verde); border-color: #BBF7D0;
  box-shadow: 0 4px 0 #BBF7D0;
  transform: translateY(0); transition: transform .1s, box-shadow .1s, background .1s;
}
.btn-sucesso:hover:not(:disabled) {
  background: #dcfce7;
  transform: translateY(2px); box-shadow: 0 2px 0 #BBF7D0;
}
.btn-sucesso:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }

/* ── Ghost — para fundos escuros (header, banners) ─────────── */
.btn-ghost {
  background: transparent; color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 4px 0 rgba(255,255,255,.18);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4);
  transform: translateY(2px); box-shadow: 0 2px 0 rgba(255,255,255,.18);
}
.btn-ghost:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }

/* ── Branco — para fundos coloridos (hero azul, etc.) ───────── */
.btn-branco {
  background: #fff; color: #1d4ed8; border-color: transparent;
  border-radius: 99px;
  box-shadow: 0 5px 0 rgba(0,0,0,.22);
}
.btn-branco:hover:not(:disabled) {
  background: #f0f4ff;
  transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.22);
}
.btn-branco:active:not(:disabled) { transform: translateY(5px); box-shadow: none; }
.btn-branco.btn-cta { box-shadow: 0 5px 0 rgba(0,0,0,.22); animation: none; }
.btn-branco.btn-cta:hover:not(:disabled) { box-shadow: 0 2px 0 rgba(0,0,0,.22); }

/* ── Botão "continuar com Google" ────────────────────────────── */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .72rem 1rem; margin-bottom: 1.1rem;
  border: 1.5px solid var(--borda, #e5e7eb); border-radius: var(--r, 8px);
  background: var(--card, #fff); color: var(--txt, #111);
  font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.btn-google:hover {
  border-color: #4285F4;
  box-shadow: 0 0 0 3px rgba(66,133,244,.12);
  background: var(--fundo, #f9fafb);
}

/* ── Modificadores de tamanho ───────────────────────────────── */
.btn-xs   { padding: .2rem .55rem;   font-size: .72rem; }
.btn-sm   { padding: .35rem .75rem;  font-size: .76rem; }
.btn-lg   { padding: .85rem 2.2rem;  font-size: 1rem;   }
.btn-full { width: 100%; }
.btn-icon { padding: .45rem .55rem; }

/* ── CTA — call-to-action (hero, cards de serviço) ──────────── */
/* Combinar com btn-primario: <button class="btn btn-primario btn-cta"> */
.btn-cta {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 10px; padding: .8rem 2rem;
}
.btn-primario.btn-cta {
  box-shadow: 0 5px 0 var(--btn-sombra), 0 8px 28px var(--btn-glow);
  animation: btn-cta-pulse 2.4s ease-in-out infinite;
}
.btn-primario.btn-cta:hover:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--btn-sombra), 0 4px 14px var(--btn-glow);
  animation: none;
}
.btn-primario.btn-cta:active:not(:disabled) { transform: translateY(5px); box-shadow: none; }
.btn-secundario.btn-cta {
  box-shadow: 0 5px 0 rgba(0,0,0,.25);
}
.btn-secundario.btn-cta:hover:not(:disabled) {
  transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.btn-secundario.btn-cta:active:not(:disabled) { transform: translateY(5px); box-shadow: none; }

@keyframes btn-cta-pulse {
  0%   { box-shadow: 0 5px 0 var(--btn-sombra), 0 0 0 0 rgba(99,102,241,.7), 0 8px 28px var(--btn-glow); }
  60%  { box-shadow: 0 5px 0 var(--btn-sombra), 0 0 0 14px rgba(99,102,241,0), 0 8px 28px var(--btn-glow); }
  100% { box-shadow: 0 5px 0 var(--btn-sombra), 0 0 0 0 rgba(99,102,241,0),   0 8px 28px var(--btn-glow); }
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 99px;
  font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.badge-azul   { background: var(--azul-fundo);  color: var(--azul);    border: 1px solid var(--azul-borda); }
.badge-verde  { background: #F0FDF4; color: var(--verde);  border: 1px solid #BBF7D0; }
.badge-cinza  { background: var(--fundo);        color: var(--txt-muted); border: 1px solid var(--borda); }
.badge-ouro   { background: #FFFBEB; color: var(--ouro);   border: 1px solid #FDE68A; }

/* ── Toggle ─────────────────────────────────────────────────── */
.toggle {
  position: relative; display: inline-block;
  width: 38px; height: 22px; cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-trilho {
  position: absolute; inset: 0;
  background: var(--borda-2); border-radius: 99px;
  transition: background var(--t);
}
.toggle-bola {
  position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform var(--t);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle input:checked ~ .toggle-trilho { background: var(--azul); }
.toggle input:checked ~ .toggle-bola   { transform: translateX(16px); }

/* ── Alertas ────────────────────────────────────────────────── */
.alerta {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem; border-radius: var(--r);
  font-size: .83rem; margin-bottom: 1rem; border: 1px solid;
}
.alerta-erro    { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.alerta-sucesso { background: #F0FDF4; color: #166534; border-color: #BBF7D0; }
.alerta-info    { background: var(--azul-fundo); color: #1D4ED8; border-color: var(--azul-borda); }
.alerta-aviso   { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }

/* ── Filtros ────────────────────────────────────────────────── */
.filtros-bar {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}

.pill-cat {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem; border-radius: 99px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--borda-2); color: var(--txt-muted);
  background: var(--card); text-decoration: none;
  transition: all var(--t); white-space: nowrap;
}
.pill-cat:hover { border-color: var(--azul); color: var(--azul); }
.pill-cat.ativa { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ── Checkbox ───────────────────────────────────────────────── */
.checkbox {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--azul); border-radius: 4px;
}

/* ── Toggle switch ──────────────────────────────────────────── */
.srv-toggle {
  display: inline-flex; align-items: center; cursor: pointer;
}
.srv-toggle input { display: none; }
.srv-toggle span {
  display: inline-block; width: 36px; height: 20px;
  background: var(--borda-2); border-radius: 999px;
  position: relative; transition: background .2s;
}
.srv-toggle span::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left .2s;
}
.srv-toggle input:checked + span { background: var(--verde); }
.srv-toggle input:checked + span::after { left: 19px; }
.srv-toggle input:disabled + span { opacity: .5; cursor: wait; }
.srv-toggle-fire input:checked + span { background: #f97316; }

/* ── Bulk actions bar ───────────────────────────────────────── */
.bulk-bar {
  display: none; align-items: center; gap: .75rem;
  padding: .65rem 1rem; background: var(--azul-fundo);
  border: 1px solid var(--azul-borda); border-radius: var(--r);
  margin-bottom: 1rem; font-size: .83rem; color: var(--azul);
}
.bulk-bar.visivel { display: flex; }

/* ── Paginação ──────────────────────────────────────────────── */
.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; border-top: 1px solid var(--borda);
  font-size: .78rem; color: var(--txt-muted);
  background: var(--card);
}
.paginacao-links { display: flex; gap: .25rem; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r);
  font-size: .78rem; font-weight: 500; text-decoration: none;
  color: var(--txt-muted); border: 1px solid var(--borda);
  background: var(--card); transition: all var(--t);
}
.page-link:hover { border-color: var(--azul); color: var(--azul); }
.page-link.atual { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ── Tabela importação ──────────────────────────────────────── */
.import-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1rem; background: var(--fundo);
  border-bottom: 1px solid var(--borda); font-size: .8rem;
  font-weight: 700; color: var(--txt); cursor: pointer;
  user-select: none;
}
.import-header:hover { background: #E8EDF2; }
.import-cat-badge {
  font-size: .7rem; font-weight: 600; padding: .15rem .5rem;
  border-radius: 99px; background: var(--azul-fundo); color: var(--azul);
  border: 1px solid var(--azul-borda);
}

/* ── Utilitários ────────────────────────────────────────────── */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.flex-1 { flex: 1; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: .25rem; }
.mb-4 { margin-bottom: 1rem; }
.text-sm { font-size: .83rem; }
.text-xs { font-size: .73rem; }
.text-muted { color: var(--txt-muted); }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--borda); border-top-color: var(--azul); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator  { display: inline-block; }

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1rem; background: var(--card);
  border: 1px solid var(--borda); border-radius: var(--r);
  box-shadow: 0 4px 20px rgba(0,0,0,.12); font-size: .83rem;
  animation: slideIn .25s ease;
}
.toast-sucesso { border-left: 4px solid var(--verde); }
.toast-erro    { border-left: 4px solid var(--vermelho); }
.toast-info    { border-left: 4px solid var(--azul); }
@keyframes slideIn { from { opacity:0; transform: translateX(1rem); } to { opacity:1; transform: translateX(0); } }

/* ── Import wizard ──────────────────────────────────────────── */
.import-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--azul); color: #fff;
  font-size: .7rem; font-weight: 800; flex-shrink: 0;
  margin-right: .35rem;
}

.import-pills {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem;
}

.import-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem 1rem; border-radius: 99px;
  font-size: .8rem; font-weight: 600;
  border: 1.5px solid var(--borda-2); color: var(--txt-muted);
  background: var(--card); cursor: pointer; font-family: inherit;
  transition: all var(--t); white-space: nowrap;
}
.import-pill:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-fundo); }
.import-pill.ativa { background: var(--azul); color: #fff; border-color: var(--azul); }

.import-pill-badge {
  background: rgba(0,0,0,.1); color: inherit; border-radius: 99px;
  padding: .1rem .45rem; font-size: .68rem; font-weight: 700;
}
.import-pill.ativa .import-pill-badge { background: rgba(255,255,255,.25); }

/* ── Auth ───────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; background: var(--fundo); padding: 1.5rem;
}
.auth-card { width: 100%; max-width: 400px; }

/* ════════════════════════════════════════════════════════════
   PÚBLICO — Layout, Header, Drawer, Mobile Nav, Hero, Cards
   ════════════════════════════════════════════════════════════ */

/* ── Base público ───────────────────────────────────────────── */
.pub-body { background: var(--fundo); }

.pub-main {
  min-height: 100vh;
  padding-top: calc(var(--pub-header-h) + 20px);
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* Home: o .pub-hero já compensa o header fixo com sua própria margem
   negativa (pra manter o fundo escuro colado no header) — usando o mesmo
   padding-top das demais páginas aqui empurraria o conteúdo pra baixo do
   ponto que o hero já calculou. */
.pub-main--hero { padding-top: 20px; }

@media (min-width: 768px) {
  .pub-main { padding-bottom: 0; }
}

/* ── Sidebar pública (desktop ≥1024px) ──────────────────────── */
.pub-sidebar { display: none; }

@media (min-width: 1024px) {
  /* Força contexto visual escuro independente do tema */
  .pub-sidebar {
    --drw-user-bg:          rgba(99,102,241,.08);
    --drw-user-borda:       rgba(99,102,241,.2);
    --drw-user-nome-cor:    #E9EDEF;
    --drw-user-email-cor:   #8696A0;
    --drw-section-label-cor:#4a5270;
    --drw-rede-btn-bg:      rgba(255,255,255,.05);
    --drw-rede-btn-borda:   rgba(255,255,255,.08);
    --drawer-header-nome-cor:#E9EDEF;
    --drawer-header-borda:  rgba(255,255,255,.07);
    --drw-footer-borda:     rgba(255,255,255,.07);
    --drawer-ativa-cor:     #818cf8;
    --drawer-ativa-bg:      rgba(99,102,241,.1);
    --drawer-ativa-borda:   #6366f1;

    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--pub-sidebar-w);
    background: #080e1a;
    border-right: 1px solid rgba(255,255,255,.07);
    z-index: 99;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .pub-sidebar::-webkit-scrollbar { display: none; }

  .pub-sidebar .pub-logo-nome { color: #fff; }

  .pub-sidebar .drawer-item { color: rgba(255,255,255,.65); }
  .pub-sidebar .drawer-item:hover { background: rgba(255,255,255,.06); color: #fff; }
  .pub-sidebar .drawer-item.ativa {
    color: var(--drawer-ativa-cor);
    background: var(--drawer-ativa-bg);
    border-left-color: var(--drawer-ativa-borda);
  }

  .psb-logo-wrap {
    display: flex; align-items: center;
    padding: 0 1.25rem;
    height: 60px; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  /* Header e main deslocam para dar espaço à sidebar */
  .pub-header { left: var(--pub-sidebar-w); }
  .pub-main   { margin-left: var(--pub-sidebar-w); }

}

.pub-container {
  width: 100%; max-width: 1100px;
  margin: 0 auto; padding: 0 1rem;
}

@media (min-width: 640px) {
  .pub-container { padding: 0 1.5rem; }
}

/* ── Header ─────────────────────────────────────────────────── */
.pub-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #080e1a;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.pub-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 3px;
  width: calc(var(--scroll-pct, 0) * 1%);
  background: linear-gradient(90deg, #1665f9, #15faee);
  transition: width .1s linear;
}

.pub-header-inner {
  width: 100%; max-width: 1200px;
  margin: 0 auto; padding: 0 1rem;
  height: 60px;
  display: flex; align-items: center; gap: 1rem;
}
@media (min-width: 640px) { .pub-header-inner { padding: 0 1.5rem; } }

/* ── Logo ───────────────────────────────────────────────────── */
.pub-logo {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; flex-shrink: 0;
}
.pub-logo-icone {
  width: 32px; height: 32px; border-radius: 8px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0; overflow: hidden;
}
.pub-logo-icone img { width: 100%; height: 100%; object-fit: contain; }
.pub-logo-nome {
  font-weight: 800; font-size: .95rem;
  color: #fff; letter-spacing: -.02em;
}

/* ── Nav desktop ────────────────────────────────────────────── */
.pub-nav-desktop {
  display: none; align-items: center; gap: .1rem; flex: 1;
  margin-left: .75rem;
}
@media (min-width: 768px) { .pub-nav-desktop { display: flex; } }

.pub-nav-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem; border-radius: var(--r);
  font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.55);
  text-decoration: none; transition: background var(--t), color var(--t);
  position: relative;
}
.pub-nav-link i { font-size: .72rem; }
.pub-nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.pub-nav-link.ativa { color: #fff; font-weight: 600; }
.pub-nav-link.ativa::after {
  content: ''; position: absolute; bottom: -2px; left: .75rem; right: .75rem;
  height: 2px; background: var(--azul); border-radius: 2px;
}

/* ── Header actions ─────────────────────────────────────────── */
.pub-header-actions {
  display: flex; align-items: center; gap: .4rem; margin-left: auto;
}

.pub-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6); cursor: pointer; flex-shrink: 0;
  transition: background var(--t), color var(--t);
  font-size: .82rem;
}
.pub-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Botões do header (not-logged) — herdam .btn-primario e .btn-ghost */

/* ── Dropdown de usuário ────────────────────────────────────── */
.user-dropdown { position: relative; }

.user-trigger {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .5rem; border-radius: var(--r);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; font-family: inherit;
  transition: background var(--t);
}
.user-trigger:hover { background: rgba(255,255,255,.13); }

.user-avatar {
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.user-avatar-sm { width: 26px; height: 26px; font-size: .72rem; }
.user-avatar-lg { width: 40px; height: 40px; font-size: 1rem; flex-shrink: 0; }

.user-trigger-nome {
  font-size: .81rem; font-weight: 600; color: #fff;
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chevron { font-size: .58rem; color: rgba(255,255,255,.45); transition: transform var(--t); }
.user-trigger[aria-expanded="true"] .user-chevron { transform: rotate(180deg); }

.user-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; background: var(--card);
  border: 1px solid var(--borda); border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 500;
}
.user-panel.aberto { opacity: 1; pointer-events: all; transform: translateY(0); }

.user-panel-header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--borda);
}
.user-panel-info { min-width: 0; }
.user-panel-nome { font-size: .875rem; font-weight: 700; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-panel-cargo { font-size: .75rem; color: var(--txt-muted); margin-top: .1rem; text-transform: capitalize; }

.user-panel-menu { padding: .4rem 0; }
.user-menu-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem 1rem; font-size: .85rem; font-weight: 500;
  color: var(--txt); text-decoration: none; transition: background var(--t);
  background: none; border: none; cursor: pointer;
  font-family: inherit; width: 100%; text-align: left;
}
.user-menu-item i { width: 1rem; text-align: center; color: var(--txt-muted); font-size: .8rem; }
.user-menu-item:hover { background: var(--fundo); }
.user-menu-sep { border: none; border-top: 1px solid var(--borda); margin: .35rem 0; }
.user-menu-sair { color: var(--vermelho); }
.user-menu-sair i { color: var(--vermelho); }
.user-menu-sair:hover { background: #fee2e2; }

/* ── Central de notificações (sino) ────────────────────────────── */
.notif-dropdown { position: relative; }

.notif-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: #ef4444; color: #fff;
  font-size: .62rem; font-weight: 800; line-height: 16px; text-align: center;
  border: 1.5px solid var(--card, #0B141A);
}

.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-width: calc(100vw - 2rem);
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 500; overflow: hidden;
}
.notif-panel.aberto { opacity: 1; pointer-events: all; transform: translateY(0); }

.notif-panel-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--borda);
}
.notif-panel-head span { font-size: .88rem; font-weight: 700; color: var(--txt); }
.notif-panel-head button {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: .72rem; font-weight: 600; color: var(--azul); font-family: inherit;
  padding: 0;
}
.notif-panel-head button:hover { text-decoration: underline; }

.notif-panel-lista { max-height: 380px; overflow-y: auto; }
.notif-vazio { padding: 2rem 1rem; text-align: center; font-size: .82rem; color: var(--txt-muted); margin: 0; }

.notif-item-wrap {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--borda);
  border-left: 3px solid transparent;
  transition: background var(--t);
}
.notif-item-wrap:last-child { border-bottom: none; }
.notif-item-wrap:hover { background: var(--fundo); }
.notif-item-wrap.nao-lida { background: var(--azul-fundo, #eff6ff); border-left-color: var(--azul); }
.notif-item-wrap.nao-lida:hover { background: var(--azul-fundo, #eff6ff); filter: brightness(.97); }

.notif-item {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .75rem 1rem; flex: 1; min-width: 0;
  text-decoration: none; cursor: pointer;
  background: none; border: none; border-left: none;
  font-family: inherit; text-align: left;
}
.notif-item:hover { background: none; }

.notif-item-del {
  flex-shrink: 0; width: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--txt-muted);
  font-size: .75rem; opacity: 0; transition: opacity .15s, color .15s;
  padding: 0;
}
.notif-item-wrap:hover .notif-item-del { opacity: 1; }
.notif-item-del:hover { color: #dc2626; }

.notif-item-ico {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .78rem;
}
.notif-item-corpo { min-width: 0; flex: 1; }
.notif-item-titulo { font-size: .82rem; font-weight: 700; color: var(--txt); margin: 0; line-height: 1.35; }
.notif-item-msg { font-size: .76rem; color: var(--txt-muted); margin: .15rem 0 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-item-hora { font-size: .68rem; color: var(--txt-dim, var(--txt-muted)); margin-top: .3rem; }
.notif-item-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--azul);
  flex-shrink: 0; margin-top: .4rem;
}

.notif-push-cta {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; background: var(--fundo); border-bottom: 1px solid var(--borda);
  font-size: .76rem; color: var(--txt-muted);
}
.notif-push-cta button {
  margin-left: auto; flex-shrink: 0; background: var(--azul); color: #fff; border: none;
  border-radius: var(--r); padding: .35rem .7rem; font-size: .72rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}

/* ── Hamburguer ─────────────────────────────────────────────── */
.pub-hamburguer {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.7); cursor: pointer; flex-shrink: 0;
  transition: background var(--t);
}
.pub-hamburguer:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (min-width: 768px) { .pub-hamburguer { display: none; } }

/* Mostrar label no desktop */
.pub-label-desktop { display: none; }
@media (min-width: 480px) { .pub-label-desktop { display: inline; } }

/* Bloco nome+fichas do user-trigger: some no mobile, e precisa de
   min-width:0 pra não travar como item flex de largura mínima —
   senão o max-width/ellipsis do nome é ignorado e empurra o header. */
.user-trigger-info {
  display: none;
  flex-direction: column; align-items: flex-start; line-height: 1.25; gap: .05rem;
  min-width: 0;
}
@media (min-width: 480px) { .user-trigger-info { display: flex; } }


/* ── Drawer overlay ─────────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.drawer-overlay.visivel { opacity: 1; pointer-events: all; }

/* ── Drawer ─────────────────────────────────────────────────── */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 280px; z-index: 201;
  background: #080e1a;
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; scrollbar-width: none;
  /* Sem isso, ao chegar no topo/fim do drawer o gesto de scroll "vaza"
     e continua rolando a página por trás do overlay. */
  overscroll-behavior: contain;
  border-right: 1px solid rgba(255,255,255,.07);

  /* Força identidade escura independente do tema */
  --drw-user-bg:           rgba(99,102,241,.08);
  --drw-user-borda:        rgba(99,102,241,.2);
  --drw-user-nome-cor:     #E9EDEF;
  --drw-user-email-cor:    #8696A0;
  --drw-section-label-cor: #4a5270;
  --drw-rede-btn-bg:       rgba(255,255,255,.05);
  --drw-rede-btn-borda:    rgba(255,255,255,.08);
  --drawer-header-borda:   rgba(255,255,255,.07);
  --drawer-header-nome-cor:#E9EDEF;
  --drw-footer-borda:      rgba(255,255,255,.07);
  --drw-guest-borda:       rgba(255,255,255,.1);
  --drw-fechar-bg:         rgba(255,255,255,.08);
  --drw-fechar-cor:        rgba(255,255,255,.7);
  --drawer-item-cor:       rgba(255,255,255,.65);
  --drawer-item-hover-bg:  rgba(255,255,255,.06);
  --drawer-item-hover-cor: #fff;
  --drawer-ativa-cor:      #818cf8;
  --drawer-ativa-bg:       rgba(99,102,241,.1);
  --drawer-ativa-borda:    #6366f1;
}
.drawer::-webkit-scrollbar { display: none; }
.drawer.aberto { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--drawer-header-borda);
  flex-shrink: 0;
}
.drawer-header .pub-logo-nome { color: var(--drawer-header-nome-cor); }

.drawer-fechar {
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--drw-fechar-bg); border: none;
  color: var(--drw-fechar-cor); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; transition: background var(--t), color var(--t);
}
.drawer-fechar:hover { background: var(--drawer-item-hover-bg); color: var(--drawer-item-hover-cor); }

.drawer-nav { flex: 1; padding: .75rem 0; }

.drawer-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1.25rem; color: rgba(255,255,255,.65);
  font-size: .85rem; font-weight: 500; text-decoration: none;
  transition: background var(--t), color var(--t);
  border-left: 3px solid transparent;
}
.drawer-item i { width: 1rem; text-align: center; flex-shrink: 0; }
.drawer-item:hover { background: rgba(255,255,255,.06); color: #fff; }

.drawer-footer {
  padding: .6rem 1.25rem .75rem; border-top: 1px solid var(--drw-footer-borda);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-shrink: 0;
}

/* ── Drawer redesign ─────────────────────────────────────────── */

/* Card do usuário logado */
.drw-user-card {
  display: flex; align-items: center; gap: .75rem;
  margin: .75rem 1rem; padding: .85rem 1rem;
  background: var(--drw-user-bg);
  border: 1px solid var(--drw-user-borda);
  border-radius: 14px;
  flex-shrink: 0;
}
.drw-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; color: #fff;
  box-shadow: 0 3px 12px rgba(99,102,241,.35);
}
.drw-user-nome {
  margin: 0; font-size: .88rem; font-weight: 700; color: var(--drw-user-nome-cor);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drw-user-email {
  margin: 0; font-size: .72rem; color: var(--drw-user-email-cor);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drw-saldo-pill {
  display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; text-decoration: none;
  font-size: .72rem; font-weight: 700; padding: .3rem .6rem;
  border-radius: 99px; white-space: nowrap;
  transition: opacity .15s;
}
.drw-saldo-pill:hover { opacity: .85; }

/* CTA de conversão (convidado) */
.drw-cta-guest {
  margin: .5rem .85rem; padding: .7rem .85rem .75rem;
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(249,115,22,.1));
  border: 1px solid rgba(37,99,235,.35);
  border-radius: 12px; text-align: center; flex-shrink: 0;
}
.drw-cta-guest-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin: 0 0 .1rem;
}
.drw-cta-guest-titulo {
  font-weight: 800; font-size: .85rem; color: #E9EDEF; margin: 0 0 .1rem;
}
.drw-cta-guest-titulo i { color: #f97316; }
.drw-cta-guest-sub {
  font-size: .7rem; color: #8696A0; margin: 0 0 .55rem; line-height: 1.3;
}
.drw-cta-entrar {
  display: block; margin-top: .45rem;
  font-size: .72rem; color: rgba(255,255,255,.4); text-decoration: none;
  transition: color .15s;
}
.drw-cta-entrar:hover { color: rgba(255,255,255,.75); }

/* ── Destaque / favorito card na sidebar ── */
.drw-dd-card {
  margin: .6rem .85rem 0; padding: .8rem .85rem;
  background: linear-gradient(135deg,rgba(249,115,22,.13),rgba(245,158,11,.06));
  border: 1px solid rgba(249,115,22,.32);
  border-radius: 12px; text-decoration: none; display: block;
  transition: border-color .18s, box-shadow .18s;
}
.drw-dd-card:hover {
  border-color: rgba(249,115,22,.6);
  box-shadow: 0 4px 16px rgba(249,115,22,.18);
}
.drw-dd-card.drw-dd-repeat {
  background: linear-gradient(135deg,rgba(129,140,248,.13),rgba(167,139,250,.06));
  border-color: rgba(129,140,248,.32);
}
.drw-dd-card.drw-dd-repeat:hover {
  border-color: rgba(129,140,248,.6);
  box-shadow: 0 4px 16px rgba(99,102,241,.18);
}

.drw-dd-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem;
}
.drw-dd-badge {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #f97316; background: rgba(249,115,22,.15); border-radius: 99px;
  padding: .18rem .5rem; line-height: 1.4;
}
.drw-dd-card.drw-dd-repeat .drw-dd-badge { color: #a78bfa; background: rgba(167,139,250,.15); }
.drw-dd-count { font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.4); }

.drw-dd-body { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.drw-dd-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .82rem;
}
.drw-dd-nome {
  font-size: .77rem; font-weight: 700; color: #fff; margin: 0;
  line-height: 1.35; word-break: break-word;
}

.drw-dd-preco {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .73rem; font-weight: 800; color: #fbbf24; margin-bottom: .65rem;
}
.drw-dd-brl { font-size: .65rem; font-weight: 600; color: rgba(255,255,255,.38); }

.drw-dd-btn {
  display: flex; align-items: center; justify-content: center; gap: .38rem;
  background: linear-gradient(135deg,#f97316,#ea580c);
  color: #fff; font-size: .73rem; font-weight: 800;
  padding: .52rem; border-radius: 9px; letter-spacing: .01em;
  box-shadow: 0 3px 10px rgba(249,115,22,.4);
}
.drw-dd-card.drw-dd-repeat .drw-dd-btn {
  background: linear-gradient(135deg,#818cf8,#6366f1);
  box-shadow: 0 3px 10px rgba(99,102,241,.4);
}

/* Badge de contagem nos itens de nav */
.drw-badge {
  margin-left: auto; flex-shrink: 0;
  background: rgba(37,99,235,.15); color: var(--azul);
  border: 1px solid rgba(37,99,235,.3);
  font-size: .68rem; font-weight: 800;
  padding: .1rem .45rem; border-radius: 99px;
}

/* CTA de fichas (só visitante) — mesmo card do CTA da home, versão compacta */
.drw-cta-fichas {
  margin: .5rem 1rem; padding: 1rem .9rem;
  background: #fff;
  border: 1px solid rgba(249,115,22,.5);
  border-radius: 12px; text-align: center; flex-shrink: 0;
}
.drw-cta-fichas-desc {
  font-size: .68rem; color: #64748b;
  margin: 0 0 .75rem; line-height: 1.45;
}
.drw-cta-fichas .btn-google,
.drw-cta-guest  .btn-google { margin-bottom: 0; padding: .55rem 1rem; font-size: .82rem; }

/* Faixa de stats no rodapé */
.drw-stats {
  display: flex; gap: .5rem;
  padding: .75rem 1rem; flex-shrink: 0;
}
.drw-stat {
  flex: 1; text-align: center;
  background: var(--drw-rede-btn-bg); border: 1px solid var(--drw-rede-btn-borda);
  border-radius: 10px; padding: .5rem .25rem;
}
.drw-stat strong { display: block; font-size: .92rem; font-weight: 800; color: var(--drawer-header-nome-cor); }
.drw-stat span {
  display: block; font-size: .6rem; color: var(--drw-section-label-cor);
  text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem;
}


/* Seções */
.drw-section { padding: .5rem 0; }
.drw-section-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--drw-section-label-cor);
  padding: .3rem 1.25rem .4rem; margin: 0;
}

/* Grid de redes sociais */
.drw-redes-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .4rem; padding: 0 1rem .25rem;
}
.drw-rede-btn {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .55rem .25rem; border-radius: 12px;
  background: var(--rb, var(--drw-rede-btn-bg));
  border: 1px solid var(--drw-rede-btn-borda);
  color: var(--rc, var(--drawer-item-cor));
  font-size: .72rem; font-weight: 600; text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.drw-rede-btn i { font-size: 1.1rem; }
.drw-rede-btn:hover {
  border-color: var(--rc, #6366f1);
  background: var(--rb, rgba(99,102,241,.1));
  transform: translateY(-2px);
}

/* Item de navegação */
button.drawer-item {
  width: 100%; background: none; border: none; border-left: 3px solid transparent;
  font-family: inherit; cursor: pointer; text-align: left;
}
.drawer-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem 1.25rem; color: var(--drawer-item-cor);
  font-size: .875rem; font-weight: 500; text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.drawer-item i { width: 1rem; text-align: center; flex-shrink: 0; font-size: .9rem; }
.drawer-item:hover { background: var(--drawer-item-hover-bg); color: var(--drawer-item-hover-cor); }
.drawer-item.ativa {
  color: var(--drawer-ativa-cor); border-left-color: var(--drawer-ativa-borda);
  background: var(--drawer-ativa-bg); font-weight: 600;
}
.drawer-item.ativa i { color: var(--drawer-ativa-cor); }

/* Botões do footer */

.drw-btn-sair {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .65rem; border-radius: 8px;
  background: none; border: none;
  color: var(--txt-muted); font-size: .75rem; font-weight: 600; cursor: pointer;
  transition: color .15s, background .15s; font-family: inherit;
}
.drw-btn-sair:hover { color: #f87171; background: rgba(220,38,38,.08); }
.drw-btn-sair i { font-size: .7rem; }

.drw-btn-instalar {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 8px;
  background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.3);
  color: #93c5fd; font-size: .75rem; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s; font-family: inherit;
}
.drw-btn-instalar:hover { background: rgba(37,99,235,.2); color: #fff; }
.drw-btn-instalar i { font-size: .7rem; }

/* ── Nav mobile (bottom) ────────────────────────────────────── */
.pub-nav-mobile {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  height: calc(62px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 -4px 24px rgba(0,0,0,.13), 0 -1px 6px rgba(0,0,0,.07);
  display: flex; align-items: stretch;
}

@media (min-width: 768px) {
  .pub-nav-mobile { display: none; }
}

.pub-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .2rem;
  color: #94a3b8;
  font-size: .62rem; font-weight: 500;
  text-decoration: none; background: none; border: none;
  cursor: pointer; font-family: inherit;
  padding: 0 .25rem .15rem;
  transition: color .15s;
  position: relative;
}
.pub-nav-item i { font-size: 1.22rem; }
.pub-nav-item.ativa { color: var(--slate); }
/* Indicator bar at top of active item */
.pub-nav-item.ativa::after {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px;
  background: var(--slate);
  border-radius: 0 0 4px 4px;
}
.pub-nav-item:active { opacity: .7; transition: none; }

/* Central CTA — rounded rect, contained in bar (TikTok/Instagram style) */
.pub-nav-central { flex: 1; opacity: 1 !important; }
.pub-nav-central::after { display: none; }

.pub-nav-central-btn {
  width: 46px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 3px 12px rgba(249,115,22,.4);
  transition: transform .12s, box-shadow .12s;
}
.pub-nav-central:hover .pub-nav-central-btn {
  transform: scale(1.04);
  box-shadow: 0 5px 16px rgba(249,115,22,.5);
}
.pub-nav-central:active .pub-nav-central-btn {
  transform: scale(.96);
  box-shadow: 0 2px 8px rgba(249,115,22,.35);
  transition: none;
}

/* ── Hero ───────────────────────────────────────────────────── */
.pub-hero {
  background: var(--hero-bg);
  background-image: var(--hero-img);
  margin-top: -68px;
  padding: calc(2.5rem + 68px) 0 2.25rem;
  position: relative; overflow: hidden;
}
.pub-hero .pub-container { position: relative; z-index: 1; }

/* ── Fichas badge — moeda flutuante ─────────────────────────── */
.hero-fichas-badge {
  position: absolute;
  top: 4.5rem; right: 1.25rem;
  z-index: 2;
  cursor: pointer;
  animation: hfbFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(180,83,9,.55));
  transition: filter .15s, transform .15s;
}
.hero-fichas-badge:hover { filter: drop-shadow(0 12px 26px rgba(120,80,0,.75)) brightness(1.1); }
.hero-fichas-badge:active { transform: scale(.92); }
.hero-fichas-burst {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  width: 96px; height: 96px;
  border-radius: 50%;
  /* Face da moeda: gradiente dourado com reflexo */
  background:
    radial-gradient(circle at 38% 28%, #fef3c7 0%, #fbbf24 28%, #d97706 62%, #92400e 100%);
  /* Borda da moeda (cunho) */
  border: 4px solid #78350f;
  outline: 2px solid rgba(251,191,36,.5);
  /* Sombra 3D inferior (espessura da moeda) + brilho */
  box-shadow:
    0 5px 0 #451a03,
    0 7px 14px rgba(0,0,0,.5),
    inset 0 2px 5px rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.35);
  position: relative;
  text-align: center;
  line-height: 1.15;
}
/* Brilho diagonal na face */
.hero-fichas-burst::before {
  content: '';
  position: absolute;
  top: 10%; left: 12%;
  width: 42%; height: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.45) 0%, transparent 70%);
  pointer-events: none;
}
.hero-fichas-ico {
  color: #451a03;
  font-size: 1.2rem;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}
.hero-fichas-num {
  color: #1c0800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.hero-fichas-txt {
  color: rgba(28,8,0,.7);
  font-size: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
@keyframes hfbFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-9px) rotate(4deg); }
}

.pub-hero-conteudo {
  position: relative; z-index: 1;
  max-width: 620px;
}

.pub-hero-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.65);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem; font-weight: 600;
  margin-bottom: 1rem;
}
.pub-hero-tag i { color: var(--tag-cor); font-size: .75rem; }

.pub-hero-titulo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800; color: #fff;
  line-height: 1.1; letter-spacing: -.03em;
  margin-bottom: 1rem;
}

.pub-hero-sub {
  font-size: .93rem; color: rgba(255,255,255,.6);
  line-height: 1.65; margin-bottom: 1.75rem; max-width: 460px;
}

/* Versão compacta do subtítulo — só mobile, onde .pub-hero-sub some */
.hero-mob-keywords { display: none; }

.pub-hero-ctas { display: flex; align-items: stretch; gap: .75rem; flex-wrap: wrap; }

/* ── Seções ─────────────────────────────────────────────────── */
.pub-secao { padding: 1rem 0; }
.pub-secao-alt { background: transparent }

.pub-secao-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: .5rem;
}
.pub-secao-titulo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 700;
  color: var(--txt); letter-spacing: -.01em;
}

/* ── Busca ──────────────────────────────────────────────────── */
.pub-busca-form { margin-bottom: 1.25rem; }

.pub-busca-wrap {
  position: relative; max-width: 480px;
}

.pub-busca-icone {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--txt-dim); font-size: .85rem; pointer-events: none;
}

.pub-busca-input {
  width: 100%; padding: .6rem .9rem .6rem 2.4rem;
  border: 1.5px solid var(--borda-2); border-radius: var(--r);
  background: var(--card-2); color: var(--txt);
  font-size: .88rem; font-family: inherit;
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
.pub-busca-input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-fundo);
}
.pub-busca-input::placeholder { color: var(--txt-dim); }

/* ── Filtros / Pills ────────────────────────────────────────── */
.pub-filtros {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.pub-filtros-sub { margin-bottom: 1.5rem; }

@media (max-width: 767px) {
  .pub-filtros { display: none; }
}

/* ── Grade de botões de rede — filtros visuais da seção Em Alta ── */
.pub-redes-grid {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem;
}
.pub-rede-btn {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .6rem .85rem; border-radius: 12px; min-width: 62px;
  background: var(--rb, var(--card));
  border: 1.5px solid var(--borda);
  color: var(--rc, var(--txt-muted));
  font-size: .7rem; font-weight: 700; text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.pub-rede-btn i { font-size: 1.2rem; }
.pub-rede-btn:hover {
  border-color: var(--rc, var(--azul));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.pub-rede-btn.ativa {
  border-color: var(--rc, var(--azul));
  background: var(--rb, var(--azul-fundo));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc, #6366f1) 20%, transparent);
  position: relative;
}
.pub-rede-btn.ativa::after {
  content: '✓';
  position: absolute; top: -6px; right: -6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--rc, var(--azul)); color: #fff;
  font-size: .6rem; font-weight: 900; line-height: 16px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
@media (max-width: 640px) {
  .pub-redes-grid { gap: .4rem; }
  .pub-rede-btn { padding: .55rem .65rem; min-width: 54px; font-size: .65rem; }
  .pub-rede-btn i { font-size: 1.1rem; }
}

.pub-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem 1rem; border-radius: 99px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--borda-2); color: var(--txt-muted);
  background: var(--card); text-decoration: none;
  transition: all var(--t); white-space: nowrap;
}
.pub-pill:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-fundo); }
.pub-pill.ativa { background: var(--slate); color: #fff; border-color: var(--slate); }
.pub-body.tema-dark .pub-pill.ativa { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }
.pub-body.tema-dark .pub-pill:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: #fff; }

.pub-pill-sm {
  padding: .3rem .75rem; font-size: .73rem;
}

.pub-pill-count {
  background: rgba(0,0,0,.08); color: inherit;
  border-radius: 99px; padding: .1rem .45rem;
  font-size: .68rem; font-weight: 700;
}
.pub-pill.ativa .pub-pill-count { background: rgba(255,255,255,.25); }

/* ── HTMX: transição de fade ao trocar categoria ─────────────── */
#catalogo-dinamico { transition: opacity .15s ease; }
#catalogo-dinamico.htmx-swapping { opacity: 0; }

/* ── Grade de serviços ──────────────────────────────────────── */
.servico-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .85rem;
}

@media (min-width: 640px) {
  .servico-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ── Card principal ── */
.servico-card {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 1.1rem 1rem 1rem;
  box-shadow: var(--sombra); display: flex; flex-direction: column;
  gap: .6rem; transition: box-shadow .25s, border-color .25s, transform .25s;
  position: relative;
}
.servico-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sc-grad, var(--sc-accent, var(--azul)));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.servico-card:hover {}

/* Top da plataforma — ribbon flutua acima do card */
.servico-card.sc-top-cat { margin-top: 1rem; overflow: visible; }
.sc-top-ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .25rem;
  color: #fff !important; font-size: .6rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; z-index: 2;
  padding: .22rem .65rem; border-radius: 99px; line-height: 1.4;
}
.sc-top-ribbon i { font-size: .55rem; color: #fff !important; }


/* ── Topo: ícone + categoria + badges ── */
.sc-topo-row {
  display: flex; align-items: flex-start; gap: .6rem;
}

.sc-rede-icon {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.sc-rede-icon i { color: rgba(255,255,255,.95) !important; filter: drop-shadow(0 1px 4px rgba(0,0,0,.25)); }

.sc-subcat {
  font-size: .66rem; color: var(--txt-dim); margin: .2rem 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-subcat i { margin-right: .2rem; }

.sc-badges { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; margin-left: auto; }
.sc-badge-pill {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .6rem; font-weight: 700; padding: .15rem .45rem;
  border-radius: 99px; border: 1px solid; white-space: nowrap;
}
.sc-badge-pill i { font-size: .5rem; }

/* ── Badge de categoria ── */
.sc-cat-nome {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 700;
}
.sc-cat-nome i { font-size: .72rem; }

.servico-badge {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem; border-radius: 99px;
  font-size: .67rem; font-weight: 700;
  background: var(--badge-ser-bg); color: var(--badge-ser-cor);
  border: 1px solid var(--badge-ser-borda);
  white-space: nowrap;
}

/* ── Nome ── */
.sc-qtd-badge {
  font-size: .78rem; font-weight: 800; color: var(--txt);
}
.servico-nome-link { text-decoration: none; }
.servico-nome {
  font-size: .9rem; font-weight: 800; color: var(--txt);
  line-height: 1.3; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  transition: color .15s;
}
.servico-nome-link:hover .servico-nome { color: var(--azul); }

/* ── Preço box ── */
.sc-preco-box {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--fundo); border-radius: var(--r);
  padding: .55rem .75rem; gap: .5rem; margin-top: auto;
}
.sc-preco-label {
  font-size: .6rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--txt-dim); margin: 0;
}
.sc-preco-valor {
  font-size: 1.05rem; font-weight: 900; color: var(--azul);
  margin: .1rem 0 0; line-height: 1;
}
.sc-preco-coins {
  color: #d97706 !important;
  display: flex; align-items: center; gap: .3rem;
}
.sc-preco-coins i { font-size: .9rem; }
.sc-preco-reais {
  font-size: .68rem; color: var(--txt-dim); margin: .2rem 0 0; font-weight: 500;
}
.sc-preco-range {
  font-size: .75rem; font-weight: 700; color: var(--txt);
  margin: .1rem 0 0;
}

/* ── CTA: dois botões lado a lado (Pegar + Analisar) ── */
.sc-cta-row { display: flex; gap: .5rem; }

.sc-cta-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem; border-radius: var(--r);
  background: #0f172a; color: #f97316; border: none; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 700;
  box-shadow: 0 3px 0 #000; text-decoration: none;
  transition: transform .1s, box-shadow .1s, background .15s;
}
.sc-cta-btn:hover { background: #1e293b; transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.sc-cta-btn:active { transform: translateY(3px); box-shadow: none; }
.sc-cta-btn i { font-size: .72rem; }

.sc-cta-btn-sec {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem; border-radius: var(--r);
  background: var(--azul); color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 700;
  box-shadow: 0 3px 0 #1e3a8a; text-decoration: none;
  transition: transform .1s, box-shadow .1s, background .15s;
}
.sc-cta-btn-sec:hover { background: var(--azul-hover); transform: translateY(2px); box-shadow: 0 1px 0 #1e3a8a; }
.sc-cta-btn-sec:active { transform: translateY(3px); box-shadow: none; }
.sc-cta-btn-sec i { font-size: .72rem; }

/* ── legado (não remove pois modal ainda usa) ── */
.servico-meta { display: none; }
.servico-btn { display: none; }

/* ── Como funciona (legado, mantido para compatibilidade) ── */
.pub-steps { display: none; }
.pub-step  { display: none; }
.pub-step-num { display: none; }

/* ── FAQ ────────────────────────────────────────────────────── */
.pub-faq { display: flex; flex-direction: column; gap: .5rem; }

.pub-faq-item {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sombra);
}
.pub-faq-item[open] { border-color: var(--azul-borda); }

.pub-faq-pergunta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; font-size: .88rem; font-weight: 600;
  color: var(--txt); cursor: pointer; list-style: none; gap: 1rem;
  transition: background var(--t);
}
.pub-faq-pergunta:hover { background: var(--faq-hover-bg); }
.pub-faq-pergunta::-webkit-details-marker { display: none; }

.pub-faq-chevron {
  flex-shrink: 0; font-size: .7rem; color: var(--txt-muted);
  transition: transform .2s ease;
}
.pub-faq-item[open] .pub-faq-chevron { transform: rotate(180deg); }

.pub-faq-resposta {
  padding: 0 1.25rem 1rem; font-size: .84rem;
  color: var(--txt-muted); line-height: 1.6;
  border-top: 1px solid var(--borda);
  padding-top: .75rem;
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background: #080e1a; color: #94a3b8; font-size: .875rem; }

/* Topo */
.site-footer-top { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid rgba(255,255,255,.07); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
}

.footer-tagline {
  font-size: .82rem; line-height: 1.65; color: #64748b;
  max-width: 240px; margin-bottom: 1.25rem;
}

.footer-sociais { display: flex; gap: .6rem; flex-wrap: wrap; }

.footer-social-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: #64748b; font-size: .85rem; text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
}
.footer-social-btn:hover { background: var(--azul); border-color: var(--azul); color: #fff; }

.footer-col-titulo {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #e2e8f0;
  margin: 0 0 1rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }

.footer-links a {
  color: #64748b; text-decoration: none; font-size: .82rem;
  display: flex; align-items: center; gap: .45rem;
  transition: color .18s;
}
.footer-links a i { font-size: .7rem; opacity: .6; }
.footer-links a:hover { color: #e2e8f0; }
.footer-links a:hover i { opacity: 1; }

/* Pagamentos */
.site-footer-pagamentos {
  padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.07);
}

.footer-pagamentos-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

.footer-pagamentos-esq { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.footer-pagamentos-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #475569;
  display: flex; align-items: center; gap: .4rem;
}

.footer-badges { display: flex; gap: .5rem; flex-wrap: wrap; }

.footer-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  font-size: .75rem; font-weight: 600; color: #94a3b8;
}

.footer-pagamentos-info {
  font-size: .78rem; color: #475569;
  display: flex; align-items: center; gap: .4rem;
}

/* Base */
.site-footer-base { padding: 1rem 0; }

.footer-base-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

.footer-copy { font-size: .75rem; color: #334155; margin: 0; }

.footer-base-links { display: flex; gap: 1.25rem; }
.footer-base-links a {
  font-size: .75rem; color: #334155; text-decoration: none;
  transition: color .18s;
}
.footer-base-links a:hover { color: #94a3b8; }

.footer-btn-instalar {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 8px;
  background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.3);
  color: #93c5fd; font-size: .75rem; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s;
}
.footer-btn-instalar:hover { background: rgba(37,99,235,.2); color: #fff; }

.footer-selos { display: flex; gap: .5rem; }
.footer-selo {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.07);
  font-size: .68rem; font-weight: 600; color: #475569;
}

/* Responsivo */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-marca { grid-column: 1 / -1; }
  .footer-tagline { max-width: 100%; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .footer-base-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .footer-pagamentos-inner { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   TEMA DARK — WhatsApp × Instagram × Vivo
   Índigo #6366f1 · Gradiente IG · Barlow Condensed · Base #080e1a
   Escopo: .pub-body.tema-dark (nunca afeta o admin)
   ════════════════════════════════════════════════════════════════════ */

/* ── Variáveis dark para o site público ─────────────────────────── */
.pub-body.tema-dark {
  /* Base */
  --fundo:      #080e1a;
  --card:       #0f1527;
  --card-2:     #1a2035;
  --borda:      rgba(255,255,255,.08);
  --borda-2:    rgba(255,255,255,.12);
  --txt:        #E9EDEF;
  --txt-muted:  #8696A0;
  --txt-dim:    #4a5270;
  --azul:       #6366f1;
  --azul-hover: #4f46e5;
  --azul-fundo: rgba(99,102,241,.12);
  --azul-borda: rgba(99,102,241,.3);
  --btn-sombra: #312e81;
  --btn-glow:   rgba(99,102,241,.35);
  --btn-glow-2: rgba(99,102,241,.6);
  --verde:      #34d399;
  --sombra:     0 2px 8px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  --grad-ig:    linear-gradient(135deg, #833AB4 0%, #C13584 45%, #F77737 100%);
  --r:          10px;
  --r-lg:       16px;
  /* Tema público dark */
  --secao-alt-bg:        #0c1222;
  --hero-bg:             #050810;
  --hero-img:            none;
  --tag-cor:             #4ade80;
  --badge-ser-bg:        linear-gradient(135deg, rgba(131,58,180,.22), rgba(193,53,132,.18));
  --badge-ser-borda:     rgba(193,53,132,.35);
  --badge-ser-cor:       #e879f9;
  --card-hover-borda:    rgba(99,102,241,.4);
  --card-hover-shadow:   0 0 0 1px rgba(99,102,241,.18), 0 10px 36px rgba(99,102,241,.12);
  --faq-hover-bg:        #1a2035;
  --step-num-bg:         linear-gradient(135deg, #833AB4, #C13584);
  --nav-mobile-shadow:   0 -4px 20px rgba(0,0,0,.5);
  --drawer-item-cor:     rgba(255,255,255,.6);
  --drawer-item-hover-bg:  rgba(255,255,255,.05);
  --drawer-item-hover-cor: #E9EDEF;
  --drawer-ativa-cor:    #818cf8;
  --drawer-ativa-bg:     rgba(99,102,241,.1);
  --drawer-ativa-borda:  #6366f1;
  --drw-user-bg:         rgba(99,102,241,.08);
  --drw-user-borda:      rgba(99,102,241,.2);
  --drw-user-nome-cor:   #E9EDEF;
  --drw-user-email-cor:  #8696A0;
  --drw-section-label-cor: #4a5270;
  --drw-rede-btn-bg:     rgba(255,255,255,.05);
  --drw-rede-btn-borda:  rgba(255,255,255,.06);
  --drw-guest-borda:     rgba(255,255,255,.1);
  --drw-footer-borda:    rgba(255,255,255,.07);
  --drawer-header-borda: rgba(255,255,255,.07);
  --drawer-header-nome-cor: #fff;
  --drw-fechar-bg:       rgba(255,255,255,.08);
  --drw-fechar-cor:      rgba(255,255,255,.7);
  --saldo-card-bg:       rgba(245,158,11,.12);
  --saldo-card-borda:    rgba(245,158,11,.3);
  --saldo-label-cor:     #fbbf24;
  --saldo-valor-cor:     #f59e0b;
  --saldo-btn-bg:        #f59e0b;
  --saldo-btn-hover:     #d97706;
  --perigo-cor:          #f87171;
  --form-label-cor:      #C4CDD3;
  --form-hint-cor:       #8696A0;
  background: #080e1a;
  color: #E9EDEF;
}

/* ── Nav mobile — dark mode ─────────────────────────────────── */
.pub-body.tema-dark .pub-nav-mobile {
  background: #0f1527;
  border-top-color: rgba(255,255,255,.06);
  box-shadow: 0 -4px 24px rgba(0,0,0,.45), 0 -1px 6px rgba(0,0,0,.25);
}
.pub-body.tema-dark .pub-nav-item { color: rgba(255,255,255,.5); }
.pub-body.tema-dark .pub-nav-item.ativa { color: #fff; }
.pub-body.tema-dark .pub-nav-item.ativa::after { background: #fff; }

/* Utilitário: texto com gradiente magenta → laranja (mesmo laranja do CTA) */
.grad-ig {
  background: linear-gradient(90deg, #E1147B 0%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-green {
  background: linear-gradient(90deg, #6366f1 0%, #818cf8 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Hero — orbs decorativos (dark only, precisam de content:'') ─── */
.pub-body.tema-dark .pub-hero::before {
  content: '';
  position: absolute;
  width: 750px; height: 750px; border-radius: 50%;
  background: radial-gradient(circle, rgba(131,58,180,.45) 0%, rgba(193,53,132,.22) 50%, transparent 70%);
  top: -220px; right: -130px;
  filter: blur(85px);
  animation: orbFloat 11s ease-in-out infinite;
  pointer-events: none;
}
.pub-body.tema-dark .pub-hero::after {
  content: '';
  position: absolute;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.38) 0%, rgba(99,102,241,.22) 50%, transparent 70%);
  bottom: -110px; left: 10%;
  filter: blur(75px);
  animation: orbFloat 14s ease-in-out 4s infinite reverse;
  pointer-events: none;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(-25px,35px) scale(1.06); }
  66%       { transform: translate(18px,-20px) scale(.94); }
}

/* ── Gradiente Instagram ─────────────────────────────────────────── */
.btn-gradiente {
  background: linear-gradient(135deg, #833AB4 0%, #C13584 45%, #F77737 100%);
  border: none; color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .8rem 2rem; border-radius: 10px;
  box-shadow: 0 4px 22px rgba(193,53,132,.38);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: all .2s;
}
.btn-gradiente:hover {
  box-shadow: 0 6px 30px rgba(193,53,132,.55);
  transform: translateY(-2px); filter: brightness(1.08);
}

/* ── CTA principal do hero em laranja: mais contraste/urgência que o azul padrão ── */
.pub-hero .btn-primario.btn-cta {
  background: #f97316;
  box-shadow: 0 5px 0 #9a3412, 0 8px 28px rgba(249,115,22,.4);
  animation: btn-cta-pulse-laranja 2.4s ease-in-out infinite;
}
.pub-hero .btn-primario.btn-cta:hover:not(:disabled) {
  background: #ea580c;
  transform: translateY(3px);
  box-shadow: 0 2px 0 #9a3412, 0 4px 14px rgba(249,115,22,.4);
  animation: none;
}
.pub-hero .btn-primario.btn-cta:active:not(:disabled) { transform: translateY(5px); box-shadow: none; }

@keyframes btn-cta-pulse-laranja {
  0%   { box-shadow: 0 5px 0 #9a3412, 0 0 0 0 rgba(249,115,22,.6), 0 8px 28px rgba(249,115,22,.4); }
  60%  { box-shadow: 0 5px 0 #9a3412, 0 0 0 14px rgba(249,115,22,0), 0 8px 28px rgba(249,115,22,.4); }
  100% { box-shadow: 0 5px 0 #9a3412, 0 0 0 0 rgba(249,115,22,0),   0 8px 28px rgba(249,115,22,.4); }
}

/* ── Botão secundário no hero: estilo glass (fundo escuro, fixo nos dois temas) ── */
.pub-hero .btn-secundario {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.88);
  box-shadow: 0 4px 0 rgba(255,255,255,.16);
}
.pub-hero .btn-secundario:hover:not(:disabled) {
  background: rgba(255,255,255,.18);
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(255,255,255,.16);
}
.pub-hero .btn-secundario:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: none;
}
.pub-hero .btn-secundario.btn-cta {
  box-shadow: 0 5px 0 rgba(255,255,255,.16);
}
.pub-hero .btn-secundario.btn-cta:hover:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(255,255,255,.16);
}
.pub-hero .btn-secundario.btn-cta:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: none;
}

/* ── legado: sc-rede-wrap → substituído por sc-rede-icon ── */
.sc-rede-wrap { display: none; }
.sc-popular   { display: none; }

/* ── Alertas dark ────────────────────────────────────────────────── */
.pub-body.tema-dark .alerta-erro { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.28); color: #fca5a5; }
.pub-body.tema-dark .alerta-ok   { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.28); color: #a5b4fc; }

/* ── Toast dark ──────────────────────────────────────────────────── */
.pub-body.tema-dark .toast-item {
  background: #1a2035;
  border: 1px solid rgba(255,255,255,.1);
  color: #E9EDEF;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.pub-body.tema-dark .toast-error   { border-left: 4px solid #ef4444; }
.pub-body.tema-dark .toast-success { border-left: 4px solid #6366f1; }
.pub-body.tema-dark .toast-warning { border-left: 4px solid #F77737; }
.toast-info    { border-left: 4px solid #9333ea; }

/* ── Onboarding banner atualizado ────────────────────────────────── */
.pub-body.tema-dark #onboarding-banner {
  background: linear-gradient(135deg, #833AB4 0%, #C13584 50%, #F77737 100%) !important;
  border-bottom: 2px solid rgba(255,255,255,.15) !important;
}

/* ── Loader / spinner verde ──────────────────────────────────────── */
.pub-body.tema-dark .spinner { border-top-color: #6366f1; }

/* ── Modal de depósito dark ──────────────────────────────────────── */
.pub-body.tema-dark .dm-modal-overlay { background: rgba(0,0,0,.75); }
.pub-body.tema-dark .dm-modal {
  background: #0f1527 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #E9EDEF !important;
}
.pub-body.tema-dark .dm-modal-titulo { color: #E9EDEF !important; }
.pub-body.tema-dark .dm-valor-input { background: #1a2035 !important; border-color: rgba(255,255,255,.12) !important; color: #E9EDEF !important; }
.pub-body.tema-dark .dm-chip { background: #1a2035 !important; border-color: rgba(255,255,255,.12) !important; color: #8696A0 !important; }
.pub-body.tema-dark .dm-chip.sel,
.pub-body.tema-dark .dm-chip:hover { background: rgba(99,102,241,.15) !important; border-color: #6366f1 !important; color: #818cf8 !important; }
.pub-body.tema-dark .dm-gw { background: #1a2035 !important; border-color: rgba(255,255,255,.1) !important; color: #8696A0 !important; }
.dm-gw.sel, .dm-gw:hover { background: rgba(99,102,241,.12) !important; border-color: #6366f1 !important; }
.pub-body.tema-dark .dm-btn-gerar { background: #6366f1 !important; box-shadow: 0 4px 16px rgba(99,102,241,.35) !important; }
.pub-body.tema-dark .dm-btn-voltar { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #8696A0 !important; }
.pub-body.tema-dark .dm-qr-input { background: #1a2035 !important; border-color: rgba(255,255,255,.1) !important; color: #E9EDEF !important; }
.pub-body.tema-dark .dm-qr-copy-btn { background: #6366f1 !important; }
.pub-body.tema-dark .dm-status-wrap { background: rgba(99,102,241,.08) !important; border-color: rgba(99,102,241,.2) !important; }
.pub-body.tema-dark .dm-qr-fallback { background: #1a2035 !important; }
.pub-body.tema-dark .dm-valor-resumo { color: #E9EDEF !important; }
.pub-body.tema-dark .dm-qr-copy-label { color: #8696A0 !important; }

/* ── Dark: carteira — ícone/valor de crédito ─────────────────────── */
.pub-body.tema-dark .crt-mov-icon.credito { background: rgba(99,102,241,.15) !important; color: #818cf8 !important; }
.pub-body.tema-dark .crt-mov-valor.credito { color: #818cf8 !important; }

/* ── Dark: depositar — steps concluídos e status ────────────────── */
.pub-body.tema-dark .dep-step.done   { color: #818cf8 !important; }
.pub-body.tema-dark .dep-step.done .dep-step-num { background: #6366f1 !important; }
.pub-body.tema-dark .dep-step-line.done { background: #6366f1 !important; }
.pub-body.tema-dark .dep-spinner { border-color: rgba(99,102,241,.25) !important; border-top-color: #6366f1 !important; }
.pub-body.tema-dark .dep-status-aprovado { background: rgba(99,102,241,.1) !important; border-color: rgba(99,102,241,.35) !important; color: #a5b4fc !important; }

/* ── Dark: gamification — missão concluída ───────────────────────── */
.pub-body.tema-dark .gam-missao.feita .gam-missao-icon { background: rgba(99,102,241,.15) !important; color: #818cf8 !important; }
.pub-body.tema-dark .gam-missao-check { color: #818cf8 !important; }


/* ── Scroll anchor: compensa header fixo ────────────────────────── */
#redes-sociais { scroll-margin-top: calc(var(--topbar-h) + .5rem); }

/* ── Dark: tabs de categoria (serviços) ─────────────────────────── */
.pub-body.tema-dark .scat-tab {
  box-shadow: 0 4px 0 0 #04070f, inset 0 1px 0 rgba(255,255,255,.06);
}
.pub-body.tema-dark .scat-tab:hover:not(.ativa) {
  box-shadow: 0 6px 0 0 #04070f, inset 0 1px 0 rgba(255,255,255,.06);
}
.pub-body.tema-dark .scat-tab:active {
  box-shadow: 0 0 0 0 #04070f, inset 0 2px 3px rgba(0,0,0,.3);
}
.pub-body.tema-dark .scat-tab.ativa {
  background: var(--fundo);
  border-color: rgba(99,102,241,.3);
  color: #818cf8;
  box-shadow: 0 0 0 0 #04070f, inset 0 2px 5px rgba(0,0,0,.35);
}

/* ── Saldo mini no header — animação de pulse ────────────────────── */
#hdr-saldo-mini { transition: color .3s; }

/* ── Hero mobile interativo ──────────────────────────────────────── */
.hero-mob-block { display: none; }

@media (max-width: 640px) {
  .pub-hero {
    padding: calc(.6rem + 68px) 0 1.5rem;
    background: #050810 !important;
  }
  .hero-aurora { display: none !important; }
  .pub-body.tema-dark .pub-hero::before,
  .pub-body.tema-dark .pub-hero::after,
  .pub-hero::before,
  .pub-hero::after { display: none !important; }

  .pub-hero-tag    { margin-bottom: .6rem; font-size: .7rem; }
  .pub-hero-titulo { font-size: clamp(1.55rem, 8vw, 2rem); margin-bottom: .5rem; line-height: 1.2; }
  .pub-hero-sub    { display: none; }
  .hero-mob-keywords {
    display: block; font-size: .74rem; color: rgba(255,255,255,.55);
    margin: 0 0 .85rem; letter-spacing: .01em;
  }
  .hero-stats-row  { display: none !important; }
  .pub-hero-ctas   { gap: .5rem; }
  .pub-hero-ctas .btn-cta { justify-content: center; padding: .65rem .6rem; font-size: .82rem; }
  .pub-hero-ctas .btn-primario.btn-cta { flex: 1.6; }
  .pub-hero-ctas .btn-secundario.btn-cta { flex: 1; opacity: .85; }
  .hero-chip { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Bloco interativo mobile */
  .hero-mob-block  { display: flex; flex-direction: column; gap: .5rem; margin-top: .85rem; }
  .hero-mob-hint   { display: none; }
  .hero-mob-preco  { display: none; }

  .hero-mob-live {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .7rem; color: rgba(255,255,255,.5); font-weight: 600;
  }
  .hero-live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #818cf8; flex-shrink: 0;
    animation: feedPulse 1.5s ease infinite;
  }

  /* Chips — linha única com scroll horizontal */
  .hero-redes-chips {
    display: flex; flex-wrap: nowrap; gap: .4rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .hero-redes-chips::-webkit-scrollbar { display: none; }
  .hero-rede-chip {
    display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 99px; padding: .32rem .75rem;
    font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.8);
    cursor: pointer; transition: background .15s, transform .1s;
  }
  .hero-rede-chip:active { background: rgba(255,255,255,.15); transform: scale(.96); }
}
/* ── Responsivo mobile serviços ──────────────────────────────────── */
@media (max-width: 640px) {}
/* Respeita preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  .hero-chip { animation: none; opacity: 0; }
  .hero-aurora { transition: none; }
}

/* ── Card de saldo no dropdown ───────────────────────────────────── */
.hdr-saldo-card {
  margin: .1rem .75rem .6rem;
  background: var(--saldo-card-bg); border: 1px solid var(--saldo-card-borda);
  border-radius: var(--r-lg); padding: .65rem .85rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.hdr-saldo-label {
  margin: 0; font-size: .68rem; font-weight: 600; color: var(--saldo-label-cor);
  text-transform: uppercase; letter-spacing: .04em;
}
.hdr-saldo-valor { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--saldo-valor-cor); }
.hdr-saldo-btn {
  background: linear-gradient(135deg, var(--saldo-btn-bg), var(--saldo-btn-hover));
  color: #fff; border-radius: var(--r);
  padding: .4rem .8rem; font-size: .75rem; font-weight: 700;
  text-decoration: none; display: flex; align-items: center; gap: .3rem;
  white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 3px 0 rgba(0,0,0,.25);
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s, opacity .1s;
}
.hdr-saldo-btn:hover {
  opacity: .88;
  transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.hdr-saldo-btn:active { transform: translateY(3px); box-shadow: none; }

/* ── Dropdown do usuário — sempre escuro (igual ao drawer) ──────── */
.pub-body .user-panel {
  --card:             #080e1a;
  --borda:            rgba(255,255,255,.07);
  --txt:              #E9EDEF;
  --txt-muted:        #8696A0;
  --fundo:            rgba(255,255,255,.06);
  --perigo-cor:       #f87171;
  --saldo-card-bg:    rgba(245,158,11,.12);
  --saldo-card-borda: rgba(245,158,11,.3);
  --saldo-label-cor:  #fbbf24;
  --saldo-valor-cor:  #f59e0b;
  background: #080e1a;
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
}
.pub-body .user-panel-header { background: rgba(99,102,241,.06); }
.pub-body .user-menu-sair   { color: var(--perigo-cor); }
.pub-body .user-menu-sair i { color: var(--perigo-cor); }
.pub-body .user-menu-sep    { border-top-color: rgba(255,255,255,.07); }
.pub-body .user-menu-item:hover { background: rgba(255,255,255,.06); }

/* ── Transição suave ao trocar tema ──────────────────────────────── */
.pub-body,
.pub-body .servico-card,
.pub-body .pub-step,
.pub-body .pub-faq-item,
.pub-body .card,
.pub-body .input,
.pub-body .pub-pill {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* ── Transição suave nos elementos do drawer ─────────────────────── */
.drawer,
.drawer-item,
.drw-user-card,
.drw-rede-btn,
.drawer-fechar {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ── Páginas legais (Termos, Privacidade, Reembolso) ─────────────── */
.legal-atualizado {
  font-size: .78rem; color: var(--txt-muted); margin: -.5rem 0 1.5rem;
}
.legal-prose h2 {
  font-size: 1.05rem; font-weight: 700; color: var(--txt);
  margin: 1.75rem 0 .6rem;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p {
  font-size: .88rem; line-height: 1.7; color: var(--txt-muted); margin: 0 0 .85rem;
}
.legal-prose ul {
  margin: 0 0 .85rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .4rem;
}
.legal-prose li {
  font-size: .88rem; line-height: 1.6; color: var(--txt-muted);
}
.legal-prose strong { color: var(--txt); }
.legal-prose a { color: var(--azul); }
.legal-nav {
  display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--borda);
}
.legal-nav a {
  font-size: .82rem; font-weight: 600; color: var(--txt-muted); text-decoration: none;
}
.legal-nav a.ativo { color: var(--azul); }

/* ══════════════════════════════════════════════════
   PAGE HERO — identidade visual padrão (todas as páginas internas)
   Mesmo background escuro + orbs da página /servicos
   ══════════════════════════════════════════════════ */
.ph-hero {
  position: relative; overflow: hidden;
  background: #050810;
  padding: 0;
  margin-bottom: 0;
  height: 200px;
  text-align: center;
}
.ph-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%,   rgba(99,102,241,.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 0%   100%, rgba(37,99,235,.22)  0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 50%  60%,  rgba(124,58,237,.12) 0%, transparent 60%);
}
.ph-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.4), transparent);
}
.ph-hero-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 0; }
.ph-hero-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3);
  color: #a5b4fc; border-radius: 99px;
  padding: .3rem .9rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem;
}
.ph-hero-titulo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900; color: #fff; margin: 0 0 .6rem;
  line-height: 1.15; letter-spacing: -.02em;
}
.ph-hero-titulo em { font-style: normal; color: #a5b4fc; }
.ph-hero-grad {
  background: linear-gradient(135deg, #6366f1, #a855f7, #3b82f6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ph-hero-sub { color: rgba(255,255,255,.5); font-size: .88rem; margin: 0 0 1.5rem; line-height: 1.6; }
.ph-hero-stats { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.ph-hstat { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: rgba(255,255,255,.55); font-weight: 600; }
.ph-hstat i { font-size: .8rem; }
.ph-hstat-sep { width: 1px; height: 14px; background: rgba(255,255,255,.15); }

@media (max-width: 640px) {
  .ph-hero { height: auto; padding: 1.25rem 0 1rem; min-height: 0; }
  .ph-hero-inner { height: auto; padding: 0 1rem; }
  .ph-hero-titulo { font-size: 1.3rem; }
  .ph-hero-sub { display: none; }
  .ph-hero-stats { display: none; }
  .ph-hstat-sep { display: none; }
}

/* ══════════════════════════════════════════════════
   HERO — tema claro: identidade neutra cinza-azulada
   (no dark mode: identidade escura da /servicos é mantida)
   ══════════════════════════════════════════════════ */
.pub-body:not(.tema-dark) .scat-hero,
.pub-body:not(.tema-dark) .ph-hero,
.pub-body:not(.tema-dark) .rt-hero,
.pub-body:not(.tema-dark) .bp-hero,
.pub-body:not(.tema-dark) .spt-hero {
  background: #f0f4f9;
  min-height: 0;
}

/* Esconde orbs — não fazem sentido em fundo claro */
.pub-body:not(.tema-dark) .scat-hero-bg,
.pub-body:not(.tema-dark) .ph-hero-bg {
  display: none;
}
.pub-body:not(.tema-dark) .rt-hero::before,
.pub-body:not(.tema-dark) .bp-hero::before {
  display: none;
}

/* Borda inferior neutra no lugar do glow */
.pub-body:not(.tema-dark) .scat-hero::after,
.pub-body:not(.tema-dark) .ph-hero::after,
.pub-body:not(.tema-dark) .rt-hero::after,
.pub-body:not(.tema-dark) .bp-hero::after {
  background: #e2e8f0;
}

/* Títulos */
.pub-body:not(.tema-dark) .scat-hero-titulo,
.pub-body:not(.tema-dark) .ph-hero-titulo,
.pub-body:not(.tema-dark) .bp-hero-titulo { color: #0f172a; }
.pub-body:not(.tema-dark) .rt-hero h1 { color: #0f172a; }

/* Subtítulos */
.pub-body:not(.tema-dark) .scat-hero-sub,
.pub-body:not(.tema-dark) .ph-hero-sub,
.pub-body:not(.tema-dark) .rt-hero-sub,
.pub-body:not(.tema-dark) .bp-hero-sub { color: #64748b; }

/* Tags / badges */
.pub-body:not(.tema-dark) .scat-hero-tag,
.pub-body:not(.tema-dark) .ph-hero-tag,
.pub-body:not(.tema-dark) .rt-hero-badge {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.2);
  color: #4f46e5;
}
.pub-body:not(.tema-dark) .bp-hero-badge {
  background: rgba(168,85,247,.08);
  border-color: rgba(168,85,247,.2);
  color: #7c3aed;
}

/* Stats / trust bars */
.pub-body:not(.tema-dark) .scat-hstat,
.pub-body:not(.tema-dark) .ph-hstat,
.pub-body:not(.tema-dark) .rt-trust-item { color: #475569; }
.pub-body:not(.tema-dark) .rt-trust-item i { color: #94a3b8; }
.pub-body:not(.tema-dark) .scat-hstat-sep,
.pub-body:not(.tema-dark) .ph-hstat-sep { background: #cbd5e1; }

/* Search box — /servicos */
.pub-body:not(.tema-dark) .scat-search-wrap {
  background: #fff;
  border-color: #e2e8f0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pub-body:not(.tema-dark) .scat-search-wrap:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.pub-body:not(.tema-dark) .scat-search-ico { color: #94a3b8; }
.pub-body:not(.tema-dark) .scat-search-input { color: #0f172a; }
.pub-body:not(.tema-dark) .scat-search-input::placeholder { color: #94a3b8; }
.pub-body:not(.tema-dark) .scat-limpar-link { color: #64748b; }
.pub-body:not(.tema-dark) .scat-limpar-link:hover { color: #0f172a; }

/* Search box — /acompanhar */
.pub-body:not(.tema-dark) .rt-search-box {
  background: #fff;
  border-color: #e2e8f0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pub-body:not(.tema-dark) .rt-search-input {
  background: transparent;
  border-color: #e2e8f0;
  color: #0f172a;
}
.pub-body:not(.tema-dark) .rt-search-input::placeholder { color: #94a3b8; }
.pub-body:not(.tema-dark) .rt-search-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.legal-nav a:hover { color: var(--azul); }

/* ══════════════════════════════════════════════
   Comunidade — Feed de Avaliações
   ══════════════════════════════════════════════ */
.fv-secao { padding: 3rem 0; }
.fv-secao-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .75rem;
}
.fv-secao-titulo {
  font-size: 1.15rem; font-weight: 800; color: var(--txt);
  display: flex; align-items: center; gap: .5rem; margin: 0;
}
.fv-avaliar-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem; border-radius: var(--r); font-size: .78rem; font-weight: 700;
  background: rgba(139,92,246,.1); color: #8b5cf6;
  border: 1.5px solid rgba(139,92,246,.3); cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.fv-avaliar-btn:hover { background: rgba(139,92,246,.18); border-color: rgba(139,92,246,.5); }

/* Grid de cards */
.fv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 1rem;
}
@media (max-width: 900px) { .fv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .fv-grid { grid-template-columns: 1fr; } }

.fv-batch { animation: fvFadeIn .3s ease; }
@keyframes fvFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Card */
.fv-card {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r-lg);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem;
  transition: box-shadow .15s, border-color .15s;
}
.fv-card:hover { border-color: rgba(139,92,246,.25); box-shadow: 0 4px 18px rgba(0,0,0,.07); }

/* Avatar */
.fv-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: .78rem; font-weight: 800; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.fv-avatar-img { width: 100%; height: 100%; object-fit: cover; }

/* Header do card */
.fv-card-hdr { display: flex; align-items: flex-start; gap: .6rem; }
.fv-card-meta { flex: 1; min-width: 0; }
.fv-card-nome {
  font-size: .8rem; font-weight: 700; color: var(--txt);
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.fv-badge-verificado {
  font-size: .62rem; font-weight: 700; color: #10b981;
  display: inline-flex; align-items: center; gap: .2rem;
}
.fv-card-sub {
  display: flex; align-items: center; gap: .4rem; margin-top: .2rem; flex-wrap: wrap;
}
.fv-badge-cat {
  font-size: .62rem; font-weight: 700; padding: .12rem .45rem; border-radius: 99px;
  color: var(--catcor, #6366f1);
  background: color-mix(in srgb, var(--catcor, #6366f1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--catcor, #6366f1) 25%, transparent);
}
.fv-data { font-size: .65rem; color: var(--txt-muted); }

/* Estrelas */
.fv-stars-wrap { display: flex; gap: .1rem; align-items: center; flex-shrink: 0; }
.fv-star { font-size: .72rem; color: rgba(0,0,0,.15); }
.fv-star-on { color: #f59e0b; }
.tema-dark .fv-star { color: rgba(255,255,255,.15); }

/* Comentário */
.fv-comentario {
  font-size: .82rem; color: var(--txt); line-height: 1.55;
  margin: 0; flex: 1;
}

/* Reações */
.fv-reacoes {
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  padding-top: .5rem; border-top: 1px solid var(--borda);
}
.fv-reacao-btn {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .22rem .5rem; border-radius: 99px; border: 1.5px solid var(--borda);
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: .72rem; color: var(--txt-muted); transition: all .15s;
}
.fv-reacao-btn:hover { border-color: var(--azul); color: var(--azul); background: rgba(37,99,235,.05); }
.fv-reacao-btn.fv-reacao-ativa {
  border-color: var(--azul); background: rgba(37,99,235,.1); color: var(--azul);
}
.fv-reacao-emoji { font-size: .9rem; line-height: 1; }
.fv-reacao-cnt { font-weight: 700; min-width: .6ch; }
.fv-reacoes-total { font-size: .67rem; color: var(--txt-muted); margin-left: auto; }

/* Resposta do admin */
.fv-reply {
  background: rgba(37,99,235,.04); border-left: 3px solid var(--azul);
  border-radius: 0 var(--r) var(--r) 0; padding: .6rem .75rem;
  margin-top: -.15rem;
}
.fv-reply-hdr {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; flex-wrap: wrap;
}
.fv-reply-ico { color: var(--azul); font-size: .72rem; }
.fv-reply-label { font-size: .72rem; font-weight: 700; color: var(--azul); }
.fv-reply-data { font-size: .65rem; color: var(--txt-muted); margin-left: auto; }
.fv-reply-txt { font-size: .78rem; color: var(--txt); line-height: 1.5; margin: 0; }

/* Carregar mais */
#fv-mais { display: flex; flex-direction: column; align-items: center; }
.fv-mais-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.5rem; border-radius: var(--r); border: 1.5px solid var(--borda);
  background: var(--card); color: var(--txt-muted); font-size: .8rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .15s; margin-top: .5rem;
}
.fv-mais-btn:hover { border-color: var(--azul); color: var(--azul); background: rgba(37,99,235,.04); }
.fv-mais-btn.htmx-request { opacity: .6; pointer-events: none; }
#fv-mais.htmx-request .fv-mais-btn::before {
  content: ''; display: inline-block; width: 12px; height: 12px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}

/* Estado vazio */
.fv-vazio {
  text-align: center; padding: 3rem 2rem; color: var(--txt-muted);
  grid-column: 1 / -1;
}
.fv-vazio i { font-size: 2rem; margin-bottom: .75rem; opacity: .4; display: block; }
.fv-vazio p { font-size: .85rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   SISTEMA SOCIAL — Feed, Cards, Perfil, Modal
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Feed section ─────────────────────────────────────────────────────────── */
.sc-feed-secao { padding-top: 1.5rem; }
.sc-feed-hdr {
  display: flex; align-items: center; 
  margin-bottom: 1rem; gap: 1rem;
}

/* ── Abas de filtro do feed ──────────────────────────────────────────────── */
.sc-feed-abas {
  display: flex; gap: .25rem;
  border-bottom: 2px solid var(--borda);
  margin-bottom: 1.25rem;
}
.sc-aba-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1rem; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  color: var(--txt-muted); font-size: .875rem; font-weight: 500;
  cursor: pointer; transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.sc-aba-btn:hover { color: var(--txt); }
.sc-aba-btn.ativa { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }
.sc-aba-btn i { font-size: .8rem; }
.sc-feed-container-wrap.htmx-request { opacity: .5; transition: opacity .2s; }
.sc-criar-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem; background: var(--azul); color: #fff;
  border: none; border-radius: var(--r); font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: opacity .15s;
}
.sc-criar-btn:hover { opacity: .88; }

/* ── Batch animation ──────────────────────────────────────────────────────── */
.sc-batch {
  display: flex; flex-direction: column; gap: .5rem;
}
.sc-batch > .sc-card { animation: scFadeIn .3s ease backwards; }
.sc-batch > .sc-card:nth-child(2)  { animation-delay: .03s; }
.sc-batch > .sc-card:nth-child(3)  { animation-delay: .06s; }
.sc-batch > .sc-card:nth-child(4)  { animation-delay: .09s; }
.sc-batch > .sc-card:nth-child(5)  { animation-delay: .12s; }
.sc-batch > .sc-card:nth-child(n+6) { animation-delay: .15s; }
@keyframes scFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Some suave em vez de sumir de repente durante o "swap:200ms" do botão. */
#sc-mais.htmx-swapping { opacity: 0; transition: opacity .2s ease; }

/* ══════════════════════════════════════════════════════════════════════════════
   SOCIAL FEED v2 — Twitter/Instagram style
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Feed container ──────────────────────────────────────────────────────── */
.sc-feed { display: flex; flex-direction: column; }

/* ── Post card ────────────────────────────────────────────────────────────── */
.sc-card {
  background: var(--card); border-bottom: 1px solid var(--borda);
  padding: .6rem .875rem;
  transition: background .12s;
}
.sc-card-clicavel { cursor: pointer; }
.sc-card:hover { background: color-mix(in srgb, var(--card) 96%, var(--fundo)); }
/* Cada "carregar mais" cria um novo .sc-feed irmão (um por lote paginado) —
   arredonda só a ponta de cima do primeiro lote e a de baixo do último, pra
   não sobrar uma "costura" com cantos arredondados entre um lote e outro. */
#sc-feed-container > .sc-feed:first-of-type > .sc-card:first-child { border-top: 1px solid var(--borda); border-radius: var(--r-lg) var(--r-lg) 0 0; }
#sc-feed-container > .sc-feed:last-of-type > .sc-card:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }

.sc-card-inner { display: flex; gap: .6rem; }

/* ── Avatar coluna ───────────────────────────────────────────────────────── */
.sc-avatar-col { flex-shrink: 0; text-decoration: none; }
.sc-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: #fff; overflow: hidden;
}
.sc-avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.sc-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── Card body ───────────────────────────────────────────────────────────── */
.sc-card-body { flex: 1; min-width: 0; }

/* ── Card header ─────────────────────────────────────────────────────────── */
.sc-card-hdr { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .25rem; margin-bottom: .2rem; }
.sc-card-hdr-info { display: flex; align-items: center; flex-wrap: nowrap; gap: .2rem; flex: 1; min-width: 0; overflow: hidden; }
.sc-nome-link { font-size: .9rem; font-weight: 700; color: var(--txt); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; min-width: 0; flex-shrink: 1; overflow: hidden; white-space: nowrap; }
.sc-nome-link:hover { text-decoration: underline; }
.sc-verificado { color: #3b82f6; font-size: .8rem; flex-shrink: 0; }
.sc-handle-muted { font-size: .82rem; color: var(--txt-muted); text-decoration: none; flex-shrink: 0; }
.sc-handle-muted:hover { text-decoration: underline; }
.sc-hdr-sep { color: var(--txt-muted); font-size: .8rem; flex-shrink: 0; }
.sc-data { font-size: .8rem; color: var(--txt-muted); white-space: nowrap; flex-shrink: 0; }
.sc-data-footer { margin-left: auto; }
.sc-tipo-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 99px;
  margin-bottom: .4rem;
}
.sc-tipo-review    { background: rgba(245,158,11,.12); color: #d97706; }
.sc-tipo-conquista { background: rgba(139,92,246,.12); color: #7c3aed; }

.sc-seguir-mini {
  display: inline-flex; align-items: center;
  background: none; border: none; cursor: pointer; 
  color: var(--txt); flex-shrink: 0; transition: color var(--t);
}
.sc-seguir-mini:hover { color: var(--txt-muted); }
.sc-seguir-mini i { font-size: .85rem; }

/* ── Stars ───────────────────────────────────────────────────────────────── */
.sc-stars-bar { display: flex; gap: .15rem; margin-bottom: .3rem; }
.sc-star-on  { color: #f59e0b; font-size: .82rem; }
.sc-star-off { color: #d1d5db; font-size: .82rem; }

/* ── Contexto de resposta (aba "Respostas" do perfil, estilo Twitter) ──────── */
.sc-resposta-contexto {
  display: block; font-size: .78rem; color: var(--txt-muted);
  text-decoration: none; margin: .1rem 0 .4rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-resposta-contexto:hover { text-decoration: underline; }
.sc-resposta-contexto strong { color: var(--azul); font-weight: 600; }

/* ── Post text ───────────────────────────────────────────────────────────── */
.sc-texto-wrap { margin-bottom: .25rem; }
.sc-texto {
  font-size: .875rem; line-height: 1.5; color: var(--txt);
  margin: 0; word-break: break-word;
}
.sc-texto-clamp {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-texto-expandido { display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important; }
.sc-ver-mais {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: .82rem; font-weight: 600; color: var(--azul); display: none;
}
.sc-ver-mais:hover { text-decoration: underline; }
.sc-mention { color: var(--azul); font-weight: 600; text-decoration: none; }
.sc-mention:hover { text-decoration: underline; }

/* ── Post image ──────────────────────────────────────────────────────────── */
.sc-img-wrap { display: block; margin: .5rem 0; border-radius: var(--r); overflow: hidden; }
.sc-post-img { width: 100%; max-height: 480px; object-fit: contain; display: block; background: var(--fundo); }

/* ── Service chip ────────────────────────────────────────────────────────── */
.sc-servico-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: .4rem 0; padding: .3rem .65rem; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--fundo);
  font-size: .8rem; color: var(--txt); text-decoration: none;
  transition: border-color .12s;
}
.sc-servico-chip:hover { border-color: var(--azul); }
.sc-servico-chip .fa-box-open { color: var(--azul); }
.sc-chip-seta { color: var(--txt-muted); font-size: .72rem; }

/* ── Action bar ──────────────────────────────────────────────────────────── */
.sc-acoes {
  display: flex; align-items: center; gap: .1rem; margin-top: .5rem;
  margin-left: -.4rem;
  border-top: 1px solid var(--borda); padding-top: .35rem;
}
.sc-acao-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .55rem; border-radius: 99px; border: none; background: none;
  cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--txt-muted);
  text-decoration: none; transition: color .15s, background .15s, transform .1s;
  font-family: inherit;
}
.sc-acao-btn:hover { background: var(--fundo); }
.sc-acao-btn:active { transform: scale(.92); }
.sc-acao-comentario:hover { color: var(--azul); }
.sc-acao-compartilhar:hover { color: #10b981; }
.sc-acao-citar:hover { color: #a855f7; }
.sc-acao-curtir:hover { color: #ef4444; }
.sc-acao-curtir.sc-curtiu { color: #ef4444; }
.sc-acao-curtir.sc-curtiu i { animation: scHeartPop .25s ease; }
.sc-acao-salvar:hover { color: var(--primario); }
.sc-acao-salvar.sc-salvou { color: var(--primario); }
@keyframes scHeartPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ── Comentário destacado ───────────────────────────────────────────────── */
.sc-com-destacado {
  background: color-mix(in srgb, var(--azul) 5%, var(--card));
  border-left: 3px solid var(--azul);
  border-radius: 0 var(--r) var(--r) 0;
}
.sc-com-destaque-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 700; color: var(--azul);
  background: color-mix(in srgb, var(--azul) 10%, transparent);
  border-radius: 99px; padding: .1rem .45rem;
  margin-left: .25rem;
}

/* ── Comentário/resposta apontado por um link de permalink (#/comentario/id) ── */
.sc-com-foco {
  background: color-mix(in srgb, #f59e0b 10%, var(--card));
  border-radius: var(--r);
  animation: scComFocoPulse 2s ease-out 1;
  scroll-margin-top: 5rem;
}
@keyframes scComFocoPulse {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 45%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.sc-com-permalink { text-decoration: none; }
.sc-com-permalink:hover .sc-data { text-decoration: underline; }

/* ── Quote embed (post citado) ──────────────────────────────────────────── */
.sc-acao-citar:hover { color: #8b5cf6; }
.sc-quote-embed {
  display: block; margin: .5rem 0 .25rem;
  border: 1px solid var(--borda); border-radius: var(--r);
  padding: .6rem .75rem; text-decoration: none;
  background: var(--fundo); transition: background .12s;
  overflow: hidden;
}
.sc-quote-embed:hover { background: color-mix(in srgb, var(--borda) 30%, var(--fundo)); }
.sc-quote-hdr {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .3rem;
}
.sc-quote-av {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; font-weight: 800; color: #fff; overflow: hidden;
}
.sc-quote-av img { width: 100%; height: 100%; object-fit: cover; }
.sc-quote-nome { font-size: .78rem; font-weight: 700; color: var(--txt); }
.sc-quote-handle { font-size: .73rem; color: var(--txt-muted); }
.sc-quote-txt {
  font-size: .8rem; color: var(--txt); margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; line-height: 1.45;
}
.sc-quote-img {
  width: 100%; max-height: 180px; object-fit: cover;
  border-radius: calc(var(--r) - 2px); margin-top: .4rem;
}

/* ── Formulário de citação (detail page) ────────────────────────────────── */
.sc-citar-form {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); margin-bottom: 1rem; overflow: hidden;
}
.sc-citar-inner {
  display: flex; gap: .75rem; padding: .875rem 1rem;
}
.sc-citar-av {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #fff; overflow: hidden;
}
.sc-citar-av img { width: 100%; height: 100%; object-fit: cover; }
.sc-citar-body { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.sc-citar-textarea {
  width: 100%; resize: none; border: none; outline: none;
  background: transparent; font-size: .9rem; color: var(--txt);
  font-family: inherit; min-height: 2.5rem;
}
.sc-citar-preview {
  border: 1px solid var(--borda); border-radius: var(--r);
  padding: .5rem .7rem; background: var(--fundo);
  display: flex; flex-direction: column; gap: .15rem;
}
.sc-citar-preview-autor { font-size: .75rem; font-weight: 700; color: var(--txt-muted); }
.sc-citar-preview-txt {
  font-size: .8rem; color: var(--txt);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.sc-citar-acoes { display: flex; justify-content: flex-end; gap: .5rem; }

/* ── Load more ────────────────────────────────────────────────────────────── */
#sc-mais { margin-top: 1rem; }
/* Separa batches paginados carregados via HTMX */
.sc-batch + .sc-batch,
.sc-feed + .sc-feed { margin-top: .5rem; }
.sc-mais-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; padding: .9rem 1.5rem;
  border-radius: var(--r-lg); border: none;
  background: linear-gradient(135deg, var(--azul) 0%, #4f46e5 100%);
  color: #fff; font-size: .92rem; font-weight: 700; font-family: inherit;
  cursor: pointer; letter-spacing: .01em;
  box-shadow: 0 4px 0 #1e3a8a, 0 6px 20px rgba(37,99,235,.25);
  transform: translateY(0);
  transition: transform .1s, box-shadow .1s, background .1s;
}
.sc-mais-btn:hover {
  background: linear-gradient(135deg, var(--azul-hover) 0%, #4338ca 100%);
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1e3a8a, 0 4px 12px rgba(37,99,235,.2);
}
.sc-mais-btn:active { transform: translateY(4px); box-shadow: none; }
.sc-mais-btn.htmx-request { opacity: .8; cursor: wait; transform: translateY(2px); box-shadow: 0 2px 0 #1e3a8a; }
.sc-mais-btn.htmx-request .sc-mais-icone { display: none; }
.sc-mais-btn.htmx-request .sc-mais-spin { display: inline-block !important; }
.sc-mais-btn.htmx-request i { animation: spin .7s linear infinite; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.sc-vazio {
  display: flex; flex-direction: column; align-items: center;
  padding: 3rem 2rem; color: var(--txt-muted); gap: .5rem; text-align: center;
}
.sc-vazio i { font-size: 2.5rem; opacity: .3; }
.sc-vazio p { font-size: .95rem; font-weight: 600; margin: 0; }
.sc-vazio span { font-size: .82rem; }
.sc-vazio-fim { text-align: center; padding: 1.5rem; color: var(--txt-muted); font-size: .85rem; }

/* ── Empty state: publicações próprias ───────────────────────────────────── */
.sc-vazio-pub {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 2rem 3.5rem;
  text-align: center;
  gap: 1rem;
}
.sc-vazio-pub::before,
.sc-vazio-pub::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sc-vazio-pub::before {
  width: 200px; height: 200px;
  top: -60px; right: -60px;
  background: radial-gradient(circle, rgba(37,99,235,.07) 0%, transparent 70%);
}
.sc-vazio-pub::after {
  width: 150px; height: 150px;
  bottom: -40px; left: -40px;
  background: radial-gradient(circle, rgba(124,58,237,.07) 0%, transparent 70%);
}
.sc-vazio-pub__halo {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(37,99,235,.08);
  box-shadow: 0 0 0 14px rgba(37,99,235,.04);
  margin-bottom: .25rem;
  z-index: 1;
}
.sc-vazio-pub__icone {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primario, #2563eb) 0%, #6d28d9 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(37,99,235,.4);
}
.sc-vazio-pub__icone i { font-size: 1.7rem; color: #fff; opacity: 1; }
.sc-vazio-pub__titulo {
  font-size: 1.2rem; font-weight: 800;
  color: var(--txt); margin: 0;
  position: relative; z-index: 1;
}
.sc-vazio-pub__sub {
  font-size: .875rem; color: var(--txt-muted);
  margin: 0; line-height: 1.6; max-width: 320px;
  position: relative; z-index: 1;
}
.sc-vazio-pub__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--primario, #2563eb) 0%, #4f46e5 100%);
  color: #fff;
  border: none; border-radius: 2rem;
  padding: .72rem 1.75rem; font-size: .9rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 20px rgba(37,99,235,.4);
  transition: transform .15s, box-shadow .15s, filter .15s;
  position: relative; z-index: 1;
  margin-top: .25rem;
}
.sc-vazio-pub__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,99,235,.48);
  filter: brightness(1.06);
}
.sc-vazio-pub__btn:active { transform: translateY(0); }
.sc-vazio-pub__dica {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--txt-muted);
  flex-wrap: wrap; justify-content: center;
  position: relative; z-index: 1;
}
.sc-vazio-pub__badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(234,179,8,.1));
  color: #d97706;
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 2rem;
  padding: .2rem .7rem;
  font-size: .78rem; font-weight: 700;
}
.sc-vazio-pub__badge i { font-size: .75rem; color: #f59e0b; opacity: 1; }

/* ── Comentários inline (no feed) ────────────────────────────────────────── */
.sc-com-input-wrap {
  display: flex; align-items: flex-start; gap: .5rem; margin-top: .65rem;
  padding-top: .65rem; border-top: 1px solid var(--borda);
}
.sc-com-form { flex: 1; display: flex; gap: .35rem; }
.sc-com-inp {
  flex: 1; padding: .4rem .75rem; border-radius: 99px;
  border: 1px solid var(--borda); background: var(--fundo);
  font-size: .85rem; color: var(--txt); outline: none; transition: border-color .15s;
  font-family: inherit;
}
.sc-com-inp:focus { border-color: var(--azul); }
.sc-com-send {
  padding: .4rem .75rem; border-radius: 99px; border: none;
  background: var(--azul); color: #fff; cursor: pointer; font-size: .8rem; transition: opacity .15s;
}
.sc-com-send:hover { opacity: .88; }
.sc-reply-indicator {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--txt-muted);
  padding: .35rem .75rem; background: var(--fundo);
  border: 1px solid var(--borda); border-bottom: none;
  border-radius: var(--r) var(--r) 0 0; margin-top: .65rem;
}
.sc-reply-indicator strong { color: var(--azul); }
.sc-reply-cancel {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--txt-muted); font-size: .78rem; padding: .1rem .25rem;
}
.sc-reply-cancel:hover { color: var(--txt); }
.sc-com-lista { display: flex; flex-direction: column; }
.sc-comentario-item {
  display: flex; gap: .5rem; padding: .5rem 0;
  border-bottom: 1px solid var(--borda);
}
.sc-comentario-item:last-child { border-bottom: none; }
.sc-com-avatar-link { flex-shrink: 0; text-decoration: none; }
.sc-com-avatar {
  width: 34px; height: 34px; border-radius: 50%; font-size: .75rem; font-weight: 700;
  color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  box-shadow: 0 0 0 2px var(--card);
}
.sc-com-avatar-sm { width: 28px; height: 28px; font-size: .68rem; }
.sc-com-corpo { flex: 1; min-width: 0; }
.sc-com-meta { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin-bottom: .15rem; }
.sc-com-handle { font-size: .78rem; font-weight: 700; color: var(--azul); text-decoration: none; }
.sc-com-handle:hover { text-decoration: underline; }
.sc-com-nome { font-size: .76rem; color: var(--txt-muted); }
.sc-com-txt { font-size: .86rem; color: var(--txt); margin: 0; word-break: break-word; line-height: 1.5; }
.sc-com-vazio { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--txt-muted); padding: .5rem 0; }
.sc-com-vazio p { margin: 0; }
.sc-com-acoes { display: flex; align-items: center; margin-top: .25rem; }
.sc-com-data-inline { font-size: .71rem; color: var(--txt-muted); }
.sc-com-reply { background: none; border: none; cursor: pointer; padding: 0; font-size: .71rem; font-weight: 600; color: var(--txt-muted); transition: color .12s; }
.sc-com-reply:hover { color: var(--azul); }
.sc-com-reply-ref { display: flex; align-items: center; gap: .25rem; font-size: .73rem; color: var(--txt-muted); margin-bottom: .18rem; }
.sc-com-reply-ref .fa-reply { font-size: .65rem; }

/* ── Post Detail page ─────────────────────────────────────────────────────── */

/* Layout 3 colunas: esquerda | centro | direita */
.sc-detalhe-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "center" "right";
  gap: 1.25rem;
  align-items: start;
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.sc-det-left  { grid-area: left; min-width: 0; position: static; display: none; }
.sc-detalhe-center { grid-area: center; min-width: 0; }
.sc-det-right { grid-area: right; min-width: 0; position: static; }

@media (min-width: 1200px) {
  .sc-detalhe-layout {
    grid-template-columns: 220px 1fr 220px;
    grid-template-areas: "left center right";
    padding-top: 1.25rem;
  }
  .sc-det-left  { display: block; position: sticky; top: calc(var(--pub-header-h, 60px) + 1rem); }
  .sc-det-right { position: sticky; top: calc(var(--pub-header-h, 60px) + 1rem); }
}

/* Painéis laterais */
.sc-det-panel {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: .9rem 1rem; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.sc-det-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.sc-det-panel-titulo {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; color: var(--txt-muted);
}
.sc-det-panel-ver-mais {
  font-size: .72rem; color: var(--primario); font-weight: 600; text-decoration: none;
}
.sc-det-panel-ver-mais:hover { text-decoration: underline; }

/* Card do autor */
.sc-det-autor-card { display: flex; align-items: center; gap: .25rem; margin-bottom: .75rem; }
.sc-det-autor-av-wrap { flex-shrink: 0; text-decoration: none; }
.sc-det-autor-av {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--card); box-shadow: 0 0 0 2px var(--borda), 0 2px 6px rgba(0,0,0,.08);
}
.sc-det-autor-info { flex: 1; min-width: 0; }
.sc-det-autor-nome {
  display: block; font-size: .92rem; font-weight: 800; color: var(--txt);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-det-autor-nome:hover { color: var(--primario); }
.sc-det-autor-handle {
  font-size: .76rem; color: var(--txt-muted); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-det-autor-bio {
  font-size: .78rem; color: var(--txt-sec); line-height: 1.5;
  margin-bottom: .8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-det-autor-stats {
  display: flex; align-items: center;
  background: var(--fundo); border-radius: var(--r-md);
  padding: .55rem .5rem; margin-bottom: .8rem;
}
.sc-det-autor-stat { flex: 1; text-align: center; }
.sc-det-autor-stat-val { display: block; font-size: .95rem; font-weight: 800; color: var(--txt); line-height: 1.3; }
.sc-det-autor-stat-lbl { font-size: .64rem; color: var(--txt-muted); letter-spacing: .04em; }
.sc-det-autor-stat-sep { width: 1px; height: 1.75rem; background: var(--borda); flex-shrink: 0; }
.sc-det-seguir-btn {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  width: 100%; background: none; border: 1px solid var(--borda); border-radius: 2rem;
  cursor: pointer; padding: .4rem .75rem; margin-top: .25rem;
  color: var(--txt); font-size: .78rem; font-weight: 600;
  font-family: inherit; transition: background var(--t), border-color var(--t);
}
.sc-det-seguir-btn:hover { background: var(--fundo); }
.sc-det-seguir-btn.seguindo { color: var(--txt-muted); border-color: transparent; }
.sc-det-seguir-btn.seguindo:hover { color: #ef4444; border-color: #ef4444; background: none; }

/* Posts recentes */
.sc-det-post-recente {
  display: block; padding: .55rem 0; border-bottom: 1px solid var(--borda);
  text-decoration: none; transition: opacity .15s;
}
.sc-det-post-recente:last-child { border-bottom: none; }
.sc-det-post-recente:hover { opacity: .8; }
.sc-det-post-recente-txt {
  font-size: .78rem; color: var(--txt); line-height: 1.4;
  margin: 0 0 .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-det-post-recente-meta {
  font-size: .7rem; color: var(--txt-muted); display: flex; gap: .5rem; align-items: center;
}

/* Lista vertical de sugestões (sidebar direita no detalhe) */
.sc-sug-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 0; border-bottom: 1px solid var(--borda);
}
.sc-sug-item:last-child { border-bottom: none; }
.sc-sug-av-wrap { flex-shrink: 0; text-decoration: none; }
.sc-sug-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: #fff; overflow: hidden;
}
.sc-sug-av img { width: 100%; height: 100%; object-fit: cover; }
.sc-sug-item .sc-sug-info { flex: 1; min-width: 0; text-align: left; }
.sc-sug-item .sc-sug-nome { justify-content: flex-start; }
.sc-sug-item .sc-sug-btn {
  flex-shrink: 0; width: auto; padding: .22rem .6rem;
  margin-top: 0; font-size: .72rem;
}

.sc-detalhe-wrap { max-width: 680px; padding: 1rem; }
.sc-detalhe-card {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 1rem;
}
.sc-detalhe-card .sc-texto { -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; }
.sc-detalhe-img { width: 100%; max-height: 500px; object-fit: contain; border-radius: var(--r); margin: .75rem 0; }
/* Vive DENTRO do corpo branco de .sc-detalhe-card agora (não é mais
   uma caixa própria) — só uma linha fina separando do resto do post. */
.sc-detalhe-comentar { padding-top: 1rem; border-top: 1px solid var(--borda); }
.sc-detalhe-form { }
.sc-detalhe-input-row { display: flex; align-items: flex-start; gap: .7rem; }
.sc-detalhe-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #fff; overflow: hidden;
}
.sc-detalhe-input-col { flex: 1; min-width: 0; }
.sc-detalhe-textarea {
  width: 100%; border: 1.5px solid var(--borda); background: var(--fundo);
  border-radius: 1.1rem; padding: .7rem .9rem; font-size: .9rem;
  color: var(--txt); resize: none; outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: inherit; min-height: 42px; box-sizing: border-box;
}
.sc-detalhe-textarea::placeholder { color: var(--txt-muted); }
.sc-detalhe-textarea:focus {
  border-color: var(--azul); background: var(--card);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 15%, transparent);
}
.sc-detalhe-form-acoes { display: flex; justify-content: flex-end; margin-top: .5rem; }
.sc-detalhe-enviar {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: 99px; border: none;
  background: var(--azul); color: #fff; font-size: .82rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--azul) 35%, transparent);
  transition: opacity .15s, transform .15s;
}
.sc-detalhe-enviar:hover { opacity: .92; transform: translateY(-1px); }
.sc-detalhe-enviar:active { transform: translateY(0) scale(.96); }
/* Um único corpo branco pra lista inteira (não uma caixa por comentário) —
   os grupos dentro dele só se separam por uma linha fina, estilo Instagram. */
.sc-comentarios-section {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 1rem 1.25rem;
}
.sc-com-grupo { padding: 1.1rem 0; border-bottom: 1px solid var(--borda); }
.sc-com-grupo:first-child { padding-top: 0; }
.sc-com-grupo:last-child { border-bottom: none; padding-bottom: 0; }
.sc-com-card, .sc-reply-card { display: flex; gap: .7rem; }
.sc-com-hdr { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: .1rem; }
.sc-com-nome-link { font-size: .89rem; font-weight: 700; color: var(--txt); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.sc-com-nome-link:hover { color: var(--azul); }
.sc-com-handle-muted { font-size: .8rem; color: var(--txt-muted); }
.sc-com-txt { margin-top: 0; }
.sc-com-acoes { display: flex; align-items: center;  margin-bottom: .35rem; }
.sc-com-curtir, .sc-com-reply-btn {
  display: inline-flex; align-items: center; gap: .3rem; background: none; border: none;
  cursor: pointer; font-size: .66rem; color: var(--txt-muted); padding: .2rem .35rem;
  border-radius: 99px; transition: color .12s, background .12s, transform .1s; font-family: inherit;
}
.sc-com-curtir:active, .sc-com-reply-btn:active { transform: scale(.93); }
.sc-com-curtir:hover { color: #ef4444; background: color-mix(in srgb, #ef4444 10%, transparent); }
.sc-com-curtir.sc-curtiu { color: #ef4444; }
.sc-com-reply-btn:hover { color: var(--azul); background: color-mix(in srgb, var(--azul) 10%, transparent); }

/* Respostas — um único nível de recuo (estilo Instagram): uma resposta a
   uma resposta não ganha mais indentação, entra na mesma lista ordenada
   por data, com "@fulano" no início do texto indicando a quem se dirige.
   O dado (resposta_a) continua guardando a cadeia real no banco — só a
   exibição é achatada, pra não virar escada. */
.sc-replies {
  /* A linha fica alinhada com o CENTRO do avatar da raiz (30px de largura,
     centro ~15px) — não com o recuo do texto das respostas. Por isso o
     indent de conteúdo (padding-left, abaixo em .trilha/.sc-ver-respostas)
     é maior e separado do margin-left daqui, que só posiciona a linha. */
  margin-left: .9rem;
  --sc-linha: color-mix(in srgb, var(--txt-muted) 55%, transparent);
  display: flex; flex-direction: column; gap: .65rem;
}
/* O respiro antes da 1ª resposta fica como padding-top da .trilha (não
   margin-top do container de fora) DE PROPÓSITO — assim a borda também
   cobre esse espaço e a linha nasce logo abaixo do autor do comentário
   em vez de começar solta, só na altura do avatar da 1ª resposta. */
.sc-replies-trilha {
  padding-top: .65rem; padding-left: 0.5rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.sc-replies-ocultas { display: contents; }
.sc-replies-ocultas.sc-oculto { display: none; }

/* Em tela estreita o padding do corpo branco + o recuo do texto das
   respostas comiam largura demais — aperta só o recuo de conteúdo (a
   posição da linha, alinhada ao avatar da raiz, não muda). */
@media (max-width: 560px) {
  .sc-comentarios-section { padding: .85rem .85rem; }
  .sc-com-grupo { padding: .85rem 0; }
  .sc-replies-trilha, .sc-ver-respostas { padding-left: 1.3rem; }
  .sc-ver-respostas::before { width: 1.3rem; }
}

/* Gancho em curva de verdade via SVG (mask), não um truque de
   border-radius numa caixa — em caixas pequenas o border-radius vira um
   "cotovelo" quadrado em vez de uma curva suave, foi por isso que as
   tentativas anteriores pareciam só uma linha reta. background-color +
   mask-image deixa a cor seguir claro/escuro normalmente (o SVG em si só
   define a forma, a cor visível vem do background-color). */
.sc-ver-respostas {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: none; cursor: pointer;
  padding: 0 0 0 2.1rem; position: relative;
  font-size: .8rem; font-weight: 600; color: var(--txt-muted); font-family: inherit;
}
.sc-ver-respostas::before {
  content: '';
  position: absolute;
  left: 0; top: -.65rem;
  width: 2.1rem; height: 1.1rem;
  background-color: var(--sc-linha);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M1.25 0 L1.25 8.5 Q1.25 16 14.5 16' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M1.25 0 L1.25 8.5 Q1.25 16 14.5 16' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.sc-ver-respostas:hover { color: var(--azul); }
.sc-ver-respostas:hover::before { background-color: var(--azul); }

/* Resposta inline (estilo Instagram/LinkedIn) — abre direto na thread ao
   clicar "Responder", sem precisar rolar até um formulário no topo. */
.sc-inline-reply { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.sc-inline-reply-input {
  width: 100%; border: 1px solid var(--borda); background: var(--fundo);
  border-radius: var(--r); padding: .5rem .65rem; font-size: .82rem;
  color: var(--txt); resize: none; outline: none; transition: border-color .15s;
  font-family: inherit; min-height: 36px; box-sizing: border-box;
}
.sc-inline-reply-input:focus { border-color: var(--azul); }
.sc-inline-reply-acoes { display: flex; justify-content: flex-end; gap: .4rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   PERFIL PÚBLICO
   ══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
   PERFIL SOCIAL
   ══════════════════════════════════════════════════════════════════════════ */
.sc-perfil-secao { padding-top: 0; }

/* Card principal */
.sc-perfil-card {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.5rem;
}

/* Capa */
.sc-perfil-capa-fundo {
  height: 100px;
  background: #059669;
  background-size: cover; background-position: center;
}

/* Corpo do card */
.sc-perfil-body { padding: 0 1.25rem .875rem; }

/* Avatar + botões na mesma linha */
.sc-perfil-topo {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  margin-bottom: .5rem; position: relative;
}
.sc-perfil-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: #fff;
  border: 3px solid var(--card); margin-top: -36px;
  flex-shrink: 0; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.sc-perfil-topo-info { width: 100%; text-align: center; }

/* Botões de ação */
.sc-perfil-acoes {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  flex-wrap: wrap; margin-top: .85rem;
}
.sc-perfil-btn-wide {
  display: flex; flex: 1; min-width: 120px; max-width: 220px;
  justify-content: center; padding: .55rem 1rem; font-size: .85rem;
}
.sc-perfil-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .875rem; border-radius: 99px;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid transparent; transition: all .15s;
  text-decoration: none; white-space: nowrap;
}
.sc-perfil-btn-primary {
  background: var(--txt); color: var(--card);
  border-color: var(--txt);
}
.sc-perfil-btn-primary:hover { opacity: .85; }
.sc-perfil-btn-ghost {
  background: transparent; color: var(--txt);
  border-color: var(--borda);
}
.sc-perfil-btn-ghost:hover { background: var(--fundo); }
.sc-seguindo-ativo:hover { border-color: #ef4444; color: #ef4444; }
.sc-seguindo-ativo:hover i::before { content: "\f235"; } /* fa-user-xmark */

/* "Segue você" badge */
.sc-segue-voce-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 99px;
  font-size: .75rem; font-weight: 600; color: var(--txt-muted);
  background: var(--fundo); border: 1px solid var(--borda);
}

/* Nome + handle inline */
.sc-perfil-nome-wrap {
  display: flex; align-items: baseline; gap: .35rem;
  flex-wrap: wrap; margin-bottom: .1rem; justify-content: center;
}
.sc-perfil-nome {
  font-size: 1.1rem; font-weight: 800; margin: 0; color: var(--txt);
  line-height: 1.2;
}
.sc-perfil-handle-inline {
  font-size: .82rem; color: var(--txt-muted);
}
.sc-perfil-handle { display: none; } /* legado */

/* Bio */
.sc-perfil-bio {
  font-size: .875rem; color: var(--txt); margin: 0 0 .5rem;
  line-height: 1.5; text-align: center;
}

/* Meta + stats na mesma linha */
.sc-perfil-meta-stats {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .4rem; font-size: .8rem; color: var(--txt-muted);
}
.sc-perfil-meta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; color: var(--txt-muted);
}
.sc-perfil-meta i { font-size: .75rem; }
.sc-perfil-meta-sep { color: var(--borda); font-size: .9rem; }
.sc-perfil-stat { display: inline-flex; align-items: baseline; gap: .25rem; }
.sc-perfil-stat strong { font-size: .82rem; font-weight: 700; color: var(--txt); }
.sc-perfil-stat span { font-size: .78rem; color: var(--txt-muted); }
.sc-perfil-stat-link { text-decoration: none; border-radius: .35rem; padding: .1rem .2rem; transition: background var(--t); }
.sc-perfil-stat-link:hover { background: var(--fundo); }
.sc-perfil-stat-link:hover strong { color: var(--primario); }

/* Medalhas */
.sc-medalhas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.sc-medalha {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  cursor: default;
}
.sc-medalha-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mc) 18%, transparent);
  border: 2px solid color-mix(in srgb, var(--mc) 40%, transparent);
  color: var(--mc); font-size: .9rem;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--mc) 20%, transparent);
  transition: transform .15s, box-shadow .15s;
}
.sc-medalha:hover .sc-medalha-icon {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--mc) 30%, transparent);
}
.sc-medalha-label {
  font-size: .62rem; font-weight: 700; color: var(--txt-muted);
  text-align: center; line-height: 1.1; max-width: 52px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Feed do perfil */
.sc-perfil-feed-titulo {
  font-size: .8rem; font-weight: 700; margin: 0 0 .75rem;
  display: flex; align-items: center; gap: .5rem; color: var(--txt-muted); letter-spacing: .05em;
}

/* Responsivo */
@media (max-width: 560px) {
  .sc-perfil-avatar { width: 58px; height: 58px; margin-top: -29px; font-size: 1.3rem; }
  .sc-perfil-body { padding: 0 1rem .75rem; }
  .sc-btn-txt { display: none; }
}

/* ── Sugestões para seguir ──────────────────────────────────────────────── */
.sc-sug-info { display: flex; flex-direction: column; gap: .05rem; width: 100%; }
.sc-sug-nome {
  font-size: .78rem; font-weight: 700; color: var(--txt);
  text-decoration: none; display: flex; align-items: center;
  justify-content: center; gap: .2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-sug-nome:hover { text-decoration: underline; }
.sc-sug-handle {
  font-size: .7rem; color: var(--txt-muted); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-sug-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: .25rem;
  color: var(--txt); font-size: 1rem; transition: color var(--t);
  text-decoration: none; flex-shrink: 0;
}
.sc-sug-btn:hover { color: var(--txt-muted); }
.sc-sug-btn.sc-sug-seguindo { color: var(--txt-muted); }
.sc-sug-btn.sc-sug-seguindo:hover { color: #ef4444; }

/* ── Modal "Editar perfil" ────────────────────────────────────────────────── */
.sc-ep-capa {
  position: relative; height: 140px; border-radius: var(--r);
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #8b5cf6 100%);
  background-size: cover; background-position: center;
  margin-bottom: 3rem; /* espaço pro avatar que sobra pra fora embaixo */
}
.sc-ep-trocar-capa {
  position: absolute; top: .6rem; right: .6rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: 99px; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: .75rem; font-weight: 600;
  backdrop-filter: blur(2px);
}
.sc-ep-trocar-capa input[type="file"] { display: none; }
.sc-ep-avatar {
  position: absolute; left: 1.25rem; bottom: -2.25rem;
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 700; color: #fff;
  border: 4px solid var(--card); overflow: hidden;
}
.sc-ep-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-ep-trocar-avatar {
  position: absolute; inset: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); color: #fff; font-size: 1rem;
  opacity: 0; transition: opacity .15s;
}
.sc-ep-avatar:hover .sc-ep-trocar-avatar { opacity: 1; }
.sc-ep-trocar-avatar input[type="file"] { display: none; }
.sc-ep-remover-linha { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: -.5rem; }
.sc-ep-remover-check {
  display: flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--txt-muted); cursor: pointer;
}

/* Feed do perfil */
.sc-perfil-feed { }
.sc-perfil-feed-titulo {
  font-size: 1rem; font-weight: 700; margin: 0 0 1rem;
  display: flex; align-items: center; gap: .5rem; color: var(--txt);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODAL DE CRIAÇÃO DE POST
   ══════════════════════════════════════════════════════════════════════════════ */
.sc-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 1100; backdrop-filter: blur(3px);
}
.sc-modal {
  display: none; position: fixed; inset: 0; z-index: 1101;
  align-items: center; justify-content: center; padding: 1rem;
}
.sc-modal-wrap {
  background: var(--card); border-radius: 1.25rem;
  width: 100%; max-width: 560px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.04);
  animation: scModalIn .22s cubic-bezier(.34,1.3,.64,1);
  max-height: calc(100vh - 2rem); overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}
@keyframes scModalIn {
  from { opacity: 0; transform: scale(.93) translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Header */
.sc-modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borda);
}
.sc-modal-hdr-info { display: flex; align-items: center; gap: .75rem; }
.sc-composer-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: .95rem; overflow: hidden; flex-shrink: 0;
}
.sc-composer-av img { width: 100%; height: 100%; object-fit: cover; }
.sc-modal-titulo { font-size: .95rem; font-weight: 700; margin: 0; color: var(--txt); line-height: 1.2; }
.sc-modal-sub { font-size: .73rem; color: var(--txt-muted); margin: .1rem 0 0; }
.sc-modal-fechar {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--fundo); color: var(--txt-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.sc-modal-fechar:hover { background: var(--borda); color: var(--txt); }

/* Tipo tabs */
.sc-tipo-tabs { display: flex; gap: .375rem; padding: .875rem 1.25rem .25rem; }
.sc-tipo-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .45rem .5rem; border-radius: 100px; border: 1.5px solid var(--borda);
  background: transparent; font-size: .78rem; font-weight: 600; color: var(--txt-muted);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.sc-tipo-tab[data-tipo="texto"]:hover     { border-color:#6366f1; color:#6366f1; background:rgba(99,102,241,.06); }
.sc-tipo-tab[data-tipo="review"]:hover    { border-color:#f59e0b; color:#f59e0b; background:rgba(245,158,11,.06); }
.sc-tipo-tab[data-tipo="conquista"]:hover { border-color:#10b981; color:#10b981; background:rgba(16,185,129,.06); }
.sc-tipo-tab[data-tipo="texto"].sc-tipo-ativo     { background:rgba(99,102,241,.1) !important; border-color:#6366f1 !important; color:#6366f1 !important; }
.sc-tipo-tab[data-tipo="review"].sc-tipo-ativo    { background:rgba(245,158,11,.1) !important; border-color:#f59e0b !important; color:#f59e0b !important; }
.sc-tipo-tab[data-tipo="conquista"].sc-tipo-ativo { background:rgba(16,185,129,.1) !important; border-color:#10b981 !important; color:#10b981 !important; }

/* Rating */
.sc-rating-section {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1.25rem; border-bottom: 1px solid var(--borda);
}
.sc-rating-label { font-size: .8rem; font-weight: 600; color: var(--txt); white-space: nowrap; }
.sc-star-input { display: flex; gap: .2rem; }
.sc-star-btn {
  background: none; border: none; cursor: pointer; font-size: 1.5rem;
  color: #d1d5db; transition: color .12s, transform .1s; padding: .1rem; line-height: 1;
}
.sc-star-btn:hover { color: #f59e0b; transform: scale(1.15); }
.sc-star-btn .fa-solid { color: #f59e0b; }

/* Compose area */
.sc-compose-area { position: relative; padding: .875rem 1.25rem; }
.sc-post-textarea {
  width: 100%; min-height: 96px; max-height: 280px; resize: none;
  padding: 0; border: none; outline: none;
  background: transparent; color: var(--txt); font-size: .925rem; line-height: 1.65;
  font-family: inherit; box-sizing: border-box; overflow-y: auto;
}
.sc-post-textarea::placeholder { color: var(--txt-muted); }

/* Mention dropdown */
.sc-mention-lista {
  position: absolute; left: 1.25rem; right: 1.25rem; top: calc(100% - .25rem);
  z-index: 20; background: var(--card);
  border: 1px solid var(--borda); border-radius: .75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.15); overflow: hidden;
  max-height: 220px; overflow-y: auto;
}
.sc-mention-item {
  display: flex; align-items: center; gap: .625rem;
  padding: .55rem .875rem; cursor: pointer; transition: background .1s;
}
.sc-mention-item:hover { background: var(--fundo); }
.sc-mention-av {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  background: var(--fundo); flex-shrink: 0;
}
.sc-mention-av-ini {
  display: flex; align-items: center; justify-content: center;
  background: #6366f1; color: #fff; font-weight: 700; font-size: .75rem;
}
.sc-mention-item strong { font-size: .84rem; font-weight: 600; display: block; color: var(--txt); }
.sc-mention-item span   { font-size: .73rem; color: var(--txt-muted); }

/* Image preview */
.sc-img-preview-wrap {
  margin: 0 1.25rem .625rem; position: relative;
  border-radius: .75rem; overflow: hidden; border: 1px solid var(--borda);
}
.sc-img-preview-img {
  width: 100%; max-height: 380px; object-fit: contain; display: block;
  background: var(--fundo);
}
.sc-img-remove {
  position: absolute; top: .5rem; right: .5rem;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .75rem;
  transition: background .15s;
}
.sc-img-remove:hover { background: rgba(0,0,0,.8); }
.sc-img-nome-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: .375rem .75rem; background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  color: #fff; font-size: .73rem; display: flex; align-items: center; gap: .4rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Expandable panels */
.sc-expandable-panel {
  margin: 0 1.25rem .5rem;
  border: 1px solid var(--borda); border-radius: .75rem;
  overflow: hidden; background: var(--fundo);
  animation: scPanelIn .15s ease;
}
@keyframes scPanelIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
.sc-panel-inner { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; }
.sc-panel-icon  { color: var(--txt-muted); font-size: .85rem; flex-shrink: 0; }
.sc-panel-input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: .875rem; color: var(--txt); font-family: inherit;
}
.sc-panel-input::placeholder { color: var(--txt-muted); }
.sc-panel-close {
  background: none; border: none; color: var(--txt-muted); cursor: pointer;
  font-size: .8rem; padding: .2rem; display: flex; align-items: center; transition: color .15s;
}
.sc-panel-close:hover { color: var(--txt); }

/* Service autocomplete list */
.sc-srv-lista {
  border-top: 1px solid var(--borda); max-height: 180px; overflow-y: auto;
}
.sc-srv-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .875rem; cursor: pointer; font-size: .84rem; transition: background .1s;
}
.sc-srv-item:hover { background: var(--card); }
.sc-srv-item span { font-size: .73rem; color: var(--txt-muted); }

/* Service chip */
.sc-srv-chip {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 1.25rem .5rem; padding: .4rem .875rem;
  background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.2);
  border-radius: 100px; font-size: .82rem; color: var(--txt);
}
.sc-srv-chip span { flex: 1; }
.sc-srv-remover {
  background: none; border: none; cursor: pointer; color: var(--txt-muted);
  padding: .1rem .2rem; display: flex; align-items: center; font-size: .8rem;
  transition: color .15s;
}
.sc-srv-remover:hover { color: #ef4444; }

/* Toolbar */
.sc-composer-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .625rem 1rem .875rem; border-top: 1px solid var(--borda);
  gap: .5rem; flex-wrap: wrap;
}
.sc-toolbar-acoes { display: flex; gap: .25rem; }
.sc-tool-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: transparent; color: var(--txt-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: .875rem;
  transition: background .15s, color .15s;
}
.sc-tool-btn:hover { background: var(--fundo); color: var(--azul); }
.sc-tool-btn.ativo { color: var(--azul); background: rgba(99,102,241,.1); }
.sc-toolbar-dir { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Fichas badge */
.sc-fichas-badge {
  font-size: .73rem; font-weight: 700; color: #f59e0b;
  background: rgba(245,158,11,.1); border-radius: 100px;
  padding: .25rem .6rem; display: flex; align-items: center; gap: .25rem;
  white-space: nowrap;
}

/* Char progress ring */
.sc-char-ring-wrap {
  position: relative; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.sc-char-ring { width: 32px; height: 32px; transform: rotate(-90deg); }
.sc-ring-bg   { fill: none; stroke: var(--borda); stroke-width: 3; }
.sc-ring-fill {
  fill: none; stroke: #6366f1; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 94.25; stroke-dashoffset: 94.25;
  opacity: 0; transition: stroke-dashoffset .2s, stroke .2s, opacity .2s;
}
.sc-char-num {
  position: absolute; font-size: .52rem; font-weight: 700;
  color: var(--txt-muted); line-height: 1; pointer-events: none;
}

/* Compatibilidade: modal-editar-perfil usa estas classes */
.sc-modal-body   { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.sc-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .75rem; border-top: 1px solid var(--borda); flex-wrap: wrap; gap: .5rem;
}
.sc-campo-label { display: block; font-size: .82rem; font-weight: 600; color: var(--txt); margin-bottom: .35rem; }

/* ── Post fixado ────────────────────────────────────────────────────────────── */
.sc-card-pinned { border-top: 2px solid #6366f1; }
.sc-fixado-bar {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; color: #6366f1;
  padding: .5rem 1rem .25rem;
}
.sc-fixado-bar .fa-thumbtack { font-size: .7rem; }

/* ── Menu de 3 pontinhos (posts e comentários) ─────────────────────────────── */
.sc-menu-wrap { position: relative; flex-shrink: 0; }
.sc-menu-btn {
  width: 15px; height: 28px; border-radius: 50%; border: none;
  background: transparent; color: var(--txt-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: end; font-size: .8rem;
  transition: background .15s, color .15s;
}
.sc-menu-btn:hover { background: var(--fundo); color: var(--txt); }
.sc-menu-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 200;
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(0,0,0,.13);  overflow: hidden;
}
.sc-menu-dropdown.aberto { display: block; animation: scPanelIn .12s ease; }
.sc-menu-item {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .6rem .875rem; border: none; background: none;
  text-align: left; cursor: pointer; font-size: .84rem; color: var(--txt);
  transition: background .1s; white-space: nowrap;
}
.sc-menu-item:hover { background: var(--fundo); }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — Comunidade (feed, cards, perfil, post-detalhe)
   Breakpoint principal: 640px  |  Ajustes finos: 480px
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Sugestões no estado vazio "Seguindo" ────────────────────────────────── */
.sc-sug-vazio {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 1.5rem 1.25rem;
}
.sc-sug-vazio-titulo {
  font-size: 1rem; font-weight: 700; color: var(--txt);
  margin: 0 0 .25rem; display: flex; align-items: center; gap: .45rem;
}
.sc-sug-vazio-titulo i { color: var(--azul); }
.sc-sug-vazio-sub {
  font-size: .82rem; color: var(--txt-muted); margin: 0 0 1.1rem;
}
.sc-sug-vazio-lista { display: flex; flex-direction: column; gap: 0; }
.sc-sug-vazio-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 0; border-bottom: 1px solid var(--borda);
  transition: opacity .2s;
}
.sc-sug-vazio-item:last-child { border-bottom: none; padding-bottom: 0; }
.sc-sug-vazio-av-link { flex-shrink: 0; text-decoration: none; }
.sc-sug-vazio-av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #fff; overflow: hidden;
}
.sc-sug-vazio-info {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem;
}
.sc-sug-vazio-nome {
  font-size: .875rem; font-weight: 700; color: var(--txt);
  text-decoration: none; display: inline-flex; align-items: center; gap: .25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-sug-vazio-nome:hover { text-decoration: underline; }
.sc-sug-vazio-handle, .sc-sug-vazio-segs {
  font-size: .75rem; color: var(--txt-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-sug-vazio-bio {
  font-size: .78rem; color: var(--txt-sec);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-sug-vazio-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: .25rem;
  color: var(--txt); font-size: 1rem; transition: color var(--t);
}
.sc-sug-vazio-btn:hover { color: var(--txt-muted); }
.sc-sug-vazio-btn.seguindo { color: var(--txt-muted); }
.sc-sug-vazio-btn.seguindo:hover { color: #ef4444; }
@media (max-width: 640px) {
  .sc-sug-vazio { padding: 1.1rem 1rem; }
  .sc-sug-vazio-av { width: 36px; height: 36px; font-size: .75rem; }
  .sc-sug-vazio-bio { display: none; }
  .sc-sug-vazio-btn { padding: .28rem .65rem; font-size: .75rem; }
}

/* ── Sugestões strip (com posts) ─────────────────────────────────────── */
.sc-sug-strip {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: 1rem 1.25rem; margin-top: .75rem;
}
.sc-sug-strip-hdr {
  font-size: .8rem; font-weight: 700; color: var(--txt-muted);
  margin: 0 0 .75rem; display: flex; align-items: center; gap: .4rem; letter-spacing: .04em;
}
.sc-sug-strip-hdr i { color: var(--azul); }
.sc-sug-strip-lista {
  display: flex; gap: .75rem;
  overflow-x: auto; padding-bottom: .25rem;
  scrollbar-width: thin;
}
.sc-sug-strip-lista::-webkit-scrollbar { height: 4px; }
.sc-sug-strip-lista::-webkit-scrollbar-thumb { background: var(--borda); border-radius: 4px; }
.sc-sug-card {
  display: flex; flex-direction: column; align-items: center;
  gap: .3rem; padding: .85rem .6rem;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--r); min-width: 120px; max-width: 120px;
  text-align: center; flex-shrink: 0; transition: opacity .2s;
}
.sc-sug-card-av-link { display: inline-block; text-decoration: none; }
.sc-sug-card-av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 700; color: #fff; overflow: hidden;
}
.sc-sug-card-nome {
  font-size: .76rem; font-weight: 700; color: var(--txt);
  text-decoration: none; display: block; line-height: 1.2;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-sug-card-nome:hover { text-decoration: underline; }
.sc-sug-card-handle, .sc-sug-card-segs {
  font-size: .68rem; color: var(--txt-muted);
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-sug-card-btn {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  width: 100%; background: none; border: 1px solid var(--borda); border-radius: 2rem;
  cursor: pointer; padding: .3rem .6rem; margin-top: .1rem;
  color: var(--txt); font-size: .73rem; font-weight: 600;
  font-family: inherit; transition: background var(--t), border-color var(--t);
}
.sc-sug-card-btn:hover { background: var(--fundo-alt, rgba(0,0,0,.05)); }
.sc-sug-card-btn.seguindo { color: var(--txt-muted); border-color: transparent; }
.sc-sug-card-btn.seguindo:hover { color: #ef4444; border-color: #ef4444; background: none; }
.sc-sug-card-btn:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) {
  .sc-sug-strip { padding: .85rem .9rem; }
  .sc-sug-card { min-width: 100px; max-width: 100px; padding: .7rem .5rem; }
  .sc-sug-card-av { width: 40px; height: 40px; }
}

/* FAB oculto por padrão no desktop */
.sc-fab-publicar { display: none; }

@media (max-width: 640px) {

  /* ── Feed header ───────────────────────────────────────────────────────── */
  .sc-feed-hdr { margin-bottom: .5rem; gap: .5rem; }
  .sc-feed-hdr h1.pub-secao-titulo { font-size: 1.1rem; }
  .sc-criar-btn { display: none; }           /* substituído pelo FAB */

  .sc-feed-abas { gap: 0; margin-bottom: .75rem; }
  .sc-aba-btn { flex: 1; justify-content: center; padding: .7rem .5rem; font-size: .82rem; }

  /* ── FAB "+ Publicar" ─────────────────────────────────────────────────── */
  .sc-fab-publicar {
    display: flex;
    /* Abaixo do drawer (z-index 201) e seu overlay (200) — senão fica
       flutuando por cima do menu mobile quando ele é aberto. */
    position: fixed; bottom: 5rem; left: 1.25rem; z-index: 150;
    width: 35px; height: 35px; border-radius: 50%;
    background: var(--azul); color: #fff; border: none;
    align-items: center; justify-content: center;
    font-size: 1.2rem; cursor: pointer;
    box-shadow: 0 4px 16px rgba(37,99,235,.45);
    transition: transform .15s, box-shadow .15s;
  }
  .sc-fab-publicar:active { transform: scale(.93); }

  /* ── Post card ─────────────────────────────────────────────────────────── */
  .sc-card { padding: .65rem .875rem; }
  .sc-card-inner { gap: .55rem; }

  /* Avatar ligeiramente menor */
  .sc-avatar { width: 34px; height: 34px; font-size: .72rem; }

  /* Header: nome + handle + data numa linha */
  .sc-card-hdr { flex-wrap: nowrap; align-items: center; gap: .25rem; margin-bottom: .25rem; }
  .sc-card-hdr-info { flex-wrap: nowrap; gap: .2rem; overflow: hidden; }
  .sc-nome-link    { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
  .sc-handle-muted { font-size: .75rem; flex-shrink: 0; }
  .sc-data         { font-size: .73rem; }

  /* Botão seguir menor */
  .sc-seguir-mini { font-size: .7rem; }

  /* Texto do post */
  .sc-texto { font-size: .9rem; line-height: 1.55; }

  /* ── Barra de ações — touch targets maiores e espaçados ───────────────── */
  .sc-acoes {
    margin-left: -.5rem;
    margin-right: -.2rem;
    justify-content: flex-start;
  }
  .sc-acao-btn {
    padding: .5rem .55rem;
    min-height: 36px;
    font-size: .82rem;
    gap: .28rem;
    flex: 0 0 auto; justify-content: center;
  }
  /* ── Quote embed ───────────────────────────────────────────────────────── */
  .sc-quote-embed { padding: .5rem .6rem; }
  .sc-quote-txt   { -webkit-line-clamp: 2; }

  /* ── Perfil social ─────────────────────────────────────────────────────── */
  .sc-perfil-capa-fundo { height: 80px; }
  .sc-perfil-stats {
    gap: .75rem;
    flex-wrap: wrap;
  }
  .sc-perfil-nome  { font-size: 1rem; }
  .sc-perfil-handle{ font-size: .8rem; }
  .sc-perfil-bio   { font-size: .82rem; }

  /* Medalhas menores */
  .sc-medalha-icon { width: 32px; height: 32px; font-size: .78rem; }
  .sc-medalha-label{ font-size: .58rem; max-width: 44px; }

  /* ── Comentários in-feed (caixa abaixo do card) ────────────────────────── */
  .sc-com-input-wrap { padding: .5rem .75rem; }
  .sc-com-inp        { font-size: .84rem; padding: .45rem .65rem; }
  .sc-com-send       { padding: .4rem .7rem; font-size: .78rem; }
  .sc-com-avatar     { width: 26px; height: 26px; font-size: .6rem; }

  /* ── Post detalhe — padding interno ───────────────────────────────────── */
  .sc-detalhe-layout { padding-top: .5rem; gap: .5rem; }
  .sc-detalhe-card   { padding: .875rem; }
  .sc-comentarios-section { padding: .875rem .875rem; }
  .sc-detalhe-comentar    { padding: .75rem 0; }
  .sc-detalhe-textarea    { font-size: .9rem; }

  /* ── Citar post (form inline) ──────────────────────────────────────────── */
  .sc-citar-form-inner { flex-direction: column; }
  .sc-citar-textarea   { font-size: .88rem; }

  /* ── Modal quem reagiu ─────────────────────────────────────────────────── */
  .sc-modal-wrap { border-radius: var(--r-lg) var(--r-lg) 0 0; margin-top: auto; }
}

/* ── 480px: ajustes finos ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sc-card { padding: .6rem .7rem; }
  .sc-acao-btn { font-size: .78rem; padding: .48rem .4rem; gap: .22rem; }
  .sc-nome-link { font-size: .84rem; }
  .sc-texto { font-size: .875rem; }
}