/* HASHY — build production */
:root{color-scheme:light;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}body{margin:0;font:14px system-ui}img{max-width:100%}[hidden]{display:none!important}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/source-sans-3-latin-ext-400-normal.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;
}

/* source-sans-3-latin-400-normal */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/source-sans-3-latin-400-normal.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: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/source-sans-3-latin-ext-600-normal.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;
}

/* source-sans-3-latin-600-normal */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/source-sans-3-latin-600-normal.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: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/source-sans-3-latin-ext-700-normal.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;
}

/* source-sans-3-latin-700-normal */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/source-sans-3-latin-700-normal.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: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fonts/source-sans-3-latin-ext-800-normal.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;
}

/* source-sans-3-latin-800-normal */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fonts/source-sans-3-latin-800-normal.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: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-ext-400-normal.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;
}

/* ibm-plex-mono-latin-400-normal */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-400-normal.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: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-ext-500-normal.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;
}

/* ibm-plex-mono-latin-500-normal */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-500-normal.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;
}
/* =====================================================================
   HASHY — site comercial · camada de estilos
   Conceito de layout: superfícies arredondadas conectadas por recortes
   côncavos funcionais; leitura opaca e estável, matéria só em regiões
   expressivas delimitadas.
   Tokens: HASHY Design System rev. 1.3 + DESIGN.md Web 1.0.0
   (perfil institucional; acento quente dominante = signal).
   ===================================================================== */

:root {
  /* tipografia */
  --font-sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-hero: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 2.2vw, 3.75rem);
  --fs-h2: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --fs-h3: 1.5rem;
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --lh-body: 1.6875rem;
  --fs-label: 1rem;
  --fs-sup: 0.875rem;
  --fs-micro: 0.75rem;

  /* institucional · claro (base) */
  --canvas: #FAFAF9;
  --surface: #F1F0EE;
  --raised: #FFFFFF;
  --panel: #FFFFFF;
  --text: #101113;
  --text-2: #64666B;
  --border-control: #626D77;
  --border-deco: #D9D8D5;
  --link: #3157D5;
  --focus: #3157D5;
  --signal: #E2672F;
  --signal-text: #B84A18;
  --cold: #3157D5;
  --cold-soft: #99ADFF;
  --cyan: #72DCE8;
  --ink-fixed: #101113;
  --mist-fixed: #F5F4F2;

  /* botões grafite */
  --btn-bg: #101113;
  --btn-hover: #26272C;
  --btn-active: #08090A;
  --btn-fg: #F5F4F2;
  --btn-border: #101113;
  --btn2-bg: var(--raised);
  --btn2-hover: #F1F0EE;
  --disabled-bg: #DFE2E3;
  --disabled-fg: #4A555F;
  --disabled-border: #B8BEC2;
  --error-fg: #B42336;
  --error-bg: #FDECEF;
  --info-fg: #254CC0;
  --info-bg: #EAF0FF;

  /* elevação */
  --sh-btn: 0 2px 4px rgb(0 0 0 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.10);
  --sh-btn-hover: 0 4px 10px rgb(0 0 0 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.12);
  --sh-btn-active: inset 0 1px 2px rgb(0 0 0 / 0.18);
  --e1: 0 4px 12px rgb(16 17 19 / 0.08);
  --e2: 0 12px 32px rgb(16 17 19 / 0.14);
  --e3: 0 24px 64px rgb(16 17 19 / 0.20);

  /* forma */
  --r-control: 12px;
  --r-btn-s: 12px;
  --r-btn: 14px;
  --r-btn-l: 16px;
  --r-card: 24px;
  --r-media: 24px;
  --r-section: 24px;
  --r-concave: 16px;

  /* layout */
  --frame: 16px;
  --pad-panel: 20px;
  --block: 3rem;
  --gutter: 1rem;
  --header-h: 4rem;
  --max: 1312px;

  /* movimento */
  --d-icon: 160ms;
  --d-hover: 180ms;
  --d-control: 240ms;
  --d-acc: 300ms;
  --d-enter: 320ms;
  --d-gallery: 360ms;
  --d-page: 500ms;
  --d-theme: 600ms;
  --d-reveal: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-expressive: cubic-bezier(0.25, 1, 0.5, 1);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  color-scheme: light;
}

/* tema escuro do sistema, sem escolha explícita */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #101113;
    --surface: #17181B;
    --raised: #232428;
    --panel: #17181B;
    --text: #F5F4F2;
    --text-2: #8B8D92;
    --border-control: #9BA5AE;
    --border-deco: #34353B;
    --link: #99ADFF;
    --focus: #72DCE8;
    --signal-text: #E2672F;
    --btn-bg: #3A3C43;
    --btn-hover: #45474F;
    --btn-active: #2E3036;
    --btn-border: #7A7C83;
    --btn2-bg: #232428;
    --btn2-hover: #2B2C31;
    --disabled-bg: #26313A;
    --disabled-fg: #9BA5AE;
    --disabled-border: #34404A;
    --error-fg: #FF94A3;
    --error-bg: #421F29;
    --info-fg: #A5BBFF;
    --info-bg: #1B2B52;
    --e1: 0 4px 12px rgb(0 0 0 / 0.30);
    --e2: 0 12px 32px rgb(0 0 0 / 0.42);
    --e3: 0 24px 64px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #101113;
  --surface: #17181B;
  --raised: #232428;
  --panel: #17181B;
  --text: #F5F4F2;
  --text-2: #8B8D92;
  --border-control: #9BA5AE;
  --border-deco: #34353B;
  --link: #99ADFF;
  --focus: #72DCE8;
  --signal-text: #E2672F;
  --btn-bg: #3A3C43;
  --btn-hover: #45474F;
  --btn-active: #2E3036;
  --btn-border: #7A7C83;
  --btn2-bg: #232428;
  --btn2-hover: #2B2C31;
  --disabled-bg: #26313A;
  --disabled-fg: #9BA5AE;
  --disabled-border: #34404A;
  --error-fg: #FF94A3;
  --error-bg: #421F29;
  --info-fg: #A5BBFF;
  --info-bg: #1B2B52;
  --e1: 0 4px 12px rgb(0 0 0 / 0.30);
  --e2: 0 12px 32px rgb(0 0 0 / 0.42);
  --e3: 0 24px 64px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

/* superfície com tema local escuro (grafite): texto, foco e bordas do tema escuro */
.ld {
  --panel: #101113;
  --surface: #17181B;
  --raised: #232428;
  --text: #F5F4F2;
  --text-2: #8B8D92;
  --border-control: #9BA5AE;
  --border-deco: #34353B;
  --link: #99ADFF;
  --focus: #72DCE8;
  --signal-text: #E2672F;
  --btn-bg: #3A3C43;
  --btn-hover: #45474F;
  --btn-active: #2E3036;
  --btn-border: #7A7C83;
  --btn2-bg: #232428;
  --btn2-hover: #2B2C31;
  --error-fg: #FF94A3;
  --error-bg: #421F29;
  color: var(--text);
}
/* no tema escuro, a superfície grafite local se diferencia do canvas */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ld { --panel: #1C1D21; --surface: #232428; --raised: #2A2B30; }
}
:root[data-theme="dark"] .ld { --panel: #1C1D21; --surface: #232428; --raised: #2A2B30; }

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 2rem); }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 10; background: var(--canvas);
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.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: max(16px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 100; padding: 12px 16px; border-radius: var(--r-btn); background: var(--btn-bg);
  color: var(--btn-fg); transform: translateY(-160%); transition: transform var(--d-control) var(--ease-standard);
}
.skip:focus { transform: none; }

/* --------------------------------------------------------------- tipos */
.micro {
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.5;
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--signal); flex: none;
}
.h-hero { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.015em; font-weight: 700; max-width: 18ch; }
.h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.015em; max-width: 20ch; }
.h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.01em; max-width: 22ch; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; }
.h4 { font-size: 1.1875rem; line-height: 1.35; font-weight: 700; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 50ch; }
.lead--strong { color: var(--text); }
.body { max-width: 65ch; }
.muted { color: var(--text-2); }
.sup { font-size: var(--fs-sup); line-height: 1.5; color: var(--text-2); }
.stack { display: flex; flex-direction: column; gap: var(--gap, 1rem); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap, 0.75rem); align-items: center; }

/* ------------------------------------------------------------ moldura */
.frame {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 16px 16px;
  display: flex; flex-direction: column; gap: var(--frame);
}
.panel {
  position: relative; background: var(--panel); color: var(--text);
  border-radius: var(--r-section); isolation: isolate;
}
.panel--surface { --panel: var(--surface); }
.panel--line { box-shadow: inset 0 0 0 1px var(--border-deco); }
.wrap {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-inline: var(--pad-panel); padding-block: var(--block);
}
.wrap--tight { padding-block: calc(var(--block) * 0.75); }
.section-head { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.section-head .micro { margin-bottom: 0.25rem; }

@media (min-width: 768px) {
  :root { --pad-panel: 32px; --block: 4rem; --gutter: 1.5rem; --header-h: 4.5rem; --r-section: 32px; }
}
@media (min-width: 1024px) {
  :root { --pad-panel: 48px; --block: 6rem; --r-section: 40px; --r-concave: 24px; --header-h: 5rem; }
}
@media (min-width: 1440px) {
  :root { --pad-panel: 64px; --block: 8rem; --gutter: 2rem; }
}

/* ------------------------------------------------------------- botões */
.btn {
  --_bg: var(--btn-bg); --_fg: var(--btn-fg); --_bd: var(--btn-border); --_sh: var(--sh-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 11px 20px; border-radius: var(--r-btn);
  border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  font-weight: 600; font-size: 1rem; line-height: 24px; text-decoration: none;
  box-shadow: var(--_sh); cursor: pointer; text-align: center;
  transition: background-color var(--d-hover) var(--ease-standard), box-shadow var(--d-hover) var(--ease-standard), border-color var(--d-hover) var(--ease-standard);
}
@media (hover: hover) { .btn:hover { --_bg: var(--btn-hover); --_sh: var(--sh-btn-hover); } }
.btn:active { --_bg: var(--btn-active); --_sh: var(--sh-btn-active); }
.btn--l { min-height: 56px; padding: 13px 24px; border-radius: var(--r-btn-l); font-size: 1.125rem; line-height: 28px; }
.btn--s { min-height: 44px; padding: 9px 16px; border-radius: var(--r-btn-s); font-size: 0.875rem; line-height: 20px; }
.btn--secondary { --_bg: var(--btn2-bg); --_fg: var(--text); --_bd: var(--border-control); --_sh: none; }
@media (hover: hover) { .btn--secondary:hover { --_bg: var(--btn2-hover); --_sh: none; } }
.btn--secondary:active { --_bg: var(--btn2-hover); --_sh: var(--sh-btn-active); }
.btn[aria-disabled="true"], .btn:disabled {
  --_bg: var(--disabled-bg); --_fg: var(--disabled-fg); --_bd: var(--disabled-border); --_sh: none; cursor: not-allowed;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-btn);
  border: 1px solid var(--border-deco); background: var(--raised); color: var(--text); cursor: pointer;
  transition: background-color var(--d-hover) var(--ease-standard), border-color var(--d-hover) var(--ease-standard);
}
@media (hover: hover) { .icon-btn:hover { border-color: var(--border-control); } }
.icon-btn svg { width: 20px; height: 20px; }

/* ChevronLink · WEB-011 M33: a haste expande em hover/foco */
.chev {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600;
  color: var(--text); text-decoration: none;
}
.chev .chev-txt { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; transition: text-decoration-color var(--d-hover) var(--ease-standard); }
.chev svg { width: 28px; height: 20px; flex: none; overflow: visible; }
.chev .shaft { transform-origin: 100% 50%; transform: scaleX(0.45); transition: transform var(--d-icon) var(--ease-standard); }
.chev:hover .shaft, .chev:focus-visible .shaft { transform: scaleX(1); }
.chev:hover .chev-txt, .chev:focus-visible .chev-txt { text-decoration-color: currentColor; }
.textlink { color: var(--link); text-decoration: underline; font-weight: 600; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--border-deco); font-size: var(--fs-sup); color: var(--text-2);
  background: transparent;
}
.badge-ex {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-deco);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.badge-ex::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

/* ------------------------------------------------------------- header */
.site-header {
  position: fixed; z-index: 30; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 16px);
  padding-left: max(28px, calc(env(safe-area-inset-left, 0px) + 12px));
  padding-right: max(28px, calc(env(safe-area-inset-right, 0px) + 12px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.h-cta { padding: 4px; }
.h-cta .btn { min-height: 44px; }
.hpill {
  display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px;
  border-radius: 18px; background: var(--raised); border: 1px solid var(--border-deco);
  transition: box-shadow var(--d-control) var(--ease-standard);
}
.is-scrolled .hpill { box-shadow: var(--e2); }
.brand-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 14px;
}
.brand-link img { width: 148px; height: auto; }
.logo-dark { display: none; }
.ld .logo-light { display: none; }
.ld .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.logo-fallback { font-weight: 800; letter-spacing: 0.02em; font-size: 1.25rem; }

.nav-desk { display: none; }
.navlink {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 14px; border-radius: 12px; border: 0; background: transparent; color: var(--text);
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
}
/* WEB-006 M27 — destaque de link: filete cresce em hover/foco; rota atual fica marcada */
.navlink::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--signal); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--d-hover) var(--ease-standard);
}
.navlink:hover::after, .navlink:focus-visible::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }
.navlink svg { width: 16px; height: 16px; transition: transform var(--d-icon) var(--ease-standard); }
.navlink[aria-expanded="true"] svg { transform: rotate(180deg); }
.h-actions { display: flex; align-items: center; gap: 8px; }
.h-actions .h-cta { display: none; }
.menu-btn .bar { transition: transform var(--d-icon) var(--ease-standard), opacity var(--d-icon) var(--ease-standard); transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .b1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .b2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .b3 { transform: translateY(-5px) rotate(-45deg); }
.theme-btn .sun, .theme-btn .moon { transition: transform var(--d-icon) var(--ease-standard), opacity var(--d-icon) var(--ease-standard); transform-origin: 12px 12px; }
.theme-btn .moon { opacity: 0; transform: rotate(-60deg) scale(0.6); }
.is-dark .theme-btn .sun { opacity: 0; transform: rotate(60deg) scale(0.6); }
.is-dark .theme-btn .moon { opacity: 1; transform: none; }

.dropdown {
  position: absolute; top: calc(100% + 12px); right: 0; width: min(640px, calc(100vw - 32px));
  background: var(--raised); border: 1px solid var(--border-deco); border-radius: var(--r-card);
  box-shadow: var(--e2); padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity var(--d-control) var(--ease-standard), transform var(--d-control) var(--ease-standard), visibility 0s linear var(--d-control);
}
.dropdown.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.dd-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--text); }
.dd-item:hover { background: var(--surface); }
.dd-item .micro { font-size: 0.6875rem; }
.dd-item strong { font-size: 1.0625rem; }
.dd-item span.sup { line-height: 1.4; }
.dd-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px 4px; border-top: 1px solid var(--border-deco); margin-top: 4px; flex-wrap: wrap; }

