/* =========================================================
   Sites Inteligentes — site oficial
   Base editorial (Fraunces · papel · musgo · terracota)
   + camada técnica (DM Mono · grid · WebGL)
   ========================================================= */

:root {
  --paper: #F3EEE6;
  --surface: #FBF8F3;
  --sand: #E9DFCF;
  --green: #1F3A32;
  --green-d: #19302A;
  --ink: #1C1C1A;
  --muted-c: #6F6A60;
  --accent: #E2572B;
  --accent-g: #F08A5D;

  /* tema vivo (animado pelo GSAP entre seções) */
  --bg: #F3EEE6;
  --fg: #1C1C1A;
  --muted: #6F6A60;
  --rule: rgba(28, 28, 26, .15);
  --em: #E2572B;
  --panel: rgba(28, 28, 26, .035);

  --m: 40px;          /* margem lateral */
  --g: 24px;          /* gutter */
  --header: 76px;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

[data-theme="green"] { --t-bg: #1F3A32; --t-fg: #F3EEE6; --t-muted: rgba(243, 238, 230, .64); --t-rule: rgba(243, 238, 230, .17); --t-em: #F08A5D; --t-panel: rgba(0, 0, 0, .14); }
[data-theme="paper"] { --t-bg: #F3EEE6; --t-fg: #1C1C1A; --t-muted: #6F6A60; --t-rule: rgba(28, 28, 26, .15); --t-em: #E2572B; --t-panel: rgba(28, 28, 26, .035); }
[data-theme="sand"]  { --t-bg: #E9DFCF; --t-fg: #1C1C1A; --t-muted: #625D54; --t-rule: rgba(28, 28, 26, .16); --t-em: #C9481F; --t-panel: rgba(28, 28, 26, .04); }

/* sem animação: cada seção pinta o próprio fundo */
html:not(.js-anim) [data-theme] {
  --bg: var(--t-bg); --fg: var(--t-fg); --muted: var(--t-muted); --rule: var(--t-rule); --em: var(--t-em); --panel: var(--t-panel);
  background: var(--bg); color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; 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 { margin: 0; padding: 0; }
ol, ul { list-style: none; }
em { font-style: italic; color: var(--em); font-weight: 400; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--em); outline-offset: 3px; border-radius: 4px; }

[hidden] { display: none !important; }
.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: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 8px; font-weight: 500; transition: top .3s var(--ease); }
.skip:focus { top: 16px; }

.wrap { width: 100%; padding-inline: var(--m); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }

.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 400; line-height: 1.4; }
.label { color: var(--muted); }
.dot { color: var(--accent); }

.h-display { font-family: var(--serif); font-weight: 450; font-size: clamp(52px, 8.6vw, 148px); line-height: .9; letter-spacing: -.035em; font-variation-settings: "opsz" 144; }
.h-xl { font-family: var(--serif); font-weight: 450; font-size: clamp(42px, 5.4vw, 92px); line-height: .96; letter-spacing: -.03em; font-variation-settings: "opsz" 144; text-wrap: balance; }

/* split helpers */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 56px; padding: 0 28px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: .005em;
  overflow: hidden; isolation: isolate; white-space: nowrap;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink); transform: translateY(101%); transition: transform .55s var(--ease); }
.btn:hover::before { transform: translateY(0); }
.btn .arr { display: inline-block; transition: transform .55s var(--ease); }
.btn:hover .arr { transform: translate(3px, -3px); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-paper { background: var(--paper); color: var(--green); }
.btn-paper::before { background: var(--accent); }
.btn-paper:hover { color: #fff; }
.btn-sm { height: 44px; padding: 0 20px; font-size: 14.5px; gap: 10px; }
.btn-block { width: 100%; justify-content: space-between; }
[data-magnetic] { will-change: transform; }

.link-line { position: relative; display: inline-flex; gap: 8px; align-items: center; font-weight: 500; padding: 4px 0; }
.link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--ease); }
.link-line:hover::after { transform: scaleX(0); }

.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3FB57A; position: relative; flex: none; }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #3FB57A; animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- loader ---------- */
.loader { display: none; }
.js-anim .loader {
  display: block; position: fixed; inset: 0; z-index: 120; background: var(--green); color: var(--paper); clip-path: inset(0% 0% 0% 0%);
}
.loader-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-family: var(--serif); font-weight: 500; font-size: clamp(120px, 18vw, 260px); line-height: 1; letter-spacing: -.04em; display: flex; overflow: hidden; padding: .04em .02em .14em; }
.lm-c { display: inline-block; transform: translateY(110%); }
.lm-dot { color: var(--accent); }
.loader-foot { position: absolute; left: var(--m); right: var(--m); bottom: 30px; display: flex; justify-content: space-between; color: rgba(243, 238, 230, .7); }
.loader-num { font-weight: 500; color: var(--paper); }
.loader-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.loader-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* ---------- grid técnico ---------- */
.grid-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.grid-cols { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.grid-cols i { border-inline: 1px solid var(--rule); opacity: .32; transition: opacity .5s var(--ease), background .5s var(--ease); }
html.show-grid .grid-cols i { opacity: 1; background: rgba(226, 87, 43, .06); }
html.show-grid .grid-overlay { z-index: 95; }
main, .footer { position: relative; z-index: 1; }

/* ---------- cursor ---------- */
.cursor { display: none; }
html.has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 110; pointer-events: none; }
.cursor-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); }
.cursor-ring { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid var(--fg); opacity: .5; display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease), opacity .45s var(--ease); }
.cursor-label { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .3s; white-space: nowrap; }
html.has-cursor .cursor.is-link .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; opacity: .9; }
html.has-cursor .cursor.is-label .cursor-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--accent); border-color: var(--accent); opacity: 1; }
html.has-cursor .cursor.is-label .cursor-label { opacity: 1; }
html.has-cursor .cursor.is-label .cursor-dot { opacity: 0; }
html.has-cursor .cursor.is-text .cursor-ring { width: 4px; height: 30px; margin: -15px 0 0 -2px; border-radius: 2px; background: var(--em); border-color: transparent; opacity: 1; }
html.has-cursor .cursor.is-text .cursor-dot { opacity: 0; }
html.has-cursor, html.has-cursor * { cursor: none !important; }

