/* Peças comuns a todas as páginas (home e projetos), por cima do base.css.
   Clima Maré: abertura escura, resto claro. Uma cor acesa: cobalto. Nimbus Sans nos títulos, Nimbus Sans Narrow nos rótulos.
   As cores e fontes daqui são o padrão; js/tema.js aplica no head. */
:root {
  --bg: #ecebe7; --bg-2: #e0dfda; --ink: #121212; --ink-2: #4e4d49; --ink-3: #8a8883;
  --line: rgba(18, 18, 18, .14); --glass: rgba(255, 255, 255, .55); --glass-line: rgba(18, 18, 18, .1);
  --accent: #1f58f2; --on-accent: #fff; --acc: #1f58f2;
  --sans: "Nimbus Sans", "Helvetica Neue", Arial, sans-serif; --mono: "Nimbus Sans Narrow", "Arial Narrow", sans-serif;
  --display: var(--sans); --dw: 400; --dw2: 400; --dw3: 400;
  --e: cubic-bezier(.2, .8, .1, 1);
  /* palco escuro da abertura */
  --s-ink: #dfe8f3; --s-mute: #6d7682;
  color-scheme: light;
}
html { scroll-behavior: auto; }
body { background: var(--bg); color: var(--ink); }

/* o que a versão antiga tinha de "cara de sistema" e esta não usa: varredura, coordenadas do cursor */
.scan, .boot, .ticker, .nav { display: none !important; }
.cursor__label { display: none; }
.sec-head__n { color: var(--accent); }

/* barra de menu: só texto, invertendo a cor sobre o que estiver embaixo (escuro na abertura, claro no resto) */
.c-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px var(--gutter); color: #fff; mix-blend-mode: difference; pointer-events: none; }
.c-nav a { pointer-events: auto; color: inherit; text-decoration: none; }
.c-nav__links { display: flex; gap: 22px; }
@media (max-width: 640px) { .c-nav__links a:not(:last-child) { display: none; } }

/* botões: letras que rolam (js/efeitos.js separa as letras) e enchem em dither no hover */
.btn, .c-roll { border-radius: 999px; padding: .95em 1.45em; border: 0; font-size: 12px; letter-spacing: .12em; background: var(--ink); color: var(--bg); }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--accent { background: var(--accent); color: #fff; }
.btn:hover, .btn--accent:hover { background: var(--ink); }
.btn--accent:hover { background: var(--accent); }
.rl { display: inline-block; overflow: hidden; height: 1.25em; line-height: 1.25em; vertical-align: top; }
.rl i { display: block; font-style: normal; transition: transform .55s var(--e) calc(var(--i) * 24ms); }
.btn:hover .rl i, .c-roll:hover .rl i, a:hover > .rl-host .rl i { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .rl i { transition: none; } }

/* dither que enche no hover (botões, promessas, etapas) */
.c-dfill { position: relative; isolation: isolate; }
.c-dfill > .c-btnd { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; image-rendering: pixelated; pointer-events: none; border-radius: inherit; }

/* títulos: onda de peso (js/efeitos.js). Antes de aparecer, as letras esperam invisíveis */
.wv { display: inline-block; white-space: nowrap; }
.wv i { font-style: normal; }
.wv-wait .wv i { opacity: 0; }

/* divisórias: linha preta fina */
.xp li, .lab__specs li, .cz__list li { border-bottom: 1px solid var(--ink); }
.lab__specs { border-top: 1px solid var(--ink); }