/* =========================================================
   PresenceUp · styles.css
   ========================================================= */

/* ---------- Fontes hospedadas no próprio site (não dependem do Google Fonts) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-300-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-300-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/archivo-narrow-500-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("assets/fonts/archivo-narrow-500-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/geist-300-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("assets/fonts/geist-300-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #050505;
  --ink-2: #0a0b0d;
  --ink-3: #111317;
  --ink-4: #181a1f;
  --paper: #f2f2ee;
  --paper-2: #c9cac5;
  --mute: #92979f;
  --mute-2: #5d626a;
  --line: rgba(242, 242, 238, .12);
  --line-2: rgba(242, 242, 238, .22);

  --blue: #0896e4;
  --navy: #002a6c;
  --green: #5ab22a;
  --green-2: #74cc41;

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --margin: clamp(20px, 4.4vw, 72px);
  --gutter: clamp(12px, 1.6vw, 28px);
  --hdr: 72px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
html.no-stretch { --f-display: "Archivo Narrow", "Roboto Condensed", "sans-serif-condensed", "AvenirNextCondensed-Bold", "Arial Narrow", Arial, sans-serif; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
[tabindex="-1"]:focus { outline: none; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
::selection { background: var(--green); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Lenis (rolagem suave) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200; padding: 10px 14px;
  background: var(--paper); color: var(--ink); transform: translateY(-160%);
  transition: transform .3s var(--ease-out);
}
.skip:focus { transform: none; }

.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
}
.kicker { display: block; }
.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 70%;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.004em;
}
.outline {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--paper);
}
.accent-g { color: var(--green); }
.ln { display: block; overflow: hidden; padding-block: .08em .12em; margin-block: -.08em -.12em; }
.ln > span { display: inline-block; }
.mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.mask > span { display: inline-block; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 26px;
  border-radius: 2px;
  font-family: var(--f-text); font-weight: 500; font-size: 15px; letter-spacing: .005em;
  isolation: isolate; overflow: hidden;
  transition: color .45s var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--paper); color: var(--ink); }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--green);
  transform: translateY(101%);
  transition: transform .55s var(--ease-out);
}
.btn--primary:hover::before, .btn--primary:focus-visible::before { transform: translateY(0); }
.btn--line { min-height: 40px; padding: 0 16px; font-size: 14px; color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2); gap: 10px; }
.btn--line svg { width: 15px; height: 15px; color: var(--green); }
.btn--line::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  transform: translateY(101%); transition: transform .5s var(--ease-out);
}
.btn--line:hover, .btn--line:focus-visible { color: var(--ink); }
.btn--line:hover::before, .btn--line:focus-visible::before { transform: none; }
.btn--xl { min-height: 64px; padding: 0 34px; font-size: 16px; }

.link-down {
  display: inline-flex; align-items: center; gap: 14px; min-height: 48px;
  font-size: 15px; color: var(--paper-2);
  transition: color .3s;
}
.link-down i { position: relative; width: 1px; height: 34px; background: var(--line-2); overflow: hidden; }
.link-down i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--green);
  transform: translateY(-100%); transition: transform .6s var(--ease-out);
}
.link-down:hover { color: var(--paper); }
.link-down:hover i::after, .link-down:focus-visible i::after { transform: translateY(0); }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--hdr);
  display: flex; align-items: center; gap: 28px;
  padding-inline: var(--margin);
  transition: background-color .5s, box-shadow .5s, transform .5s var(--ease-out);
}
.hdr.is-scrolled {
  background: rgba(5, 5, 5, .86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 var(--line);
}
.hdr__brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.hdr__brand img { width: 30px; height: 30px; }
.hdr__nav { display: flex; gap: 30px; }
.hdr__nav a { position: relative; font-size: 14px; color: var(--paper-2); padding-block: 6px; transition: color .3s; }
.hdr__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--green);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.hdr__nav a:hover, .hdr__nav a.is-current { color: var(--paper); }
.hdr__nav a:hover::after, .hdr__nav a.is-current::after { transform: scaleX(1); }
.hdr__burger { display: none; align-items: center; gap: 10px; min-height: 44px; padding-inline: 4px; font-size: 14px; }
.hdr__burger i { position: relative; width: 22px; height: 8px; }
.hdr__burger i::before, .hdr__burger i::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .5s var(--ease-out);
}
.hdr__burger i::before { top: 0; }
.hdr__burger i::after { bottom: 0; }
.hdr__burger[aria-expanded="true"] i::before { transform: translateY(3.25px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] i::after { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--hdr) + 28px) var(--margin) max(28px, env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-io);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 16px; overflow: hidden;
  padding-block: 6px; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-weight: 800; font-stretch: 70%; text-transform: uppercase;
  font-size: clamp(44px, 13vw, 76px); line-height: 1;
}
.menu__nav a small { font-family: var(--f-mono); font-size: 12px; color: var(--mute); font-weight: 400; letter-spacing: .06em; }
.menu__nav a span { display: inline-block; transform: translateY(105%); transition: transform .8s var(--ease-out); }
.menu.is-open .menu__nav a span { transform: none; }
.menu.is-open .menu__nav a:nth-child(1) span { transition-delay: .18s; }
.menu.is-open .menu__nav a:nth-child(2) span { transition-delay: .24s; }
.menu.is-open .menu__nav a:nth-child(3) span { transition-delay: .30s; }
.menu.is-open .menu__nav a:nth-child(4) span { transition-delay: .36s; }
.menu.is-open .menu__nav a:nth-child(5) span { transition-delay: .42s; }
.menu__foot { display: grid; gap: 14px; opacity: 0; transform: translateY(16px); transition: opacity .5s .45s, transform .7s .45s var(--ease-out); }
.menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu__foot .btn { width: 100%; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative; display: flex; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  padding-top: calc(var(--hdr) + 2.5vh);
  padding-bottom: clamp(28px, 5.5vh, 64px);
  background: var(--ink);
}
.hero__inner {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: auto 1fr auto; row-gap: 28px;
}
.hero__meta { grid-column: 1 / 5; grid-row: 1; display: flex; flex-direction: column; }
.hero__index { grid-column: 7 / 9; grid-row: 1; }
.hero__title {
  grid-column: 1 / -1; grid-row: 2; align-self: center;
  font-family: var(--f-display); font-weight: 800; font-stretch: 68%;
  text-transform: uppercase; line-height: .9; letter-spacing: -.004em;
  font-size: clamp(42px, 6.9vw, 136px);
}
.hero__title .ln--2 { padding-left: calc((100% + var(--gutter)) / 12 * 1); }
.hero__title em { font-style: normal; color: var(--green); }
.chosen-word__l i { display: inline-block; font-style: normal; }
.hero__copy { grid-column: 1 / 6; grid-row: 3; align-self: end; }
.lead { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; max-width: 32em; color: var(--paper); }
.hero__channels { margin-top: 18px; font-size: 14px; color: var(--mute); }
.hero__channels span { display: block; }
.hero__actions {
  grid-column: 7 / -1; grid-row: 3; align-self: end; justify-self: end;
  display: flex; align-items: center; gap: 12px 30px; flex-wrap: wrap; justify-content: flex-end;
}

.hero__struct { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__presence, .hero__up {
  position: absolute; font-family: var(--f-display); font-weight: 900; text-transform: uppercase;
  line-height: .74; white-space: nowrap; letter-spacing: -.02em;
}
.hero__presence {
  left: calc(var(--margin) - .05em); bottom: 11vh;
  font-stretch: 125%; font-size: 12.6vw;
  color: rgba(242, 242, 238, .038);
}
.hero__up {
  right: var(--margin); bottom: calc(11vh + 12.6vw * .74 - 4.2vw * .74);
  font-stretch: 125%; font-size: 4.2vw;
  color: transparent; -webkit-text-stroke: 1.2px rgba(90, 178, 42, .7);
}

.hero__clues { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.clue {
  position: absolute; padding: 14px 16px; border-radius: 6px;
  background: var(--ink-3); box-shadow: inset 0 0 0 1px rgba(242, 242, 238, .05);
  font-size: 12px; line-height: 1.4; color: var(--paper-2); opacity: .5;
}
.clue--search { top: calc(var(--hdr) + 5vh); right: -70px; width: 330px; }
.clue__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 999px; background: var(--ink-4); color: var(--paper); }
.clue__bar svg { width: 13px; height: 13px; color: var(--mute); }
.clue__res { display: grid; gap: 2px; padding: 12px 4px 2px; }
.clue__res b { color: var(--paper); font-weight: 500; font-size: 14px; }
.clue__res span { color: var(--mute); }
.clue--site { left: 23vw; top: -64px; width: 300px; padding: 0 0 16px; overflow: hidden; }
.clue__url { display: block; padding: 8px 16px; background: var(--ink-4); color: var(--mute); font-family: var(--f-mono); font-size: 10px; }
.clue--site p { padding: 16px 16px 12px 150px; font-family: var(--f-display); font-stretch: 75%; font-weight: 700; font-size: 16px; line-height: 1.05; text-transform: uppercase; color: var(--paper); }
.clue__btn { display: inline-block; margin-left: 150px; padding: 6px 10px; background: var(--green); color: var(--ink); border-radius: 2px; font-weight: 500; }
.clue--post { left: 43%; bottom: -120px; width: 190px; padding: 8px; }
.clue__img { aspect-ratio: 1; border-radius: 3px; background:
  linear-gradient(118deg, transparent 38%, rgba(242,242,238,.28) 44%, transparent 52%),
  radial-gradient(120% 90% at 70% 110%, #1b3f63 0%, #0b1726 55%, #07090c 100%); }
.clue--post span { display: block; padding: 8px 2px 0; color: var(--mute); }
.clue--msg { right: -110px; top: 57vh; width: 330px; padding-right: 120px; }
.clue__who { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 11px; margin-bottom: 6px; }
.clue__who svg { width: 13px; height: 13px; color: var(--green); }
.clue--msg p { color: var(--paper); }

/* Hero entrance (CSS only: content ends visible even without JS) */
@keyframes k-fade { from { opacity: 0; } }
@keyframes k-rise { from { transform: translateY(105%); } }
@keyframes k-up { from { transform: translateY(var(--up-from, calc(11vh + 9vw))); } }
@keyframes k-soft { from { opacity: 0; transform: translateY(18px); } }
@keyframes k-letter { from { transform: translateY(.62em); color: var(--paper); } }
@keyframes k-brand { from { clip-path: inset(0 0 100% 0); transform: translateY(35%); } to { clip-path: inset(0 0 0 0); } }
@keyframes k-clue { from { opacity: 0; } }