/* ---------- header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; color: var(--fg); transition: transform .7s var(--ease), background-color .4s; }
.header::after { content: ""; position: absolute; left: var(--m); right: var(--m); bottom: 0; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.header.is-scrolled { background: var(--bg); }
.header.is-scrolled::after { transform: scaleX(1); }
.header.is-hidden { transform: translateY(-100%); }
.header-in { height: var(--header); display: flex; align-items: center; gap: 28px; }
.wordmark { font-family: var(--serif); font-weight: 500; font-size: 23px; letter-spacing: -.02em; font-variation-settings: "opsz" 48; white-space: nowrap; }
.header-status { display: flex; align-items: center; gap: 10px; color: var(--muted); margin-left: 8px; }
.nav { display: flex; gap: 30px; margin-left: auto; font-size: 15px; font-weight: 500; }
.nav a { position: relative; padding: 6px 0; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule); position: relative; margin-left: auto; }
.menu-btn span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.menu-btn span:first-child { top: 19px; }
.menu-btn span:last-child { top: 26px; }
html.menu-open .menu-btn span:first-child { transform: translateY(3.5px) rotate(45deg); }
html.menu-open .menu-btn span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
html.menu-open .header { color: var(--paper); background: transparent; }
html.menu-open .header::after { transform: scaleX(0); }

.menu { position: fixed; inset: 0; z-index: 55; background: var(--green); color: var(--paper); padding-top: calc(var(--header) + 24px); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-in { display: flex; flex-direction: column; }
.menu-in a { display: flex; align-items: baseline; gap: 16px; font-family: var(--serif); font-size: 40px; letter-spacing: -.02em; line-height: 1.1; padding: 14px 0; border-bottom: 1px solid rgba(243, 238, 230, .16); }
.menu-in a .mono { color: rgba(243, 238, 230, .55); }
.menu-in .menu-cta { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--accent-g); border: 0; margin-top: 18px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding-top: var(--header); display: flex; overflow: hidden; }
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-mono-static { display: none; position: absolute; z-index: 0; right: 11%; top: 17%; width: 31vw; height: auto; }
html.no-gl .hero-mono-static, html:not(.js-anim) .hero-mono-static { display: block; }
html:not(.js-anim) .hero-gl { display: none; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); grid-template-rows: auto 1fr auto auto; min-height: calc(100svh - var(--header)); padding-bottom: 26px; pointer-events: none; }
.hero-in a, .hero-in button { pointer-events: auto; }
.hero-meta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); }
.hero-meta > span:first-child { grid-column: 1 / span 3; }
.hm-mid { grid-column: 4 / span 5; }
.hm-xy { grid-column: 10 / span 3; text-align: right; }
.hm-xy b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.hero-tele { grid-column: 1 / span 3; grid-row: 2; align-self: start; display: grid; gap: 4px; padding-top: 34px; color: var(--muted); }
.hero-tele b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
html:not(.js-anim) .hero-tele, html.no-gl .hero-tele { display: none; }
.hero-side { grid-column: 10 / span 3; grid-row: 3; align-self: end; padding-bottom: .4vw; }
.hero-lede { font-size: 18px; line-height: 1.45; max-width: 26ch; margin-bottom: 26px; text-wrap: balance; }
.hero-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero-title { grid-column: 1 / span 9; grid-row: 3; font-family: var(--serif); font-weight: 450; font-size: clamp(46px, 8vw, 160px); line-height: .9; letter-spacing: -.04em; font-variation-settings: "opsz" 144; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.hero-title .li { display: block; }
.hero-title em { font-weight: 400; }
.hero-foot { grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; gap: 18px; margin-top: 26px; color: var(--muted); }
.hf-line { flex: 1; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.hf-line i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; animation: hfline 2.6s var(--ease-io) infinite; }
@keyframes hfline { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* ---------- marquee ---------- */
.marquee { position: relative; z-index: 1; overflow: hidden; border-block: 1px solid var(--rule); padding: 26px 0 30px; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group { display: flex; align-items: center; gap: 40px; padding-right: 40px; flex: none; font-family: var(--serif); font-size: clamp(34px, 4.2vw, 64px); letter-spacing: -.025em; line-height: 1; white-space: nowrap; }
.marquee-group i { font-family: var(--mono); font-style: normal; font-size: 14px; color: var(--muted); letter-spacing: 0; }
html:not(.js-anim) .marquee-track { flex-wrap: wrap; width: auto; }
html:not(.js-anim) .marquee-group { flex-wrap: wrap; white-space: normal; padding-inline: var(--m); row-gap: 14px; }

/* ---------- manifesto ---------- */
.manifesto { padding: 12vh 0 6vh; }
.manifesto .label { grid-column: 1 / span 2; padding-top: 14px; }
.manifesto-text { grid-column: 3 / span 9; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.75vw, 60px); line-height: 1.1; letter-spacing: -.022em; font-variation-settings: "opsz" 96; text-wrap: pretty; }
.manifesto-text .mw { transition: none; }
.manifesto-side { grid-column: 3 / span 4; margin-top: 56px; color: var(--muted); display: grid; gap: 14px; justify-items: start; }
.manifesto-side .link-line { color: var(--fg); }

/* ---------- demo ---------- */
.demo { padding: 11vh 0 10vh; position: relative; }
.demo-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; }
.demo-head .label { grid-column: 1 / -1; }
.demo-head h2 { grid-column: 1 / span 8; }
.demo-intro { grid-column: 9 / span 4; align-self: end; color: var(--muted); font-size: 16px; max-width: 40ch; }
.demo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); margin-top: 72px; align-items: start; }

