/* =========================================================================
   ADOS — Ads Operating System · site institucional
   Tokens e tipografia derivados de ADOS Design System v1.0 (ados.css)
   Fontes auto-hospedadas: nenhuma requisição a terceiros nesta página.
   ========================================================================= */

/* ── 1. Tipografia ─────────────────────────────────────────────────────── */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ── 2. Tokens (dark é o default do ADOS) ──────────────────────────────── */
:root{
  --brand:#A2FF00; --brand-hover:#B6FF3D; --brand-active:#8AD900; --brand-ink:#07080A;
  --brand-subtle:rgba(162,255,0,.12); --brand-line:rgba(162,255,0,.34);

  --background:#07080A;
  --surface-01:#0B0D10; --surface-02:#111418; --surface-03:#171B21;
  --surface-elevated:#1E242B; --surface-inset:#050609;

  --text-primary:#E9EEF2; --text-secondary:#98A3AF; --text-muted:#7C858F; --text-inverse:#07080A;

  --border-subtle:#171C22; --border:#232A32; --border-strong:#37414D;

  --success:#00D6A3; --warning:#FFB020; --danger:#FF5A5A; --info:#4D9DFF;
  --success-subtle:rgba(0,214,163,.12); --warning-subtle:rgba(255,176,32,.12);
  --danger-subtle:rgba(255,90,90,.12); --info-subtle:rgba(77,157,255,.12);

  --font-sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --tracking-tight:-.015em; --tracking-label:.1em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;

  --radius-xs:2px; --radius-sm:3px; --radius-md:4px; --radius-lg:6px; --radius-pill:999px;
  --chamfer-sm:6px; --chamfer-md:10px; --chamfer-lg:16px; --chamfer-xl:28px;

  --shadow-01:0 1px 2px rgba(0,0,0,.45);
  --shadow-02:0 4px 14px rgba(0,0,0,.5);
  --shadow-03:0 18px 44px rgba(0,0,0,.58);
  --glow-brand:0 0 0 1px rgba(162,255,0,.45),0 0 26px rgba(162,255,0,.16);

  --duration-instant:80ms; --duration-fast:140ms; --duration-base:220ms; --duration-slow:400ms;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);

  --opacity-muted:.64;
  --focus-ring:0 0 0 2px var(--background),0 0 0 4px var(--brand);

  --topbar-h:64px;
  --wrap:1200px;
  --gutter:clamp(20px,5vw,64px);
}

/* ── 3. Reset e base ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--background);color:var(--text-primary);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
  letter-spacing:var(--tracking-tight);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm);}
::selection{background:var(--brand);color:var(--brand-ink);}
hr{border:0;border-top:1px solid var(--border-subtle);margin:0;}

/* barra de rolagem discreta, como no design system */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:3px solid var(--background);}
*::-webkit-scrollbar-track{background:transparent;}

/* ── 4. Escala tipográfica do site (herda a lógica do DS, ampliada) ────── */
.t-display{font-size:clamp(34px,4.9vw,62px);line-height:1.04;font-weight:700;letter-spacing:-.034em;}
.t-h1{font-size:clamp(28px,3.6vw,46px);line-height:1.1;font-weight:600;letter-spacing:-.028em;}
.t-h2{font-size:clamp(21px,2.2vw,30px);line-height:1.2;font-weight:600;letter-spacing:-.02em;}
.t-h3{font-size:clamp(17px,1.4vw,20px);line-height:1.3;font-weight:600;letter-spacing:-.015em;}
.t-lead{font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:var(--text-secondary);}
.t-body{font-size:15px;line-height:1.65;color:var(--text-secondary);}
.t-sm{font-size:13.5px;line-height:1.55;color:var(--text-secondary);}
.t-xs{font-size:12px;line-height:1.45;color:var(--text-muted);}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.eyebrow{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
}
.lime{color:var(--brand);}
.dim{color:var(--text-muted);}

/* chanfro a 45° — a assinatura proprietária do ADOS. Um por composição. */
.chamfer{clip-path:polygon(var(--ch,10px) 0,100% 0,100% calc(100% - var(--ch,10px)),calc(100% - var(--ch,10px)) 100%,0 100%,0 var(--ch,10px));}
/* Uma `border` normal e retangular: o clip-path corta fora justamente a
   diagonal, que fica sem contorno. Aqui o proprio elemento vira a linha e o
   ::before, recuado pela espessura, devolve o preenchimento. Assim o corte a
   45 graus tem borda em todo o perimetro. */
.chamfer--bd{
  --ch-bw:1px;
  border:0;position:relative;isolation:isolate;
  background:var(--ch-line);
}
.chamfer--bd::before{
  content:'';position:absolute;inset:var(--ch-bw);z-index:-1;
  background-color:var(--ch-bg,var(--background));
  background-image:var(--ch-fill,none);
  clip-path:inherit;
}

/* ── 5. Layout ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(72px,10vw,140px);position:relative;}
.section--tight{padding-block:clamp(56px,7vw,96px);}
.section__head{max-width:760px;margin-bottom:clamp(36px,5vw,64px);}
.section__head .eyebrow{display:block;margin-bottom:var(--space-4);}
.section__head .t-h1{margin-bottom:var(--space-5);}
.rule{height:1px;background:var(--border-subtle);width:100%;}
.rule--brand{background:linear-gradient(90deg,var(--brand-line),transparent 62%);}

/* numeração de seção, à esquerda, mono — "número antes de adjetivo" */
.sec-index{
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  color:var(--brand);display:inline-flex;align-items:center;gap:var(--space-2);
}
.sec-index::after{content:'';width:36px;height:1px;background:var(--brand-line);}

