/* ─────────────────────────────────────────────────────────────
   Brasil Paralelo — Design Tokens · v14 "Apple Premium" refresh
   ─────────────────────────────────────────────────────────────
   Mudanças desde v13:
   · Accent teal #25d5ab → blue #0099FF (sample direto do logo)
   · Glass surfaces baked-in (sidebar/topbar/modal)
   · Sombras compostas (ambient + key + sub-pixel highlight)
   · Easings/durations padronizados como tokens
   · Densidade respira: padding cards 16→20, gaps seção 24→32
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Backgrounds / surfaces ── */
  --bp-bg:        #0a0a0a;
  --bp-bg-elev:   #121214;
  --bp-bg-elev-2: #18181b;
  --bp-bg-elev-3: #1d1d22;

  /* ── Ink scale ── */
  --bp-ink:       #f5f5f4;
  --bp-ink-dim:   #b8b8b5;
  --bp-ink-mute:  #8a8a87;
  --bp-ink-faint: #5a5a58;

  /* ── Lines (use sparingly — sombra > borda pra elevação) ── */
  --bp-line:        rgba(255, 255, 255, 0.08);
  --bp-line-strong: rgba(255, 255, 255, 0.18);
  --bp-line-bright: rgba(255, 255, 255, 0.28);

  /* ── Accent: azul do logo ── */
  --bp-blue:        #0099FF;
  --bp-blue-hi:     #38B0FF;                       /* hover (+10% L) */
  --bp-blue-soft:   rgba(0, 153, 255, 0.30);       /* fundos sutis */
  --bp-blue-glow:   rgba(0, 153, 255, 0.12);       /* aura em KPIs/badges */
  --bp-blue-ink:    #001F33;                       /* texto sobre fundos azuis */

  /* Aliases (compat com ~200 usos antigos) */
  --bp-teal:      var(--bp-blue);
  --bp-teal-hi:   var(--bp-blue-hi);
  --bp-teal-soft: var(--bp-blue-soft);
  --bp-teal-glow: var(--bp-blue-glow);
  --bp-teal-ink:  var(--bp-blue-ink);

  --bp-orange: #f59e0b;
  --bp-amber:  #fbbf24;
  --bp-red:    #e85d5d;
  --bp-green:  #34d399;

  /* ── Glass surfaces ── */
  --bp-glass-bg:        rgba(20, 24, 28, 0.72);    /* sidebar / topbar / dropdown */
  --bp-glass-bg-strong: rgba(24, 28, 34, 0.85);    /* modals / side panel */
  --bp-glass-border:    rgba(255, 255, 255, 0.06); /* highlight sutil topo */
  --bp-glass-blur:      blur(24px) saturate(150%); /* receita padrão */
  --bp-glass-blur-strong: blur(40px) saturate(160%);

  /* ── Sombras compostas ── */
  --bp-shadow-card:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 4px 12px -4px rgba(0,0,0,0.6),
    0 16px 32px -16px rgba(0,0,0,0.8);
  --bp-shadow-card-hover:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 20px -6px rgba(0,0,0,0.7),
    0 24px 48px -20px rgba(0,0,0,0.85);
  --bp-shadow-elevated:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 8px 24px -8px rgba(0,0,0,0.7),
    0 32px 64px -24px rgba(0,0,0,0.85);
  --bp-shadow-modal:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 24px 48px -12px rgba(0,0,0,0.85),
    0 48px 96px -32px rgba(0,0,0,0.9);
  --bp-shadow-focus:
    0 0 0 1px var(--bp-blue),
    0 0 0 4px var(--bp-blue-soft),
    0 0 24px -4px var(--bp-blue-soft);

  /* ── Type ──
     Stack híbrido (2026-05-01): Apple SF/New York como PRIMEIRA escolha
     pra herdar fonte real no Mac/iOS, depois Inter/Source Serif Pro como
     fallback web-safe nos outros SOs (Inter foi desenhada como clone open
     do SF Pro — visualmente quase idênticas).

     Comportamento:
     · macOS/iOS: SF Pro / New York / SF Mono reais (sem download, do device)
     · Windows/Android/Linux: Inter / Source Serif Pro / JetBrains Mono
       (Google Fonts via <link> em index.html)

     Apple não licencia SF/New York pra web em devices não-Apple — por
     isso o fallback open. */
  --bp-sans:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'SF Pro',
                'Inter', system-ui, sans-serif;
  --bp-compact: -apple-system, BlinkMacSystemFont, 'SF Compact Text', 'SF Compact Display', 'SF Compact',
                'Inter', system-ui, sans-serif;
  --bp-mono:    ui-monospace, 'SF Mono', SFMono-Regular,
                'JetBrains Mono', Menlo, Consolas, 'Courier New', monospace;
  /* Serif (títulos, pitches editoriais): New York no Apple, Source Serif Pro fallback. */
  --bp-serif:   ui-serif, 'New York', 'Source Serif 4', 'Times New Roman', Georgia, serif;
  /* Poster (display italic em títulos hero): também New York / Source Serif Pro. */
  --bp-poster:  ui-serif, 'New York', 'Source Serif 4', 'Times New Roman', Georgia, serif;

  /* ── Radii ── */
  --bp-r-sm: 6px;
  --bp-r:    10px;
  --bp-r-lg: 14px;
  --bp-r-xl: 20px;

  /* ── Motion ── */
  --bp-ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* exit, padrão */
  --bp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bp-dur-fast:    140ms;   /* micro: hover, focus */
  --bp-dur:         200ms;   /* default state change */
  --bp-dur-slow:    320ms;   /* reveal, modal */
  --bp-dur-pose:    480ms;   /* hero, badge celebration */

  /* ── Density ── */
  --bp-pad-card: 20px;
  --bp-pad-card-lg: 28px;
  --bp-row-h: 46px;
  --bp-section-gap: 32px;
}