.hdr__brand img { animation: k-brand .8s .05s var(--ease-out) both; }
.hdr__brand span { animation: k-fade .8s .25s both; }
.hdr__nav, .hdr__cta, .hdr__burger { animation: k-fade .8s .9s both; }
.hero__presence { animation: k-fade 1.6s .05s ease-out both; }
.hero__up { animation: k-up 1.5s .2s var(--ease-out) both; }
.hero__title .ln > span { animation: k-rise 1.05s .55s var(--ease-out) both; }
.hero__title .ln--2 > span { animation-delay: .66s; }
.chosen-word__l i { animation: k-letter .9s var(--ease-out) both; animation-delay: calc(1.02s + var(--i, 0) * 42ms); }
.chosen-word__l i:nth-child(2) { --i: 1; } .chosen-word__l i:nth-child(3) { --i: 2; }
.chosen-word__l i:nth-child(4) { --i: 3; } .chosen-word__l i:nth-child(5) { --i: 4; }
.chosen-word__l i:nth-child(6) { --i: 5; } .chosen-word__l i:nth-child(7) { --i: 6; }
.chosen-word__l i:nth-child(8) { --i: 7; } .chosen-word__l i:nth-child(9) { --i: 8; }
.hero__meta, .hero__index { animation: k-fade 1s .9s both; }
.hero__copy { animation: k-soft 1s 1.05s var(--ease-out) both; }
.hero__actions { animation: k-soft 1s 1.18s var(--ease-out) both; }
.clue { animation: k-clue 1.4s 1.5s both; }
.clue--site { animation-delay: 1.65s; }
.clue--post { animation-delay: 1.8s; }
.clue--msg { animation-delay: 1.95s; }

/* =========================================================
   Sistema (experiência principal)
   Layout padrão = narrativa vertical (mobile / sem JS / movimento reduzido)
   .is-pinned   = cena fixa controlada por scroll (desktop)
   ========================================================= */
.sys { position: relative; background: var(--ink); padding-block: clamp(72px, 12vh, 140px) clamp(80px, 12vh, 140px); }
.sys__stage { position: relative; }
.sys__light { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: none; }
.sys__light i {
  position: absolute; left: 66%; top: 52%; width: 80vmax; height: 80vmax; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(8, 150, 228, .11), rgba(8, 150, 228, 0) 72%);
}
.sys__light-g { opacity: 0; background: radial-gradient(closest-side, rgba(90, 178, 42, .12), rgba(90, 178, 42, 0) 72%) !important; }

.sys__head { display: grid; gap: 14px; }
.sys__title { color: var(--paper-2); }
.sys__title span { color: var(--mute); }
.sys__progress { display: none; }
.sys__progress li { transition: color .5s; }
.sys__progress li span { color: var(--mute-2); margin-right: 6px; transition: color .5s; }
.sys__progress li.is-on { color: var(--paper); }
.sys__progress li.is-on span { color: var(--green); }
.sys__bar { display: none; position: relative; height: 1px; background: var(--line); }
.sys__bar i { position: absolute; inset: 0; background: var(--green); transform-origin: left; transform: scaleX(0); }

.moment { padding-inline: var(--margin); margin-top: clamp(64px, 12vh, 120px); margin-bottom: 28px; }
.moment__n { margin-bottom: 14px; }
.moment__t {
  font-family: var(--f-display); font-weight: 800; font-stretch: 68%; text-transform: uppercase;
  font-size: clamp(56px, 15.5vw, 150px); line-height: .88; letter-spacing: -.004em;
}
.m4 .moment__t { color: var(--green); }
.moment__p { margin-top: 18px; font-size: clamp(18px, 4.8vw, 22px); line-height: 1.4; max-width: 22em; color: var(--paper-2); }

.viz { position: relative; margin-inline: var(--margin); }