.console { grid-column: 1 / span 4; border: 1px solid var(--rule); border-radius: 14px; padding: 22px 22px 18px; background: var(--panel); position: relative; }
.console-top { display: flex; justify-content: space-between; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.console-state { display: inline-flex; align-items: center; gap: 8px; }
.console-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.console.is-running .console-state { color: var(--accent-g); }
.c-field { display: block; border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.c-label { display: block; color: var(--muted); margin-bottom: 10px; padding: 0; }
.c-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule); color: var(--fg); font-family: var(--serif); font-size: 30px; letter-spacing: -.02em; padding: 4px 0 12px; border-radius: 0; caret-color: var(--accent-g); transition: border-color .4s; }
.c-input::placeholder { color: var(--fg); opacity: .32; }
.c-input:focus { outline: none; border-bottom-color: var(--accent-g); }
.c-input:focus-visible { outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border: 1px solid var(--rule); border-radius: 999px; font-size: 14px; font-weight: 500; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s; }
.chip:hover span { border-color: var(--fg); }
.chip input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip input:focus-visible + span { outline: 2px solid var(--em); outline-offset: 3px; }
.c-go { margin-top: 2px; }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 24px; color: var(--muted); font-size: 10px; letter-spacing: .05em; }
.stages li { display: grid; gap: 8px; transition: color .4s; }
.stages i { height: 2px; background: var(--rule); position: relative; overflow: hidden; }
.stages i::after { content: ""; position: absolute; inset: 0; background: var(--accent-g); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.stages li.is-active { color: var(--fg); }
.stages li.is-active i::after, .stages li.is-done i::after { transform: scaleX(1); }
.stages li.is-done i::after { background: var(--fg); }
.log { margin-top: 18px; height: 150px; overflow: hidden; font-size: 11px; letter-spacing: .02em; text-transform: none; line-height: 1.75; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.log p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log b { font-weight: 400; color: var(--accent-g); margin-right: 8px; }
.log .ok { color: var(--fg); }
.log-empty { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

.stage { grid-column: 5 / span 8; position: relative; padding-right: 7%; padding-bottom: 56px; }
.browser { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--green-d); }
.browser-bar { height: 42px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.bdots { display: flex; gap: 6px; flex: none; }
.bdots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--rule); }
.burl { flex: 0 1 380px; margin: 0 auto; height: 26px; border-radius: 7px; background: rgba(0, 0, 0, .2); display: flex; align-items: center; justify-content: center; gap: 7px; text-transform: none; letter-spacing: .02em; font-size: 11.5px; color: var(--muted); padding: 0 10px; min-width: 0; }
.burl-text { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { width: 1px; height: 12px; background: var(--accent-g); animation: blink 1s steps(2) infinite; flex: none; }
.bmeta { color: var(--muted); flex: none; font-size: 10px; }
.viewport { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--green-d); background-image: linear-gradient(rgba(243, 238, 230, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 238, 230, .06) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }
.mini-host { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mini-host-d { width: 1280px; height: 800px; }
.mini-host-m { width: 390px; height: 844px; }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent-g); opacity: 0; z-index: 5; pointer-events: none; }
.scanline::after { content: "build"; position: absolute; right: 10px; top: -18px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-g); }
.phone { position: absolute; right: 0; bottom: 0; width: 22%; border-radius: 36px; padding: 7px; background: #10221D; border: 1px solid var(--rule); opacity: 0; transform: translateY(40px); }
.phone-in { position: relative; width: 100%; aspect-ratio: 390 / 844; border-radius: 29px; overflow: hidden; background: var(--green-d); }
.phone.is-on { opacity: 1; transform: none; }
.stage-done { margin-top: 26px; max-width: 76%; display: grid; grid-template-columns: auto 1fr; column-gap: 28px; row-gap: 14px; align-items: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s .8s; }
.stage-done.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.sd-time { color: var(--muted); grid-column: 1; }
.sd-time b { color: var(--accent-g); font-weight: 500; }
.sd-text { grid-column: 2; font-family: var(--serif); font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.sd-ctas { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ---------- mini-site da demo ---------- */
.ms { position: absolute; inset: 0; overflow: hidden; color: var(--ms-fg); font-family: 'DM Sans', sans-serif; }
.ms-bg { position: absolute; inset: 0; background: var(--ms-bg); clip-path: circle(0% at 30% 40%); transition: clip-path 1.1s var(--ease-io); }
.ms.is-color .ms-bg { clip-path: circle(150% at 30% 40%); }
.ms .t { position: relative; color: transparent; background: rgba(243, 238, 230, .13); outline: 1.5px dashed rgba(243, 238, 230, .55); outline-offset: -1px; border-radius: 4px; transition: color .6s var(--ease), background-color .7s var(--ease), outline-color .5s; }
.ms.is-color .t { background-color: var(--ms-sk); outline-color: transparent; }
.ms.is-type .t { color: inherit; background-color: transparent; }
.ms .ms-tag { position: absolute; z-index: 3; font-family: 'DM Mono', monospace; font-size: 17px; line-height: 1; padding: 5px 7px; border-radius: 4px; background: #F08A5D; color: #1F3A32; letter-spacing: .03em; white-space: nowrap; transition: opacity .4s; }
.ms.is-color .ms-tag { opacity: 0; }

.ms-head { position: absolute; left: 64px; right: 64px; top: 36px; display: flex; align-items: center; gap: 40px; z-index: 2; }
.ms-logo { font-family: var(--ms-hf); font-weight: var(--ms-hw); font-size: var(--ms-logo, 30px); letter-spacing: var(--ms-hls); text-transform: var(--ms-tt-logo, none); white-space: nowrap; max-width: 520px; overflow: hidden; text-overflow: ellipsis; }
.ms-nav { display: flex; gap: 30px; margin-left: auto; font-size: 16px; }
.ms-cta { font-size: 15px; font-weight: 600; padding: 12px 22px; border-radius: var(--ms-br); border: 1px solid currentColor; }
.ms.is-type .ms-cta { border-color: var(--ms-fg); }
.ms.is-wire .ms-cta, .ms.is-color .ms-cta { border-color: transparent; }
.ms.is-type .ms-cta { border-color: color-mix(in srgb, var(--ms-fg) 40%, transparent); }
.ms-hero { position: absolute; left: 64px; right: 64px; top: 128px; bottom: 132px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; z-index: 1; }
.ms-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px; }
.ms-eyebrow { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--ms-muted); }
.ms.is-type .ms-eyebrow { color: var(--ms-muted); }
.ms-h { font-family: var(--ms-hf); font-weight: var(--ms-hw); font-style: var(--ms-hs, normal); font-size: var(--ms-hsize, 74px); line-height: var(--ms-hlh, .98); letter-spacing: var(--ms-hls); text-transform: var(--ms-tt, none); }
.ms-h .w { padding-bottom: .12em; margin-bottom: -.12em; }
.ms-p { font-size: 19px; line-height: 1.5; max-width: 470px; color: var(--ms-muted); }
.ms.is-type .ms-p { color: var(--ms-muted); }
.ms-btns { position: relative; display: flex; align-items: center; gap: 28px; margin-top: 6px; }
.ms-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; padding: 17px 28px; border-radius: var(--ms-br); }
.ms.is-color .ms-btn { background-color: var(--ms-ac); }
.ms.is-type .ms-btn { color: var(--ms-btnfg); background-color: var(--ms-ac); }
.ms-btn svg { width: 18px; height: 18px; flex: none; opacity: 0; transition: opacity .5s; }
.ms.is-type .ms-btn svg { opacity: 1; }
.ms-link { font-size: 16px; font-weight: 500; }
.ms.is-type .ms-link { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ms-fig { position: relative; overflow: hidden; border-radius: var(--ms-ir); outline: 1.5px dashed rgba(243, 238, 230, .55); outline-offset: -1px; background: rgba(243, 238, 230, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' stroke='rgba(243,238,230,.25)' stroke-width='.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition: outline-color .5s, background-color .6s; }
.ms.is-color .ms-fig { outline-color: transparent; background: var(--ms-sk); }
.ms-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.25); transition: clip-path 1.2s var(--ease-io), transform 1.8s var(--ease); }
.ms.is-photo .ms-fig img { clip-path: inset(0 0 0 0); transform: scale(1); }
.ms-strip { position: absolute; left: 64px; right: 64px; bottom: 40px; height: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; z-index: 1; align-items: center; border-top: 1px solid transparent; transition: border-color .6s; }
.ms.is-type .ms-strip { border-top-color: color-mix(in srgb, var(--ms-fg) 18%, transparent); }
.ms-strip .t { justify-self: start; font-size: 17px; font-weight: 500; margin-top: 18px; }
.ms-strip .t::before { content: attr(data-n); font-family: 'DM Mono', monospace; font-size: 13px; margin-right: 12px; opacity: .55; }

/* reinício instantâneo entre montagens */
.ms.ms-reset, .ms.ms-reset * { transition: none !important; }

/* forma da imagem por segmento */
.ms[data-shape="arch"] .ms-fig { border-radius: 400px 400px 18px 18px; }
.ms[data-shape="full"] .ms-hero { right: 0; top: 0; bottom: 0; padding-top: 128px; padding-bottom: 132px; grid-template-columns: 1fr 1fr; }
.ms[data-shape="full"] .ms-fig { margin: -128px 0 -132px; }
.ms[data-shape="full"] .ms-strip { right: calc(50% + 32px); gap: 20px; }
.ms[data-shape="full"] .ms-strip .t { font-size: 15px; }
.ms[data-shape="tall"] .ms-hero { grid-template-columns: 1.25fr .75fr; }

/* versão celular */
.ms[data-v="m"] .ms-head { left: 24px; right: 24px; top: 26px; }
.ms[data-v="m"] .ms-logo { font-size: calc(var(--ms-logo, 30px) * .74); max-width: 290px; }
.ms[data-v="m"] .ms-nav, .ms[data-v="m"] .ms-cta, .ms[data-v="m"] .ms-strip, .ms[data-v="m"] .ms-link, .ms[data-v="m"] .ms-p { display: none; }
.ms[data-v="m"] .ms-burger { display: block; }
.ms-burger { display: none; margin-left: auto; width: 26px; height: 12px; border-block: 2px solid currentColor; }
.ms[data-v="m"] .ms-hero { left: 24px; right: 24px; top: 92px; bottom: 26px; display: flex; flex-direction: column; gap: 22px; padding: 0; }
.ms[data-v="m"] .ms-copy { gap: 16px; justify-content: flex-start; flex: none; }
.ms[data-v="m"] .ms-eyebrow { font-size: 11.5px; }
.ms[data-v="m"] .ms-h { font-size: var(--ms-hsize-m, 44px); }
.ms[data-v="m"] .ms-fig { flex: 1; margin: 0; }
.ms[data-v="m"][data-shape="full"] .ms-fig { margin: 0 -24px; border-radius: 0; }
.ms[data-v="m"] .ms-btns { width: 100%; margin: 4px 0 0; }
.ms[data-v="m"] .ms-btn { width: 100%; justify-content: center; font-size: 16px; padding: 18px; }
.ms[data-v="m"] .ms-tag { font-size: 12px; }

/* ---------- diferenciais ---------- */
.diff { padding: 11vh 0 9vh; }
.diff-head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header) + 40px); align-self: start; }
.diff-head .label { margin-bottom: 26px; }
.diff-list { grid-column: 6 / span 7; border-top: 1px solid var(--rule); counter-reset: d; }
.drow { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 24px; row-gap: 14px; padding: 38px 0 40px; border-bottom: 1px solid var(--rule); }
.drow-n { color: var(--muted); padding-top: 12px; grid-row: 1 / span 3; }
.drow-t { font-family: var(--serif); font-weight: 450; font-size: clamp(30px, 3vw, 46px); letter-spacing: -.025em; line-height: 1.02; font-variation-settings: "opsz" 96; transition: transform .7s var(--ease); }
.drow-p { color: var(--muted); max-width: 52ch; }
.drow-tag { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; color: var(--fg); font-size: 10.5px; }
.drow::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.drow:hover::before { transform: scaleX(1); }
.drow:hover .drow-t { transform: translateX(10px); }

/* ---------- método SMART ---------- */
.smart { position: relative; }
.smart-intro { padding-top: 11vh; row-gap: 26px; }
.smart-intro .label { grid-column: 1 / -1; }
.smart-intro h2 { grid-column: 1 / span 7; }
.smart-side { grid-column: 8 / span 5; align-self: end; display: grid; gap: 18px; }
.smart-turn { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.25vw, 36px); line-height: 1.12; letter-spacing: -.018em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.smart-lede { color: var(--muted); }
.smart-pin { padding: 8vh 0 9vh; }
.smart-stage { position: relative; }

/* letras gigantes (só no modo pinado do desktop) */
.smart-letters { display: none; }
.sl { display: flex; flex-direction: column; align-items: stretch; text-align: left; min-width: 0; }
.sl-ch { display: block; overflow: hidden; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: min(25vh, 16.5vw); line-height: .84; letter-spacing: -.04em; font-variation-settings: "opsz" 144; padding: 0 .1em .06em 0; margin-left: -.04em; }
.sl-ch i { display: block; font-style: italic; color: transparent; -webkit-text-stroke: 1.5px rgba(243, 238, 230, .3); transition: color .7s var(--ease), -webkit-text-stroke-color .7s var(--ease); }
.sl.is-done .sl-ch i { -webkit-text-stroke-color: rgba(243, 238, 230, .62); }
.sl.is-on .sl-ch i { color: var(--em); -webkit-text-stroke-color: rgba(240, 138, 93, 0); }
.sl:hover .sl-ch i { -webkit-text-stroke-color: rgba(243, 238, 230, .8); }
.sl.is-on:hover .sl-ch i { -webkit-text-stroke-color: rgba(240, 138, 93, 0); }
.sl-name { position: relative; display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); transition: color .5s var(--ease); white-space: nowrap; }
.sl-name::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--muted); transition: background .4s, border-color .4s; }
.sl-name::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--em); transform-origin: left; transform: scaleX(var(--p, 0)); }
.sl.is-on .sl-name { color: var(--fg); }
.sl.is-on .sl-name::before, .sl.is-done .sl-name::before { background: var(--em); border-color: var(--em); }
.sl:focus-visible { outline-offset: 6px; }