/* ── 6. Navegação ──────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:500;height:var(--topbar-h);
  display:flex;align-items:center;
  background:rgba(7,8,10,0);border-bottom:1px solid transparent;
  transition:background var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),backdrop-filter var(--duration-base) var(--ease-out);
}
.nav.is-stuck{background:rgba(7,8,10,.82);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--border-subtle);}
.nav.menu-open,.nav.menu-open.is-stuck{background:transparent;backdrop-filter:none;border-bottom-color:transparent;}
.nav__inner{display:flex;align-items:center;gap:var(--space-6);width:100%;}
.nav__brand{display:flex;align-items:center;gap:var(--space-3);color:var(--brand);flex:none;}
.nav__brand svg{width:62px;height:auto;}
.nav__brand span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);border-left:1px solid var(--border);
  padding-left:var(--space-3);line-height:1.2;
}
.nav__links{display:flex;align-items:center;gap:var(--space-1);margin-left:auto;}
.nav__links a{
  font-size:13px;color:var(--text-secondary);padding:7px 11px;border-radius:var(--radius-md);
  transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out);
}
.nav__links a:hover{color:var(--text-primary);background:var(--surface-02);}
.nav__cta{
  flex:none;font-size:13px;font-weight:600;color:var(--brand);
  padding:8px 14px;--ch:8px;
  --ch-line:var(--brand-line);--ch-bg:var(--background);
  --ch-fill:linear-gradient(180deg,rgba(162,255,0,.16),rgba(162,255,0,.1));
  transition:color var(--duration-fast) var(--ease-out);
}
.nav__cta:hover{--ch-line:var(--brand);--ch-fill:linear-gradient(180deg,rgba(162,255,0,.26),rgba(162,255,0,.18));}
.nav__toggle{display:none;margin-left:auto;padding:8px;color:var(--text-secondary);}
.nav__toggle svg{width:20px;height:20px;}

@media (max-width:900px){
  .nav__links{
    position:fixed;inset:var(--topbar-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:rgba(7,8,10,.97);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);padding:var(--space-3) var(--gutter) var(--space-5);
    margin:0;display:none;
  }
  .nav__links.is-open{display:flex;}
  .nav__links a{padding:12px 0;border-bottom:1px solid var(--border-subtle);font-size:15px;border-radius:0;}
  .nav__toggle{display:block;}
  .nav__cta{display:none;}
}

/* ── 7. Hero + LightTunnel (WebGL) ─────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--topbar-h) + 56px) 72px;overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-2;pointer-events:none;}
/* fallback estático: vale sozinho se o WebGL não subir */
.hero__bg::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(58% 46% at 50% 46%,rgba(162,255,0,.10),transparent 68%),
    radial-gradient(90% 70% at 50% 50%,rgba(162,255,0,.045),transparent 72%);
}
.hero__tunnel{position:absolute;inset:0;opacity:0;transition:opacity 900ms var(--ease-out);}
.hero__tunnel.is-ready{opacity:1;}
.hero__tunnel canvas{width:100%;height:100%;display:block;}
/* vinheta: mantém a tipografia legível sobre o túnel */
.hero__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* scrim da coluna de texto: o lado esquerdo vira chão sólido */
    linear-gradient(90deg,rgba(7,8,10,.93) 0%,rgba(7,8,10,.88) 26%,rgba(7,8,10,.58) 46%,rgba(7,8,10,.12) 72%,rgba(7,8,10,0) 100%),
    /* topo sob a nav e base fundindo com a seção seguinte */
    linear-gradient(180deg,rgba(7,8,10,.86) 0%,rgba(7,8,10,.2) 24%,rgba(7,8,10,.24) 64%,var(--background) 100%),
    /* vinheta: mantém a luz concentrada e apaga as quinas */
    radial-gradient(120% 88% at 68% 46%,transparent 34%,rgba(7,8,10,.34) 76%,rgba(7,8,10,.78) 100%);
}
@media (max-width:900px){
  /* Sem coluna lateral no mobile o scrim tem de ser parelho, mas o anterior
     apagava o fundo quase por completo. Agora protege a faixa do texto e
     deixa o tunel respirar em cima e embaixo. */
  .hero__veil{
    background:
      linear-gradient(180deg,rgba(7,8,10,.6) 0%,rgba(7,8,10,.16) 16%,rgba(7,8,10,.82) 34%,rgba(7,8,10,.9) 62%,rgba(7,8,10,.94) 84%,var(--background) 100%),
      radial-gradient(150% 34% at 50% 6%,transparent 34%,rgba(7,8,10,.28) 78%);
  }
  /* Logo menor e botoes na mesma linha */
  .hero__wordmark{width:min(210px,44vw);}
  /* O descritor quebrava o pill em duas linhas; o H1 logo abaixo ja diz o que e. */
  .hero__badge .desc{display:none;}
  .hero__badge{font-size:9.5px;padding:6px 12px;}
}
.hero__inner{position:relative;width:100%;}
.hero__grid{display:grid;gap:clamp(18px,2.4vw,30px);max-width:920px;}
.hero__badge{
  /* Item de grid estica na horizontal por padrao: sem justify-self o pill
     ocupava a coluna inteira em vez de encostar na ultima palavra. */
  display:inline-flex;align-items:center;gap:var(--space-2);
  align-self:start;justify-self:start;width:fit-content;
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-secondary);
  border:1px solid var(--border);background:rgba(11,13,16,.6);backdrop-filter:blur(6px);
  padding:6px 11px;border-radius:var(--radius-pill);
}
.hero__badge b{color:var(--brand);font-weight:600;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;box-shadow:0 0 8px var(--brand);}
.dot--pulse{animation:dotPulse 2.4s var(--ease-in-out) infinite;}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.82);}}

.hero__wordmark{width:min(300px,54vw);color:var(--brand);}
.hero h1{max-width:19ch;}
.hero__lead{max-width:60ch;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}
@media (max-width:900px){
  /* Precisa vir DEPOIS da regra base: media query nao soma especificidade. */
  .hero__actions{flex-wrap:nowrap;gap:var(--space-2);}
  .hero__actions .btn{padding:11px 14px;font-size:13px;flex:1 1 0;justify-content:center;white-space:nowrap;}
  .hero__actions .btn svg{width:13px;height:13px;}
}
@media (max-width:400px){
  .hero__actions .btn{padding:11px 10px;font-size:12.5px;}
}

.btn{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:14px;font-weight:600;padding:12px 20px;
  transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);
}
.btn svg{width:15px;height:15px;flex:none;}
.btn--primary{background:var(--brand);color:var(--brand-ink);--ch:10px;}
.btn--primary:hover{background:var(--brand-hover);}
.btn--primary:active{background:var(--brand-active);}
.btn--ghost{border:1px solid var(--border-strong);color:var(--text-primary);border-radius:var(--radius-md);}
.btn--ghost:hover{background:var(--surface-02);border-color:var(--text-muted);}

/* faixa de fatos, em mono — "número antes de adjetivo" */
.factstrip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);background:rgba(11,13,16,.55);backdrop-filter:blur(8px);
}
.factstrip div{padding:var(--space-4) var(--space-5);border-left:1px solid var(--border-subtle);}
.factstrip div:first-child{border-left:0;}
.factstrip dt{font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--brand);line-height:1.1;font-variant-numeric:tabular-nums;}
.factstrip dd{margin:6px 0 0;font-size:12px;color:var(--text-muted);line-height:1.35;}
@media (max-width:760px){
  .factstrip{grid-template-columns:repeat(2,1fr);}
  .factstrip div:nth-child(3){border-left:0;}
  .factstrip div:nth-child(n+3){border-top:1px solid var(--border-subtle);}
}
.hero__scroll{
  position:absolute;left:var(--gutter);bottom:22px;display:flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);
}
.hero__scroll i{display:block;width:1px;height:26px;background:linear-gradient(180deg,var(--brand),transparent);animation:scrollHint 2.2s var(--ease-in-out) infinite;}
@keyframes scrollHint{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.5;}50%{transform:scaleY(1);opacity:1;}}
@media (max-width:900px){.hero__scroll{display:none;}}

/* ── 8. Bloco CONTENT-001 · Scroll-Revealed Brand Statement ────────────── */
/* A frase nasce a 40% de opacidade e sobe para 100% palavra a palavra,
   atada ao scroll. Nunca opacity:0 — é ganho de força, não aparição.      */
.manifesto{
  min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:var(--surface-inset);
  border-block:1px solid var(--border-subtle);
}
.manifesto::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,rgba(162,255,0,.05),transparent 70%);
}
.manifesto__inner{max-width:none;width:80%;padding-inline:0;margin-inline:auto;}
.manifesto__text{
  position:relative;font-size:clamp(28px,4.6vw,64px);line-height:1.16;font-weight:600;
  letter-spacing:-.03em;max-width:none;text-align:center;text-wrap:balance;
}
@media (max-width:760px){.manifesto__inner{width:88%;}}
.srs__unit{opacity:.4;display:inline-block;will-change:opacity;}
.srs__unit--lime{color:var(--brand);}
.manifesto__foot{
  position:relative;margin-top:clamp(36px,5vw,64px);display:flex;flex-wrap:wrap;
  gap:var(--space-6) clamp(32px,6vw,80px);justify-content:center;align-items:start;
  padding-top:var(--space-5);border-top:1px solid var(--border-subtle);
}
.manifesto__foot p{font-size:13px;color:var(--text-muted);flex:0 1 34ch;text-align:center;}