/* Busca */
.serp { --row: 108px; position: relative; border-radius: 8px; font-size: 13px; }
.serp__bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--ink-3); }
.serp__top, .serp__main { position: relative; z-index: 1; }
.serp__top { padding: 16px 16px 0; }
.serp__bar {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px;
  border-radius: 999px; background: var(--ink-4); color: var(--paper); font-size: 14.5px; white-space: nowrap; overflow: hidden;
}
.serp__bar svg { width: 15px; height: 15px; color: var(--mute); flex: none; }
.serp__caret { width: 1px; height: 17px; margin-left: -8px; background: var(--blue); opacity: 0; }
.serp__caret.is-on { opacity: 1; }
.serp__tabs { display: flex; gap: 20px; padding: 14px 8px 0; color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; box-shadow: inset 0 -1px 0 var(--line); }
.serp__tabs span { padding-bottom: 10px; }
.serp__tabs .is-on { color: var(--paper); box-shadow: inset 0 -2px 0 var(--paper); }
.serp__ctx { padding: 14px 8px 6px; color: var(--mute); font-size: 12px; }
.serp__ctx b { color: var(--paper); font-weight: 500; }
.serp__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 0 16px 16px; }
.serp__listwrap { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; }
.serp__slots li { height: var(--row); display: flex; align-items: center; font-size: 11px; color: var(--mute-2); }
.serp__list { position: relative; display: flex; flex-direction: column; }
.serp__list .res--hit { order: -1; }
.serp.is-animated .serp__list .res--hit { order: 0; }
.res {
  position: relative; height: var(--row); padding: 0 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  background: var(--ink-3); box-shadow: inset 0 1px 0 var(--line);
  color: var(--mute); font-size: 12.5px; line-height: 1.35; white-space: nowrap; overflow: hidden;
  transform-origin: 0 50%;
}
.res__blur { display: block; width: var(--w); height: 13px; margin-bottom: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(242, 242, 238, .17), rgba(242, 242, 238, .05)); }
.stars { color: #d9ab3f; font-weight: 400; font-size: 10.5px; letter-spacing: 1px; }
.res__line { overflow: hidden; text-overflow: ellipsis; }
.res__line--m { color: var(--mute-2); }
.res__line em { font-style: normal; color: var(--green); }
.res--hit { z-index: 2; background: var(--ink-4); box-shadow: none; border-radius: 4px; color: var(--paper-2); }
.res__rule { position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--green); transform-origin: 50% 100%; }
.res__name { font-size: 16px; font-weight: 500; color: var(--paper); }
.res__verified { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mute); }
.res__verified svg { width: 12px; height: 12px; color: var(--blue); }
.res__acts { display: flex; gap: 6px; margin-top: 5px; }
.res__acts span { padding: 2px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--blue); font-size: 11px; }
.serp__map { display: none; position: relative; overflow: hidden; border-radius: 4px; background: #0c1015; }
.serp__map svg { width: 100%; height: 100%; }
.serp__map path { fill: none; stroke: rgba(242, 242, 238, .07); stroke-width: 7; }
.serp__map .serp__river { stroke: rgba(8, 150, 228, .2); stroke-width: 4; }
.pin { position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; border-radius: 50% 50% 50% 0; background: rgba(242, 242, 238, .3); transform: translate(-50%, -100%) rotate(-45deg); }
.pin--hit { width: 15px; height: 15px; background: var(--green); }

/* Site */
.browser { position: relative; overflow: hidden; border-radius: 8px; background: #0f1114; box-shadow: inset 0 0 0 1px rgba(242, 242, 238, .07); }
.browser__bar { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: var(--ink-4); }
.browser__dots { display: flex; gap: 5px; }
.browser__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(242, 242, 238, .16); }
.browser__url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 260px; height: 22px; margin: 0 auto; border-radius: 999px; background: rgba(0, 0, 0, .35); font-family: var(--f-mono); font-size: 10.5px; color: var(--mute); transform: translateX(-24px); }
.browser__url svg { width: 10px; height: 10px; color: var(--green); }
.site { position: relative; display: grid; gap: 14px; padding: 12px 18px 18px; background: radial-gradient(90% 60% at 80% 0%, rgba(8, 150, 228, .07), rgba(8, 150, 228, 0) 70%), #0f1114; }
.site__wire { position: absolute; inset: 12px 18px 18px; pointer-events: none; opacity: 0; }
.site__wire .guide { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(8, 150, 228, .16); transform-origin: 50% 0; }
.site__wire .guide:nth-child(2) { left: 20%; }
.site__wire .guide:nth-child(3) { left: 40%; }
.site__wire .guide:nth-child(4) { left: 60%; }
.site__wire .guide:nth-child(5) { left: 80%; }
.site__wire .guide:nth-child(6) { left: 100%; }
.site__wire .blk { position: absolute; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(8, 150, 228, .55); transform-origin: 0 0; }
.blk--nav { left: 0; right: 0; top: 0; height: 28px; }
.blk--copy { left: 0; width: 45%; top: 42px; height: 57%; }
.blk--img { right: 0; width: 52%; top: 42px; height: 57%; }
.blk--b { left: 0; width: 32%; bottom: 0; height: 25%; }
.blk--c { left: 34%; width: 32%; bottom: 0; height: 25%; }
.blk--d { right: 0; width: 32%; bottom: 0; height: 25%; }
.site__nav { display: flex; align-items: center; gap: 18px; padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--line); font-size: 10.5px; color: var(--mute); }
.site__logo { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.site__logo i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); color: var(--ink); font-style: normal; font-family: var(--f-display); font-weight: 800; font-stretch: 75%; font-size: 9px; }
.site__logo b { font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: 12.5px; letter-spacing: .06em; color: var(--paper); }
.site__links { display: flex; gap: 16px; }
.site__navcta { padding: 5px 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--paper); }
.site__hero { display: grid; grid-template-columns: .92fr 1.08fr; gap: 16px; }
.site__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-block: 8px 2px; }
.site__kicker { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.site__h { margin-top: 10px; font-family: var(--f-display); font-weight: 800; font-stretch: 70%; text-transform: uppercase; font-size: clamp(24px, 6.8vw, 42px); line-height: .9; color: var(--paper); }
.site__h span, .site__kicker span, .site__sub span { display: block; }
.site__h-o { color: transparent; -webkit-text-stroke: 1px var(--paper); }
.site__sub { margin-top: 10px; max-width: 26em; font-size: 11.5px; line-height: 1.45; color: var(--mute); }
.site__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.site__cta { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 2px; background: var(--green); color: var(--ink); font-size: 11.5px; font-weight: 500; }
.site__cta svg { width: 12px; height: 12px; }
.site__cta2 { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 11.5px; color: var(--paper); }
.site__trust { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10.5px; color: var(--mute); }
.site__trust b { font-weight: 600; color: var(--paper); }
.site__img { position: relative; overflow: hidden; min-height: 150px; border-radius: 3px; transform-origin: 0 0; }
.site__img > span, .post > span { position: absolute; left: 8px; right: 8px; bottom: 7px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; color: rgba(242, 242, 238, .85); }
.site__img--a, .post--a { background: radial-gradient(80% 60% at 50% 42%, rgba(8, 150, 228, .26), rgba(8, 150, 228, 0) 72%), linear-gradient(180deg, #0c1622 0%, #070a0e 68%, #0d1116 100%); }
.ba { position: absolute; inset: 0; overflow: hidden; }
.ba__car, .ba__draw { position: absolute; left: 6%; width: 88%; top: 54%; transform: translateY(-50%); overflow: visible; }
.ba__after { --car-body: #1d4f7a; --car-shine: rgba(242, 242, 238, .72); }
.ba__before { --car-body: #2e3237; --car-shine: rgba(242, 242, 238, 0); --car-rim: #5b6168; --car-glass: #15181c; clip-path: inset(0 50% 0 0); }
.ba__draw { opacity: 0; }
.ba__draw path, .ba__draw circle { fill: none; stroke: var(--blue); stroke-width: 1.4; }
.ba__split { position: absolute; inset: 0; pointer-events: none; }
.ba__split b { position: absolute; left: 50%; top: 10%; bottom: 10%; width: 1px; background: rgba(242, 242, 238, .8); }
.ba__split b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px rgba(242, 242, 238, .16); transform: translate(-50%, -50%); }
.ba__tag { position: absolute; top: 9px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(242, 242, 238, .75); }
.ba__tag--l { left: 10px; }
.ba__tag--r { right: 10px; }
.site__img--b, .post--b { background: radial-gradient(70% 70% at 35% 40%, rgba(242, 242, 238, .1), rgba(242, 242, 238, 0) 70%), linear-gradient(135deg, #1b1e22, #0a0b0d); }
.site__wheel, .post__wheel { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); }
.site__wheel { height: 66%; width: auto; }
.post__wheel { width: 56%; }
.site__img--c, .post--c { background:
  linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55)),
  repeating-linear-gradient(45deg, rgba(0, 0, 0, 0) 0 12px, rgba(0, 0, 0, .35) 12px 13px),
  repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0 12px, rgba(0, 0, 0, .35) 12px 13px),
  radial-gradient(90% 90% at 40% 30%, #6a4a33 0%, #3a281b 55%, #1a120c 100%); }
.site__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.site__row .site__img { min-height: 86px; }
.site__proof { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 28px 12px 10px; border-radius: 3px; background: var(--ink-4); }
.site__proof i { position: absolute; top: 11px; left: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(90, 178, 42, .18); }
.site__proof b { font-family: var(--f-display); font-weight: 800; font-stretch: 75%; font-size: 16px; line-height: 1; text-transform: uppercase; }
.site__proof span { font-size: 10px; color: var(--mute); }

/* Instagram */
.viz--insta { display: flex; justify-content: center; }
.phone {
  position: relative; display: flex; flex-direction: column; gap: 0; overflow: hidden;
  width: min(300px, 80vw); aspect-ratio: .49; padding: 12px 10px 0;
  border-radius: 34px; background: #0f1114; box-shadow: inset 0 0 0 1px rgba(242, 242, 238, .1);
}
.phone__status { position: relative; z-index: 2; flex: none; display: flex; justify-content: space-between; align-items: center; margin: -12px -10px 0; padding: 14px 24px 9px; background-color: inherit; font-size: 11px; font-weight: 600; }
.ig__feed { display: flex; flex-direction: column; gap: 9px; will-change: transform; }
.phone__sys { display: flex; align-items: center; gap: 5px; }
.phone__sig { width: 14px; height: 9px; background: var(--paper); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.phone__bat { width: 19px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--paper-2); background: linear-gradient(var(--paper), var(--paper)) 2px 2px / 11px 5px no-repeat; }
.ig__top { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.ig__top b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.ig__topicons { display: flex; gap: 12px; }
.ig__topicons i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--paper); }
.ig__topicons i:last-child { border-radius: 0; box-shadow: none; background: linear-gradient(var(--paper), var(--paper)) 0 2px / 100% 1.5px no-repeat, linear-gradient(var(--paper), var(--paper)) 0 6px / 100% 1.5px no-repeat, linear-gradient(var(--paper), var(--paper)) 0 10px / 100% 1.5px no-repeat; }
.ig__head { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.ig__avatar { flex: none; width: 54px; height: 54px; padding: 2.5px; border-radius: 50%; background: conic-gradient(from 210deg, var(--blue), var(--green), var(--blue)); }
.ig__avatar i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2.5px #0f1114; font-style: normal; font-family: var(--f-display); font-weight: 800; font-stretch: 75%; font-size: 17px; }
.ig__who { display: grid; gap: 1px; min-width: 0; font-size: 11px; line-height: 1.3; color: var(--mute); }
.ig__who > b { font-size: 13px; font-weight: 600; color: var(--paper); }
.ig__who em { font-style: normal; color: var(--paper-2); }
.ig__who em b { font-weight: 600; color: var(--paper); }
.ig__bio { padding: 0 8px; font-size: 10.5px; line-height: 1.35; color: var(--paper-2); }
.ig__link { color: #5fb4ef; }
.ig__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 0 8px; }
.ig__btns span { display: grid; place-items: center; height: 24px; border-radius: 6px; background: var(--ink-4); font-size: 10.5px; font-weight: 600; }
.ig__btns .is-on { background: var(--blue); color: #fff; }
.ig__hl { display: flex; justify-content: space-between; padding: 0 6px; }
.ig__hl span { display: grid; justify-items: center; gap: 4px; width: 24%; font-size: 9px; line-height: 1.1; text-align: center; color: var(--mute); }
.ig__hl i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink-4); box-shadow: 0 0 0 1px var(--line-2); color: var(--paper-2); }
.ig__hl svg { width: 15px; height: 15px; }
.ig__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: -10px; box-shadow: inset 0 -1px 0 var(--line); }
.ig__tabs span { display: grid; place-items: center; height: 28px; color: var(--mute-2); }
.ig__tabs .is-on { color: var(--paper); box-shadow: inset 0 -1.5px 0 var(--paper); }
.ig__tabs svg { width: 14px; height: 14px; }
.ig__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: -7px -10px 0; }
.post { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.post__car { position: absolute; left: 4%; width: 92%; top: 54%; transform: translateY(-50%); overflow: visible; }
.post__car--flip { --car-body: #6e7680; transform: translateY(-50%) scaleX(-1); }
.post strong { position: absolute; left: 8px; right: 8px; top: 9px; font-family: var(--f-display); font-weight: 800; font-stretch: 70%; font-size: 12.5px; line-height: .95; text-transform: uppercase; }
.post em { position: absolute; left: 8px; bottom: 7px; font-style: normal; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; }
.post__icon { position: absolute; top: 6px; right: 6px; width: 11px; height: 11px; opacity: .85; }
.post--type { background: var(--paper); color: var(--ink); }
.post--type strong, .post--navy strong { right: 20px; }
.post--green { background: var(--green); color: var(--ink); }
.post--navy { background: var(--navy); color: var(--paper); }
.post--reel { background: linear-gradient(115deg, rgba(242, 242, 238, 0) 45%, rgba(242, 242, 238, .16) 52%, rgba(242, 242, 238, 0) 58%), linear-gradient(0deg, #0b0d10, #242a31); color: var(--paper); }
.post__play { position: absolute; left: 50%; top: 46%; width: 22px; height: 22px; color: rgba(242, 242, 238, .9); transform: translate(-50%, -50%); }
.post--split { background: linear-gradient(90deg, #1b1d20 50%, #0d1826 50%); }
.post__car--dull { --car-body: #34383d; --car-shine: rgba(242, 242, 238, 0); --car-rim: #5b6168; clip-path: inset(0 50% 0 0); }
.post__car--shine { clip-path: inset(0 0 0 50%); }
.post--split i { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(242, 242, 238, .7); }
.post--split > span { top: 7px; bottom: auto; right: auto; }
.post--split > span:last-of-type { left: auto; right: 8px; }
.post--e { background: radial-gradient(80% 60% at 50% 45%, rgba(242, 222, 190, .18), rgba(242, 222, 190, 0) 70%), linear-gradient(180deg, #16120e, #080706); }

/* Escolhido */
.chosen { display: grid; }
.chosen__nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.node { display: grid; gap: 2px; min-width: 0; padding: 10px; border-radius: 4px; background: var(--ink-3); font-size: 11px; color: var(--mute); }
.node b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--paper); }
.node__k { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--paper-2); }
.node__k::before { content: ""; width: 6px; height: 6px; background: var(--blue); }
.node--s .node__k::before { background: var(--paper); }
.node--i .node__k::before { background: var(--green); }
.chosen__lines { width: 100%; height: 64px; overflow: visible; }
.chosen__lines path { fill: none; stroke: rgba(242, 242, 238, .28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chat { display: grid; gap: 10px; }
.chat__notif { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1px 10px; padding: 12px 14px; border-radius: 10px; background: var(--ink-4); font-size: 12px; }
.chat__notif svg { grid-row: span 2; width: 24px; height: 24px; color: var(--green); }
.chat__notif b { font-weight: 500; }
.chat__notif span { font-size: 11px; color: var(--mute); }
.chat__notif p { grid-column: 2 / -1; color: var(--paper-2); }
.chat__win { overflow: hidden; border-radius: 10px; background: #0b0e11; }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ink-4); font-size: 13px; }
.chat__avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #2c3239, #14171b); }
.chat__head b { font-weight: 500; }
.chat__head span { margin-left: auto; font-size: 11px; color: var(--mute); }
.chat__body { display: grid; gap: 8px; padding: 16px 14px 18px; }
.bubble { position: relative; max-width: 86%; padding: 9px 12px 20px; border-radius: 8px; font-size: 14px; line-height: 1.4; }
.bubble time { position: absolute; right: 10px; bottom: 4px; font-size: 10px; color: rgba(242, 242, 238, .5); }
.bubble--in { justify-self: start; background: var(--ink-4); border-top-left-radius: 2px; }
.bubble--out { justify-self: end; background: #173a22; border-top-right-radius: 2px; }

.finale { padding: clamp(72px, 12vh, 120px) var(--margin) 0; }
.finale__a { font-family: var(--f-display); font-weight: 800; font-stretch: 68%; text-transform: uppercase; font-size: clamp(40px, 10.5vw, 104px); line-height: .9; }
.finale__b { margin-top: 16px; font-family: var(--f-display); font-weight: 700; font-stretch: 75%; text-transform: uppercase; font-size: clamp(26px, 6vw, 52px); line-height: .95; color: var(--green); }
.finale__btn { margin-top: 34px; }

/* ---------- Modo cena fixa (desktop) ---------- */
.sys.is-pinned {
  --vx: 41vw; --vw: calc(59vw - var(--margin));
  --vh: min(68vh, 640px); --vy: calc(50vh - var(--vh) / 2 + 10px);
  padding: 0;
}
.sys.is-pinned .sys__stage { height: 100vh; overflow: hidden; }
.sys.is-pinned .sys__light { display: block; }
.sys.is-pinned .sys__head {
  position: absolute; z-index: 5; inset: calc(var(--hdr) + 14px) auto 30px 0;
  display: flex; flex-direction: column; gap: 12px; pointer-events: none;
}
.sys.is-pinned .sys__title { margin-bottom: auto; }
.sys.is-pinned .sys__progress { display: flex; gap: 26px; }
.sys.is-pinned .sys__bar { display: block; width: min(560px, 34vw); }
.sys.is-pinned .moment { position: absolute; z-index: 4; left: var(--margin); top: 50%; width: 35vw; margin: 0; padding: 0; transform: translateY(-50%); }
.sys.is-pinned .moment__t { font-size: min(6.1vw, 12vh); }
.sys.is-pinned .moment__p { font-size: clamp(17px, 1.3vw, 22px); max-width: 20em; }
.sys.is-pinned .viz { position: absolute; z-index: 2; margin: 0; left: var(--vx); top: var(--vy); width: var(--vw); height: var(--vh); }
.sys.is-pinned .serp { --row: min(112px, calc((var(--vh) - 150px) / 4)); height: 100%; display: flex; flex-direction: column; }
.sys.is-pinned .serp__main { flex: 1; }
.sys.is-pinned .browser { height: 100%; display: flex; flex-direction: column; }
.sys.is-pinned .site { flex: 1; grid-template-rows: auto minmax(0, 1fr) 27%; }
.sys.is-pinned .site__img { min-height: 0; }
.sys.is-pinned .site__h { font-size: clamp(28px, 3vw, 52px); }
.sys.is-pinned .viz--insta { align-items: center; }
.sys.is-pinned .phone { height: 100%; width: auto; }
.sys.is-pinned .chosen { position: absolute; inset: 0; display: block; }
.sys.is-pinned .chosen__nodes { display: contents; }
.sys.is-pinned .node { position: absolute; left: 0; width: 34%; padding: 14px 16px; font-size: 12px; }
.sys.is-pinned .node b { font-size: 14px; }
.sys.is-pinned .node--g { top: 5%; }
.sys.is-pinned .node--s { bottom: 5%; }
.sys.is-pinned .node--i { display: none; }
.sys.is-pinned .chosen__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sys.is-pinned .chat { position: absolute; right: 0; top: 50%; width: 46%; transform: translateY(-50%); }
.sys.is-pinned .finale { position: absolute; z-index: 4; left: var(--margin); top: 50%; width: 38vw; padding: 0; transform: translateY(-50%); }
.sys.is-pinned .finale__a { font-size: min(4.6vw, 9vh); }
.sys.is-pinned .finale__b { font-size: min(2.5vw, 4.8vh); }
@media (min-width: 1200px) {
  .sys.is-pinned .serp__main { grid-template-columns: minmax(0, 1fr) 32%; }
  .sys.is-pinned .serp__map { display: block; }
}
@media (max-height: 820px) {
  .sys.is-pinned .res__acts { display: none; }
}

/* ---------- Manifesto ---------- */
.manifesto { padding-block: clamp(140px, 30vh, 320px) clamp(120px, 24vh, 260px); }
.manifesto__text { grid-column: 1 / -1; font-size: clamp(40px, 7.3vw, 140px); line-height: .9; }
.mline { display: block; }
.m-l2 { padding-left: calc((100% + var(--gutter)) / 12 * 3); }
.m-l3 { margin-top: .32em; }
.m-l4, .m-l5 { padding-left: calc((100% + var(--gutter)) / 12 * 5); }
.manifesto__sub { grid-column: 7 / 12; margin-top: clamp(48px, 9vh, 104px); font-size: clamp(18px, 1.45vw, 24px); line-height: 1.45; color: var(--paper-2); max-width: 27em; }

/* ---------- Soluções ---------- */
.services { padding-block: clamp(100px, 16vh, 180px); }
.services__head { grid-column: 1 / -1; margin-bottom: clamp(48px, 9vh, 96px); }
.kicker { margin-bottom: 20px; }
.services__title, .cases__title { font-size: clamp(44px, 7vw, 132px); }
.services__list { grid-column: 1 / 8; box-shadow: inset 0 1px 0 var(--line); }
.services__visual { grid-column: 9 / -1; position: sticky; top: calc(var(--hdr) + 5vh); align-self: start; height: min(74vh, 640px); }
.svc { position: relative; padding: 34px 0 38px; box-shadow: inset 0 -1px 0 var(--line); }
.svc::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out);
}
.svc.is-active::after { transform: scaleX(1); }
.svc__toggle { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; width: 100%; text-align: left; cursor: default; }
.svc__n { align-self: start; padding-top: .9em; }
.svc__name {
  font-family: var(--f-display); font-weight: 800; font-stretch: 68%; text-transform: uppercase;
  font-size: clamp(40px, 5vw, 92px); line-height: .9;
  color: rgba(242, 242, 238, .46);
  transition: color .6s, transform .8s var(--ease-out);
}
.svc.is-active .svc__name { color: var(--paper); transform: translateY(-6px); }
.svc__explore { display: inline-flex; align-items: center; gap: 10px; align-self: center; }
.svc__explore i { width: 26px; height: 1px; background: var(--line-2); transition: width .7s var(--ease-out), background-color .5s; }
.svc.is-active .svc__explore { color: var(--paper-2); }
.svc.is-active .svc__explore i { width: 56px; background: var(--green); }
.svc__phrase { margin: 16px 0 0 76px; font-size: clamp(19px, 1.55vw, 26px); line-height: 1.3; max-width: 25em; }
.svc__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s var(--ease-out); }
.svc__body > div { overflow: hidden; min-height: 0; }
.svc__desc { margin: 12px 0 0 76px; max-width: 36em; font-size: 15.5px; color: var(--mute); }
.svc__link {
  display: inline-block; margin: 18px 0 2px 76px; padding-block: 6px; font-size: 14px;
  background: linear-gradient(var(--green), var(--green)) 0 100% / 100% 1px no-repeat;
  transition: color .3s, background-size .5s var(--ease-out);
}
.svc__link:hover { color: var(--green); }
.is-accordion .svc__toggle { cursor: pointer; }
.is-accordion .svc:not(.is-open) .svc__body { grid-template-rows: 0fr; }
.is-accordion .svc.is-open .svc__explore i { width: 44px; background: var(--green); }

.svis { position: absolute; inset: 0; display: flex; flex-direction: column; clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-io); }
.svis.is-active { z-index: 1; clip-path: inset(0 0 0 0); }
.svis img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: left top; border-radius: 4px; transform: scale(1.06); transition: transform 1.4s var(--ease-out); }
.svis.is-active img { transform: none; }
.svis__cap { margin-top: 12px; }
.svis__slot { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6%; border-radius: 4px; background: var(--ink-2); }
.svis__slot .browser { width: 100%; }
.svis__slot .site__h { font-size: 26px; }
.svis__slot .site__links { display: none; }
.svis__slot .site__logo b { white-space: nowrap; }
.svis__slot--phone { padding: 5% 0; }
.svis__slot--phone .phone { height: 100%; width: auto; }

/* ---------- Cases ---------- */
.cases { padding-top: clamp(100px, 16vh, 180px); }
.cases__head { row-gap: 0; margin-bottom: clamp(40px, 8vh, 96px); }
.cases__head .kicker { grid-column: 1 / -1; }
.cases__title { grid-column: 1 / 9; }
.cases__note { grid-column: 9 / -1; align-self: end; max-width: 26em; font-size: 15px; color: var(--mute); }
.case { position: relative; background: var(--ink); box-shadow: 0 -1px 0 var(--line); }
.case__inner { min-height: 100vh; min-height: 100svh; padding-block: calc(var(--hdr) + 4vh) 6vh; align-content: center; row-gap: 18px; transform-origin: 50% 0; }
.case__head { grid-column: 1 / 6; grid-row: 1; }
.case__n { margin-bottom: 18px; color: var(--green); }
.case__name { font-family: var(--f-display); font-weight: 700; font-stretch: 80%; text-transform: uppercase; font-size: clamp(28px, 2.8vw, 52px); line-height: .95; max-width: 13em; }
.case__meta { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 16px; }
.case__meta div { display: flex; gap: 8px; }
.case__meta dt { color: var(--mute-2); }
.case__meta dd { color: var(--paper-2); }
.case__result { grid-column: 1 / 6; grid-row: 2; margin-block: 1.5vh; font-size: clamp(88px, 12.5vw, 240px); line-height: .8; letter-spacing: -.01em; }
.case__story { grid-column: 1 / 6; grid-row: 3; box-shadow: inset 0 1px 0 var(--line); }
.case__story div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 13px 0; box-shadow: inset 0 -1px 0 var(--line); }
.case__story dt { padding-top: 3px; }
.case__story dd { font-size: 15px; line-height: 1.45; color: var(--paper-2); }
.case__shot { grid-column: 7 / -1; grid-row: 1 / 4; align-self: center; }
.case__frame { overflow: hidden; width: min(100%, 76vh); aspect-ratio: 1; margin-left: auto; border-radius: 4px; background: var(--ink-3); }
.case__frame img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.case__shot figcaption { margin-top: 12px; text-align: right; }
.case--flip .case__head, .case--flip .case__result, .case--flip .case__story { grid-column: 8 / -1; }
.case--flip .case__shot { grid-column: 1 / 7; }
.case--flip .case__frame { margin-left: 0; margin-right: auto; }
.case--flip .case__shot figcaption { text-align: left; }
.climb { display: flex; align-items: flex-start; gap: .12em; height: 1.1em; margin-top: 5vh; font-size: clamp(88px, 11.5vw, 220px); line-height: .8; }
.climb__from { align-self: flex-end; font-size: .5em; -webkit-text-stroke-color: var(--mute); }
.climb__to { color: var(--green); }

/* Case de site e Instagram */
.case__result--words { font-size: clamp(56px, 6.6vw, 124px); line-height: .86; }
.case__result--words span { display: block; }
.case__links { grid-column: 1 / 6; grid-row: 4; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.case--flip .case__links { grid-column: 8 / -1; }
.case__links a {
  padding-block: 8px; font-size: 14px;
  background: linear-gradient(var(--green), var(--green)) 0 calc(100% - 4px) / 100% 1px no-repeat;
  transition: color .3s;
}
.case__links a:hover { color: var(--green-2); }
.case--system .case__shot { grid-row: 1 / 5; }
.duo { position: relative; padding-bottom: 27%; }
.duo__site, .duo__insta { overflow: hidden; border-radius: 4px; background: var(--ink-3); }
.duo__site { width: 84%; aspect-ratio: 16 / 10; }
.duo__insta { position: absolute; right: 0; top: 24%; width: 37%; aspect-ratio: 700 / 937; box-shadow: 0 0 0 10px var(--ink); }
.duo__site img, .duo__insta img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.case__duo figcaption { margin-top: 12px; }

/* ---------- Buscas reais reconstruídas (Google, modo escuro) ---------- */
.gserp {
  --g-bg: #1f1f1f; --g-surface: #303134; --g-text: #e8eaed; --g-sub: #bdc1c6; --g-mute: #9aa0a6;
  --g-link: #8ab4f8; --g-green: #81c995; --g-red: #f28b82; --g-line: #3c4043;
  padding: 18px 20px 16px; border-radius: 6px; background: var(--g-bg); color: var(--g-sub);
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13px; line-height: 1.45; text-align: left;
}
.gserp__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--g-surface); color: var(--g-text); font-size: 15px; }
.gserp__bar svg { width: 16px; height: 16px; flex: none; color: var(--g-mute); }
.gserp__bar span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gserp__x { position: relative; flex: none; width: 13px; height: 13px; }
.gserp__x::before, .gserp__x::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 100%; background: var(--g-mute); }
.gserp__x::before { transform: rotate(45deg); }
.gserp__x::after { transform: rotate(-45deg); }
.gserp__tabs { display: flex; gap: 22px; margin-top: 12px; padding: 0 6px; overflow: hidden; white-space: nowrap; font-size: 13px; color: var(--g-mute); box-shadow: inset 0 -1px 0 var(--g-line); }
.gserp__tabs span { padding-bottom: 10px; }
.gserp__tabs .is-on { color: var(--g-text); box-shadow: inset 0 -3px 0 var(--g-text); }
.gserp__chips { display: flex; gap: 8px; margin-top: 12px; }
.gserp__chips span { padding: 6px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--g-line); font-size: 12.5px; color: var(--g-sub); }
.gserp__ctx { margin-top: 16px; font-size: 12.5px; color: var(--g-mute); }
.gserp__ctx b { color: var(--g-text); }
.gserp__ctx span { color: var(--g-link); }
.gserp__h { margin-top: 10px; font-size: 22px; line-height: 1.2; color: var(--g-text); }
.gserp__body { display: grid; grid-template-columns: minmax(0, 1fr) 33%; gap: 16px; margin-top: 8px; }
.gserp__list { display: grid; align-content: start; }
.gres { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; padding: 12px 8px 12px 0; box-shadow: inset 0 -1px 0 var(--g-line); }
.gres__pos { padding-top: 3px; font-family: var(--f-mono); font-size: 10px; color: var(--g-mute); text-align: center; }
.gres--client { background: linear-gradient(90deg, rgba(90, 178, 42, .12), rgba(90, 178, 42, 0) 70%); box-shadow: inset 2px 0 0 var(--green), inset 0 -1px 0 var(--g-line); }
.gres--client .gres__pos { color: var(--green); }
.gres__info { display: grid; gap: 1px; min-width: 0; }
.gres__info > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gres__name { font-size: 16px; color: var(--g-text); }
.gres__ver { display: flex; align-items: center; gap: 6px; }
.gres__ver svg { width: 13px; height: 13px; flex: none; color: var(--g-link); }
.gres .stars { font-weight: 400; font-size: 11.5px; letter-spacing: .5px; color: #fbbc04; }
.gres .stars .half { font-style: normal; background: linear-gradient(90deg, #fbbc04 50%, #5f6368 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gres .stars .off { font-style: normal; color: #5f6368; }
.gres em { font-style: normal; color: var(--g-green); }
.gres em.closed { color: var(--g-red); }
.gres q { display: flex; gap: 6px; margin-top: 3px; quotes: none; color: var(--g-sub); }
.gres q::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: #7aa7e8; }
.gres__blur { display: block; width: var(--w); height: 15px; margin: 2px 0 5px; border-radius: 999px; background: linear-gradient(90deg, rgba(232, 234, 237, .3), rgba(232, 234, 237, .12)); filter: blur(2.5px); }
.gres__redact { display: inline-block; width: 92px; height: 11px; vertical-align: middle; border-radius: 999px; background: rgba(232, 234, 237, .22); filter: blur(2px); }
.gres__acts { display: flex; gap: 12px; align-self: start; padding-top: 2px; }
.gres__act { display: grid; justify-items: center; gap: 4px; font-size: 12px; color: var(--g-link); }
.gres__act i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--g-line); }
.gres__act svg { width: 16px; height: 16px; }
.gserp__map { position: relative; overflow: hidden; min-height: 240px; border-radius: 8px; background: #eef0f1; }
.gserp__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gpin { position: absolute; left: var(--x); top: var(--y); width: 15px; height: 15px; border-radius: 50% 50% 50% 0; background: #ea4335; transform: translate(-50%, -100%) rotate(-45deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.gpin::after { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: #fff; }
.gpin--client { box-shadow: 0 0 0 5px rgba(90, 178, 42, .45), 0 1px 2px rgba(0, 0, 0, .35); }
.gpin__label { position: absolute; left: calc(var(--x) + 10px); top: calc(var(--y) - 20px); font-size: 11px; font-weight: 700; white-space: nowrap; color: #202124; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.gres em.soon { color: #fdd663; }
.gres q b { font-weight: 700; color: var(--g-text); }

.gserp__more { width: min(60%, 320px); margin: 12px auto 0; padding: 9px; border-radius: 999px; background: var(--g-surface); text-align: center; font-size: 13px; color: var(--g-text); }
.case__frame--html { width: 100%; aspect-ratio: auto; overflow: visible; background: none; }
.svis__slot--g { align-items: stretch; padding: 0; background: none; }
.svis__slot--g .gserp { width: 100%; overflow: hidden; }
.svis__slot--g .gserp__body { grid-template-columns: 1fr; }
.svis__slot--g .gserp__map { display: none; }
@media (max-width: 767.98px) {
  .gserp { padding: 14px 12px 12px; font-size: 12px; }
  .gserp__bar { height: 40px; font-size: 14px; }
  .gserp__tabs span:nth-child(n+5) { display: none; }
  .gserp__body { grid-template-columns: 1fr; }
  .gserp__map { display: none; }
  .gres__acts { display: none; }
  .gres__name { font-size: 15px; }
}

/* ---------- Depoimentos ---------- */
.voices { padding-block: clamp(120px, 22vh, 240px); }
.voices__title { grid-column: 1 / -1; margin-bottom: clamp(32px, 6vh, 64px); }
.voices__stage { grid-column: 1 / 11; display: grid; gap: 72px; }
.voice blockquote p { font-family: var(--f-display); font-weight: 600; font-stretch: 78%; font-size: clamp(34px, 4.8vw, 90px); line-height: 1.02; letter-spacing: -.012em; }
.voice figcaption { margin-top: 28px; }
.voice figcaption b { color: var(--paper); font-weight: 500; }
.voices__stage.is-slider { gap: 0; }
.is-slider .voice { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(48px); transition: opacity .5s, transform .9s var(--ease-out), visibility 0s .9s; }
.is-slider .voice.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .8s .25s, transform 1.1s .25s var(--ease-out), visibility 0s; }
.is-slider .voice.is-leaving { transform: translateY(-48px); }
.voices__ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; margin-top: 56px; }
.voices__btn { min-height: 44px; font-size: 14px; color: var(--paper-2); background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: color .3s, background-size .5s var(--ease-out); }
.voices__btn:hover { color: var(--paper); background-size: 100% 1px; }
.voices__count b { color: var(--paper); font-weight: 500; }

/* ---------- Método ---------- */
.method { padding-block: clamp(100px, 16vh, 180px); }
.method__head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--hdr) + 6vh); }
.method__title, .faq__title { font-size: clamp(44px, 6vw, 116px); }
.method__lead { margin-top: 28px; max-width: 19em; font-size: clamp(18px, 1.4vw, 22px); color: var(--paper-2); }
.steps { grid-column: 7 / -1; position: relative; box-shadow: inset 0 1px 0 var(--line); }
.steps::before, .steps::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.steps::after { background: var(--green); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.step { display: grid; grid-template-columns: minmax(96px, 32%) minmax(0, 1fr); column-gap: 24px; padding: 42px 0 46px 32px; box-shadow: inset 0 -1px 0 var(--line); }
.step__n { grid-row: 1 / 3; font-size: clamp(72px, 7.6vw, 144px); line-height: .8; color: transparent; -webkit-text-stroke: 1.2px var(--mute-2); transform: translateY(16px); transition: color .8s, -webkit-text-stroke-color .8s, transform 1s var(--ease-out); }
.step.is-on .step__n { color: var(--paper); -webkit-text-stroke-color: transparent; transform: none; }
.step__t { font-family: var(--f-display); font-weight: 700; font-stretch: 80%; text-transform: uppercase; font-size: clamp(24px, 2.1vw, 36px); line-height: 1; }
.step p { margin-top: 10px; max-width: 26em; color: var(--paper-2); }
.method__note { grid-column: 7 / -1; display: grid; gap: 14px; margin-top: 40px; padding-left: 32px; font-size: 17px; }
.method__note a { justify-self: start; padding-block: 4px; color: var(--green); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* ---------- Sobre ---------- */
.about { padding-block: clamp(120px, 20vh, 220px); }
.about__title { grid-column: 1 / 8; font-size: clamp(48px, 8vw, 156px); }
.about__text { grid-column: 8 / -1; grid-row: 2; align-self: end; display: grid; gap: 20px; font-size: clamp(17px, 1.3vw, 20px); color: var(--paper-2); }
.about__people { grid-column: 1 / 7; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin-top: clamp(56px, 9vh, 104px); }
.person--low { margin-top: clamp(48px, 12vh, 140px); }
.person__img { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 3px; background: var(--ink-3); }
.person__img img { width: 100%; height: 100%; object-fit: cover; transition: filter .9s var(--ease-out), transform 1.2s var(--ease-out); }
.person figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--line); }
.person figcaption b { font-weight: 500; font-size: 17px; }
@media (hover: hover) and (min-width: 1024px) {
  .person__img img { filter: grayscale(1) contrast(1.04); }
  .person:hover .person__img img { filter: none; transform: scale(1.02); }
}
.about__strong { color: var(--paper); }
.about__facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(64px, 11vh, 120px); box-shadow: inset 0 1px 0 var(--line); }
.about__facts div { padding-top: 18px; }
.about__facts dd { margin-top: 8px; font-size: 17px; }