/* pilares (lista empilhada por padrão: celular e versão estática) */
.smart-list { display: grid; gap: 11vh; }
.spil { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; }
.spil-text { grid-column: 1 / span 5; display: grid; gap: 18px; justify-items: start; }
.spil-head { display: flex; align-items: flex-end; gap: 18px; }
.spil-L { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(120px, 13vw, 200px); line-height: .8; letter-spacing: -.04em; font-variation-settings: "opsz" 144; color: transparent; -webkit-text-stroke: 1.5px rgba(243, 238, 230, .4); transition: color .9s var(--ease), -webkit-text-stroke-color .9s var(--ease); padding-right: .08em; }
.spil.is-on .spil-L { color: var(--em); -webkit-text-stroke-color: rgba(240, 138, 93, 0); }
.spil-lbl { color: var(--em); padding-bottom: 8px; }
.spil-t { font-family: var(--serif); font-weight: 450; font-size: clamp(30px, 2.9vw, 46px); line-height: 1.04; letter-spacing: -.025em; font-variation-settings: "opsz" 96; text-wrap: balance; }
.spil-p { color: var(--muted); font-size: 17.5px; max-width: 40ch; }
.spil-tag { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; font-size: 10.5px; color: var(--fg); margin-top: 4px; }
.spil-vis { grid-column: 7 / span 6; position: relative; width: 100%; aspect-ratio: 1.2; container-type: size; display: grid; place-items: center; }
.vfit { --u: calc(min(100cqw, 120cqh, 620px) / 100); position: relative; width: min(100cqw, 120cqh, 620px); aspect-ratio: 1.2; color: var(--ink); font-family: var(--sans); }