/* ── 9. Bloco SB-001 · Horizontal Scroll Reveal ────────────────────────── */
/* Padrão: grade legível. Só vira trilho horizontal quando o JS confirma
   GSAP + viewport ≥1024px + movimento permitido (classe .is-hscroll).     */
.loop{background:var(--background);}
.loop__viewport{position:relative;}
.loop__track{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-5);
}
/* Fixada, a seção INTEIRA (cabeçalho + trilho) precisa caber em uma tela —
   senão o pin empurra o trilho para fora do enquadramento. */
.loop.is-hscroll{
  height:100svh;padding-block:0;padding-top:var(--topbar-h);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.loop.is-hscroll .section__head{margin-bottom:clamp(20px,3.4vh,44px);}
.loop.is-hscroll .loop__viewport{display:flex;align-items:center;overflow:hidden;}
.loop.is-hscroll .loop__track{
  display:flex;grid-template-columns:none;gap:var(--space-6);
  padding-inline:var(--gutter);will-change:transform;
}
.loop.is-hscroll .step{flex:0 0 clamp(320px,29vw,420px);min-height:min(430px,48vh);}
@media (max-width:900px){
  /* Trilho tambem no mobile: cartao quase cheio, com um naco do proximo a
     mostra para o gesto ficar evidente. */
  .loop.is-hscroll{justify-content:flex-start;padding-top:calc(var(--topbar-h) + 28px);}
  .loop.is-hscroll .step{flex:0 0 min(78vw,340px);min-height:min(58vh,420px);padding:var(--space-5);}
  .loop.is-hscroll .loop__track{gap:var(--space-4);}
  .loop.is-hscroll .section__head{margin-bottom:var(--space-5);}
  .loop.is-hscroll .section__head .t-lead{font-size:14px;}
  .loop.is-hscroll .step h3{font-size:17px;}
  .loop.is-hscroll .step p{font-size:13.5px;}
}

.step{
  position:relative;background:var(--surface-01);border:1px solid var(--border);
  padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);
  min-height:290px;
}
.step__n{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:var(--tracking-label);
  color:var(--brand);display:flex;align-items:center;gap:var(--space-3);
}
.step__n::after{content:'';flex:1;height:1px;background:var(--border);}
.step h3{font-size:19px;font-weight:600;letter-spacing:-.02em;}
.step p{font-size:14px;line-height:1.6;color:var(--text-secondary);flex:1;}
.step__meta{
  font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
  padding-top:var(--space-3);border-top:1px solid var(--border-subtle);
  display:flex;justify-content:space-between;gap:var(--space-3);
}
.step__meta b{color:var(--text-secondary);font-weight:400;}
/* o ator de cada etapa: agente (lime) ou humano (warning) */
.step[data-actor="humano"]{border-color:rgba(255,176,32,.28);}
.step[data-actor="humano"] .step__n{color:var(--warning);}
.step[data-actor="sistema"] .step__n{color:var(--info);}
.loop__hint{
  display:none;align-items:center;gap:var(--space-2);margin-top:var(--space-5);
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);
}
.loop.is-hscroll .loop__hint{display:flex;position:absolute;left:var(--gutter);bottom:clamp(26px,5vh,56px);margin:0;}
@media (max-width:900px){
  /* Fixado, o trilho encosta a dica nos cartoes: o respiro vem do proprio
     viewport, nao de um bottom maior, que sairia da tela. */
  .loop.is-hscroll .loop__viewport{padding-bottom:clamp(34px,6vh,58px);}
  .loop.is-hscroll .loop__hint{bottom:6px;left:var(--gutter);}
}

/* ── 10. Bloco CARDS-001 · Scroll Stack ────────────────────────────────── */
/* Pin = position:sticky escalonado (CSS puro, funciona sem JS).
   GSAP só interpola a estética de profundidade (scale/rotate/blur).       */
.stack{--stack-top:96px;--stack-offset:18px;position:relative;}
.stack__item{
  position:sticky;top:calc(var(--stack-top) + var(--i) * var(--stack-offset));
  margin-bottom:var(--space-6);
}
.stack__inner{
  transform-origin:top center;will-change:transform,filter;
  background:var(--surface-01);border:1px solid var(--border);
  box-shadow:var(--shadow-02);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  min-height:280px;
}
.stack__end{height:38vh;}
.agent__id{
  padding:var(--space-6);border-right:1px solid var(--border-subtle);
  display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface-02);
}
.agent__avatar{
  width:44px;height:44px;display:grid;place-items:center;--ch:8px;
  --ch-line:var(--brand-line);--ch-bg:var(--surface-02);
  --ch-fill:linear-gradient(180deg,rgba(162,255,0,.18),rgba(162,255,0,.06));
  color:var(--brand);
  font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.02em;
}
.agent__slug{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);}
.agent__id h3{font-size:19px;font-weight:600;letter-spacing:-.02em;}
.agent__role{font-size:13px;color:var(--text-secondary);line-height:1.55;}
.agent__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);}
.agent__body > p{font-size:14.5px;line-height:1.62;color:var(--text-secondary);}
.agent__does{display:grid;gap:var(--space-2);margin-top:auto;}
.agent__does li{
  display:flex;gap:var(--space-3);font-size:13px;color:var(--text-secondary);
  padding:9px 0;border-top:1px solid var(--border-subtle);align-items:baseline;
}
.agent__does li::before{
  content:'';width:5px;height:5px;flex:none;transform:translateY(-1px) rotate(45deg);
  background:var(--brand);
}
.agent__limit{
  font-size:12.5px;color:var(--text-muted);border-left:2px solid var(--warning);
  padding-left:var(--space-3);line-height:1.5;
}
.agent__limit b{color:var(--warning);font-weight:600;}
@media (max-width:860px){
  .stack{--stack-top:80px;--stack-offset:10px;}
  .stack__inner{grid-template-columns:1fr;}
  .agent__id{border-right:0;border-bottom:1px solid var(--border-subtle);}
}

/* ── 11. Bloco EFFECT-001 · Border Glow ────────────────────────────────── */
/* JS entrega duas variáveis (--edge-proximity 0-100, --cursor-angle deg).
   O CSS faz o resto: cone conic-gradient girando com o cursor.            */
.bglow{
  --edge-proximity:0; --cursor-angle:0deg;
  --edge-sensitivity:22; --color-sensitivity:44;
  position:relative;isolation:isolate;
  background:var(--surface-01);
  border:1px solid var(--border);
  padding:var(--space-6);
}
.bglow__edge{
  content:'';position:absolute;inset:-1px;z-index:-1;pointer-events:none;
  border-radius:inherit;mix-blend-mode:plus-lighter;
  opacity:clamp(0,calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity))),1);
  box-shadow:
    0 0 0 1px rgba(162,255,0,.85),
    0 0 6px 0 rgba(182,255,61,.62),
    0 0 16px 0 rgba(162,255,0,.4),
    0 0 34px 0 rgba(138,217,0,.26),
    0 0 62px 0 rgba(0,214,163,.17),
    0 0 100px 0 rgba(162,255,0,.11);
  -webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,#000 0%,#000 12%,transparent 34%,transparent 66%,#000 88%,#000 100%);
  mask-image:conic-gradient(from var(--cursor-angle) at center,#000 0%,#000 12%,transparent 34%,transparent 66%,#000 88%,#000 100%);
  transition:opacity var(--duration-base) var(--ease-out);
}
/* Faixa colorida na moldura: fundo em padding-box + malha em border-box,
   então só o 1px fora do padding-box mostra a cor. */
