/* Base: reset, tipografia, layout, componentes compartilhados. Só lê tokens semânticos. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong, b { font-weight: 640; color: var(--ink); }

/* superfícies do navegador que também carregam o design */
::selection { background: var(--accent); color: var(--accent-ink); }
html { caret-color: var(--accent); scrollbar-color: var(--line-strong) var(--bg); scrollbar-width: thin; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.display {
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); line-height: var(--display-leading);
  font-style: var(--display-style); text-wrap: balance; color: var(--ink);
}

/* ---------- botões ---------- */
.btn {
  --h: 3.25rem;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  height: var(--h); padding: 0 1.6rem; border-radius: var(--radius-m);
  font-weight: 600; font-size: var(--t-base); letter-spacing: -.01em; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  transition: transform var(--d-fast) ease-out, background-color var(--d-base) ease, border-color var(--d-base) ease, box-shadow var(--d-slow) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 1.15em; height: 1.15em; transition: transform var(--d-base) var(--ease-out); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 1px oklch(1 0 0 / .08) inset, 0 8px 28px -8px var(--accent-glow); }
.btn-primary::after { /* brilho que atravessa no hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, oklch(1 0 0 / .38) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
.btn-sm { --h: 2.5rem; padding: 0 1.1rem; font-size: var(--t-sm); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); background: transparent; }
@media (hover: hover) {
  .btn-primary:hover { box-shadow: 0 0 0 1px oklch(1 0 0 / .12) inset, 0 14px 40px -8px var(--accent-glow); }
  .btn-primary:hover::after { transform: translateX(120%); }
  .btn:hover svg { transform: translateX(3px); }
  .btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); }
}
@media (pointer: coarse) { .btn-sm { --h: 2.75rem; } }

.microcopy { font-size: var(--t-sm); color: var(--ink-3); }

/* ---------- navegação ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color var(--d-slow) ease, border-color var(--d-slow) ease, backdrop-filter var(--d-slow) ease;
}
.nav.is-scrolled { background: var(--nav-bg); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.logo { display: inline-flex; align-items: center; gap: .65rem; }
.logo-mark { width: 1.75rem; height: 1.75rem; flex: none; }
.logo b { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: 1.15rem; }
.logo span:last-child { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .01em; }
@media (max-width: 30rem) { .logo span:last-child { display: none; } }

/* barra de progresso de leitura */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: calc(var(--z-nav) + 1); background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { transform: scaleX(0); animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

footer.stub { padding: var(--s-9) 0 var(--s-10); color: var(--ink-3); font-size: var(--t-sm); }

/* ---------- cabeçalhos de seção ---------- */
.h2 { font-size: var(--t-h2); }
.display em { font-style: var(--em-style); color: var(--em-color); }
.sec-head { text-align: center; }
.sec-head h2 { max-width: 20em; margin-inline: auto; }
.r { color: var(--danger); }
.hl { color: inherit; background: linear-gradient(var(--danger-soft), var(--danger-soft)) 0 90% / 100% .7em no-repeat; padding-inline: .1em; margin-inline: -.1em; }