/* =========================================================================
   Antes do Sino - Design System (v2, inspirado na linguagem de design
   da Apple: tipografia grande e confiante, espaco generoso, revelacao
   suave ao rolar, navegacao minima) - fonte unica de tokens e
   componentes compartilhados entre as paginas estaticas do site.

   Mantem a identidade de cor ja estabelecida (navy + dourado) em vez
   de adotar a paleta preto/branco/azul da Apple - a inspiracao aqui e
   estrutural (tipografia, espaco, restricao, movimento), nao uma
   copia da marca. Fonte do sistema (-apple-system e familia) no lugar
   de SF Pro - a mesma fonte aparece em dispositivos Apple via
   fallback do proprio SO, sem redistribuir nenhum arquivo de fonte.
   ========================================================================= */

:root{
  /* ---------- Superficie (tema escuro - padrao do produto) ---------- */
  --navy-deep: #050B16;
  --navy: #0A1B34;
  --navy-light: #12294C;
  --surface-1: rgba(255,255,255,0.035);
  --surface-2: rgba(255,255,255,0.06);
  --subnav-bg: rgba(0,0,0,0.18);
  --backdrop: rgba(0,0,0,0.5);
  --line: rgba(230,183,110,0.14);
  --line-strong: rgba(230,183,110,0.30);

  /* ---------- Acento ---------- */
  --gold: #E6B76E;
  --gold-soft: #F2CE94;
  --bronze: #B87F2E;
  --shadow-gold: 0 8px 22px rgba(230,183,110,0.16);

  /* ---------- Texto ---------- */
  --cream: #F4EEE0;
  --slate: #8593AC;
  --slate-dim: #56658A;

  /* ---------- Semantico ---------- */
  --up: #3FB877;
  --down: #E2574C;
  --warning: #D9922E;
  --info: #5B8DEF;
  --market-open: var(--up);
  --market-closed: var(--slate-dim);
  --stale-data: #A07D3E;

  /* ---------- Espacamento (escala de 4px) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- Raio ---------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 100px;

  /* ---------- Tipografia ---------- */
  /* Pilha de fonte do sistema (nao SF Pro embutida - o proprio SO ja
     resolve pra SF Pro em dispositivos Apple via -apple-system, sem
     redistribuir nenhum arquivo de fonte de terceiros). Titulos
     grandes, geometricos, tracking negativo - sem serifa, ao
     contrario da versao anterior deste design system. */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tema claro - so ativa quando o usuario escolhe explicitamente pelo
   botao de tema (ver theme.js); nao segue prefers-color-scheme
   automaticamente, pra manter a identidade escura como o padrao
   sempre previsivel do produto. Mesmos nomes de token, valores
   diferentes - todo o resto do CSS ja usa var(...), entao troca de
   tema sem precisar duplicar nenhuma regra de componente. */
:root[data-theme="light"]{
  --navy-deep: #EFE7D6;
  --navy: #F8F2E4;
  --navy-light: #FFFDF8;
  --surface-1: rgba(15,25,45,0.035);
  --surface-2: rgba(15,25,45,0.06);
  --subnav-bg: rgba(15,25,45,0.05);
  --backdrop: rgba(30,25,15,0.35);
  --line: rgba(140,94,23,0.18);
  --line-strong: rgba(140,94,23,0.34);

  --gold: #9C6A21;
  --gold-soft: #7E551A;
  --bronze: #8C5E17;
  --shadow-gold: 0 8px 22px rgba(156,106,33,0.18);

  --cream: #1B2338;
  --slate: #52607A;
  --slate-dim: #7C89A3;

  --up: #1F8F52;
  --down: #C13B30;
  --warning: #A66518;
  --info: #2E5FC2;
  --market-open: var(--up);
  --market-closed: var(--slate-dim);
  --stale-data: #8C6A1F;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background: radial-gradient(ellipse 120% 80% at 50% -10%, var(--navy-light), var(--navy) 45%, var(--navy-deep) 100%);
  color:var(--cream);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
::selection{background:var(--gold);color:var(--navy-deep);}

/* Visualmente escondido mas presente pra leitor de tela - usado pra
   dar hierarquia semantica (ex: um <h1> real) em telas onde o titulo
   grande de sempre quebraria o layout (Terminal, tela unica sem
   rolagem) sem tirar o elemento da navegacao por leitor de tela. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Vidro fosco compartilhado - usado no nav (sticky) e em qualquer
   overlay que sobrepoe conteudo (modais, drawers). Extraido como
   classe pra nao duplicar os 2 valores em cada lugar novo. */
.glass{
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* =========================================================================
   Metadados de dado (fonte, frescor, proxy, status de mercado)
   =========================================================================
   Antes de existir esta secao, cada tela que precisava mostrar
   fonte/frescor/proxy inventava seu proprio estilo (disclaimer solto
   do Fluxo Estrangeiro, badge so-de-status.html) - centralizado aqui
   pra ser reaproveitado em qualquer pagina, uma vez so.
   ========================================================================= */

.data-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:0.72rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px 10px;color:var(--cream);white-space:nowrap;
}
.data-badge .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.data-badge.live .dot{background:var(--market-open);box-shadow:0 0 0 3px color-mix(in srgb, var(--market-open) 25%, transparent);}
.data-badge.proxy .dot{background:var(--warning);}
.data-badge.stale .dot{background:var(--stale-data);}
.data-badge.closed .dot{background:var(--market-closed);}
.data-badge.neutral .dot{background:var(--info);}

/* "Fonte: X" - texto inline discreto, nunca a coisa mais chamativa da
   tela (metadado, nao conteudo principal). */
.meta-source{
  display:inline-flex;align-items:center;gap:4px;
  font-size:0.72rem;color:var(--slate-dim);
}
.meta-source strong{color:var(--slate);font-weight:600;}

/* "Atualizado as HH:MM" - sempre em mono/tabular, pra alinhar quando
   aparece em lista (ex: varios itens de feed lado a lado). */
.meta-freshness{
  font-family:var(--font-mono);font-size:0.7rem;color:var(--slate-dim);
  font-variant-numeric:tabular-nums;
}

/* Aviso de proxy/estimativa - sempre com o mesmo simbolo e cor
   (--warning), nunca escondido, nunca do mesmo peso que o dado real. */
.proxy-notice{
  display:flex;gap:6px;align-items:flex-start;
  font-size:0.7rem;line-height:1.5;color:var(--slate-dim);
  padding-top:6px;border-top:1px solid var(--line);
}
.proxy-notice::before{content:'\26A0';color:var(--warning);flex-shrink:0;font-size:0.75rem;line-height:1.4;}

.source-link{
  font-size:0.78rem;font-weight:600;color:var(--gold);
  transition:color 0.2s ease;
}
.source-link:hover{color:var(--gold-soft);}

/* Indicador de sessao de mercado (B3: 10h-17h BRT, seg-sex) - logica
   de horario em theme.js (window.AntesDoSinoTema.statusMercado()),
   aqui so o visual. Reutilizavel em qualquer pagina que queira
   mostrar "aberto agora" sem reimplementar a logica. */
.market-status{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:0.72rem;font-weight:600;
  padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface-1);color:var(--slate);flex-shrink:0;
}
.market-status .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.market-status.open{color:var(--cream);border-color:color-mix(in srgb, var(--market-open) 40%, var(--line));}
.market-status.open .dot{background:var(--market-open);box-shadow:0 0 0 3px color-mix(in srgb, var(--market-open) 22%, transparent);}
.market-status.closed .dot{background:var(--market-closed);}

/* =========================================================================
   Estado de erro/indisponibilidade de painel (EmptyState/ErrorState)
   =========================================================================
   Antes, um widget da TradingView que falhasse ao carregar (bloqueador
   de anuncio, CDN deles fora do ar, rede) deixava o painel em branco
   pra sempre, sem nenhuma explicacao - o usuario nao tinha como saber
   se era um bug nosso, se o dado nao existia, ou se so precisava
   recarregar. Usado sempre que o <script> de embed falha (unico sinal
   de falha que da pra detectar de verdade num iframe cross-origin -
   nao da pra saber se o widget carregou "vazio" por dentro, so se o
   script dele sequer rodou). */
.widget-error-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;height:100%;min-height:120px;padding:var(--sp-4);text-align:center;
}
.widget-error-state svg{width:22px;height:22px;color:var(--warning);flex-shrink:0;}
.widget-error-state p{color:var(--slate);font-size:0.82rem;line-height:1.5;max-width:260px;}
.widget-retry-btn{
  font-family:var(--font-mono);font-size:0.72rem;font-weight:600;color:var(--gold);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:6px 14px;
  background:none;cursor:pointer;transition:color 0.2s ease, border-color 0.2s ease, transform 0.15s var(--ease-out);
}
.widget-retry-btn:hover{color:var(--gold-soft);border-color:var(--gold);}
.widget-retry-btn:active{transform:scale(0.96);}