.bglow__ring{
  position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  opacity:clamp(0,calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))),1);
  /* O cone gira com o cursor. Fica no elemento; o recorte da moldura fica no
     ::before, porque compor mais de duas camadas de mask nao e confiavel. */
  -webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,#000 0%,#000 14%,transparent 36%,transparent 64%,#000 86%,#000 100%);
  mask-image:conic-gradient(from var(--cursor-angle) at center,#000 0%,#000 14%,transparent 36%,transparent 64%,#000 86%,#000 100%);
  transition:opacity var(--duration-base) var(--ease-out);
}
/* Receita canonica de borda em gradiente: pinta a caixa toda e subtrai o
   miolo, sobrando exatamente o 1px da moldura. */
.bglow__ring::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:
    radial-gradient(60% 140% at 10% 0%,#A2FF00,transparent 62%),
    radial-gradient(60% 140% at 46% 0%,#B6FF3D,transparent 62%),
    radial-gradient(60% 140% at 90% 0%,#00D6A3,transparent 62%),
    radial-gradient(60% 140% at 10% 100%,#8AD900,transparent 62%),
    radial-gradient(60% 140% at 54% 100%,#A2FF00,transparent 62%),
    radial-gradient(60% 140% at 92% 100%,#4D9DFF,transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.bglow__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  opacity:clamp(0,calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))),1);
  background:radial-gradient(52% 52% at 50% 50%,transparent 58%,rgba(162,255,0,.055) 92%,rgba(77,157,255,.045) 100%);
  mix-blend-mode:soft-light;
  transition:opacity var(--duration-base) var(--ease-out);
}
.bglow:hover{border-color:var(--border-strong);}
/* O efeito passa a valer para qualquer superfície de cartão da página. */
.step,.panel,.stack__inner,.pillar{position:relative;isolation:isolate;}
.step.bglow,.panel.bglow,.pillar.bglow{--edge-sensitivity:22;--color-sensitivity:44;--edge-proximity:0;--cursor-angle:0deg;}

/* ── 12. Grades genéricas de conteúdo ──────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6);}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4);}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);}

.panel{background:var(--surface-01);border:1px solid var(--border);padding:var(--space-6);}
.panel h3{font-size:16px;font-weight:600;margin-bottom:var(--space-3);letter-spacing:-.018em;}
.panel p{font-size:13.5px;line-height:1.6;color:var(--text-secondary);}
.panel__icon{
  width:34px;height:34px;margin-bottom:var(--space-4);color:var(--brand);--ch:8px;
  display:grid;place-items:center;
  --ch-line:var(--brand-line);--ch-bg:var(--surface-01);
  --ch-fill:linear-gradient(180deg,rgba(162,255,0,.18),rgba(162,255,0,.06));
}
.panel__icon svg{width:17px;height:17px;}

/* Veredito "é / não é". Antes eram duas listas cinzas de mesmo peso, sem
   tensao. Agora cada lado e um painel com o verbo em tipografia display: a
   pagina inteira e sobre restricao, entao o "Nao e" precisa pesar tanto
   quanto o "E". */
/* Chapeu do par: sem o titulo, os dois cards apareciam sem contexto e o
   leitor tinha de inferir que sao um veredito unico em duas metades. */
.isnot-head{text-align:center;max-width:44ch;margin:0 auto clamp(26px,3.4vw,44px);}
.isnot-head h3{
  font-size:clamp(20px,2.3vw,29px);font-weight:600;letter-spacing:-.025em;
  line-height:1.25;color:var(--text-primary);
}
.isnot-head span{
  display:block;margin-bottom:var(--space-3);
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--brand);
}
.isnot{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-4);}
.isnot__col{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--border);background:var(--surface-01);
  padding:clamp(22px,2.6vw,34px);
  transition:border-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);
}
.isnot__col:hover{transform:translateY(-3px);}
/* Fio de luz na aresta superior: o "top-edge sheen" que da acabamento ao card */
.isnot__col::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--isnot-line),transparent);
}
/* Halo de canto, bem contido, para o painel nao ser um retangulo chapado */
.isnot__col::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 0% 0%,var(--isnot-glow),transparent 62%);
  opacity:.75;transition:opacity var(--duration-base) var(--ease-out);
}
.isnot__col:hover::after{opacity:1;}

.isnot__col--yes{--isnot-line:var(--brand);--isnot-glow:rgba(162,255,0,.14);}
.isnot__col--no{--isnot-line:var(--danger);--isnot-glow:rgba(255,90,90,.1);}
.isnot__col--yes:hover{border-color:var(--brand-line);}
.isnot__col--no:hover{border-color:rgba(255,90,90,.34);}

/* O verbo vira o elemento tipografico dominante da secao */
.isnot__col h3{
  font-size:clamp(40px,5.6vw,64px);line-height:.95;font-weight:700;
  letter-spacing:-.04em;text-transform:none;font-family:var(--font-sans);
  color:var(--text-primary);
  margin-bottom:clamp(20px,2.4vw,30px);
  display:flex;align-items:baseline;gap:var(--space-3);
}
.isnot__col--yes h3{color:var(--brand);}
.isnot__col--no h3{color:var(--danger);}
/* Contador em mono ao lado do verbo: numero antes de adjetivo */
.isnot__col h3 small{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:var(--tracking-label);color:var(--text-muted);
  text-transform:uppercase;
  margin-left:auto;align-self:center;
}

.isnot__col ul{display:grid;gap:0;}
.isnot__col li{
  font-size:15px;line-height:1.5;color:var(--text-secondary);
  padding:14px 0;border-top:1px solid var(--border-subtle);
  display:flex;gap:var(--space-3);align-items:flex-start;
  transition:color var(--duration-fast) var(--ease-out),padding-left var(--duration-base) var(--ease-out);
}
.isnot__col li:hover{color:var(--text-primary);padding-left:6px;}
.isnot__col li::before{
  font-family:var(--font-mono);font-size:13px;font-weight:600;flex:none;
  line-height:1.5;
}
.isnot__col--yes li::before{content:'+';color:var(--brand);}
.isnot__col--no li::before{content:'×';color:var(--danger);}
.isnot__col--no li{color:var(--text-muted);}
.isnot__col--no li:hover{color:var(--text-secondary);}

/* definição em duas colunas (dl) */
.deflist{display:grid;gap:0;}
.deflist > div{
  display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:var(--space-6);
  padding:var(--space-5) 0;border-top:1px solid var(--border-subtle);
}
.deflist dt{font-size:14px;font-weight:600;color:var(--text-primary);letter-spacing:-.015em;}
.deflist dt small{display:block;font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-muted);margin-top:4px;letter-spacing:0;}
.deflist dd{margin:0;font-size:14px;line-height:1.62;color:var(--text-secondary);}
@media (max-width:720px){.deflist > div{grid-template-columns:1fr;gap:var(--space-2);}}

/* ── 13. Preview da interface (ilustração montada com os tokens do DS) ─── */
.preview{
  border:1px solid var(--border);background:var(--surface-01);overflow:hidden;
  box-shadow:var(--shadow-03);
}
.preview__bar{
  height:42px;display:flex;align-items:center;gap:var(--space-3);padding-inline:var(--space-4);
  background:var(--surface-02);border-bottom:1px solid var(--border);
}
.preview__bar .dots{display:flex;gap:6px;}
.preview__bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--border-strong);display:block;}
.preview__bar .path{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);}
.preview__bar .path b{color:var(--text-secondary);font-weight:400;}
.preview__bar .sync{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.preview__body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1px;background:var(--border-subtle);}
.preview__col{background:var(--surface-01);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);}
.preview__col > .t-sm{margin-top:0;}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);}
.kpi{background:var(--surface-01);padding:var(--space-4) var(--space-3);}
.kpi__label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);}
.kpi__value{font-family:var(--font-mono);font-size:19px;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.kpi--primary .kpi__value{color:var(--brand);}
.delta{font-family:var(--font-mono);font-size:11px;margin-top:3px;display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;}
.delta--up{color:var(--success);}
.delta--down{color:var(--danger);}
.delta i{width:0;height:0;border-inline:3.5px solid transparent;}
.delta--up i{border-bottom:5px solid currentColor;}
.delta--down i{border-top:5px solid currentColor;}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr);}}