/* desktop pinado */
.js-anim .smart.is-pinned .smart-pin { height: 100vh; padding: calc(var(--header) + 3vh) 0 5vh; }
.js-anim .smart.is-pinned .smart-stage { height: 100%; display: flex; flex-direction: column; }
.js-anim .smart.is-pinned .smart-letters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--g); flex: none; }
.js-anim .smart.is-pinned .smart-list { display: block; position: relative; flex: 1; min-height: 0; margin-top: 4.5vh; }
.js-anim .smart.is-pinned .spil { position: absolute; inset: 0; pointer-events: none; }
.js-anim .smart.is-pinned .spil.is-on { pointer-events: auto; }
.js-anim .smart.is-pinned .spil-head { display: none; }
.js-anim .smart.is-pinned .spil-vis { height: 100%; aspect-ratio: auto; }
.js-anim .smart.is-pinned .spil-text > * { opacity: 0; transform: translateY(28px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js-anim .smart.is-pinned .spil.is-on .spil-text > * { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js-anim .smart.is-pinned .spil.is-on .spil-text > :nth-child(3) { transition-delay: .08s; }
.js-anim .smart.is-pinned .spil.is-on .spil-text > :nth-child(4) { transition-delay: .16s; }
.js-anim .smart.is-pinned .spil.is-on .spil-text > :nth-child(5) { transition-delay: .24s; }
.js-anim .smart.is-pinned .vfit { opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.js-anim .smart.is-pinned .spil.is-on .vfit { opacity: 1; transform: none; transition: opacity .9s var(--ease) .05s, transform 1.2s var(--ease) .05s; }
/* celular: o pilar entra quando aparece */
.js-anim .smart:not(.is-pinned) .spil-text > *, .js-anim .smart:not(.is-pinned) .vfit { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js-anim .smart:not(.is-pinned) .spil.is-on .spil-text > *, .js-anim .smart:not(.is-pinned) .spil.is-on .vfit { opacity: 1; transform: none; }
.js-anim .smart:not(.is-pinned) .spil.is-on .vfit { transition-delay: .15s; }

/* visuais: base */
.v-tag { font-family: var(--mono); font-size: max(9px, calc(var(--u) * 2.1)); letter-spacing: .08em; text-transform: uppercase; color: #8A847A; line-height: 1; }
.vfit > div { position: absolute; inset: 0; }

/* S · mapa */
.v-map { border-radius: calc(var(--u) * 3); overflow: hidden; background-color: #F8F4EC; background-image: linear-gradient(#E9E1D3 1px, transparent 1px), linear-gradient(90deg, #E9E1D3 1px, transparent 1px); background-size: calc(var(--u) * 16) calc(var(--u) * 13); background-position: -1px -1px; }
.vm-road { position: absolute; background: #E9DFCF; }
.vm-road-1 { left: -10%; top: 50%; width: 120%; height: calc(var(--u) * 3.6); transform: rotate(-12deg); }
.vm-road-2 { left: 60%; top: -10%; width: calc(var(--u) * 4); height: 120%; transform: rotate(9deg); }
.vm-ring { position: absolute; left: 62%; top: 47%; border-radius: 50%; border: 1px solid rgba(226, 87, 43, .35); background: rgba(226, 87, 43, .05); transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: transform 1.2s var(--ease), opacity .8s var(--ease); }
.vm-ring-1 { width: calc(var(--u) * 62); height: calc(var(--u) * 62); }
.vm-ring-2 { width: calc(var(--u) * 42); height: calc(var(--u) * 42); transition-delay: .1s; border-color: rgba(226, 87, 43, .45); }
.vm-ring-3 { width: calc(var(--u) * 22); height: calc(var(--u) * 22); transition-delay: .2s; border-color: rgba(226, 87, 43, .6); background: rgba(226, 87, 43, .1); }
.spil.is-on .vm-ring { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.spil.is-on .vm-ring-1 { animation: vmPulse 3.2s 1.3s var(--ease) infinite; }
@keyframes vmPulse { 0% { transform: translate(-50%, -50%) scale(.85); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
.vm-pin { position: absolute; left: 62%; top: 47%; width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin: calc(var(--u) * -9.6) 0 0 calc(var(--u) * -4); }
.vm-pin::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); }
.vm-pin b { position: absolute; left: 32%; top: 32%; width: 36%; height: 36%; border-radius: 50%; background: #fff; }
.vm-pin { transform: translateY(calc(var(--u) * -14)); opacity: 0; transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) .35s, opacity .3s .35s; }
.spil.is-on .vm-pin { transform: none; opacity: 1; }
.vm-search { position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 4); top: calc(var(--u) * 4); height: calc(var(--u) * 11); border-radius: 999px; background: #fff; border: 1px solid #E3DACB; display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: 0 calc(var(--u) * 4); font-weight: 500; font-size: max(11px, calc(var(--u) * 3.6)); }
.vm-search svg { width: calc(var(--u) * 4); height: calc(var(--u) * 4); flex: none; }
.vm-caret { width: 1.5px; height: 1.1em; background: var(--accent); margin-left: -0.3em; animation: blink 1s steps(2) infinite; }
.vm-res { position: absolute; left: calc(var(--u) * 4); bottom: calc(var(--u) * 4); width: calc(var(--u) * 60); background: #fff; border: 1px solid #E3DACB; border-radius: calc(var(--u) * 3); overflow: hidden; transform: translateY(calc(var(--u) * 6)); opacity: 0; transition: transform 1s var(--ease) .5s, opacity .6s .5s; }
.spil.is-on .vm-res { transform: none; opacity: 1; }
.vm-row { display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 2.6) calc(var(--u) * 3.4); }
.vm-row + .vm-row { border-top: 1px solid #EEE7DC; }
.vm-sk { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.4); }
.vm-sk i { display: block; height: calc(var(--u) * 1.9); width: 62%; border-radius: 99px; background: #E9E2D6; }
.vm-sk i + i { width: 38%; background: #F0EBE2; }
.vm-you { background: #FBEDE6; box-shadow: inset calc(var(--u) * .9) 0 0 var(--accent); }
.vm-dot { width: calc(var(--u) * 3); height: calc(var(--u) * 3); border-radius: 50%; background: var(--accent); flex: none; }
.vm-you b { display: block; font-weight: 700; font-size: max(11px, calc(var(--u) * 3.3)); line-height: 1.1; }
.vm-you small { display: block; color: #6F6A60; font-size: max(9.5px, calc(var(--u) * 2.5)); margin-top: calc(var(--u) * .8); }

/* M · intenção */
.vi-chip { position: absolute; display: inline-flex; align-items: center; gap: calc(var(--u) * 2); white-space: nowrap; background: var(--paper); color: var(--ink); border-radius: 999px; padding: calc(var(--u) * 2.4) calc(var(--u) * 3.6); font-weight: 500; font-size: max(10.5px, calc(var(--u) * 3.3)); line-height: 1; opacity: 0; transition: opacity .6s var(--ease), transform 1s var(--ease); }
.vi-chip b { font-family: var(--mono); font-weight: 500; color: var(--accent); }
.vi-chip:nth-child(1) { left: 2%; top: 1%; transform: translate(-6%, 30%) rotate(-2deg); }
.vi-chip:nth-child(2) { left: 22%; top: 13%; transform: translate(-6%, 30%) rotate(2deg); transition-delay: .08s; }
.vi-chip:nth-child(3) { left: 6%; top: 25%; transform: translate(-6%, 30%) rotate(-1.5deg); transition-delay: .16s; }
.vi-chip:nth-child(4) { left: 26%; top: 37%; transform: translate(-6%, 30%) rotate(2deg); transition-delay: .24s; }
.vi-chip:nth-child(5) { left: 0; top: 49%; transform: translate(-6%, 30%) rotate(-2deg); transition-delay: .32s; }
.spil.is-on .vi-chip { opacity: 1; }
.spil.is-on .vi-chip:nth-child(odd) { transform: rotate(-2deg); }
.spil.is-on .vi-chip:nth-child(even) { transform: rotate(2deg); }
.vi-card { position: absolute; right: 0; bottom: 0; width: calc(var(--u) * 46); background: var(--paper); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 4) calc(var(--u) * 4.4) calc(var(--u) * 2); transform: translateY(calc(var(--u) * 5)) rotate(2.5deg); opacity: 0; transition: opacity .8s var(--ease) .35s, transform 1.1s var(--ease) .35s; }
.spil.is-on .vi-card { opacity: 1; transform: rotate(2.5deg); }
.vi-card .v-tag { margin-bottom: calc(var(--u) * 1.2); }
.vi-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: max(10.5px, calc(var(--u) * 3)); line-height: 1.2; padding: calc(var(--u) * 2.3) 0; border-bottom: 1px solid #E3DACB; }
.vi-row:last-child { border-bottom: 0; }
.vi-row b { color: var(--accent); opacity: 0; transform: scale(.4); transition: opacity .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.spil.is-on .vi-row b { opacity: 1; transform: none; }
.spil.is-on .vi-row:nth-child(2) b { transition-delay: .8s; }
.spil.is-on .vi-row:nth-child(3) b { transition-delay: .95s; }
.spil.is-on .vi-row:nth-child(4) b { transition-delay: 1.1s; }
.spil.is-on .vi-row:nth-child(5) b { transition-delay: 1.25s; }

/* A · assistente */
.vc-phone { position: absolute; left: 34%; top: 0; width: calc(var(--u) * 50); height: 100%; padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 8); background: #0E0E0D; transform: rotate(-3deg); }
.vc-screen { height: 100%; border-radius: calc(var(--u) * 6.6); background: #F6F2EB; overflow: hidden; display: flex; flex-direction: column; }
.vc-top { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 5) calc(var(--u) * 3) calc(var(--u) * 2.2); border-bottom: 1px solid #E3DACB; line-height: 1.15; }
.vc-top b { display: block; font-size: max(9.5px, calc(var(--u) * 2.6)); }
.vc-top small { display: block; font-size: max(8.5px, calc(var(--u) * 2.1)); color: #3F8F5E; margin-top: 2px; }
.vc-av { width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: 50%; background: var(--green); color: var(--paper); display: grid; place-items: center; font-family: var(--serif); font-size: calc(var(--u) * 3); flex: none; }
.vc-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 3) calc(var(--u) * 2.4) calc(var(--u) * 12); font-size: max(9px, calc(var(--u) * 2.3)); line-height: 1.32; overflow: hidden; }
.vc-time { flex: none; text-align: center; font-family: var(--mono); font-size: max(8px, calc(var(--u) * 1.9)); letter-spacing: .08em; text-transform: uppercase; color: #9A9488; }
.vc-b { max-width: 86%; padding: calc(var(--u) * 1.9) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 3.2); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.vc-me { align-self: flex-end; background: var(--green); color: var(--paper); border-bottom-right-radius: calc(var(--u) * .8); }
.vc-them { align-self: flex-start; background: #fff; border: 1px solid #ECE5D9; border-bottom-left-radius: calc(var(--u) * .8); }
.spil.is-on .vc-b { opacity: 1; transform: none; }
.spil.is-on .vc-b:nth-child(2) { transition-delay: .3s; }
.spil.is-on .vc-b:nth-child(3) { transition-delay: .9s; }
.spil.is-on .vc-b:nth-child(4) { transition-delay: 1.5s; }
.vc-wa { position: absolute; left: 4%; bottom: 6%; display: inline-flex; align-items: center; gap: calc(var(--u) * 2); background: #25D366; color: #06301A; font-weight: 700; font-size: max(10.5px, calc(var(--u) * 3)); line-height: 1; white-space: nowrap; border-radius: 999px; padding: calc(var(--u) * 2.2) calc(var(--u) * 3.6) calc(var(--u) * 2.2) calc(var(--u) * 2.2); opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .5s var(--ease), transform .8s cubic-bezier(.34, 1.56, .64, 1); }
.vc-wa b { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: 50%; background: #06301A; color: #25D366; display: grid; place-items: center; font-size: calc(var(--u) * 2.8); }
.spil.is-on .vc-wa { opacity: 1; transform: none; transition-delay: 2.1s; }

/* R · radar */
.v-radar { background: var(--paper); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 5); display: flex; flex-direction: column; transform: rotate(1.2deg) scale(.96); }
.vr-head { display: flex; justify-content: space-between; align-items: center; }
.vr-head b { font-size: max(11px, calc(var(--u) * 3.5)); }
.vr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2.2); margin-top: calc(var(--u) * 3.4); }
.vr-stats div { background: #F8F4EC; border-radius: calc(var(--u) * 2.4); padding: calc(var(--u) * 2.8); min-width: 0; }
.vr-stats span { display: block; font-family: var(--mono); font-size: max(8px, calc(var(--u) * 1.85)); letter-spacing: .06em; text-transform: uppercase; color: #8A847A; line-height: 1.2; min-height: 2.4em; }
.vr-stats b { display: block; font-family: var(--serif); font-weight: 500; font-size: calc(var(--u) * 6.6); line-height: 1; margin-top: calc(var(--u) * 1.4); letter-spacing: -.02em; }
.vr-stats b.vr-sm { font-size: calc(var(--u) * 4.4); padding-top: calc(var(--u) * 1.5); }
.vr-hot { background: #FBEDE6 !important; }
.vr-hot b { color: var(--accent); }
.vr-chart { display: block; width: 100%; flex: 1; min-height: 0; margin-top: calc(var(--u) * 3); overflow: visible; }
.vr-chart line { stroke: #E9E2D6; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.vr-line { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-io) .3s; }
.vr-area { fill: rgba(31, 58, 50, .08); opacity: 0; transition: opacity 1s var(--ease) 1.3s; }
.spil.is-on .vr-line { stroke-dashoffset: 0; }
.spil.is-on .vr-area { opacity: 1; }
.vr-q { display: flex; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 3); flex-wrap: wrap; }
.vr-q span { font-size: max(9.5px, calc(var(--u) * 2.6)); font-weight: 500; padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4); border-radius: 999px; background: #F1EBE1; line-height: 1; white-space: nowrap; }

/* T · IA */
.vfit > .v-ai { bottom: auto; top: 50%; translate: 0 -50%; }
.v-ai { background: var(--paper); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 5); display: flex; flex-direction: column; transform: rotate(-1.2deg) scale(.96); }
.va-head { display: flex; align-items: center; gap: calc(var(--u) * 2.2); }
.va-head b { font-size: max(11px, calc(var(--u) * 3.4)); }
.va-head .v-tag { margin-left: auto; }
.va-ic { width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); border-radius: calc(var(--u) * 2); background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--serif); font-size: calc(var(--u) * 3); }
.va-q { align-self: flex-end; margin-top: calc(var(--u) * 3.6); background: #EFE8DD; padding: calc(var(--u) * 2.4) calc(var(--u) * 3.4); border-radius: calc(var(--u) * 3.4) calc(var(--u) * 3.4) calc(var(--u) * .8) calc(var(--u) * 3.4); font-weight: 500; font-size: max(10.5px, calc(var(--u) * 3.2)); line-height: 1.3; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease) .2s, transform .7s var(--ease) .2s; }
.va-typing { display: flex; gap: 5px; height: 0; overflow: hidden; margin-top: calc(var(--u) * 3); }
.va-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9A9488; animation: typing 1.2s infinite; }
.va-typing i:nth-child(2) { animation-delay: .15s; }
.va-typing i:nth-child(3) { animation-delay: .3s; }
.va-a { font-size: max(10.5px, calc(var(--u) * 3.05)); line-height: 1.45; color: #3A3833; opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease) 1.1s, transform .9s var(--ease) 1.1s; }
.va-a b { color: var(--ink); }
.va-src { margin-top: calc(var(--u) * 4); display: flex; gap: calc(var(--u) * 2.6); align-items: center; border: 1px solid #E3DACB; border-radius: calc(var(--u) * 2.6); padding: calc(var(--u) * 2); background: #FBF8F3; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) 1.6s, transform 1s var(--ease) 1.6s; min-width: 0; }
.va-src img { width: calc(var(--u) * 25); height: calc(var(--u) * 15.6); object-fit: cover; object-position: top; border-radius: calc(var(--u) * 1.6); flex: none; }
.va-src div { min-width: 0; display: grid; gap: calc(var(--u) * .9); }
.va-src .v-tag { color: var(--accent); }
.va-src b { font-size: max(10px, calc(var(--u) * 2.75)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-src small { font-size: max(9px, calc(var(--u) * 2.3)); color: #8A847A; line-height: 1.3; }
.spil.is-on .va-q, .spil.is-on .va-a, .spil.is-on .va-src { opacity: 1; transform: none; }

/* sem animação: tudo no estado final */
html:not(.js-anim) .smart [class] { transition: none !important; }

/* ---------- como funciona ---------- */
.how { position: relative; }
.how-pin { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--header) + 24px) 0 48px; }
.how-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; width: 100%; }
.how-left { grid-column: 1 / span 5; }
.how-left .label { margin-bottom: 24px; }
.how-count { display: flex; align-items: flex-start; margin-top: 44px; font-family: var(--serif); font-weight: 400; font-size: clamp(140px, 15vw, 240px); line-height: 1; letter-spacing: -.05em; height: 1em; overflow: hidden; }
.hc-track { display: flex; flex-direction: column; will-change: transform; }
.hc-track b { font-weight: 400; height: 1em; display: block; }
.hc-of { margin-top: .9em; font-size: 12px; color: var(--muted); letter-spacing: .07em; margin-left: 10px; }
.how-bar { height: 1px; background: var(--rule); margin-top: 22px; max-width: 420px; }
.how-bar i { display: block; height: 100%; background: var(--fg); transform-origin: left; transform: scaleX(.25); }
.how-steps { grid-column: 6 / span 3; display: grid; gap: 34px; }
.hstep { transition: opacity .6s var(--ease); }
.hs-n { color: var(--muted); display: block; margin-bottom: 10px; }
.hstep h3 { font-family: var(--serif); font-weight: 450; font-size: 25px; line-height: 1.12; letter-spacing: -.015em; margin-bottom: 10px; }
.hstep > p { font-size: 15.5px; color: var(--muted); }
.js-anim .how.is-pinned .hstep { opacity: .26; }
.js-anim .how.is-pinned .hstep.is-active { opacity: 1; }
.hs-phone { display: none; }
.how-device { grid-column: 9 / span 4; display: flex; justify-content: center; }
.dev { width: min(310px, 100%); aspect-ratio: 9 / 19; border-radius: 46px; background: var(--ink); padding: 10px; }
.dev-screen { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: var(--surface); color: var(--ink); }
.scr { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .6s var(--ease), transform .8s var(--ease); padding: 46px 16px 18px; display: flex; flex-direction: column; }
.scr.is-on { opacity: 1; transform: none; }
.hs-phone .scr { opacity: 1; transform: none; }
/* 1 · direct */
.ig-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(28, 28, 26, .1); font-size: 13px; line-height: 1.2; }
.ig-top small { display: block; color: var(--muted-c); font-size: 11px; }
.ig-av { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: var(--paper); display: grid; place-items: center; font-family: var(--serif); font-size: 15px; flex: none; }
.ig-av b { color: var(--accent); font-weight: 500; }
.ig-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 0; }
.bub { max-width: 82%; padding: 10px 13px; border-radius: 18px; font-size: 13px; line-height: 1.35; }
.bub-me { align-self: flex-end; background: var(--green); color: var(--paper); border-bottom-right-radius: 6px; }
.bub-them { align-self: flex-start; background: var(--sand); border-bottom-left-radius: 6px; }
.typing { display: flex; gap: 4px; padding: 13px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-c); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.ig-input { border: 1px solid rgba(28, 28, 26, .14); border-radius: 999px; padding: 10px 14px; font-size: 12.5px; color: var(--muted-c); }
/* 2 · montando */
.scr-2 { gap: 10px; background: var(--green); }
.scr-cap { color: var(--accent-g); margin-bottom: 6px; font-size: 10.5px; }
.sk { background: rgba(243, 238, 230, .12); border-radius: 6px; animation: skp 1.6s ease-in-out infinite; }
.sk-nav { height: 14px; width: 45%; }
.sk-h { height: 26px; width: 92%; margin-top: 12px; }
.sk-h2 { width: 64%; margin-top: 0; }
.sk-img { flex: 1; border-radius: 14px; animation-delay: .2s; }
.sk-p { height: 9px; width: 90%; animation-delay: .35s; }
.sk-p2 { width: 70%; }
.sk-btn { height: 40px; border-radius: 999px; background: rgba(240, 138, 93, .4); animation-delay: .5s; }
@keyframes skp { 50% { opacity: .45; } }
.scr-prog { height: 2px; background: rgba(243, 238, 230, .14); margin-top: 6px; }
.scr-prog i { display: block; height: 100%; background: var(--accent-g); transform-origin: left; animation: prog 3.2s var(--ease-io) infinite; }
@keyframes prog { 0% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
/* 3 · ajustes */
.mini-site-m3 { flex: 1; display: flex; flex-direction: column; gap: 12px; background: #EDE6DA; margin: -46px -16px -18px; padding: 52px 16px 16px; }
.m3-nav { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 15px; }
.m3-nav i { width: 18px; height: 8px; border-block: 1.5px solid currentColor; }
.m3-h { font-family: var(--serif); font-size: 25px; line-height: 1.05; letter-spacing: -.02em; }
.m3-img { flex: 1; border-radius: 14px; background: url("assets/demo/terapia.webp") center / cover; }
.m3-btn { background: #2F3A2E; color: #fff; border-radius: 999px; text-align: center; padding: 12px; font-size: 13px; font-weight: 600; }
.pin { position: absolute; display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: var(--paper); font-size: 11.5px; padding: 6px 10px 6px 6px; border-radius: 999px; white-space: nowrap; }
.pin b { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-size: 10px; color: #fff; }
.pin-1 { left: 22%; top: 48%; }
.pin-2 { right: 8%; bottom: 13%; }
.scr.is-on .pin, .hs-phone .pin { animation: pinIn .7s var(--ease) both; }
.scr.is-on .pin-2 { animation-delay: .35s; }
@keyframes pinIn { from { opacity: 0; transform: translateY(8px) scale(.9); } }
/* 4 · no ar */
.scr-4 { align-items: center; justify-content: center; text-align: center; gap: 14px; background: var(--paper); }
.live-url { position: absolute; top: 44px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(28, 28, 26, .14); border-radius: 999px; padding: 9px; font-size: 11px; text-transform: none; }
.live-check { color: var(--green); }
.live-check path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.scr-4.is-on .live-check path, .hs-phone .live-check path { animation: draw .9s .3s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.live-t { font-family: var(--serif); font-size: 52px; letter-spacing: -.03em; line-height: 1; }
.live-p { color: var(--muted-c); font-size: 10.5px; }
.live-btn { margin-top: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; padding: 12px 20px; border-radius: 999px; }

/* ---------- projetos ---------- */
.work { position: relative; }
.work-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header) + 10px) 0 30px; overflow: hidden; }
.work-track { display: flex; align-items: center; gap: 7vw; padding-inline: var(--m); width: max-content; will-change: transform; }
.work-intro { width: min(32vw, 520px); flex: none; }
.work-intro .label { margin-bottom: 24px; }
.work-lede { color: var(--muted); margin-top: 28px; max-width: 38ch; }
.work-hint { margin-top: 40px; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.work-hint span { display: inline-block; animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(8px); } }
.proj { flex: none; width: min(80vw, 1180px); display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 2.6rem; align-items: end; }
.proj-link { display: block; perspective: 1400px; border-radius: 14px; }
.mock { position: relative; padding: 0 9% 7% 0; transform-style: preserve-3d; will-change: transform; }
.mock-b { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--green-d); }
.mock-bar { height: 32px; display: flex; align-items: center; gap: 14px; padding: 0 14px; color: var(--muted); border-bottom: 1px solid var(--rule); }
.mock-bar .mono { text-transform: none; font-size: 10.5px; letter-spacing: .02em; }
.mock-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--green-d); }
.mock-img img, .mock-p img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mock-img img { transform: scale(1.08); transform-origin: 50% 0; will-change: transform; }
.mock-p { position: absolute; right: 0; bottom: 0; width: 22%; aspect-ratio: 9 / 19.5; border-radius: 26px; padding: 5px; background: var(--ink); transform: translateZ(40px); }
.mock-p img { border-radius: 21px; }
.proj-meta { padding-bottom: 7%; display: grid; gap: 10px; justify-items: start; }
.proj-n { color: var(--muted); margin-bottom: 8px; }
.proj-t { font-family: var(--serif); font-weight: 450; font-size: clamp(34px, 3.2vw, 50px); line-height: 1; letter-spacing: -.03em; }
.proj-s { font-size: 16px; }
.proj-d { color: var(--muted); font-size: 10.5px; margin-top: 4px; }
.proj-go { margin-top: 16px; }
.work-foot { display: flex; align-items: center; gap: 16px; color: var(--muted); margin-top: 4vh; }
.wf-bar { flex: 1; height: 1px; background: var(--rule); }
.wf-bar i { display: block; height: 100%; background: var(--fg); transform-origin: left; transform: scaleX(0); }
.wf-cur { color: var(--fg); }

/* ---------- incluso ---------- */
.incl { padding: 12vh 0 8vh; }
.incl-head { grid-column: 1 / span 5; }
.incl-head .label { margin-bottom: 26px; }
.incl-lede { color: var(--muted); max-width: 38ch; margin-top: 28px; }
.spec { grid-column: 7 / span 6; border-top: 1px solid var(--rule); align-self: start; }
.spec li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--rule); }
.spec span { font-family: var(--sans); font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--fg); }
.spec b { font-weight: 400; color: var(--muted); font-size: 11px; }
.tick { width: 16px; height: 16px; border: 1px solid var(--fg); border-radius: 4px; position: relative; transition: background .4s var(--ease), border-color .4s; }
.tick::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4.5px; height: 8.5px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0); transition: transform .45s var(--ease) .1s; }
.spec li.is-on .tick, html:not(.js-anim) .tick { background: var(--accent); border-color: var(--accent); }
.spec li.is-on .tick::after, html:not(.js-anim) .tick::after { transform: rotate(45deg) scale(1); }
.counts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--g); margin-top: 10vh; }
.counts div { border-top: 1px solid var(--fg); padding-top: 14px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.counts dt { color: var(--muted); }
.counts dd { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 7.4vw, 124px); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }

/* ---------- faq ---------- */
.faq { padding: 9vh 0 11vh; }
.faq-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header) + 40px); align-self: start; }
.faq-head .label { margin-bottom: 26px; }
.faq-more { margin-top: 30px; color: var(--muted); display: grid; gap: 10px; justify-items: start; }
.faq-more .link-line { color: var(--fg); }
.qa-list { grid-column: 6 / span 7; border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; display: grid; grid-template-columns: 52px 1fr 22px; align-items: center; gap: 12px; padding: 26px 0; cursor: pointer; font-family: var(--serif); font-weight: 450; font-size: clamp(21px, 1.9vw, 28px); letter-spacing: -.015em; line-height: 1.15; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .mono { color: var(--muted); }
.qa summary i { position: relative; width: 22px; height: 22px; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10.5px; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0); }
.qa summary:hover { color: var(--em); }
.qa-a { overflow: hidden; }
.qa-a p { padding: 0 34px 28px 64px; color: var(--muted); max-width: 62ch; }

/* ---------- cta final ---------- */
.cta { padding: 11vh 0 8vh; }
.cta .label { grid-column: 1 / -1; margin-bottom: 30px; }
.cta-title { grid-column: 1 / span 8; font-family: var(--serif); font-weight: 450; font-size: clamp(84px, 14.5vw, 250px); line-height: .84; letter-spacing: -.055em; font-variation-settings: "opsz" 144; }
.cta-title .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.06em; }
.cta-title .li { display: block; }
.cta-go { grid-column: 9 / span 4; align-self: end; display: grid; gap: 28px; justify-items: start; padding-bottom: 2vw; }
.orb { width: 260px; height: 260px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; position: relative; overflow: hidden; isolation: isolate; }
.orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--paper); transform: scale(0); transition: transform .7s var(--ease); z-index: -1; }
.orb:hover::before { transform: scale(1); }
.orb:hover { color: var(--green); }
.orb-in { display: grid; justify-items: center; gap: 10px; text-align: center; transition: color .4s; }
.orb-t { font-family: var(--serif); font-size: 23px; line-height: 1.08; letter-spacing: -.01em; }
.orb .arr { font-size: 22px; transition: transform .6s var(--ease); }
.orb:hover .arr { transform: translate(4px, -4px) rotate(0deg); }
.cta-note { color: var(--muted); max-width: 32ch; }
.lead { grid-column: 1 / -1; margin-top: 9vh; padding-top: 26px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.lead-t { grid-column: 1 / span 3; color: var(--muted); padding-top: 18px; }
.lead-body { grid-column: 4 / span 9; display: grid; grid-template-columns: 1fr 1fr 1.25fr auto; gap: 18px; align-items: end; }
.lf { display: grid; gap: 6px; }
.lf span { color: var(--muted); font-size: 10.5px; }
.lf input { background: transparent; border: 0; border-bottom: 1px solid var(--rule); color: var(--fg); font: inherit; font-size: 17px; padding: 10px 0; border-radius: 0; transition: border-color .3s; width: 100%; min-width: 0; }
.lf input::placeholder { color: var(--fg); opacity: .35; }
.lf input:focus { outline: none; border-bottom-color: var(--accent-g); }
.lf.has-error input { border-bottom-color: var(--accent-g); }
.lead-body .btn { width: auto; }
.lead-err { grid-column: 1 / -1; color: var(--accent-g); min-height: 0; text-transform: none; letter-spacing: .02em; }
.lead-err:empty { display: none; }
.lead-ok { grid-column: 4 / span 9; display: grid; gap: 14px; justify-items: start; max-width: 60ch; }
.lead-ok-t { font-family: var(--serif); font-size: 34px; letter-spacing: -.02em; line-height: 1.05; }
.lead-ok:focus { outline: none; }

/* ---------- rodapé ---------- */
.footer { padding: 8vh 0 28px; overflow: hidden; }
.foot-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-top: 34px; border-top: 1px solid var(--rule); }
.foot-col { display: grid; gap: 8px; justify-items: start; align-content: start; }
.foot-col:nth-child(1) { grid-column: 1 / span 3; }
.foot-col:nth-child(2) { grid-column: 4 / span 3; }
.foot-col-r { grid-column: 9 / span 4; }
.foot-l { color: var(--muted); margin-bottom: 8px; }
.foot-claim { font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: -.015em; margin-bottom: 16px; }
.foot-mark { margin: 9vh 0 3vh; font-family: var(--serif); font-weight: 450; line-height: .8; letter-spacing: -.05em; white-space: nowrap; font-size: 11.9vw; font-variation-settings: "opsz" 144; overflow: hidden; padding-bottom: .12em; }
.fm-in { display: inline-block; }
.fm-in .ch { display: inline-block; }
.foot-base { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
kbd { font-family: var(--mono); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; color: var(--fg); }

/* ---------- estados iniciais de animação ---------- */
.js-anim [data-fade] { opacity: 0; transform: translateY(26px); }
.js-anim [data-hero-fade] { opacity: 0; transform: translateY(20px); }
.js-anim .hero-title .li, .js-anim .cta-title .li { transform: translateY(110%); }
.js-anim .header-in { opacity: 0; }


/* ===================== versão estática (reduced motion / ?static) ===================== */
html:not(.js-anim) .how-pin { display: block; padding: 11vh 0 8vh; min-height: 0; }
html:not(.js-anim) .how-grid { display: grid; }
html:not(.js-anim) .how-left { grid-column: 1 / span 5; }
html:not(.js-anim) .how-count, html:not(.js-anim) .how-bar, html:not(.js-anim) .how-device { display: none; }
html:not(.js-anim) .how-steps { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); margin-top: 64px; }
html:not(.js-anim) .hs-phone { display: block; margin-top: 26px; width: 100%; max-width: 240px; aspect-ratio: 9 / 18; border-radius: 38px; background: var(--ink); padding: 8px; }
html:not(.js-anim) .hs-phone .dev-screen { border-radius: 30px; }
html:not(.js-anim) .work-pin { display: block; padding: 11vh 0 8vh; min-height: 0; }
html:not(.js-anim) .work-track { flex-direction: column; align-items: stretch; width: auto; gap: 110px; }
html:not(.js-anim) .work-intro { width: auto; max-width: 640px; }
html:not(.js-anim) .work-hint, html:not(.js-anim) .work-foot { display: none; }
html:not(.js-anim) .proj { width: 100%; }
html:not(.js-anim) .mock-img img { transform: none; }