.mnav {
  position: fixed; z-index: 29; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  top: calc(env(safe-area-inset-top, 0px) + 84px); max-height: calc(100dvh - 100px - env(safe-area-inset-top, 0px)); overflow-y: auto;
  background: var(--raised); border: 1px solid var(--border-deco); border-radius: var(--r-card); box-shadow: var(--e3);
  padding: 12px; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity var(--d-control) var(--ease-standard), transform var(--d-control) var(--ease-standard), visibility 0s linear var(--d-control);
}
.mnav.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.mnav a, .mnav .mdisc {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px; border-radius: 14px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.125rem; background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.mnav a:hover, .mnav .mdisc:hover { background: var(--surface); }
.mnav .msub { display: flex; flex-direction: column; padding-left: 12px; }
.mnav .msub a { font-weight: 400; font-size: 1.0625rem; min-height: 48px; }
.mnav .btn { margin-top: 8px; justify-content: center; color: var(--btn-fg); }
.mdisc svg { width: 18px; height: 18px; transition: transform var(--d-icon) var(--ease-standard); }
.mdisc[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (min-width: 1080px) {
  .nav-desk { display: flex; position: relative; }
  .menu-btn { display: none; }
  .h-actions .h-cta { display: flex; }
}

/* ------------------------------------------------- recorte (CutoutHero) */
/* Bolsos com a cor do canvas e filetes côncavos tangentes: o fundo atrás é
   sólido (canvas), então a pintura é íntegra. Ações e foco ficam fora do clipping. */
.notched { padding-top: calc(var(--pocket-h, 76px) + 8px); }
.pocket { position: absolute; background: var(--canvas); z-index: 2; pointer-events: none; }
.pocket::before, .pocket::after { content: ""; position: absolute; width: var(--r-concave); height: var(--r-concave); }
.pocket--tl { top: 0; left: 0; width: var(--pocket-l, 190px); height: var(--pocket-h, 76px); border-bottom-right-radius: var(--r-concave); }
.pocket--tl::before { left: 100%; top: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--r-concave) - 0.5px), var(--canvas) var(--r-concave)); }
.pocket--tl::after { top: 100%; left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--r-concave) - 0.5px), var(--canvas) var(--r-concave)); }
.pocket--tr { top: 0; right: 0; width: var(--pocket-r, 140px); height: var(--pocket-h, 76px); border-bottom-left-radius: var(--r-concave); }
.pocket--tr::before { right: 100%; top: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--r-concave) - 0.5px), var(--canvas) var(--r-concave)); }
.pocket--tr::after { top: 100%; right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--r-concave) - 0.5px), var(--canvas) var(--r-concave)); }
.pocket--br { bottom: 0; right: 0; border-top-left-radius: var(--r-concave); width: var(--sat-w, 0px); height: var(--sat-h, 0px); }
.pocket--br::before { right: 100%; bottom: 0; background: radial-gradient(circle at 0 0, transparent calc(var(--r-concave) - 0.5px), var(--canvas) var(--r-concave)); }
.pocket--br::after { bottom: 100%; right: 0; background: radial-gradient(circle at 0 0, transparent calc(var(--r-concave) - 0.5px), var(--canvas) var(--r-concave)); }

/* satélite: no mobile vira bloco depois do CTA (sem recorte) */
.hero-shell { position: relative; }
.satellite {
  position: relative; z-index: 3; margin-top: var(--frame);
  display: flex; flex-direction: column; gap: 10px; padding: 18px 20px;
  background: var(--raised); border: 1px solid var(--border-deco); border-radius: var(--r-card);
  color: var(--text);
}
.pocket--br { display: none; }
@media (min-width: 1024px) {
  .hero-shell { --sat-w: 380px; --sat-h: 172px; }
  .pocket--br { display: block; }
  .satellite { position: absolute; right: 12px; bottom: 12px; margin: 0; width: calc(var(--sat-w) - 24px); min-height: calc(var(--sat-h) - 24px); justify-content: center; }
}
/* -------------------------------------------------------------- hero */
.hero { min-height: auto; overflow: clip; }
.hero-grid { display: grid; gap: 2rem; padding: 1rem var(--pad-panel) var(--pad-panel); }
.hero-copy { display: flex; flex-direction: column; gap: 1.5rem; justify-content: center; min-width: 0; }
.hero-copy .lead { color: var(--text-2); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-ctas .btn { flex: 1 1 auto; }
.hero-aside-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-weight: 600; }
@media (min-width: 560px) { .hero-ctas .btn { flex: 0 0 auto; } }
@media (min-width: 1024px) {
  .hero--home { min-height: calc(100svh - 112px - env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; flex: 1; padding: 2rem var(--pad-panel) var(--pad-panel); align-items: stretch; }
  .hero--home .hero-grid { padding-bottom: calc(var(--sat-h, 164px) + 8px); }
  .hero--inner .hero-grid { padding-bottom: calc(var(--sat-h, 164px) + 8px); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .hero--home { min-height: auto; }
}

/* plano expressivo (matéria) */
.material {
  position: relative; border-radius: var(--r-media); overflow: hidden; min-height: 320px;
  background: #101113; color: #F5F4F2; isolation: isolate;
}
.material canvas.mat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.material::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); background-size: 220px; opacity: 0.10; mix-blend-mode: overlay;
}
.material > .mat-layer { position: relative; z-index: 2; height: 100%; }
.mat-pause {
  position: absolute; z-index: 4; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 12px; background: rgb(16 17 19 / 0.72);
  color: #F5F4F2; border: 1px solid rgb(245 244 242 / 0.28); cursor: pointer; font-size: var(--fs-sup); font-weight: 600;
  --focus: #72DCE8;
}
.mat-pause svg { width: 16px; height: 16px; }
.hero-material { min-height: 360px; }
@media (min-width: 1024px) { .hero-material { min-height: 100%; } }
.path-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.path-svg .route { stroke-dasharray: var(--len, 1200); stroke-dashoffset: 0; }
.js-motion .path-svg.draw .route { animation: draw var(--d-reveal) var(--ease-expressive) both; animation-duration: 1400ms; }
@keyframes draw { from { stroke-dashoffset: var(--len, 1200); } to { stroke-dashoffset: 0; } }
.mat-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mat-label { position: absolute; display: flex; flex-direction: column; gap: 2px; max-width: 46%; }
.mat-label b { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.12em; font-weight: 500; color: #F5F4F2; }
.mat-label span { font-size: 0.875rem; line-height: 1.35; color: #C9CACD; text-shadow: 0 1px 8px rgb(16 17 19 / 0.8); }

/* ------------------------------------------------ revelação disparada */
.js-motion .rv-pending { opacity: 0.4; transform: translateY(24px); }
.js-motion .rv-in { opacity: 1; transform: none; transition: opacity var(--d-enter) var(--ease-enter), transform var(--d-enter) var(--ease-enter); }

/* ------------------------------------------------- B · gargalo e peças */
.split { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } .split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.numlist { list-style: none; display: flex; flex-direction: column; }
.numlist li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.75rem; padding: 1.25rem 0; border-top: 1px solid var(--border-deco); }
.numlist li:last-child { border-bottom: 1px solid var(--border-deco); }
.numlist .n { font-family: var(--font-mono); font-size: 0.875rem; color: var(--signal-text); padding-top: 0.2rem; letter-spacing: 0.04em; }
.numlist h3 { font-size: 1.1875rem; line-height: 1.35; }
.numlist p { color: var(--text-2); margin-top: 0.25rem; }
.diagram { width: 100%; height: auto; overflow: visible; }
.diagram text { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; fill: var(--text-2); }
.diagram .t-strong { fill: var(--text); }
.figure { display: flex; flex-direction: column; gap: 0.75rem; }
.figure figcaption { font-size: var(--fs-sup); color: var(--text-2); max-width: 60ch; }
.keyline {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; max-width: 28ch;
}
.keyline em { font-style: normal; color: var(--text-2); }
.chain { display: grid; gap: 1.5rem; padding: 1.5rem; border-radius: var(--r-card); background: var(--surface); }
.chain-row { display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .chain-row { grid-template-columns: 11rem 1fr; align-items: center; } }
.chain-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cpill { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.cpill--loose { border: 1px dashed var(--border-control); color: var(--text-2); }
.cpill--on { border: 1px solid var(--text); background: var(--raised); color: var(--text); }
.carrow { width: 36px; height: 12px; color: var(--signal); flex: none; }
.chain-loose .cpill { margin-right: 18px; }
.consequences { display: grid; gap: 1rem; }
@media (min-width: 900px) { .consequences { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.consequences p { padding-top: 1rem; border-top: 1px solid var(--border-deco); font-weight: 600; }

/* ------------------------------------------ C · StickyNarrative (WEB-003) */
.sn { display: grid; gap: 2.5rem; }
.sn-orient { display: flex; flex-direction: column; gap: 1.25rem; }
.sn-steps { list-style: none; display: none; flex-direction: column; margin-top: 0.5rem; }
.sn-steps a {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; padding: 0.875rem 0; border-top: 1px solid var(--border-deco);
  color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 1.125rem; transition: color var(--d-hover) var(--ease-standard);
}
.sn-steps a .micro { color: inherit; padding-top: 0.3rem; }
.sn-steps a[aria-current="step"] { color: var(--text); }
.sn-steps a[aria-current="step"] .micro { color: var(--signal-text); }
.sn-blocks { display: flex; flex-direction: column; gap: 1.5rem; }
.sn-block { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem; border-radius: var(--r-card); background: var(--surface); }
.sn-block-text { display: flex; flex-direction: column; gap: 0.75rem; }
.sn-block-text .micro { color: var(--signal-text); }
.demo { position: relative; border-radius: 18px; background: var(--raised); border: 1px solid var(--border-deco); padding: 1rem; overflow: hidden; }
.demo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 1rem; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; border: 1px solid var(--border-deco); background: var(--surface); }
.seg button { min-height: 40px; padding: 0 14px; border-radius: 9px; border: 0; background: transparent; cursor: pointer; font-weight: 600; font-size: var(--fs-sup); color: var(--text-2); }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: var(--e1); }
@media (min-width: 1024px) and (min-height: 720px) {
  .sn { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; }
  .sn-orient { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; }
  .sn-steps { display: flex; }
  .sn-block { min-height: 70svh; justify-content: center; padding: 2.5rem; }
}

/* demo · presença (antes/depois) */
.site-mock { display: grid; gap: 10px; transition: opacity var(--d-control) var(--ease-standard); }
.sm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface); }
.sm-bar i { display: block; height: 8px; border-radius: 4px; background: var(--border-deco); }
.sm-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.sm-copy { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--surface); }
.sm-copy i { display: block; height: 10px; border-radius: 5px; background: var(--text); opacity: 0.85; }
.sm-copy i.s { height: 7px; opacity: 0.35; }
.sm-copy u { display: block; width: 46%; height: 22px; border-radius: 7px; background: var(--btn-bg); margin-top: 4px; }
.sm-img { border-radius: 12px; min-height: 90px; background: radial-gradient(120% 90% at 80% 90%, rgb(226 103 47 / 0.7), transparent 60%), radial-gradient(90% 90% at 10% 10%, rgb(49 87 213 / 0.55), transparent 60%), #101113; position: relative; overflow: hidden; }
.sm-img::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 160px; opacity: 0.18; mix-blend-mode: overlay; }
.sm-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sm-ch { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid var(--border-deco); }
.sm-ch .micro { font-size: 0.625rem; }
.sm-ch i { display: block; height: 6px; border-radius: 3px; background: var(--text-2); opacity: 0.5; }
.sm-ch b { display: block; width: 18px; height: 18px; border-radius: 5px; background: var(--signal); }
.site-mock[data-state="antes"] .sm-hero { grid-template-columns: 1fr 1.6fr; }
.site-mock[data-state="antes"] .sm-copy i { opacity: 0.4; border-radius: 0; }
.site-mock[data-state="antes"] .sm-copy u { background: #7a7c83; border-radius: 0; width: 30%; }
.site-mock[data-state="antes"] .sm-img { background: repeating-linear-gradient(45deg, var(--border-deco) 0 8px, transparent 8px 16px); }
.site-mock[data-state="antes"] .sm-ch:nth-child(1) b { background: #3157D5; border-radius: 50%; }
.site-mock[data-state="antes"] .sm-ch:nth-child(2) b { background: #8B8D92; border-radius: 0; transform: rotate(12deg); }
.site-mock[data-state="antes"] .sm-ch:nth-child(3) b { background: transparent; border: 2px dashed var(--text-2); }
.site-mock[data-state="antes"] .sm-ch { border-style: dashed; }

/* demo · fluxos (operação e vendas) */
.flow { list-style: none; display: grid; gap: 10px; counter-reset: f; }
.flow li {
  position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border-deco); background: var(--panel);
  transition: border-color var(--d-control) var(--ease-standard), background-color var(--d-control) var(--ease-standard);
}
.flow li .micro { padding-top: 2px; }
.flow li strong { display: block; font-size: 1.0625rem; line-height: 1.35; }
.flow li span.sup { display: block; }
.flow li.on { border-color: var(--signal); }
.flow li.on .micro { color: var(--signal-text); }
.flow li.human { background: var(--surface); }
@media (min-width: 720px) {
  .flow--h { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .flow--h li { grid-template-columns: 1fr; }
}
.demo-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
.play {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--border-control); background: var(--raised); color: var(--text); font-weight: 600; cursor: pointer; font-size: var(--fs-sup);
}
.play svg { width: 16px; height: 16px; }
.pipeline { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow-x: auto; padding-bottom: 4px; }
.pipe-col { display: flex; flex-direction: column; gap: 8px; min-width: 96px; }
.pipe-col .micro { font-size: 0.625rem; letter-spacing: 0.06em; min-height: 2.4em; }
.pipe-slot { position: relative; height: 92px; border-radius: 12px; border: 1px dashed var(--border-deco); background: var(--panel); }
.pipe-card {
  position: absolute; left: 6px; right: 6px; top: 6px; padding: 8px; border-radius: 9px; background: var(--raised);
  border: 1px solid var(--border-control); box-shadow: var(--e1); font-size: 0.8125rem; line-height: 1.3;
}
.pipe-card b { display: block; font-size: 0.8125rem; }
.pipe-card i { display: block; font-style: normal; color: var(--text-2); font-size: 0.75rem; }
.pipe-slot.final { border-color: var(--signal); border-style: solid; }
.layers { display: flex; flex-direction: column-reverse; gap: 6px; }
.layer { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem; align-items: center; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border-deco); background: var(--raised); }
.layer:first-child { border-color: var(--signal); }
.layer strong { display: block; }
.layer span.sup { display: block; }
.inside-note { display: grid; gap: 1.5rem; padding: 1.5rem; border-radius: var(--r-card); border: 1px solid var(--border-deco); }
@media (min-width: 900px) { .inside-note { grid-template-columns: 1fr 1fr; padding: 2rem; gap: 3rem; align-items: center; } }

/* ------------------------------------------- D · famílias (ConnectedModules) */
.fam-grid { display: grid; gap: 12px; }
.fam {
  position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-card); overflow: hidden;
  background: var(--raised); border: 1px solid var(--border-deco); min-width: 0;
}
.fam-media { position: relative; aspect-ratio: 16 / 7; background: #101113; overflow: hidden; }
.fam-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fam-media::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 200px; opacity: 0.12; mix-blend-mode: overlay; pointer-events: none; }
.fam-media .micro { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #F5F4F2; letter-spacing: 0.14em; }
.fam-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; }
.fam-needs { display: flex; flex-wrap: wrap; gap: 6px; }
.fam ul { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 0.25rem; }
.fam ul li { position: relative; padding-left: 16px; color: var(--text); }
.fam ul li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 6px; height: 6px; border-radius: 1px; background: var(--signal); }
.fam .chev { margin-top: auto; }
@media (min-width: 768px) {
  .fam-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .fam { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .fam:nth-child(1) { grid-column: 1 / span 7; }
  .fam:nth-child(2) { grid-column: 8 / span 5; }
  .fam:nth-child(3) { grid-column: 1 / span 5; }
  .fam:nth-child(4) { grid-column: 6 / span 7; }
  .fam:nth-child(5) { grid-column: 1 / span 7; }
  .fam:nth-child(6) { grid-column: 8 / span 5; }
  .fam-body { padding: 1.75rem; }
  .fam:nth-child(2) .fam-media, .fam:nth-child(3) .fam-media, .fam:nth-child(6) .fam-media { aspect-ratio: 16 / 9; }
}
.fam-intro { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
@media (min-width: 1024px) { .fam-intro { grid-template-columns: 7fr 5fr; align-items: end; gap: 4rem; } }

/* --------------------------------------------------- E · mosaico (WEB-025) */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mcell { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-media); overflow: hidden; min-width: 0; }
.mcell--text { aspect-ratio: auto; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1rem; justify-content: flex-end; padding: 0.25rem 0 1rem; border-radius: 0; }
.mcell--void { display: none; }
.mcell--note { aspect-ratio: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; padding: 1.25rem; background: var(--surface); }
.mcell--wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.mcap {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 14px; background: var(--raised); color: var(--text); border: 1px solid var(--border-deco);
}
.mcap b { font-size: 0.9375rem; line-height: 1.3; }
.mcap .micro { font-size: 0.625rem; }
.comp { position: absolute; inset: 0; }
@media (min-width: 640px) { .mcell--note { aspect-ratio: 1 / 1; } }
@media (min-width: 1024px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .mcell--void { display: block; background: var(--surface); }
  .mcell--void.clear { background: transparent; box-shadow: inset 0 0 0 1px var(--border-deco); }
  .mcell--text { grid-column: span 3; padding: 0 2rem 1.5rem 0; }
  .mcell--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
  .mcell--note { grid-column: span 1; }
}

/* composições conceituais (código, sem imagens de terceiros) */
.comp-site { background: var(--surface); padding: 14% 10% 0; }
.comp-site .cs-win { height: 100%; border-radius: 14px 14px 0 0; background: var(--raised); border: 1px solid var(--border-deco); border-bottom: 0; padding: 7%; display: grid; grid-template-rows: auto 1fr; gap: 8%; }
.cs-nav { display: flex; justify-content: space-between; align-items: center; }
.cs-nav i { display: block; width: 26%; height: 8px; border-radius: 4px; background: var(--text); }
.cs-nav s { display: block; width: 18%; height: 14px; border-radius: 5px; background: var(--btn-bg); }
.cs-hero { border-radius: 10px; background: radial-gradient(90% 120% at 90% 100%, rgb(226 103 47 / 0.75), transparent 55%), radial-gradient(80% 90% at 0% 0%, rgb(49 87 213 / 0.6), transparent 60%), #101113; position: relative; }
.cs-hero::before { content: ""; position: absolute; left: 9%; top: 18%; width: 48%; height: 10px; border-radius: 5px; background: #F5F4F2; box-shadow: 0 18px 0 #F5F4F2, 0 36px 0 rgb(245 244 242 / 0.5); }
.comp-flow { background: #101113; color: #F5F4F2; display: grid; place-items: center; padding: 12%; }
.comp-flow svg { width: 100%; height: auto; }
.comp-film { background: #101113; }
.comp-film canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.comp-film::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 200px; opacity: 0.16; mix-blend-mode: overlay; pointer-events: none; }
.slate {
  position: absolute; z-index: 2; left: 12px; top: 12px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em;
  color: #F5F4F2; padding: 4px 8px; border-radius: 6px; background: rgb(16 17 19 / 0.6); text-transform: uppercase;
}
.letterbox::before, .letterbox::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; background: #08090A; z-index: 2; }
.letterbox::before { top: 0; } .letterbox::after { bottom: 0; }
.comp-vertical { background: var(--surface); display: grid; place-items: center; }
.phone { width: 46%; aspect-ratio: 9 / 16; border-radius: 18px; background: #101113; position: relative; overflow: hidden; border: 4px solid #232428; }
.phone canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone .hook { position: absolute; left: 8%; right: 8%; top: 12%; z-index: 2; font-weight: 700; color: #F5F4F2; font-size: 0.75rem; line-height: 1.2; }
.phone .hook small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.5625rem; letter-spacing: 0.1em; color: #C9CACD; margin-bottom: 4px; }

/* MediaWindow · WEB-010 */
.mwin { position: relative; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 16 / 9; background: #101113; margin-top: 16px; }
.mwin-inner { position: absolute; inset: -8% 0; will-change: auto; }
.mwin-inner canvas { width: 100%; height: 100%; }
.mwin::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 220px; opacity: 0.14; mix-blend-mode: overlay; pointer-events: none; }
.mwin .mcap { max-width: 420px; }
@media (max-width: 639px) { .mwin { aspect-ratio: 4 / 5; } }

/* -------------------------------------- F · Diagnosis (FrostedCard WEB-032) */
.frost { position: relative; padding: 12px 0 0 12px; }
.frost-back {
  position: absolute; inset: 0 12px 12px 0; border-radius: calc(var(--r-card) + 8px); overflow: hidden;
  background: radial-gradient(70% 90% at 85% 15%, rgb(226 103 47 / 0.85), transparent 60%), radial-gradient(70% 80% at 10% 90%, rgb(49 87 213 / 0.7), transparent 65%), #17181B;
}
.frost-back::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 200px; opacity: 0.2; mix-blend-mode: overlay; }
.frost-front { position: relative; z-index: 1; display: flex; flex-direction: column; }
.frost-tab {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 8px; border-radius: 16px 16px 0 0;
  background: rgb(250 250 249 / 0.62); color: #101113; border: 1px solid rgb(255 255 255 / 0.5); border-bottom: 0;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .frost-tab { background: #F1F0EE; } }
.frost-read {
  border-radius: 0 var(--r-card) var(--r-card) var(--r-card); background: var(--raised); color: var(--text);
  box-shadow: var(--e3), inset 0 1px 0 rgb(255 255 255 / 0.25); padding: 1.5rem; display: grid; gap: 2rem; border: 1px solid var(--border-deco);
}
@media (min-width: 1024px) { .frost-read { padding: 3rem; grid-template-columns: 6fr 5fr; gap: 3.5rem; } }
.big-quote { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.12; letter-spacing: -0.012em; font-weight: 700; max-width: 22ch; }
.answer { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 12px; }
.answer::before { content: ""; width: 12px; height: 12px; border-radius: 2px; background: var(--signal); }
.steps4 { list-style: none; display: grid; gap: 0; }
.steps4 li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.5rem; padding: 0.875rem 0; border-top: 1px solid var(--border-deco); }
.steps4 li .micro { color: var(--signal-text); padding-top: 0.25rem; }
.steps4 strong { display: block; }
.steps4 span.sup { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--border-control); background: var(--raised); color: var(--text); font-weight: 600; cursor: pointer; font-size: 0.9375rem;
  transition: background-color var(--d-hover) var(--ease-standard), border-color var(--d-hover) var(--ease-standard);
}
.chip svg { width: 16px; height: 16px; display: none; }
.chip[aria-pressed="true"] { border-color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--text); }
.chip[aria-pressed="true"] svg { display: block; }
fieldset.chipset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
fieldset.chipset legend { padding: 0; font-weight: 600; margin-bottom: 0.75rem; }

/* ----------------------------------------------- G · percurso (Journey) */
.journey { position: relative; display: grid; gap: 0; list-style: none; }
.jnode { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding-bottom: 2rem; }
.jnode::before { content: ""; position: absolute; left: calc(1.75rem - 1px); top: 2.5rem; bottom: 0; width: 2px; background: var(--border-control); opacity: 0.5; }
.jnode:last-child::before { display: none; }
.jdot { width: 3.5rem; height: 3.5rem; border-radius: 16px; display: grid; place-items: center; border: 2px solid var(--border-control); background: var(--panel); font-family: var(--font-mono); font-size: 0.875rem; color: var(--text); position: relative; z-index: 1; transition: border-color var(--d-hover) var(--ease-standard); }
.jnode:last-child .jdot { background: var(--signal); border-color: var(--signal); color: #101113; border-radius: 50%; }
.jtext { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.6rem; }
.jtext h3 { font-size: 1.5rem; transition: color var(--d-hover) var(--ease-standard); }
.jtext p { color: var(--text-2); max-width: 40ch; }
.journey.has-focus .jnode:not(.is-focus) h3 { color: var(--text-2); }
.journey .jnode.is-focus .jdot { border-color: var(--text); }
@media (min-width: 1024px) {
  .journey { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .jnode { grid-template-columns: 1fr; padding-bottom: 0; gap: 1.25rem; }
  .jnode::before { left: 3.5rem; right: -2rem; top: calc(1.75rem - 1px); bottom: auto; width: auto; height: 2px; }
  .jnode:nth-child(3)::before { background: var(--signal); opacity: 1; }
  .jtext { padding-top: 0; }
}
.args { display: grid; gap: 0; margin-top: 3.5rem; }
.arg { display: grid; gap: 0.75rem; padding: 1.5rem 0; border-top: 1px solid var(--border-deco); }
.arg .micro { color: var(--signal-text); }
.arg p { color: var(--text-2); max-width: 46ch; }
@media (min-width: 900px) {
  .args { grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .arg:nth-child(odd) { transform: none; }
}
@media (min-width: 1200px) { .args { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.5rem; } }
.arg { align-content: start; }

/* -------------------------------------------- H · accordion (WEB-012) */
.acc { display: flex; flex-direction: column; }
.acc-item { border-top: 1px solid var(--border-deco); }
.acc-item:last-child { border-bottom: 1px solid var(--border-deco); }
.acc-item h3 { font-size: 1.1875rem; }
.acc-btn {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 1rem;
  padding: 1rem 0; border: 0; background: transparent; color: var(--text); font-weight: 700; font-size: 1.1875rem; line-height: 1.35;
  text-align: left; cursor: pointer;
}
.acc-ico { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border-deco); display: grid; place-items: center; transition: background-color var(--d-hover) var(--ease-standard); }
.acc-ico svg { width: 18px; height: 18px; transition: transform var(--d-icon) var(--ease-standard); }
.acc-btn[aria-expanded="true"] .acc-ico svg { transform: rotate(45deg); }
.acc-btn[aria-expanded="true"] .acc-ico { background: var(--surface); }
.acc-panel { overflow: hidden; }
.acc-panel-inner { padding: 0 3.5rem 1.5rem 0; color: var(--text-2); display: flex; flex-direction: column; gap: 0.75rem; max-width: 70ch; transition: opacity 180ms var(--ease-standard); }
.acc-panel-inner p { color: var(--text-2); }
.faq-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 4fr 8fr; gap: 4rem; } }

/* -------------------------------------------- I · fechamento e rodapé */
.closing { overflow: clip; }
.closing-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .closing-grid { grid-template-columns: 7fr 5fr; gap: 3rem; align-items: stretch; } }
.closing-material { min-height: 280px; }
.contact-table { display: flex; flex-direction: column; }
.ct-row { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 0.75rem; min-height: 56px; border-top: 1px solid var(--border-deco); padding: 6px 0; }
.ct-row:last-child { border-bottom: 1px solid var(--border-deco); }
.ct-row .val { font-weight: 600; overflow-wrap: anywhere; user-select: all; }
.copy-btn { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border-deco); background: transparent; color: var(--text); cursor: pointer; font-size: var(--fs-sup); font-weight: 600; }
.copy-btn:hover { border-color: var(--border-control); }
@media (max-width: 420px) { .ct-row { grid-template-columns: 1fr auto; } .ct-row .micro { grid-column: 1 / -1; } }
.lettering {
  font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; font-size: clamp(2.5rem, 0.5rem + 6.6vw, 8rem);
  background: linear-gradient(180deg, var(--text) 10%, transparent 92%); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0.16; user-select: none; padding-bottom: 0.1em; max-width: 100%;
}
.footer { display: grid; gap: 2rem; padding-top: 2.5rem; border-top: 1px solid var(--border-deco); }
.footer-cols { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
.footer h2 { font-size: 0.75rem; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 0.75rem; }
.footer ul a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text); text-decoration: none; }
.footer ul a:hover { text-decoration: underline; }
.foot-brand { display: flex; flex-direction: column; gap: 1rem; max-width: 34ch; }
.foot-brand img { width: 160px; height: auto; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--border-deco); }
@media (min-width: 900px) { .footer { grid-template-columns: 4fr 8fr; } .footer-cols { grid-template-columns: repeat(3, 1fr); } .foot-legal { grid-column: 1 / -1; } }