.spark{width:100%;height:64px;display:block;}
.spark path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;}
.spark .s-main{stroke:var(--brand);}
.spark .s-prev{stroke:var(--text-muted);stroke-dasharray:3 3;opacity:.6;}
.spark .s-area{fill:url(#adosArea);stroke:none;}
.chart__legend{display:flex;gap:var(--space-4);font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}
.chart__legend span{display:flex;align-items:center;gap:6px;}
.chart__legend i{width:10px;height:2px;display:block;}

/* card de recomendação — os seis campos obrigatórios do DS */
.reco{--ch:10px;--ch-line:var(--border);--ch-bg:var(--surface-02);}
.reco__top{
  padding:var(--space-4);border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(180deg,rgba(162,255,0,.07),transparent);
  display:flex;gap:var(--space-3);align-items:flex-start;
}
.reco__badge{
  width:28px;height:28px;flex:none;display:grid;place-items:center;--ch:6px;
  --ch-line:var(--brand-line);--ch-bg:var(--surface-02);
  --ch-fill:linear-gradient(180deg,rgba(162,255,0,.2),rgba(162,255,0,.06));
  color:var(--brand);
  font-family:var(--font-mono);font-size:10px;font-weight:700;
}
.reco__type{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--brand);}
.reco__title{font-size:14px;font-weight:600;margin-top:4px;letter-spacing:-.015em;line-height:1.35;}
.reco__impact{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--success);flex:none;}
.reco__body{padding:var(--space-4);display:grid;gap:var(--space-4);}
.reco__why{font-size:12.5px;line-height:1.55;color:var(--text-secondary);}
.reco__why b{color:var(--text-primary);font-weight:600;}
.reco__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
.reco__facts div{border-left:1px solid var(--border);padding-left:var(--space-3);}
.reco__facts dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.reco__facts dd{margin:4px 0 0;font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;}
.reco__actions{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.mini-btn{font-size:12px;font-weight:600;padding:7px 13px;border-radius:var(--radius-md);border:1px solid var(--border-strong);color:var(--text-secondary);}
.mini-btn--primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);--ch:7px;border-radius:0;}
.confidence{display:flex;align-items:center;gap:var(--space-3);}
.confidence__track{flex:1;height:3px;background:var(--surface-inset);border:1px solid var(--border-subtle);}
.confidence__fill{height:100%;background:var(--brand);display:block;}

/* status de agente */
.agents-live{display:grid;gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);}
.agentrow{background:var(--surface-01);padding:var(--space-3) var(--space-4);display:flex;align-items:center;gap:var(--space-3);}
.agentrow__tag{font-family:var(--font-mono);font-size:10px;font-weight:700;width:26px;height:26px;flex:none;display:grid;place-items:center;background:var(--surface-03);color:var(--text-secondary);border:1px solid var(--border);}
.agentrow__name{font-size:13px;font-weight:500;}
.agentrow__desc{font-size:11.5px;color:var(--text-muted);}
.status{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.status i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.status--work{color:var(--info);}
.status--wait{color:var(--warning);}
.status--done{color:var(--success);}
.status--idle{color:var(--text-muted);}
@media (max-width:900px){
  .preview__body{grid-template-columns:1fr;}
  .agentrow__desc{display:none;}
}
.preview__note{font-size:12px;color:var(--text-muted);margin-top:var(--space-4);display:flex;gap:var(--space-2);align-items:baseline;}

/* ── 14. Rodapé ────────────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--border-subtle);background:var(--surface-inset);padding-block:var(--space-16) var(--space-8);}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--space-8);}
.footer__brand svg{width:96px;color:var(--brand);margin-bottom:var(--space-4);}
.footer__brand p{font-size:13px;color:var(--text-muted);max-width:34ch;line-height:1.6;}
.footer h4{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-4);}
.footer li{margin-bottom:10px;}
.footer li a{font-size:13.5px;color:var(--text-secondary);transition:color var(--duration-fast) var(--ease-out);}
.footer li a:hover{color:var(--brand);}
.footer__bottom{
  margin-top:var(--space-12);padding-top:var(--space-5);border-top:1px solid var(--border-subtle);
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
}
@media (max-width:860px){.footer__grid{grid-template-columns:repeat(2,1fr);}}

/* ── 15. Páginas de documento (privacidade / termos) ───────────────────── */
.doc-hero{padding-block:calc(var(--topbar-h) + 72px) var(--space-12);border-bottom:1px solid var(--border-subtle);position:relative;overflow:hidden;}
.doc-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 100% at 12% 0%,rgba(162,255,0,.07),transparent 62%);
}
/* O elemento também é .wrap: limitar a largura AQUI recentraria o bloco e
   tiraria o título do eixo do índice/prosa abaixo. Limita-se o filho. */
.doc-hero__inner{position:relative;}
.doc-hero__inner > *{max-width:820px;}
.doc-hero h1{margin-block:var(--space-4) var(--space-5);}
.doc-meta{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border-subtle);}
.doc-meta div{display:grid;gap:3px;}
.doc-meta dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);}
.doc-meta dd{margin:0;font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);}

.doc-layout{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;padding-block:var(--space-16) var(--space-20);}
.toc{position:sticky;top:calc(var(--topbar-h) + 24px);max-height:calc(100svh - var(--topbar-h) - 48px);overflow-y:auto;}
.toc h2{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-4);}
.toc li a{
  display:block;font-size:12.8px;line-height:1.4;color:var(--text-muted);
  padding:7px 0 7px 12px;border-left:1px solid var(--border-subtle);
  transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
}
.toc li a:hover{color:var(--text-secondary);border-left-color:var(--border-strong);}
.toc li a.is-active{color:var(--brand);border-left-color:var(--brand);}
@media (max-width:960px){
  .doc-layout{grid-template-columns:1fr;}
  .toc{position:static;max-height:none;border:1px solid var(--border);padding:var(--space-5);background:var(--surface-01);}
}

.prose{max-width:74ch;}
.prose section{scroll-margin-top:calc(var(--topbar-h) + 24px);padding-bottom:var(--space-12);}
.prose h2{
  font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.022em;line-height:1.25;
  padding-top:var(--space-6);margin-bottom:var(--space-5);
  display:flex;gap:var(--space-4);align-items:baseline;
}
.prose h2::before{
  content:attr(data-n);font-family:var(--font-mono);font-size:12px;font-weight:600;
  color:var(--brand);flex:none;padding-top:4px;
}
.prose h3{font-size:15.5px;font-weight:600;margin:var(--space-6) 0 var(--space-3);letter-spacing:-.015em;}
.prose p{font-size:15px;line-height:1.72;color:var(--text-secondary);margin-bottom:var(--space-4);}
.prose strong{color:var(--text-primary);font-weight:600;}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--brand-line);}
.prose a:hover{text-decoration-color:var(--brand);}
.prose ul{margin-bottom:var(--space-5);display:grid;gap:10px;}
.prose ul li{
  font-size:14.5px;line-height:1.66;color:var(--text-secondary);
  display:flex;gap:var(--space-3);
}
.prose ul li::before{content:'';width:5px;height:5px;flex:none;margin-top:9px;background:var(--brand-line);transform:rotate(45deg);}
.prose ol{margin-bottom:var(--space-5);display:grid;gap:10px;counter-reset:p;}
.prose ol li{font-size:14.5px;line-height:1.66;color:var(--text-secondary);display:flex;gap:var(--space-3);counter-increment:p;}
.prose ol li::before{content:counter(p) '.';font-family:var(--font-mono);font-size:12px;color:var(--brand);flex:none;margin-top:3px;}
.prose code{font-family:var(--font-mono);font-size:12.5px;background:var(--surface-inset);border:1px solid var(--border-subtle);padding:2px 6px;color:var(--text-primary);word-break:break-all;}

