/* ════════════════════════════════════════════════════════════════
   style.css  —  Via Traço
   BASE GLOBAL: reset, variáveis :root, tipografia base, títulos caixa-alta, NAV, barra de progresso
   (Fatiado do antigo style.css, carregado na MESMA ORDEM em todas as
   páginas: style → viewer → menu → components → typography → overrides
   → [css da página] → responsive. Concatenação idêntica ao original.)
   ════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   Via Traço — Main Stylesheet
   assets/css/style.css
═══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TYPOGRAPHIC BASE ── */
html { scroll-behavior: smooth; }
body, input, button, select, textarea {
  font-family: "Noto Sans", sans-serif;
}

h1, h2, h3, h4,
.sec-h, .hero-title, .cta-band h2,
.cover-title, #coverTitle,
.lb-lbl, #lbLbl,
.ac-lead { font-family: "Noto Sans", sans-serif; }

/* ── TÍTULOS EM CAIXA ALTA ── */
h1, h2, h3, h4,
.sec-h, .cta-band h2,
.cover-title, #coverTitle,
.lb-lbl, #lbLbl,
.svc h3 { text-transform: uppercase; }

p, .ac-body, .lb-text, #lbText,
#tlText, #narrative, .hero-sub,
.mobile-menu-link, .nlinks a { font-family: "Noto Sans", sans-serif; }
:root {
  /* Via Traço warm palette */
  --bg: #ffffff;
  --bg2: #f7f7f7;
  --white: #f5f4f0;
  --ink:   #1c1b18;
  --ink2:  #4a4a49; /* parágrafos — antes #6b6860, escurecido p/ legibilidade */
  --ink3:  #4a4a49; /* textos pequenos — antes #a8a49f */
  --rule:  rgba(0,0,0,.1);
  --green: #2eb54e;

  /* Typography system */
  --font-title: "Noto Sans", sans-serif;
  --font-text:  "Noto Sans", sans-serif;
  --font-cond:  "Noto Sans", sans-serif;
  --font-sans:  "Noto Sans", sans-serif;

  /* Legacy aliases — keep so existing code doesn't break */
  --serif: var(--font-title);
  --cond:  var(--font-cond);
  --sans:  var(--font-sans);
}
html { scroll-behavior: auto; }
body { background: var(--bg); color: var(--ink); font-family: "Noto Sans", sans-serif; overflow-x: hidden; }

/* ═══ NAV ═══ */
nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 80px);
  max-width: 1440px;
  z-index: 1000;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px;
  /* default: transparent, links visible over hero */
  background: transparent;
  border: none;
  transition: background .3s ease, box-shadow .3s ease, opacity .3s ease;
}

/* Scrolling DOWN → fade out */
nav.nav-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Scrolling UP → white floating card fades in */
nav.nav-scrolled {
  opacity: 1;
  pointer-events: auto;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 32px rgba(0,0,0,.08);
  border-radius: 12px;
}

.nlogo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.nlogo-mark svg { height: 22px; }
.nlogo-txt { font-family: "Noto Sans", sans-serif; font-size: 14px; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

.nlinks { display: flex; gap: 32px; list-style: none; }
.nlinks a {
  font-family: "Noto Sans", sans-serif; font-size: 11px; font-weight: 300; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  position: relative; padding-bottom: 4px;
  transition: color .2s;
}
/* underline slide on hover / active */
.nlinks a::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1.5px; background: var(--green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.nlinks a:hover::after,
.nlinks a.active::after { transform: scaleX(1); }
.nlinks a:hover,
.nlinks a.active { color: var(--green); }

/* ═══ PROGRESS BAR ═══ */
/* Vertical progress bar — right edge with screen margin */
#prog {
  position: fixed;
  top: 0; right: 19px; bottom: 0; left: auto;
  z-index: 1000;
  width: 2px; height: 100%;
  background: transparent;
}
/* 72dpi screens: 14px margin */
@media screen and (resolution: 72dpi) {
  #prog { right: 14px; }
}
#pbar { width: 100%; height: 0%; background: var(--green); transition: height .08s linear; }