/* fonts.css */
/* Display, Instrument Serif (self-hosted, latin subset) */
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/InstrumentSerif-Regular-lat.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/InstrumentSerif-Italic-lat.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* Interface, Inter: so Light e Medium (latin). Pesos vizinhos reusam o mesmo arquivo. */
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Light-lat.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Light-lat.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Light-lat.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Medium-lat.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Medium-lat.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter-Medium-lat.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* colors.css */
:root{
  /* ── Fundação · superfícies escuras (a assinatura Bright) ───────── */
  --navy-950:#0A1119;
  --navy-900:#0F1822;
  --navy-800:#141F2D;
  --navy-700:#1A2740;

  /* ── Acento · o sistema dourado ─────────────────────────────────── */
  --gold-500:#A08E5F;
  --gold-400:#C4B088;
  --gold-300:#D9C89B;
  --gold-soft:rgba(160,142,95,0.15);
  --gold-strong:rgba(160,142,95,0.32);

  /* ── Neutros ────────────────────────────────────────────────────── */
  --creme:#F4F1EA;

  /* ── Semântico · boardroom ──────────────────────────────────────── */
  --sucesso:#5A9E6F;
  --alerta:#E85A5A;
  --atencao:#D4A056;

  /* ── Aliases semânticos ─────────────────────────────────────────── */
  --bg-deep:var(--navy-900);
  --bg-deepest:var(--navy-950);
  --bg-slide:var(--navy-800);
  --surface-card:rgba(255,255,255,0.03);
  --surface-card-hover:rgba(255,255,255,0.05);
  --surface-inset:rgba(15,24,34,0.44);
  --surface-gold:var(--gold-soft);

  --texto-primario:var(--creme);
  --texto-secundario:rgba(244,241,234,0.72);
  --texto-mudo:rgba(244,241,234,0.48);
  --text-body:var(--texto-secundario);
  --text-heading:var(--texto-primario);
  --text-accent:var(--gold-400);
  --text-eyebrow:var(--gold-500);
  --text-on-gold:var(--navy-900);

  --borda-sutil:rgba(255,255,255,0.08);
  --borda-media:rgba(255,255,255,0.12);
  --borda-gold:rgba(160,142,95,0.30);
  --borda-gold-forte:rgba(160,142,95,0.44);

  /* Fundo de página institucional: dois halos dourados sobre a diagonal navy */
  --bg-boardroom:
    radial-gradient(ellipse at top right,rgba(160,142,95,0.06) 0%,transparent 50%),
    radial-gradient(ellipse at bottom left,rgba(160,142,95,0.04) 0%,transparent 60%),
    linear-gradient(135deg,var(--navy-800) 0%,var(--navy-900) 100%);
  --bg-slide-gradient:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-900) 100%);

  /* Malha de referência: o grid de 90px do sistema, visível a 2,6%. Textura, não ornamento. */
  --malha-grid:
    repeating-linear-gradient(90deg,rgba(255,255,255,0.026) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(0deg,rgba(255,255,255,0.026) 0 1px,transparent 1px 90px); /* @kind other */
}
/* typography.css */
:root{
  --font-serif-display:"Instrument Serif",Georgia,serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Escala tipográfica */
  --text-12:12px; --text-14:14px; --text-16:16px; --text-18:18px; --text-20:20px;
  --text-24:24px; --text-32:32px; --text-44:44px; --text-56:56px; --text-72:72px; --text-96:96px;

  /* Pesos */
  --peso-extralight:200; /* @kind other */
  --peso-light:300; /* @kind other */
  --peso-regular:400; /* @kind other */
  --peso-medium:500; /* @kind other */
  --peso-semibold:600; /* @kind other */
  --peso-bold:700; /* @kind other */

  /* Altura de linha */
  --lh-display:1.0; /* @kind other */
  --lh-titulo:1.1; /* @kind other */
  --lh-subtitulo:1.3; /* @kind other */
  --lh-corpo:1.55; /* @kind other */
  --lh-confortavel:1.65; /* @kind other */

  /* Tracking */
  --track-display:-0.025em; /* @kind other */
  --track-titulo:-0.015em; /* @kind other */
  --track-corpo:-0.005em; /* @kind other */
  --track-sobrancelha:0.28em; /* @kind other */
  --track-rotulo:0.24em; /* @kind other */

  /* Papéis */
  --type-hero:var(--font-serif-display);
  --type-titulo:var(--font-serif-display);
  --type-corpo:var(--font-sans);
  --type-dado:var(--font-mono);
}
/* spacing.css */
:root{
  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px;
  --space-32:32px; --space-48:48px; --space-64:64px; --space-96:96px; --space-128:128px;

  --grid-colunas:12; /* @kind other */
  --grid-calha:24px;
  --grid-max:1440px;
  --page-max:1400px;

  /* Padding institucional de página (proposta / diagnóstico) */
  --page-pad-y:4vh;
  --page-pad-x:6vw;
  --page-pad-bottom:14vh;

  --pad-card:32px;
  --pad-card-compacto:24px;
  --pad-botao:12px 24px;
}
/* shape.css */
:root{
  --raio-pequeno:4px;
  --raio-medio:8px;
  --raio-card:16px;
  --raio-hero:24px;
  --raio-pill:100px;   /* apenas para pills/badges e a barra de navegação */

  --borda-hairline:1px;
  --borda-assinatura:2px;  /* hairline dourada no topo do card elevado */
  --borda-citacao:3px;     /* barra esquerda da citação */

  /* Sem drop-shadow. A Bright separa planos por hairline e por superfície. */
  --sombra:none; /* @kind shadow */
}
/* motion.css */
:root{
  --ease-bright:cubic-bezier(0.22,1,0.36,1); /* @kind other */
  --dur-rapida:200ms; /* @kind other */
  --dur-media:400ms; /* @kind other */
  --dur-lenta:700ms; /* @kind other */
  --transicao-rapida:var(--dur-rapida) var(--ease-bright); /* @kind other */
  --transicao-media:var(--dur-media) var(--ease-bright); /* @kind other */
  --transicao-lenta:var(--dur-lenta) var(--ease-bright); /* @kind other */
  --lift-hover:translateY(-2px); /* @kind other */
  --lift-hover-forte:translateY(-3px); /* @kind other */
}
/* theme-claro.css */
/* ── Tema claro · superfície creme ────────────────────────────────────────
   A face editorial da Bright: usada em carrosséis sociais, one-pagers e peças
   impressas. Mesmos tokens de marca, superfície invertida. Aplique a classe
   .tema-claro num container (ou no <body>) e todos os aliases semânticos viram. */