/* ---------------------------------------------------- páginas internas */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-sup); color: var(--text-2); }
.crumbs a { color: var(--text-2); min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--text); }
.situations { list-style: none; display: grid; gap: 0; }
.situations li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid var(--border-deco); font-size: 1.125rem; line-height: 1.45; }
.situations li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--signal); margin-top: 0.5rem; }
.situations li:last-child { border-bottom: 1px solid var(--border-deco); }
.deliv { display: grid; gap: 12px; }
.dgroup { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border-radius: var(--r-card); background: var(--surface); }
.dgroup ul { list-style: none; display: flex; flex-direction: column; }
.dgroup li { padding: 0.5rem 0; border-top: 1px solid var(--border-deco); line-height: 1.4; }
.dgroup li span { display: block; font-size: var(--fs-sup); color: var(--text-2); }
@media (min-width: 768px) { .deliv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) {
  .deliv--4 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .deliv--4 .dgroup:nth-child(1) { grid-column: span 5; }
  .deliv--4 .dgroup:nth-child(2) { grid-column: span 7; }
  .deliv--4 .dgroup:nth-child(3) { grid-column: span 7; }
  .deliv--4 .dgroup:nth-child(4) { grid-column: span 5; }
  .deliv--4 .dgroup:nth-child(5) { grid-column: span 12; }
}
.approach { list-style: none; display: grid; gap: 12px; counter-reset: s; }
.approach li { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; border-radius: 20px; border: 1px solid var(--border-deco); background: var(--raised); }
.approach li .micro { color: var(--signal-text); }
@media (min-width: 900px) { .approach { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.conn { display: grid; gap: 12px; }
.conn a {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; border-radius: 20px; background: var(--surface);
  color: var(--text); text-decoration: none; border: 1px solid transparent; transition: border-color var(--d-hover) var(--ease-standard), box-shadow var(--d-hover) var(--ease-standard);
}
.conn a:hover { border-color: var(--border-control); box-shadow: var(--e1); }
.conn a p { color: var(--text-2); }
@media (min-width: 768px) { .conn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cta-panel .wrap { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .cta-panel .wrap { grid-template-columns: 7fr 5fr; align-items: end; } }

/* console demonstrativo · WEB-031 */
.console { display: grid; gap: 12px; padding: 12px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--border-deco); }
.con-main, .con-side { background: var(--raised); border-radius: 16px; border: 1px solid var(--border-deco); padding: 1rem; min-width: 0; }
.con-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 0.75rem; }
.con-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.con-table th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); padding: 8px 8px; border-bottom: 1px solid var(--border-deco); }
.con-table td { padding: 0; border-bottom: 1px solid var(--border-deco); }
.con-table td button, .con-table td span { display: block; width: 100%; text-align: left; padding: 12px 8px; background: transparent; border: 0; cursor: pointer; color: var(--text); min-height: 44px; }
.con-table tr[aria-selected="true"] td { background: var(--surface); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-control); }
.status.s-new::before { background: var(--cold); }
.status.s-wait::before { background: var(--signal); }
.status.s-ok::before { background: #2E8F6E; }
.con-side dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 0.9375rem; }
.con-side dt { color: var(--text-2); }
.con-side dd { font-weight: 600; }
.table-scroll { overflow-x: auto; }
@media (min-width: 900px) { .console { grid-template-columns: 7fr 4fr; } }