/* ── Reset compacto ── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* Smooth scroll global (anchor links e scrollIntoView). Respeita
     prefers-reduced-motion via media query mais abaixo. */
  scroll-behavior: smooth;
}
body {
  font-family: var(--bp-sans);
  background: var(--bp-bg);
  color: var(--bp-ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* SF Pro tem optical sizing automático via font-optical-sizing — ativa
     o "Display" pra títulos grandes e "Text" pra corpos. */
  font-optical-sizing: auto;
  /* GPU compositing pra todo o body — força 60fps no scroll */
  -webkit-overflow-scrolling: touch;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--bp-sans); cursor: pointer; }
::selection { background: var(--bp-blue-soft); color: var(--bp-ink); }

/* ─────────────────────────────────────────────────────────────
   Glass primitives (baked-in)
   ───────────────────────────────────────────────────────────── */
.bp-glass {
  background: var(--bp-glass-bg);
  backdrop-filter: var(--bp-glass-blur);
  -webkit-backdrop-filter: var(--bp-glass-blur);
  border: 1px solid var(--bp-glass-border);
}
.bp-glass-strong {
  background: var(--bp-glass-bg-strong);
  backdrop-filter: var(--bp-glass-blur-strong);
  -webkit-backdrop-filter: var(--bp-glass-blur-strong);
  border: 1px solid var(--bp-glass-border);
}

/* ─────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────── */
.bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px;
  font-family: var(--bp-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--bp-r);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--bp-dur) var(--bp-ease),
    color      var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    transform  var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
  text-decoration: none; white-space: nowrap;
  position: relative;
}
.bp-btn-primary {
  background: var(--bp-blue);
  color: var(--bp-blue-ink);
  border-color: var(--bp-blue);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 16px -6px var(--bp-blue-soft),
    0 12px 32px -16px rgba(0,0,0,0.7);
}
.bp-btn-primary:hover {
  background: var(--bp-blue-hi);
  border-color: var(--bp-blue-hi);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 8px 20px -6px var(--bp-blue-soft),
    0 16px 40px -16px rgba(0,0,0,0.8);
}
.bp-btn-primary:active { transform: translateY(0); }
.bp-btn-primary:disabled {
  background: var(--bp-bg-elev-2); color: var(--bp-ink-faint);
  border-color: var(--bp-line); cursor: not-allowed; transform: none; box-shadow: none;
}
.bp-btn-ghost {
  background: rgba(255,255,255,0.02);
  color: var(--bp-ink);
  border-color: var(--bp-line-strong);
  backdrop-filter: blur(8px);
}
.bp-btn-ghost:hover {
  border-color: var(--bp-blue);
  color: var(--bp-blue-hi);
  background: var(--bp-blue-glow);
}

/* Sweep micro-interaction (sutil — só primary CTA grandes) */
.bp-btn-sweep { overflow: hidden; }
.bp-btn-sweep::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0.18) 48%,
    transparent 65%);
  transform: translateX(-100%);
  transition: transform 700ms var(--bp-ease);
  pointer-events: none;
}
.bp-btn-sweep:hover::after { transform: translateX(100%); }

/* ─────────────────────────────────────────────────────────────
   Inputs (focus ring com blur, não só border-color)
   ───────────────────────────────────────────────────────────── */