/* =========================================================================
   Skeleton de carregamento com rotulo (LoadingState)
   =========================================================================
   Generalizado a partir do skeleton que so existia dentro do Terminal
   (paineis TradingView) - agora compartilhado por qualquer container que
   vá receber um widget externo (Calendario, Mapa, Quant, Terminal).
   Precisa de position:relative no container (ja garantido abaixo pros
   3 seletores usados). O texto vem de data-loading-text, setado pelo JS
   ANTES de montar o widget (ver theme.js::montarWidgetTV e
   terminal.js::aplicarSkeleton) - cada pagina usa o rotulo do seu
   proprio painel ("Carregando indices...", "Carregando mapa de
   calor...", etc), nunca um texto generico igual em todo lugar. */
.widget-frame, .panel-body, .macro-widget-body, .exp-cotacao{position:relative;}
@keyframes skeleton-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.widget-frame.loading::before, .panel-body.loading::before, .macro-widget-body.loading::before, .exp-cotacao.loading::before{
  content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;
  background-color:var(--surface-1);
  background-image:linear-gradient(90deg, transparent, var(--surface-2), transparent);
  background-size:200% 100%;background-repeat:no-repeat;
  animation:skeleton-shimmer 1.6s ease-in-out infinite;
}
.widget-frame.loading::after, .panel-body.loading::after, .macro-widget-body.loading::after, .exp-cotacao.loading::after{
  content:attr(data-loading-text);position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-mono);font-size:0.74rem;color:var(--slate-dim);padding:var(--sp-4);
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.01ms !important;animation-duration:0.01ms !important;scroll-behavior:auto !important;}
}

