/* Base dos templates Vatse Motion. Troque as variáveis para aplicar a sua marca. */
@import url(../../demo/fonts/fonts.css);
:root {
  --bg: #0b0b0c; --surface: #131315; --ink: #ecebe7; --soft: #8e8a83; --line: #222224; --acc: #ef650f; --acc-ink: #140800;
  --sc-primary: var(--acc); --vm-accent: var(--acc);
  --f-head: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  --f-body: Inter, system-ui, sans-serif;
  --f-serif: 'Newsreader', Georgia, serif;
  --wrap: min(1240px, 100% - 40px);
  --r: 22px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--f-body); letter-spacing: -0.006em; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 650; letter-spacing: -0.042em; line-height: 1.02; margin: 0; text-wrap: balance; }
h3 { letter-spacing: -0.025em; font-weight: 600; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
em, .serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--acc); color: var(--acc-ink); }
.wrap { width: var(--wrap); margin-inline: auto; }
.rotulo { font: 600 12px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.suave { color: var(--soft); }
.botao { display: inline-flex; align-items: center; gap: .6em; padding: 15px 26px; border-radius: 999px; background: var(--acc); color: var(--acc-ink); font: 600 15px/1 var(--f-body); text-decoration: none; border: 0; cursor: pointer; transition: filter .2s; }
.botao:hover { filter: brightness(1.08); }
.botao.fantasma { background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.nav { position: fixed; inset: 0 0 auto; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.marca { font: 700 18px/1 var(--f-head); letter-spacing: -.03em; text-decoration: none; }
.marca b { color: var(--acc); }
.barra-progresso { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--acc); z-index: 101; }
section { position: relative; }
.secao { padding: clamp(90px, 14vw, 170px) 0; }
.titulo-secao { font-size: clamp(2.2rem, 5.4vw, 4.4rem); max-width: 16ch; }
.so-mobile { display: none; }
@media (max-width: 760px) { .nav .so-desktop { display: none; } .nav .so-mobile { display: block; } .nav:has(.so-mobile) > .botao { display: none; } }