.tema-claro{
  --bg-deep:var(--creme);
  --bg-deepest:#EDE9E0;
  --bg-slide:var(--creme);
  --bg-slide-gradient:linear-gradient(160deg,#F7F5EF 0%,var(--creme) 55%,#EFEBE2 100%);
  --bg-boardroom:var(--bg-slide-gradient);

  --surface-card:rgba(15,24,34,0.025);
  --surface-card-hover:rgba(15,24,34,0.045);
  --surface-inset:rgba(15,24,34,0.04);

  --texto-primario:var(--navy-900);
  --texto-secundario:rgba(15,24,34,0.72);
  --texto-mudo:rgba(15,24,34,0.45);
  --text-body:var(--texto-secundario);
  --text-heading:var(--texto-primario);
  --text-accent:var(--gold-500);
  --text-eyebrow:var(--gold-500);

  --borda-sutil:rgba(15,24,34,0.08);
  --borda-media:rgba(15,24,34,0.14);

  /* Malha de referência: o grid do sistema, visível a 3%, textura, não ornamento. */
  --malha-grid:
    repeating-linear-gradient(90deg,rgba(15,24,34,0.032) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(0deg,rgba(15,24,34,0.032) 0 1px,transparent 1px 90px); /* @kind other */

  background:var(--bg-slide-gradient);
  color:var(--texto-primario);
}
/* No tema claro o itálico de acento continua dourado, mas em gold-500 (não gold-400):
   o 400 é claro demais sobre creme. */
.tema-claro em,.tema-claro .accent{color:var(--gold-500)}
/* base.css */
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg-deep);color:var(--texto-primario);font-family:var(--font-sans);font-weight:var(--peso-light);letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--gold-400);text-decoration:none;transition:color var(--transicao-rapida)}
a:hover{color:var(--gold-300);text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--gold-soft);color:var(--creme)}
/* Instrument Serif ships at 400 only. Never let a heading, a <strong> or a <b> synthesise
   a bold weight from it, faux-bold destroys the display face. Use size or the gold italic
   for emphasis instead. */