.callout{
  border:1px solid var(--border);border-left:2px solid var(--brand);
  background:var(--surface-01);padding:var(--space-5);margin-bottom:var(--space-6);
}
.callout--info{border-left-color:var(--info);}
.callout--warn{border-left-color:var(--warning);}
.callout h3{margin-top:0;font-size:14px;}
.callout p:last-child{margin-bottom:0;}
.callout p{font-size:14px;}

.table-wrap{overflow-x:auto;border:1px solid var(--border);margin-bottom:var(--space-6);}
.dtable{font-size:13px;min-width:560px;}
.dtable th{
  text-align:left;font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);font-weight:600;
  padding:11px var(--space-4);background:var(--surface-02);border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.dtable td{padding:13px var(--space-4);border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:top;line-height:1.55;}
.dtable tr:last-child td{border-bottom:0;}
.dtable td:first-child{color:var(--text-primary);font-weight:500;}
.dtable code{font-size:11.5px;white-space:nowrap;}

/* marcador de campo a preencher antes de publicar */
.fill{
  color:var(--warning);border-bottom:1px dashed var(--warning);
  font-family:var(--font-mono);font-size:.92em;padding:0 2px;
}

/* ── 16. Revelação de entrada (progressive enhancement) ────────────────── */
/* Sem JS/GSAP, o conteúdo já nasce visível — nada depende da animação. */
.js-on [data-reveal]{opacity:0;transform:translateY(18px);}

/* ── 17. Acessibilidade e preferências de movimento ────────────────────── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:var(--brand-ink);
  padding:10px 16px;font-weight:600;font-size:14px;
}
.skip-link:focus{left:var(--gutter);top:12px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .js-on [data-reveal]{opacity:1 !important;transform:none !important;}
  .srs__unit{opacity:1 !important;}
  .stack__item{position:static;}
  .stack__inner{transform:none !important;filter:none !important;}
  .loop.is-hscroll{height:auto;padding-block:clamp(72px,10vw,140px);display:block;}
  .loop.is-hscroll .loop__viewport{height:auto;display:block;overflow:visible;}
  .loop.is-hscroll .loop__track{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));padding-inline:0;transform:none !important;}
  .hero__tunnel{opacity:1;}
}

@media print{
  .nav,.footer,.hero__bg,.hero__veil,.toc,.hero__scroll{display:none !important;}
  body{background:#fff;color:#000;}
  .prose p,.prose li{color:#222;}
}

/* ── 18. Seção Inteligência (separador de brilho + ícones flutuantes) ──── */
.intel{
  position:relative;overflow:hidden;text-align:center;
  background:var(--surface-inset);border-block:1px solid var(--border-subtle);
}
.intel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 46% at 50% 0%,rgba(162,255,0,.11),transparent 66%),
    radial-gradient(80% 60% at 50% 100%,rgba(0,214,163,.05),transparent 70%);
}
.intel__inner{position:relative;}
.intel__head{max-width:760px;margin-inline:auto;}
.intel__head .eyebrow{display:block;margin-bottom:var(--space-4);}
.intel__head h2{margin-bottom:var(--space-4);}
.intel__head p{margin-inline:auto;max-width:52ch;}

/* Separador de brilho: uma barra de luz, não uma linha */
.glow-sep{
  position:relative;height:1px;margin:clamp(40px,6vw,72px) auto;
  width:min(760px,100%);
  background:linear-gradient(90deg,transparent,var(--brand-line) 22%,var(--brand) 50%,var(--brand-line) 78%,transparent);
}
.glow-sep::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(420px,70%);height:76px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(162,255,0,.34),rgba(162,255,0,.08) 55%,transparent 78%);
  filter:blur(6px);
}
.glow-sep::after{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);
  width:9px;height:9px;background:var(--brand);box-shadow:var(--glow-brand);
}

/* Trilha do sinal ate a memoria. Seis paradas ligadas por uma linha, com
   tamanho de leitura de verdade: o bloco anterior tinha 48px de tile e 9px de
   rotulo, o que so funcionava como enfeite. */
.flow{
  --tile:clamp(66px,7vw,86px);
  --flow-gap:clamp(12px,1.6vw,24px);
  list-style:none;margin:0 0 clamp(44px,6vw,76px);padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--flow-gap);
}
.flow__step{position:relative;display:grid;justify-items:center;gap:var(--space-3);text-align:center;}

/* Conector ate a proxima parada. Sai da borda do tile e chega na borda do
   proximo: a distancia entre centros de coluna e (largura da coluna + gap). */
.flow__step::after{
  content:'';position:absolute;z-index:0;
  top:calc(var(--tile) / 2);
  left:calc(50% + var(--tile) / 2 + 10px);
  width:calc(100% + var(--flow-gap) - var(--tile) - 20px);
  height:1px;
  background:linear-gradient(90deg,var(--brand-line),rgba(162,255,0,.14));
}
.flow__step:last-child::after{display:none;}

.flow__tile{
  position:relative;z-index:1;
  width:var(--tile);aspect-ratio:1;display:grid;place-items:center;--ch:14px;
  --ch-line:var(--brand-line);
  --ch-bg:var(--surface-inset);
  --ch-fill:linear-gradient(180deg,rgba(162,255,0,.16),rgba(162,255,0,.03));
  color:var(--brand);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  /* So o tile flutua. Animar o step inteiro desalinhava rotulo e conector. */
  animation:floatY 7s var(--ease-in-out) infinite;
  transition:transform var(--duration-base) var(--ease-out);
}
.flow__step:nth-child(2) .flow__tile{animation-delay:-1s}
.flow__step:nth-child(3) .flow__tile{animation-delay:-2s}
.flow__step:nth-child(4) .flow__tile{animation-delay:-3s}
.flow__step:nth-child(5) .flow__tile{animation-delay:-4s}
.flow__step:nth-child(6) .flow__tile{animation-delay:-5s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.flow__tile svg{width:30px;height:30px;}
.flow__step:hover .flow__tile{animation-play-state:paused;transform:translateY(-6px);}

.flow__label{display:grid;gap:5px;position:relative;z-index:1;}
.flow__name{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--text-primary);}
.flow__name b{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--brand);margin-right:6px;letter-spacing:.04em;}
.flow__sub{font-size:12.5px;line-height:1.4;color:var(--text-muted);}

@media (max-width:1000px){
  .flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,36px) 16px;}
  .flow__step::after{display:none;}
}
@media (max-width:520px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Três pilares. A versao anterior tinha kicker, titulo e corpo quase no mesmo
   peso, entao o olho nao sabia onde entrar. Aqui a hierarquia e explicita:
   numero gigante em mono, titulo em display, kicker minusculo e a lista
   tecnica por ultimo. */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);text-align:left;}