/* hub / constelação */
.hub-wrap { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .hub-wrap { grid-template-columns: 6fr 5fr; align-items: center; gap: 3rem; } }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; line-height: 1.45; font-size: 0.9375rem; }
.msg small { display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 2px; }
.msg.client { align-self: flex-end; background: var(--surface); }
.msg.agent { align-self: flex-start; background: var(--raised); border: 1px solid var(--border-deco); }
.msg.human { align-self: flex-start; background: var(--raised); border: 1px solid var(--signal); }
.msg.sys { align-self: center; background: transparent; color: var(--text-2); font-size: 0.8125rem; text-align: center; }
.chat .msg.hidden-step { display: none; }

/* lista de foco · WEB-008 */
.focuslist { list-style: none; display: flex; flex-direction: column; }
.focuslist li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--border-deco); align-items: baseline; }
.focuslist li:last-child { border-bottom: 1px solid var(--border-deco); }
.focuslist .fl-term { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; color: var(--text-2); transition: color var(--d-hover) var(--ease-standard); }
.focuslist li.is-focus .fl-term { color: var(--text); }
.focuslist li.is-focus .micro { color: var(--signal-text); }
.focuslist p { grid-column: 2; color: var(--text-2); max-width: 52ch; }
@media (max-width: 560px) { .focuslist li { grid-template-columns: 1fr; } .focuslist p { grid-column: 1; } }

/* galeria em perspectiva · WEB-002 M07 */
.pgal { position: relative; }
.pgal-stage { position: relative; height: clamp(260px, 42vw, 460px); perspective: 1400px; overflow: hidden; }
.pgal-card {
  position: absolute; top: 6%; left: 50%; width: min(62%, 560px); aspect-ratio: 16 / 9; margin-left: calc(min(62%, 560px) / -2);
  border-radius: 20px; overflow: hidden; background: #101113; transition: transform var(--d-page) var(--ease-expressive), opacity var(--d-page) var(--ease-expressive);
  box-shadow: var(--e2);
}
.pgal-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pgal-card::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 200px; opacity: 0.16; mix-blend-mode: overlay; pointer-events: none; }
.pgal-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.pgal-cap { min-height: 3.5em; }
@media (max-width: 639px) { .pgal-card { width: 84%; margin-left: -42%; } }

/* accordion de imagens · WEB-009 M30 */
.iacc { display: flex; gap: 10px; height: 420px; }
.iacc-item { position: relative; flex: 1 1 0; min-width: 0; border-radius: 20px; overflow: hidden; background: #101113; transition: flex-grow var(--d-gallery) var(--ease-standard); color: #F5F4F2; --focus: #72DCE8; }
.iacc-item.active { flex-grow: 3; }
.iacc-item canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.iacc-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(12 20 28 / 0.78) 100%); pointer-events: none; }
.iacc-sel { position: absolute; inset: 0; z-index: 3; border: 0; background: transparent; cursor: pointer; border-radius: 20px; }
.iacc-sel:focus-visible { outline-offset: -4px; }
.iacc-cap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.iacc-cap b { font-size: 1.125rem; line-height: 1.25; }
.iacc-cap span { font-size: 0.9375rem; line-height: 1.4; color: #D8D9DB; display: none; }
.iacc-item.active .iacc-cap span { display: block; }
@media (max-width: 767px) {
  .iacc { flex-direction: column; height: auto; }
  .iacc-item { flex: none; height: 120px; }
  .iacc-item.active { height: 220px; }
}

/* colunas em perspectiva · WEB-007 M28 */
.pcols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; perspective: 1200px; }
.pcol { display: flex; flex-direction: column; gap: 16px; }
.pcol:nth-child(2) { margin-top: 18%; }
.pframe { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #101113; transform-origin: 50% 50%; will-change: auto; }
.pframe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pframe .hook { position: absolute; left: 10%; right: 10%; top: 9%; z-index: 2; color: #F5F4F2; font-weight: 700; font-size: clamp(0.875rem, 0.6rem + 0.8vw, 1.25rem); line-height: 1.2; }
.pframe .hook small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.625rem; letter-spacing: 0.1em; color: #C9CACD; margin-bottom: 6px; text-transform: uppercase; }
.pframe::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 200px; opacity: 0.14; mix-blend-mode: overlay; pointer-events: none; }
@media (max-width: 599px) { .pcols { grid-template-columns: 1fr; } .pcol:nth-child(2) { margin-top: 0; } }

/* ViewSwitch · WEB-002 M11 */
.vswitch { display: flex; flex-direction: column; gap: 2rem; }
.vview { transition: opacity var(--d-page) var(--ease-standard); }
.vview.fading { opacity: 0; }
.need-block { display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: var(--r-card); background: var(--surface); }
@media (min-width: 1024px) { .need-block { grid-template-columns: 4fr 8fr; gap: 3rem; padding: 2.5rem; } }
.need-fams { display: grid; gap: 10px; }
@media (min-width: 640px) { .need-fams { grid-template-columns: 1fr 1fr; } }
.need-fams a { display: flex; flex-direction: column; gap: 4px; padding: 1rem 1.25rem; border-radius: 16px; background: var(--raised); color: var(--text); text-decoration: none; border: 1px solid var(--border-deco); }
.need-fams a:hover { border-color: var(--border-control); }
.need-fams a span { color: var(--text-2); font-size: 0.9375rem; line-height: 1.4; }
.famlist { display: grid; gap: 12px; }
@media (min-width: 768px) { .famlist { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .famlist { grid-template-columns: repeat(3, 1fr); } .famlist > :nth-child(1) { grid-column: span 2; } .famlist > :nth-child(6) { grid-column: span 2; } }
.famcard { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; border-radius: var(--r-card); background: var(--raised); border: 1px solid var(--border-deco); }
.famcard ul { list-style: none; columns: 1; }
.famcard li { padding: 0.375rem 0; border-top: 1px solid var(--border-deco); line-height: 1.4; break-inside: avoid; }
@media (min-width: 1200px) { .famlist > :nth-child(1) ul, .famlist > :nth-child(6) ul { columns: 2; column-gap: 2rem; } }

/* ParticleMorph · WEB-002 M12 */
.pm-wrap { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .pm-wrap { grid-template-columns: 5fr 7fr; align-items: center; gap: 3rem; } }
.pm-stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-media); overflow: hidden; background: #101113; }
.pm-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-stage::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 200px; opacity: 0.12; mix-blend-mode: overlay; pointer-events: none; }
.pm-label { position: absolute; left: 14px; bottom: 14px; z-index: 2; color: #F5F4F2; }
.pm-label .micro { color: #C9CACD; }

/* formulário de contato */
.form-grid { display: grid; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field legend { font-weight: 600; font-size: 1rem; line-height: 1.5; }
.field .opt { font-weight: 400; color: var(--text-2); }
.input, .textarea, .select {
  width: 100%; min-height: 48px; padding: 11px 16px; border-radius: var(--r-control); border: 1px solid var(--border-control);
  background: var(--raised); color: var(--text); font-size: 1.0625rem; line-height: 1.5;
  transition: border-color var(--d-hover) var(--ease-standard), box-shadow var(--d-hover) var(--ease-standard);
}
.textarea { min-height: 144px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.input::placeholder, .textarea::placeholder { color: var(--text-2); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--error-fg); box-shadow: inset 0 0 0 1px var(--error-fg); }
.hint { font-size: var(--fs-sup); color: var(--text-2); }
.err { font-size: var(--fs-sup); color: var(--error-fg); font-weight: 600; display: flex; gap: 6px; align-items: flex-start; }
.err svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.radio { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border-control); background: var(--raised); cursor: pointer; font-weight: 600; }
.radio input { width: 20px; height: 20px; accent-color: var(--text); margin: 0; }
.radio:has(input:checked) { box-shadow: inset 0 0 0 1px var(--text); border-color: var(--text); background: var(--surface); }
.radio:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.err-summary { padding: 1rem 1.25rem; border-radius: 16px; background: var(--error-bg); color: var(--error-fg); border: 1px solid currentColor; }
.err-summary ul { margin-top: 0.5rem; padding-left: 1.25rem; }
.err-summary a { color: inherit; font-weight: 600; }
.preview { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-deco); }
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--info-bg); color: var(--info-fg); font-size: 0.9375rem; line-height: 1.45; }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.contact-layout { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; } }
.ctx-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-deco); font-size: 0.9375rem; }

/* ASCII volume · WEB-004 */
.ascii-stage { position: absolute; inset: 0; }
.ascii-stage canvas { width: 100%; height: 100%; }

/* --------------------------------------------- transição de tema · WEB-005 */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-wipe::view-transition-new(root) { animation: wipe-up var(--d-theme) var(--ease-standard); }
@keyframes wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ----------------------------------------------------- movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js-motion .rv-pending { opacity: 1; transform: none; }
  .btn, .chev .shaft, .navlink::after, .dropdown, .mnav, .flow li, .vview, .pgal-card, .iacc-item, .acc-panel-inner { transition-duration: 1ms !important; }
  .pgal-card { transform: none !important; }
  .pframe { transform: none !important; }
}
@media (forced-colors: active) {
  .btn, .chip, .radio, .input, .textarea, .icon-btn { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}

/* correções de reflow */
.footer > *, .footer-cols > *, .closing-grid > *, .split > *, .sn > *, .faq-grid > * { min-width: 0; }
.footer ul a { overflow-wrap: anywhere; }

.hero-needs { display: flex; flex-direction: column; gap: 10px; margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-deco); }
.need-link { text-decoration: none; min-height: 44px; transition: border-color var(--d-hover) var(--ease-standard), color var(--d-hover) var(--ease-standard); }
.need-link:hover { border-style: solid; color: var(--text); }
@media (max-width: 1023px) { .hero-material { aspect-ratio: 4 / 5; min-height: 0; max-height: 640px; } }
@media (max-width: 639px) {
  .pipeline { grid-template-columns: 1fr; overflow: visible; }
  .pipe-col { flex-direction: row; align-items: center; min-width: 0; }
  .pipe-col .micro { width: 7.5rem; flex: none; min-height: 0; }
  .pipe-slot { flex: 1; height: 60px; }
}