/* ---------- FAQ ---------- */
.faq { padding-block: clamp(100px, 16vh, 180px); }
.faq__head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--hdr) + 6vh); }
.faq__list { grid-column: 6 / -1; box-shadow: inset 0 1px 0 var(--line); }
.qa { box-shadow: inset 0 -1px 0 var(--line); }
.qa summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 26px 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa h3 { font-size: clamp(18px, 1.55vw, 24px); font-weight: 500; line-height: 1.3; transition: color .3s; }
.qa summary:hover h3 { color: var(--green-2); }
.qa__n { transition: color .3s; }
.qa[open] .qa__n { color: var(--green); }
.qa summary i { position: relative; width: 16px; height: 16px; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--paper); transition: transform .5s var(--ease-out), opacity .4s; }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0); opacity: 0; }
.qa__a { overflow: hidden; }
.qa__a p { padding: 0 36px 30px 64px; max-width: 44em; color: var(--paper-2); }

/* ---------- Encerramento ---------- */
.close { position: relative; height: 200vh; }
.close__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.close__inner { position: relative; z-index: 1; width: 100%; display: grid; gap: clamp(22px, 4.5vh, 48px); }
.close__q { max-width: 16em; font-size: clamp(30px, 4.4vw, 84px); line-height: .95; }
.close__a { display: flex; flex-wrap: wrap; gap: .1em .2em; font-size: clamp(80px, 14vw, 270px); line-height: .82; }
.close__a .mask { padding-block: .14em .1em; margin-block: -.14em -.1em; }
.close__cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.close__small { max-width: 24em; font-size: 14px; color: var(--mute); }
.close__glow {
  position: absolute; z-index: -1; left: 170px; top: 50%; width: 1000px; height: 1000px; max-width: none;
  border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(90, 178, 42, .17), rgba(8, 150, 228, .07) 50%, rgba(8, 150, 228, 0) 72%);
}