/* Revelacao suave ao rolar (Apple usa muito esse padrao) - progressive
   enhancement via IntersectionObserver (ver script no fim de cada
   pagina); sem JS, o conteudo so fica visivel do jeito normal. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ---------- Navegacao ---------- */
nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);
  padding:18px 6vw;
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(20px) saturate(180%);
  background: color-mix(in srgb, var(--navy-deep) 72%, transparent);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:-0.01em;}
.brand svg{width:20px;height:20px;flex-shrink:0;color:var(--gold);}
.nav-right{display:flex;align-items:center;gap:var(--sp-3);}

.sub-nav{
  display:flex;justify-content:center;gap:var(--sp-6);flex-wrap:wrap;
  padding:var(--sp-3) 6vw;background:var(--subnav-bg);
  border-bottom:1px solid var(--line);
}

/* ---------- Alternador de tema (claro/escuro) ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--surface-1);border:1px solid var(--line-strong);color:var(--slate);
  cursor:pointer;transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s var(--ease-out);
}
.theme-toggle:hover{color:var(--gold);border-color:var(--gold);}
.theme-toggle svg{width:17px;height:17px;flex-shrink:0;}
.theme-toggle .icon-moon{display:block;}
.theme-toggle .icon-sun{display:none;}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none;}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block;}
.nav-links{
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.82rem;color:var(--slate);white-space:nowrap;
  transition:color 0.2s ease;
}
.nav-links svg{width:15px;height:15px;flex-shrink:0;opacity:0.85;}
.nav-links:hover{color:var(--cream);}
.nav-links.active{color:var(--gold);font-weight:600;}
.nav-links.active svg{opacity:1;}

/* ---------- Botoes ---------- */
.btn-primary, .nav-cta, .btn-vip{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:0.85rem;font-weight:600;padding:11px 24px;border-radius:var(--r-pill);
  background:var(--gold);color:var(--navy-deep);white-space:nowrap;
  border:1px solid transparent;
  transition:transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.2s ease;
}
.btn-primary:hover, .nav-cta:hover, .btn-vip:hover{
  transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow-gold);background:var(--gold-soft);
}
.btn-primary:active, .nav-cta:active, .btn-vip:active{
  transform:scale(0.96);box-shadow:none;transition-duration:0.1s;
}
.btn-primary:focus-visible, .nav-cta:focus-visible, .btn-vip:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
.btn-outline{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.85rem;font-weight:600;padding:10px 22px;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--line-strong);color:var(--cream);
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.15s var(--ease-out);
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-soft);background:rgba(230,183,110,0.06);}
.btn-outline:active{transform:scale(0.96);}