/* ===================== tablet ===================== */
@media (max-width: 1340px) {
  .header-status { display: none; }
}
@media (max-width: 1080px) {
  .nav { gap: 20px; font-size: 14.5px; }
  .header-in { gap: 22px; }
}
@media (max-width: 1180px) {
  .hero-title { grid-column: 1 / -1; }
  .hero-side { grid-column: 1 / span 6; grid-row: 4; padding: 26px 0 0; }
  .hero-ctas { flex-direction: row; align-items: center; gap: 26px; }
  .hero-foot { grid-row: 5; }
  .demo-head h2 { grid-column: 1 / -1; }
  .demo-intro { grid-column: 1 / span 8; }
  .console { grid-column: 1 / span 5; }
  .stage { grid-column: 6 / span 7; }
  .how-steps { grid-column: 6 / span 4; }
  .how-device { grid-column: 10 / span 3; }
  .lead-body { grid-template-columns: 1fr 1fr; }
  .smart-intro h2 { grid-column: 1 / span 7; }
  .smart-side { grid-column: 8 / span 5; }
}

@media (max-width: 960px) {
  :root { --m: 24px; --g: 16px; }
  .nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-btn { display: block; margin-left: 0; }
  .demo-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .console, .stage { grid-column: 1 / -1; }
  .diff-head { grid-column: 1 / -1; position: static; margin-bottom: 48px; }
  .diff-list { grid-column: 1 / -1; }
  .incl-head, .spec { grid-column: 1 / -1; }
  .spec { margin-top: 48px; }
  .faq-head { grid-column: 1 / -1; position: static; margin-bottom: 40px; }
  .qa-list { grid-column: 1 / -1; }
  .cta-title { grid-column: 1 / -1; }
  .cta-go { grid-column: 1 / -1; margin-top: 48px; grid-template-columns: auto 1fr; align-items: center; }
  .lead-t, .lead-body, .lead-ok { grid-column: 1 / -1; }
  .lead-t { padding-top: 0; margin-bottom: 20px; }

  /* como funciona sem pin */
  .how-pin { display: block; padding: 11vh 0 8vh; min-height: 0; }
  .how-grid { display: block; }
  .how-count, .how-bar, .how-device { display: none; }
  .how-steps, html:not(.js-anim) .how-steps { margin-top: 56px; gap: 64px; grid-template-columns: 1fr; }
  .hstep { display: grid; grid-template-columns: 1fr; gap: 0; }
  .hs-phone { display: block; margin-top: 26px; width: 230px; aspect-ratio: 9 / 18; border-radius: 38px; background: var(--ink); padding: 8px; }
  .hs-phone .dev-screen { border-radius: 30px; }

  /* projetos sem pin */
  .work-pin { display: block; padding: 11vh 0 8vh; min-height: 0; }
  .work-track { flex-direction: column; align-items: stretch; width: auto; gap: 96px; }
  .work-intro { width: auto; }
  .work-hint, .work-foot { display: none; }
  .proj { width: 100%; grid-template-columns: 1fr; gap: 26px; }
  .proj-meta { padding-bottom: 0; }

  /* método SMART empilhado */
  .smart-intro h2, .smart-side { grid-column: 1 / -1; }
  .smart-side { margin-top: 14px; max-width: 560px; }
  .smart-list { gap: 12vh; }
  .spil { grid-template-columns: 1fr; row-gap: 40px; }
  .spil-text, .spil-vis { grid-column: 1 / -1; }
  .spil-vis { max-width: 620px; }
}