/* ---------- Rodapé ---------- */
.foot { padding-block: 64px calc(96px + env(safe-area-inset-bottom)); box-shadow: inset 0 1px 0 var(--line); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1fr; gap: 32px; align-items: start; }
.foot__brand { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; }
.foot__brand img { width: 40px; height: 40px; }
.foot__col { display: grid; gap: 4px; font-size: 14px; color: var(--paper-2); }
.foot__col a { padding-block: 5px; transition: color .3s; }
.foot__col a:hover { color: var(--green-2); }
address.foot__col { padding-top: 5px; line-height: 1.6; }
.foot__copy { grid-column: 1 / -1; margin-top: 32px; }

.wa-bar { display: none; }

/* ---------- Responsivo ---------- */
@media (min-width: 1024px) and (min-height: 720px) {
  .case { position: sticky; top: 0; }
}
@media (min-width: 1024px) {
  .foot { padding-bottom: 48px; }
}

@media (max-width: 1023.98px) {
  .chosen-word__l { white-space: nowrap; }
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-flex; }
  .hero__inner { grid-template-rows: auto 1fr auto auto; }
  .hero__index { display: none; }
  .hero__title { font-size: clamp(40px, 9vw, 92px); }
  .hero__title .ln--2 { padding-left: 0; }
  .hero__copy { grid-column: 1 / -1; }
  .hero__actions { grid-column: 1 / -1; grid-row: 4; justify-self: start; justify-content: flex-start; }
  .clue--site, .clue--post, .clue--msg { display: none; }
  .clue--search { right: -150px; }

  .manifesto__text { font-size: clamp(38px, 8.6vw, 90px); }
  .m-l2 { padding-left: calc((100% + var(--gutter)) / 12 * 2); }
  .m-l4, .m-l5 { padding-left: calc((100% + var(--gutter)) / 12 * 3); }
  .manifesto__sub { grid-column: 3 / -1; }

  .services__list { grid-column: 1 / -1; }
  .services__visual { display: none; }
  .svc__name { color: var(--paper); }
  .svc.is-active .svc__name { transform: none; }
  .services__list.is-init .svc__body { transition: none; }
  .svc::after { display: none; }

  .cases__title, .cases__note { grid-column: 1 / -1; }
  .cases__note { margin-top: 24px; }
  .case__inner { min-height: 0; padding-block: 72px; }
  .case__head, .case__result, .case__story, .case__shot,
  .case--flip .case__head, .case--flip .case__result, .case--flip .case__story, .case--flip .case__shot { grid-column: 1 / -1; grid-row: auto; }
  .case__shot, .case--system .case__shot { grid-row: 3; margin-bottom: 12px; }
  .case__story { grid-row: 4; }
  .case__links, .case--flip .case__links { grid-column: 1 / -1; grid-row: 5; }
  .about__people { grid-column: 1 / -1; grid-row: auto; margin-top: 48px; }
  .about__text { grid-row: auto; }
  .case__frame, .case--flip .case__frame { width: 100%; margin: 0; }
  .case__shot figcaption, .case--flip .case__shot figcaption { text-align: left; }

  .voices__stage { grid-column: 1 / -1; }
  .method__head, .faq__head { grid-column: 1 / -1; position: static; margin-bottom: 48px; }
  .steps, .method__note, .faq__list { grid-column: 1 / -1; }
  .about__title, .about__text { grid-column: 1 / -1; }
  .about__text { margin-top: 36px; }

  .close { height: auto; }
  .close__sticky { position: relative; height: auto; min-height: 100svh; padding-block: 120px; }

  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }

  .wa-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: calc(58px + env(safe-area-inset-bottom)); padding: 0 var(--margin) env(safe-area-inset-bottom);
    background: rgba(5, 5, 5, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 var(--line-2); font-size: 15px; font-weight: 500;
    transition: transform .6s var(--ease-out);
  }
  .wa-bar svg { width: 22px; height: 22px; color: var(--green); }
  .js .wa-bar { transform: translateY(110%); }
  .js .wa-bar.is-visible { transform: none; }
}