/* Feedback de clique padrao pra qualquer botao/controle interativo do
   sistema (tema, busca, abas, drawer) - sutil, sem exagero. */
.theme-toggle:active, .btn-search:active, .btn-customize:active,
.sidebar-tab:active, .picker-tab:active, .customize-close:active{
  transform:scale(0.94);
}

/* ---------- Banner secundario (oculto por padrao - grupo gratuito) ---------- */
.vip-banner{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-4);flex-wrap:wrap;
  text-align:center;
  padding:var(--sp-3) 6vw;
  background:linear-gradient(90deg, rgba(230,183,110,0.14), rgba(230,183,110,0.03));
  border-bottom:1px solid var(--line);
}
.vip-banner p{font-size:0.92rem;color:var(--cream);}
.vip-banner strong{color:var(--gold);}
/* Explicacao curta de frequencia/conteudo do CTA - sempre junto da
   chamada principal, nunca escondida (o pedido explicito e dizer o
   que vai ser enviado e com que frequencia). */
.vip-banner .vip-freq{display:block;font-size:0.78rem;color:var(--slate);margin-top:2px;font-weight:400;}

/* ---------- Hero: tipografia grande e confiante, estilo Apple ---------- */
.hero{
  padding:var(--sp-9) 6vw var(--sp-8);max-width:1100px;margin:0 auto;text-align:center;
}
.hero .kicker{
  font-family:var(--font-mono);font-size:0.75rem;letter-spacing:2px;
  color:var(--bronze);text-transform:uppercase;display:block;margin-bottom:var(--sp-5);
}
.hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing:-0.03em;line-height:1.05;margin-bottom:var(--sp-5);text-wrap:balance;
}
.hero p{
  color:var(--slate);font-size:clamp(1.05rem, 1.6vw, 1.3rem);line-height:1.55;
  max-width:640px;margin:0 auto;text-wrap:pretty;
}

/* Cabecalho de secao mais compacto, usado dentro do corpo da pagina
   (nao no hero) - mesma familia tipografica, escala menor. */
.page-head{max-width:680px;margin-bottom:var(--sp-6);}
.page-head .kicker{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:1.5px;
  color:var(--bronze);text-transform:uppercase;display:block;margin-bottom:var(--sp-3);
}
.page-head h1, .page-head h2{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);
  letter-spacing:-0.02em;line-height:1.1;margin-bottom:var(--sp-3);text-wrap:balance;
}
.page-head p{color:var(--slate);font-size:1.02rem;line-height:1.6;}

section{padding:var(--sp-8) 6vw;max-width:1200px;margin:0 auto;}

.widget-frame{
  background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;
}
/* Nota de fonte logo abaixo de um widget de terceiro (TradingView) -
   usa .meta-source (metadados, ver DESIGN_SYSTEM.md) + so o espacamento
   que cada pagina com widget precisa, pra nao repetir style inline. */
.widget-source-note{margin-top:var(--sp-3);max-width:680px;}
.widget-source-note.meta-source{display:block;}

/* =========================================================================
   Componentes de navegacao secundaria + dialogos compartilhados
   =========================================================================
   Extraidos de docs/terminal.html (onde nasceram) pra ca quando o Radar
   de Abertura (docs/index.html) passou a precisar dos mesmos componentes
   (link de pagina discreto, botao de personalizar, drawer de
   personalizacao, onboarding de 1a visita, busca universal Ctrl+K) -
   evita duplicar ~150 linhas de CSS numa segunda pagina. */