/* ===================== celular ===================== */
@media (max-width: 640px) {
  :root { --m: 20px; --g: 12px; --header: 66px; }
  body { font-size: 16px; }
  .grid, .grid-cols, .hero-in, .demo-head, .demo-grid, .lead, .foot-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols i:nth-child(n+5) { display: none; }
  .wordmark { font-size: 20px; }
  .header-cta { display: none; }
  .menu-btn { margin-left: auto; }

  .hero-in { grid-template-rows: auto 1fr auto auto auto; padding-bottom: 22px; }
  .hero-meta { grid-template-columns: 1fr auto; }
  .hero-meta > span:first-child { grid-column: 1; }
  .hm-mid { display: none; }
  .hm-xy { grid-column: 2; }
  .hero-tele { display: none; }
  .hero-title { grid-column: 1 / -1; grid-row: 3; font-size: 12.4vw; line-height: .93; letter-spacing: -.035em; }
  .hero-side { grid-row: 4; grid-column: 1 / -1; padding: 22px 0 0; }
  .hero-lede { font-size: 17px; margin-bottom: 22px; max-width: 30ch; }
  .hero-ctas { gap: 20px; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .hero-foot { grid-row: 5; margin-top: 22px; }
  .hero-foot span:last-child { display: none; }
  .hero-mono-static { width: 62vw; right: 50%; transform: translateX(50%); top: 15%; }

  .marquee { padding: 18px 0 20px; }
  .manifesto { padding: 9vh 0 7vh; }
  .manifesto .label, .manifesto-text, .manifesto-side { grid-column: 1 / -1; }
  .manifesto .label { margin-bottom: 24px; padding: 0; }
  .manifesto-text { font-size: 29px; line-height: 1.14; }
  .manifesto-side { margin-top: 36px; }

  .demo { padding: 8vh 0 7vh; }
  .demo-head h2, .demo-intro { grid-column: 1 / -1; }
  .demo-grid { margin-top: 44px; }
  .console { padding: 18px 16px 14px; }
  .c-input { font-size: 26px; }
  .chip span { height: 40px; padding: 0 14px; }
  .stages { font-size: 8.5px; letter-spacing: .02em; }
  .log { height: 116px; }
  .stage { padding-right: 9%; padding-bottom: 34px; }
  .browser-bar { height: 34px; padding: 0 10px; gap: 8px; }
  .bdots i { width: 7px; height: 7px; }
  .bmeta { display: none; }
  .burl { font-size: 10.5px; height: 22px; }
  .phone { width: 30%; border-radius: 22px; padding: 4px; top: 92px; bottom: auto; }
  .phone-in { border-radius: 18px; }
  .stage-done { max-width: 100%; grid-template-columns: 1fr; margin-top: 118px; }
  .sd-text, .sd-time { grid-column: 1; }
  .sd-text { font-size: 19px; }

  .smart-intro { padding-top: 8vh; row-gap: 22px; }
  .smart-pin { padding: 6vh 0 7vh; }
  .smart-list { gap: 9vh; }
  .spil { row-gap: 30px; }
  .spil-text { gap: 14px; }
  .spil-L { font-size: 132px; }
  .spil-t { font-size: 29px; }
  .spil-p { font-size: 16px; }

  .diff { padding: 8vh 0 7vh; }
  .drow { grid-template-columns: 36px 1fr; column-gap: 12px; padding: 30px 0 32px; }
  .drow-t { font-size: 29px; }
  .drow-p { font-size: 15.5px; }

  .how-pin { padding: 8vh 0 7vh; }
  .hs-phone { width: 210px; }

  .work-pin { padding: 8vh 0 6vh; }
  .work-track { gap: 72px; }
  .mock { padding: 0 12% 9% 0; }
  .mock-bar { height: 24px; gap: 8px; padding: 0 9px; }
  .mock-bar .mono { font-size: 8.5px; }
  .mock-p { width: 27%; border-radius: 16px; padding: 3px; }
  .mock-p img { border-radius: 13px; }

  .incl { padding: 8vh 0 6vh; }
  .spec span { font-size: 15.5px; }
  .spec li { grid-template-columns: 28px 1fr auto; padding: 14px 0; }
  .counts { grid-template-columns: 1fr 1fr; row-gap: 36px; margin-top: 7vh; }
  .counts dd { font-size: 76px; }

  .faq { padding: 7vh 0 8vh; }
  .qa summary { grid-template-columns: 34px 1fr 20px; font-size: 20px; padding: 22px 0; }
  .qa-a p { padding: 0 0 24px 46px; font-size: 15.5px; }

  .cta { padding: 8vh 0 6vh; }
  .cta-title { font-size: 25vw; }
  .cta-go { grid-template-columns: 1fr; margin-top: 40px; }
  .orb { width: 190px; height: 190px; }
  .orb-t { font-size: 20px; }
  .lead-body { grid-template-columns: 1fr; }
  .lead-body .btn { width: 100%; }

  .footer { padding: 6vh 0 22px; }
  .foot-col:nth-child(1), .foot-col:nth-child(2) { grid-column: 1 / -1; }
  .foot-col:nth-child(2) { margin-top: 32px; }
  .foot-col-r { grid-column: 1 / -1; margin-top: 40px; }
  .foot-claim { font-size: 23px; }
  .foot-key { display: none; }
}

@media (hover: none) {
  .foot-key { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}