.bp-input, .bp-textarea {
  width: 100%;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bp-line-strong);
  color: var(--bp-ink);
  font-family: var(--bp-sans); font-size: 14px;
  padding: 12px 14px;
  border-radius: var(--bp-r);
  outline: none;
  transition:
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}
.bp-input::placeholder, .bp-textarea::placeholder { color: var(--bp-ink-faint); }
.bp-input:focus, .bp-textarea:focus {
  border-color: var(--bp-blue);
  background: rgba(255,255,255,0.04);
  box-shadow: var(--bp-shadow-focus);
}
.bp-textarea { resize: vertical; min-height: 110px; line-height: 1.58; }

/* ─────────────────────────────────────────────────────────────
   Cards (galeria, KPIs)
   ───────────────────────────────────────────────────────────── */
.bp-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--bp-line);
  border-top-color: rgba(255,255,255,0.08);
  border-radius: var(--bp-r-lg);
  padding: var(--bp-pad-card);
  box-shadow: var(--bp-shadow-card);
  transition:
    transform var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease);
}
.bp-card:hover {
  transform: translateY(-2px);
  border-color: var(--bp-line-strong);
  border-top-color: rgba(255,255,255,0.14);
  box-shadow: var(--bp-shadow-card-hover);
  background: rgba(255,255,255,0.04);
}

/* .bp-card-interactive — utility pra qualquer elemento clicável que NÃO é .bp-card
   (ex: cards de admin, KPIs já têm style próprio mas faltava transition consistente).
   Adiciona lift + shadow + border highlight no hover, respeita reduced-motion. */
.bp-card-interactive {
  transition:
    transform var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease);
  cursor: pointer;
}
.bp-card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--bp-shadow-card-hover);
  border-color: var(--bp-line-strong);
  border-top-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}
@media (prefers-reduced-motion: reduce) {
  .bp-card:hover, .bp-card-interactive:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   Pills / chips
   ───────────────────────────────────────────────────────────── */
.bp-pill {
  font-family: var(--bp-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 10px; border-radius: var(--bp-r-sm);
  background: var(--bp-blue-glow);
  color: var(--bp-blue-hi);
  border: 1px solid var(--bp-blue-soft);
  display: inline-block;
}
.bp-eyebrow {
  font-family: var(--bp-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--bp-blue);
}
.bp-mono    { font-family: var(--bp-mono); }
.bp-display { font-family: var(--bp-poster); font-style: italic; }

/* ─────────────────────────────────────────────────────────────
   Animation keyframes (globais)
   ───────────────────────────────────────────────────────────── */
@keyframes bpFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bpRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bpHairline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes bpKenBurns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}
@keyframes bpPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.9); }
}
@keyframes bpSpin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────
   Scroll-reveal — observado por scroll-reveal.js
   Cards/sections marcadas com .bp-reveal entram com fade+rise
   só quando entram no viewport (IntersectionObserver).
   ───────────────────────────────────────────────────────────── */
.bp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 720ms var(--bp-ease),
    transform 720ms var(--bp-ease);
  will-change: opacity, transform;
}
.bp-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Delays compostos pra cards lado-a-lado entrarem em cascata */
.bp-reveal-delay-1 { transition-delay:  80ms; }
.bp-reveal-delay-2 { transition-delay: 160ms; }
.bp-reveal-delay-3 { transition-delay: 240ms; }
.bp-reveal-delay-4 { transition-delay: 320ms; }
.bp-reveal-delay-5 { transition-delay: 400ms; }
.bp-reveal-delay-6 { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bp-reveal { opacity: 1; transform: none; transition: none; }
}

/* Stagger entrance (galeria grid) */
@keyframes bpStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.bp-stagger > * {
  opacity: 0;
  animation: bpStaggerIn var(--bp-dur-slow) var(--bp-ease) forwards;
}
.bp-stagger > *:nth-child(1)  { animation-delay:   0ms; }
.bp-stagger > *:nth-child(2)  { animation-delay:  30ms; }
.bp-stagger > *:nth-child(3)  { animation-delay:  60ms; }
.bp-stagger > *:nth-child(4)  { animation-delay:  90ms; }
.bp-stagger > *:nth-child(5)  { animation-delay: 120ms; }
.bp-stagger > *:nth-child(6)  { animation-delay: 150ms; }
.bp-stagger > *:nth-child(7)  { animation-delay: 180ms; }
.bp-stagger > *:nth-child(8)  { animation-delay: 210ms; }
.bp-stagger > *:nth-child(9)  { animation-delay: 240ms; }
.bp-stagger > *:nth-child(10) { animation-delay: 270ms; }
.bp-stagger > *:nth-child(11) { animation-delay: 300ms; }
.bp-stagger > *:nth-child(12) { animation-delay: 330ms; }
/* > 12 sem delay (regra do brief) */