.tema-claro em,em{font-synthesis-weight:none}
[style*="--font-serif-display"],h1,h2,h3,h4{font-synthesis-weight:none}
@keyframes brightPulse{0%,100%{box-shadow:0 0 0 0 rgba(160,142,95,0.35)}50%{box-shadow:0 0 0 8px rgba(160,142,95,0)}}
@keyframes brightFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* motion-bright.css */
:root{
  --motion-fast:220ms;
  --motion-medium:600ms;
  --motion-slow:900ms;
  --ease-premium:cubic-bezier(0.22,1,0.36,1);
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
}

/* dado vivo: pulso discreto, um por tela */
@keyframes brt-dado-vivo{0%,100%{opacity:0.55}50%{opacity:1}}
[data-pulso]{animation:brt-dado-vivo 3s var(--ease-standard) infinite}

/* partícula Bright: ponto de dado percorrendo um caminho */
@keyframes brt-particula-h{0%{transform:translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(var(--brt-dist,120px));opacity:0}}
@keyframes brt-glow-chegada{0%,100%{box-shadow:0 0 0 rgba(160,142,95,0)}45%{box-shadow:0 0 44px rgba(160,142,95,0.38)}}

/* setas: avanço de 4px no hover do link */
a span[aria-hidden="true"]:last-child,
button span[aria-hidden="true"]:last-child{display:inline-block;transition:transform var(--motion-fast) var(--ease-premium)}
a:hover span[aria-hidden="true"]:last-child,
button:hover span[aria-hidden="true"]:last-child{transform:translateX(4px)}

/* "+" de disclosure: 90 graus no hover, sublinhado crescendo da esquerda */
summary{cursor:pointer}
summary span[aria-hidden="true"]:last-child{display:inline-block;transition:transform 250ms var(--ease-premium)}
summary:hover span[aria-hidden="true"]:last-child{transform:rotate(90deg)}
summary > span:first-child{position:relative}
summary > span:first-child::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform 250ms var(--ease-premium)}
summary:hover > span:first-child::after{transform:scaleX(1)}

/* menu sobre superfície creme: hover nunca vira creme sobre creme */
header[data-menu][data-menu-tone="light"] [data-nav-link]:hover,
header[data-menu][data-menu-tone="light"] [data-nav-atual]:hover,
header[data-menu][data-menu-tone="light"] [data-nav-link]:focus-visible{color:#0F1822!important}
header[data-menu][data-menu-tone="light"] [data-nav-subitem]:hover [data-nav-sublabel],
header[data-menu][data-menu-tone="light"] [data-nav-subitem]:focus-visible [data-nav-sublabel]{color:#0F1822!important}
header[data-menu][data-menu-tone="light"] [data-nav-subitem]:hover{background:rgba(160,142,95,0.14)!important}
header[data-menu][data-menu-tone="light"] [data-menu-toggle]:hover{color:#0F1822!important}
header[data-menu][data-menu-tone="light"] [data-nav-subatual] [data-nav-sublabel]{color:#8D7C50!important}

/* barra de progressão de dado */
[data-trilha]{transition:width 800ms var(--ease-premium)}

/* sparkline desenhando */
[data-spark-path]{transition:stroke-dashoffset 1100ms var(--ease-premium)}

@media (prefers-reduced-motion:reduce){
  [data-pulso]{animation:none!important;opacity:0.8!important}
  [data-particula],[data-flux-dot]{display:none!important}
  [data-anel],[data-anel-ciclo],[data-termo]{animation:none!important}
  [data-trilha],[data-spark-path]{transition-duration:150ms!important}
  a span[aria-hidden="true"]:last-child,summary span[aria-hidden="true"]:last-child{transition-duration:150ms}
}

/* piso de legibilidade em telas pequenas: rótulos de diagrama, funil e organograma
   ficam abaixo de 10px no desktop por densidade. No celular sobem para 11px. */
@media (max-width:860px){
  body [data-metrica] > div:first-child{font-size:11px!important;letter-spacing:0.14em!important}
  [data-micro]{font-size:11px!important;letter-spacing:0.12em!important;line-height:1.4!important}
  [data-nav-subdesc][data-micro]{font-size:9.5px!important}
}