@media (max-width:860px){.pillars{grid-template-columns:1fr;}}

.pillar{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--surface-01);border:1px solid var(--border);
  padding:clamp(24px,2.6vw,34px);
  display:grid;gap:var(--space-4);align-content:start;
  transition:transform var(--duration-base) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
}
.pillar:hover{transform:translateY(-4px);border-color:var(--brand-line);}
/* Fio de luz na aresta superior, acendendo no hover */
.pillar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
  opacity:.28;transition:opacity var(--duration-base) var(--ease-out);
}
.pillar:hover::before{opacity:1;}
/* Numero de indice, grande e recuado: marca a ordem sem roubar leitura */
.pillar__i{
  position:absolute;top:14px;right:18px;z-index:-1;
  font-family:var(--font-mono);font-size:clamp(56px,6vw,82px);font-weight:700;
  line-height:1;color:rgba(162,255,0,.07);letter-spacing:-.04em;
  transition:color var(--duration-slow) var(--ease-out);
}
.pillar:hover .pillar__i{color:rgba(162,255,0,.13);}

.pillar__n{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--brand);
  display:flex;align-items:center;gap:var(--space-2);
}
.pillar__n::before{content:'';width:5px;height:5px;background:var(--brand);transform:rotate(45deg);flex:none;}

.pillar h3{
  font-size:clamp(21px,2.1vw,27px);line-height:1.12;font-weight:700;
  letter-spacing:-.03em;color:var(--text-primary);
}
.pillar p{font-size:14.5px;line-height:1.62;color:var(--text-secondary);}

.pillar ul{display:grid;gap:0;margin-top:var(--space-2);}
.pillar li{
  font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
  padding:10px 0;border-top:1px solid var(--border-subtle);
  display:flex;gap:var(--space-3);align-items:baseline;
  transition:color var(--duration-fast) var(--ease-out);
}
.pillar:hover li{color:var(--text-secondary);}
.pillar li::before{content:'';width:4px;height:4px;flex:none;background:var(--brand);transform:rotate(45deg);}

/* ── 19. Fechamento com Beams ──────────────────────────────────────────── */
.closing{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--border-subtle);}
.closing__bg{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity 900ms var(--ease-out);}
.closing__bg.is-ready{opacity:1;}
.closing__bg canvas{width:100%;height:100%;display:block;}
/* Fallback estático quando não há WebGL: fitas em CSS puro. */
.closing::before{
  content:'';position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    repeating-linear-gradient(118deg,transparent 0 46px,rgba(162,255,0,.05) 46px 58px,transparent 58px 104px),
    radial-gradient(70% 60% at 50% 40%,rgba(162,255,0,.07),transparent 72%);
}
.closing__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--background) 0%,rgba(7,8,10,.42) 20%,rgba(7,8,10,.5) 74%,var(--background) 100%),
    /* Chao solido atras do bloco de texto, dissolvendo antes das bordas. */
    radial-gradient(52% 46% at 50% 44%,rgba(7,8,10,.9),rgba(7,8,10,.62) 58%,transparent 84%);
}
.closing__inner{position:relative;text-align:center;max-width:760px;margin-inline:auto;}
.closing h2{margin-block:var(--space-4) var(--space-5);}
.closing p{margin-inline:auto;max-width:50ch;}

/* ── 20. Acentos lime recorrentes ──────────────────────────────────────── */
/* Filete lime no topo do cartão em hover: barato, e faz o verde aparecer
   em toda a página sem virar cor decorativa de fundo. */
.step,.panel,.pillar,.api{
  background-image:linear-gradient(90deg,var(--brand),var(--brand));
  background-repeat:no-repeat;background-position:0 0;background-size:0% 2px;
  transition:background-size var(--duration-base) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
}
.step:hover,.panel:hover,.pillar:hover,.api:hover{background-size:100% 2px;}

/* ── 21. Faixa de termos com progressive blur nas bordas ───────────────── */
/* O blur progressivo segue o mecanismo do <ProgressiveBlur /> do
   motion-primitives: N camadas sobrepostas, cada uma com backdrop-filter
   crescente e mascarada por uma faixa deslizante do mesmo gradiente. O
   empilhamento faz o desfoque CRESCER em direcao a borda, em vez de ligar
   de uma vez como uma mascara unica faria. As camadas sao geradas no build. */
.marquee{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(28px,4vw,52px);
  border-block:1px solid var(--border-subtle);
  background:var(--surface-inset);
}
.marquee::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 50%,rgba(162,255,0,.06),transparent 70%);
}
.marquee__row{display:flex;width:max-content;will-change:transform;}
.marquee__row + .marquee__row{margin-top:clamp(10px,1.4vw,20px);}
.marquee__row--a{animation:marqueeL 46s linear infinite;}
.marquee__row--b{animation:marqueeR 54s linear infinite;}
@keyframes marqueeL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes marqueeR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.marquee:hover .marquee__row{animation-play-state:paused;}

.marquee__seq{display:flex;align-items:center;flex:none;}
.marquee__word{
  font-size:clamp(24px,3.4vw,46px);font-weight:600;letter-spacing:-.028em;
  color:var(--text-secondary);white-space:nowrap;padding-inline:clamp(14px,1.8vw,28px);
  line-height:1.25;
}
.marquee__word--lime{color:var(--brand);}
/* Losango: a primitiva de "no de evento" do design system, no lugar de um ponto */
.marquee__sep{
  width:7px;height:7px;flex:none;transform:rotate(45deg);
  background:var(--brand-line);
}

/* Faixas de desfoque nas duas bordas */
.pblur{position:absolute;top:0;bottom:0;width:clamp(90px,16vw,240px);pointer-events:none;z-index:2;}
.pblur--left{left:0;}
.pblur--right{right:0;}
.pblur i{position:absolute;inset:0;display:block;}
/* Alem do desfoque, um leve fade para o termo nao ser cortado no meio */
.pblur--left::after,.pblur--right::after{
  content:'';position:absolute;inset:0;
}
.pblur--left::after{background:linear-gradient(90deg,var(--surface-inset) 8%,transparent 100%);}
.pblur--right::after{background:linear-gradient(270deg,var(--surface-inset) 8%,transparent 100%);}

@media (prefers-reduced-motion:reduce){
  .marquee__row{animation:none;}
}
@media (max-width:600px){
  .marquee__word{font-size:clamp(19px,6vw,26px);}
}

/* ── 22. Funil de inteligência de mercado ──────────────────────────────── */
/* Cada faixa e um trapezio que fecha exatamente onde o proximo abre: a
   largura do topo de uma faixa e a largura da base da anterior. O texto vive
   FORA do trapezio, senao as ultimas faixas ficam estreitas demais para ler. */
.funnel{display:grid;gap:6px;}
.funnel__stage{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,42%) minmax(0,1fr);
  align-items:center;gap:clamp(12px,2vw,28px);
}
.funnel__label{text-align:right;display:grid;gap:3px;}
.funnel__name{font-size:clamp(16px,1.6vw,19px);font-weight:700;letter-spacing:-.025em;line-height:1.2;}
.funnel__desc{font-size:12.5px;line-height:1.45;color:var(--text-muted);}
.funnel__stage{transition:opacity var(--duration-base) var(--ease-out);}
/* Foco por atenuacao: passar o mouse num degrau apaga levemente os outros */
.funnel:hover .funnel__stage{opacity:.55;}
.funnel:hover .funnel__stage:hover{opacity:1;}