.btn-back-home{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.78rem;color:var(--slate);white-space:nowrap;padding:8px 4px;
  transition:color 0.2s ease;
}
.btn-back-home svg{width:14px;height:14px;flex-shrink:0;opacity:0.8;}
.btn-back-home:hover{color:var(--cream);}

.btn-customize{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.78rem;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--line-strong);color:var(--slate);
  cursor:pointer;white-space:nowrap;transition:color 0.2s ease, border-color 0.2s ease, transform 0.15s var(--ease-out);
}
.btn-customize svg{width:14px;height:14px;flex-shrink:0;}
.btn-customize:hover{color:var(--cream);border-color:var(--gold);}

/* ---------- Drawer de personalizacao ---------- */
.customize-drawer{
  position:fixed;top:0;right:0;width:320px;height:100vh;z-index:100;
  background:color-mix(in srgb, var(--navy) 85%, transparent);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-left:1px solid var(--line);
  padding:20px;overflow-y:auto;
  transform:translateX(100%);transition:transform 0.25s ease;
  box-shadow:-20px 0 40px var(--backdrop);
}
.customize-drawer.open{transform:translateX(0);}
.customize-drawer h3{font-family:var(--font-display);font-weight:700;letter-spacing:-0.01em;font-size:1.15rem;margin-bottom:6px;}
.customize-drawer p{color:var(--slate);font-size:0.82rem;margin-bottom:18px;line-height:1.5;}
.customize-item{
  display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);
  font-size:0.88rem;
}
.customize-item input{width:16px;height:16px;accent-color:var(--gold);}
.customize-reset{
  margin-top:18px;width:100%;padding:10px;border-radius:8px;background:none;
  border:1px solid var(--line);color:var(--slate);cursor:pointer;font-size:0.8rem;
}
.customize-reset:hover{color:var(--down);border-color:var(--down);}
.customize-close{
  position:absolute;top:10px;right:10px;background:none;border:none;color:var(--slate);
  font-size:1.1rem;cursor:pointer;transition:transform 0.15s var(--ease-out), color 0.2s ease;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
}
.drawer-backdrop{
  display:none;position:fixed;inset:0;background:var(--backdrop);z-index:90;
}
.drawer-backdrop.open{display:block;}