/* ===================== revisão 2: homepage em cinco blocos ===================== */
.block-title { margin-bottom: clamp(2rem, 4vw, 3rem); }
/* O que fazemos: quatro módulos conectados, zigue-zague assimétrico */
.svc-grid { display: grid; gap: 12px; }
.svc { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-card); overflow: hidden; background: var(--raised); border: 1px solid var(--border-deco); min-width: 0; }
.svc .fam-media { aspect-ratio: 16 / 7; }
.svc-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; }
.svc-body .muted { max-width: 44ch; }
.svc-links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; }
.svc-more { font-size: var(--fs-sup); color: var(--text-2); }
.svc-more a { color: var(--text); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 768px) {
  .svc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .svc { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .svc:nth-child(1) { grid-column: 1 / span 7; }
  .svc:nth-child(2) { grid-column: 8 / span 5; }
  .svc:nth-child(3) { grid-column: 1 / span 5; }
  .svc:nth-child(4) { grid-column: 6 / span 7; }
  .svc:nth-child(2) .fam-media, .svc:nth-child(3) .fam-media { aspect-ratio: 16 / 9.6; }
  .svc-body { padding: 1.75rem; }
}
/* mini console no mosaico */
.comp-console { background: #101113; padding: 12% 10%; display: flex; align-items: center; }
.mc-win { width: 100%; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 6px; }
.mc-row { grid-column: 1; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; background: #232428; color: #F5F4F2; font-size: 0.6875rem; }
.mc-row:first-child { box-shadow: inset 0 0 0 1px #E2672F; }
.mc-row b { font-weight: 600; }
.mc-row .status { font-size: 0.625rem; color: #C9CACD; }
.mc-side { grid-column: 2; grid-row: 1 / span 3; border-radius: 8px; background: #17181B; padding: 9px; display: flex; flex-direction: column; gap: 6px; }
.mc-side i { display: block; height: 6px; border-radius: 3px; background: #34353B; }
.mc-side i:first-child { width: 60%; background: #8B8D92; }
.mosaic .mcap { left: 10px; right: auto; max-width: calc(100% - 20px); padding: 8px 12px; }
.mosaic .mcell--text { gap: 0.5rem; }
/* Como começamos */
.start-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .start-grid { grid-template-columns: 8fr 4fr; gap: 3rem; align-items: end; } }
@media (min-width: 1024px) {
  .journey--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journey--3 .jnode:nth-child(3)::before { background: var(--border-control); opacity: 0.5; }
  .journey--3 .jnode:nth-child(2)::before { background: var(--signal); opacity: 1; }
}
.frost--sm .frost-read { padding: 1.5rem; box-shadow: var(--e2), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.alt-channel a { color: var(--text); font-weight: 600; }
.closing .hero-ctas { margin-top: 0.5rem; }
/* páginas internas */
.deliv-main { list-style: none; display: grid; gap: 0; margin-bottom: 1.5rem; }
.deliv-main li { display: grid; gap: 0.25rem; padding: 1.25rem 0; border-top: 1px solid var(--border-deco); }
@media (min-width: 900px) {
  .deliv-main { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .deliv-main li:nth-child(odd):last-child { grid-column: 1 / -1; }
}
.full-list { list-style: none; columns: 1; column-gap: 2rem; color: var(--text-2); }
.full-list li { padding: 0.3rem 0; break-inside: avoid; }
@media (min-width: 640px) { .full-list { columns: 2; } }
@media (min-width: 1024px) { .full-list { columns: 3; } }
.vis-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.vis-split { display: grid; gap: 16px; }
@media (min-width: 1024px) { .vis-split { grid-template-columns: 5fr 7fr; align-items: start; } }
.vis-split .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.areas { list-style: none; display: grid; gap: 0; }
.areas li { padding: 0.875rem 0; border-top: 1px solid var(--border-deco); display: grid; gap: 0.15rem; }
@media (min-width: 640px) { .areas { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.hero .h-hero { max-width: 16ch; }
.satellite .h4 { max-width: 26ch; }
.hero--inner .satellite .chev { min-height: 40px; }

.mc-row b, .mc-row .status { white-space: nowrap; }
.mc-row { padding: 7px 8px; font-size: 0.625rem; }
@media (min-width: 1024px) {
  .hero--home .hero-grid, .hero--inner .hero-grid { padding-bottom: var(--pad-panel); }
  .hero--home .hero-material, .hero--inner .hero-material { min-height: 0; height: auto; margin-bottom: calc(var(--sat-h) + 8px - var(--pad-panel)); }
}


/* ===================== revisão 3: hero cinematográfica (home) ===================== */
/* Moldura: mesma superfície grafite com recortes superiores; borda inferior contínua.
   O clipping fica só na camada de mídia; conteúdo, foco e botões ficam fora dele. */
.hero--cine { overflow: visible; display: flex; flex-direction: column; }
.hero-media { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; background: #101113; pointer-events: none; }
.hero-poster, .hero-video, .hero-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-video { object-fit: cover; object-position: 70% 50%; }
/* poster estático provisório: grafite com luz quente concentrada no centro-direita,
   contraluz fria discreta, topo e esquerda calmos */
.hero-poster {
  background-color: #101113;
  background-image:
    radial-gradient(60% 75% at 74% 64%, rgb(226 103 47 / 0.55) 0%, rgb(166 57 44 / 0.28) 38%, rgb(16 17 19 / 0) 72%),
    radial-gradient(38% 46% at 86% 34%, rgb(49 87 213 / 0.32) 0%, rgb(16 17 19 / 0) 70%),
    radial-gradient(22% 30% at 68% 70%, rgb(255 180 138 / 0.22) 0%, rgb(16 17 19 / 0) 70%),
    linear-gradient(180deg, #101113 0%, #141519 100%);
  background-size: cover; background-position: center;
}
.hero-poster.has-image { background-image: none; background-size: cover; background-position: 70% 50%; }
.hero-poster::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 220px; opacity: 0.09; mix-blend-mode: overlay; }
/* scrim gradual: protege a leitura à esquerda e o topo, sem divisão vertical */
.hero-scrim {
  background:
    linear-gradient(180deg, rgb(16 17 19 / 0.55) 0%, rgb(16 17 19 / 0) 22%),
    linear-gradient(90deg, rgb(16 17 19 / 0.86) 0%, rgb(16 17 19 / 0.72) 28%, rgb(16 17 19 / 0.38) 50%, rgb(16 17 19 / 0.08) 68%, rgb(16 17 19 / 0) 80%);
}
.hero--cine .pocket { z-index: 2; }
.hero-content {
  position: relative; z-index: 3; display: flex; flex-direction: column; gap: 1.5rem; min-width: 0;
  padding: 1rem var(--pad-panel) var(--pad-panel); max-width: 100%;
}
.h-cine { font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.75rem); line-height: 1.02; letter-spacing: -0.02em; font-weight: 700; max-width: 19ch; text-wrap: balance; }
.hero-lead { color: #C9CACD; max-width: 44ch; }
.hero-sign { margin-top: 0.75rem; font-size: 1rem; font-weight: 600; color: #A9ABB0; display: flex; align-items: center; gap: 10px; }
.hero-sign::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--signal); flex: none; }
.hero-pause { top: auto; bottom: 16px; right: 16px; z-index: 4; }

/* mobile: uma coluna; a região expressiva da mídia aparece abaixo do texto */
@media (max-width: 767px) {
  .hero-content { padding: 0.5rem var(--pad-panel) clamp(180px, 52vw, 280px); }
  .hero-video { object-position: 50% 100%; }
  .hero-poster:not(.has-image) {
    background-image:
      radial-gradient(90% 55% at 62% 92%, rgb(226 103 47 / 0.6) 0%, rgb(166 57 44 / 0.28) 40%, rgb(16 17 19 / 0) 75%),
      radial-gradient(60% 35% at 92% 70%, rgb(49 87 213 / 0.3) 0%, rgb(16 17 19 / 0) 70%),
      linear-gradient(180deg, #101113 0%, #141519 100%);
  }
  .hero-poster.has-image { background-position: 50% 100%; }
  .hero-scrim { background: linear-gradient(180deg, rgb(16 17 19 / 0.82) 0%, rgb(16 17 19 / 0.7) 40%, rgb(16 17 19 / 0.2) 70%, rgb(16 17 19 / 0) 85%); }
  .hero-ctas .btn { flex: 1 1 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-content { padding-bottom: clamp(140px, 22vw, 220px); max-width: 640px; }
}
/* desktop: conteúdo na base, coluna esquerda; altura mínima de tela, cresce com o conteúdo */
@media (min-width: 1024px) {
  .hero--cine { min-height: min(calc(100svh - 112px - env(safe-area-inset-top, 0px)), 920px); }
  .hero-content { flex: 1; justify-content: flex-end; padding: 3rem var(--pad-panel) calc(var(--pad-panel) + 0.5rem); max-width: min(66%, 920px); }
}
@media (min-width: 1024px) and (max-height: 700px) { .hero--cine { min-height: auto; } }

/* ===================== revisão 4: homepage 1.4 (wireframe) ===================== */
/* Faixa escura contínua: hero com imagem + Nossos serviços (sangra até as bordas) */
.home-band {
  --band: #101113;
  margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  margin-top: -16px;
  background: var(--band); color: #F5F4F2;
  border-radius: 0 0 var(--r-section) var(--r-section);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-band { --panel: #101113; } }
:root[data-theme="dark"] .home-band { --panel: #101113; }

/* MediaHero: imagem contínua, conteúdo HTML por cima, clipping só na mídia */
.mhero { position: relative; isolation: isolate; }
.mhero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mhero-img, .mhero-media .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% 42%; max-width: none; }
.mhero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(16 17 19 / 0.5) 0%, rgb(16 17 19 / 0) 16%),
    radial-gradient(48% 46% at 14% 40%, rgb(16 17 19 / 0.62) 0%, rgb(16 17 19 / 0.3) 55%, rgb(16 17 19 / 0) 80%),
    radial-gradient(34% 34% at 94% 90%, rgb(16 17 19 / 0.62) 0%, rgb(16 17 19 / 0) 75%),
    linear-gradient(180deg, rgb(16 17 19 / 0) 74%, var(--band) 100%);
}
.mhero-inner {
  position: relative; z-index: 2; min-height: min(100svh, 980px);
  display: grid; grid-template-rows: 1fr auto; gap: 3rem;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 4rem) max(var(--pad-panel), env(safe-area-inset-right, 0px)) clamp(4rem, 9vh, 7rem) max(var(--pad-panel), env(safe-area-inset-left, 0px));
  width: 100%; max-width: calc(var(--max) + 2 * var(--pad-panel)); margin-inline: auto;
}
.mhero-title {
  align-self: start; font-size: clamp(2.25rem, 1.3rem + 2.4vw, 3.75rem); line-height: 1.06; letter-spacing: -0.018em;
  font-weight: 700; max-width: 14ch; color: #F5F4F2; text-shadow: 0 1px 24px rgb(16 17 19 / 0.45);
}
.mhero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.mhero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mhero-sign { text-align: right; font-size: 1.0625rem; line-height: 1.45; font-weight: 600; color: #F5F4F2; text-shadow: 0 1px 16px rgb(16 17 19 / 0.6); }
.mhero .hero-pause { top: auto; bottom: 16px; right: 16px; }

/* PillCta e variantes de botão da home */
.btn--pill { border-radius: 999px; }
.btn--light { --_bg: #F5F4F2; --_fg: #101113; --_bd: #F5F4F2; --_sh: 0 2px 4px rgb(0 0 0 / 0.18); }
@media (hover: hover) { .btn--light:hover { --_bg: #FFFFFF; --_sh: 0 4px 10px rgb(0 0 0 / 0.22); } }
.btn--light:active { --_bg: #E6E5E2; }
.home-band .btn--light:focus-visible, .home-band .btn:focus-visible { outline-color: #72DCE8; }
.pill-cta {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 4px 4px 4px 22px; border-radius: 999px;
  border: 1px solid var(--border-deco); background: var(--raised); color: var(--text); font-weight: 600; font-size: 1rem; cursor: pointer;
  box-shadow: var(--sh-btn); transition: box-shadow var(--d-hover) var(--ease-standard), border-color var(--d-hover) var(--ease-standard);
}
.pill-cta:hover { border-color: var(--border-control); box-shadow: var(--sh-btn-hover); }
.pill-cta-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--signal); color: #101113; display: grid; place-items: center; }
.pill-cta-dot svg { width: 22px; height: 16px; }
.pill-cta:hover .shaft, .pill-cta:focus-visible .shaft { transform: scaleX(1); }

/* cabeçalho centralizado (serviços e galeria) */
.center-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; margin-inline: auto; max-width: 640px; }
.center-head .lead { max-width: 46ch; }

/* ServicesSection */
.services .wrap { padding-top: clamp(3rem, 6vw, 5rem); }
.services .center-head { color: #F5F4F2; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.services .lead { color: #C9CACD; }
.svc3-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .svc3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc3 { display: grid; grid-template-rows: auto 1fr; border-radius: 28px; overflow: hidden; background: #1C1D21; border: 1px solid #2E2F35; min-width: 0; color: #F5F4F2; }
.svc3-media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: #17181B; }
.svc3-media .comp { position: absolute; inset: 0; }
.svc3-media .comp-film canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.svc3-phone { position: absolute; right: 10%; bottom: -8%; width: 30%; transform: rotate(4deg); box-shadow: 0 18px 40px rgb(0 0 0 / 0.45); }
.svc3-phone .hook { font-size: 0.6875rem; }
.svc3-ops { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr 1fr; }
.svc3-ops .comp-console { padding: 14% 6% 14% 10%; }
.svc3-ops .comp-flow { padding: 12% 10% 12% 4%; background: #17181B; }
.svc3-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; }
.svc3-body .muted { color: #A9ABB0; }
.svc3-actions { margin-top: auto; display: flex; flex-direction: column; gap: 0.25rem; }
.svc3 .chev { color: #F5F4F2; }
.svc3-links { display: flex; flex-wrap: wrap; gap: 0 1rem; font-size: var(--fs-sup); }
.svc3-links a { color: #C9CACD; min-height: 40px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 0.2em; }
.svc3-links a:hover { color: #F5F4F2; }
.svc3-note { text-align: center; color: #8B8D92; margin-top: 1.5rem; }
.services { padding-bottom: clamp(3rem, 6vw, 5rem); }
.services .wrap { padding-bottom: 0; }

/* ArcGallery */
.arc-sec { padding-block: clamp(4rem, 8vw, 7rem); display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); }
.arc-sec .center-head, .arc-ctrl { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.arc { display: flex; flex-direction: column; gap: 1.25rem; }
.arc-viewport {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; perspective: 1100px;
  padding-block: 72px; outline-offset: -4px;
}
.arc-viewport::-webkit-scrollbar { display: none; }
.arc-track { list-style: none; display: flex; gap: 16px; padding-inline: calc(50% - 110px); width: max-content; transform-style: preserve-3d; }
.arc-item { flex: none; width: 220px; scroll-snap-align: center; transform-style: preserve-3d; transition: transform 80ms linear; }
.arc-fig { position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #101113; border: 1px solid var(--border-deco); box-shadow: 0 18px 40px rgb(16 17 19 / 0.18); }
.arc-fig .comp { position: absolute; inset: 0; }
.arc-fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-hook { position: absolute; left: 10%; right: 10%; top: 9%; z-index: 2; color: #F5F4F2; font-weight: 700; font-size: 0.9375rem; line-height: 1.2; }
.ex-hook small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.625rem; letter-spacing: 0.1em; color: #C9CACD; margin-bottom: 4px; text-transform: uppercase; }
.arc-ctrl { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.arc-cap { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 15rem; text-align: center; }
.arc-cap b { font-size: 1.0625rem; }
.arc.is-flat .arc-viewport { perspective: none; padding-block: 8px; }
.arc.is-flat .arc-track { padding-inline: 8px; gap: 12px; }
.arc.is-flat .arc-item { width: min(72vw, 280px); }
@media (min-width: 1440px) { .arc-item { width: 240px; } .arc-track { padding-inline: calc(50% - 120px); } }

/* visualização ampliada */
.ex-dialog { width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 1px solid var(--border-deco); border-radius: var(--r-card); padding: 1.5rem; background: var(--raised); color: var(--text); box-shadow: var(--e3); }
.ex-dialog::backdrop { background: rgb(16 17 19 / 0.6); }
.ex-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.ex-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 16px; margin-top: 1.25rem; }
.ex-grid figure { display: flex; flex-direction: column; gap: 8px; }
.ex-grid .comp { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #101113; }
.ex-grid canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-grid figcaption { font-weight: 600; font-size: 0.9375rem; }

/* FAQ compacto */
.faq-tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* SiteHeader 1.4: navegação sobreposta à imagem enquanto a hero está sob o header */
.nav-over .site-header { --focus: #72DCE8; }
.nav-over .site-header .nav-desk { background: transparent; border-color: transparent; box-shadow: none; }
.nav-over .site-header .nav-desk > .navlink { color: #F5F4F2; text-shadow: 0 1px 10px rgb(16 17 19 / 0.7); }
.nav-over #hp-left, .nav-over .site-header .hpill:not(.nav-desk):not(.h-cta) { background: #F5F4F2; border-color: #F5F4F2; color: #101113; box-shadow: none; }
.nav-over #hp-left .logo-light { display: block; }
.nav-over #hp-left .logo-dark { display: none; }
.nav-over .site-header .h-cta { display: none; }
.nav-over .site-header .icon-btn { color: #101113; }

/* mobile: imagem no topo, mensagem, ações e assinatura no fluxo */
@media (max-width: 767px) {
  .mhero-media { position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: 70svh; width: 100%; }
  .mhero-img, .mhero-media .hero-video { object-position: 34% 50%; }
  .mhero-scrim { background: linear-gradient(180deg, rgb(16 17 19 / 0.5) 0%, rgb(16 17 19 / 0) 22%, rgb(16 17 19 / 0) 70%, var(--band) 100%); }
  .mhero-inner { min-height: 0; padding: 0.5rem max(20px, env(safe-area-inset-right, 0px)) 2.5rem max(20px, env(safe-area-inset-left, 0px)); gap: 1.75rem; margin-top: -2.5rem; }
  .mhero-title { max-width: 16ch; }
  .mhero-foot { flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .mhero-actions .btn { flex: 1 1 100%; }
  .mhero-sign { text-align: left; }
  .mhero .hero-pause { top: 12px; bottom: auto; }
}
@media (min-width: 768px) and (max-height: 640px) { .mhero-inner { min-height: 0; } }

/* =====================================================================
   REVISÃO 5 — arquitetura de superfícies (substitui, na web, as regras
   anteriores de superfícies grafite/off-white/cinza, raio de botões,
   margens externas de seção e seções como cards)
   ===================================================================== */
:root {
  --section-dark: #000000;
  --section-light: #FFFFFF;
  --button-radius: 999px;
  --sec-r: 32px;                       /* raio de transição: 32 mobile · 48 tablet · 64 desktop */
  --sec-overlap: var(--sec-r);         /* profundidade = raio: o canto mostra a seção anterior */
  --content-safe: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --sec-pad-block: clamp(4rem, 8vw, 7.5rem);
}
@media (min-width: 768px) { :root { --sec-r: 48px; --content-safe: 32px; } }
@media (min-width: 1024px) { :root { --sec-r: 64px; --content-safe: 48px; } }
@media (min-width: 1440px) { :root { --content-safe: 64px; } }

/* tokens por tom (o tom é declarado na seção e vence qualquer tema global) */
.sec[data-tone="dark"], .t-dark {
  --sec-bg: var(--section-dark);
  --canvas: #000000; --panel: #000000; --surface: #000000; --raised: #000000;
  --text: #FFFFFF; --text-2: #C2C3C7; --border-control: #8E9399; --border-deco: #2B2B2B;
  --link: #FFFFFF; --focus: #72DCE8; --signal-text: #F08A5D;
  --btn-bg: #FFFFFF; --btn-fg: #000000; --btn-border: #FFFFFF; --btn-hover: #FFFFFF; --btn-active: #FFFFFF;
  --btn2-bg: transparent; --btn2-hover: transparent;
  --btn-ring: 0 0 0 3px rgb(255 255 255 / 0.28);
  --sh-btn: none; --sh-btn-hover: none; --sh-btn-active: none;
  --e1: 0 4px 12px rgb(0 0 0 / 0.6); --e2: 0 12px 32px rgb(0 0 0 / 0.7); --e3: 0 24px 64px rgb(0 0 0 / 0.75);
  --error-fg: #FF94A3; --error-bg: #000000; --info-fg: #A5BBFF; --info-bg: #000000;
  --disabled-bg: #1A1A1A; --disabled-fg: #A0A0A0; --disabled-border: #444444;
  color-scheme: dark;
}
.sec[data-tone="light"], .t-light, .hdr {
  --sec-bg: var(--section-light);
  --canvas: #FFFFFF; --panel: #FFFFFF; --surface: #FFFFFF; --raised: #FFFFFF;
  --text: #000000; --text-2: #3D3F44; --border-control: #6B6F75; --border-deco: #E3E3E3;
  --link: #000000; --focus: #3157D5; --signal-text: #B84A18;
  --btn-bg: #000000; --btn-fg: #FFFFFF; --btn-border: #000000; --btn-hover: #000000; --btn-active: #000000;
  --btn2-bg: transparent; --btn2-hover: transparent;
  --btn-ring: 0 0 0 3px rgb(0 0 0 / 0.16);
  --sh-btn: 0 2px 4px rgb(0 0 0 / 0.12); --sh-btn-hover: 0 4px 10px rgb(0 0 0 / 0.16); --sh-btn-active: inset 0 1px 2px rgb(0 0 0 / 0.18);
  --e1: 0 4px 12px rgb(0 0 0 / 0.08); --e2: 0 12px 32px rgb(0 0 0 / 0.14); --e3: 0 24px 64px rgb(0 0 0 / 0.2);
  --error-fg: #B42336; --error-bg: #FFFFFF; --info-fg: #254CC0; --info-bg: #FFFFFF;
  --disabled-bg: #F2F2F2; --disabled-fg: #4A555F; --disabled-border: #B8BEC2;
  color-scheme: light;
  color: var(--text);
}

/* página = sequência de superfícies; sem moldura, sem canvas entre seções */
html, body { background: #FFFFFF; }
body::before { background: #000000; }
.frame, .frame.seq { padding: 0; display: block; gap: 0; }
.sec { position: relative; isolation: isolate; background: var(--sec-bg); color: var(--text); width: 100%; }
.sec[data-transition="overlap"] {
  margin-top: calc(-1 * var(--sec-overlap));
  border-top-left-radius: var(--sec-r); border-top-right-radius: var(--sec-r);
}
.sec[data-reserve] { padding-bottom: var(--sec-overlap); }   /* faixa só de fundo para a próxima seção */
.sec-inner {
  width: 100%; max-width: calc(var(--max) + 2 * var(--content-safe)); margin-inline: auto;
  padding-inline: var(--content-safe); padding-block: var(--sec-pad-block);
}
.sec[data-transition="overlap"] > .sec-inner { padding-top: max(var(--sec-pad-block), calc(var(--sec-r) + 2.5rem)); }
.sec[data-transition="flush"] > .sec-inner { padding-top: 0; }
@media (min-width: 1024px) and (min-height: 700px) {
  .sec--chapter { min-height: 100svh; display: flex; flex-direction: column; }
  .sec--chapter > .sec-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}
.sec .muted, .sec .lead, .sec .sup { color: var(--text-2); }
.sec h1, .sec h2, .sec h3 { color: var(--text); }

/* logos pelo tom da superfície, não pelo tema */
.hdr .logo-light, .sec[data-tone="light"] .logo-light { display: block !important; }
.hdr .logo-dark, .sec[data-tone="light"] .logo-dark { display: none !important; }
.sec[data-tone="dark"] .logo-light { display: none !important; }
.sec[data-tone="dark"] .logo-dark { display: block !important; }

/* ---------------------------------------------------- botões cápsula */
.btn, .btn--s, .btn--l, .play, .copy-btn, .chip, .radio, .seg, .seg button, .mat-pause, .pill-cta, .skip, .navlink { border-radius: var(--button-radius); }
.icon-btn, .acc-ico { border-radius: 50%; }
.btn { box-shadow: var(--sh-btn); }
@media (hover: hover) {
  .btn:hover { --_bg: var(--btn-bg); box-shadow: var(--btn-ring), var(--sh-btn-hover); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
  .btn--secondary:hover { --_bg: transparent; box-shadow: inset 0 0 0 1px var(--text); }
}
.btn:active { --_bg: var(--btn-active); }
.btn--secondary { --_bg: transparent; --_fg: var(--text); --_bd: var(--text); --_sh: none; box-shadow: none; }
.btn--light { --_bg: #FFFFFF; --_fg: #000000; --_bd: #FFFFFF; }
.btn--onimg { --_bg: #000000; --_fg: #FFFFFF; --_bd: rgb(255 255 255 / 0.7); }
@media (hover: hover) { .btn--light:hover, .btn--onimg:hover { box-shadow: 0 0 0 3px rgb(255 255 255 / 0.3); } }
.btn[aria-disabled="true"], .btn:disabled { text-decoration: none; box-shadow: none; }
.pill-cta { background: var(--raised); border-color: var(--border-control); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--sec-bg, #fff); box-shadow: none; }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--sec-bg, #fff); box-shadow: none; }

/* ---------------------------------------------------- header compartilhado */
.hdr .hpill { background: #FFFFFF; border-color: #E3E3E3; }
.hdr .navlink { color: #000000; }
.hdr .h-cta { padding: 4px; }
.m-pill { padding: 2px; }
@media (min-width: 1080px) { .m-pill { display: none; } }
.nav-over .hdr .nav-desk { background: transparent; border-color: transparent; }
.nav-over .hdr .nav-desk > .navlink { color: #FFFFFF; }
.nav-over .hdr .h-cta { display: flex; background: transparent; border-color: transparent; }
.nav-over .hdr .h-cta .btn { --_bg: #FFFFFF; --_fg: #000000; --_bd: #FFFFFF; }
.nav-over .hdr .m-pill { background: #FFFFFF; }
@media (max-width: 1079px) { .nav-over .hdr .h-cta { display: none; } }
.mnav.hdr { background: #FFFFFF; }
.mnav .btn { color: #FFFFFF; }

/* ---------------------------------------------------- hero da home */
.sec--media { overflow: visible; }
.sec--media .mhero-media { border-radius: 0; }
.sec--media .mhero-scrim { --band: #000000; }
.sec--media .mhero-scrim {
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0) 16%),
    radial-gradient(48% 46% at 14% 40%, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.3) 55%, rgb(0 0 0 / 0) 80%),
    radial-gradient(34% 34% at 94% 90%, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0) 75%),
    linear-gradient(180deg, rgb(0 0 0 / 0) 74%, #000000 100%);
}
@media (max-width: 767px) {
  .sec--media .mhero-scrim { background: linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0) 22%, rgb(0 0 0 / 0) 70%, #000000 100%); }
}

/* ---------------------------------------------------- hero interno */
.sec--hero > .sec-inner { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 3.5rem); }
.ihero { display: grid; gap: 2.5rem; }
.ihero-copy { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.ihero-title { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4.25rem); line-height: 1.05; letter-spacing: -0.018em; font-weight: 700; max-width: 18ch; }
.ihero-aside { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-deco); max-width: 520px; }
.ihero-media .material { min-height: 320px; height: 100%; }
@media (min-width: 1024px) {
  .ihero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; gap: 3rem; }
  .ihero-copy { justify-content: center; }
  .ihero-media .material { min-height: 440px; }
}
.sec--hero-short > .sec-inner { padding-bottom: clamp(3rem, 6vw, 5rem); }
.crumbs a { color: var(--text-2); }

/* ---------------------------------------------------- serviços (preto) */
.svc3 { background: #000000; border-color: #2B2B2B; }
.svc3-media { background: #0A0A0A; }
.svc3-body .muted { color: #C2C3C7; }
.svc3-links a { color: #E6E6E6; }
.center-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------------------------------------------------- capítulo claro (como começamos + exemplos) */
.light-chapter { --gap: clamp(5rem, 9vw, 8rem); }
.light-chapter .arc-sec { margin: 0; padding: 0; }
.light-chapter .arc-viewport { margin-inline: calc(-1 * var(--content-safe)); }
@media (min-width: 1440px) { .light-chapter .arc-viewport { margin-inline: calc(-1 * (100vw - var(--max)) / 2); } }
.arc-fig { border-color: #E3E3E3; }
.frost--sm .frost-read { background: #FFFFFF; }

/* ---------------------------------------------------- FAQ (preto) */
.sec[data-tone="dark"] .acc-item { border-color: #2B2B2B; }
.faq-inline { margin-bottom: clamp(4rem, 8vw, 6rem); padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--border-deco); }

/* ---------------------------------------------------- final branco: contato + rodapé */
.closing-inner { --gap: clamp(4rem, 8vw, 6rem); }
.closing-grid { margin: 0; }
.footer { border-top-color: var(--border-deco); }
.contact-form-wrap { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--border-deco); border-radius: var(--r-card); }

/* componentes que antes dependiam de cinza para se destacar */
.dgroup, .inside-note, .demo, .console, .con-main, .con-side, .preview, .fam, .famcard, .frost-read, .mcap, .satellite { background: var(--raised); border: 1px solid var(--border-deco); }
.con-table tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 var(--signal); }
.situations li, .deliv-main li, .areas li, .numlist li, .focuslist li, .acc-item, .ct-row { border-color: var(--border-deco); }
.notice { border: 1px solid currentColor; }
.err-summary { border: 1px solid currentColor; }
.pm-stage, .material, .mwin, .comp-film, .comp-flow, .comp-console { background-color: #000000; }
.sec--chapter > .sec-inner.ihero { display: grid; align-content: center; }
.sec--chapter > .sec-inner.pm-wrap, .sec--chapter > .sec-inner.faq-grid, .sec--chapter > .sec-inner.split { display: grid; align-content: center; }
.arc-ctrl .icon-btn { flex: none; }

/* =====================================================================
   REVISÃO 6
   ===================================================================== */
html { scroll-padding-top: 1rem; }

/* ---------- header pertencente à primeira seção (não fixo, aparência constante) */
.sec > .site-header {
  position: absolute; z-index: 20; top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  width: 100%; max-width: calc(var(--max) + 2 * var(--content-safe)); margin-inline: auto;
  padding: 20px var(--content-safe) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  pointer-events: auto; background: none; border: 0; box-shadow: none;
  --focus: #72DCE8; color: #FFFFFF;
}
.site-header .brand-link { display: inline-flex; align-items: center; min-height: 48px; padding: 6px 0; border-radius: 6px; background: none; }
.site-header .brand-logo { display: block; width: 152px; height: auto; }
.site-header .logo-fallback { color: #FFFFFF; }
.site-header .nav-desk { display: none; position: relative; align-items: center; gap: 4px; background: none; border: 0; box-shadow: none; padding: 0; }
.site-header .navlink { color: #FFFFFF; background: none; border: 0; border-radius: 6px; box-shadow: none; text-shadow: 0 1px 10px rgb(0 0 0 / 0.55); }
.site-header .navlink::after { background: var(--signal); }
.site-header .h-actions { display: flex; align-items: center; gap: 10px; }
.site-header .h-cta { display: none; }
.site-header .menu-btn { width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / 0.55); background: transparent; color: #FFFFFF; }
@media (min-width: 1080px) {
  .site-header .nav-desk { display: flex; }
  .site-header .h-cta { display: inline-flex; }
  .site-header .menu-btn { display: none; }
}
.sec > .mnav { position: absolute; z-index: 21; top: calc(env(safe-area-inset-top, 0px) + 84px); left: var(--content-safe); right: var(--content-safe); max-height: none; }
.sec > .site-header .dropdown { right: auto; left: 0; }
@media (max-width: 1079px) { .sec > .site-header .dropdown { display: none; } }

/* ---------- CTA: preenchimento nunca muda para branco; feedback por borda/sombra */
.btn { transition: box-shadow 180ms var(--ease-standard), border-color 180ms var(--ease-standard); }
.btn--onimg, .btn--onimg:hover, .btn--onimg:active, .btn--onimg:focus-visible { --_bg: #000000; --_fg: #FFFFFF; --_bd: rgb(255 255 255 / 0.7); text-decoration: none; }
@media (hover: hover) { .btn--onimg:hover { --_bd: #FFFFFF; box-shadow: 0 0 0 1px #FFFFFF, 0 6px 18px rgb(0 0 0 / 0.45); } }
.btn--onimg:active { box-shadow: inset 0 2px 6px rgb(255 255 255 / 0.18); }
.btn--light, .btn--light:hover, .btn--light:active, .btn--light:focus-visible { --_bg: #FFFFFF; --_fg: #000000; --_bd: #FFFFFF; }
.btn--secondary, .btn--secondary:hover, .btn--secondary:active { --_bg: transparent; --_fg: var(--text); --_bd: var(--text); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- respiro de "Nossos serviços": mesmo token em cima e embaixo (visível) */
:root { --breath: clamp(4.5rem, 1.5rem + 7vw, 8rem); --note-block: 3rem; }
.sec.sec--services > .sec-inner { padding-top: var(--breath); padding-bottom: calc(var(--breath) - var(--note-block)); }
.sec--services .center-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec--services .svc3-note { margin: 0; height: var(--note-block); display: flex; align-items: center; justify-content: center; }

/* ---------- SectionStacking */
/* rev9: sobreposição física retida só onde tem função: o hero de mídia da inicial
   fica parado enquanto "Nossos serviços" sobe sobre ele. As demais seções rolam
   em fluxo normal (o encontro arredondado continua, sem prender). */
.is-stacking > .sec[data-fx~="stack"]:not(:last-child) { position: sticky; top: var(--stick-top, 0px); }

/* ---------- CurvedCarousel */
.light-chapter .arc-sec { gap: clamp(1.5rem, 3vw, 2.5rem); }
.cc { position: relative; --cc-w: clamp(150px, 14vw, 250px); margin-inline: calc(-1 * var(--content-safe)); }
@media (min-width: 1440px) { .cc { margin-inline: calc(-1 * (100vw - var(--max)) / 2); } }
.cc-stage {
  position: relative; height: calc(var(--cc-w) * 4 / 3 * 1.55); overflow: hidden; perspective: 900px; perspective-origin: 50% 50%;
  touch-action: pan-y; cursor: grab; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.cc-stage:active { cursor: grabbing; }
.cc-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.cc-item {
  position: absolute; left: 50%; top: 50%; width: var(--cc-w); aspect-ratio: 3 / 4; margin: 0;
  margin-left: calc(var(--cc-w) / -2); margin-top: calc(var(--cc-w) * 4 / 3 / -2);
  transform-origin: 50% 50%; will-change: transform, filter, opacity; transition: none; backface-visibility: hidden;
}
.cc-media { position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #000000; border: 1px solid #E3E3E3; box-shadow: 0 18px 40px rgb(0 0 0 / 0.14); }
.cc-media .comp { position: absolute; inset: 0; }
.cc-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-pause { position: absolute; top: 0; right: var(--content-safe); z-index: 5; background: #FFFFFF; color: #000000; border: 1px solid #CFCFCF; }
.cc-pause:focus-visible { outline: 2px solid #3157D5; outline-offset: 2px; }
.cc.is-static .cc-stage { height: auto; overflow-x: auto; overflow-y: hidden; perspective: none; -webkit-mask-image: none; mask-image: none; cursor: auto; scroll-snap-type: x mandatory; padding: 8px var(--content-safe); }
.cc.is-static .cc-track { position: static; display: flex; gap: 14px; width: max-content; transform-style: flat; }
.cc.is-static .cc-item { position: static; margin: 0; transform: none !important; filter: none !important; opacity: 1 !important; visibility: visible !important; scroll-snap-align: start; width: min(64vw, 240px); }
.cc.is-static .cc-item:nth-child(n + 11) { display: none; }
@media (max-width: 767px) { .cc { --cc-w: clamp(120px, 34vw, 170px); } }
.mnav .btn { border-radius: var(--button-radius); justify-content: center; }
.cc.is-static .cc-stage:focus-visible { outline: 2px solid #3157D5; outline-offset: -2px; }

/* =====================================================================
   rev7 — ritmo vertical das seções + botão da navbar
   Tokens (um valor por breakpoint):
   --sec-space-top     respiro entre a borda visual da seção e o 1º conteúdo
   --sec-space-bottom  respiro entre o último conteúdo (incl. legenda/ação)
                       e a borda visual da seção seguinte
   --stack-zone        zona da borda arredondada que entra sobre a anterior
                       (= --sec-overlap = --sec-r)
   --stack-safe        distância mínima entre a zona e o conteúdo
   --sec-space-hero    respiro entre o header (dentro do hero) e o conteúdo
   O respiro é padding da própria superfície (.sec-inner). A faixa reservada
   para a próxima seção (data-reserve) é somada FORA dele, então a
   sobreposição nunca consome o respiro.
   ===================================================================== */
:root {
  --stack-zone: var(--sec-overlap);
  --stack-safe: 1.5rem;
  --sec-space-top: 5.5rem;        /* 88px  · celular */
  --sec-space-bottom: 5.5rem;
  --sec-space-hero: 3rem;
}
@media (min-width: 768px)  { :root { --sec-space-top: 7.5rem; --sec-space-bottom: 7.5rem; --sec-space-hero: 4rem; --stack-safe: 2rem; } }   /* 120px · tablet */
@media (min-width: 1024px) { :root { --sec-space-top: 9rem;   --sec-space-bottom: 9rem;   --sec-space-hero: 5rem; --stack-safe: 2.5rem; } } /* 144px · desktop */
@media (min-width: 1440px) { :root { --sec-space-top: 10rem;  --sec-space-bottom: 10rem;  --sec-space-hero: 5.5rem; } }                     /* 160px · amplo */

/* aplicação única no componente de seção (substitui --sec-pad-block, --breath e os valores locais) */
.sec[data-tone] > .sec-inner {
  padding-top: max(var(--sec-space-top), calc(var(--stack-zone) + var(--stack-safe)));
  padding-bottom: var(--sec-space-bottom);
}
.sec[data-tone][data-transition="start"] > .sec-inner { padding-top: var(--sec-space-top); }
.sec[data-tone][data-transition="flush"] > .sec-inner { padding-top: 0; }           /* mesma superfície: o respiro anterior já separa */
.sec[data-reserve] { padding-bottom: var(--stack-zone); }                 /* faixa só de fundo, coberta pela próxima */
/* hero interno: header + respiro próprio; base no mesmo token da seção */
.sec[data-tone].sec--hero > .sec-inner,
.sec[data-tone].sec--hero-short > .sec-inner {
  padding-top: calc(var(--header-h) + 20px + env(safe-area-inset-top, 0px) + var(--sec-space-hero));
  padding-bottom: var(--sec-space-bottom);
}
/* serviços: a legenda faz parte do conteúdo final, sem compensação especial */
.sec--services .svc3-note { height: auto; margin-top: 1.5rem; }
/* capítulos: altura mínima só quando o conteúdo realmente se aproxima da tela, sem centralizar vazio */
@media (min-width: 1024px) and (min-height: 700px) {
  .sec--chapter { min-height: 0; }
  .sec--chapter > .sec-inner { justify-content: flex-start; }
}

/* ---------- botão da navbar: padding próprio de cápsula (o 4px herdado do wrapper antigo saiu) */
.site-header .h-cta.btn,
.hdr .h-cta.btn {
  padding: 0 1.5rem; min-height: 48px;           /* 24px laterais, alvo de 48px */
  font-size: 1rem; line-height: 1.5rem; white-space: nowrap;
}
@media (min-width: 1280px) { .site-header .h-cta.btn { padding: 0 1.75rem; } }  /* 28px em telas amplas */
.site-header .h-actions { gap: 12px; margin-left: clamp(1.5rem, 3vw, 3rem); }
/* carrossel: palco acomoda a maior escala lateral (1,46) + inclinação; nada invade o respiro inferior */
.cc-stage { height: calc(var(--cc-w) * 4 / 3 * 1.7); }
/* fim da página: o rodapé encerra a superfície; respiro final menor que o de seção */
.sec.sec--last > .sec-inner { padding-bottom: calc(var(--sec-space-bottom) * 0.5); }
@media (max-width: 767px) { .cc-stage { height: calc(var(--cc-w) * 4 / 3 * 1.4); } }

/* =====================================================================
   rev8 — marca na header da inicial: símbolo que se expande para a wordmark
   Ativos oficiais: assets/logo (1).png (símbolo) e assets/wordmark.png,
   exportados sem recorte de forma para brand-symbol.webp / brand-wordmark.webp.
   Nenhuma imagem é escalada de forma desigual: altura fixa, largura pela
   proporção intrínseca. O símbolo fica ancorado à esquerda; "ASHY" é revelado
   por clip-path da esquerda para a direita. A caixa do link tem sempre a largura
   da wordmark: nada na header se desloca.
   ===================================================================== */
.site-header { --bx-h: calc(152px * 256 / 993); --bx-sym: calc(var(--bx-h) * 261 / 256); }
.site-header .brand-x { display: none; position: relative; width: 152px; height: var(--bx-h); }
.site-header.is-home .brand-logo, .site-header.is-home .logo-fallback { display: none; }
.site-header.is-home .brand-x { display: block; }
.brand-x img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; display: block; }
.brand-x .bx-wm { width: 152px; height: var(--bx-h); opacity: 0; clip-path: inset(0 calc(152px - var(--bx-sym)) 0 0); }
.brand-x .bx-sym { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .brand-x .bx-wm { transition: clip-path 280ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 120ms linear; }
  .brand-x .bx-sym { transition: opacity 120ms linear 40ms; }
  .site-header.is-home .brand-link:hover .bx-wm,
  .site-header.is-home .brand-link:focus-visible .bx-wm { opacity: 1; clip-path: inset(0 0 0 0); }
  .site-header.is-home .brand-link:hover .bx-sym,
  .site-header.is-home .brand-link:focus-visible .bx-sym { opacity: 0; transition-delay: 0ms; }
}
/* sem hover (toque, caneta): a assinatura completa aparece sem exigir interação */
@media not all and (hover: hover) and (pointer: fine) {
  .brand-x .bx-wm { opacity: 1; clip-path: none; }
  .brand-x .bx-sym { opacity: 0; }
}
/* teclado em qualquer dispositivo também expande */
.site-header.is-home .brand-link:focus-visible .bx-wm { opacity: 1; clip-path: inset(0 0 0 0); }
.site-header.is-home .brand-link:focus-visible .bx-sym { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .brand-x .bx-wm, .brand-x .bx-sym { transition: none !important; } }

/* =====================================================================
   rev8 — LeadForm (Parcerias, Diagnóstico)
   ===================================================================== */
.lf-layout { display: grid; gap: var(--flow-block); align-items: start; }
@media (min-width: 1024px) { .lf-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 5vw, 6rem); } }
.lf-intro { --gap: var(--flow-text); max-width: 34rem; }
.lf-intro .crumbs { margin-bottom: 0.5rem; }
#form-diagnostico { scroll-margin-top: var(--anchor-offset); outline: none; }
.lf-card { border: 1px solid var(--border-deco); border-radius: 24px; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--sec-bg); }
.lead-form { display: grid; gap: 1.5rem; }
.lf-fields { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .lf-fields { grid-template-columns: 1fr 1fr; } .lf-fields > .field { grid-column: 1 / -1; } .lf-fields > .field--half { grid-column: auto; } }
.lead-form .textarea { min-height: 136px; }
.select[aria-invalid="true"] { border-color: var(--error-fg); box-shadow: inset 0 0 0 1px var(--error-fg); }
.lf-actions { display: grid; gap: 0.75rem; justify-items: start; }
.lf-note { color: var(--text-2); max-width: 44ch; }
.lf-status { outline: none; }
.lf-status:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lf-status.is-error { color: var(--error-fg); }
.lf-result { display: grid; gap: 1rem; }
.lead-form .btn[disabled] { opacity: 0.6; cursor: progress; }
/* hero de Parcerias: o formulário é o 1º conteúdo; altura acompanha o conteúdo */
.sec.sec--form-hero { min-height: 0; }
.sec[data-tone].sec--form-hero > .sec-inner { padding-bottom: var(--sec-space-bottom); }

/* =====================================================================
   rev8 — ritmo interno das seções (tokens de fluxo)
   --flow-text      título → texto, texto → texto
   --flow-controls  texto → botões e controles
   --flow-block     cabeçalho da seção → conteúdo principal (grade, lista, formulário)
   --flow-group     entre dois grupos dentro da mesma seção
   --anchor-offset  folga acima de um alvo de âncora (o título nunca encosta na borda)
   Componentes compactos (cards, itens de lista) mantêm seus espaçamentos próprios.
   ===================================================================== */
:root {
  --flow-text: clamp(1rem, 0.7rem + 0.9vw, 1.5rem);          /* 16 → 24 */
  --flow-controls: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);      /* 24 → 40 */
  --flow-block: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);         /* 40 → 80 */
  --flow-group: clamp(4.5rem, 3rem + 5vw, 8rem);             /* 72 → 128 */
  --anchor-offset: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.center-head, .sec--services .center-head, .services .center-head { gap: var(--flow-text); margin-bottom: var(--flow-block); }
.center-head > .btn, .center-head > .pill-cta { margin-top: calc(var(--flow-controls) - var(--flow-text)); }
.ihero-copy { gap: var(--flow-text); }
.ihero-copy > .row { margin-top: calc(var(--flow-controls) - var(--flow-text)); }
.ihero-aside { margin-top: calc(var(--flow-block) - var(--flow-text)); }
.closing-copy { --gap: var(--flow-text); }
.closing-copy > .row { margin-top: calc(var(--flow-controls) - var(--flow-text)); }
.closing-inner { --gap: var(--flow-group); }
.lf-intro > .alt-channel, .lf-intro > .sup { margin-top: calc(var(--flow-controls) - var(--flow-text)); }
.block-title { margin-bottom: var(--flow-block); }
.vis-head { margin-bottom: var(--flow-block); }
.start-head { --gap: var(--flow-block); }
.start-grid { gap: var(--flow-block); }
.light-chapter { --gap: var(--flow-group); }
.split, .faq-grid { gap: var(--flow-block); }
@media (min-width: 1024px) { .split, .faq-grid { gap: clamp(3rem, 5vw, 6rem); } }
.faq-inline { margin-bottom: var(--flow-group); padding-bottom: var(--flow-block); }
.lf-layout { gap: var(--flow-block); }
@media (min-width: 1024px) { .lf-layout { gap: clamp(3rem, 5vw, 6rem); } }

/* =====================================================================
   rev9 — respiro maior (padding real do contêiner) + transição de bordas
   Respiro visível = distância da borda que a pessoa vê até o conteúdo.
   A faixa reservada à sobreposição (data-reserve) fica FORA desse valor.
   ===================================================================== */
:root { --sec-space-top: 6rem; --sec-space-bottom: 6rem; --sec-space-min: 80px; }                      /* 96px celular */
@media (min-width: 768px)  { :root { --sec-space-top: 8rem;   --sec-space-bottom: 8rem;   --sec-space-min: 96px; } }   /* 128px tablet */
@media (min-width: 1024px) { :root { --sec-space-top: 10rem;  --sec-space-bottom: 10rem;  --sec-space-min: 120px; } }  /* 160px desktop */
@media (min-width: 1440px) { :root { --sec-space-top: 11.5rem; --sec-space-bottom: 11.5rem; } }                       /* 184px amplo */
/* rodapé: encerra a página com respiro real, nunca abaixo do mínimo */
.sec.sec--last > .sec-inner { padding-bottom: max(var(--sec-space-min), calc(var(--sec-space-bottom) * 0.75)); }

/* camadas: conteúdo sempre acima das bandas de borda (o contraste do texto não muda) */
.sec > .sec-inner, .sec > .mhero { position: relative; z-index: 1; }
.sec {
  --edge-top: 0; --edge-bot: 0;
  --edge-h: min(calc(var(--sec-space-top) * 0.75), 18vh);   /* a banda cabe no respiro: nunca chega ao conteúdo */
}
.sec::before, .sec::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  height: var(--edge-h); will-change: opacity;
}
.sec::before { top: 0; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; opacity: var(--edge-top); }
.sec::after  { bottom: 0; height: calc(var(--edge-h) + (var(--stack-zone) * var(--has-reserve, 0))); opacity: var(--edge-bot); }
.sec[data-reserve] { --has-reserve: 1; }
/* branco: sombreado escuro suave; preto: o preto da marca é preservado, a banda só esmaece mídia */
.sec[data-tone="light"]::before { background: linear-gradient(180deg, rgb(0 0 0 / 0.16) 0%, rgb(0 0 0 / 0.06) 45%, rgb(0 0 0 / 0) 100%); }
.sec[data-tone="light"]::after  { background: linear-gradient(0deg,   rgb(0 0 0 / 0.14) 0%, rgb(0 0 0 / 0.05) 45%, rgb(0 0 0 / 0) 100%); }
.sec[data-tone="dark"]::before  { background: linear-gradient(180deg, #000000 0%, rgb(0 0 0 / 0) 100%); }
.sec[data-tone="dark"]::after   { background: linear-gradient(0deg,   #000000 0%, rgb(0 0 0 / 0) 100%); }
.sec.sec--media:first-child::after { z-index: 3; }                 /* hero de mídia: a imagem esmaece para o preto */
@media (prefers-reduced-motion: reduce) { .sec::before, .sec::after { opacity: 0 !important; } }

/* parallax de escala: só a mídia interna, contêiner fixo, a partir do centro */
[data-px-scale] { overflow: hidden; }
[data-px-scale] > .px-layer, [data-px-scale] > .path-svg { transform: scale(var(--px-s, 1)); transform-origin: 50% 50%; will-change: transform; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { [data-px-scale] > .px-layer { transform: none !important; } }

/* revelação curta + stagger discreto em grupos pequenos */
.js-motion .rv-pending { opacity: 0; transform: translateY(16px); }
.js-motion .rv-in { transition: opacity 520ms var(--ease-enter), transform 520ms var(--ease-enter); transition-delay: calc(var(--rv-i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .js-motion .rv-pending { opacity: 1 !important; transform: none !important; } }

/* feedback de hover em cards (só com ponteiro fino) */
@media (hover: hover) and (pointer: fine) {
  .svc3, .fam, .dgroup, .lf-card { transition: transform 200ms var(--ease-standard), border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard); }
  .svc3:hover, .fam:hover { transform: translateY(-3px); }
  .sec[data-tone="dark"] .svc3:hover { border-color: #5A5A5A; }
  .sec[data-tone="light"] .fam:hover { box-shadow: 0 14px 34px rgb(0 0 0 / 0.10); }
}
@media (prefers-reduced-motion: reduce) { .svc3:hover, .fam:hover { transform: none; } }

/* =====================================================================
   rev10 — efeitos atribuídos por seção (data-fx)
   stack : seção retida; a seguinte sobe sobre ela (sobreposição física)
   edge  : bordas superior/inferior sombreiam (branco) ou esmaecem (preto) no scroll
   px    : mídia de destaque com parallax de escala, contêiner estável
   Em todas: conteúdo com esmaecimento progressivo ligado ao scroll e stagger em grupos.
   ===================================================================== */
/* bandas só nas seções "edge", mais perceptíveis */
.sec:not([data-fx~="edge"])::before, .sec:not([data-fx~="edge"])::after { display: none; }
.sec[data-fx~="edge"] { --edge-h: min(calc(var(--sec-space-top) * 0.85), 22vh); }
.sec[data-tone="light"][data-fx~="edge"]::before { background: linear-gradient(180deg, rgb(0 0 0 / 0.26) 0%, rgb(0 0 0 / 0.10) 40%, rgb(0 0 0 / 0) 100%); }
.sec[data-tone="light"][data-fx~="edge"]::after  { background: linear-gradient(0deg,   rgb(0 0 0 / 0.22) 0%, rgb(0 0 0 / 0.08) 40%, rgb(0 0 0 / 0) 100%); }
/* preto: nenhuma camada cinza; a borda "esmaece" pelo conteúdo (JS: data-edge-fade),
   que dissolve no preto ao se aproximar das bordas da seção */
/* a revelação de uma vez foi substituída pelo esmaecimento reversível */
.js-motion .rv-pending { opacity: 1; transform: none; }
[data-fxi] { will-change: opacity, translate; }

/* =====================================================================
   rev11 — navbar fixa com dois temas de contraste
   O tema segue a seção efetivamente visível atrás da linha central da barra
   (amostragem por elementsFromPoint em app.js, sem valor fixo de scroll).
   data-bar = "media" (sobre a imagem do hero: fundo transparente)
            | "dark"  (seção preta: barra preta translúcida, itens brancos)
            | "light" (seção branca: barra branca translúcida, itens pretos)
   Só cor, fundo, borda, filtro e opacidade animam; tamanho e posição não mudam.
   ===================================================================== */
:root { --bar-h: 84px; --bar-t: 220ms; --bar-ease: cubic-bezier(0.2, 0, 0, 1); }
html { scroll-padding-top: calc(var(--bar-h) + 16px); }
header#site-header {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0; width: auto; max-width: none; margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) max(var(--content-safe), calc((100% - var(--max)) / 2)) 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  pointer-events: auto; border: 0; box-shadow: none;
  --hdr-fg: #FFFFFF; --hdr-bg: rgb(0 0 0 / 0); --hdr-line: rgb(255 255 255 / 0);
  --btn-bg: #FFFFFF; --btn-fg: #000000; --btn-border: #FFFFFF; --btn-hover: #FFFFFF; --btn-active: #FFFFFF;
  --sh-btn: none; --sh-btn-hover: 0 0 0 3px rgb(255 255 255 / 0.28); --sh-btn-active: inset 0 1px 3px rgb(0 0 0 / 0.25);
  --focus: #72DCE8; --signal: #E2622B; --menu-line: rgb(255 255 255 / 0.55); --logo-filter: none;
  color: var(--hdr-fg);
  background: var(--hdr-bg);
  box-shadow: 0 1px 0 var(--hdr-line);
  -webkit-backdrop-filter: blur(var(--hdr-blur, 0px)) saturate(1.2); backdrop-filter: blur(var(--hdr-blur, 0px)) saturate(1.2);
  transition: background-color var(--bar-t) var(--bar-ease), box-shadow var(--bar-t) var(--bar-ease), color var(--bar-t) var(--bar-ease);
}
header#site-header[data-bar="dark"]  { --hdr-bg: rgb(0 0 0 / 0.86); --hdr-line: rgb(255 255 255 / 0.08); --hdr-blur: 14px; }
header#site-header[data-bar="light"] {
  --hdr-fg: #000000; --hdr-bg: rgb(255 255 255 / 0.88); --hdr-line: rgb(0 0 0 / 0.08); --hdr-blur: 14px;
  --btn-bg: #000000; --btn-fg: #FFFFFF; --btn-border: #000000; --btn-hover: #000000; --btn-active: #000000;
  --sh-btn-hover: 0 0 0 3px rgb(0 0 0 / 0.16); --sh-btn-active: inset 0 1px 3px rgb(0 0 0 / 0.45);
  --focus: #3157D5; --menu-line: rgb(0 0 0 / 0.4); --logo-filter: brightness(0);
}
/* itens: sempre sem fundo próprio (nada de cápsulas ao redor dos links) */
header#site-header .navlink, header#site-header .navlink:hover, header#site-header .navlink:focus-visible, header#site-header .navlink[aria-expanded="true"] {
  color: var(--hdr-fg); background: none; border: 0; box-shadow: none;
  transition: color var(--bar-t) var(--bar-ease), text-shadow var(--bar-t) var(--bar-ease);
}
header#site-header .navlink { text-shadow: none; }
header#site-header[data-bar="media"] .navlink { text-shadow: 0 1px 10px rgb(0 0 0 / 0.55); }
header#site-header .navlink svg { stroke: currentColor; color: inherit; }
header#site-header .navlink:focus-visible, header#site-header .brand-link:focus-visible, header#site-header .menu-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
header#site-header .logo-fallback { color: var(--hdr-fg); transition: color var(--bar-t) var(--bar-ease); }
/* botão principal: um único botão (sem wrapper), troca de preenchimento sincronizada */
header#site-header .h-cta.btn {
  --_bg: var(--btn-bg); --_fg: var(--btn-fg); --_bd: var(--btn-border); --_sh: var(--sh-btn);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); box-shadow: var(--_sh);
  transition: background-color var(--bar-t) var(--bar-ease), color var(--bar-t) var(--bar-ease), border-color var(--bar-t) var(--bar-ease), box-shadow 180ms var(--bar-ease);
}
@media (hover: hover) { header#site-header .h-cta.btn:hover { --_sh: var(--sh-btn-hover); } }
header#site-header .h-cta.btn:active { --_sh: var(--sh-btn-active); }
header#site-header .h-cta.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
header#site-header .menu-btn {
  color: var(--hdr-fg); background: transparent; border: 1px solid var(--menu-line);
  transition: color var(--bar-t) var(--bar-ease), border-color var(--bar-t) var(--bar-ease);
}
/* marca: PNG oficial branco; no tema claro, o mesmo arquivo em preto (brightness 0: forma idêntica) */
header#site-header .brand-x img { filter: var(--logo-filter); }
@media (hover: hover) and (pointer: fine) {
  header#site-header .brand-x .bx-wm { transition: clip-path 280ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 120ms linear, filter var(--bar-t) var(--bar-ease); }
  header#site-header .brand-x .bx-sym { transition: opacity 120ms linear 40ms, filter var(--bar-t) var(--bar-ease); }
}
@media not all and (hover: hover) and (pointer: fine) { header#site-header .brand-x img { transition: filter var(--bar-t) var(--bar-ease); } }
/* rotas internas: as duas wordmarks oficiais do design system, em crossfade */
header#site-header .brand-link { position: relative; }
header#site-header .brand-logo { transition: opacity var(--bar-t) var(--bar-ease); }
header#site-header .brand-logo--l { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; }
header#site-header[data-bar="light"] .brand-logo--l { opacity: 1; }
header#site-header[data-bar="light"] .brand-logo:not(.brand-logo--l) { opacity: 0; }
header#site-header.is-home .brand-logo--l { display: none; }
/* submenu e menu móvel acompanham o tema da barra */
header#site-header .dropdown { right: auto; left: 0; }
@media (max-width: 1079px) { header#site-header .dropdown { display: none; } }
#mnav.mnav { position: fixed; z-index: 99; top: calc(var(--bar-h) + 8px); left: var(--content-safe); right: var(--content-safe); max-height: calc(100dvh - var(--bar-h) - 24px); overflow-y: auto;
  transition: opacity var(--d-control) var(--ease-standard), transform var(--d-control) var(--ease-standard), visibility 0s linear var(--d-control), background-color var(--bar-t) var(--bar-ease), color var(--bar-t) var(--bar-ease), border-color var(--bar-t) var(--bar-ease); }
#mnav.mnav.open { transition-delay: 0s; }
#mnav.mnav.t-dark { background: #000000; border-color: #2B2B2B; }
#mnav.mnav.t-light { background: #FFFFFF; border-color: #E3E3E3; }
#mnav.mnav a:not(.btn), #mnav.mnav .mdisc { color: var(--text); background: transparent; }
#mnav.mnav a.btn { background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border); box-shadow: none;
  transition: background-color var(--bar-t) var(--bar-ease), color var(--bar-t) var(--bar-ease), border-color var(--bar-t) var(--bar-ease); }
#mnav.mnav a.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { header#site-header, header#site-header * { transition-duration: 1ms !important; } }
/* âncora do formulário: abaixo da barra fixa */
#form-diagnostico { scroll-margin-top: calc(var(--bar-h) + var(--anchor-offset)); }
/* link "pular para o conteúdo" sempre acima da barra fixa */
.skip { z-index: 200; }
.skip:focus, .skip:focus-visible { z-index: 200; top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* =====================================================================
   rev12 — HookCanvas (Vendas nas redes sociais)
   Trilho finito: palco (altura da tela útil) + percurso de 3,5 telas
   (3 no celular). O palco é sticky dentro do trilho: o scroll é nativo.
   ===================================================================== */
.hk { --hk-travel: 350svh; position: relative; }
@media (max-width: 767px) { .hk { --hk-travel: 300svh; } }
.hk-track { position: relative; height: calc(100svh - var(--bar-h) + var(--hk-travel)); }
.hk-stage {
  position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h));
  display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); padding-block: clamp(1rem, 2.5vh, 2rem);
}
.hk-head { display: grid; gap: var(--flow-text); }
.hk-head .vis-head { margin-bottom: 0; }
.hk-lead { color: var(--text-2); max-width: 46ch; }
.hk-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hk-hint { color: var(--text-2); }
.hk-pause { position: static; background: #000000; color: #FFFFFF; border: 1px solid #5A5A5A; }
.hk-view {
  position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 24px; background: #000000;
  margin-inline: calc(-1 * var(--content-safe)); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect;
}
@media (min-width: 1440px) { .hk-view { margin-inline: calc(-1 * (100vw - var(--max)) / 2); } }
.hk-view.is-drag { cursor: grabbing; }
.hk-plane { position: absolute; left: 0; top: 0; will-change: transform; }
.hk-cell { position: absolute; }
.hk-tile { position: relative; width: 100%; height: 100%; margin: 0; border-radius: 16px; overflow: hidden; background: #0A0A0A; box-shadow: 0 0 0 1px #1E1E1E; }
.hk-tile img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.hk-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 18px; display: grid; gap: 2px; color: #FFFFFF; }
.hk-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.hk-tile b { font-size: clamp(13px, 0.75rem + 0.25vw, 16px); line-height: 1.2; font-weight: 700; }
.hk-l { font-size: 12px; line-height: 1.35; opacity: .85; }
@media (max-width: 699px) { .hk-l { display: none; } .hk-tile figcaption { padding: 10px 10px 16px; } }
@media (hover: hover) and (pointer: fine) {
  .hk-cell .hk-tile { transition: transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard); }
  .hk-view:not(.is-drag) .hk-cell:hover .hk-tile { transform: scale(1.04); box-shadow: 0 0 0 1px #5A5A5A, 0 18px 40px rgb(0 0 0 / .6); }
}
/* lista semântica: lida por leitores de tela; vira a grade estática com movimento reduzido */
.hk-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; list-style: none; }
.hk.is-static .hk-track { height: auto; }
.hk.is-static .hk-stage { position: static; height: auto; padding-block: 0; }
.hk.is-static .hk-view, .hk.is-static .hk-hint, .hk.is-static .hk-pause { display: none; }
.hk.is-static .hk-list {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: var(--flow-block) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px);
}
.hk.is-static .hk-list .hk-tile { aspect-ratio: 3 / 4; height: auto; }
@media (min-width: 640px) { .hk.is-static .hk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hk.is-static .hk-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hk-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) {
  .hk-f { display: none; }
  .hk-stage { gap: 0.75rem; padding-block: 0.75rem; }
  .hk-head { gap: 0.5rem; }
  .hk-head .vis-head { gap: 0.5rem; }
  .hk-lead { font-size: 1rem; line-height: 1.45; }
  .hk-bar { flex-wrap: nowrap; }
  .hk-pause { width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; }
  .hk-pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* =====================================================================
   rev13 — heroes das soluções: fundo interativo em tela cheia (HeroFX)
   O painel arredondado à direita saiu; o fundo ocupa a hero inteira,
   atrás de navegação, título, descrição e CTA. O véu garante o lado calmo.
   ===================================================================== */
.sec--hbg { overflow: clip; }
.sec--hbg > .sec-inner { position: relative; z-index: 2; }
.hbg { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; background: #000000; }
.hbg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hbg-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #000000 0, rgb(0 0 0 / .9) calc(var(--calm-x, 50%) * .75), rgb(0 0 0 / 0) calc(var(--calm-x, 50%) + 6%)),
    linear-gradient(180deg, rgb(0 0 0 / .55) 0, rgb(0 0 0 / 0) 18%, rgb(0 0 0 / 0) 82%, rgb(0 0 0 / .6) 100%);
}
.hbg-grain { position: absolute; inset: -50%; opacity: .07; mix-blend-mode: screen; background-size: 160px 160px; animation: hbg-grain 1.2s steps(6) infinite; }
@keyframes hbg-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }
.hbg-pause { position: absolute; z-index: 3; right: var(--content-safe); bottom: calc(var(--sec-space-bottom) * .5 + var(--stack-zone)); background: rgb(0 0 0 / .55); color: #FFFFFF; border: 1px solid rgb(255 255 255 / .35); }
@media (min-width: 1440px) { .hbg-pause { right: calc((100% - var(--max)) / 2); } }
/* hero só de texto à esquerda: a coluna direita é do fundo */
.sec--hbg .ihero { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .sec--hbg .ihero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* celular/tablet: o motivo ganha uma área própria abaixo do texto */
@media (max-width: 1023px) {
  .sec[data-tone].sec--hbg > .sec-inner { padding-bottom: calc(var(--sec-space-bottom) + 34svh); }
  .hbg-scrim { background: linear-gradient(180deg, #000000 0, rgb(0 0 0 / .92) calc(var(--calm-y, 60%) - 40px), rgb(0 0 0 / 0) calc(var(--calm-y, 60%) + 40px), rgb(0 0 0 / 0) 88%, rgb(0 0 0 / .55) 100%); }
  .hbg-pause { bottom: calc(var(--stack-zone) + 16px); }
}
@media (prefers-reduced-motion: reduce) { .hbg-grain { animation: none; } }
.hbg-pause { top: auto; left: auto; height: auto; width: auto; }
/* foco programático em títulos (troca de rota, âncoras): sem anel visual */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, [id="form-diagnostico"]:focus { outline: none; }

/* =====================================================================
   rev14 — ajustes de responsividade para produção (auditoria 320–1920)
   ===================================================================== */
/* rótulos mono dentro das ilustrações: mínimo legível de 12px */
.mcap .micro, .msg small, .pgal-card .slate { font-size: 12px; }
/* seletor segmentado (Antes/Depois): alvo de toque de 44px */
.seg button { min-height: 44px; }
/* formulários lado a lado com o texto (1024–1279px): campos em coluna única para não estreitar */
@media (min-width: 1024px) and (max-width: 1279px) { .lf-fields { grid-template-columns: minmax(0, 1fr); } .lf-fields > .field--half { grid-column: 1 / -1; } }