/* Silhueta em curva suave, nao trapezio reto: cada lateral e uma bezier em S
   que sai da largura do topo e chega na largura da base, entao as faixas se
   encaixam num contorno continuo. Os paths sao calculados no build. */
.funnel__band{position:relative;height:clamp(58px,7vw,82px);}
.funnel__band svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.funnel__band path{
  fill:rgba(162,255,0,calc(0.1 + var(--i) * 0.075));
  stroke:rgba(162,255,0,calc(0.3 + var(--i) * 0.12));
  stroke-width:.5;
  vector-effect:non-scaling-stroke;
  transition:fill var(--duration-base) var(--ease-out);
}
.funnel__stage:hover .funnel__band path{fill:rgba(162,255,0,calc(0.2 + var(--i) * 0.09));}
.funnel__stage:last-child .funnel__band path{
  fill:rgba(162,255,0,.42);
  stroke:var(--brand);
}
.funnel__stage:last-child .funnel__band{filter:drop-shadow(0 0 22px rgba(162,255,0,.22));}

.funnel__num{display:grid;gap:3px;}
.funnel__value{
  font-family:var(--font-mono);font-size:clamp(20px,2.4vw,30px);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--text-primary);
  line-height:1;
}
.funnel__stage:last-child .funnel__value{color:var(--brand);text-shadow:0 0 26px rgba(162,255,0,.45);}
.funnel__rate{
  font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
  display:flex;align-items:center;gap:6px;
}
.funnel__rate b{color:var(--text-secondary);font-weight:400;}

.funnel__foot{
  margin-top:var(--space-8);padding-top:var(--space-5);
  border-top:1px solid var(--border-subtle);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);
}
.funnel__foot div{display:grid;gap:6px;}
.funnel__foot dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--brand);}
.funnel__foot dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-secondary);}

@media (max-width:820px){
  .funnel__stage{grid-template-columns:1fr;gap:8px;text-align:left;}
  .funnel__label{text-align:left;}
  /* Empilhado, o trapezio perde a silhueta continua e vira forma solta. Cada
     degrau vira um bloco proprio: numero grande na frente, barra proporcional
     atras, e o ultimo acende. */
  .funnel__stage{
    position:relative;padding:var(--space-4) var(--space-4) var(--space-4) 0;
    border-top:1px solid var(--border-subtle);overflow:hidden;
  }
  .funnel__stage::before{
    content:'';position:absolute;left:0;top:0;bottom:0;z-index:-1;
    width:calc(var(--wbar) * 1%);
    background:linear-gradient(90deg,rgba(162,255,0,calc(0.12 + var(--i) * 0.05)),transparent);
    border-left:2px solid rgba(162,255,0,calc(0.35 + var(--i) * 0.14));
  }
  .funnel__stage:last-child::before{
    background:linear-gradient(90deg,rgba(162,255,0,.3),rgba(162,255,0,.04));
    border-left-color:var(--brand);
  }
  .funnel__band{display:none;}
  .funnel__label{padding-left:var(--space-4);}
  .funnel__num{
    padding-left:var(--space-4);margin-top:var(--space-3);
    grid-auto-flow:column;justify-content:start;gap:var(--space-4);align-items:baseline;
  }
  .funnel__value{font-size:30px;}
  .funnel{gap:0;}
  .funnel__foot{grid-template-columns:1fr;gap:var(--space-5);}
}

/* Caminho de contato do fecho */
.closing__contato{
  margin:clamp(28px,4vw,44px) auto 0;max-width:52ch;
  font-size:14px;line-height:1.65;color:var(--text-muted);
  padding-top:var(--space-5);border-top:1px solid var(--border-subtle);
}
.closing__contato a{
  color:var(--brand);font-family:var(--font-mono);font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brand-line);
}
.closing__contato a:hover{text-decoration-color:var(--brand);}

/* ── 23. Menu staggered (bloco NAV-001) ────────────────────────────────── */
/* Cortina de camadas + painel + itens que EMERGEM de uma mascara. O overflow
   hidden do wrap e o efeito: sem ele o label desliza por cima do layout, que
   e outra coisa e pior. Cores da cortina derivadas da marca, no maximo tres. */
.smenu{position:fixed;inset:0;z-index:400;pointer-events:none;visibility:hidden;}
.smenu.is-open{pointer-events:auto;visibility:visible;}

.smenu__layer{
  position:absolute;inset:0;transform:translateX(100%);will-change:transform;
}
.smenu__layer--1{background:#111a04;}
.smenu__layer--2{background:#0b0d10;}

.smenu__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(460px,100%);transform:translateX(100%);will-change:transform;
  background:var(--surface-inset);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:calc(var(--topbar-h) + 28px) var(--gutter) var(--space-8);
  overflow-y:auto;overscroll-behavior:contain;
}
/* Brilho de marca no topo do painel, contido */
.smenu__panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 40% at 100% 0%,rgba(162,255,0,.1),transparent 62%);
}

.smenu__nav{position:relative;display:grid;gap:2px;}
/* A janela que corta o label. Tirar este overflow mata o efeito. */
.smenu__wrap{overflow:hidden;display:block;}
.smenu__link{
  display:flex;align-items:baseline;gap:var(--space-4);
  padding:10px 0;color:var(--text-primary);
  font-size:clamp(28px,7vw,42px);font-weight:700;letter-spacing:-.035em;line-height:1.12;
  transition:color var(--duration-fast) var(--ease-out);
}
.smenu__link:hover,.smenu__link:focus-visible{color:var(--brand);}
.smenu__link i{
  font-family:var(--font-mono);font-size:11px;font-weight:600;font-style:normal;
  color:var(--brand);letter-spacing:.06em;flex:none;
}

.smenu__foot{
  position:relative;margin-top:auto;padding-top:var(--space-6);
  border-top:1px solid var(--border-subtle);display:grid;gap:var(--space-3);
}
.smenu__foot a{
  font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
  transition:color var(--duration-fast) var(--ease-out);
}
.smenu__foot a:hover{color:var(--brand);}
.smenu__foot b{display:block;font-family:var(--font-sans);font-size:10px;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2);}

/* Toggle: vira X e o rotulo rola numa janelinha */
.nav__toggle{position:relative;display:none;align-items:center;gap:var(--space-2);}
.nav__toggle .bars{display:block;width:20px;height:14px;position:relative;}
.nav__toggle .bars i{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;display:block;
  transition:transform var(--duration-base) var(--ease-out),opacity var(--duration-fast) var(--ease-out);
}
.nav__toggle .bars i:nth-child(1){top:0;}
.nav__toggle .bars i:nth-child(2){top:6.25px;}
.nav__toggle .bars i:nth-child(3){top:12.5px;}
.nav__toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6.25px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6.25px) rotate(-45deg);}
.nav__toggle .lbl{
  /* Largura pela PALAVRA MAIS LONGA das duas: dimensionada por "Menu", o
     rotulo "Fechar" saia cortado dentro da janelinha. */
  overflow:hidden;height:12px;width:46px;display:block;position:relative;text-align:right;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}
.nav__toggle .lbl span{display:block;height:12px;line-height:12px;transition:transform var(--duration-base) var(--ease-out);}
.nav__toggle[aria-expanded="true"] .lbl span{transform:translateY(-12px);}

@media (max-width:900px){
  .nav__toggle{display:flex;}
  /* O menu antigo em lista simples da lugar ao overlay */
  .nav__links{display:none !important;}
}

@media (prefers-reduced-motion:reduce){
  .smenu__layer,.smenu__panel{transition:none !important;}
  .smenu.is-open .smenu__layer,.smenu.is-open .smenu__panel{transform:none;}
}