/* ---------- Onboarding (so na 1a visita, ver localStorage no JS) ---------- */
.onboarding-card{
  display:none;position:fixed;left:20px;bottom:20px;z-index:150;width:280px;
  background:var(--navy-deep);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:18px 18px 14px;box-shadow:0 12px 32px var(--backdrop);
  opacity:0;transform:translateY(12px);transition:opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.onboarding-card.visible{display:block;}
.onboarding-card.in{opacity:1;transform:translateY(0);}
.onboarding-card h3,.onboarding-card h4{font-family:var(--font-display);font-size:0.95rem;font-weight:700;margin-bottom:10px;padding-right:20px;}
.onboarding-card ol{list-style:none;counter-reset:onb;display:flex;flex-direction:column;gap:8px;}
.onboarding-card li{
  counter-increment:onb;font-size:0.8rem;color:var(--slate);line-height:1.4;
  display:flex;gap:8px;align-items:flex-start;
}
.onboarding-card li::before{
  content:counter(onb);flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:var(--surface-2);color:var(--gold);font-family:var(--font-mono);font-size:0.68rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.onboarding-card kbd{
  font-family:var(--font-mono);font-size:0.66rem;color:var(--slate-dim);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;
}
.onboarding-close{
  position:absolute;top:6px;right:6px;background:none;border:none;color:var(--slate-dim);
  font-size:0.9rem;cursor:pointer;transition:color 0.2s ease;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
}
.onboarding-close:hover{color:var(--cream);}
@media (max-width:480px){
  .onboarding-card{left:12px;right:12px;bottom:12px;width:auto;}
}

/* ---------- Busca universal (Ctrl+K / Cmd+K) ---------- */
.cmdk-backdrop{
  display:none;position:fixed;inset:0;background:var(--backdrop);z-index:200;
}
.cmdk-backdrop.open{display:block;}
.cmdk-modal{
  display:none;position:fixed;top:14vh;left:50%;transform:translateX(-50%);
  width:min(560px, 92vw);max-height:70vh;z-index:201;
  background:color-mix(in srgb, var(--navy) 82%, transparent);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:0 24px 60px var(--backdrop);overflow:hidden;
  flex-direction:column;
}
.cmdk-modal.open{display:flex;}
.cmdk-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex-shrink:0;}
.cmdk-input-row svg{width:17px;height:17px;color:var(--slate-dim);flex-shrink:0;}
.cmdk-input{
  flex:1;background:none;border:none;outline:none;color:var(--cream);
  font-family:var(--font-body);font-size:0.95rem;
}
.cmdk-input::placeholder{color:var(--slate-dim);}
.cmdk-hint{
  flex-shrink:0;font-family:var(--font-mono);font-size:0.68rem;color:var(--slate-dim);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;
}
.cmdk-body{overflow-y:auto;padding:6px;}
.cmdk-section-label{
  font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.6px;text-transform:uppercase;
  color:var(--bronze);padding:10px 10px 4px;
}
.cmdk-row{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  cursor:pointer;font-size:0.86rem;color:var(--cream);
}
.cmdk-row:hover, .cmdk-row.active{background:color-mix(in srgb, var(--gold) 10%, transparent);}
.cmdk-row .ticker{font-family:var(--font-mono);color:var(--gold);font-weight:600;flex-shrink:0;}
.cmdk-row .nome{color:var(--slate);font-size:0.8rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmdk-row .cmdk-arrow{color:var(--slate-dim);flex-shrink:0;}
.cmdk-empty{padding:20px 10px;text-align:center;color:var(--slate-dim);font-size:0.85rem;}
.cmdk-preview{
  margin:4px 6px 8px;padding:10px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-1);height:110px;position:relative;
}
.cmdk-news-item{padding:8px 10px;border-radius:8px;}
.cmdk-news-item:hover{background:color-mix(in srgb, var(--gold) 8%, transparent);}
.cmdk-news-item h4{font-size:0.82rem;font-weight:600;line-height:1.35;color:var(--cream);}
.cmdk-news-item .src{font-size:0.68rem;color:var(--slate-dim);display:block;margin-top:3px;}

footer{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  padding:var(--sp-7) 6vw;border-top:1px solid var(--line);color:var(--slate-dim);font-size:0.82rem;
}
footer a{color:var(--gold);transition:color 0.2s ease;}
footer a:hover{color:var(--gold-soft);}

/* Botao flutuante de feedback (inspirado no obm.com.br) - injetado por
   theme.js em toda pagina que carrega esse script, pra nao duplicar o
   HTML em cada .html. Fica discreto (so o icone) e expande um rotulo
   no hover, sem cobrir conteudo de painel (por isso "left" no rotulo,
   nao um popover por cima). */
.feedback-float{
  position:fixed;right:20px;bottom:20px;z-index:150;
  display:flex;align-items:center;gap:8px;
  background:var(--navy-deep);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  color:var(--slate);padding:12px;overflow:hidden;
  box-shadow:0 8px 24px var(--backdrop);
  transition:color 0.2s ease, border-color 0.2s ease, transform 0.15s var(--ease-out), padding 0.25s var(--ease-out);
}
.feedback-float svg{width:18px;height:18px;flex-shrink:0;}
.feedback-float span{
  max-width:0;overflow:hidden;white-space:nowrap;font-size:0.82rem;font-weight:600;
  transition:max-width 0.25s var(--ease-out);
}
.feedback-float:hover{color:var(--cream);border-color:var(--gold);padding:12px 16px;}
.feedback-float:hover span{max-width:160px;}
.feedback-float:active{transform:scale(0.96);}
@media (max-width:768px){
  .feedback-float{right:14px;bottom:14px;}
}

@media (max-width:768px){
  nav{padding:14px 5vw;}
  .brand{font-size:1rem;}
  .sub-nav{gap:16px;padding:10px 5vw;}
  .nav-links{font-size:0.78rem;}
  .vip-banner{padding:12px 5vw;}
  section{padding:var(--sp-7) 5vw;}
  .hero{padding:var(--sp-8) 5vw var(--sp-6);}
}