@media (max-width: 767.98px) {
  :root {
    --hdr: 64px;
    --f-display: "Archivo", "Arial Narrow", "Roboto Condensed", "sans-serif-condensed", "AvenirNextCondensed-Bold", "Helvetica Neue", Arial, sans-serif;
  }
  .hdr__cta { display: none; }
  .hero { padding-top: calc(var(--hdr) + 18px); }
  .hero__inner { row-gap: 24px; }
  .hero__title { align-self: end; font-size: clamp(36px, 11.4vw, 64px); line-height: .92; }
  .menu__nav a { font-size: clamp(34px, 11vw, 64px); }
  .menu__nav a span { white-space: nowrap; }
  .hero__meta { grid-column: 1 / -1; }
  .hero__presence { font-size: 24vw; font-stretch: 62%; top: calc(var(--hdr) + 11svh); bottom: auto; left: calc(var(--margin) - .04em); color: rgba(242, 242, 238, .05); }
  .hero__up { --up-from: 80svh; font-size: 9vw; font-stretch: 100%; top: calc(var(--hdr) + 11svh - 6vw); bottom: auto; }
  html.no-stretch .hero__presence { font-size: 18.5vw; }
  html.no-stretch .close__a { font-size: 20vw; }
  .person figcaption { flex-wrap: wrap; gap: 2px 10px; }
  .clue--search { display: none; }
  .hero__actions { width: 100%; gap: 6px; }
  .hero__actions .btn { width: 100%; }
  .lead { font-size: 17px; }

  .serp { --row: 100px; }
  .serp__top { padding: 12px 12px 0; }
  .serp__main { padding: 0 12px 12px; }
  .res { padding: 0 10px; font-size: 12px; }
  .res__acts { display: none; }
  .site { padding: 12px 12px 14px; }
  .site__links { display: none; }
  .site__hero { grid-template-columns: 1fr; }
  .site__img--a { min-height: 170px; }
  .site__row { grid-template-columns: 1fr 1fr; }
  .site__proof { grid-column: 1 / -1; min-height: 64px; }

  .manifesto { padding-block: 140px 120px; }
  .manifesto__text { font-size: clamp(34px, 10.4vw, 60px); }
  .m-l2 { padding-left: 14vw; }
  .m-l4, .m-l5 { padding-left: 22vw; }
  .manifesto__sub { grid-column: 1 / -1; }

  .svc { padding: 26px 0 28px; }
  .svc__toggle { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .svc__n { padding-top: .5em; }
  .svc__name { font-size: clamp(32px, 10vw, 54px); }
  .svc__explore { font-size: 0; gap: 0; }
  .svc__phrase, .svc__desc, .svc__link { margin-left: 46px; }
  .svc__phrase { font-size: 18px; }

  .case__result { font-size: 30vw; }
  .climb { font-size: 26vw; }
  .case__result--words { font-size: 13.5vw; }
  .case__story div { grid-template-columns: 1fr; gap: 4px; }

  .voice blockquote p { font-size: clamp(30px, 9vw, 48px); }
  .voices__ctrl { justify-content: space-between; }

  .step { grid-template-columns: 1fr; padding: 32px 0 36px 22px; }
  .step__n { grid-row: auto; font-size: 64px; margin-bottom: 16px; }
  .method__note { padding-left: 22px; }

  .about__title { font-size: clamp(44px, 14vw, 80px); }
  .about__facts { grid-template-columns: 1fr; }
  .about__facts div { padding-block: 18px; box-shadow: inset 0 -1px 0 var(--line); }

  .qa summary { grid-template-columns: 34px minmax(0, 1fr) 18px; padding: 22px 0; }
  .qa__a p { padding: 0 0 26px 46px; }

  .close__q { font-size: clamp(28px, 8.4vw, 44px); }
  .close__a { font-size: 24vw; }
  .close__cta .btn { width: 100%; padding: 0 18px; font-size: 15px; }
  .close__glow { left: 50%; width: 700px; height: 700px; }

  .foot__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Celular: sem os efeitos longos de scroll do desktop, o ritmo vertical fica mais compacto */
@media (max-width: 767.98px) {
  .sys { padding-block: 56px 72px; }
  .moment { margin-top: 56px; margin-bottom: 20px; }
  .moment__n { margin-bottom: 10px; }
  .moment__p { margin-top: 12px; }
  .finale { padding-top: 64px; }
  .finale__btn { margin-top: 24px; }
  .manifesto { padding-block: 72px 64px; }
  .manifesto__sub { margin-top: 28px; }
  .services { padding-block: 64px; }
  .services__head { margin-bottom: 28px; }
  .kicker { margin-bottom: 12px; }
  .svc { padding: 22px 0 24px; }
  .cases { padding-top: 64px; }
  .cases__head { margin-bottom: 8px; }
  .cases__note { margin-top: 16px; }
  .case__inner { padding-block: 44px; row-gap: 14px; }
  .case__result { margin-block: 4px; }
  .climb { margin-top: 8px; }
  .voices { padding-block: 64px; }
  .voices__title { margin-bottom: 24px; }
  .voices__ctrl { margin-top: 28px; }
  .method { padding-block: 64px; }
  .method__head { margin-bottom: 28px; }
  .method__lead { margin-top: 16px; }
  .step { padding: 24px 0 26px 22px; }
  .step__n { margin-bottom: 10px; font-size: 52px; }
  .method__note { margin-top: 28px; }
  .about { padding-block: 64px; }
  .about__people { margin-top: 28px; }
  .person--low { margin-top: 40px; }
  .about__text { margin-top: 28px; }
  .about__facts { margin-top: 36px; }
  .faq { padding-block: 64px; }
  .faq__head { margin-bottom: 20px; }
  .close__sticky { min-height: 0; padding-block: 88px 96px; }
  .close__inner { gap: 20px; }
  .foot { padding-block: 48px calc(88px + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .btn { padding: 0 16px; gap: 10px; font-size: 14px; }
  .btn svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .step__n { color: var(--paper); -webkit-text-stroke-color: transparent; transform: none; }
  .close { height: auto; }
  .close__sticky { position: relative; height: auto; min-height: 100vh; padding-block: 120px; }
}