/* ==========================================================================
   GennomX — Design System v1.0
   Boutique de Inteligência Estratégica
   Theme: Dark Editorial Premium
   ========================================================================== */

/* === 1. Fontes — self-hosted (F-005): compatível com CSP font-src 'self'.
   Arquivos .woff2 em assets/fonts/, gerados a partir do Google Fonts (subset latin). === */
@import url('../fonts/fonts.css');

@layer tokens, base, shell, components, editorial, experiences;

/* Hero "Camara de Evidencia" — custom properties registradas (fora de @layer) */
@property --gx-intro    { syntax: '<number>'; inherits: true;  initial-value: 1; }
@property --gx-exit     { syntax: '<number>'; inherits: true;  initial-value: 0; }
@property --gx-grain    { syntax: '<number>'; inherits: true;  initial-value: 1; }
@property --gx-px       { syntax: '<number>'; inherits: true;  initial-value: 0.62; }
@property --gx-py       { syntax: '<number>'; inherits: true;  initial-value: 0.42; }
@property --gx-magnet-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --gx-magnet-y { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* === 2. CSS Design Tokens — v2 "Sinal" (PLAN-013 / D-022) ===
   Direção: laboratório à noite. Rosa é sinal (só onde há leitura), nunca ambiente.
   Fundo near-black frio; estrutura carregada por neutros + azul-estrutura. */
@layer tokens {
:root {
  /* Brand Rose — o "sinal" (kit FlowTune→GennomX, PLAN-017 / D-027) */
  --rose-900: #5E1533;
  --rose-800: #8A1E4B;
  --rose-700: #B5285F;
  --rose-600: #E52E78;   /* hover */
  --rose-500: #FF4F8F;   /* ação principal / sinal */
  --rose-400: #FF6FA3;
  --rose-300: #FF9CBE;

  /* Slate / estrutura fria */
  --slate-900: #11141D;
  --slate-800: #202430;
  --slate-700: #2F3342;
  --slate-600: #3B4052;
  --slate-500: #464A5F;
  --slate-400: #7C869A;
  --slate-300: #AEB7C7;

  /* Escala neutra v2 — near-black do kit (leve tinte frio) */
  --ink-950: #07080C;  /* fundo near-black (kit #07070A) */
  --ink-900: #101219;  /* surface (kit #12131A) */
  --ink-850: #171A23;  /* elevated (kit #181A23) */
  --ink-800: #1E202A;  /* border-subtle (kit) */
  --ink-700: #272A36;  /* border (kit) */
  --ink-600: #33384A;  /* border-strong / hover de superfície */
  --ink-500: #7A8398;  /* faint (AA em corpo: >5:1 no fundo) */
  --ink-300: #99A2B4;  /* muted (AA em corpo) */
  --ink-200: #C6CDD9;  /* secondary */
  --ink-050: #F5F6FA;  /* primary */

  /* Azul-estrutura: réguas, coordenadas, metadados */
  --struct: #8FB8D8;
  --struct-dim: rgba(143, 184, 216, 0.14);

  /* Camadas cromáticas do kit FlowTune (data-viz, IA, info) — cor só em dado/ação/estado */
  --mauve: #9B7BFF;                       /* camada IA / seleção */
  --mauve-dim: rgba(155, 123, 255, 0.14);
  --info: #4D7CFE;                        /* informação / fonte externa */
  --info-dim: rgba(77, 124, 254, 0.14);
  --data: #37D6E9;                        /* dados / conectividade (cyan) */
  --data-dim: rgba(55, 214, 233, 0.14);

  /* Rampa de gráficos (kit, dark) */
  --chart-1: #FF4F8F; --chart-2: #9B7BFF; --chart-3: #4D7CFE; --chart-4: #37D6E9;
  --chart-5: #42D392; --chart-6: #F5A524; --chart-7: #FF5C7A; --chart-8: #B7C0D8;

  /* Semantic status (separado do sinal) — kit */
  --success: #42D392;
  --warning: #F5A524;
  --danger: #FF5C7A;

  /* Glow — só CTA primário e dado vivo (rose do kit) */
  --glow-default: 0 0 0 1px rgba(255,79,143,0.20), 0 8px 24px rgba(255,79,143,0.14);
  --glow-hover: 0 0 0 1px rgba(255,79,143,0.34), 0 16px 40px rgba(255,79,143,0.22);

  /* Site Semantic Tokens */
  --bg-page: var(--ink-950);
  --bg-surface: var(--ink-900);
  --bg-elevated: var(--ink-850);
  --text-primary: var(--ink-050);
  --text-secondary: var(--ink-200);
  --text-muted: var(--ink-300);
  --text-faint: var(--ink-500);
  --border: var(--ink-700);
  --border-subtle: var(--ink-800);

  /* Sinal (rosa disciplinado) + aliases de compatibilidade */
  --signal: var(--rose-500);
  --signal-dim: rgba(255, 79, 143, 0.12);
  --signal-border: rgba(255, 79, 143, 0.30);
  --accent: var(--signal);
  --accent-dim: var(--signal-dim);
  --accent-border: var(--signal-border);

  /* Typography — v2: Archivo (corpo/UI), STIX Two Text (display editorial),
     DM Sans (wordmark GENNOMX, preservado), DM Mono (dados/coordenadas) */
  --font-display: 'STIX Two Text', Georgia, serif;
  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-wordmark: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala tipográfica FlowTune — degraus semânticos ancorados no uso real. */
  --fs-micro: 0.58rem;
  --fs-caption: 0.72rem;
  --fs-label: 0.8rem;
  --fs-body: 0.82rem;
  --fs-lede: 0.9rem;
  --fs-copy: 0.95rem;
  --fs-h6: 1rem;
  --fs-h4: clamp(1.15rem, 1.6vw, 1.5rem);
  --fs-h3: clamp(1.65rem, 2.6vw, 2.3rem);
  --fs-h2: clamp(2.3rem, 4.6vw, 3.8rem);
  --fs-display: clamp(2.9rem, 6vw, 5rem);
  --fs-hero: clamp(3rem, 1.1rem + 6.6vw, 8.5rem);

  /* Spacing — ritmo variado por arquétipo */
  --section-pad: 96px;
  --section-pad-sm: 56px;
  --section-pad-lg: 132px;
  --content-max: 1360px;
  --content-wide: 1600px;   /* full-bleed dashboards / ≥1536 (Book p65) */
  --editorial-max: 820px;
  --gutter: clamp(20px, 4.4vw, 64px);   /* respiro nas margens (tela cheia) */

  /* Radius — kit (cards ≤16) */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* Z-index semântico */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
  --z-grain: 5;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-kit: cubic-bezier(0.2, 0.8, 0.2, 1);   /* kit FlowTune (Book p66) */
  --dur-fast: 120ms;   /* hover */
  --dur: 220ms;        /* componentes */
  --dur-slow: 400ms;   /* seções / charts */
}

}

@layer experiences {
/* Insights — campo de convergência: matéria distante, estrutura e núcleo. */
#insights.ft-insights {
  isolation: isolate;
  background-color: var(--ft-carbon);
  background-image:
    radial-gradient(76% 42% at 92% 7%, rgba(101, 204, 233, 0.06), transparent 72%),
    radial-gradient(54% 34% at 8% 43%, rgba(155, 123, 255, 0.055), transparent 74%),
    linear-gradient(var(--ft-rake-angle), var(--ft-rake-light) 0%, var(--ft-rake-falloff) 22%, transparent 62%),
    var(--ft-grain-fine),
    var(--ft-grain-coarse);
  background-blend-mode: screen, screen, normal, soft-light, multiply;
}
#insights.ft-insights::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: clamp(270px, 23vw, 430px);
  right: -12vw;
  width: min(54vw, 820px);
  height: min(54vw, 820px);
  pointer-events: none;
  opacity: 0.56;
  background:
    repeating-linear-gradient(90deg, rgba(192, 222, 218, 0.075) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(192, 222, 218, 0.045) 0 1px, transparent 1px 42px),
    radial-gradient(circle at 45% 45%, rgba(101, 204, 233, 0.13), transparent 16%, transparent 48%, rgba(155, 123, 255, 0.06) 100%);
  transform: rotate(-8deg) skewY(4deg);
  mask-image: radial-gradient(circle at 48% 46%, #000 0 38%, transparent 72%);
}
.ft-insights-head > *,
#insights > .ft-flow { position: relative; z-index: 1; }
#insights .ft-signal-label i { background: var(--data); box-shadow: 0 0 12px var(--data-dim); }

#insights .ft-flow { isolation: isolate; }
#insights .ft-insights-field {
  position: absolute;
  z-index: 0;
  top: clamp(-42px, -3vw, -16px);
  right: -4vw;
  left: -4vw;
  height: clamp(610px, 53vw, 880px);
  overflow: hidden;
  pointer-events: none;
}
#insights .ft-insights-field__plane,
#insights .ft-insights-field__rail { position: absolute; display: block; }
#insights .ft-insights-field__plane--far {
  top: 7%;
  left: 4%;
  width: 66%;
  height: 64%;
  border: 1px solid rgba(188, 218, 213, 0.12);
  background:
    repeating-linear-gradient(90deg, rgba(188, 218, 213, 0.045) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(188, 218, 213, 0.035) 0 1px, transparent 1px 52px),
    linear-gradient(128deg, rgba(25, 49, 45, 0.2), rgba(6, 13, 11, 0.02) 68%);
  box-shadow: inset 0 0 100px rgba(5, 14, 12, 0.5);
  transform: perspective(1040px) rotateX(61deg) rotateZ(-8deg);
  transform-origin: 42% 84%;
}
#insights .ft-insights-field__plane--near {
  right: 2%;
  bottom: 4%;
  width: 52%;
  height: 42%;
  border: 1px solid rgba(155, 123, 255, 0.14);
  background: linear-gradient(146deg, rgba(155, 123, 255, 0.09), transparent 56%);
  box-shadow: 0 44px 100px rgba(2, 10, 8, 0.54);
  transform: perspective(900px) rotateX(55deg) rotateZ(7deg);
  transform-origin: 68% 100%;
}
#insights .ft-insights-field__rail--cross {
  top: 46%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(181, 210, 204, 0.22) 22%, rgba(101, 204, 233, 0.34) 51%, rgba(181, 210, 204, 0.16) 77%, transparent 98%);
  transform: rotate(-5deg);
}
#insights .ft-insights-field__rail--spine {
  top: -7%;
  left: 52%;
  width: 1px;
  height: 104%;
  background: linear-gradient(transparent, rgba(181, 210, 204, 0.18) 16%, rgba(101, 204, 233, 0.42) 55%, rgba(181, 210, 204, 0.12) 84%, transparent);
  transform: rotate(11deg);
}
#insights .ft-flow > .ft-insights-field { z-index: 0; }
#insights .ft-flow > .ft-core,
#insights .ft-flow > .ft-zone,
#insights .ft-flow > .ft-insights-final { z-index: 2; }

#insights .ft-core { position: relative; }
/* O titulo (ft-core-brand) fica fora da cena inclinada: acima do canvas ele le como
   titulo, reto; a cena (canvas + rails) carrega o mesmo tratamento sutil de antes. */
#insights .ft-core-scene {
  z-index: 1;
  transform: none;
}
#insights .ft-core-viewport {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #04050b;
  box-shadow: none;
}
#insights .ft-core-viewport::before {
  content: none;
  display: none;
}
#insights .ft-core-vignette {
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 40%, rgba(4,5,11,0.55) 100%);
}
#insights .ft-insights-instrument {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(101, 204, 233, 0.42);
  color: var(--text-secondary);
  background: rgba(5, 16, 13, 0.7);
  box-shadow: 0 0 0 1px rgba(101, 204, 233, 0.05), 0 0 20px rgba(101, 204, 233, 0.08);
  font: 500 var(--fs-micro)/1.2 var(--font-mono);
  letter-spacing: 0.08em;
}
#insights .ft-core-tag { color: var(--text-secondary); }
#insights .ft-core-rail { z-index: 4; }
#insights .ft-core-rail--inputs li:nth-child(2) i { background: var(--mauve); box-shadow: 0 0 9px var(--mauve-dim); }

/* Sem card de fundo nas zonas: o ground continuo do .ft-home corre por tras delas,
   e o parentesco com o nucleo e dito pelas linhas (ft-links), nao por caixas. */
#insights .ft-zone-head { position: relative; z-index: 1; }
#insights .ft-zone-head > h3,
#insights .ft-zone-head > div { grid-column: 1 / -1; width: min(100%, 820px); justify-self: center; }
#insights .ft-zone-head--split > div { width: min(100%, 760px); }
#insights .ft-zone-head > .ft-insights-link { position: absolute; right: 0; bottom: 0; }
#insights .ft-news .ft-zone-head > h3,
#insights .ft-report .ft-zone-head > h3 { width: auto; justify-self: stretch; }
#insights .ft-insights-link span { color: currentColor; }
#insights .ft-insights-link:hover { border-color: var(--data); }
#insights .ft-portfolio-card--a { --wallet: var(--data); }

#insights .ft-insights-final {
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 1080px;
  margin-inline: auto;
  border-color: rgba(188, 218, 213, 0.2);
}
#insights .ft-insights-final > p { font-size: var(--fs-copy); }
#insights .ft-insights-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  color: var(--ft-carbon);
  background: var(--rose-500);
  box-shadow: 0 14px 28px rgba(255, 79, 143, 0.2);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#insights .ft-insights-cta:hover,
#insights .ft-insights-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 19px 34px rgba(255, 79, 143, 0.28); }
#insights .ft-insights-cta:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }

@media (max-width: 1100px) {
  #insights .ft-insights-field { right: -8vw; left: -8vw; height: 630px; }
  #insights .ft-core-scene { transform: none; }
  #insights .ft-zone-head > .ft-insights-link { position: static; margin-top: 0; justify-self: start; }
  #insights .ft-zone-head--split { grid-template-columns: 1fr; }
  #insights .ft-zone-head > h3,
  #insights .ft-zone-head > div,
  #insights .ft-zone-head--split > div { width: 100%; justify-self: stretch; }
}

@media (max-width: 700px) {
  #insights.ft-insights::after { top: 310px; right: -56vw; width: 112vw; height: 112vw; opacity: 0.34; }
  #insights .ft-insights-field { top: -18px; right: -28vw; left: -28vw; height: 480px; }
  #insights .ft-insights-field__plane--far { width: 88%; height: 68%; transform: perspective(760px) rotateX(58deg) rotateZ(-6deg); }
  #insights .ft-insights-field__plane--near { width: 74%; height: 34%; }
  #insights .ft-core-scene { transform: none; }
  #insights .ft-core-viewport { border-radius: 16px; }
  #insights .ft-insights-instrument { max-width: calc(100% - 32px); letter-spacing: 0.055em; }
  #insights .ft-core-brand { gap: 12px; }
  #insights .ft-insights-final { grid-template-columns: 1fr; gap: 22px; }
  #insights .ft-insights-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #insights .ft-core-scene,
  #insights .ft-insights-cta { transition: none; transform: none; }
}

}

/* === 3. Reset & Base === */
@layer base {
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: var(--fs-h6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(:has(#conteudo:target)) { scroll-behavior: smooth; }
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-h6);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: var(--z-grain);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* === 4. Typography === */
.font-display { font-family: var(--font-display); }
.font-sans { font-family: var(--font-sans); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-primary);
}

/* O header e fixed com 79px. Sem scroll-margin, clicar num link da navegacao
   levava a secao ao topo absoluto e escondia os primeiros 79px atras dele.
   Vale para o site inteiro, nao so para a Home. */
:root { --gx-header-h: 79px; }
[id]:not(body):not(html) { scroll-margin-top: calc(var(--gx-header-h) + 16px); }

/* Displays editoriais em STIX Two Text. Peso ≥400 (a face não tem 300);
   tracking levemente negativo para o texto denso; balance nas quebras. */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2.section-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h3.card-title {
  font-family: var(--font-sans);
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.3;
}

/* Overline → gramática de coordenada (mono, azul-estrutura).
   Perde o rosa: "rosa só onde há sinal". Substituído pela régua de seção
   (.section-rule) onde o HTML é migrado; aqui fica a versão base compatível. */
.overline {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--struct);
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: calc(var(--z-header) + 10);
  padding: 0.55rem 0.9rem;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--signal-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus {
  transform: none;
}

#conteudo:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}
}

/* === Régua de seção (componente autoral — substitui o eyebrow universal) ===
   Coordenada em mono + traço; o marcador § é o único ponto de sinal. */
@layer components {
.section-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--struct);
  margin-bottom: 26px;
}

.section-rule::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.section-rule .mark { color: var(--signal); flex: none; }

/* Variante centralizada (blocos de CTA / cabeçalhos centrados) */
.section-rule.is-center { justify-content: center; }
.section-rule.is-center::after { display: none; }

/* === Ficha de sinal (componente autoral — substitui callouts com border-left) ===
   Cabeçalho em mono + fundo elevado; o rosa aparece só no marcador de relevância. */
.signal-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}

.signal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--struct);
  margin-bottom: 12px;
}

.signal-card__flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--signal);
}

.signal-card__flag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(242, 130, 155, 0.6);
}

.signal-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h6);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 10px;
}

.signal-card__body {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* === Linha do arquivo (componente autoral — relatórios / newsletter) ===
   Data em mono + tema + chave; hover desloca a régua. Distinta dos cards do blog. */
.archive-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 6px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--dur-slow) var(--ease), background var(--dur) var(--ease);
}

.archive-row:hover,
.archive-row:focus-visible {
  padding-left: 16px;
}

.archive-row:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.archive-row__date {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  min-width: 118px;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.archive-row__title {
  font-weight: 500;
  font-size: var(--fs-h6);
  color: var(--text-primary);
  transition: color var(--dur) var(--ease);
}

.archive-row:hover .archive-row__title { color: var(--signal); }

.archive-row__key {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--struct);
  margin-left: auto;
  flex: none;
  letter-spacing: 0.02em;
}

.lead {
  font-size: var(--fs-h4);
  line-height: 1.7;
  color: var(--text-secondary);
  font-weight: 300;
}

.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-accent { color: var(--accent); }
a.text-accent {
  color: var(--rose-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.text-accent:hover {
  color: var(--rose-300);
  text-decoration-thickness: 2px;
}
}

/* === 5. Layout === */
@layer shell {
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(28px, 4vw, 56px);
}

.editorial-container {
  max-width: var(--editorial-max);
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: var(--section-pad) 0;
}

.section-sm {
  padding: var(--section-pad-sm) 0;
}

.section-border {
  border-top: 1px solid var(--border);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.4vw, 36px);
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* === 6. Header & Navigation === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: rgba(17, 20, 29, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
  padding: 14px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo: sólido (fim do gradient text banido), na família do wordmark do hero.
   O ponto rosa marca o "X" — sinal discreto, não gradiente ambiental. */
.logo-wordmark {
  font-family: var(--font-wordmark);
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--text-primary);
}

.logo-wordmark::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 0.28em;
  border-radius: 50%;
  background: var(--signal);
  vertical-align: 0.12em;
}

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav-link:hover { color: var(--text-primary); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--text-primary); }
.nav-link.active::after { transform: scaleX(1); }

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--slate-800);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--dur) var(--ease);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-link {
  display: block;
  padding: 8px 12px;
  font-size: var(--fs-label);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--dur), background var(--dur);
}

.dropdown-link:hover {
  color: var(--text-primary);
  background: var(--slate-700);
}

/* Header CTA */
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-secondary);
  transition: all var(--dur) var(--ease);
}

/* === 7. Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.btn:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--accent);
  color: #0a0b0d;
  box-shadow: 0 4px 16px rgba(242, 130, 155, 0.2);
}

.btn-primary:hover {
  background: var(--rose-400);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(242, 130, 155, 0.3);
}

/* CTA principal do header: contraste monocromático sem alterar os demais
   botões primários do site. */
.header-cta .btn-primary {
  background: #050607;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
}

.header-cta .btn-primary:hover,
.header-cta .btn-primary:focus-visible {
  background: #0c0e12;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 9px 26px rgba(0, 0, 0, 0.42);
}

.header-cta .btn-primary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  color: var(--text-primary);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 11px 16px;
}

.btn-ghost:hover { color: var(--text-primary); }

.btn-sm {
  padding: 8px 16px;
  font-size: var(--fs-caption);
}

.btn-lg {
  padding: 14px 28px;
  font-size: var(--fs-body);
}

.btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* === 8. Hero === */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
  background: var(--bg-page);
}

@media (min-width: 1025px) {
  .hero {
    min-height: min(100vh, max(720px, 56.25vw));
  }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 11, 13, 0.9) 0%, rgba(17, 20, 29, 0.72) 45%, rgba(17, 20, 29, 0.45) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, 0.35) 0%, rgba(10, 11, 13, 0.82) 100%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(122, 67, 86, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(47, 51, 66, 0.2) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.72;
  pointer-events: none;
  user-select: none;
}

/* Hero molecule SVG bg */
.hero-bg-art {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: 55%;
  max-width: 700px;
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
}

.hero-overline {
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-overline::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero-title {
  margin-bottom: 28px;
}

.hero-title em {
  font-style: italic;
  color: var(--text-secondary);
}

.hero-subtitle {
  max-width: 560px;
  margin-bottom: 44px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent 60%);
  margin-top: 72px;
  opacity: 0.4;
}

/* Inner hero (non-home pages) */
.hero-inner {
  padding: 140px 0 80px;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.hero-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 80% at 90% 50%, rgba(122, 67, 86, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Inner hero with ambient background video */
.hero-inner--video {
  overflow: hidden;
}

.hero-inner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}

/* Veil to keep copy readable over the video */
.hero-inner--video::before {
  background:
    linear-gradient(90deg, rgba(17, 20, 29, 0.94) 0%, rgba(17, 20, 29, 0.78) 48%, rgba(17, 20, 29, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, 0.25) 0%, rgba(17, 20, 29, 0.92) 100%);
  z-index: 1;
}

.hero-inner--video .container {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hero-inner-video { display: none; }
}

/* === 9. Sections === */
.section-header {
  margin-bottom: 56px;
}

.section-header .overline {
  margin-bottom: 12px;
  display: block;
}

.section-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* Intro block */
.intro-block {
  max-width: 640px;
}

.intro-block p {
  color: var(--text-secondary);
  font-size: var(--fs-h6);
  line-height: 1.75;
}

/* Rule divider */
.rule {
  width: 100%;
  height: 1px;
  background: var(--border);
  border: none;
}

.rule-accent {
  height: 1px;
  width: 48px;
  background: var(--accent);
  border: none;
  margin: 0;
}
}

/* === 10. Cards === */
@layer editorial {

/* Editorial Card (Blog) */
.editorial-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}

.editorial-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-border);
  box-shadow: var(--glow-hover);
}

.card-cover {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.card-cover-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--dur-slow) var(--ease);
}

.editorial-card:hover .card-cover-inner {
  transform: scale(1.03);
}

.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-category {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.card-date {
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.card-title {
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 10px;
  transition: color var(--dur);
}

.editorial-card:hover .card-title { color: var(--accent); }

.card-excerpt {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
}

.card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-read-more {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur), gap var(--dur);
}

.card-read-more:hover,
.editorial-card:hover .card-read-more { color: var(--accent); gap: 10px; }

/* Blog Overlay Card (Home page — vertical image cards) */
.blog-overlay-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease);
}

.blog-overlay-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(242, 130, 155, 0.2);
}

/* Full-bleed cover image */
.blog-overlay-card__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.7s var(--ease);
  will-change: transform;
}

.blog-overlay-card:hover .blog-overlay-card__image {
  transform: scale(1.08);
}

/* Bottom gradient for text legibility */
.blog-overlay-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.55) 30%,
    rgba(0, 0, 0, 0.15) 55%,
    transparent 100%
  );
  z-index: 1;
  transition: background var(--dur-slow) var(--ease);
}

.blog-overlay-card:hover .blog-overlay-card__gradient {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0.2) 60%,
    transparent 100%
  );
}

/* Title content area pinned to bottom */
.blog-overlay-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 24px;
  z-index: 2;
}

.blog-overlay-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  display: inline;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  text-decoration: none;
  padding: 2px 0;
}

.blog-overlay-card:hover .blog-overlay-card__title,
.blog-overlay-card:focus .blog-overlay-card__title,
.blog-overlay-card:focus-visible .blog-overlay-card__title,
.blog-overlay-card:active .blog-overlay-card__title {
  color: var(--slate-300);
  opacity: 0.82;
  background: none;
  text-decoration: none;
}

.blog-overlay-card:focus-visible {
  outline: 1px solid var(--slate-300);
  outline-offset: 4px;
}

/* === Blog editorial grid (listagem tipo capa) === */
/* Wide container: lets the editorial grid use almost the full viewport width,
   keeping only discreet side margins (used by the blog listing section). */
.container-wide {
  max-width: min(100%, 2360px);
  padding-left: clamp(20px, 2.6vw, 48px);
  padding-right: clamp(20px, 2.6vw, 48px);
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 1.4vw, 26px);
}

/* When empty/loading/error states fill the grid, let them span the full width */
.editorial-grid .content-list-state { grid-column: 1 / -1; }

.cover-card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--slate-900);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease);
}

.cover-card:hover,
.cover-card:focus-visible {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(242, 130, 155, 0.25);
}

.cover-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Full-bleed cover (equivalent to object-fit: cover / object-position: center).
   `--cover-pos` lets each article override the focal point (e.g. "center 30%")
   so the main subject stays visible under the vertical crop. */
.cover-card__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--cover-pos, center);
  background-repeat: no-repeat;
  transition:
    transform 0.7s var(--ease),
    filter var(--dur-slow) var(--ease);
  will-change: transform;
}

.cover-card:hover .cover-card__media {
  transform: scale(1.08);
  filter: contrast(1.06) saturate(1.04);
}

/* Smoke filter: darker at the bottom for legibility, light vignette on top for the date */
.cover-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 28%, rgba(0, 0, 0, 0.08) 55%, rgba(0, 0, 0, 0) 100%);
  transition: background var(--dur-slow) var(--ease);
}

.cover-card:hover .cover-card__scrim {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 24%),
    linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.55) 32%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0) 100%);
}

.cover-card__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: clamp(16px, 1.4vw, 22px) clamp(16px, 1.4vw, 24px) 0;
}

.cover-card__date {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.cover-card__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: clamp(18px, 1.6vw, 26px) clamp(16px, 1.4vw, 24px) clamp(20px, 1.6vw, 26px);
}

.cover-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.32;
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  transition: color var(--dur) var(--ease);
}

.cover-card:hover .cover-card__title,
.cover-card:focus-visible .cover-card__title {
  color: var(--slate-300);
}

/* "Ver todos" button */
.blog-seeall {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 56px);
}

.blog-seeall[hidden] { display: none; }

.btn-seeall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: 999px;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}

.btn-seeall:hover,
.btn-seeall:focus-visible {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
  transform: translateY(-2px);
}

.btn-seeall:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-seeall svg { transition: transform var(--dur) var(--ease); }
.btn-seeall:hover svg { transform: translateX(4px); }

/* === Blog — página "Todos os artigos" === */
.article-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.article-list-summary {
  font-size: var(--fs-label);
  color: var(--text-muted);
  margin-bottom: 20px;
}

.article-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 8px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
}

.article-row:hover,
.article-row:focus-visible {
  background: var(--slate-800);
}

.article-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.article-row__thumb {
  width: 140px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--slate-900);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.article-row__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.article-row__category {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.article-row__date {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.article-row__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur) var(--ease);
}

.article-row:hover .article-row__title { color: var(--accent); }

.article-row__excerpt {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-row__arrow {
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.article-row:hover .article-row__arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.pagination:empty { display: none; }

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}

.pagination__btn:hover {
  color: var(--text-primary);
  background: var(--slate-800);
}

.pagination__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pagination__btn.is-active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.pagination__btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pagination__ellipsis {
  min-width: 28px;
  text-align: center;
  color: var(--text-muted);
}

/* ==========================================================================
   Arquivo de analises (blog-todos.html, body.pag-blog-todos)
   A pagina herdava o template generico do PLAN-013: contentor de 1248px uteis,
   miniatura arredondada, categoria em rosa em todas as catorze linhas e titulo
   cortado em duas linhas. Tudo aqui tem escopo na classe da pagina, porque
   .article-row, .pagination e .page-head--index sao estilos compartilhados.
   O formato de lista densa continua: e um arquivo, a sobriedade e a virtude.
   ========================================================================== */

/* Calha de Insights. So o contentor do main: header e rodape tambem usam .container */
body.pag-blog-todos #conteudo .container {
  max-width: none;
  padding-left: clamp(24px, 3.6vw, 72px);
  padding-right: clamp(24px, 3.6vw, 72px);
}

/* Link do sobretitulo: media 30x18. Area de toque de 44px sem mudar o desenho. */
body.pag-blog-todos .page-head__kicker .link-plain {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -13px;
}

body.pag-blog-todos .article-list {
  border-top-color: var(--ink-800);
}

body.pag-blog-todos .article-row {
  grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: clamp(20px, 2.4vw, 36px);
  padding: 22px 8px;
  border-bottom-color: var(--ink-800);
}

body.pag-blog-todos .article-row:hover,
body.pag-blog-todos .article-row:focus-visible {
  background: var(--ink-900);
}

body.pag-blog-todos .article-row__thumb {
  width: 168px;
  border-radius: 0;
  filter: brightness(0.85) contrast(1.05);
}

/* Largura de leitura: o contentor acompanha o hub, mas linhas de texto com
   1.700px se leem mal. Titulo e resumo ficam numa medida de leitura. */
body.pag-blog-todos .article-row__body {
  max-width: 760px;
}

body.pag-blog-todos .article-row__meta {
  gap: 14px;
  margin-bottom: 10px;
}

/* O rosa deixa de ser cor de rotulo: e so sinal, na seta do hover. */
body.pag-blog-todos .article-row__category {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-300);
}

body.pag-blog-todos .article-row__date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* O corte vive no span: o h3 vira item de flex no celular, e item de flex perde
   o -webkit-box. E o mesmo defeito corrigido nas fichas de conteudo.html. */
body.pag-blog-todos .article-row__title {
  display: block;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  overflow: visible;
}

body.pag-blog-todos .article-row__title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.pag-blog-todos .article-row:hover .article-row__title {
  color: var(--ink-050);
}

body.pag-blog-todos .article-row__excerpt {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-300);
}

body.pag-blog-todos .article-row__arrow {
  color: var(--ink-500);
}

body.pag-blog-todos .article-row:hover .article-row__arrow {
  color: var(--signal);
}

/* Paginacao: so aparece acima de 25 artigos. Nasce no vocabulario do site:
   44px, cantos retos, rosa apenas como marca da pagina atual. */
body.pag-blog-todos .pagination__btn {
  min-width: 44px;
  height: 44px;
  border-radius: 0;
  border-color: var(--ink-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.pag-blog-todos .pagination__btn:hover {
  background: var(--ink-900);
  color: var(--ink-050);
}

body.pag-blog-todos .pagination__btn.is-active {
  color: var(--ink-050);
  background: transparent;
  border-color: var(--ink-700);
  box-shadow: inset 0 -2px 0 var(--signal);
}

/* Celular: mesmo padrao de lista aprovado no hub e no Blog. Miniatura a esquerda,
   titulo em ate tres linhas e a data abaixo dele. Categoria e resumo saem: era a
   categoria que quebrava a linha de meta em quatro linhas. */
@media (max-width: 640px) {
  body.pag-blog-todos .article-row {
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    padding: 14px 0;
  }

  body.pag-blog-todos .article-row__thumb {
    width: 104px;
    height: 76px;
    aspect-ratio: auto;
  }

  body.pag-blog-todos .article-row__body {
    display: flex;
    flex-direction: column;
    max-width: none;
  }

  body.pag-blog-todos .article-row__title {
    order: 1;
    font-size: 1rem;
    line-height: 1.28;
    margin-bottom: 0;
  }

  body.pag-blog-todos .article-row__meta {
    order: 2;
    margin: 6px 0 0;
  }

  body.pag-blog-todos .article-row__category {
    display: none;
  }
}

/* Editorial grid + article list responsive behaviour.
   Columns drop early so each card stays large and legible (never a thumbnail). */
@media (max-width: 1500px) {
  .editorial-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .editorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .editorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 640px) {
  .article-row {
    grid-template-columns: 96px 1fr;
    gap: 16px;
    padding: 16px 4px;
  }
  .article-row__thumb { width: 96px; }
  .article-row__arrow { display: none; }
  .article-row__excerpt { display: none; }
}

@media (max-width: 440px) {
  .editorial-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-card,
  .cover-card__media,
  .btn-seeall,
  .article-row__arrow { transition: none; }
  .cover-card:hover,
  .cover-card:focus-visible { transform: none; }
  .cover-card:hover .cover-card__media { transform: none; filter: none; }
  .btn-seeall:hover,
  .btn-seeall:focus-visible { transform: none; }
}
}

/* === GennomX AI page === */
@layer experiences {
.ai-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.ai-system-panel {
  position: relative;
  min-height: 460px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(32, 36, 48, 0.82), rgba(17, 20, 29, 0.96)),
    radial-gradient(circle at 76% 18%, rgba(242, 130, 155, 0.16), transparent 34%);
  overflow: hidden;
}

.ai-system-panel::before {
  content: '';
  position: absolute;
  inset: 32px;
  background-image:
    linear-gradient(rgba(174, 183, 199, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 183, 199, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent);
}

.ai-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--slate-300);
  box-shadow: 0 0 0 8px rgba(174, 183, 199, 0.08);
}

.ai-node:nth-child(1) { left: 18%; top: 26%; }
.ai-node:nth-child(2) { right: 22%; top: 18%; background: var(--accent); }
.ai-node:nth-child(3) { left: 28%; bottom: 24%; }
.ai-node:nth-child(4) { right: 18%; bottom: 30%; }

.ai-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.ai-status-row span {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 7px 10px;
  text-transform: uppercase;
}

.ai-panel-copy {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 36px;
  z-index: 1;
}

.ai-panel-kicker {
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ai-panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-primary);
}

/* AI hero — fluxo do motor analítico */
.ai-flow-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 36px);
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(32, 36, 48, 0.92), rgba(17, 20, 29, 0.98)),
    radial-gradient(circle at 82% 0%, rgba(242, 130, 155, 0.16), transparent 46%);
}

.ai-flow-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(174, 183, 199, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 183, 199, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 75% 8%, black, transparent 78%);
  pointer-events: none;
}

.ai-flow-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

.ai-flow-kicker {
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ai-flow-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-flow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(242, 130, 155, 0.16);
  animation: aiFlowPulse 2.4s ease-in-out infinite;
}

@keyframes aiFlowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.ai-flow-steps {
  position: relative;
}

.ai-flow-steps::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 32px;
  bottom: 32px;
  width: 1px;
  background: linear-gradient(var(--accent-border), var(--border));
}

.ai-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
}

.ai-flow-num {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  color: var(--text-secondary);
  background: var(--slate-800);
  border: 1px solid var(--border);
}

.ai-flow-step:last-child .ai-flow-num {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.ai-flow-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ai-flow-text strong {
  color: var(--text-primary);
  font-size: var(--fs-lede);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ai-flow-text em {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-style: normal;
  letter-spacing: 0.02em;
}

.ai-flow-foot {
  position: relative;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--text-primary);
}

.ai-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.ai-feature {
  padding: 30px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.ai-feature h3,
.ai-timeline-item h3 {
  font-size: var(--fs-copy);
  margin-bottom: 10px;
}

.ai-feature p,
.ai-timeline-item p {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.7;
}

.ai-operating-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(44px, 6vw, 88px);
  align-items: start;
}

.ai-operating-list {
  border-top: 1px solid var(--border);
}

.ai-operating-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}

.ai-operating-item span {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 300;
  line-height: 1;
}

.ai-operating-item h3 {
  color: var(--text-primary);
  font-size: var(--fs-h6);
  margin-bottom: 8px;
}

.ai-operating-item p {
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.ai-method-diagram {
  margin: clamp(40px, 5vw, 72px) 0 0;
}
.ai-method-diagram picture,
.ai-method-diagram img {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
}
.ai-method-diagram figcaption {
  max-width: 68ch;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.55;
}
.ai-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 7px 10px;
  text-transform: uppercase;
}
.ai-online-badge[hidden] {
  display: none;
}
.ai-online-badge__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
}
.ai-online-badge[data-ai-online-state="healthy"] .ai-online-badge__led {
  background: var(--success);
}
.ai-online-badge[data-ai-online-state="degraded"] .ai-online-badge__led {
  background: var(--warning);
}
.ai-online-badge[data-ai-online-state="unhealthy"] .ai-online-badge__led {
  background: var(--signal);
}

.ai-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}

.ai-timeline-item {
  background: var(--bg-page);
  padding: 28px;
}

.content-state,
.content-fallback-card {
  max-width: 860px;
}

.content-state {
  padding: 48px 0;
}

.content-state p {
  color: var(--text-muted);
  margin-top: 14px;
  max-width: 620px;
}

.content-state-error .section-title {
  margin-top: 14px;
}

.content-fallback-card {
  padding: 28px 0 40px;
}

.content-state-note {
  margin-top: 38px;
  padding: 26px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  background: var(--bg-surface);
  border-radius: var(--radius);
}

.content-state-note h2 {
  font-size: var(--fs-h6);
  margin-bottom: 10px;
}

.content-state-note p {
  color: var(--text-muted);
  font-size: var(--fs-lede);
  line-height: 1.7;
}

.content-list-state {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: rgba(32, 36, 48, 0.58);
}

.content-list-state h3 {
  font-size: var(--fs-h6);
  margin-top: 12px;
  margin-bottom: 8px;
}

.content-list-state p {
  max-width: 520px;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.content-list-state-loading {
  position: relative;
  overflow: hidden;
}

.content-list-state-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(174, 183, 199, 0.06), transparent);
  transform: translateX(-100%);
  animation: loadingSweep 1.4s var(--ease) infinite;
}

.content-list-state-error {
  border-left: 3px solid var(--warning);
}

/* Mensagem de filtro sem resultado. Era o content de um ::after nas grades, que
   nao podia ser selecionado e era lido de forma irregular por leitores de tela.
   Agora e um paragrafo real, inserido pelo JS logo apos a grade filtrada. */
.filter-empty {
  margin: 0;
  padding: 28px;
  color: var(--text-muted);
  border: 1px solid var(--ink-800);
  background: var(--bg-surface);
}

@keyframes loadingSweep {
  to { transform: translateX(100%); }
}
}

/* Report Card */
@layer editorial {
.report-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}

.report-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-border);
  box-shadow: var(--glow-hover);
}

.report-cover {
  aspect-ratio: 3/2;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.report-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
}

.report-badge {
  position: relative;
  z-index: 1;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid;
}

.report-badge.free {
  color: var(--success);
  border-color: rgba(46, 158, 111, 0.5);
  background: rgba(46, 158, 111, 0.1);
}

.report-badge.premium {
  color: var(--rose-300);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.report-badge.gated {
  color: var(--slate-300);
  border-color: var(--border);
  background: rgba(47,51,66,0.5);
}

.report-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.report-category {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.report-title {
  font-size: var(--fs-h6);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 10px;
  transition: color var(--dur);
}

.report-card:hover .report-title { color: var(--accent); }

.report-excerpt {
  font-size: var(--fs-label);
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
}

.report-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.report-pages {
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

/* Newsletter List Item */
.nl-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Log semanal (PLAN-013 F2): data em mono tabular, deslocamento de régua no hover.
   Linguagem da "linha do arquivo", distinta dos cards de capa do blog. */
.nl-item {
  padding: 18px 6px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: padding-left var(--dur-slow) var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.nl-item:first-child { border-top: 1px solid var(--border-subtle); }

.nl-item:hover,
.nl-item:focus-visible { padding-left: 18px; }

.nl-item:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.nl-item:hover .nl-title { color: var(--signal); }

.nl-date-col {
  flex-shrink: 0;
  width: 96px;
  padding-top: 3px;
}

.nl-date {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.nl-content { flex: 1; }

.nl-title {
  font-size: var(--fs-h6);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.35;
  transition: color var(--dur);
}

.nl-subtitle {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.55;
}

.nl-arrow {
  flex-shrink: 0;
  color: var(--struct);
  padding-top: 2px;
  opacity: 0.55;
  transition: opacity var(--dur);
}

.nl-item:hover .nl-arrow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nl-item { transition: none; }
  .nl-item:hover, .nl-item:focus-visible { padding-left: 6px; }
}

/* Tags */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.tag {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  background: transparent;
  transition: all var(--dur);
}

.tag:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-dim);
  cursor: pointer;
}
}

/* === 11. Audience Split === */
@layer components {
.audience-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.audience-panel {
  padding: 56px 48px;
  position: relative;
  transition: background var(--dur);
}

.audience-panel:first-child {
  border-right: 1px solid var(--border);
}

.audience-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--dur);
}

.audience-panel:hover::before { opacity: 1; }
.audience-panel:hover { background: rgba(32, 36, 48, 0.5); }

.audience-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: var(--accent);
}

.audience-title {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.2;
}

.audience-desc {
  font-size: var(--fs-lede);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.audience-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

.audience-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

.audience-list-item::before {
  content: '';
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.5' fill='none' stroke='%23F2829B'/%3E%3Cpath d='M6 0v3M6 9v3M0 6h3M9 6h3' stroke='%238FB8D8'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
  margin-top: 4px;
}

/* === 12. Service Blocks === */
.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.service-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur);
}

.service-block:hover {
  border-color: var(--accent-border);
}

.service-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur);
}

.service-block:hover::after { opacity: 1; }

.service-num {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  color: var(--border);
  line-height: 1;
  margin-bottom: 20px;
  display: block;
}

.service-title {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.service-desc {
  font-size: var(--fs-lede);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 28px;
}

.service-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-label);
  color: var(--text-secondary);
}

.service-feature::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.5' fill='none' stroke='%23F2829B'/%3E%3Cpath d='M6 0v3M6 9v3M0 6h3M9 6h3' stroke='%238FB8D8'/%3E%3C/svg%3E") center / contain no-repeat;
  margin-top: 3px;
  flex-shrink: 0;
}

/* === 13. AI Methodology Block === */
.methodology-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.methodology-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.method-step {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.method-step:last-child { border-bottom: none; }

.method-num {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  padding-top: 2px;
}

.method-content h4 {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.method-content p {
  font-size: var(--fs-label);
  color: var(--text-muted);
  line-height: 1.6;
}

/* === 14. CTA Block === */
.cta-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 72px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-block::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  opacity: 0.4;
}

.cta-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.18;
  text-wrap: balance;
}

.cta-desc {
  font-size: var(--fs-h6);
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* === 15. Authority Section === */
.authority-block {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: center;
}

.authority-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.topic-badge {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
}

.founder-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
}

.founder-card-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
  margin-bottom: 22px;
}

.founder-card-bio {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.founder-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--slate-700) 0%, var(--slate-800) 100%);
  border: 2px solid var(--border);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  color: var(--accent);
}

.founder-name {
  font-size: var(--fs-h6);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.founder-role {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: 20px;
}

.founder-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* === Sobre page === */
.about-card {
  padding: 30px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.about-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.about-card-text {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.7;
}

.diff-list {
  display: flex;
  flex-direction: column;
}

.diff-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-lede);
  color: var(--text-muted);
  line-height: 1.7;
}

.diff-list li:first-child { padding-top: 0; }
.diff-list li:last-child { border-bottom: none; }

.diff-list strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-copy);
  font-weight: 600;
  margin-bottom: 6px;
}

.ai-mention {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(32px, 4vw, 48px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.ai-mention-text { max-width: 640px; }

/* Liderança / Fundador */
.founder-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.founder-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: block;
}

.founder-meta-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.1;
}

.founder-meta-role {
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 24px;
}

.founder-bio {
  font-size: var(--fs-copy);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 18px;
}

.founder-credentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
  margin-top: 28px;
  border-top: 1px solid var(--border);
}

.founder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* === 16. Form === */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-consent-label {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-secondary);
  line-height: 1.45;
  cursor: pointer;
}

.form-consent-label input[type="checkbox"] {
  margin-top: 3px;
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.form-consent-label > span { min-width: 0; }

.form-inline-newsletter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  max-width: 420px;
  margin-inline: auto;
}

.form-inline-newsletter .form-control {
  max-width: 280px;
  width: 100%;
}

.form-inline-newsletter .form-consent {
  width: 100%;
  margin-bottom: 0;
  text-align: left;
}

.form-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-hint {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.form-control {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  color: var(--text-primary);
  transition: border-color var(--dur), box-shadow var(--dur);
  outline: none;
  width: 100%;
}

.form-control::placeholder { color: var(--text-faint); }

.form-control:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-control[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(217, 107, 107, 0.12);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

select.form-control {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C869A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Newsletter inline form */
.nl-form {
  display: flex;
  gap: 10px;
  max-width: 440px;
}

.nl-form .form-control {
  flex: 1;
  margin: 0;
}

/* === 17. Footer === */
.site-footer {
  --footer-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' seed='59' stitchTiles='noStitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(198, 215, 210, 0.2);
  padding: clamp(76px, 9vw, 132px) 0 32px;
  background-color: #111211;
  background-image:
    linear-gradient(115deg, rgba(220, 231, 226, 0.075), transparent 31%, rgba(2, 5, 4, 0.38) 74%),
    radial-gradient(54% 42% at 94% 100%, rgba(77, 124, 254, 0.07), transparent 78%),
    var(--footer-grain);
  background-blend-mode: normal, screen, soft-light;
}

.site-footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 215, 210, 0.46) 22%, rgba(143, 184, 216, 0.3) 68%, transparent);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.48fr);
  gap: clamp(56px, 9vw, 150px);
  margin-bottom: 30px;
  padding-bottom: clamp(52px, 6vw, 86px);
  border-bottom: 1px solid rgba(198, 215, 210, 0.16);
}

.footer-brand p {
  max-width: 31ch;
  font-size: var(--fs-copy);
  color: var(--text-muted);
  line-height: 1.68;
  margin-top: 22px;
}

/* Endereço institucional: herda o corpo do descritor da marca; <address> vem
   itálico por padrão do navegador e aqui precisa do mesmo registro do texto. */
.footer-address {
  max-width: 31ch;
  margin-top: 18px;
  font-family: inherit;
  font-style: normal;
  font-size: var(--fs-label, var(--fs-copy));
  line-height: 1.62;
  color: var(--text-faint, var(--text-muted));
}

.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
}

.footer-nav-grid > div {
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(198, 215, 210, 0.16);
}

.footer-nav-title {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-nav-link {
  min-width: 0;
  padding-block: 5px;
  font-size: var(--fs-label);
  color: var(--text-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition: color var(--dur), padding-left var(--dur);
}

.footer-nav-link:hover,
.footer-nav-link:focus-visible { padding-left: 5px; color: var(--text-primary); }
.footer-nav-link:focus-visible,
.footer-legal a:focus-visible { outline: 2px solid var(--struct); outline-offset: 4px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-copy {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.footer-copy--fine {
  font-size: var(--fs-caption);
  opacity: 0.5;
  margin-top: 4px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-legal a {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  transition: color var(--dur);
}

.footer-legal a:hover { color: var(--text-primary); }

/* === 18. Filters === */
.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.filter-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur);
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border);
  background: var(--slate-800);
}

.filter-btn.active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

/* === 19. Solucoes page specific === */
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.case-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
  border-left: 2px solid transparent;
  transition: border-color var(--dur), box-shadow var(--dur);
}

.case-block:hover {
  border-left-color: var(--accent);
  box-shadow: var(--glow-default);
}

.case-scenario {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.case-title {
  font-size: var(--fs-copy);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.35;
}

.case-desc {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.65;
}

/* === 20. Sobre page === */
.bio-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: start;
}

.bio-text h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--text-primary);
  margin-top: 40px;
  margin-bottom: 16px;
}

.bio-text p {
  font-size: var(--fs-copy);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 20px;
}

.credentials-block {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: sticky;
  top: 100px;
}

.credential-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.credential-item:last-child { border-bottom: none; }

.credential-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.credential-value {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* === 21. Contato page === */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.contact-item:first-child { padding-top: 0; }

.contact-item-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.contact-item-value {
  font-size: var(--fs-lede);
  color: var(--text-secondary);
}
}

/* === 21b. Motion layer (motion.js) === */
@layer experiences {

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1100;
  background: linear-gradient(to right, var(--rose-700), var(--rose-400));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}

/* Header auto-hide on scroll down */
.site-header {
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    padding var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.site-header.is-hidden {
  transform: translateY(-100%);
}

/* Hero particle canvas (sits above video/SVG, below the ::before gradient veil) */
.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}

/* data-reveal — richer reveal than legacy .reveal, driven by motion.js */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* data-stagger — children animate in sequence */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-stagger] > *.is-inview {
  opacity: 1;
  transform: none;
}

/* Hero headline line-mask reveal */
.hero-title .line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.hero-title .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
  will-change: transform;
}
.hero-title .line-inner.is-inview {
  transform: translateY(0);
}

/* Magnetic / tilt targets get smooth return */
[data-magnetic], [data-tilt] {
  transition: transform var(--dur-slow) var(--ease);
  will-change: transform;
}
[data-tilt] {
  position: relative;
}
/* Pointer glow follows cursor on tilt cards */
[data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(242, 130, 155, 0.10), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
[data-tilt]:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-particles { display: none; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .hero-title .line-inner { transform: none !important; }
  .site-header.is-hidden { transform: none; }
  .scroll-progress { display: none; }
}

/* === 21c. Carteiras GX — dashboard público (carteiras-dashboard.js) === */
.gx-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.gx-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gx-tab {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  transition: all var(--dur) var(--ease);
}

.gx-tab:hover {
  color: var(--text-primary);
  background: var(--slate-800);
}

.gx-tab.active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

.gx-updated {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gx-updated-label {
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.gx-updated-label strong { color: var(--text-muted); font-weight: 500; }

.gx-badge {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid;
}

.gx-badge-mock {
  color: var(--warning);
  border-color: rgba(217, 164, 65, 0.45);
  background: rgba(217, 164, 65, 0.08);
}

.gx-panel { outline: none; }

.gx-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.gx-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
}

.gx-desc {
  font-size: var(--fs-lede);
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 560px;
  margin-top: 10px;
}

.gx-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--text-faint);
  text-align: right;
}

.gx-meta strong { color: var(--text-secondary); font-weight: 500; }

/* KPI tiles */
.gx-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.gx-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.gx-kpi::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent 70%);
  opacity: 0.35;
}

.gx-kpi-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.gx-kpi-value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.gx-kpi-value.is-pos { color: var(--success); }
.gx-kpi-value.is-neg { color: var(--danger); }

/* Chart */
.gx-chart-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px 22px 12px;
  margin-bottom: 28px;
}

.gx-chart-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.gx-legend {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.gx-legend::before {
  content: '';
  width: 14px;
  height: 2px;
  border-radius: 1px;
  display: inline-block;
}

.gx-legend-port::before { background: var(--accent); }
.gx-legend-bench::before { background: var(--slate-400); }

.gx-legend-hint {
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--text-faint);
}

.gx-chart {
  position: relative;
  width: 100%;
}

.gx-chart svg { width: 100%; height: auto; display: block; }

.gx-gridline { stroke: rgba(47, 51, 66, 0.55); stroke-width: 1; }
.gx-axis-label { fill: var(--slate-400); font-family: var(--font-sans); font-size: var(--fs-caption); }
.gx-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.gx-line-port { stroke: var(--accent); stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(242, 130, 155, 0.35)); }
.gx-line-bench { stroke: var(--slate-400); stroke-width: 1.4; stroke-dasharray: none; opacity: 0.85; }
.gx-crosshair { stroke: rgba(174, 183, 199, 0.35); stroke-width: 1; stroke-dasharray: 3 4; }
.gx-dot { transition: opacity var(--dur); }
.gx-dot-port { fill: var(--accent); }
.gx-dot-bench { fill: var(--slate-400); }

.gx-tooltip {
  position: absolute;
  min-width: 150px;
  background: rgba(17, 20, 29, 0.96);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  pointer-events: none;
  transition: opacity var(--dur);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.gx-tooltip strong { color: var(--text-primary); font-weight: 600; }
.gx-tooltip .tt-port { color: var(--accent); }
.gx-tooltip .tt-bench { color: var(--slate-300); }

/* Allocation + contributors */
.gx-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.gx-block {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.gx-block-title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.gx-alloc-list, .gx-contrib-list, .gx-hold-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gx-alloc-head, .gx-hold-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-label);
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.gx-alloc-head span:last-child,
.gx-hold-head span:last-child { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.gx-alloc-bar, .gx-contrib-bar, .gx-hold-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(47, 51, 66, 0.6);
  overflow: hidden;
}

.gx-alloc-bar > span, .gx-contrib-bar > span, .gx-hold-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(to right, var(--rose-700), var(--rose-400));
  transition: width 0.9s var(--ease);
}

.gx-contrib {
  display: grid;
  grid-template-columns: 64px 1fr 76px;
  align-items: center;
  gap: 12px;
}

.gx-contrib-ticker {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.gx-contrib-value {
  font-size: var(--fs-label);
  color: var(--success);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.gx-contrib.is-neg .gx-contrib-value { color: var(--danger); }
.gx-contrib.is-neg .gx-contrib-bar > span { background: linear-gradient(to right, rgba(217, 107, 107, 0.85), rgba(217, 107, 107, 0.45)); }

.gx-holdings { margin-top: 20px; }

.gx-disclaimer {
  margin-top: 32px;
  font-size: var(--fs-caption);
  color: var(--text-faint);
  line-height: 1.7;
  max-width: 860px;
}

@media (max-width: 1024px) {
  .gx-kpis { grid-template-columns: repeat(2, 1fr); }
  .gx-grid-2 { grid-template-columns: 1fr; }
  .gx-meta { text-align: left; }
}

@media (max-width: 480px) {
  .gx-kpis { grid-template-columns: 1fr; }
  .gx-contrib { grid-template-columns: 52px 1fr 64px; }
}

/* === 22. Scroll Reveal Animations === */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }

/* Page load entry */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-content > * {
  animation: fadeInUp 0.7s var(--ease) both;
}

.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-content > *:nth-child(3) { animation-delay: 0.34s; }
.hero-content > *:nth-child(4) { animation-delay: 0.46s; }
.hero-content > *:nth-child(5) { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}

/* === 23. Responsive === */
@media (max-width: 1280px) {
  .container { padding: 0 24px; }
  .methodology-block { padding: 48px; gap: 48px; }
  .cta-block { padding: 60px 48px; }
  .audience-panel { padding: 44px 36px; }
}

@media (max-width: 1024px) {
  :root {
    --section-pad: 72px;
  }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .authority-block { grid-template-columns: 1fr; gap: 40px; }
  .authority-block .founder-card { max-width: 320px; }
  .methodology-block { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .bio-layout { grid-template-columns: 1fr; }
  .credentials-block { position: static; }
  .founder-feature { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; }
  .ai-mention { grid-template-columns: 1fr; gap: 28px; }
  .contact-layout { grid-template-columns: 1fr; }
  .footer-nav-grid { grid-template-columns: 1fr 1fr; }

  .blog-overlay-card__title { font-size: var(--fs-lede); }
  .ai-hero-grid { grid-template-columns: 1fr; }
  .ai-operating-grid { grid-template-columns: 1fr; }
  .ai-system-panel { min-height: 360px; }
  .ai-feature-grid { grid-template-columns: 1fr 1fr; }
  .ai-timeline { grid-template-columns: 1fr 1fr; }
}

/* Nav colapsa para hambúrguer já no tablet: com 9 links + CTA, o menu
   horizontal transborda/quebra em 2 linhas entre ~769px e ~1100px. */
@media (max-width: 1100px) {
  .site-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; }

  .site-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--slate-900);
    padding: 80px 24px 40px;
    z-index: 999;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .site-nav.open .nav-link {
    font-size: var(--fs-h4);
    padding: 12px 0;
    width: 100%;
    letter-spacing: 0.06em;
  }

  .site-nav.open .header-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 32px;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad: 56px;
    --section-pad-sm: 40px;
  }

  .container, .editorial-container { padding: 0 20px; }

  .hero { min-height: 90vh; }
  .hero-bg-art { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }

  .audience-split { grid-template-columns: 1fr; }
  .audience-panel:first-child { border-right: none; border-bottom: 1px solid var(--border); }

  .service-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .methodology-block { padding: 32px 24px; gap: 36px; }
  .cta-block { padding: 48px 24px; }
  .audience-panel { padding: 36px 24px; }
  .service-block { padding: 32px 28px; }

  .footer-nav-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .nl-form { flex-direction: column; }
  .founder-feature { grid-template-columns: 1fr; gap: 32px; }
  .founder-portrait { max-width: 340px; }
  .founder-credentials { grid-template-columns: 1fr; }
  .ai-feature-grid,
  .ai-timeline { grid-template-columns: 1fr; }
  .ai-system-panel { min-height: 320px; }
  .ai-panel-copy { left: 24px; right: 24px; bottom: 24px; }

  .hero-inner { padding: 120px 0 60px; }

  .blog-overlay-card { aspect-ratio: 9 / 16; }
  .blog-overlay-card__content { padding: 20px 18px; }
  .blog-overlay-card__title { font-size: var(--fs-body); }
}

@media (max-width: 480px) {
  :root { --section-pad: 48px; }
  .btn-lg { padding: 12px 22px; }
  .filter-bar { gap: 6px; }
}

/* === 24. Responsive split layouts (for sections using inline grids) === */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.split-nl {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  align-items: center;
}

@media (max-width: 768px) {
  .split-2 { grid-template-columns: 1fr; gap: 40px; }
  .split-nl { grid-template-columns: 1fr; gap: 40px; }
  .split-nl > :last-child { order: -1; }
}

/* === 25. Utility === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-9 { margin-top: 36px; }
.mt-11 { margin-top: 44px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-7 { margin-bottom: 28px; }
.mb-8 { margin-bottom: 32px; }
.mb-12 { margin-bottom: 48px; }
.mt-18px { margin-top: 18px; }
.mb-14px { margin-bottom: 14px; }
.mb-18px { margin-bottom: 18px; }
.mb-22px { margin-bottom: 22px; }

.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

.text-center { text-align: center; }
.text-right { text-align: right; }

.w-full { width: 100%; }
.justify-center { justify-content: center; }

.d-block { display: block; }

.fs-075 { font-size: var(--fs-caption); }
.fs-095 { font-size: var(--fs-copy); }
.line-loose { line-height: 1.75; }
.link-plain { color: inherit; text-decoration: none; }

.maxw-560 { max-width: 560px; }
.maxw-620 { max-width: 620px; }
.maxw-640 { max-width: 640px; }
.maxw-720 { max-width: 720px; }

.copy-measure { max-width: 65ch; }

.copy-lead {
  color: var(--text-secondary);
  font-size: var(--fs-h6);
  line-height: 1.75;
  text-wrap: pretty;
}

.copy-lg {
  font-size: var(--fs-h6);
  color: var(--text-secondary);
}

/* Contato — lista "para quem é essa conversa" */
.contact-audience__list { display: flex; flex-direction: column; gap: 12px; }
.contact-audience__item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
.contact-audience__mark {
  color: var(--accent);
  font-size: var(--fs-h6);
  flex-shrink: 0;
}
.contact-audience__text {
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

.copy-lead + .copy-muted { margin-top: 18px; }

/* Public form backend states */
.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-status {
  width: 100%;
  min-height: 1.25rem;
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--text-muted);
}

.form-status.is-success { color: var(--success, #7bd88f); }
.form-status.is-error { color: var(--danger, #ff8a8a); }

form[aria-busy="true"] { cursor: wait; }
form[aria-busy="true"] .btn { opacity: 0.68; }

.gx-badge-stale {
  border-color: rgba(255, 184, 107, 0.45);
  color: #ffb86b;
  background: rgba(255, 184, 107, 0.08);
}

/* ==========================================================================
   PLAN-010 — Hero da home: faixa de partículas (ref. video_cortado.mp4)
   + manifesto (Seção 2, PLAN-006)
   ========================================================================== */

/* ---- Galaxy scope: cena fixa (sticky) atrás de hero + manifesto ---- */
.galaxy-scope {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse 90% 70% at 50% 45%, #06070a 0%, #030405 75%);
}

/* Backdrop e WebGL permanecem atrás do DOM. A profundidade vem da geometria e
   do bokeh, sem máscaras ou recortes em torno do wordmark. */
.galaxy-backdrop,
.galaxy-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.galaxy-backdrop { z-index: 0; }
.galaxy-stage { z-index: 0; }

.galaxy-canvas {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  background: transparent;
}

.galaxy-scope.galaxy-active .galaxy-canvas { opacity: 1; }

/* Fallback estático (sem WebGL/JS ou prefers-reduced-motion): campo de
   estrelas em CSS com um núcleo galáctico difuso. */
.galaxy-fallback {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  opacity: 1;
  transition: opacity 700ms var(--ease);
  /* Sugere a faixa elíptica horizontal de partículas da referência:
     elipses largas e baixas no centro, pontos esparsos nas bordas. */
  background:
    radial-gradient(1.5px 1.5px at 18% 42%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 38%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1px 1px at 58% 57%, rgba(174,183,199,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 44%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 82% 52%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1px 1px at 64% 35%, rgba(233,198,207,0.55), transparent 60%),
    radial-gradient(1px 1px at 10% 18%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 36% 84%, rgba(174,183,199,0.45), transparent 60%),
    radial-gradient(ellipse 72% 22% at 50% 44%, rgba(200,206,218,0.10), transparent 70%),
    radial-gradient(ellipse 92% 30% at 50% 45%, rgba(174,183,199,0.07), transparent 72%);
}

.galaxy-scope.galaxy-active .galaxy-fallback { opacity: 0; }

/* ---- Hero (faixa de partículas — ref. AETHRA) ---- */
.hero-nova {
  background: transparent;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: calc(72px + env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hero-nova::before { display: none; }

.hero-nova .container {
  position: relative;
  z-index: 2;
}

.hero-nova-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 0;
}

.hero-cloud-anchor {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

/* Título wordmark: DM Sans (preservado — PLAN-010/012), tracking levemente negativo.
   Fixado em --font-wordmark para não seguir a troca de --font-sans para Archivo. */
.hero-nova-title {
  position: relative;
  font-family: var(--font-wordmark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fafafa;
  margin: 0;
  font-size: var(--fs-display);
  text-shadow: 0 2px 40px rgba(3, 4, 5, 0.6);
}

.wordmark-base {
  display: block;
}

.wordmark-scramble {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.wordmark-scramble-char {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: color 100ms linear;
  will-change: color;
}

.wordmark-scramble-char.is-locked {
  color: #fafafa;
}

.hero-nova-title.is-scrambling .wordmark-base {
  opacity: 0;
}

.hero-nova-title.is-scrambling .wordmark-scramble {
  opacity: 1;
}


/* Subtítulo curto, cinza */
.hero-nova-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: var(--neutral-400);
  max-width: 560px;
  margin: clamp(18px, 2.5vh, 30px) auto 0;
  text-shadow: 0 1px 20px rgba(3, 4, 5, 0.7);
}

/* CTAs em cápsula */
.hero-nova-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: clamp(37px, 5.75vh, 55px) auto 0;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--fs-copy);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 220ms var(--ease), background 220ms var(--ease),
    border-color 220ms var(--ease), box-shadow 220ms var(--ease),
    filter 220ms var(--ease);
  will-change: transform;
}

.btn-pill-arrow {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform 220ms var(--ease);
}

.btn-pill-primary {
  background: #ffffff;
  color: #0a0b0d;
}

.btn-pill-primary:hover,
.btn-pill-primary:focus-visible {
  transform: scale(1.03);
  filter: brightness(1.06);
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.14);
}

.btn-pill-primary:hover .btn-pill-arrow,
.btn-pill-primary:focus-visible .btn-pill-arrow {
  transform: translateX(3px);
}

.btn-pill-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
}

.btn-pill-ghost:hover,
.btn-pill-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Scroll cue */
.hero-scrollcue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(38px, 6.5vh, 82px);
}

.hero-scrollcue-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-scrollcue-caret {
  width: 16px;
  height: 16px;
  border-right: 1px solid var(--text-muted);
  border-bottom: 1px solid var(--text-muted);
  transform: rotate(45deg);
  animation: cueBounce 1.9s var(--ease) infinite;
}

@keyframes cueBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.35; }
  50% { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* ---- Manifesto (Seção 2): revelação palavra a palavra ---- */
.section-manifesto {
  position: relative;
  min-height: 210vh;
  background: transparent;
  z-index: 3;
}

.manifesto-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.manifesto-sticky .container {
  text-align: center;
}

.manifesto-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.34;
  color: var(--text-primary);
  max-width: 980px;
  margin: 0 auto;
}

.manifesto-text .mw {
  display: inline-block;
}

.manifesto-text em,
.manifesto-text .mw-accent {
  font-style: italic;
  color: var(--accent);
}

.manifesto-cta {
  margin-top: clamp(32px, 5vh, 52px);
  display: inline-flex;
}

/* ---- Responsivo ---- */
/* Tablet: margens mais justas, composição central preservada */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-nova-inner { max-width: 640px; }
  .hero-nova-title { font-size: var(--fs-display); }
}

/* Mobile: botões empilhados, título 40–58px, subtítulo 16–18px */
@media (max-width: 767px) {
  .galaxy-scope {
    background-position: 50% 39%;
  }
  .galaxy-fallback {
    background:
      radial-gradient(1.5px 1.5px at 10% 35%, rgba(255,255,255,0.72), transparent 60%),
      radial-gradient(1px 1px at 23% 43%, rgba(174,183,199,0.72), transparent 60%),
      radial-gradient(1.5px 1.5px at 38% 31%, rgba(255,255,255,0.76), transparent 60%),
      radial-gradient(1px 1px at 55% 45%, rgba(233,198,207,0.58), transparent 60%),
      radial-gradient(1.5px 1.5px at 71% 34%, rgba(255,255,255,0.70), transparent 60%),
      radial-gradient(1px 1px at 88% 43%, rgba(174,183,199,0.68), transparent 60%),
      radial-gradient(ellipse 112% 19% at 50% 38%, rgba(200,206,218,0.12), transparent 72%);
  }
  .hero-nova-inner {
    padding: 16px 0;
    transform: translateY(-3vh); /* conteúdo ligeiramente acima do centro */
  }
  .hero-nova-title { font-size: var(--fs-h2); }
  .hero-nova-sub { font-size: var(--fs-h6); }
  .hero-nova-ctas {
    flex-direction: column;
    gap: 12px;
    margin-top: 35px;
  }
  .btn-pill {
    width: 100%;
    max-width: 320px;
  }
  .section-manifesto { min-height: 168vh; }
  .manifesto-text { font-size: var(--fs-h3); }
}

/* ---- Movimento reduzido ---- */
@media (prefers-reduced-motion: reduce) {
  .wordmark-scramble { display: none; }
  .wordmark-base { opacity: 1 !important; }
  .hero-scrollcue-caret { animation: none; }
  .btn-pill,
  .btn-pill-arrow { transition: none; }
  .btn-pill-primary:hover,
  .btn-pill-primary:focus-visible { transform: none; }
  .btn-pill-primary:hover .btn-pill-arrow,
  .btn-pill-primary:focus-visible .btn-pill-arrow { transform: none; }
  .galaxy-canvas { opacity: 0 !important; background: none; }
  .galaxy-fallback { opacity: 1 !important; }
  .manifesto-text .mw { opacity: 1 !important; }
}
}

/* ============================================================
   Assinatura de autoria + crédito de capa (blog, relatório, newsletter)
   Renderizado no cabeçalho do conteúdo (dentro de .article-hero,
   abaixo da .meta-info). Markup gerado por templates/shared.ts.
   ============================================================ */
@layer editorial {
.article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(174, 183, 199, 0.14);
}
.byline-author {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  border-radius: var(--radius);
  transition: opacity 0.25s ease;
}
a.byline-author:hover { opacity: 0.92; }
.byline-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--bg-elevated);
  filter: none;
}
.byline-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.byline-name {
  font-family: var(--font-sans);
  font-size: var(--fs-copy);
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.25s ease;
}
a.byline-author:hover .byline-name {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.byline-role {
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 2px;
}
.byline-credit {
  margin: 0 0 0 auto;
  font-size: var(--fs-caption);
  letter-spacing: 0.3px;
  color: var(--text-muted);
  text-align: right;
}
.byline-credit a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.byline-credit a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
a.byline-author:focus-visible,
.byline-credit a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
@media (max-width: 640px) {
  .byline-credit {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}

/* ============================================================
   Arquétipo de LEITURA — template canônico de artigo (PLAN-013 / D-022)
   Extraído do <style> duplicado dos artigos premium para cá.
   Refinações "Sinal": coluna sobre o fundo da página (fim do ghost-card),
   corpo em STIX Two Text (leitura editorial), lede sem border-left.
   Preserva a estrutura/conteúdo do HTML dos artigos (contrato).
   ============================================================ */
.article-hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: flex-end;
  padding: clamp(128px, 15vh, 168px) clamp(1.25rem, 4vw, 1.5rem) clamp(2.5rem, 5vh, 4rem);
  background-color: var(--bg-page);
  background-size: cover;
  background-position: center;
  contain: layout;
}

.article-hero__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.article-hero--blog,
.article-hero--newsletter {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-850) 100%);
}

.article-hero--report {
  background: linear-gradient(135deg, var(--ink-950) 0%, var(--ink-900) 50%, var(--ink-800) 100%);
}

.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Duas camadas: a faixa do topo garante a navegação legível sobre qualquer capa;
     a de baixo sustenta categoria, título e metadados acima de 4,5:1. */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ink-950) 88%, transparent) 0,
      color-mix(in srgb, var(--ink-950) 60%, transparent) 120px,
      transparent 220px
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-page) 40%, transparent) 0%,
      color-mix(in srgb, var(--bg-page) 62%, transparent) 45%,
      color-mix(in srgb, var(--bg-page) 94%, transparent) 100%
    );
}

.article-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(rgba(198, 205, 217, 0.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 38%, #000 42%, transparent 100%);
          mask-image: radial-gradient(ellipse 82% 72% at 50% 38%, #000 42%, transparent 100%);
}

.article-hero-content {
  position: relative;
  z-index: 2;
  max-width: 750px;
  margin: 0 auto;
  width: 100%;
}

.article-hero__kicker {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  text-shadow: 0 1px 10px rgba(7, 8, 12, 0.75);
  margin-bottom: 0.75rem;
}

/* Link de volta ao índice (topo do artigo/relatório) */
.article-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  margin-bottom: 22px;
  transition: color var(--dur) var(--ease);
}

.article-back::before { content: '←'; }
.article-back:hover { color: #fff; }

/* Categoria: única marca de sinal (rosa) no cabeçalho */
.article-hero .category-tag {
  /* rosa claro e sombra suave: legível acima de 4,5:1 com a capa mais clara */
  color: var(--rose-300);
  text-shadow: 0 1px 10px rgba(7, 8, 12, 0.75);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1.1rem;
  display: inline-block;
}

.article-hero .hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 1.4rem;
}

.article-hero .hero-excerpt {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 620px;
  margin-bottom: 1.5rem;
}

.article-hero .meta-info {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .article-hero .meta-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }

  .article-hero .meta-info > :nth-child(even),
  .article-hero .meta-info > .meta-sep { display: none; }
}

.article-section {
  padding: 3rem 0 6rem;
}

/* Coluna de leitura sobre o fundo da página — sem card, sem sombra (fim do ghost-card) */
.article-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 1.5rem);
  background: transparent;
}

/* Lede editorial: STIX, maior, sem border-left */
.lead-paragraph {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.6;
  letter-spacing: -0.005em;
  margin-bottom: 2.25rem;
  color: var(--text-primary);
  text-wrap: pretty;
}

/* Corpo em STIX Two Text — arquétipo de leitura, capado em ~68ch */
.article-body {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.78;
  color: var(--text-secondary);
  max-width: 68ch;
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 3rem 0 1rem;
  text-wrap: balance;
}

.article-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--text-primary);
  margin: 2.25rem 0 0.75rem;
}

.article-body p { margin-bottom: 1.5rem; text-wrap: pretty; }
.article-body ul {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  color: var(--text-secondary);
}
.article-body li {
  margin-bottom: 0.55rem;
  line-height: 1.6;
}
.article-body a {
  color: var(--signal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--signal-border);
  transition: text-decoration-color var(--dur) var(--ease);
}
.article-body a:hover { text-decoration-color: var(--signal); }
.article-body strong { color: var(--text-primary); font-weight: 600; }
.article-body em { color: var(--text-secondary); }

.report-landing__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
}

.report-landing__chips li {
  margin-bottom: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 4px 10px;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text-secondary);
}

.report-landing__form {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}

.report-landing__form-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
}

.report-landing__form-lead {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.report-landing__alt {
  margin-top: 1rem;
  text-align: center;
  font-size: var(--fs-lede);
}

.report-landing__alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
}

/* Formulário do GX Report no padrão instrumento do Contato: linha inferior, botão escuro com
   filete rosa, consentimento com alvo de 44px. Só CSS: a marcação dos templates não muda. */
.report-landing__form .form-control {
  min-height: 44px;
  padding: 8px 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-500);
  border-radius: 0;
  color: var(--ink-050);
  font-family: var(--font-sans);
  font-size: 17px;
  box-shadow: none;
}

.report-landing__form .form-control::placeholder { color: var(--ink-500); opacity: 1; }

.report-landing__form .form-control:focus {
  outline: none;
  border-bottom-color: var(--ink-050);
  box-shadow: 0 1px 0 var(--signal);
}

.report-landing__form .form-control[aria-invalid="true"],
.report-landing__form .form-control:user-invalid { border-bottom-color: var(--danger); }

.report-landing__form .form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.report-landing__form .form-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-top: 10px;
  cursor: pointer;
}

.report-landing__form .form-consent-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--signal);
}

.report-landing__form .btn-primary {
  background: var(--ink-850);
  border: 1px solid var(--ink-600);
  border-bottom: 2px solid var(--signal);
  border-radius: 0;
  color: var(--ink-050);
  box-shadow: none;
  min-height: 52px;
}

.report-landing__form .btn-primary:hover {
  background: var(--ink-800);
  border-color: var(--ink-300);
  border-bottom-color: var(--signal);
}

.tags-footer {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tag-item {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tag-item:hover {
  border-color: var(--struct);
  color: var(--struct);
}

.article-disclaimer-premium {
  margin-top: 3rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.7;
}

.article-disclaimer-premium strong { color: var(--text-secondary); }

.article-disclaimer-premium a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--signal-border);
  text-underline-offset: 3px;
}

.article-disclaimer-premium a:hover,
.article-disclaimer-premium a:focus-visible { color: var(--signal); text-decoration-color: var(--signal); }

.article-sources { margin-top: 3rem; }

.article-sources h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.article-sources-body {
  font-size: var(--fs-lede);
  color: var(--text-muted);
  line-height: 1.7;
}

.article-sources-body a { color: var(--struct); }

.tags-footer--flush {
  margin-top: 0;
  margin-bottom: 2rem;
  padding-top: 0;
  border-top: none;
}

.article-inline-cta {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  text-align: center;
}

.article-inline-cta__kicker {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.article-inline-cta__copy {
  font-size: var(--fs-copy);
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.article-archive {
  margin-top: 2rem;
  text-align: center;
}

.article-archive-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-body);
  color: var(--text-muted);
  text-decoration: none;
  text-decoration-line: underline;
  text-decoration-color: rgba(124, 134, 154, 0.3);
  text-underline-offset: 4px;
}

@media (max-width: 640px) {
  .article-body { font-size: var(--fs-h4); }
  .lead-paragraph { font-size: var(--fs-h4); }
}

/* ============================================================
   FASE 2 — Arquétipos (PLAN-013 / D-022)
   Aberturas por página, índice-dossiê de relatórios, utilitários
   de saneamento e TOC-régua de leitura.
   ============================================================ */

/* --- Aberturas por arquétipo (substituem o hero-inner único) --- */
.page-head {
  padding: 152px 0 64px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.page-head__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--struct);
  margin-bottom: 22px;
}

.page-head__kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.page-head__kicker .mark { color: var(--signal); }

.page-head__lede {
  font-size: var(--fs-h6);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 58ch;
  margin-top: 20px;
}

/* Índice editorial (blog, relatórios, newsletter): denso, título sans forte,
   linha de meta em mono no rodapé da abertura */
.page-head--index .page-head__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.page-head__meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.page-head__meta .sig { color: var(--signal); }

/* Instituição (sobre, soluções): display STIX amplo, lede serif, mais ar */
.page-head--inst { padding: 168px 0 84px; }

.page-head--inst .page-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
  max-width: 22ch;
}

.page-head--inst .page-head__lede {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.62;
  max-width: 54ch;
}

/* Conversão (contato): coluna estreita, direto ao formulário */
.page-head--convert { padding: 152px 0 48px; border-bottom: none; }

.page-head--convert .page-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Instrumento (GennomX AI, Carteiras): abertura tipográfica + faixa de dados */
.page-head--instrument { padding: 152px 0 72px; }

.page-head--instrument .page-head__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

/* Legal (privacidade, termos): a linha de meta preserva a caixa da versão (vN) e as listas
   ganham marcador discreto, sem mexer nas listas dos artigos do blog */
.pag-legal .page-head__meta { text-transform: none; }
.pag-legal .article-body ul { list-style: none; padding-left: 0; }
.pag-legal .article-body li { position: relative; padding-left: 1.4rem; }
.pag-legal .article-body li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.8em;
  width: 0.5rem;
  height: 1px;
  background: var(--struct);
}
/* Alíneas "a)" do texto jurídico: a letra já está no texto, sem marcador extra */
.pag-legal .article-body ul.legal-alineas li { padding-left: 0; }
.pag-legal .article-body ul.legal-alineas li::before { content: none; }

/* Cláusulas em destaque (CDC art. 54, §4º): caixa alta preservada, com recuo e filete */
.pag-legal .article-body .legal-destaque {
  padding-left: 1rem;
  border-left: 2px solid var(--signal);
  color: var(--text-primary);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

.pag-legal .article-body .legal-contato { line-height: 1.6; }

/* Endereços e identificadores longos do texto jurídico quebram no mobile em vez de transbordar */
.pag-legal .article-body p,
.pag-legal .article-body li { overflow-wrap: break-word; }

.pag-legal .article-body code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-primary);
}

.page-head.fx-dotgrid { overflow: hidden; }

.page-head .fx-kicker { margin-bottom: 22px; }

.page-head--instrument .fx-kicker::before {
  animation: instrument-pulse 2.8s ease-in-out infinite;
}

@keyframes instrument-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--signal-dim); }
  50% { box-shadow: 0 0 0 7px var(--signal-dim); }
}

@media (prefers-reduced-motion: reduce) {
  .page-head--instrument .fx-kicker::before { animation: none; }
}

.instrument-panel {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  padding: clamp(12px, 1.8vw, 24px);
}

.instrument-panel::before,
.instrument-panel::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: var(--struct);
  border-style: solid;
  opacity: 0.5;
  pointer-events: none;
}

.instrument-panel::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.instrument-panel::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }

.data-strip {
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.data-strip__item {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.data-strip__item b {
  display: block;
  font-weight: 400;
  font-size: var(--fs-copy);
  color: var(--struct);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

/* --- Índice-dossiê de relatórios (linha do arquivo, não card de capa) --- */
.report-index {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.report-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 40px);
  align-items: baseline;
  padding: 26px 6px;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--dur-slow) var(--ease);
}

.report-row:hover,
.report-row:focus-visible { padding-left: 20px; }

.report-row:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

.report-row__date {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.report-row__cat {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--struct);
  display: block;
  margin-bottom: 8px;
}

.report-row__main { display: block; min-width: 0; }

.report-row__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 8px;
  transition: color var(--dur);
  text-wrap: balance;
}

.report-row:hover .report-row__title { color: var(--signal); }

.report-row__excerpt {
  display: block;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 68ch;
}

.report-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.report-row__pages {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

@media (max-width: 720px) {
  .report-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 4px;
  }
  .report-row__side {
    flex-direction: row;
    align-items: center;
    order: -1;
    justify-content: space-between;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .report-row, .archive-row { transition: none; }
  .report-row:hover, .report-row:focus-visible,
  .archive-row:hover, .archive-row:focus-visible { padding-left: 6px; }
}

/* Legenda de acesso (relatórios) */
.access-legend {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  flex-wrap: wrap;
}

.access-legend__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.access-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.access-legend__item .report-badge { position: static; z-index: auto; }

.access-legend__desc {
  font-size: var(--fs-label);
  color: var(--text-muted);
}

/* --- Utilitários de saneamento (substituem inline styles recorrentes) --- */
.copy {
  font-size: var(--fs-h6);
  line-height: 1.72;
  color: var(--text-secondary);
  max-width: 62ch;
}

.copy-muted {
  font-size: var(--fs-copy);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}

.copy-note {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-muted);
}

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
}

.panel__title {
  font-size: var(--fs-h6);
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.dash-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-list li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--text-muted);
}

.dash-list li::before {
  content: '';
  width: 12px;
  height: 12px;
  margin-top: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.5' fill='none' stroke='%23F2829B'/%3E%3Cpath d='M6 0v3M6 9v3M0 6h3M9 6h3' stroke='%238FB8D8'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}

.split-2-center {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 900px) {
  .split-2-center { grid-template-columns: 1fr; }
}

/* --- TOC-régua de leitura (artigos/relatórios; ≥1440px) --- */
.reading-track {
  width: 240px;
  z-index: var(--z-sticky);
  display: none;
}

@media (min-width: 1440px) {
  /*
   * O trilho e a coluna de leitura compartilham a mesma linha do grid.
   * Assim, o sticky começa no topo do artigo e termina junto ao fundo dele,
   * sem escapar para o CTA ou para o rodapé.
   */
  .article-section.has-reading-track {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 750px) minmax(240px, 1fr);
    column-gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }

  .article-section.has-reading-track > .article-container {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin-inline: 0;
  }

  .reading-track {
    display: block;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 96px;
    justify-self: end;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
}

.reading-track__label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.reading-track__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.reading-track__list {
  position: relative;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* trilho + progresso */
.reading-track__list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--border);
}

.reading-track__progress {
  position: absolute;
  left: 0;
  top: 2px;
  width: 1px;
  height: calc(100% - 4px);
  background: var(--signal);
  transform-origin: top;
  transform: scaleY(0);
}

.reading-track__link {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
  display: block;
  /* alvo mínimo de 24px (WCAG 2.5.8) sem mudar o ritmo: o gap da lista virou padding */
  padding-block: 4px;
}

.reading-track__link:hover { color: var(--text-primary); }

.reading-track__link--title {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.38;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-wrap: pretty;
}

.reading-track__link.is-active {
  color: var(--signal);
  padding-left: 6px;
}

.reading-track__link:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .reading-track__link { transition: none; }
}
}

/* === GennomX AI: full-screen video hero === */
@layer experiences {
.ai-hero-awwwards {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
  background: var(--bg-page) url('../video/gennomx-ai-neural-poster.jpg') center / cover no-repeat;
}

.ai-hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.96;
  filter: saturate(0.92) contrast(1.04);
  transform: translate3d(var(--ai-video-x, 0), var(--ai-video-y, 0), 0) scale(1.035);
  transition: transform 900ms var(--ease);
  will-change: transform;
  z-index: 0;
}

.ai-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 52%, rgba(10, 12, 16, 0.08) 0%, rgba(10, 12, 16, 0.18) 54%, rgba(10, 12, 16, 0.28) 100%),
    linear-gradient(180deg, rgba(10, 12, 16, 0.18) 0%, transparent 30%, transparent 70%, rgba(10, 12, 16, 0.28) 100%);
  z-index: 1;
  pointer-events: none;
}

.ai-hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 96px 24px 48px;
  width: 100%;
}

.ai-hero-wordmark {
  font-family: var(--font-wordmark);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text-primary);
  text-transform: uppercase;
  text-align: center;
  text-wrap: nowrap;
  margin-top: -6vh;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.72), 0 12px 42px rgba(0, 0, 0, 0.38);
  animation: aiWordmarkIn 1.4s var(--ease) both;
}

.ai-hero-wordmark span {
  color: var(--signal);
}

@keyframes aiWordmarkIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 640px) {
  .ai-hero-video { object-position: 58% center; }
  .ai-hero-container { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-hero-video { display: none; }
  .ai-hero-wordmark { animation: none; }
}

/* ==========================================================================
   26. FlowTune Foundations & Components — "Inteligência conectada"
   PLAN-017 / D-027. Reproduz o sistema visual do FlowTune (grid amplo,
   densidade, cards de baixa profundidade, conectores + nós, dashboards,
   glow localizado) na stack estática. Cor saturada só em ação/estado/dado.
   ========================================================================== */

/* -- Full-bleed shell (tela cheia + respiro nas margens) -- */
.fx-wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--gutter); }
.fx-wrap--pad { padding-block: clamp(64px, 10vw, 120px); }
.fx-wrap--narrow { max-width: 1120px; }
.fx-section { padding-block: clamp(64px, 9vw, 132px); position: relative; }
.fx-section--tight { padding-block: clamp(48px, 6vw, 84px); }
.fx-section + .fx-section { border-top: 1px solid var(--border-subtle); }

/* Textura de campo: ruído orgânico, sem a periodicidade de uma matriz. */
.fx-dotgrid { position: relative; isolation: isolate; }
.fx-dotgrid::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.28;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.34' numOctaves='3' seed='97' stitchTiles='noStitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"),
    linear-gradient(118deg, transparent 8%, rgba(198, 205, 217, 0.18) 47%, transparent 86%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-blend-mode: soft-light, screen;
  -webkit-mask-image: linear-gradient(118deg, transparent, #000 18% 82%, transparent);
          mask-image: linear-gradient(118deg, transparent, #000 18% 82%, transparent);
}
.fx-dotgrid > * { position: relative; z-index: 1; }

/* -- Kicker (dot-marker): sistema de seção do FlowTune (não é eyebrow all-caps) -- */
.fx-kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 18px; }
.fx-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-dim); flex: none; }
.fx-kicker[data-tone="data"]::before { background: var(--data); box-shadow: 0 0 0 4px var(--data-dim); }
.fx-kicker[data-tone="mauve"]::before { background: var(--mauve); box-shadow: 0 0 0 4px var(--mauve-dim); }
.fx-kicker[data-tone="info"]::before { background: var(--info); box-shadow: 0 0 0 4px var(--info-dim); }

/* -- Section heading rhythm -- */
.fx-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.fx-head--center { margin-inline: auto; text-align: center; }
.fx-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.02em; color: var(--text-primary); text-wrap: balance; }
.fx-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--signal); }
.fx-lead { margin-top: 18px; font-size: var(--fs-h6); line-height: 1.7; color: var(--text-muted); max-width: 56ch; }
.fx-head--center .fx-lead { margin-inline: auto; }

/* ==========================================================================
   HERO literal FlowTune — marca radial (monograma GX) + headline + 2 CTAs
   ========================================================================== */
.fx-hero { position: relative; overflow: hidden; min-height: 94vh; min-height: 94svh; display: flex; align-items: center; border-bottom: 1px solid var(--border-subtle); }
.fx-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; width: 100%; }
.fx-hero-copy { max-width: 620px; }
.fx-hero h1 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.028em; color: var(--text-primary); text-wrap: balance; }
.fx-hero h1 .fx-hero-accent { color: var(--signal); }
.fx-hero-sub { margin-top: 22px; font-size: var(--fs-h4); line-height: 1.62; color: var(--text-secondary); max-width: 46ch; }
.fx-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.fx-hero-metrics { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border-subtle); }
.fx-hero-metric { display: flex; flex-direction: column; gap: 3px; }
.fx-hero-metric b { font-family: var(--font-mono); font-size: var(--fs-h4); font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fx-hero-metric span { font-size: var(--fs-label); color: var(--text-faint); letter-spacing: 0.02em; }

/* Radial mark (SVG inline) */
.fx-mark { position: relative; justify-self: center; width: clamp(260px, 34vw, 440px); aspect-ratio: 1; display: grid; place-items: center; }
.fx-mark::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 79, 143, 0.24), rgba(155, 123, 255, 0.10) 42%, transparent 68%); filter: blur(6px); z-index: 0; }
.fx-mark svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.fx-mark .ring { fill: none; stroke: var(--border); stroke-width: 1; }
.fx-mark .ring--live { fill: none; stroke: url(#fxRing); stroke-width: 1.4; stroke-dasharray: 4 10; transform-origin: 50% 50%; animation: fxSpin 46s linear infinite; }
.fx-mark .ring--live2 { fill: none; stroke: rgba(55, 214, 233, 0.34); stroke-width: 1; stroke-dasharray: 2 9; transform-origin: 50% 50%; animation: fxSpin 60s linear infinite reverse; }
.fx-mark .node { fill: var(--signal); }
.fx-mark .node--data { fill: var(--data); }
.fx-mark .node--mauve { fill: var(--mauve); }
.fx-mark .node-pulse { transform-origin: center; transform-box: fill-box; animation: fxPulse 3.4s var(--ease-kit) infinite; }
.fx-mark .spoke { stroke: var(--border); stroke-width: 1; }
.fx-mark .monogram { font-family: var(--font-wordmark); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.03em; fill: var(--text-primary); }
.fx-mark .monogram tspan { fill: var(--signal); }
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxPulse { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.25); } }

.fx-scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--fs-caption); letter-spacing: 0.06em; color: var(--text-faint); }
.fx-scrollcue span:last-child { width: 1px; height: 34px; background: linear-gradient(var(--signal), transparent); animation: fxCue 2s var(--ease-kit) infinite; }
@keyframes fxCue { 0% { opacity: 0; transform: scaleY(0.3); transform-origin: top; } 50% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; } }

/* ==========================================================================
   DASHBOARD demonstrativo (Book p59) — painel do produto em cena
   ========================================================================== */
.fx-dash { position: relative; border: 1px solid var(--border); border-radius: var(--radius-2xl); background: linear-gradient(180deg, var(--bg-surface), var(--bg-page)); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42); overflow: hidden; isolation: isolate; }
.fx-dash::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(155, 123, 255, 0.08), transparent 55%), radial-gradient(90% 70% at 0% 100%, rgba(55, 214, 233, 0.06), transparent 55%); pointer-events: none; z-index: 0; }
.fx-dash > * { position: relative; z-index: 1; }
.fx-dash-bar { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.fx-dash-title { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--text-primary); font-size: var(--fs-h6); margin-right: auto; }
.fx-dash-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-dim); flex: none; }
.fx-illus { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--text-faint); border: 1px dashed var(--border); border-radius: 999px; padding: 3px 10px; }

/* Pill filters + quick search */
.fx-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); color: var(--text-secondary); font-size: var(--fs-label); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-kit), color var(--dur-fast) var(--ease-kit), background var(--dur-fast) var(--ease-kit); }
.fx-pill:hover { border-color: var(--ink-600); color: var(--text-primary); }
.fx-pill.is-active { border-color: var(--signal-border); background: var(--signal-dim); color: var(--text-primary); }
.fx-pill .n { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-faint); }
.fx-search { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-page); color: var(--text-faint); font-size: var(--fs-body); min-width: 190px; }
.fx-search.minw-min { min-width: min(320px, 100%); }
.fx-search svg { width: 15px; height: 15px; flex: none; }
.fx-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text-primary); font: inherit; outline: none; }
.fx-search input::placeholder { color: var(--text-faint); }

/* Dashboard body grid */
.fx-dash-body > .fx-cell { background: var(--bg-page); padding: 20px 22px; }
.fx-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); }
.fx-kpi { background: var(--bg-page); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-height: 118px; }
.fx-kpi__q { font-size: var(--fs-label); color: var(--text-muted); }
.fx-kpi__v { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 500; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.fx-kpi__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.fx-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.fx-delta--up { color: var(--success); }
.fx-delta--down { color: var(--danger); }
.fx-delta--crit { color: var(--warning); }
.fx-kpi__note { font-size: var(--fs-caption); color: var(--text-faint); }
.fx-spark { width: 100%; height: 26px; display: block; }

/* Dashboard middle: evidence map + side column */
.fx-dash-main { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1px; background: var(--border-subtle); }
.fx-map { background: var(--bg-page); padding: 18px 20px; min-height: 300px; }
.fx-map__head, .fx-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fx-panel__title { font-size: var(--fs-body); color: var(--text-secondary); font-weight: 600; }
.fx-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.fx-map .edge { fill: none; stroke: var(--border); stroke-width: 1.2; }
.fx-map .edge--live { fill: none; stroke: var(--data); stroke-width: 1.4; stroke-dasharray: 3 5; animation: fxDash 1.4s linear infinite; }
.fx-map .edge--signal { fill: none; stroke: var(--signal); stroke-width: 1.4; }
@keyframes fxDash { to { stroke-dashoffset: -16; } }
.fx-map .n-chip { fill: var(--bg-elevated); stroke: var(--border); stroke-width: 1; }
.fx-map .n-chip--src { stroke: rgba(77, 124, 254, 0.5); }
.fx-map .n-chip--sig { stroke: var(--signal-border); }
.fx-map .n-dot { fill: var(--data); }
.fx-map .n-label { font-family: var(--font-sans); font-size: var(--fs-caption); fill: var(--text-secondary); }
.fx-map .n-sub { font-family: var(--font-mono); font-size: var(--fs-micro); fill: var(--text-faint); }

.fx-side { background: var(--bg-page); padding: 18px 20px; display: flex; flex-direction: column; gap: 20px; }

/* Gauge */
.fx-gauge { display: flex; align-items: center; gap: 16px; }
.fx-gauge svg { width: 92px; height: 92px; flex: none; }
.fx-gauge .g-track { fill: none; stroke: var(--border); stroke-width: 8; }
.fx-gauge .g-fill { fill: none; stroke: url(#fxGauge); stroke-width: 8; stroke-linecap: round; }
.fx-gauge__meta b { display: block; font-family: var(--font-mono); font-size: var(--fs-h4); color: var(--text-primary); line-height: 1; }
.fx-gauge__meta span { font-size: var(--fs-caption); color: var(--text-muted); }
.fx-gauge__meta small { display: block; margin-top: 4px; font-size: var(--fs-caption); color: var(--text-faint); }

/* Feed */
.fx-feed { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0; }
.fx-feed li { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.fx-feed li:first-child { border-top: 0; }
.fx-feed .f-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; align-self: start; }
.fx-feed .f-dot--reg { background: var(--info); }
.fx-feed .f-dot--sig { background: var(--signal); }
.fx-feed .f-dot--data { background: var(--data); }
.fx-feed .f-src { font-size: var(--fs-body); color: var(--text-secondary); }
.fx-feed .f-kind { display: block; font-size: var(--fs-caption); color: var(--text-faint); }
.fx-feed .f-time { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-faint); white-space: nowrap; }

/* Throughput (bottom band) */
.fx-thru { background: var(--bg-page); padding: 18px 20px; }
.fx-thru-bars { display: flex; align-items: flex-end; gap: clamp(6px, 1.4vw, 14px); height: 96px; margin-top: 12px; }
.fx-thru-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.fx-thru-stack { width: 100%; max-width: 26px; display: flex; flex-direction: column-reverse; gap: 2px; }
.fx-thru-seg { width: 100%; border-radius: 2px; }
.fx-thru-seg--h { background: var(--signal); }
.fx-thru-seg--m { background: var(--mauve); }
.fx-thru-seg--l { background: var(--info); }
.fx-thru-x { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-faint); }
.fx-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.fx-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
.fx-legend i { width: 9px; height: 9px; border-radius: 2px; }

/* ==========================================================================
   FLOW conectado — Fontes -> Estruturação -> Análise -> Conexões -> Decisão
   ========================================================================== */
.fx-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: stretch; }
.fx-flow-step { position: relative; padding: 26px 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--bg-surface); margin-inline: 8px; transition: border-color var(--dur) var(--ease-kit), transform var(--dur) var(--ease-kit); }
.fx-flow-step:hover { border-color: var(--ink-600); transform: translateY(-3px); }
.fx-flow-step::after { content: ''; position: absolute; top: 50%; right: -16px; width: 16px; height: 1px; background: var(--border); z-index: 1; }
.fx-flow-step:last-child::after { display: none; }
.fx-flow-node { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--signal); margin-bottom: 16px; }
.fx-flow-node svg { width: 17px; height: 17px; }
.fx-flow-step h3 { font-size: var(--fs-h6); color: var(--text-primary); margin-bottom: 8px; }
.fx-flow-step p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.6; }
.fx-flow-idx { position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-faint); }

/* ==========================================================================
   VALUE pillars (assimétrico, não é grid de cards idênticos)
   ========================================================================== */
.fx-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.fx-pillar { background: var(--bg-page); padding: 28px 24px; transition: background var(--dur) var(--ease-kit); }
.fx-pillar:hover { background: var(--bg-surface); }
.fx-pillar__i { color: var(--signal); margin-bottom: 16px; display: block; }
.fx-pillar__i svg { width: 22px; height: 22px; }
.fx-pillar h3 { font-size: var(--fs-h6); color: var(--text-primary); margin-bottom: 9px; }
.fx-pillar p { font-size: var(--fs-lede); color: var(--text-muted); line-height: 1.62; }

/* ==========================================================================
   USE CASES + SOURCES (chips de dados, não nuvem de logos)
   ========================================================================== */
.fx-usecases { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fx-usecase { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius); background: var(--bg-surface); font-size: var(--fs-lede); color: var(--text-secondary); transition: border-color var(--dur-fast) var(--ease-kit), color var(--dur-fast) var(--ease-kit); }
.fx-usecase:hover { border-color: var(--ink-600); color: var(--text-primary); }
.fx-usecase .fx-uc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--data); flex: none; }

.fx-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.fx-source { background: var(--bg-page); padding: 20px; }
.fx-source__name { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-body); color: var(--text-secondary); letter-spacing: 0.02em; }
.fx-source__name i { width: 7px; height: 7px; border-radius: 50%; background: var(--info); flex: none; }
.fx-source__v { font-family: var(--font-mono); font-size: var(--fs-h4); color: var(--text-primary); margin-top: 12px; font-variant-numeric: tabular-nums; }
.fx-source__k { font-size: var(--fs-caption); color: var(--text-faint); margin-top: 2px; }

/* ==========================================================================
   INSIGHTS (home feature + hub) — card unificado por tipo
   ========================================================================== */
.fx-insights { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.fx-insight-lead { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; isolation: isolate; text-decoration: none; }
.fx-insight-lead::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 30%, rgba(7, 8, 12, 0.72) 78%, rgba(7, 8, 12, 0.94)), radial-gradient(120% 90% at 80% 0%, rgba(255, 79, 143, 0.16), transparent 55%); }
.fx-insight-lead__media { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease-kit); }
.fx-insight-lead:hover .fx-insight-lead__media { transform: scale(1.04); }
.fx-insight-lead__body { position: relative; z-index: 1; }
.fx-insight-lead h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.15; color: #fff; margin: 12px 0 10px; text-wrap: balance; }
.fx-insight-lead p { font-size: var(--fs-lede); color: rgba(230, 233, 240, 0.82); line-height: 1.6; max-width: 52ch; }

.fx-insight-col { display: flex; flex-direction: column; gap: 12px; }
.fx-insight-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); text-decoration: none; transition: border-color var(--dur) var(--ease-kit), background var(--dur) var(--ease-kit), transform var(--dur) var(--ease-kit); }
.fx-insight-card:hover { border-color: var(--ink-600); background: var(--bg-elevated); transform: translateY(-2px); }
.fx-insight-card__idx { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-faint); }
.fx-insight-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.fx-insight-card h4 { font-size: var(--fs-h6); line-height: 1.32; color: var(--text-primary); }
.fx-insight-card p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.55; margin-top: 6px; }
.fx-insight-card time { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-faint); }

/* Type badge */
.fx-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); }
.fx-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fx-badge--blog { color: var(--signal); border-color: var(--signal-border); }
.fx-badge--report { color: var(--mauve); border-color: rgba(155, 123, 255, 0.4); }
.fx-badge--newsletter { color: var(--data); border-color: rgba(55, 214, 233, 0.4); }

/* ==========================================================================
   INSIGHTS HUB (conteudo.html)
   ========================================================================== */
.fx-hub-head { padding-block: clamp(48px, 8vw, 96px) clamp(28px, 4vw, 44px); }
.fx-hub-tabs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 26px 0; }
.fx-hub-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--border-subtle); }
.fx-hub-count { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-faint); }
.fx-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 28px; }
.fx-hub-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--bg-surface); text-decoration: none; min-height: 210px; transition: border-color var(--dur) var(--ease-kit), transform var(--dur) var(--ease-kit), background var(--dur) var(--ease-kit); }
.fx-hub-card:hover { border-color: var(--ink-600); transform: translateY(-3px); background: var(--bg-elevated); }
.fx-hub-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fx-hub-card h3 { font-size: var(--fs-h4); line-height: 1.28; color: var(--text-primary); margin-bottom: 10px; }
.fx-hub-card p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.6; }
.fx-hub-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; }
.fx-hub-card time { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-faint); }
.fx-hub-card__cat { font-size: var(--fs-caption); color: var(--text-faint); }
.fx-hub-empty { grid-column: 1 / -1; text-align: center; padding: 64px 20px; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-xl); }
.fx-hub-empty h3 { color: var(--text-secondary); margin-bottom: 8px; }
.fx-skel { position: relative; overflow: hidden; background: var(--bg-elevated); border-radius: 6px; }
.fx-skel--210 { min-height: 210px; }
.fx-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent); animation: fxShimmer 1.1s ease-in-out infinite; }
@keyframes fxShimmer { to { transform: translateX(100%); } }

/* ==========================================================================
   Reveal-on-scroll para blocos FlowTune (enhance de default visível)
   ========================================================================== */
.fx-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-kit), transform var(--dur-slow) var(--ease-kit); }
.fx-reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .fx-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .fx-mark { order: -1; width: clamp(220px, 52vw, 320px); }
  .fx-hero { min-height: auto; padding-block: clamp(88px, 16vw, 120px); }
  .fx-dash-main { grid-template-columns: 1fr; }
  .fx-insights { grid-template-columns: 1fr; }
  .fx-flow { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fx-flow-step { margin-inline: 0; }
  .fx-flow-step::after { display: none; }
}
@media (max-width: 760px) {
  .fx-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .fx-flow { grid-template-columns: 1fr; }
  .fx-hero-metrics { gap: 22px; }
  .fx-hub-grid { grid-template-columns: 1fr; }
  .fx-dash-bar { gap: 10px; }
  .fx-search { min-width: 0; flex: 1; }
}
@media (max-width: 480px) {
  .fx-kpi-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-mark .ring--live, .fx-mark .ring--live2, .fx-mark .node-pulse,
  .fx-map .edge--live, .fx-scrollcue span:last-child, .fx-skel::after { animation: none; }
  .fx-reveal { opacity: 1; transform: none; transition: none; }
  .fx-insight-lead__media { transition: none; }
}

/* ==========================================================================
   27. FlowTune — composição literal (PLAN-017 / D-027, revisão)
   Reprodução fiel: hero centrado com marca luminosa, citação bicolor,
   mockup cinematográfico angulado, diagrama de nós conectados, planos e
   wordmark gigante. Cor saturada só em ação/estado/dado.
   ========================================================================== */

/* -- Hero centrado -- */
.fx-hero-c { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-subtle); padding-block: clamp(96px, 15vh, 168px) clamp(40px, 8vh, 96px); text-align: center; }
.fx-hero-c .fx-wrap { display: flex; flex-direction: column; align-items: center; }
.fx-pill-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-surface); font-size: var(--fs-label); letter-spacing: 0.02em; color: var(--text-secondary); }
.fx-pill-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px 1px var(--signal); }
.fx-hero-c h1 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h2); line-height: 1.03; letter-spacing: -0.03em; color: var(--text-primary); text-wrap: balance; margin-top: 26px; max-width: 15ch; }
.fx-hero-c h1 .accent { color: var(--signal); }
.fx-hero-c .fx-hero-sub { margin-top: 22px; font-size: var(--fs-h4); line-height: 1.6; color: var(--text-muted); max-width: 52ch; }
.fx-hero-c .fx-hero-ctas { justify-content: center; margin-top: 32px; }

/* Marca luminosa central (grande) */
.fx-bigmark { position: relative; margin-top: clamp(36px, 7vh, 84px); width: clamp(280px, 44vw, 540px); aspect-ratio: 1; display: grid; place-items: center; }
.fx-bigmark::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle at 50% 46%, rgba(255,79,143,0.30), rgba(155,123,255,0.14) 40%, transparent 66%); filter: blur(10px); z-index: 0; }
.fx-bigmark svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.fx-bigmark .ring { fill: none; stroke: var(--border); stroke-width: 1; }
.fx-bigmark .ring--live { fill: none; stroke: url(#bmRing); stroke-width: 1.6; stroke-dasharray: 5 12; transform-origin: 50% 50%; animation: fxSpin 52s linear infinite; }
.fx-bigmark .ring--live2 { fill: none; stroke: rgba(55,214,233,0.4); stroke-width: 1.1; stroke-dasharray: 2 10; transform-origin: 50% 50%; animation: fxSpin 68s linear infinite reverse; }
.fx-bigmark .spoke { stroke: var(--border); stroke-width: 1; }
.fx-bigmark .node { fill: var(--signal); }
.fx-bigmark .node--data { fill: var(--data); }
.fx-bigmark .node--mauve { fill: var(--mauve); }
.fx-bigmark .node-pulse { transform-origin: center; transform-box: fill-box; animation: fxPulse 3.6s var(--ease-kit) infinite; }
.fx-bigmark .monogram { font-family: var(--font-wordmark); font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.03em; fill: var(--text-primary); }
.fx-bigmark .monogram tspan { fill: var(--signal); }
.fx-bigmark .core { fill: rgba(255,79,143,0.06); stroke: var(--signal-border); stroke-width: 1; }

/* -- Citação bicolor (About / prova) -- */
.fx-quote-sec { padding-block: clamp(72px, 11vw, 150px); }
.fx-quote-person { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.fx-quote-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.fx-quote-person b { display: block; font-weight: 600; color: var(--text-primary); font-size: var(--fs-h6); }
.fx-quote-person span { font-size: var(--fs-body); color: var(--text-muted); }
.fx-quote { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.02em; color: var(--text-primary); max-width: 20ch; text-wrap: balance; }
.fx-quote .dim { color: var(--text-faint); }
.fx-quote em { font-family: var(--font-display); font-style: italic; color: var(--signal); }

/* -- Stage: mockup cinematográfico angulado -- */
.fx-stage-sec { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 110px); }
.fx-stage { position: relative; perspective: 2400px; display: flex; justify-content: center; margin-top: 40px; }
.fx-stage-glow { position: absolute; left: 50%; top: 46%; width: 70%; height: 60%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(255,79,143,0.14), rgba(55,214,233,0.06) 45%, transparent 70%); filter: blur(20px); z-index: 0; pointer-events: none; }
.fx-ghostmark { position: absolute; left: 50%; bottom: -6%; transform: translateX(-50%); font-family: var(--font-wordmark); font-weight: 700; font-size: var(--fs-hero); letter-spacing: -0.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(198,205,217,0.06); z-index: 0; pointer-events: none; white-space: nowrap; }
.fx-device { position: relative; z-index: 2; width: min(1120px, 100%); transform: rotateX(7deg) rotateY(-11deg) rotate(0.4deg); transform-style: preserve-3d; box-shadow: 0 60px 140px rgba(0,0,0,0.6), 0 0 0 1px var(--border); border-radius: var(--radius-2xl); transition: transform var(--dur-slow) var(--ease-kit); }
.fx-stage:hover .fx-device { transform: rotateX(4deg) rotateY(-6deg); }
.fx-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.fx-float small { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-faint); display: block; }
.fx-float b { font-family: var(--font-mono); font-size: var(--fs-h6); color: var(--text-primary); }
.fx-float .dot { width: 9px; height: 9px; border-radius: 50%; }
.fx-float--a { top: -22px; right: 6%; }
.fx-float--b { bottom: 8%; left: -10px; }

/* -- Diagrama de nós conectados (assinatura FlowTune) -- */
.fx-nodes { margin-top: clamp(36px, 5vw, 64px); }
.fx-nodes-svg { width: 100%; height: auto; display: block; overflow: visible; }
.fx-nodes-svg .edge { fill: none; stroke: var(--border); stroke-width: 1.3; }
.fx-nodes-svg .edge--rose { stroke: var(--signal); stroke-opacity: 0.7; }
.fx-nodes-svg .edge--data { stroke: var(--data); stroke-opacity: 0.6; stroke-dasharray: 4 6; animation: fxDash 1.6s linear infinite; }
.fx-nodes-svg .edge-dot { fill: var(--signal); }
.fx-nodes-svg .edge-dot--data { fill: var(--data); }
.fx-nodes-svg .hub { fill: var(--bg-elevated); stroke: var(--signal-border); stroke-width: 1.4; }
.fx-nodes-svg .hub-glyph { fill: var(--signal); }
.fx-nodes-svg .card { fill: var(--bg-surface); stroke: var(--border); stroke-width: 1; }
.fx-nodes-svg .card--rose { stroke: var(--signal-border); }
.fx-nodes-svg .card--mauve { stroke: rgba(155,123,255,0.4); }
.fx-nodes-svg .card--data { stroke: rgba(55,214,233,0.4); }
.fx-nodes-svg .pill { fill: var(--bg-page); stroke: var(--border); stroke-width: 1; }
.fx-nodes-svg .pill-t { font-family: var(--font-mono); font-size: var(--fs-caption); fill: var(--text-muted); }
.fx-nodes-svg .card-t { font-family: var(--font-sans); font-size: var(--fs-h6); font-weight: 600; fill: var(--text-primary); }
.fx-nodes-svg .card-p { font-family: var(--font-sans); font-size: var(--fs-body); fill: var(--text-muted); }
.fx-nodes-svg .g-track { fill: none; stroke: var(--border); stroke-width: 6; }
.fx-nodes-svg .g-rose { fill: none; stroke: var(--signal); stroke-width: 6; stroke-linecap: round; }
.fx-nodes-svg .g-mauve { fill: none; stroke: var(--mauve); stroke-width: 6; stroke-linecap: round; }
.fx-nodes-svg .g-data { fill: none; stroke: var(--data); stroke-width: 6; stroke-linecap: round; }
.fx-nodes-svg .g-val { font-family: var(--font-mono); font-size: var(--fs-h6); fill: var(--text-primary); }

/* Fallback mobile: cards empilhados */
.fx-nodes-stack { display: none; flex-direction: column; gap: 14px; margin-top: 32px; }
.fx-ncard { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 22px; }
.fx-ncard.is-rose { border-color: var(--signal-border); }
.fx-ncard.is-mauve { border-color: rgba(155,123,255,0.4); }
.fx-ncard.is-data { border-color: rgba(55,214,233,0.4); }
.fx-ncard-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 14px; }
.fx-ncard h3 { font-size: var(--fs-h6); color: var(--text-primary); margin-bottom: 8px; }
.fx-ncard p { font-size: var(--fs-lede); color: var(--text-muted); line-height: 1.6; }
.fx-ncard-metric { font-family: var(--font-mono); font-size: var(--fs-h4); color: var(--signal); margin-top: 14px; }

/* -- Planos (modelos de trabalho) -- */
.fx-plans { display: grid; grid-template-columns: 0.85fr 1fr 1fr; gap: 16px; align-items: stretch; }
.fx-plan { display: flex; flex-direction: column; padding: 30px 26px; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: var(--bg-surface); }
.fx-plan--intro { background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface)); justify-content: space-between; }
.fx-plan--intro .fx-plan-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-wordmark); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); font-size: var(--fs-h4); }
.fx-plan--intro h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h4); line-height: 1.15; color: var(--text-primary); margin-top: auto; }
.fx-plan--intro p { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.6; margin-top: 12px; }
.fx-plan-name { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
.fx-plan-lead { font-size: var(--fs-h4); font-weight: 500; color: var(--text-primary); margin: 8px 0 6px; }
.fx-plan-desc { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.55; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border-subtle); }
.fx-plan-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; }
.fx-plan-list li { display: flex; gap: 10px; font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.45; }
.fx-plan-list li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--signal-dim); border: 1px solid var(--signal-border); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4F8F' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; }
.fx-plan .btn { margin-top: auto; }

/* -- Wordmark gigante de fecho -- */
.fx-closer { position: relative; overflow: hidden; padding-top: clamp(56px, 8vw, 96px); }
.fx-wordmark-huge { position: relative; text-align: center; font-family: var(--font-wordmark); font-weight: 700; font-size: var(--fs-hero); letter-spacing: -0.04em; line-height: 0.9; color: var(--text-primary); margin-top: clamp(40px, 7vw, 90px); }
.fx-closer::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 120%; height: 220px; transform: translateX(-50%); background: radial-gradient(ellipse at center bottom, rgba(255,79,143,0.28), rgba(155,123,255,0.10) 40%, transparent 72%); filter: blur(14px); z-index: 0; pointer-events: none; }
.fx-wordmark-huge span { position: relative; z-index: 1; }

/* -- Insights (layout de blog restaurado) — só ajuste de respiro do wrap -- */
.fx-insights-blog .editorial-grid { margin-top: clamp(28px, 4vw, 44px); }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 900px) {
  .fx-nodes-svg { display: none; }
  .fx-nodes-stack { display: flex; }
  .fx-plans { grid-template-columns: 1fr; }
  .fx-device { transform: none; box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--border); }
  .fx-float { display: none; }
  .fx-stage { perspective: none; }
}
@media (max-width: 620px) {
  .fx-quote { font-size: var(--fs-h3); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-bigmark .ring--live, .fx-bigmark .ring--live2, .fx-bigmark .node-pulse,
  .fx-nodes-svg .edge--data { animation: none; }
  .fx-device, .fx-stage:hover .fx-device { transition: none; }
}

/* ==========================================================================
   28. Home F1R — FlowTune em escala ambiental
   Sequência de cenas, produto físico e composição mobile própria (D-028).
   ========================================================================== */
.ft-home {
  --ft-black: #020604;
  --ft-carbon: #0E100F;
  --ft-rake-angle: 112deg;
  --ft-rake-light: rgba(218, 229, 223, 0.075);
  --ft-rake-falloff: rgba(218, 229, 223, 0.018);
  --ft-rake-shadow: rgba(1, 4, 3, 0.42);
  --ft-grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='41' stitchTiles='noStitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  --ft-grain-coarse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.026 .11' numOctaves='2' seed='73' stitchTiles='noStitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  --ft-scene-gap: clamp(150px, 19vh, 260px);
  --ft-scene-gap-major: clamp(220px, 27vh, 380px);
  background-color: var(--ft-carbon);
  background-image: var(--ft-grain-fine), var(--ft-grain-coarse);
  background-repeat: repeat;
  background-blend-mode: soft-light, multiply;
}
.ft-home .reveal { opacity: 1; }
.ft-home .ft-scene + .ft-scene { margin-top: var(--ft-scene-gap); }
.ft-home .ft-scene + .ft-method,
.ft-home .ft-scene + .ft-mobile-product,
.ft-home .ft-scene + .ft-closing { margin-top: var(--ft-scene-gap-major); }
.ft-scene {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ft-black);
}
.ft-signal-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.ft-signal-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 12px rgba(255, 79, 143, 0.7);
}
.ft-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Hero: dashboard como objeto, não como card. */

/* T-285 / D-104: diagrama no lugar do monitor SaaS. */

.ft-monitor-stage {
  position: absolute;
  z-index: 3;
  top: clamp(620px, 70svh, 680px);
  left: -2%;
  width: 106%;
  height: calc(100% - clamp(620px, 70svh, 680px));
  perspective: 1900px;
}
.ft-monitor {
  position: relative;
  width: min(1320px, 91vw);
  margin-inline: auto;
  transform: rotateX(52deg) rotateZ(-4.8deg) rotateY(1.5deg);
  transform-origin: center top;
  transform-style: preserve-3d;
  filter: drop-shadow(0 48px 34px rgba(0, 0, 0, 0.72));
}
.ft-monitor-frame {
  position: relative;
  z-index: 2;
  padding: 11px 11px 15px;
  border-radius: 25px;
  background:
    linear-gradient(120deg, rgba(188, 211, 205, 0.74) 0%, rgba(54, 69, 64, 0.62) 4%, rgba(4, 8, 7, 0.96) 18%, rgba(5, 10, 9, 0.98) 72%, rgba(83, 105, 96, 0.74) 96%, rgba(13, 21, 18, 0.98) 100%);
  box-shadow:
    inset 0 1px rgba(235, 255, 249, 0.34),
    inset 0 -2px 5px rgba(0,0,0,0.92),
    0 -1px 0 rgba(55, 214, 233, 0.18),
    0 2px 0 rgba(255, 79, 143, 0.12),
    0 0 42px rgba(255,79,143,0.13);
}
.ft-monitor-frame::before {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255,255,255,0.14), transparent 8% 66%, rgba(55,214,233,0.08) 82%, rgba(255,255,255,0.15)),
    radial-gradient(70% 16% at 34% 0%, rgba(255,79,143,0.16), transparent 72%),
    radial-gradient(36% 26% at 100% 8%, rgba(77,124,254,0.15), transparent 70%);
  mix-blend-mode: screen;
}
.ft-monitor-frame::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 36px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(160, 182, 174, 0.34);
  box-shadow: 0 1px rgba(255,255,255,0.12);
}
.ft-monitor-screen {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9.25;
  overflow: hidden;
  border-radius: 13px;
  background: rgba(4, 9, 8, 0.88);
  box-shadow:
    inset 0 1px rgba(224, 255, 246, 0.12),
    inset 0 -36px 72px rgba(4, 24, 18, 0.34),
    0 0 0 1px rgba(255,255,255,0.055);
  backdrop-filter: blur(15px) saturate(1.12);
  -webkit-backdrop-filter: blur(15px) saturate(1.12);
}
/* ==========================================================================
   GX OPS — monitor de inteligência do Hero (PLAN-017 F1R / referência do
   fundador): vidro escuro esverdeado, mapa de nós ortogonal, minimap e dock
   analítico (throughput + catalisadores + visão geral de sinais), com dados
   demonstrativos GennomX. Canvas fixo 1280×720 escalado por dataviz.js.
   ========================================================================== */
.gx-ops-viewport { position: absolute; inset: 0; overflow: hidden; }
.gx-ops { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform: translate(-50%, -50%) scale(0.9); transform-origin: center; color: #dfe8e4; font-family: var(--font-sans); }
.gx-ops::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(220, 255, 240, 0.05) 1px, transparent 1.3px); background-size: 26px 26px; }
.gx-ops::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.045), transparent 32%), radial-gradient(120% 90% at 50% -18%, rgba(120, 220, 190, 0.07), transparent 58%); }
.gx-ops-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(46px); pointer-events: none; }
.gx-ops-glow--a { left: -8%; top: -14%; width: 640px; height: 420px; background: rgba(66, 211, 146, 0.09); }
.gx-ops-glow--b { right: -6%; bottom: 4%; width: 720px; height: 380px; background: rgba(55, 214, 233, 0.06); }

/* Barra superior + régua de tempo */
.gx-top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 64px; }
.gx-ruler { position: absolute; top: 0; left: 0; right: 0; height: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.gx-ruler i { position: absolute; top: 7px; width: 1px; height: 7px; background: rgba(255,255,255,0.16); }
.gx-ruler span { position: absolute; top: 4px; margin-left: 4px; font: 400 var(--fs-micro)/1 var(--font-mono); color: rgba(255,255,255,0.34); }
.gx-ruler__dot { position: absolute; top: 7.5px; width: 5px; height: 5px; border-radius: 50%; }
.gx-ruler__dot--a { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.gx-ruler__dot--b { background: var(--info); box-shadow: 0 0 8px var(--info); }
.gx-bar { position: absolute; top: 20px; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 14px; background: rgba(13, 20, 18, 0.55); border-bottom: 1px solid rgba(255,255,255,0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gx-logo { width: 21px; height: 21px; flex: none; color: #f4faf7; filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)); }
.gx-window b { display: block; font-size: var(--fs-caption); font-weight: 600; color: #eef5f1; }
.gx-window i { display: block; margin-top: 1px; font-style: normal; font-size: var(--fs-micro); color: rgba(255,255,255,0.4); }
.gx-date { margin-left: 4px; font: 400 var(--fs-micro)/1 var(--font-mono); color: rgba(255,255,255,0.42); }
.gx-chip { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 10px; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; background: rgba(255,255,255,0.05); font-size: var(--fs-caption); color: #e8f0ec; white-space: nowrap; }
.gx-chip i { font-style: normal; font-size: var(--fs-micro); color: rgba(255,255,255,0.38); }
.gx-chip em { font-style: normal; font-size: var(--fs-micro); color: rgba(255,255,255,0.42); }
.gx-chip--ghost { background: rgba(255,255,255,0.02); }
.gx-iconbtn { display: grid; place-items: center; width: 29px; height: 29px; flex: none; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.55); }
.gx-iconbtn svg { width: 13px; height: 13px; }
.gx-search { display: inline-flex; align-items: center; gap: 8px; height: 31px; width: 200px; margin-left: auto; padding: 0 12px; border: 1px solid rgba(255,255,255,0.06); border-radius: 9px; background: rgba(255,255,255,0.045); font-size: var(--fs-caption); color: rgba(255,255,255,0.34); }
.gx-search svg { width: 13px; height: 13px; flex: none; }

/* Trilha lateral de ícones */
.gx-rail { position: absolute; z-index: 5; left: 12px; top: 118px; display: flex; flex-direction: column; gap: 9px; }
.gx-rail__btn { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; background: rgba(15, 23, 21, 0.5); color: rgba(255,255,255,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gx-rail__btn svg { width: 15px; height: 15px; }
.gx-rail__btn.is-active { color: #4be0a5; background: rgba(66, 211, 146, 0.12); border-color: rgba(66, 211, 146, 0.38); box-shadow: 0 0 14px rgba(66, 211, 146, 0.16); }

/* Arestas do mapa de inteligência */
.gx-edges { position: absolute; inset: 0; z-index: 1; width: 1280px; height: 720px; }
.gx-edge { fill: none; stroke: rgba(214, 235, 226, 0.15); stroke-width: 1.1; }
.gx-edge--faint { stroke: rgba(214, 235, 226, 0.08); }
.gx-edge--live { stroke: rgba(74, 222, 165, 0.5); stroke-width: 1.2; }
.gx-edge--crit { stroke: var(--signal); stroke-width: 1.4; filter: drop-shadow(0 0 5px rgba(255, 79, 143, 0.45)); }
.gx-edge-label { font-family: var(--font-mono); font-size: var(--fs-micro); fill: rgba(224, 240, 232, 0.42); }
.gx-edge-label--crit { fill: rgba(255, 140, 185, 0.85); }
.gx-junction { fill: #3ed598; filter: drop-shadow(0 0 4px rgba(62, 213, 152, 0.8)); }
.gx-junction--crit { fill: var(--signal); filter: drop-shadow(0 0 4px rgba(255, 79, 143, 0.8)); }
.gx-pulse { position: absolute; z-index: 2; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #3ed598; box-shadow: 0 0 8px #3ed598; offset-path: path('M482 227 H545 V285'); animation: gxPulseTravel 4.6s linear infinite; }
.gx-pulse--b { background: var(--signal); box-shadow: 0 0 8px var(--signal); offset-path: path('M703 421 H735 V262 H782'); animation-duration: 5.8s; }
@keyframes gxPulseTravel { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* Nós */
.gx-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gx-node__plus { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 4px; font: 600 var(--fs-caption)/1 var(--font-mono); }
.gx-node__txt b { display: block; font-size: var(--fs-caption); font-weight: 600; color: #eef6f2; white-space: nowrap; }
.gx-node__txt i { display: block; margin-top: 2px; font: 400 var(--fs-micro)/1 var(--font-mono); font-style: normal; white-space: nowrap; }
.gx-node--pipeline { left: 350px; top: 205px; background: rgba(22, 30, 27, 0.72); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.gx-node--pipeline .gx-node__plus { background: rgba(255,255,255,0.1); color: #cfe0d8; }
.gx-node--pipeline i { color: rgba(255,255,255,0.38); }
.gx-node--hot { left: 500px; top: 285px; background: rgba(14, 58, 41, 0.62); border: 1px solid rgba(62, 213, 152, 0.75); box-shadow: 0 0 22px rgba(62, 213, 152, 0.28), inset 0 1px rgba(255,255,255,0.08); }
.gx-node--hot .gx-node__plus { background: #2fbf85; color: #04150d; box-shadow: 0 0 10px rgba(62, 213, 152, 0.6); }
.gx-node--hot i { color: #63e6b1; }
.gx-node--blue { left: 555px; top: 395px; background: rgba(23, 42, 88, 0.55); border: 1px solid rgba(96, 140, 250, 0.65); box-shadow: 0 0 18px rgba(77, 124, 254, 0.22); }
.gx-node--blue .gx-node__plus { background: #3b6fe0; color: #eaf1ff; }
.gx-node--blue i { color: #8fb0ff; }
.gx-node--core { left: 425px; top: 300px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 10px; background: rgba(16, 72, 50, 0.8); border: 1px solid rgba(62, 213, 152, 0.8); box-shadow: 0 0 26px rgba(62, 213, 152, 0.4); color: #eafff5; }
.gx-node--core svg { width: 19px; height: 19px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }

/* Grupos (clusters temáticos) */
.gx-group { position: absolute; z-index: 2; padding: 12px; border-radius: 14px; border: 1px solid rgba(96, 140, 250, 0.5); background: rgba(20, 34, 72, 0.34); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 30px rgba(59, 110, 224, 0.14), inset 0 1px rgba(255,255,255,0.06); }
.gx-group--gene { left: 760px; top: 180px; width: 235px; }
.gx-group--rna { left: 1035px; top: 105px; width: 225px; }
.gx-group__head { display: flex; align-items: center; gap: 9px; padding: 2px 4px 8px; }
.gx-group__sq { width: 14px; height: 14px; flex: none; border-radius: 4px; background: #3b6fe0; box-shadow: 0 0 10px rgba(77, 124, 254, 0.55); }
.gx-group__t b { display: block; font-size: var(--fs-caption); font-weight: 600; color: #e6eeff; white-space: nowrap; }
.gx-group__t i { font: 400 var(--fs-micro)/1 var(--font-mono); font-style: normal; color: rgba(160, 190, 255, 0.6); }
.gx-sub { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 10px 11px; border: 1px solid rgba(96, 140, 250, 0.4); border-radius: 9px; background: rgba(13, 24, 56, 0.6); }
.gx-sub__plus { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 4px; background: #3b6fe0; color: #eaf1ff; font: 600 var(--fs-caption)/1 var(--font-mono); }
.gx-sub__txt b { display: block; font-size: var(--fs-caption); font-weight: 600; color: #dce7ff; white-space: nowrap; }
.gx-sub__txt i { display: block; margin-top: 2px; font: 400 var(--fs-micro)/1 var(--font-mono); font-style: normal; color: #8fb0ff; white-space: nowrap; }

/* Minimap */
.gx-minimap { position: absolute; z-index: 3; left: 96px; top: 362px; width: 190px; padding: 8px 8px 7px; border: 1px solid rgba(96, 140, 250, 0.45); border-radius: 12px; background: rgba(13, 24, 46, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(0,0,0,0.4); }
.gx-minimap svg { display: block; width: 100%; height: auto; }
.gx-minimap svg path { fill: none; stroke: rgba(140, 170, 255, 0.5); stroke-width: 1; }
.gx-minimap svg rect { fill: rgba(96, 140, 250, 0.22); stroke: rgba(140, 170, 255, 0.55); }
.gx-minimap svg .mm-dot { fill: #3ed598; stroke: none; }
.gx-minimap svg .mm-view { fill: rgba(77, 124, 254, 0.08); stroke: #7ea4ff; stroke-dasharray: 3 3; }
.gx-minimap__ctrl { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 400 var(--fs-micro)/1 var(--font-mono); color: rgba(255,255,255,0.5); }
.gx-minimap__ctrl i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; background: rgba(255,255,255,0.05); font-style: normal; color: #cfe0d8; }
.gx-minimap__ctrl b { font-weight: 500; color: rgba(255,255,255,0.65); }

/* Controles de zoom */
.gx-zoom { position: absolute; z-index: 3; right: 16px; top: 330px; display: flex; flex-direction: column; gap: 8px; }
.gx-zoom span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.09); border-radius: 9px; background: rgba(15, 23, 21, 0.55); color: rgba(255,255,255,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gx-zoom svg { width: 14px; height: 14px; }

/* Dock analítico */
.gx-dock { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; gap: 14px; height: 195px; padding: 14px 16px; }
.gx-panel { position: relative; padding: 13px 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(13, 20, 18, 0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 14px 34px rgba(0,0,0,0.42), inset 0 1px rgba(255,255,255,0.05); }
.gx-panel--thru { width: 430px; flex: none; }
.gx-panel--table { flex: 1; min-width: 0; }
.gx-panel header { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.gx-panel header > b { font-size: var(--fs-caption); font-weight: 600; color: #e8f2ec; }
.gx-panel__ic { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: rgba(66, 211, 146, 0.16); color: #4be0a5; }
.gx-panel__ic svg { width: 12px; height: 12px; }

/* Throughput (fluxo de evidências) */
.gx-thru-legend { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--fs-micro); color: rgba(255,255,255,0.45); white-space: nowrap; }
.gx-thru-legend i { width: 7px; height: 7px; border-radius: 2px; }
.gx-thru-legend i.r { background: var(--signal); }
.gx-thru-legend i.a { background: var(--warning); }
.gx-thru-legend i.c { background: var(--data); }
.gx-thru-legend b { margin: 0 7px 0 1px; font: 500 var(--fs-micro)/1 var(--font-mono); color: #e8f2ec; }
.gx-thru { position: relative; height: 118px; }
.gx-thru__y { position: absolute; left: 0; font: 400 var(--fs-micro)/1 var(--font-mono); color: rgba(255,255,255,0.28); }
.gx-thru__plot { position: absolute; left: 28px; right: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.07); }
.gx-bars-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.gx-bars-stack { display: flex; flex-direction: column-reverse; gap: 3px; width: 15px; }
.gx-bars-stack span { display: block; width: 100%; border-radius: 3px; }
.gx-bars-stack .s-h { background: var(--signal); box-shadow: 0 0 8px rgba(255, 79, 143, 0.35); }
.gx-bars-stack .s-m { background: var(--warning); }
.gx-bars-stack .s-l { background: var(--data); }
.gx-bars-col > i { font: 400 var(--fs-micro)/1 var(--font-mono); font-style: normal; color: rgba(255,255,255,0.3); }

/* Visão geral de sinais (tabela) */
.gx-sort { margin-left: auto; font: 400 var(--fs-micro)/1 var(--font-mono); color: rgba(255,255,255,0.4); }
.gx-table { display: flex; flex-direction: column; }
.gx-tr { display: grid; grid-template-columns: 18px minmax(0, 1.4fr) minmax(0, 0.95fr) minmax(0, 0.9fr) auto 40px; align-items: center; gap: 8px; padding: 4.5px 2px; border-top: 1px solid rgba(255,255,255,0.045); font-size: var(--fs-caption); color: #dfe9e3; }
.gx-tr--head { padding-bottom: 6px; border-top: 0; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.35); }
.gx-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-tr__dot { position: relative; width: 11px; height: 11px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; }
.gx-tr__dot::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: currentColor; }
.gx-tr__dot--ring::after { display: none; }
.gx-tr__dot.d-b { color: #6ea8ff; }
.gx-tr__dot.d-g { color: #3ed598; }
.gx-tr__dot.d-r { color: var(--signal); }
.gx-tr__dot.d-a { color: var(--warning); }
.gx-tr__dot.d-c { color: var(--data); }
.gx-status { display: inline-flex; align-items: center; height: 19px; padding: 0 8px; border-radius: 6px; font-size: var(--fs-micro); font-weight: 600; white-space: nowrap; }
.gx-status--crit { color: #ff9cc0; background: rgba(255, 79, 143, 0.16); border: 1px solid rgba(255, 79, 143, 0.35); }
.gx-status--warn { color: #ffd28a; background: rgba(245, 165, 36, 0.13); border: 1px solid rgba(245, 165, 36, 0.3); }
.gx-status--ok { color: #6ff0b6; background: rgba(66, 211, 146, 0.12); border: 1px solid rgba(66, 211, 146, 0.3); }
.gx-tr__n { font: 400 var(--fs-micro)/1 var(--font-mono); color: #cfe0d8; text-align: right; font-variant-numeric: tabular-nums; }

/* Card flutuante de catalisadores */
.gx-alerts { position: absolute; z-index: 4; left: 396px; top: 472px; width: 150px; padding: 13px 15px; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: rgba(21, 30, 27, 0.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 24px rgba(66, 211, 146, 0.06); }
.gx-alerts__head { display: flex; align-items: center; gap: 7px; font-size: var(--fs-micro); color: rgba(255,255,255,0.55); }
.gx-alerts__head svg { width: 12px; height: 12px; color: var(--warning); }
.gx-alerts > b { display: block; margin-top: 5px; font: 500 var(--fs-h3)/1 var(--font-mono); color: #f2f8f4; }
.gx-alerts > i { display: block; margin-top: 5px; font: 400 var(--fs-micro)/1 var(--font-mono); font-style: normal; color: #4be0a5; }
.ft-ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px); pointer-events: none; }
.ft-ambient--rose { left: 18%; bottom: 9%; width: 68%; height: 24%; background: rgba(255,79,143,0.14); }
.ft-ambient--cyan { right: 5%; top: 18%; width: 28%; height: 20%; background: rgba(55,214,233,0.07); }
.ft-readout {
  position: absolute;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  min-width: 150px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #111816;
  box-shadow: 0 8px 8px rgba(0,0,0,0.34);
}
.ft-readout i { grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.ft-readout span { color: var(--text-faint); font: 400 var(--fs-micro)/1.2 var(--font-mono); }
.ft-readout b { color: var(--text-primary); font: 500 var(--fs-label)/1.2 var(--font-mono); }
.ft-readout--top { top: 1%; right: 11%; }
.ft-readout--side { left: 3%; bottom: 19%; }

/* Manifesto: a tese ocupa a cena; o vazio dá escala à leitura. */
.ft-manifesto {
  min-height: max(100svh, 760px);
  padding: clamp(72px, 9vh, 112px) var(--gutter) clamp(64px, 8vh, 104px);
  background:
    radial-gradient(circle at 82% 30%, rgba(77, 124, 254, 0.035), transparent 34%),
    #020604;
}
.ft-manifesto-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(clamp(116px, 18svh, 188px), 1fr) auto;
  column-gap: clamp(16px, 2vw, 32px);
  width: min(100%, var(--content-wide));
  min-height: calc(max(100svh, 760px) - clamp(136px, 17vh, 216px));
  margin-inline: auto;
}
.ft-manifesto-id {
  grid-column: 1 / 3;
  grid-row: 1;
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 9px;
  color: var(--text-secondary);
  font: 400 var(--fs-caption)/1.3 var(--font-mono);
}
.ft-manifesto-id i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--text-secondary);
}
.ft-manifesto-note {
  position: relative;
  z-index: 3;
  max-width: 31ch;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-label);
  line-height: 1.55;
  text-wrap: pretty;
}
.ft-manifesto-note--a { grid-column: 7 / 10; grid-row: 1; }
.ft-manifesto-note--b { grid-column: 10 / 13; grid-row: 1; }
.ft-founder {
  grid-column: 3 / 6;
  grid-row: 1;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
}
.ft-founder img {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(226, 235, 230, 0.28), 0 0 18px rgba(0, 0, 0, 0.18);
}
.ft-founder b { display: block; color: var(--text-primary); font-size: var(--fs-body); font-weight: 500; line-height: 1.3; }
.ft-founder span { display: block; margin-top: 3px; color: var(--text-faint); font-size: var(--fs-caption); line-height: 1.35; }
.ft-thesis-group {
  position: relative;
  z-index: 4;
  grid-column: 1 / 13;
  grid-row: 3;
  align-self: start;
  width: min(100%, 1320px);
}
.ft-thesis {
  max-width: 16ch;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.ft-thesis--focus { color: var(--text-primary); font-weight: 500; }
.ft-thesis--signal { color: var(--text-primary); font-weight: 400; }
.ft-manifesto-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: clamp(20px, 2.1vw, 30px);
  padding: 12px 18px;
  border-radius: 0;
  color: var(--ft-carbon);
  background: var(--rose-500);
  box-shadow: 0 10px 24px rgba(255, 79, 143, 0.2);
  font-size: var(--fs-label);
  font-weight: 650;
  line-height: 1;
  transition: transform 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
}
.ft-manifesto-cta:hover,
.ft-manifesto-cta:focus-visible {
  color: var(--ft-carbon);
  background: var(--rose-500);
  box-shadow: 0 14px 30px rgba(255, 79, 143, 0.3);
  transform: translateY(-2px);
}
.ft-manifesto-cta:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }

/* Núcleo ACGT: o antigo scramble do Hero isolado como objeto de dados. */
.ft-sequence {
  min-height: max(100svh, 760px);
}
.ft-sequence::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 5%;
  left: 29%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12) 13%, var(--signal-border) 52%, var(--data-dim) 86%, transparent);
  box-shadow: 0 0 18px var(--signal-dim);
}
.ft-sequence-aside {
  position: absolute;
  z-index: 3;
  top: 14%;
  left: var(--gutter);
  width: min(235px, 24%);
}
.ft-sequence-label {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255,255,255,0.025);
  font-weight: 500;
}
.ft-sequence-aside > p {
  margin-top: clamp(48px, 7vh, 70px);
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.58;
}
.ft-sequence-visual {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 50%;
  width: 74%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.ft-sequence .ft-sequence-visual.reveal,
.ft-sequence .ft-sequence-visual.reveal.is-visible { transform: translate(-50%, -50%); }
.ft-sequence-rail { position: relative; width: 100%; padding: 42px 0 50px; }
.ft-sequence-rail::before,
.ft-sequence-rail::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-50%);
}
.ft-sequence-rail::before { left: 0; border-width: 1px 0 1px 1px; }
.ft-sequence-rail::after { right: 0; border-width: 1px 1px 1px 0; }
.ft-sequence-word {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: min(100%, 8.2em);
  margin-inline: auto;
  color: var(--text-primary);
  font-family: var(--font-wordmark);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(255,79,143,0.16);
}
.ft-sequence-slot {
  display: grid;
  place-items: center;
  min-width: 0;
  color: var(--signal);
  transition: color 100ms linear, text-shadow 100ms linear;
  will-change: color;
}
.ft-sequence-slot.is-locked { color: var(--text-primary); text-shadow: 0 0 18px rgba(255,255,255,0.13); }
.ft-sequence-slot.is-locked:last-child { color: var(--signal); text-shadow: 0 0 18px rgba(255,79,143,0.34); }
.ft-sequence-indices {
  display: flex;
  justify-content: space-between;
  width: 58%;
  margin: 27px auto 0;
  color: var(--text-faint);
  font: 500 var(--fs-micro)/1 var(--font-mono);
}
.ft-sequence-coordinate {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: 6%;
  color: var(--text-faint);
  font: 500 var(--fs-micro)/1 var(--font-mono);
}

/* Matriz de Mandatos: composição original — dois modos, dois mercados, um eixo. */
.ft-mandates {
  min-height: max(100svh, 2500px);
  padding: clamp(110px, 10vw, 160px) var(--gutter) clamp(90px, 8vw, 130px);
  overflow: hidden;
}
.ft-mandates::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * 0.5833);
  width: 1px;
  background: linear-gradient(transparent 6%, rgba(255,255,255,0.045) 19%, transparent 88%);
  pointer-events: none;
}
.ft-mandates-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  width: 100%;
  margin-inline: auto;
}
.ft-mandates-head .ft-signal-label { grid-column: 1 / 4; }
.ft-mandates-head h2 {
  grid-column: 1 / 10;
  margin-top: clamp(60px, 7vw, 108px);
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.ft-mandates-models {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%;
  margin: clamp(110px, 10vw, 160px) auto 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ft-mandate {
  position: relative;
  display: flex;
  min-height: 570px;
  flex-direction: column;
  padding-block: 30px 36px;
}
.ft-mandate--project {
  grid-column: 1 / 8;
  padding-right: clamp(44px, 6vw, 96px);
}
.ft-mandate--retainer {
  grid-column: 8 / 13;
  padding-left: clamp(34px, 4.5vw, 72px);
  border-left: 1px solid var(--border);
}
.ft-mandate-head { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.ft-mandate-head h3 {
  display: flex;
  max-width: 14ch;
  flex-direction: column;
  margin-top: clamp(54px, 5vw, 78px);
  font-size: var(--fs-h2);
  font-weight: 350;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.ft-mandate-head h3 span {
  margin-bottom: 16px;
  color: var(--signal);
  font: 500 var(--fs-body)/1 var(--font-mono);
  letter-spacing: 0;
}
.ft-mandate-meta {
  flex: none;
  color: var(--text-faint);
  font: 500 var(--fs-micro)/1.35 var(--font-mono);
  letter-spacing: 0.03em;
}
.ft-mandate-lead {
  max-width: 46ch;
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: var(--fs-h6);
  line-height: 1.6;
  text-wrap: pretty;
}
.ft-mandate-list {
  display: grid;
  margin-top: 38px;
  border-top: 1px solid var(--border-subtle);
}
.ft-mandate-list li {
  position: relative;
  padding: 14px 12px 14px 25px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--fs-body);
  line-height: 1.6;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ft-mandate-list li::before {
  content: '';
  position: absolute;
  top: calc(14px + 0.8em - 2.5px);
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(255,79,143,0.34);
}
.ft-mandate-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 20px;
  border-bottom: 1px solid var(--signal-border);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ft-mandate-cta span { color: var(--signal); font-size: var(--fs-h6); transition: transform var(--dur-fast) var(--ease); }
.ft-mandate-cta:hover,
.ft-mandate-cta:focus-visible { border-color: var(--signal); color: #fff; }
.ft-mandate-cta:focus-visible { outline: 2px solid var(--signal); outline-offset: 5px; }
.ft-mandate-cta:hover span,
.ft-mandate-cta:focus-visible span { transform: translate(3px, -3px); }
.ft-mandates-spine {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(160px, 16vw, 240px);
  margin-inline: auto;
}
.ft-mandates-spine::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58.33%;
  width: 1px;
  background: linear-gradient(var(--border), var(--signal));
}
.ft-mandates-spine i {
  position: absolute;
  bottom: -4px;
  left: calc(58.33% - 4px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 14px rgba(255,79,143,0.72);
}
.ft-mandates-audiences {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%;
  margin-inline: auto;
  border-top: 1px solid var(--border);
}
.ft-dossier { padding-top: 42px; }
.ft-dossier:first-child { grid-column: 1 / 7; padding-right: clamp(38px, 5vw, 80px); }
.ft-dossier:last-child { grid-column: 7 / 13; padding-left: clamp(38px, 5vw, 80px); border-left: 1px solid var(--border); }
/* `> span`: so o rotulo. O atalho `font` tambem fixa o corpo, e sem o
   combinador esta regra derrubava as partes do titulo, que sao spans
   dentro do h3, para --fs-micro. */
.ft-dossier-head > span {
  color: var(--text-faint);
  font: 500 var(--fs-micro)/1.35 var(--font-mono);
  letter-spacing: 0.03em;
}
.ft-dossier-head h3 {
  max-width: 14ch;
  margin-top: 18px;
  font-size: var(--fs-h2);
  font-weight: 350;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.ft-dossier-thesis {
  max-width: 18ch;
  margin-top: clamp(50px, 5vw, 72px);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.ft-dossier-intro {
  max-width: 57ch;
  margin-top: 26px;
  color: var(--text-secondary);
  font-size: var(--fs-h6);
  line-height: 1.6;
  text-wrap: pretty;
}
.ft-dossier-list { display: grid; margin-top: clamp(46px, 4vw, 62px); border-top: 1px solid var(--border); }
.ft-dossier-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 18px;
  padding: 21px 12px 23px 0;
  border-bottom: 1px solid var(--border-subtle);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ft-dossier-list li > span { padding-top: 4px; color: var(--text-faint); font: 500 var(--fs-micro)/1 var(--font-mono); }
.ft-dossier-list p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.6; text-wrap: pretty; }
.ft-dossier-list strong { color: var(--text-primary); font-weight: 550; }
.ft-mandates-axis {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  margin: clamp(70px, 7vw, 110px) auto 0;
  color: var(--text-faint);
  font: 500 var(--fs-micro)/1 var(--font-mono);
  letter-spacing: 0.03em;
  text-align: right;
}
@media (hover: hover) {
  .ft-mandate:hover .ft-mandate-list li,
  .ft-mandate:focus-within .ft-mandate-list li { border-color: rgba(255,79,143,0.17); }
  .ft-dossier-list li:hover { border-color: rgba(255,79,143,0.3); background: rgba(255,255,255,0.012); }
}

/* Método: uma trajetória contínua, com as etapas como paradas abertas. */
.ft-method {
  min-height: 0;
  padding: clamp(120px, 15vh, 200px) var(--gutter) clamp(104px, 12vh, 168px);
  background:
    radial-gradient(circle at 72% 56%, rgba(143, 184, 216, 0.08), transparent 34%),
    var(--ft-carbon);
}
.ft-method-head {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  font-family: var(--font-sans);
}
.ft-method .ft-signal-label,
.ft-method-cta,
.ft-method-step__index,
.ft-method-step__phase,
.ft-method-terminal span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.ft-method .ft-signal-label { color: var(--struct); }
.ft-method .ft-signal-label i { background: var(--struct); box-shadow: 0 0 12px rgba(143, 184, 216, 0.46); }
.ft-method-head h2 {
  max-width: 15ch;
  margin-top: 30px;
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.ft-method-head p {
  max-width: 52ch;
  margin-top: 28px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-copy);
  line-height: 1.65;
}
.ft-method-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  margin-top: 30px;
  padding: 0 17px;
  color: var(--ft-carbon);
  background: var(--rose-500);
  box-shadow: 0 12px 26px rgba(255, 79, 143, 0.2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ft-method-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ft-method-cta:hover,
.ft-method-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(255, 79, 143, 0.28); }
.ft-method-cta:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }

.ft-method-journey {
  position: relative;
  width: min(100%, var(--content-wide));
  height: clamp(960px, 72vw, 1120px);
  margin: clamp(76px, 10vh, 132px) auto 0;
}
.ft-method-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ft-method-route--narrow { display: none; }
.ft-method-route path { fill: none; vector-effect: non-scaling-stroke; }
.ft-method-route__bed { stroke: rgba(143, 184, 216, 0.2); stroke-width: 36; }
.ft-method-route__line { stroke: var(--text-primary); stroke-width: 4; filter: drop-shadow(0 0 7px rgba(245, 246, 250, 0.38)); }
.ft-method-route__arrow { stroke: var(--text-primary); stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; filter: drop-shadow(0 0 6px rgba(245, 246, 250, 0.38)); }
.ft-method-route__stop { fill: var(--ft-carbon); stroke: var(--text-primary); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ft-method-route__hub { fill: var(--struct); }
.ft-method-terminal {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.25;
}
.ft-method-terminal span { color: var(--struct); }
.ft-method-terminal--start { top: 0; left: 0; }
.ft-method-terminal--finish { right: 0; bottom: 0; text-align: right; }
.ft-method-steps {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft-method-step {
  position: absolute;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 15px;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
}
.ft-method-step__node {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
  background: var(--ft-carbon);
  box-shadow: 0 0 0 6px rgba(143, 184, 216, 0.14);
}
.ft-method-step__node::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--struct);
}
@media (min-width: 901px) {
  /* No percurso largo os nós são as paradas da própria rota; o marcador do texto não repete o sinal. */
  .ft-method-step__node { display: none; }
}
.ft-method-step__index {
  position: relative;
  z-index: 2;
  padding-top: 3px;
  color: var(--struct);
}
.ft-method-step__phase {
  margin: 0;
  color: var(--struct);
}
.ft-method-step h3 {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.ft-method-step div > p:last-child {
  max-width: 38ch;
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  text-wrap: pretty;
}
.ft-method-step--01 { top: 9%; left: 15%; width: min(31%, 420px); }
.ft-method-step--01 .ft-method-step__node { top: clamp(71px, 5.2vw, 83px); left: -17px; }
.ft-method-step--02 { top: 22%; left: 45%; width: min(29%, 390px); }
.ft-method-step--02,
.ft-method-step--04 { padding-right: 34px; }
.ft-method-step--02 .ft-method-step__node { top: clamp(73px, 5.4vw, 87px); right: -17px; }
.ft-method-step--03 { top: 47%; left: 27%; width: min(30%, 400px); }
.ft-method-step--03 .ft-method-step__node { top: clamp(69px, 5.1vw, 82px); left: -17px; }
.ft-method-step--04 { top: 61%; left: 44%; width: min(35%, 440px); }
.ft-method-step--04 .ft-method-step__node { top: clamp(78px, 5.8vw, 93px); right: -17px; }
.ft-method-step--05 { top: 78%; left: 36%; width: min(31%, 420px); }
.ft-method-step--05 .ft-method-step__node { top: clamp(119px, 8.8vw, 140px); left: -17px; }

/* Produto mobile: a tela acende a matéria; o objeto entra pelo limite inferior. */
.ft-mobile-product {
  display: block;
  isolation: isolate;
  min-height: clamp(720px, 100svh, 940px);
  padding: clamp(84px, 11vh, 132px) var(--gutter) 0;
}
.ft-mobile-head { position: static; max-width: min(400px, 38vw); }
.ft-mobile-head.reveal { transform: none; }
.ft-mobile-head > :not(h2) { position: relative; z-index: 4; }
.ft-mobile-head h2 {
  position: absolute;
  z-index: 1;
  top: clamp(270px, 32svh, 350px);
  right: var(--gutter);
  left: var(--gutter);
  max-width: none;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.93;
  letter-spacing: -0.035em;
}
.ft-mobile-head h2 span { display: block; width: max-content; max-width: 100%; }
.ft-mobile-head__lead { margin-left: 0; }
.ft-mobile-head__occluded { margin-left: clamp(160px, 32vw, 512px); }
.ft-mobile-head__tail { margin-left: clamp(0px, 8vw, 128px); }
.ft-mobile-head p { max-width: 46ch; margin-top: 18px; color: var(--text-muted); font-size: var(--fs-copy); line-height: 1.68; }
.ft-mobile-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  /* O h2 e absolute (para o aparelho poder oclui-lo), entao sai do fluxo e o CTA
     subia para cima dele: pedia o clique antes do argumento. A folga abaixo
     recoloca o CTA depois da ultima linha da manchete. Medido: h2 termina ~287px
     abaixo do topo do CTA em 1600, ~236 em 1024, ~200 em 768. */
  /* A folga acompanha a altura real do h2: 3 linhas a line-height .93.
     Margem fixa errava, porque --fs-display muda com a largura. */
  margin-top: calc(clamp(150px, 18svh, 200px) + 2.79 * var(--fs-display));
  padding: 0 20px;
  border-radius: 0;
  color: var(--ft-carbon);
  background: var(--rose-500);
  box-shadow: 0 14px 28px rgba(255, 79, 143, 0.2);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ft-mobile-cta:hover,
.ft-mobile-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 19px 34px rgba(255, 79, 143, 0.28); }
.ft-mobile-cta:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }
.ft-phone {
  --ft-phone-emission: rgba(77, 124, 254, 0.28);
  position: absolute;
  z-index: 3;
  right: clamp(180px, 16vw, 272px);
  bottom: clamp(-260px, -17vw, -160px);
  width: clamp(344px, 29vw, 440px);
  isolation: isolate;
}
.ft-phone--primary { transform: none; }
.ft-phone::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 4%;
  right: -64%;
  bottom: 8%;
  left: -64%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, var(--ft-phone-emission) 0%, rgba(77, 124, 254, 0.14) 25%, rgba(77, 124, 254, 0.045) 49%, transparent 74%);
  filter: blur(16px);
}
.ft-phone-shell { position: relative; z-index: 1; padding: 8px; border-radius: 48px; background: linear-gradient(145deg, #626a66, #0b0f0e 14%, #020403 48%, #3b423f 90%); box-shadow: inset 0 1px rgba(255,255,255,0.2), 0 24px 36px rgba(0,0,0,0.6); }
.ft-phone-screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 40px; background: radial-gradient(circle at 100% 0, rgba(77,124,254,0.18), transparent 38%), #0a1411; box-shadow: 0 0 20px rgba(77, 124, 254, 0.22), 0 0 68px rgba(77, 124, 254, 0.16); padding: 24px 17px 18px; }
.ft-phone-screen::before { content: ''; position: absolute; top: 9px; left: 50%; width: 84px; height: 21px; transform: translateX(-50%); border-radius: 999px; background: #010302; }
.ft-phone-status { display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary); font: 400 var(--fs-micro)/1 var(--font-mono); }
.ft-phone-status i { width: 62px; }
.ft-phone-title { display: flex; justify-content: space-between; margin-top: 35px; color: var(--text-secondary); font-size: var(--fs-caption); }
.ft-phone-title b { font: 400 var(--fs-micro)/1 var(--font-mono); color: var(--text-faint); }
/* Trajetoria do Metodo comprimida na coluna do aparelho: cinco etapas, uma em curso.
   A familia cromatica e a mesma do aparelho (azul-estrutura/cyan); rosa nao entra aqui.
   O aparelho nasce cortado pelo limite inferior da cena (ft-scene overflow hidden):
   o SVG cabe na janela visivel da tela, nao na tela inteira. */
.ft-phone-route { display: block; width: 100%; height: auto; max-height: 560px; margin-top: 18px; }
.ft-phone-route__bed { fill: none; stroke: rgba(143, 184, 216, 0.1); stroke-width: 10; stroke-linecap: round; }
.ft-phone-route__line { fill: none; stroke: rgba(143, 184, 216, 0.34); stroke-width: 1.4; }
.ft-phone-route__progress { fill: none; stroke: var(--data); stroke-width: 1.6; }
.ft-phone-route__arrow { fill: none; stroke: rgba(143, 184, 216, 0.34); stroke-width: 1.4; stroke-linecap: square; }
.ft-phone-route__stop { fill: #0a1411; stroke: rgba(143, 184, 216, 0.55); stroke-width: 1.4; }
.ft-phone-route__stop.is-current { fill: var(--data); stroke: var(--data); }
.ft-phone-route__halo { fill: none; stroke: rgba(55, 214, 233, 0.42); stroke-width: 1; }
.ft-phone-route__label { fill: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.05em; }
.ft-phone-route__label.is-current { fill: var(--text-primary); }

/* Insights: núcleo GennomX AI (Dança de Galáxias) + frentes conectadas, conteúdo real. */
.ft-insights {
  padding: clamp(150px, 18vh, 220px) var(--gutter) clamp(170px, 20vh, 250px);
  overflow: clip;
  background: var(--ft-black);
}
.ft-insights-head {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 4fr);
  gap: clamp(48px, 8vw, 140px);
  align-items: end;
}
.ft-insights-head h2 {
  max-width: 1080px;
  margin-top: 28px;
  font-size: var(--fs-display);
  font-weight: 350;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  color: var(--text-primary);
}
.ft-insights-head > p {
  max-width: 55ch;
  color: var(--text-muted);
  font-size: var(--fs-copy);
  line-height: 1.72;
}
.ft-insights-index {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-faint);
  font: 500 var(--fs-micro)/1.2 var(--font-mono);
  letter-spacing: 0.08em;
}
.ft-insights-index::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1px solid var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--signal-dim);
}

/* Malha do ecossistema: conectores ortogonais do núcleo às frentes.
   Traço neutro legível sobre o ground — as pontas coloridas nomeiam o destino. */
.ft-flow { position: relative; margin-top: clamp(96px, 12vh, 170px); }
.ft-links {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.ft-links__path { fill: none; stroke: var(--ink-500); stroke-width: 1; }
.ft-links__node { fill: var(--ink-300); }
.ft-links__node--end { fill: currentColor; filter: drop-shadow(0 0 6px currentColor); }
.ft-links__node.is-pulsing { animation: ft-links-pulse 3.2s var(--ease) infinite; }
@keyframes ft-links-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.ft-flow > *:not(.ft-links) { position: relative; z-index: 1; }

/* Núcleo — Dança de Galáxias. O wordmark sobe: título acima do canvas,
   lendo o nome primeiro e a colisão como sua evidência. */
.ft-core-stage {
  position: relative;
  width: 100%;
}
.ft-core-scene {
  position: relative;
  width: 100%;
  min-height: 540px;
  aspect-ratio: 16 / 9.6;
}
.ft-core-viewport { position: absolute; inset: 0; }
.ft-core-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ft-core-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(118% 92% at 50% 45%, transparent 44%, rgba(2, 6, 4, 0.88) 100%);
}
.ft-core-brand {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-bottom: clamp(26px, 3.2vw, 46px);
}
.ft-core-brand h3 {
  color: var(--text-primary);
  font-family: var(--font-wordmark);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.05em;
}
.ft-core-tag { color: var(--mauve); font: 500 var(--fs-caption)/1.4 var(--font-mono); letter-spacing: 0.06em; }
.ft-core-meta {
  position: absolute;
  z-index: 2;
  right: clamp(6px, 3vw, 42px);
  bottom: clamp(10px, 4.5%, 40px);
  display: grid;
  gap: 6px;
  color: var(--text-faint);
  font: 500 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-align: right;
}
.ft-core-rail {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
  width: 168px;
}
.ft-core-rail--inputs { left: 0; }
.ft-core-rail--outputs { right: 0; }
.ft-core-rail li {
  position: relative;
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 11px;
  padding-block: 4px;
}
.ft-core-rail--inputs li::after,
.ft-core-rail--outputs li::before {
  content: '';
  position: absolute;
  top: 50%;
  width: clamp(20px, 4vw, 64px);
  height: 1px;
  background: var(--ink-500);
}
.ft-core-rail--inputs li::after { left: 100%; }
.ft-core-rail--outputs li::before { right: 100%; }
.ft-core-rail i {
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--info);
  box-shadow: 0 0 9px var(--info-dim);
}
.ft-core-rail--inputs li:nth-child(2) i { background: var(--signal); box-shadow: 0 0 9px var(--signal-dim); }
.ft-core-rail--inputs li:nth-child(3) i { background: var(--data); box-shadow: 0 0 9px var(--data-dim); }
.ft-core-rail--outputs li { grid-template-columns: 1fr; }

/* A ancora envolve o span para nao quebrar os dez seletores `li span`
   que estilizam o rotulo das saidas. */
.ft-core-rail--outputs li > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.ft-core-rail--outputs li > a:focus-visible {
  outline: 2px solid var(--signal, #FF4F8F);
  outline-offset: 3px;
  border-radius: 2px;
}

.ft-core-rail--outputs li span {
  display: block;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  text-align: right;
  border-bottom: 1px solid var(--border-subtle);
  padding-block: 12px;
}
.ft-core-rail b { display: block; margin-bottom: 6px; color: var(--text-primary); font-size: var(--fs-caption); font-weight: 550; }
.ft-core-rail--inputs span { color: var(--text-faint); font-size: var(--fs-micro); line-height: 1.5; }
.ft-core-copy {
  max-width: 74ch;
  margin: clamp(36px, 4.5vw, 64px) auto 0;
  color: var(--text-muted);
  font-size: var(--fs-lede);
  line-height: 1.74;
  text-align: center;
}

/* Zonas / frentes alimentadas pelo núcleo. */
.ft-zone { margin-top: clamp(130px, 16vh, 220px); }
.ft-zone-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(44px, 5.5vw, 80px);
}
.ft-zone-head > .ft-insights-index { justify-self: start; }
.ft-zone-head > h3,
.ft-zone-head > div { grid-column: 2; text-align: center; }
.ft-zone-head h3 {
  color: var(--text-primary);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}
.ft-zone-head p { margin-top: 12px; color: var(--text-muted); font-size: var(--fs-label); }
.ft-zone-head > .ft-insights-link { justify-self: end; }
.ft-zone-sub { max-width: 56ch; margin: -18px 0 34px; color: var(--text-muted); font-size: var(--fs-label); line-height: 1.62; }

/* Blog — mosaico editorial vertical e assimétrico, cards 9:16. */
.ft-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  align-items: start;
}
.ft-mosaic > .content-list-state { grid-column: 1 / -1; }
.ft-story { min-width: 0; }
.ft-story--1 { grid-column: 1 / 4; }
.ft-story--2 { grid-column: 4 / 6; margin-top: clamp(56px, 7vw, 124px); }
.ft-story--3 { grid-column: 6 / 10; margin-top: clamp(20px, 2.8vw, 48px); }
.ft-story--4 { grid-column: 10 / 13; margin-top: clamp(88px, 10vw, 168px); }
.ft-story--5 { grid-column: 2 / 5; margin-top: clamp(10px, 2vw, 34px); }
.ft-story--6 { grid-column: 7 / 12; margin-top: clamp(40px, 5vw, 84px); }
.ft-story > a {
  position: relative;
  display: flex;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ft-story__media,
.ft-story__scrim { position: absolute; inset: 0; }
.ft-story__image,
.ft-story__fallback { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.ft-story__scrim { background: linear-gradient(180deg, rgba(7, 8, 12, 0.06) 26%, rgba(7, 8, 12, 0.94) 90%); }
.ft-story__meta {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 15px;
  left: 15px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-secondary);
  font: 500 var(--fs-micro)/1.35 var(--font-mono);
}
.ft-story h4 {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  padding: clamp(15px, 1.8vw, 26px);
  color: var(--text-primary);
  font-size: var(--fs-h4);
  font-weight: 550;
  line-height: 1.16;
  text-wrap: balance;
}
.ft-story--1 h4,
.ft-story--3 h4,
.ft-story--6 h4 { font-size: var(--fs-h3); }
.ft-story > a:hover,
.ft-story > a:focus-visible { transform: translateY(-3px); border-color: var(--signal-border); box-shadow: 0 18px 42px var(--signal-dim); }
.ft-story > a:hover .ft-story__image,
.ft-story > a:focus-visible .ft-story__image { transform: scale(1.025); }
.ft-story > a:focus-visible,
.ft-insights-link:focus-visible,
.ft-news-latest:focus-visible,
.ft-news-feed a:focus-visible,
.ft-report-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

/* Newsletter — feed de sinais, direto sobre o fundo. */
.ft-zone--editorial {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}
.ft-news,
.ft-report { min-width: 0; }
.ft-news .ft-zone-head,
.ft-report .ft-zone-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: clamp(30px, 3.5vw, 48px); }
.ft-news .ft-zone-head > h3,
.ft-report .ft-zone-head > h3 { grid-column: 1; text-align: left; font-size: var(--fs-h3); }
.ft-news-latest {
  display: block;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.ft-news-latest:hover { transform: translateY(-3px); }
.ft-news-latest__meta { display: flex; justify-content: space-between; gap: 16px; color: var(--text-faint); font: 500 var(--fs-micro)/1.4 var(--font-mono); }
.ft-news-latest h4 { max-width: 30ch; margin-top: 20px; color: var(--text-primary); font-size: var(--fs-h4); line-height: 1.24; }
.ft-news-latest p { max-width: 60ch; margin-top: 12px; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.58; }
.ft-news-latest__topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ft-news-latest__topics i {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font: 500 var(--fs-micro)/1 var(--font-mono);
  font-style: normal;
}
.ft-news-latest__cta,
.ft-report-card__cta { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; margin-top: 16px; color: var(--text-primary); font-size: var(--fs-caption); }
.ft-news-latest__cta b,
.ft-report-card__cta b { color: var(--signal); font-size: var(--fs-h6); }
.ft-news-feed { margin-top: 30px; list-style: none; }
.ft-news-feed li {
  display: grid;
  grid-template-columns: 6px 84px minmax(0, 1fr);
  gap: 13px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--border-subtle);
}
.ft-news-feed i { width: 5px; height: 5px; border-radius: 50%; background: var(--mauve); box-shadow: 0 0 7px var(--mauve-dim); }
.ft-news-feed time { color: var(--text-faint); font: 500 var(--fs-micro)/1.4 var(--font-mono); }
.ft-news-feed a { color: var(--text-secondary); font-size: var(--fs-caption); line-height: 1.45; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.ft-news-feed a:hover { color: var(--text-primary); }
.ft-insights-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 26px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-caption);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ft-insights-link:hover { color: var(--text-primary); border-color: var(--signal); }
.ft-insights-link span { color: var(--signal); }

/* GX Reports — capa com selo de atualização, maior peso visual da malha. */
.ft-report-card {
  position: relative;
  display: block;
  min-height: clamp(470px, 44vw, 640px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ft-report-card:hover { transform: translateY(-3px); border-color: var(--info); box-shadow: 0 22px 60px var(--info-dim); }
.ft-report-card__media,
.ft-report-card__scrim { position: absolute; inset: 0; }
.ft-report-card__media img,
.ft-report-card__fallback { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.ft-report-card:hover .ft-report-card__media img { transform: scale(1.02); }
.ft-report-card__scrim { background: linear-gradient(100deg, rgba(7, 8, 12, 0.96) 18%, rgba(7, 8, 12, 0.68) 52%, rgba(7, 8, 12, 0.18) 100%); }
.ft-report-card__seal {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  padding: 8px 12px;
  border: 1px solid var(--info);
  border-radius: 999px;
  background: rgba(7, 8, 12, 0.72);
  color: var(--info);
  font: 500 var(--fs-micro)/1 var(--font-mono);
  letter-spacing: 0.08em;
}
.ft-report-card__body {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 3vw, 46px);
  bottom: clamp(20px, 3.2vw, 46px);
  left: clamp(20px, 3vw, 46px);
  max-width: 640px;
}
.ft-report-card__meta { display: flex; gap: 18px; color: var(--text-secondary); font: 500 var(--fs-micro)/1.4 var(--font-mono); }
.ft-report-card h4 { max-width: 24ch; margin-top: 22px; color: var(--text-primary); font-size: var(--fs-h3); font-weight: 450; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.ft-report-card__body > p { max-width: 58ch; margin-top: 16px; color: var(--text-muted); font-size: var(--fs-label); line-height: 1.62; }
.ft-report-card__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ft-report-card__facts i {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(7, 8, 12, 0.55);
  color: var(--text-secondary);
  font: 500 var(--fs-micro)/1 var(--font-mono);
  font-style: normal;
}

/* Carteiras GX — quatro painéis distintos, direto sobre o fundo. */
.ft-insights-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  margin: -18px 0 34px;
  color: var(--text-faint);
  font: 500 var(--fs-micro)/1.3 var(--font-mono);
}
.ft-insights-freshness__badge,
.ft-portfolio-card__status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--success);
  font: 500 var(--fs-micro)/1 var(--font-mono);
}
.ft-insights-freshness__badge.is-stale,
.ft-portfolio-card__status.is-stale { color: var(--signal); border-color: var(--signal-border); background: var(--signal-dim); }
.ft-wallets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(34px, 4vw, 64px) clamp(18px, 2.4vw, 36px);
  align-items: stretch;
}
.ft-wallets > .content-list-state { grid-column: 1 / -1; }
.ft-portfolio-card { --wallet: var(--signal); display: flex; flex-direction: column; min-width: 0; min-height: 100%; padding-top: 24px; border-top: 1px solid var(--wallet); }
.ft-portfolio-card--a { --wallet: var(--signal); }
.ft-portfolio-card--b { --wallet: var(--mauve); }
.ft-portfolio-card--c { --wallet: var(--info); }
.ft-portfolio-card--d { --wallet: var(--data); }
.ft-portfolio-card__head { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.ft-portfolio-card__head h4 { margin-top: 16px; color: var(--text-primary); font-size: var(--fs-h4); line-height: 1.1; }
.ft-portfolio-card__benchmark { max-width: 130px; color: var(--text-faint); font: 500 var(--fs-micro)/1.45 var(--font-mono); text-align: right; }
.ft-portfolio-card__thesis { min-height: 4.9em; margin-top: 20px; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.62; }
.ft-portfolio-card__kpis { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.ft-portfolio-card__kpis > div { min-width: 0; padding: 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ft-portfolio-card__kpis dt { color: var(--text-faint); font-size: var(--fs-micro); line-height: 1.35; }
.ft-portfolio-card__kpis dd { margin-top: 9px; color: var(--text-primary); font: 500 var(--fs-h4)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ft-portfolio-chart { margin-top: auto; padding-top: 26px; }
.ft-portfolio-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.ft-portfolio-chart__grid { stroke: var(--border-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ft-portfolio-chart__line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ft-portfolio-chart__line--portfolio { stroke: var(--wallet); filter: drop-shadow(0 0 5px var(--wallet)); opacity: 0.92; }
.ft-portfolio-chart__line--benchmark { stroke: var(--ink-500); opacity: 0.6; }
.ft-portfolio-chart__date { fill: var(--text-faint); font: 500 var(--fs-micro)/1 var(--font-mono); }
.ft-portfolio-chart figcaption { display: flex; gap: 16px; align-items: center; margin-top: 8px; color: var(--text-faint); font: 500 var(--fs-micro)/1 var(--font-mono); }
.ft-portfolio-chart figcaption span { margin-right: auto; }
.ft-portfolio-chart figcaption i { position: relative; padding-left: 16px; font-style: normal; }
.ft-portfolio-chart figcaption i::before { content: ''; position: absolute; top: 50%; left: 0; width: 10px; height: 2px; background: var(--wallet); }
.ft-portfolio-chart figcaption i:last-child::before { background: var(--ink-500); }
.ft-portfolio-chart__empty { color: var(--text-faint); font-size: var(--fs-caption); }
.ft-portfolio-card__dates { display: grid; gap: 7px; margin-top: 22px; color: var(--text-faint); font: 500 var(--fs-micro)/1.4 var(--font-mono); }
.ft-insights-disclaimer { max-width: 110ch; margin: 34px auto 0; color: var(--text-faint); font-size: var(--fs-micro); line-height: 1.6; text-align: center; }
.ft-insights-final {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 6fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: clamp(110px, 14vh, 180px);
  padding-top: 38px;
  border-top: 1px solid var(--border);
}
.ft-insights-final > p { max-width: 62ch; color: var(--text-muted); line-height: 1.65; }
.ft-insights-final .btn-pill { min-height: 44px; }

@media (max-width: 1100px) {
  .ft-links { display: none; }
  .ft-insights-head { grid-template-columns: 1fr; }
  .ft-insights-head > p { max-width: 62ch; }
  .ft-core-stage { width: 100%; display: flex; flex-direction: column; }
  .ft-core-scene { min-height: 0; aspect-ratio: auto; }
  .ft-core-viewport { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10.5; }
  .ft-core-rail { position: static; transform: none; width: 100%; margin-top: 28px; }
  .ft-core-rail--inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-core-rail--outputs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ft-core-rail--inputs li::after,
  .ft-core-rail--outputs li::before { display: none; }
  .ft-core-rail--outputs li span { text-align: left; padding-block: 10px; }
  .ft-core-copy { text-align: left; }
  .ft-mosaic { grid-template-columns: 1fr 1fr; }
  .ft-story { grid-column: auto !important; margin-top: 0 !important; }
  .ft-story:nth-child(even) { margin-top: clamp(28px, 6vw, 64px) !important; }
  .ft-zone--editorial { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .ft-insights { padding: 118px 20px 130px; }
  .ft-insights-head h2 { font-size: var(--fs-h2); }
  .ft-flow { margin-top: 88px; }
  .ft-core-viewport { aspect-ratio: 4 / 4.6; }
  .ft-core-brand h3 { font-size: var(--fs-h2); }
  .ft-core-meta { display: none; }
  .ft-core-rail--inputs { grid-template-columns: 1fr; }
  .ft-core-rail--outputs { grid-template-columns: 1fr 1fr; }
  .ft-zone { margin-top: 112px; }
  .ft-zone-head { grid-template-columns: 1fr; gap: 20px; }
  .ft-zone-head > h3,
  .ft-zone-head > div { grid-column: 1; text-align: left; }
  .ft-zone-head > .ft-insights-link { justify-self: start; }
  .ft-zone-sub { margin-top: 0; }
  .ft-mosaic { gap: 14px; }
  .ft-story--1 { grid-column: 1 / -1 !important; }
  .ft-story--1 h4 { font-size: var(--fs-h4); }
  .ft-story h4 { font-size: var(--fs-h6); }
  .ft-news-feed li { grid-template-columns: 6px 70px minmax(0, 1fr); gap: 10px; }
  .ft-report-card { min-height: 480px; }
  .ft-report-card__seal { top: 14px; right: 14px; }
  .ft-wallets { grid-template-columns: 1fr; }
  .ft-portfolio-card__head { display: grid; }
  .ft-portfolio-card__benchmark { max-width: none; text-align: left; }
  .ft-portfolio-card__thesis { min-height: 0; }
  .ft-portfolio-chart svg { height: 140px; }
  .ft-insights-final { grid-template-columns: 1fr; }
  .ft-insights-final .btn-pill { width: 100%; }
}

/* Fecho: horizonte luminoso e wordmark monumental. */
/* ISENCAO DECLARADA DA ESCALA TIPOGRAFICA
   O wordmark do fecho e grafismo, nao texto numa hierarquia de leitura: ele vai
   a 400px e ocupa a largura da tela. Foi convertido para var(--fs-hero) durante
   a unificacao da escala e encolheu de 400px para 123px, perdendo a imponencia
   que o fundador havia aprovado. A regra dos 12 degraus vale para texto que
   alguem le; nao vale para um grafismo de tela cheia.
   O mesmo criterio se aplica ao h2 desta cena. */
.ft-closing { min-height: 112svh; }
.ft-closing-copy { position: absolute; z-index: 4; top: 25%; left: var(--gutter); max-width: 600px; }
.ft-closing-copy h2 { margin-top: 18px; font-size: clamp(2.5rem, 4.7vw, 4.6rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.035em; }
.ft-closing-copy > p { max-width: 46ch; margin-top: 18px; color: var(--text-muted); }
.ft-closing-copy .ft-actions { margin-top: 25px; }
.ft-horizon { position: absolute; z-index: 2; top: 63%; right: 4%; left: 4%; height: 1px; background: linear-gradient(90deg, transparent, var(--signal) 26%, var(--mauve) 72%, transparent); box-shadow: 0 0 15px var(--signal); }
.ft-horizon::after { content: ''; position: absolute; top: 0; right: 10%; left: 10%; height: 260px; background: linear-gradient(rgba(255,79,143,0.10), transparent 72%); filter: blur(22px); clip-path: polygon(0 0,100% 0,86% 100%,14% 100%); }
.ft-closing-word { position: absolute; z-index: 1; left: 50%; bottom: -0.22em; transform: translateX(-50%); color: var(--text-primary); font-family: var(--font-wordmark); font-size: clamp(10rem, 25vw, 25rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.055em; white-space: nowrap; }

/* Fundação das cenas pós-hero: matéria, luz rasante e conteúdo nítido. */
.ft-scene:not(.gx-hero) {
  /* Sem fundo proprio. A luz rasante por cena deixava cada cena mais clara que
     o vao entre elas, e o resultado eram faixas horizontais nas transicoes
     (medido: 39 -> 17 -> 26 de luminancia num limite de secao). O fundador
     pediu ground uniforme e mais escuro, entao a materia vive so no .ft-home e
     atravessa a pagina inteira sem interrupcao. */
  background: transparent;
}

/* A direção de cada lâmina nasce numa borda distinta; não há halo central. */
.ft-manifesto {
  --ft-rake-angle: 118deg;
  --ft-rake-light: rgba(210, 226, 219, 0.08);
  --ft-rake-falloff: rgba(210, 226, 219, 0.022);
}
.ft-sequence {
  --ft-rake-angle: 28deg;
  --ft-rake-light: rgba(218, 229, 223, 0.078);
  --ft-rake-falloff: rgba(218, 229, 223, 0.02);
  --ft-rake-shadow: rgba(3, 5, 4, 0.48);
}
.ft-mandates {
  --ft-rake-angle: 142deg;
  --ft-rake-light: rgba(116, 151, 255, 0.075);
  --ft-rake-falloff: rgba(116, 151, 255, 0.018);
  --ft-rake-shadow: rgba(3, 6, 14, 0.44);
}
.ft-method {
  --ft-rake-angle: 64deg;
  --ft-rake-light: rgba(101, 204, 233, 0.065);
  --ft-rake-falloff: rgba(101, 204, 233, 0.016);
  --ft-rake-shadow: rgba(2, 11, 12, 0.46);
}
.ft-insights {
  --ft-rake-angle: 154deg;
  --ft-rake-light: rgba(119, 224, 193, 0.065);
  --ft-rake-falloff: rgba(119, 224, 193, 0.016);
  --ft-rake-shadow: rgba(2, 10, 8, 0.44);
}
.ft-mobile-product {
  --ft-rake-angle: 42deg;
  --ft-rake-light: rgba(113, 151, 255, 0.07);
  --ft-rake-falloff: rgba(113, 151, 255, 0.016);
  --ft-rake-shadow: rgba(5, 4, 13, 0.46);
}
.ft-closing {
  --ft-rake-angle: 166deg;
  --ft-rake-light: rgba(255, 112, 162, 0.075);
  --ft-rake-falloff: rgba(255, 112, 162, 0.018);
  --ft-rake-shadow: rgba(11, 2, 7, 0.46);
}

/* A tipografia compartilha o eixo da luz rasante de cada cena. */
.ft-home {
  --ft-display-light: #f4f6f5;
  --ft-display-mid: #e5e9e7;
  --ft-display-shadow: #cdd4d1;
}
.ft-home .ft-scene:not(.gx-hero) :is(
  .ft-thesis,
  .ft-mandates-head h2,
  .ft-mandate-head h3,
  .ft-dossier-head h3,
  .ft-dossier-thesis,
  .ft-method-head h2,
  .ft-insights-head h2,
  .ft-mobile-head h2,
  .ft-closing-copy h2
) {
  color: var(--ft-display-light);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ft-home .ft-scene:not(.gx-hero) :is(
    .ft-thesis,
    .ft-mandates-head h2,
    .ft-mandate-head h3,
    .ft-dossier-head h3,
    .ft-dossier-thesis,
    .ft-method-head h2,
    .ft-insights-head h2,
    .ft-mobile-head h2,
    .ft-closing-copy h2
  ) {
    background-image: linear-gradient(
      var(--ft-rake-angle),
      var(--ft-display-light) 0%,
      var(--ft-display-mid) 52%,
      var(--ft-display-shadow) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .ft-thesis :is(.ft-thesis--focus, .ft-thesis--signal),
  .ft-method-head h2 span {
    color: inherit;
    -webkit-text-fill-color: inherit;
  }
}

@media (max-width: 1100px) {
  .ft-monitor { width: 96vw; }
  .ft-mandate--project { padding-right: 42px; }
  .ft-mandate--retainer { padding-left: 38px; }
  .ft-dossier:first-child { padding-right: 36px; }
  .ft-dossier:last-child { padding-left: 36px; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .ft-mobile-product .ft-phone { right: clamp(36px, 7vw, 72px); }
}

@media (min-width: 1440px) and (max-height: 820px) {
  .ft-monitor-stage {
    top: 275px;
    right: -2%;
    left: auto;
    width: 66%;
    height: calc(100% - 300px);
  }
  .ft-monitor { width: 100%; margin-right: 0; transform: translateX(10vw) rotateX(60deg) rotateZ(-3.6deg) rotateY(1deg); }
  .ft-readout--top { top: 4%; right: 7%; }
}

@media (max-width: 900px) {
  .ft-home {
    --ft-scene-gap: clamp(96px, 14svh, 140px);
    --ft-scene-gap-major: clamp(136px, 20svh, 190px);
  }
  .ft-scene { min-height: 100svh; }
  .ft-hero-index, .ft-readout { display: none; }
  .ft-monitor-stage { top: 575px; left: 0; width: 100%; height: calc(100% - 575px); perspective: none; display: flex; align-items: center; }
  .ft-monitor { width: min(540px, calc(100vw - 24px)); transform: rotateX(2.5deg) rotateZ(-1.4deg); filter: drop-shadow(0 30px 24px rgba(0,0,0,0.76)); }
  .ft-monitor-frame { padding: 7px; border-radius: 22px; }
  .ft-monitor-frame::after { display: none; }
  .ft-monitor-screen { aspect-ratio: 16 / 10.4; border-radius: 15px; }

  .ft-manifesto { min-height: auto; padding: clamp(80px, 13svh, 104px) 20px 80px; }
  .ft-manifesto-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  /* `order` explicito foi removido: era do Manifesto anterior e invertia a
     leitura abaixo de 900px, jogando a tese para depois da CTA. A ordem do
     DOM ja e a ordem correta: datum, tese, credencial, notas, acao. */
  .ft-manifesto-note { max-width: 42ch; font-size: var(--fs-label); }
  .ft-founder { margin-top: 28px; }
  .ft-founder img { width: 54px; height: 54px; }
  .ft-manifesto-note--a { margin-top: 48px; }
  .ft-manifesto-note--b { margin-top: 14px; color: var(--text-secondary); }
  .ft-thesis-group {
    margin-top: clamp(92px, 16svh, 144px);
    padding: 0;
  }
  .ft-thesis {
    max-width: 15ch;
    font-size: var(--fs-display);
    line-height: 1.03;
    letter-spacing: -0.048em;
    text-wrap: pretty;
  }
  .ft-manifesto-cta { min-height: 44px; margin-top: 22px; }

  .ft-sequence {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 96px 20px 72px;
  }
  .ft-sequence-aside { position: relative; inset: auto; width: min(100%, 33rem); }
  .ft-sequence-aside > p { width: min(31ch, 100%); margin-top: 30px; }
  .ft-sequence-visual {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-top: clamp(58px, 13vw, 86px);
    transform: none;
  }
  .ft-sequence .ft-sequence-visual.reveal,
  .ft-sequence .ft-sequence-visual.reveal.is-visible { transform: none; }
  .ft-sequence-rail { padding-block: clamp(56px, 12vw, 96px) 44px; }
  .ft-sequence-rail::before { left: 0; }
  .ft-sequence-rail::after { right: 0; }
  .ft-sequence-word { width: min(100%, 8.2em); }
  .ft-sequence-indices { width: 78%; margin-top: 18px; }
  .ft-sequence-coordinate { right: 20px; bottom: 24px; }

  .ft-mandates { min-height: 0; padding: 108px 20px 94px; }
  .ft-mandates::after { display: none; }
  .ft-mandates-head { display: block; }
  .ft-mandates-head h2 { margin-top: 62px; font-size: var(--fs-display); }
  .ft-mandates-models { display: block; margin-top: 96px; }
  .ft-mandate { min-height: 0; padding: 28px 0 66px; }
  .ft-mandate--project { padding-right: 0; }
  .ft-mandate--retainer { padding-left: 0; border-top: 1px solid var(--border); border-left: 0; }
  .ft-mandate-head h3 { margin-top: 52px; }
  .ft-mandate-lead { max-width: 58ch; }
  .ft-mandate-list { max-width: 680px; }
  .ft-mandate-cta { margin-top: 42px; }
  .ft-mandates-spine { height: 150px; }
  .ft-mandates-spine::before { left: 22px; }
  .ft-mandates-spine i { left: 18px; }
  .ft-dossier:first-child { padding-right: 28px; }
  .ft-dossier:last-child { padding-left: 28px; }
  .ft-dossier-thesis { max-width: 16ch; }
  .ft-dossier-list li { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
  .ft-mandates-axis { margin-top: 72px; }

  .ft-method { padding: 108px 20px 120px; }
  .ft-method-head { width: 100%; max-width: 620px; }
  .ft-method-head p { max-width: 44ch; }
  .ft-method-journey { height: 1050px; margin-top: 74px; }
  .ft-method-route--wide { display: none; }
  .ft-method-route--narrow {
    display: block;
    top: 12px;
    right: auto;
    bottom: 12px;
    left: 0;
    width: 72px;
    height: auto;
  }
  .ft-method-route__bed { stroke-width: 26; }
  .ft-method-terminal--start { top: 0; left: 80px; }
  .ft-method-terminal--finish { right: auto; bottom: 0; left: 80px; text-align: left; }
  .ft-method-steps {
    position: absolute;
    top: 92px;
    right: 0;
    bottom: auto;
    left: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 80px;
  }
  .ft-method-step,
  .ft-method-step--01,
  .ft-method-step--02,
  .ft-method-step--03,
  .ft-method-step--04,
  .ft-method-step--05 {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    min-height: 176px;
    padding: 0;
  }
  .ft-method-step__node,
  .ft-method-step--01 .ft-method-step__node,
  .ft-method-step--02 .ft-method-step__node,
  .ft-method-step--03 .ft-method-step__node,
  .ft-method-step--04 .ft-method-step__node,
  .ft-method-step--05 .ft-method-step__node {
    top: 45px;
    right: auto;
    left: -36px;
  }
  .ft-method-step--02 .ft-method-step__node,
  .ft-method-step--04 .ft-method-step__node { left: -70px; }
  .ft-method-step h3 { font-size: var(--fs-h3); }
  .ft-method-step div > p:last-child { max-width: 48ch; }

  .ft-mobile-product {
    min-height: clamp(800px, 92svh, 920px);
    padding: 84px 20px 0;
  }
  .ft-mobile-head { max-width: min(390px, 52vw); }
  .ft-mobile-head h2 { top: clamp(250px, 31svh, 318px); right: 20px; left: 20px; }
  .ft-mobile-head__occluded { margin-left: clamp(70px, 24vw, 188px); }
  .ft-mobile-head__tail { margin-left: clamp(0px, 8vw, 64px); }
  .ft-phone { right: clamp(36px, 7vw, 72px); bottom: clamp(-200px, -18vw, -128px); width: min(344px, 46vw); }


  .ft-closing { min-height: 112svh; }
  .ft-closing-copy { top: 22%; right: 20px; left: 20px; }
  .ft-closing-copy h2 { font-size: var(--fs-display); }
  .ft-horizon { top: 67%; right: 0; left: 0; }
  .ft-closing-word { bottom: 0.12em; font-size: 7.7rem; }  /* isencao: grafismo, ver nota em .ft-closing */

  .site-header .site-logo,
  .site-footer .site-logo,
  .menu-toggle,
  .footer-nav-link,
  .footer-legal a { min-height: 44px; display: inline-flex; align-items: center; }
  .menu-toggle { width: 44px; height: 44px; }
  .ft-home .btn { min-height: 44px; }
}

@media (max-width: 700px) {
  .ft-mandates-head h2 { line-height: 0.94; }
  .ft-mandate-head { gap: 14px; }
  .ft-mandate-meta { max-width: 72px; text-align: right; }
  .ft-mandate-lead { font-size: var(--fs-lede); }
  .ft-mandate-list li { padding-block: 16px; font-size: var(--fs-label); }
  .ft-mandate-list li::before { top: calc(16px + 0.8em - 2.5px); }
  .ft-mandate-cta { width: 100%; }
  .ft-mandates-spine { height: 124px; }
  .ft-mandates-audiences { display: block; }
  .ft-dossier:last-child { border-top: 1px solid var(--border); border-left: 0; }
  .ft-dossier-intro { font-size: var(--fs-lede); }
  .ft-dossier-list { margin-top: 42px; }
  .ft-dossier-list li { grid-template-columns: 27px minmax(0, 1fr); padding-block: 18px 20px; }
  .ft-dossier-list p { font-size: var(--fs-label); }
  .ft-mandates-axis { margin-top: 8px; text-align: left; }

  .ft-mobile-product { min-height: max(820px, 108svh); padding: 124px 20px 0; }
  .ft-mobile-head { max-width: min(350px, 100%); }
  .ft-mobile-head h2 { top: clamp(332px, 39svh, 360px); right: 20px; left: 20px; font-size: var(--fs-display); }
  .ft-mobile-head__occluded { margin-left: 0; }
  .ft-mobile-head__tail { margin-left: clamp(0px, 8vw, 32px); }
  /* Em tela estreita o aparelho nao emerge cortado: vira bloco inteiro apos o CTA.
     A janela visivel do objeto emergente seria estreita demais para as cinco etapas
     da trajetoria com rotulos legiveis; inteiro, o mapa cumpre a promessa da copy. */
  .ft-phone { position: relative; inset: auto; margin: 56px auto 0; width: min(74vw, 300px); }
}

@media (min-width: 761px) and (max-width: 900px) {
  .ft-monitor-stage { top: 580px; height: calc(100% - 580px); }
  .ft-monitor { width: min(640px, 84vw); transform: rotateX(2.5deg) rotateZ(-1.25deg); }
  .ft-monitor-frame { border-radius: 24px; }
  .ft-monitor-screen { aspect-ratio: 16 / 10; border-radius: 16px; }
}

@media (max-width: 360px) {
  .ft-method-steps { grid-template-columns: 1fr; }
  .ft-hero-copy .btn-pill { width: 100%; min-height: 44px; padding-inline: 14px; }
  .ft-monitor-stage { top: 545px; height: calc(100% - 545px); }
  .ft-method-head h2,
  .ft-mobile-head h2,
  .ft-closing-copy h2 { font-size: var(--fs-h3); }
  .ft-closing-copy h2 { font-size: var(--fs-display); }
  .ft-mandates-head h2 { font-size: var(--fs-display); }
  .ft-insights-head h2 { font-size: var(--fs-h2); }
}

@media (prefers-reduced-motion: reduce) {
  .ft-monitor, .ft-phone { transform: none; }
  .gx-pulse { display: none; }
  .ft-mandate-cta span { transition: none; transform: none; }
  .ft-method-step, .ft-method-cta { transition: none; transform: none; }
  .ft-story > a,
  .ft-story__image,
  .ft-news-latest,
  .ft-report-card,
  .ft-report-card__media img { transition: none; transform: none; }
  .ft-story > a:hover,
  .ft-story > a:focus-visible,
  .ft-news-latest:hover,
  .ft-report-card:hover { transform: none; }
  .ft-links__node.is-pulsing { animation: none; }
  .ft-sequence-slot { color: var(--text-primary); transition: none; }
  .ft-sequence-slot:last-child { color: var(--signal); }
}
}

/* Posições dos gráficos demonstrativos — extraídas de style= inline. */
@layer experiences {
/* Régua de tempo (gx-ruler) — posições dos ticks */
.gx-ruler__i--10 { left: 10%; }
.gx-ruler__i--22 { left: 22%; }
.gx-ruler__i--34 { left: 34%; }
.gx-ruler__i--46 { left: 46%; }
.gx-ruler__i--58 { left: 58%; }
.gx-ruler__i--70 { left: 70%; }
.gx-ruler__i--82 { left: 82%; }
.gx-ruler__i--94 { left: 94%; }
.gx-ruler__span--10 { left: 10%; }
.gx-ruler__span--34 { left: 34%; }
.gx-ruler__span--58 { left: 58%; }
.gx-ruler__span--82 { left: 82%; }
.gx-ruler__dot--a-27 { left: 27%; }
.gx-ruler__dot--b-49 { left: 49%; }

/* Eixo Y do throughput (gx-thru__y) — posições do grid */
.gx-thru__y--106 { bottom: 106px; }
.gx-thru__y--82 { bottom: 82px; }
.gx-thru__y--58 { bottom: 58px; }
.gx-thru__y--34 { bottom: 34px; }

/* Barras do throughput (gx-bars-stack) — alturas dos segmentos */
.gx-bar-h--12 { height: 12px; }
.gx-bar-h--16 { height: 16px; }
.gx-bar-h--18 { height: 18px; }
.gx-bar-h--20 { height: 20px; }
.gx-bar-h--22 { height: 22px; }
.gx-bar-h--24 { height: 24px; }
.gx-bar-h--26 { height: 26px; }
.gx-bar-h--28 { height: 28px; }
.gx-bar-h--30 { height: 30px; }
.gx-bar-h--34 { height: 34px; }
.gx-bar-h--38 { height: 38px; }

/* Mini-chart do telefone (ft-mini-chart) — alturas relativas */
.ft-mini-chart__b--36 { --h: 36%; }
.ft-mini-chart__b--48 { --h: 48%; }
.ft-mini-chart__b--58 { --h: 58%; }
.ft-mini-chart__b--64 { --h: 64%; }
.ft-mini-chart__b--72 { --h: 72%; }
.ft-mini-chart__b--88 { --h: 88%; }
}

/* ==========================================================================
   30. Home — inversão do header sobre o papel da hero
   ========================================================================== */
@layer experiences {

body.home-corte {
  --gx-paper: #f1efe7;
  --gx-carbon: #151719;
  --gx-carbon-soft: #555b5c;
}

body.home-corte .site-header:not(.scrolled) .logo-wordmark {
  color: var(--gx-carbon);
}
body.home-corte .site-header:not(.scrolled) .site-nav:not(.open) .nav-link {
  color: rgba(21, 23, 25, .6);
}
body.home-corte .site-header:not(.scrolled) .site-nav:not(.open) .nav-link:hover,
body.home-corte .site-header:not(.scrolled) .site-nav:not(.open) .nav-link.active {
  color: var(--gx-carbon);
}
body.home-corte .site-header:not(.scrolled) .menu-toggle span {
  background: var(--gx-carbon);
}
body.home-corte .site-header:not(.scrolled) .header-cta .btn {
  border-color: var(--gx-carbon);
  background: var(--gx-carbon);
  color: var(--gx-paper);
  box-shadow: none;
}


}


@layer experiences {

/* --------------------------------------------------------------------------
   1. RAIZ — tokens locais, materia de papel, contexto de empilhamento
   -------------------------------------------------------------------------- */

.gx-hero[data-hero] {
  /* --- tokens locais (unicos literais de cor do componente) --- */
  --gx-paper: #F1EFE7;
  --gx-carbon: #151719;
  --gx-paper-rgb: 241 239 231;
  --gx-carbon-rgb: 21 23 25;
  --gx-warm-rgb: 255 250 236;
  --gx-ink-rgb: 7 8 12;                        /* espelha --ink-950 */
  --gx-signal: var(--rose-600, #E52E78);       /* 3.6:1 no papel — AA texto grande */
  --gx-signal-deep: var(--rose-700, #B5285F);  /* 5.2:1 — AA texto normal */
  --gx-signal-rgb: 229 46 120;

  /* --- materia gerada: ruido SVG inline, nenhum arquivo de imagem --- */
  --gx-noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)'/%3E%3C/svg%3E");
  --gx-noise-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013 0.019' numOctaves='3' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23s)'/%3E%3C/svg%3E");
  --gx-noise-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -0.15'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23m)'/%3E%3C/svg%3E");

  /* --- geometria --- */
  --gx-h: max(100svh, 720px);
  --gx-pad-t: clamp(120px, 15.5vh, 178px);
  --gx-pad-b: clamp(104px, 13vh, 150px);
  --gx-edge-l: max(var(--gutter, 32px), env(safe-area-inset-left, 0px));
  --gx-edge-r: max(var(--gutter, 32px), env(safe-area-inset-right, 0px));
  --gx-col: min(100%, 47rem);

  /* --- tipografia display --- */
  --gx-h1: clamp(3rem, 1.1rem + 6.6vw, 8.5rem);
  --gx-h1-lh: .915;
  --gx-h1-track: -.032em;

  /* --- ponto de convergencia do campo estatico --- */
  --gx-fx: 66%;
  --gx-fy: 45%;
  --gx-field-static: 1;

  /* --- coreografia --- */
  --gx-dur: .5s;
  --gx-ease-in: cubic-bezier(.19, .86, .16, 1);

  position: relative;
  display: block;
  isolation: isolate;
  overflow: clip;
  min-height: var(--gx-h);
  margin: 0;
  padding: 0;
  color: var(--gx-carbon);
  background-color: var(--gx-paper);
  background-image:
    radial-gradient(128% 92% at 12% -8%, rgb(var(--gx-warm-rgb) / .92) 0%, rgb(var(--gx-warm-rgb) / 0) 58%),
    linear-gradient(168deg, rgb(var(--gx-warm-rgb) / .55) 0%, rgb(var(--gx-paper-rgb) / 0) 46%);
  font-synthesis-weight: none;
}

/* --------------------------------------------------------------------------
   2. PLANO 0 — campo estatico em CSS (piso do canvas / fallback sem JS)
   Radar de convergencia: aneis + raios + nuvem de nos + ponto de sinal.
   -------------------------------------------------------------------------- */

.gx-hero[data-hero]::before,
.gx-hero[data-hero]::after,
.gx-hero[data-hero] .gx-hero__field::before,
.gx-hero[data-hero] .gx-hero__field::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gx-hero[data-hero]::before {
  z-index: 0;
  opacity: var(--gx-field-static);
  transition: opacity .9s var(--ease, cubic-bezier(.16, 1, .3, 1));
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 3.4px at var(--gx-fx) var(--gx-fy), rgb(var(--gx-signal-rgb) / .96) 0 58%, rgb(var(--gx-signal-rgb) / 0) 100%),
    radial-gradient(circle 190px at var(--gx-fx) var(--gx-fy), rgb(var(--gx-signal-rgb) / .085), rgb(var(--gx-signal-rgb) / 0) 68%),
    radial-gradient(circle 3px   at 79% 15%, rgb(var(--gx-carbon-rgb) / .5),  rgb(var(--gx-carbon-rgb) / 0) 72%),
    radial-gradient(circle 2px   at 87% 24%, rgb(var(--gx-carbon-rgb) / .34), rgb(var(--gx-carbon-rgb) / 0) 72%),
    radial-gradient(circle 4px   at 72% 27%, rgb(var(--gx-carbon-rgb) / .6),  rgb(var(--gx-carbon-rgb) / 0) 76%),
    radial-gradient(circle 2px   at 93% 36%, rgb(var(--gx-carbon-rgb) / .3),  rgb(var(--gx-carbon-rgb) / 0) 72%),
    radial-gradient(circle 3px   at 84% 62%, rgb(var(--gx-carbon-rgb) / .44), rgb(var(--gx-carbon-rgb) / 0) 74%),
    radial-gradient(circle 2.4px at 74% 76%, rgb(var(--gx-carbon-rgb) / .38), rgb(var(--gx-carbon-rgb) / 0) 74%),
    radial-gradient(circle 3.2px at 91% 84%, rgb(var(--gx-carbon-rgb) / .3),  rgb(var(--gx-carbon-rgb) / 0) 74%),
    radial-gradient(circle 2px   at 61% 88%, rgb(var(--gx-carbon-rgb) / .26), rgb(var(--gx-carbon-rgb) / 0) 74%),
    linear-gradient(rgb(var(--gx-carbon-rgb) / .42), rgb(var(--gx-carbon-rgb) / .42)),
    linear-gradient(rgb(var(--gx-carbon-rgb) / .3),  rgb(var(--gx-carbon-rgb) / .3)),
    linear-gradient(rgb(var(--gx-carbon-rgb) / .26), rgb(var(--gx-carbon-rgb) / .26)),
    repeating-conic-gradient(from 3deg at var(--gx-fx) var(--gx-fy),
      rgb(var(--gx-carbon-rgb) / .085) 0deg .16deg, rgb(var(--gx-carbon-rgb) / 0) .16deg 22.5deg),
    repeating-radial-gradient(circle at var(--gx-fx) var(--gx-fy),
      rgb(var(--gx-carbon-rgb) / 0) 0 77px, rgb(var(--gx-carbon-rgb) / .055) 77px 78px);
  background-size:
    auto, auto,
    auto, auto, auto, auto, auto, auto, auto, auto,
    6px 6px, 5px 5px, 4px 4px,
    auto, auto;
  background-position:
    0 0, 0 0,
    0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
    82% 20%, 89% 52%, 68% 70%,
    0 0, 0 0;
  -webkit-mask-image: radial-gradient(84% 96% at var(--gx-fx) var(--gx-fy), #000 6%, rgb(0 0 0 / .6) 50%, rgb(0 0 0 / 0) 90%);
  mask-image: radial-gradient(84% 96% at var(--gx-fx) var(--gx-fy), #000 6%, rgb(0 0 0 / .6) 50%, rgb(0 0 0 / 0) 90%);
}

/* --------------------------------------------------------------------------
   3. CAMADA DE CAMPO — canvas, luz, grao, borda.
   .gx-hero__field NAO cria contexto de empilhamento (z-index: auto), para que
   os filhos com mix-blend-mode misturem com o papel da propria .gx-hero.
   -------------------------------------------------------------------------- */

.gx-hero[data-hero] .gx-hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(0, calc(var(--gx-exit) * -2.2%), 0) scale(calc(1 + var(--gx-exit) * .022));
  transform-origin: var(--gx-fx) var(--gx-fy);
}

.gx-hero[data-hero] .gx-hero__canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* --- plano 2: veu de papel que protege a legibilidade do texto --- */
.gx-hero[data-hero] .gx-hero__light {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image: linear-gradient(96deg,
    rgb(var(--gx-paper-rgb) / .62) 0%,
    rgb(var(--gx-paper-rgb) / .48) 12%,
    rgb(var(--gx-paper-rgb) / .26) 22%,
    rgb(var(--gx-paper-rgb) / .08) 31%,
    rgb(var(--gx-paper-rgb) / 0)   39%);
}

/* especular que segue o ponteiro — composta, sem repaint de gradiente */
.gx-hero[data-hero] .gx-hero__light::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 52vmax;
  height: 52vmax;
  border-radius: 50%;
  mix-blend-mode: soft-light;
  opacity: .85;
  background: radial-gradient(circle at 50% 50%,
    rgb(var(--gx-warm-rgb) / .95) 0%, rgb(var(--gx-warm-rgb) / .38) 34%, rgb(var(--gx-warm-rgb) / 0) 70%);
  transform: translate3d(calc(var(--gx-pxpx, 60vw) - 50%), calc(var(--gx-pypx, 34vh) - 50%), 0);
}

/* --- plano 3: luz — vinheta assimetrica quente, foco em cima-esquerda --- */
.gx-hero[data-hero] .gx-hero__field::before {
  z-index: 3;
  background-image:
    radial-gradient(112% 88% at 10% -12%, rgb(var(--gx-warm-rgb) / .9) 0%, rgb(var(--gx-warm-rgb) / .3) 26%, rgb(var(--gx-warm-rgb) / 0) 54%),
    radial-gradient(72% 64% at 108% -14%, rgb(var(--gx-carbon-rgb) / .085), rgb(var(--gx-carbon-rgb) / 0) 62%),
    radial-gradient(96% 84% at 100% 112%, rgb(var(--gx-carbon-rgb) / .055), rgb(var(--gx-carbon-rgb) / 0) 60%),
    radial-gradient(70% 70% at -12% 116%, rgb(var(--gx-carbon-rgb) / .08),  rgb(var(--gx-carbon-rgb) / 0) 62%),
    linear-gradient(197deg, rgb(var(--gx-carbon-rgb) / 0) 44%, rgb(var(--gx-carbon-rgb) / .022) 100%);
}

/* --- plano 4: verge — fios e pontusais, multiply levissimo --- */
.gx-hero[data-hero] .gx-hero__field::after {
  z-index: 4;
  mix-blend-mode: multiply;
  opacity: .55;
  background-image:
    repeating-linear-gradient(90deg, rgb(var(--gx-carbon-rgb) / .055) 0 .6px, rgb(var(--gx-carbon-rgb) / 0) .6px 4px),
    repeating-linear-gradient(0deg,  rgb(var(--gx-carbon-rgb) / .045) 0 .8px, rgb(var(--gx-carbon-rgb) / 0) .8px 29px);
}

/* --- plano 5: grao gerado --- */
.gx-hero[data-hero] .gx-hero__grain {
  position: absolute;
  z-index: 5;
  inset: -260px;
  mix-blend-mode: multiply;
  opacity: calc(var(--gx-grain) * .17);
  background-image: var(--gx-noise-fine);
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* mancha de nuvem — irregularidade de gramatura */
.gx-hero[data-hero] .gx-hero__grain::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  opacity: calc(var(--gx-grain) * .45);
  background-image: var(--gx-noise-soft);
  background-size: 420px 420px;
  background-repeat: repeat;
}

/* --- plano 6: borda inferior — transicao de materia, nao 1px solid --- */
.gx-hero[data-hero] .gx-hero__edge {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(90deg,
      rgb(var(--gx-carbon-rgb) / 0) 0%, rgb(var(--gx-carbon-rgb) / .17) 14%,
      rgb(var(--gx-carbon-rgb) / .1) 58%, rgb(var(--gx-carbon-rgb) / 0) 96%),
    linear-gradient(to bottom,
      rgb(var(--gx-ink-rgb) / 0) 0 62%, rgb(var(--gx-ink-rgb) / .012) 80%,
      rgb(var(--gx-ink-rgb) / .03) 92%, rgb(var(--gx-ink-rgb) / .055) 100%);
  background-size: 100% 1px, 100% 100%;
  background-position: bottom left, top left;
}

/* dissolucao granulada do papel para o near-black da proxima secao */
.gx-hero[data-hero] .gx-hero__edge::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(110px, 16svh, 220px);
  background: rgb(var(--gx-ink-rgb));
  opacity: calc(.05 + var(--gx-exit) * .88);
  -webkit-mask-image: var(--gx-noise-mask), linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .4) 62%, #000 100%);
  mask-image: var(--gx-noise-mask), linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .4) 62%, #000 100%);
  -webkit-mask-size: 240px 240px, 100% 100%;
  mask-size: 240px 240px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* --- plano 8: entrega do near-black no scroll de saida --- */
.gx-hero[data-hero]::after {
  z-index: 8;
  background: rgb(var(--gx-ink-rgb));
  opacity: calc(var(--gx-exit) * .94);
}

/* --------------------------------------------------------------------------
   4. LAYOUT DE CONTEUDO
   -------------------------------------------------------------------------- */

.gx-hero[data-hero] .gx-hero__layout {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: stretch;
  width: min(100%, var(--content-wide, 1600px));
  min-height: var(--gx-h);
  margin-inline: auto;
  padding-block: var(--gx-pad-t) var(--gx-pad-b);
  padding-left: var(--gx-edge-l);
  padding-right: var(--gx-edge-r);
}

.gx-hero[data-hero] .gx-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--gx-col);
  transform: translate3d(0, calc(var(--gx-exit) * -38px), 0);
  opacity: clamp(0, calc(1.04 - var(--gx-exit) * 1.14), 1);
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFIA
   -------------------------------------------------------------------------- */

/* --- eyebrow --- */
.gx-hero[data-hero] .gx-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 16px);
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .195em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--gx-carbon-rgb) / .68);
}

.gx-hero[data-hero] .gx-hero__eyebrow span {
  margin-right: -.195em; /* compensa o tracking a direita */
  white-space: nowrap;
}

.gx-hero[data-hero] .gx-hero__eyebrow span:last-child {
  color: rgb(var(--gx-carbon-rgb) / .62);
}

/* D-026: a string travada ocupa o eyebrow inteiro; mantem o tom forte */
.gx-hero[data-hero] .gx-hero__eyebrow span:only-child {
  color: rgb(var(--gx-carbon-rgb) / .68);
}

.gx-hero[data-hero] .gx-hero__eyebrow i {
  flex: none;
  width: clamp(26px, 3.2vw, 46px);
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--gx-carbon-rgb) / .42), rgb(var(--gx-carbon-rgb) / 0));
  transform-origin: left center;
  transform: scaleX(clamp(0, calc((var(--gx-intro) - .04) * 6), 1));
}

/* --- H1 display --- */
.gx-hero[data-hero] .gx-hero__title {
  margin: clamp(22px, 2.8vh, 36px) 0 0 -.04em; /* -.04em: alinhamento optico da haste do E */
  font-family: var(--font-sans, sans-serif);
  font-size: var(--gx-h1);
  font-weight: 700;
  line-height: var(--gx-h1-lh);
  letter-spacing: var(--gx-h1-track);
  text-wrap: balance;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  color: var(--gx-carbon);
}

.gx-hero[data-hero] .gx-hero__line {
  display: block;
  overflow: hidden;
  /* padding + margem negativa identica: mascara folgada, texto no mesmo lugar */
  padding: .17em .09em .23em;
  margin: -.17em -.09em -.23em;
}

.gx-hero[data-hero] .gx-hero__line-i {
  display: block;
  white-space: nowrap;
  transform-origin: left bottom;
  animation-name: gx-hero-line-in;
  animation-duration: var(--gx-dur);
  animation-timing-function: var(--gx-ease-in);
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: calc((var(--gx-d, 0) - var(--gx-intro)) * 1s);
}

.gx-hero[data-hero] .gx-hero__line-i[data-hero-line="0"] { --gx-d: .08; }
.gx-hero[data-hero] .gx-hero__line-i[data-hero-line="1"] { --gx-d: .155; }
.gx-hero[data-hero] .gx-hero__line-i[data-hero-line="2"] { --gx-d: .23; }

/* a unica quebra de voz: STIX Two Text italico, rosa */
.gx-hero[data-hero] .gx-hero__title em {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--gx-h1);          /* trava na mesma escada do H1 */
  line-height: .836;       /* 1.1 * .836 = .92em -> mesma caixa de linha */
  letter-spacing: -.014em;
  color: var(--gx-signal);
  padding-right: .045em;   /* sidebearing do italico */
  margin-right: -.02em;
}

/* --- lede --- */
.gx-hero[data-hero] .gx-hero__lede {
  max-width: 34rem;
  margin: clamp(20px, 2.7vh, 34px) 0 0;
  font-family: var(--font-sans, sans-serif);
  font-size: var(--fs-h6);
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: -.006em;
  text-wrap: pretty;
  color: rgb(var(--gx-carbon-rgb) / .72);
}

/* --------------------------------------------------------------------------
   6. ACOES
   -------------------------------------------------------------------------- */

.gx-hero[data-hero] .gx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  margin-top: clamp(28px, 4vh, 46px);
}

/* --- primario: carbon solido, hover de materia --- */
.gx-hero[data-hero] .gx-hero__cta {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 clamp(20px, 1.7vw, 28px);
  border-radius: 2px;
  font-family: var(--font-sans, sans-serif);
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .004em;
  text-decoration: none;
  color: var(--gx-paper);
  background-color: var(--gx-carbon);
  box-shadow:
    0 1px 0 rgb(var(--gx-carbon-rgb) / .5),
    0 14px 30px -20px rgb(var(--gx-carbon-rgb) / .8);
  transform: translate3d(var(--gx-magnet-x), var(--gx-magnet-y), 0);
  transition:
    transform 260ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1)),
    box-shadow 420ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

/* materia que sobe por dentro: grao + tooth de papel, nao troca de cor */
.gx-hero[data-hero] .gx-hero__cta::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px;
  opacity: 0;
  transform: translate3d(0, 38%, 0);
  background-image:
    var(--gx-noise-fine),
    linear-gradient(to top,
      rgb(var(--gx-paper-rgb) / .2) 0%, rgb(var(--gx-paper-rgb) / .06) 44%, rgb(var(--gx-paper-rgb) / 0) 80%);
  background-size: 200px 200px, 100% 100%;
  transition:
    opacity 420ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1)),
    transform 640ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

/* fio de sinal que acende na base */
.gx-hero[data-hero] .gx-hero__cta::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto 0 0 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gx-signal) 0%, rgb(var(--gx-signal-rgb) / .18) 100%);
  transition: transform 560ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
  transform: scaleX(1);
  transform-origin: left center;
}

.gx-hero[data-hero] .gx-hero__cta:hover::before,
.gx-hero[data-hero] .gx-hero__cta:focus-visible::before { opacity: 1; transform: none; }

.gx-hero[data-hero] .gx-hero__cta:hover::after,
.gx-hero[data-hero] .gx-hero__cta:focus-visible::after { transform: scaleX(1); }

.gx-hero[data-hero] .gx-hero__cta:hover {
  box-shadow:
    0 1px 0 rgb(var(--gx-carbon-rgb) / .5),
    0 22px 44px -22px rgb(var(--gx-carbon-rgb) / .95);
}

.gx-hero[data-hero] .gx-hero__cta > span { position: relative; }

.gx-hero[data-hero] .gx-hero__cta-arrow {
  flex: none;
  transition: transform 480ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

.gx-hero[data-hero] .gx-hero__cta:hover .gx-hero__cta-arrow,
.gx-hero[data-hero] .gx-hero__cta:focus-visible .gx-hero__cta-arrow {
  transform: translate3d(3px, -3px, 0);
}

/* --- secundario: sublinhado que se comporta --- */
.gx-hero[data-hero] .gx-hero__secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 1px;
  font-family: var(--font-sans, sans-serif);
  font-size: var(--fs-lede);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: var(--gx-carbon);
  border: 0;             /* neutraliza o border-bottom do bloco legado */
  background: none;
  transform: translate3d(var(--gx-magnet-x), var(--gx-magnet-y), 0);
  transition: transform 260ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

.gx-hero[data-hero] .gx-hero__secondary::after {
  content: '';
  position: absolute;
  inset: auto 0 10px 0;
  height: 1px;
  background: currentColor;
  opacity: .3;
  transform: scaleX(1);
  transform-origin: left center;
  transition: opacity 300ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

.gx-hero[data-hero] .gx-hero__secondary:hover::after,
.gx-hero[data-hero] .gx-hero__secondary:focus-visible::after {
  opacity: .85;
  animation: gx-hero-underline .66s var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

/* mesma seta da CTA primaria, um grau mais leve: as duas acoes da hero
   passam a falar o mesmo gesto de avanco */
.gx-hero[data-hero] .gx-hero__secondary-arrow {
  flex: none;
  margin-bottom: 1px;
  transition: transform 480ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

.gx-hero[data-hero] .gx-hero__secondary:hover .gx-hero__secondary-arrow,
.gx-hero[data-hero] .gx-hero__secondary:focus-visible .gx-hero__secondary-arrow {
  transform: translate3d(3px, -3px, 0);
}

/* --- foco WCAG 2.2 (2.4.11): 2px, contraste alto, nunca suprimido --- */
.gx-hero[data-hero] .gx-hero__cta:focus-visible,
.gx-hero[data-hero] .gx-hero__secondary:focus-visible,
.gx-hero[data-hero] .gx-hero__cue:focus-visible {
  outline: 2px solid var(--gx-carbon);
  outline-offset: 4px;
  border-radius: 2px;
}

.gx-hero[data-hero] .gx-hero__cta:focus-visible {
  box-shadow:
    0 0 0 2px rgb(var(--gx-paper-rgb) / 1),
    inset 0 0 0 2px rgb(var(--gx-signal-rgb) / .95),
    0 22px 44px -22px rgb(var(--gx-carbon-rgb) / .95);
}

/* --------------------------------------------------------------------------
   7. LEGENDA DOS QUATRO SINAIS — glifos em CSS, alinhados opticamente
   -------------------------------------------------------------------------- */

.gx-hero[data-hero] .gx-hero__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(18px, 2vw, 30px);
  margin: clamp(28px, 3.8vh, 46px) 0 0;
  padding: 0;
  list-style: none;
}

.gx-hero[data-hero] .gx-hero__legend li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .165em;
  text-transform: uppercase;
  color: rgb(var(--gx-carbon-rgb) / .68);
  transition: color 260ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

.gx-hero[data-hero] .gx-hero__legend li:hover { color: rgb(var(--gx-carbon-rgb) / .88); }

.gx-hero[data-hero] .gx-hero__legend i {
  position: relative;
  flex: none;
  display: block;
  /* margem inferior em caixa flex centrada = sobe metade -> alinha na altura-x */
  margin-bottom: .16em;
  border: 1.4px solid rgb(var(--gx-carbon-rgb) / .62);
  transition: border-color 260ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

.gx-hero[data-hero] .gx-hero__legend li:hover i { border-color: var(--gx-carbon); }

.gx-hero[data-hero] .gx-hero__legend li[data-signal="ciencia"] i    { width: 9px; height: 9px; border-radius: 50%; }
.gx-hero[data-hero] .gx-hero__legend li[data-signal="regulacao"] i  { width: 8px; height: 8px; }
.gx-hero[data-hero] .gx-hero__legend li[data-signal="competicao"] i { width: 7px; height: 7px; transform: rotate(45deg); }
.gx-hero[data-hero] .gx-hero__legend li[data-signal="capital"] i    { width: 10px; height: 10px; border: 0; }

.gx-hero[data-hero] .gx-hero__legend li[data-signal="capital"] i::before,
.gx-hero[data-hero] .gx-hero__legend li[data-signal="capital"] i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.4px;
  margin-top: -.7px;
  background: rgb(var(--gx-carbon-rgb) / .62);
  transition: background-color 260ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

.gx-hero[data-hero] .gx-hero__legend li[data-signal="capital"] i::after { transform: rotate(90deg); }

.gx-hero[data-hero] .gx-hero__legend li[data-signal="capital"]:hover i::before,
.gx-hero[data-hero] .gx-hero__legend li[data-signal="capital"]:hover i::after { background: var(--gx-carbon); }

/* --------------------------------------------------------------------------
   8. CUE DE SCROLL
   -------------------------------------------------------------------------- */

.gx-hero[data-hero] .gx-hero__cue {
  position: absolute;
  right: var(--gx-edge-r);
  bottom: calc(clamp(26px, 4vh, 48px) + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 26px;
  padding: 2px 1px;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .21em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(var(--gx-carbon-rgb) / .98);
  opacity: clamp(0, calc(1.02 - var(--gx-exit) * 1.6), 1);
  transition: color 260ms var(--ease-kit, cubic-bezier(.2, .8, .2, 1));
}

.gx-hero[data-hero] .gx-hero__cue:hover { color: rgb(var(--gx-carbon-rgb) / .82); }
.gx-hero[data-hero] .gx-hero__cue span { margin-right: -.21em; }

.gx-hero[data-hero] .gx-hero__cue i {
  position: relative;
  flex: none;
  display: block;
  overflow: hidden;
  width: clamp(48px, 5.4vw, 84px);
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--gx-carbon-rgb) / .1), rgb(var(--gx-carbon-rgb) / .55));
}

.gx-hero[data-hero] .gx-hero__cue i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 26px;
  opacity: 0;
  background: linear-gradient(90deg, rgb(var(--gx-paper-rgb) / 0), rgb(var(--gx-paper-rgb) / .95), rgb(var(--gx-paper-rgb) / 0));
  transform: translate3d(-30px, 0, 0);
}

/* --------------------------------------------------------------------------
   9. COREOGRAFIA DE ENTRADA
   Scrubbing por delay negativo em animacao pausada: mantem o easing real das
   keyframes e e 100% dirigido por --gx-intro. Sem JS, --gx-intro = 1 e tudo
   repousa na composicao final. Nada fica preso em opacity: 0 -> sem CLS.
   -------------------------------------------------------------------------- */

@keyframes gx-hero-line-in {
  from { transform: translate3d(0, 1.34em, 0); opacity: 0; filter: blur(8px); }
  60%  { opacity: 1; }
  to   { transform: translate3d(0, 0, 0);      opacity: 1; filter: blur(0);   }
}

@keyframes gx-hero-block-in {
  from { transform: translate3d(0, 16px, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0);    opacity: 1; }
}

@keyframes gx-hero-underline {
  0%   { transform: scaleX(1); transform-origin: right center; }
  46%  { transform: scaleX(0); transform-origin: right center; }
  47%  { transform: scaleX(0); transform-origin: left center;  }
  100% { transform: scaleX(1); transform-origin: left center;  }
}

@keyframes gx-hero-grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-37px, 21px, 0); }
  40%  { transform: translate3d(23px, -43px, 0); }
  60%  { transform: translate3d(-61px, -19px, 0); }
  80%  { transform: translate3d(47px, 33px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes gx-hero-cue {
  0%, 12% { transform: translate3d(-30px, 0, 0); opacity: 0; }
  30%     { opacity: .95; }
  100%    { transform: translate3d(100px, 0, 0); opacity: 0; }
}

.gx-hero[data-hero] [data-hero-reveal] {
  animation-name: gx-hero-block-in;
  animation-duration: var(--gx-dur);
  animation-timing-function: var(--gx-ease-in);
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: calc((var(--gx-d, 0) - var(--gx-intro)) * 1s);
}

.gx-hero[data-hero] [data-hero-reveal="0"] { --gx-d: .02; }
.gx-hero[data-hero] [data-hero-reveal="3"] { --gx-d: .31; }
.gx-hero[data-hero] [data-hero-reveal="4"] { --gx-d: .37; }
.gx-hero[data-hero] [data-hero-reveal="5"] { --gx-d: .43; }
.gx-hero[data-hero] [data-hero-reveal="6"] { --gx-d: .49; }

/* --------------------------------------------------------------------------
   10. ESTADOS — so `full` anima. Todos os outros: parados e completos.
   -------------------------------------------------------------------------- */

/* qualquer estado nao-full trava a coreografia na composicao final,
   mesmo que o JS tenha escrito inline um --gx-intro menor */
.gx-hero[data-hero]:not([data-hero-state="full"]) {
  --gx-intro: 1 !important;
  --gx-grain: 1 !important;
}

.gx-hero[data-hero][data-hero-state="pending"],
.gx-hero[data-hero][data-hero-state="reduced"],
.gx-hero[data-hero][data-hero-state="save-data"],
.gx-hero[data-hero][data-hero-state="static"],
.gx-hero[data-hero][data-hero-state="paused"] {
  --gx-exit: 0 !important;
}

/* campo estatico: piso completo quando o canvas nao pinta */
.gx-hero[data-hero][data-hero-state="full"],
.gx-hero[data-hero][data-hero-state="coarse"] {
  --gx-field-static: .34;
}

/* grao vivo e will-change apenas em `full` */
.gx-hero[data-hero][data-hero-state="full"] .gx-hero__grain {
  animation: gx-hero-grain 1.05s steps(1, end) infinite;
  will-change: transform;
}

.gx-hero[data-hero][data-hero-state="full"] .gx-hero__line-i,
.gx-hero[data-hero][data-hero-state="full"] [data-hero-reveal] {
  will-change: transform, opacity, filter;
}

.gx-hero[data-hero][data-hero-state="full"] .gx-hero__field,
.gx-hero[data-hero][data-hero-state="full"] .gx-hero__inner {
  will-change: transform, opacity;
}

.gx-hero[data-hero][data-hero-state="full"] .gx-hero__cue i::after {
  animation: gx-hero-cue 3.1s var(--ease-kit, cubic-bezier(.2, .8, .2, 1)) 1.6s infinite;
}

/* especular do ponteiro: so onde ha ponteiro fino e orcamento */
.gx-hero[data-hero]:not([data-hero-state="full"]) .gx-hero__light::after { display: none; }

/* save-data / static: menos camadas de blend, mesma composicao */
.gx-hero[data-hero][data-hero-state="save-data"] .gx-hero__grain::after,
.gx-hero[data-hero][data-hero-state="static"] .gx-hero__grain::after {
  opacity: calc(var(--gx-grain) * .3);
}

/* paused: congela tudo; a composicao ja e a final */
.gx-hero[data-hero][data-hero-state="paused"] *,
.gx-hero[data-hero][data-hero-state="paused"] *::before,
.gx-hero[data-hero][data-hero-state="paused"] *::after {
  animation-play-state: paused !important;
}

/* rede de seguranca independente do JS */
@media (prefers-reduced-motion: reduce) {
  .gx-hero[data-hero] {
    --gx-intro: 1 !important;
    --gx-grain: 1 !important;
    --gx-exit: 0 !important;
  }
  .gx-hero[data-hero] .gx-hero__grain,
  .gx-hero[data-hero] .gx-hero__cue i::after,
  .gx-hero[data-hero] .gx-hero__secondary:hover::after { animation: none !important; }
  .gx-hero[data-hero] .gx-hero__light::after { display: none; }
  .gx-hero[data-hero] *,
  .gx-hero[data-hero] *::before,
  .gx-hero[data-hero] *::after { transition-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   11. RESPONSIVO
   -------------------------------------------------------------------------- */

/* >=1600: o campo respira mais a direita */
@media (min-width: 1600px) {
  .gx-hero[data-hero] { --gx-col: min(100%, 52rem); --gx-fx: 68%; }
}

@media (max-width: 1280px) {
  .gx-hero[data-hero] {
    --gx-col: min(100%, 42rem);
    --gx-h1-track: -.03em;
    --gx-fx: 70%;
  }
  .gx-hero[data-hero] .gx-hero__light {
    background-image: linear-gradient(96deg,
      rgb(var(--gx-paper-rgb) / 1) 0%, rgb(var(--gx-paper-rgb) / .99) 26%,
      rgb(var(--gx-paper-rgb) / .9) 40%, rgb(var(--gx-paper-rgb) / .5) 54%,
      rgb(var(--gx-paper-rgb) / .16) 66%, rgb(var(--gx-paper-rgb) / 0) 78%);
  }
}

@media (max-width: 1024px) {
  .gx-hero[data-hero] { --gx-col: min(100%, 38rem); }
  .gx-hero[data-hero] .gx-hero__lede { max-width: 31rem; }
}

/* --- MOBILE / TABLET RETRATO: muda de eixo.
   O campo sobe para tras e acima; o texto ancora embaixo e toma a largura. --- */
@media (max-width: 860px) {
  .gx-hero[data-hero] {
    --gx-h: max(100svh, 640px);
    --gx-pad-t: calc(clamp(96px, 13svh, 132px) + env(safe-area-inset-top, 0px));
    --gx-pad-b: calc(clamp(84px, 11svh, 112px) + env(safe-area-inset-bottom, 0px));
    --gx-col: 100%;
    --gx-h1: clamp(2.85rem, 1.05rem + 8.4vw, 4.6rem);
    --gx-h1-lh: .95;
    --gx-h1-track: -.026em;
    --gx-fx: 72%;
    --gx-fy: 19%;
  }

  .gx-hero[data-hero] .gx-hero__layout { align-content: end; }
  .gx-hero[data-hero] .gx-hero__inner { width: 100%; }

  /* veu vertical: campo visivel no terco superior, papel cheio embaixo */
  .gx-hero[data-hero] .gx-hero__light {
    background-image: linear-gradient(184deg,
      rgb(var(--gx-paper-rgb) / 0)   0%,
      rgb(var(--gx-paper-rgb) / .12) 13%,
      rgb(var(--gx-paper-rgb) / .58) 24%,
      rgb(var(--gx-paper-rgb) / .92) 33%,
      rgb(var(--gx-paper-rgb) / 1)   42%);
  }

  .gx-hero[data-hero]::before {
    -webkit-mask-image: radial-gradient(120% 62% at var(--gx-fx) var(--gx-fy), #000 4%, rgb(0 0 0 / .55) 44%, rgb(0 0 0 / 0) 86%);
    mask-image: radial-gradient(120% 62% at var(--gx-fx) var(--gx-fy), #000 4%, rgb(0 0 0 / .55) 44%, rgb(0 0 0 / 0) 86%);
  }

  .gx-hero[data-hero] .gx-hero__field::before {
    background-image:
      radial-gradient(96% 52% at 6% -6%, rgb(var(--gx-warm-rgb) / .85) 0%, rgb(var(--gx-warm-rgb) / 0) 62%),
      radial-gradient(90% 44% at 104% 106%, rgb(var(--gx-carbon-rgb) / .12), rgb(var(--gx-carbon-rgb) / 0) 62%),
      linear-gradient(190deg, rgb(var(--gx-carbon-rgb) / 0) 52%, rgb(var(--gx-carbon-rgb) / .05) 100%);
  }

  .gx-hero[data-hero] .gx-hero__lede {
    max-width: 30rem;
    font-size: var(--fs-h6);
    line-height: 1.58;
  }

  .gx-hero[data-hero] .gx-hero__actions {
    gap: 14px 22px;
    margin-top: clamp(24px, 3.4svh, 34px);
  }

  .gx-hero[data-hero] .gx-hero__cta { min-height: 52px; flex: 0 0 auto; }
  .gx-hero[data-hero] .gx-hero__legend { gap: 11px 20px; margin-top: clamp(24px, 3.2svh, 36px); }

  .gx-hero[data-hero] .gx-hero__cue {
    right: auto;
    left: var(--gx-edge-l);
    bottom: calc(clamp(24px, 3.4svh, 38px) + env(safe-area-inset-bottom, 0px));
  }
}

/* --- 430 e abaixo --- */
@media (max-width: 460px) {
  .gx-hero[data-hero] {
    --gx-h1: clamp(3.1rem, 1.15rem + 11.3vw, 3.8rem);
    --gx-h1-lh: .96;
    --gx-h1-track: -.022em;
    --gx-pad-t: calc(clamp(84px, 12svh, 112px) + env(safe-area-inset-top, 0px));
  }
  .gx-hero[data-hero] .gx-hero__eyebrow { gap: 9px; font-size: var(--fs-micro); letter-spacing: .17em; }
  .gx-hero[data-hero] .gx-hero__eyebrow span { margin-right: -.17em; }
  .gx-hero[data-hero] .gx-hero__eyebrow i { width: 22px; }
  .gx-hero[data-hero] .gx-hero__title { margin-top: clamp(16px, 2.2svh, 24px); }
  .gx-hero[data-hero] .gx-hero__lede { margin-top: 18px; font-size: var(--fs-h6); line-height: 1.55; }
  /* grade 2x2: alinha os quatro glifos em colunas em vez de quebrar 3+1 */
  .gx-hero[data-hero] .gx-hero__legend {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 12px 18px;
  }
  .gx-hero[data-hero] .gx-hero__legend li { letter-spacing: .14em; }
}

/* --- 360: o menor alvo suportado --- */
@media (max-width: 372px) {
  .gx-hero[data-hero] { --gx-h1: 3.15rem; }
  .gx-hero[data-hero] .gx-hero__actions { gap: 12px 18px; }
  .gx-hero[data-hero] .gx-hero__cta { padding: 0 18px; }
}

/* --- paisagem baixa (ex.: 900x500): comprime sem quebrar --- */
@media (orientation: landscape) and (max-height: 640px) and (min-width: 700px) {
  .gx-hero[data-hero] {
    --gx-h: 100svh;
    --gx-pad-t: calc(78px + env(safe-area-inset-top, 0px));
    --gx-pad-b: calc(44px + env(safe-area-inset-bottom, 0px));
    --gx-h1: clamp(2.3rem, 9vh, 3.6rem);
    --gx-h1-lh: .94;
    --gx-col: min(100%, 34rem);
    --gx-fy: 46%;
  }
  .gx-hero[data-hero] .gx-hero__title { margin-top: clamp(12px, 2vh, 18px); }
  .gx-hero[data-hero] .gx-hero__lede {
    max-width: 28rem;
    margin-top: clamp(12px, 2vh, 18px);
    font-size: var(--fs-copy);
    line-height: 1.5;
  }
  .gx-hero[data-hero] .gx-hero__actions { margin-top: clamp(16px, 3vh, 24px); }
  .gx-hero[data-hero] .gx-hero__cta { min-height: 46px; }
  .gx-hero[data-hero] .gx-hero__secondary { min-height: 40px; }
  .gx-hero[data-hero] .gx-hero__legend { margin-top: clamp(14px, 2.6vh, 22px); gap: 8px 20px; }
  .gx-hero[data-hero] .gx-hero__cue { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* --- paisagem baixa em telefone --- */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 560px) {
  .gx-hero[data-hero] {
    --gx-h: 100svh;
    --gx-pad-t: calc(72px + env(safe-area-inset-top, 0px));
    --gx-pad-b: calc(38px + env(safe-area-inset-bottom, 0px));
    --gx-h1: clamp(2rem, 9.4vh, 2.9rem);
    --gx-col: min(100%, 32rem);
  }
  .gx-hero[data-hero] .gx-hero__layout { align-content: center; }
  .gx-hero[data-hero] .gx-hero__lede { max-width: 26rem; font-size: var(--fs-lede); }
}

/* --- toque grosso: alvos >= 24px garantidos (WCAG 2.2 / 2.5.8) --- */
@media (pointer: coarse) {
  .gx-hero[data-hero] .gx-hero__cue { min-height: 32px; padding-block: 6px; }
  .gx-hero[data-hero] .gx-hero__secondary { min-height: 46px; }
}

/* --- alto contraste forcado --- */
@media (forced-colors: active) {
  .gx-hero[data-hero]::before,
  .gx-hero[data-hero] .gx-hero__grain,
  .gx-hero[data-hero] .gx-hero__light,
  .gx-hero[data-hero] .gx-hero__field::before,
  .gx-hero[data-hero] .gx-hero__field::after { display: none; }
  .gx-hero[data-hero] .gx-hero__cta { border: 1px solid; forced-color-adjust: none; }
}

}

/* --- Grafo de convergencia -------------------------------------------------
   Dispositivo proprio desta cena: um sistema de forcas que se acomoda. Nao
   repete o campo generativo da hero, nem o scramble, nem a trajetoria do
   metodo, nem as galaxias. Fundo transparente: o ground continuo vive no
   .ft-home e nao pode ser interrompido aqui. */
.ft-graph {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vh, 56px);
  justify-content: center;
  padding: clamp(96px, 12vh, 150px) var(--gutter) clamp(80px, 10vh, 130px);
}
.ft-graph-head { max-width: 46ch; }
.ft-graph-head h2 {
  margin: clamp(16px, 2vh, 26px) 0 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.ft-graph-head p {
  max-width: 44ch;
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-copy);
  line-height: 1.62;
}
.ft-graph-stage {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 74vh, 820px);
}
.ft-graph-canvas {
  display: block;
  width: 100%;
  height: clamp(520px, 74vh, 820px);
}

/* O fallback so aparece quando o canvas nao pintou: sem JS, ou script bloqueado.
   O canvas ganha o atributo data-grafo-estado ao montar. */
.ft-graph-disciplines {
  display: grid;
  gap: 18px;
  padding-top: 8px;
}
.ft-graph-disciplines dl {
  display: grid;
  grid-template-columns: minmax(0, 14ch) minmax(0, 1fr);
  gap: 10px clamp(16px, 2vw, 34px);
  margin: 0;
}
.ft-graph-disciplines dt {
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-weight: 500;
}
.ft-graph-disciplines dd {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .ft-graph { padding-top: clamp(72px, 9vh, 104px); }
  .ft-graph-stage,
  .ft-graph-canvas { min-height: 460px; height: 460px; }
  .ft-graph-disciplines dl { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .ft-graph-disciplines dd { margin-bottom: 12px; }
}

/* >>> WS-041 nucleo GennomX AI — janela de largura total (inicio) */
/* ==========================================================================
   GennomX — Redesign Núcleo (.ft-core) da Cena #insights
   Widescreen full-bleed, overlay tipográfico sem caixas, zero ruído.
   ========================================================================== */

#insights .ft-core {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

#insights .ft-core * {
  font-style: normal;
}

#insights .ft-core-stage {
  position: relative;
  width: 100%;
  display: block;
}

#insights .ft-core-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#insights .ft-core-viewport::before,
#insights .ft-core-viewport::after {
  content: none;
  display: none;
}

#insights .ft-core-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

#insights .ft-core-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(116% 90% at 50% 42%, rgba(4, 5, 11, 0) 36%, rgba(4, 5, 11, 0.7) 74%, #04050b 100%);
}

/* Brand e Título (Top-Left) */
#insights .ft-core-brand {
  position: absolute;
  top: clamp(32px, 4.4vw, 60px);
  left: clamp(32px, 5vw, 84px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 14px);
  margin: 0;
  padding: 0;
  max-width: min(90vw, 440px);
  pointer-events: auto;
}

#insights .ft-insights-instrument {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-faint, #7a8398);
  font-family: var(--font-mono);
  font-size: var(--fs-micro, 0.58rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

#insights .ft-core-brand h3,
#insights #insights-ai-heading {
  margin: 0;
  padding: 0;
  color: var(--text-primary, #f5f6fa);
  font-family: var(--font-wordmark, 'DM Sans', system-ui, sans-serif);
  font-size: clamp(2.2rem, 3.8vw, 3.8rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

#insights .ft-core-tag {
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #c6cdd9);
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.04em;
  background: transparent;
  border: 0;
}

/* Wordmark (Top-Right) */
#insights .ft-core-wordmark {
  position: absolute;
  top: clamp(34px, 4.6vw, 62px);
  right: clamp(32px, 5vw, 84px);
  z-index: 2;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #c6cdd9);
  font-family: var(--font-wordmark, 'DM Sans', system-ui, sans-serif);
  font-size: clamp(0.88rem, 1.15vw, 1.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.015em;
  text-align: right;
  white-space: nowrap;
  pointer-events: auto;
  background: transparent;
  border: 0;
}

#insights .ft-core-wordmark-plus {
  display: inline-block;
  color: var(--data, #37d6e9);
  font-weight: 300;
  font-size: 1.15em;
  padding-inline: 0.22em;
  vertical-align: baseline;
}

/* Trilha de Entradas (Flanco Esquerdo) */
#insights .ft-core-rail--inputs {
  position: absolute;
  left: clamp(32px, 5vw, 84px);
  top: 50%;
  transform: translateY(-38%);
  width: clamp(220px, 18vw, 290px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

#insights .ft-core-rail--inputs li {
  position: relative;
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}

#insights .ft-core-rail--inputs li::before,
#insights .ft-core-rail--inputs li::after {
  content: none;
  display: none;
}

#insights .ft-core-rail--inputs i {
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  display: block;
  background: var(--info, #4d7cfe);
  box-shadow: 0 0 8px var(--info-dim, rgba(77, 124, 254, 0.2));
}

#insights .ft-core-rail--inputs li:nth-child(2) i {
  background: var(--mauve, #9b7bff);
  box-shadow: 0 0 8px var(--mauve-dim, rgba(155, 123, 255, 0.2));
}

#insights .ft-core-rail--inputs li:nth-child(3) i {
  background: var(--data, #37d6e9);
  box-shadow: 0 0 8px var(--data-dim, rgba(55, 214, 233, 0.2));
}

#insights .ft-core-rail--inputs b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  font-weight: 600;
  color: var(--text-primary, #f5f6fa);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

#insights .ft-core-rail--inputs span {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.66rem, 0.76vw, 0.76rem);
  font-weight: 400;
  color: var(--text-muted, #99a2b4);
  line-height: 1.48;
}

/* Trilha de Saídas (Flanco Direito) */
#insights .ft-core-rail--outputs {
  position: absolute;
  right: clamp(32px, 5vw, 84px);
  top: 50%;
  transform: translateY(-38%);
  width: clamp(140px, 12vw, 180px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

#insights .ft-core-rail--outputs li {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}

#insights .ft-core-rail--outputs li::before,
#insights .ft-core-rail--outputs li::after {
  content: none;
  display: none;
}

#insights .ft-core-rail--outputs li span {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 0.92vw, 0.9rem);
  font-weight: 500;
  color: var(--text-secondary, #c6cdd9);
  text-align: right;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding-block: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  transition: color var(--dur-fast, 120ms) var(--ease), border-color var(--dur-fast, 120ms) var(--ease);
}

#insights .ft-core-rail--outputs li:hover span {
  color: var(--text-primary, #f5f6fa);
  border-bottom-color: var(--data, #37d6e9);
}

/* Parágrafo de Fecho (Base Central) */
#insights .ft-core-copy {
  position: absolute;
  bottom: clamp(24px, 3.2vw, 44px);
  left: 50%;
  transform: translateX(-50%);
  width: min(88vw, 680px);
  max-width: 68ch;
  z-index: 2;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.76rem, 0.88vw, 0.88rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-muted, #99a2b4);
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
}

/* ==========================================================================
   Tablet (max-width: 1100px)
   ========================================================================== */
@media (max-width: 1100px) {
  #insights .ft-core-scene {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 16 / 10;
    min-height: 620px;
    max-height: none;
  }

  #insights .ft-core-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  #insights .ft-core-brand {
    top: 28px;
    left: clamp(24px, 4vw, 40px);
    max-width: 360px;
    gap: 8px;
  }

  #insights .ft-core-brand h3,
  #insights #insights-ai-heading {
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  }

  #insights .ft-core-wordmark {
    top: 28px;
    right: clamp(24px, 4vw, 40px);
    font-size: clamp(0.8rem, 1.1vw, 1rem);
  }

  #insights .ft-core-rail--inputs {
    position: absolute;
    left: clamp(24px, 4vw, 40px);
    top: 52%;
    transform: translateY(-40%);
    width: clamp(180px, 22vw, 230px);
    gap: 16px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }

  #insights .ft-core-rail--outputs {
    position: absolute;
    right: clamp(24px, 4vw, 40px);
    top: 52%;
    transform: translateY(-40%);
    width: clamp(120px, 16vw, 150px);
    gap: 8px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }

  #insights .ft-core-rail--outputs li span {
    text-align: right;
    padding-block: 6px;
  }

  #insights .ft-core-copy {
    bottom: 20px;
    width: min(90vw, 580px);
    font-size: 0.78rem;
    line-height: 1.55;
    text-align: center;
    margin: 0;
  }
}

/* ==========================================================================
   Mobile (max-width: 700px)
   ========================================================================== */
@media (max-width: 700px) {
  #insights .ft-core-stage {
    display: block;
    width: 100%;
  }

  #insights .ft-core-scene {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: auto;
    min-height: auto;
    border-radius: 0;
    background: #04050b;
    overflow: hidden;
  }

  #insights .ft-core-viewport {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 1000px;
    padding: 28px 20px 36px;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    aspect-ratio: auto;
  }

  #insights .ft-core-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  #insights .ft-core-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 42%, rgba(4, 5, 11, 0) 30%, rgba(4, 5, 11, 0.75) 70%, #04050b 100%);
  }

  #insights .ft-core-brand {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    gap: 8px;
  }

  #insights .ft-insights-instrument {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    max-width: none;
    color: var(--text-secondary, #c6cdd9);
  }

  #insights .ft-core-brand h3,
  #insights #insights-ai-heading {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
    line-height: 0.94;
  }

  #insights .ft-core-tag {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  #insights .ft-core-wordmark {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 14px;
    margin-bottom: 490px;
    text-align: left;
    font-size: 0.88rem;
    white-space: normal;
  }

  #insights .ft-core-rail--inputs {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
  }

  #insights .ft-core-rail--inputs li {
    grid-template-columns: 7px 1fr;
    gap: 10px;
    align-items: baseline;
  }

  #insights .ft-core-rail--inputs b {
    font-size: 0.84rem;
    color: var(--text-primary, #f5f6fa);
    margin-bottom: 2px;
  }

  #insights .ft-core-rail--inputs span {
    font-size: 0.72rem;
    color: var(--text-secondary, #c6cdd9);
    line-height: 1.45;
  }

  #insights .ft-core-rail--outputs {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 24px;
  }

  #insights .ft-core-rail--outputs li span {
    text-align: left;
    padding-block: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary, #c6cdd9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #insights .ft-core-copy {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 26px;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-secondary, #c6cdd9);
  }
}

/* ==========================================================================
   Prefers Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #insights .ft-core-rail--outputs li span {
    transition: none;
  }
}
/* <<< WS-041 nucleo GennomX AI (fim) */

/* ===== WS-041 — cenas da Home nivel Awwwards (bloco gerado) ===== */
/* Gerado por .tmp/awwwards/integrate.py — nao edite a mao.
   Fonte: .tmp/awwwards/work/<cena>/override.css */

/* --- transversal (nao pertence a nenhuma cena) --- */
.home-corte .ft-home { background-image: none; }

/* --- 00-inicio --- */
/* override.css — CSS desta cena. Voce e dono deste arquivo.
   Carrega DEPOIS do main.css, entao suas regras vencem em
   especificidade igual. Nao edite main.css. */

/* Camadas decorativas (grao, aneis de reticulo, terminais) sao mais largas que
   a viewport em telas estreitas e criavam barra horizontal dentro da cena.
   Clip na propria cena: a decoracao continua sangrando, mas nao rola. */
#inicio#inicio { overflow-x: clip; }

/* --- 01-manifesto --- */
/* override.css — Cena 01: Manifesto (#manifesto)
   Direção de Arte: Awwwards Gallery / Architectural Scientific Bureau
   Rodada 7 — Refinamento pós-vitória.
   Ataque: eliminar rosa em "life sciences." (§18 BRIEF), colapsar vazio central
   aumentando escala do display, ancorar lateral esquerda com índice vertical.
   Fundo: escuro chapado absoluto. Profundidade por LUZ, zero ruído/textura. */

/* --------------------------------------------------------------------------
   1. SUPERFÍCIE & PROFUNDIDADE ÓPTICA POR LUZ
   -------------------------------------------------------------------------- */
#manifesto.ft-manifesto {
  position: relative;
  min-height: max(100svh, 820px);
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(46px, 6vh, 72px) var(--gutter, clamp(24px, 4.5vw, 72px)) clamp(40px, 5vh, 64px) !important;
  /* sem background-color proprio: o ground uniforme vence em `#manifesto#manifesto`
     mais abaixo, por decisao de cena continua. A declaracao daqui era morta. */
  background-image:
    radial-gradient(ellipse 1400px 600px at 38% 52%, rgba(46, 125, 96, 0.028) 0%, rgba(3, 5, 4, 0) 68%),
    radial-gradient(120% 90% at 50% 44%, rgba(10, 18, 14, 0.42) 0%, rgba(3, 5, 4, 0) 70%),
    radial-gradient(110% 40% at 50% 100%, rgba(16, 28, 22, 0.22) 0%, rgba(3, 5, 4, 0) 60%) !important;
  background-repeat: no-repeat;
  isolation: isolate;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. GRID E FRAMEWORK ARQUITETURAL
   3 zonas: Datum Superior → Monumento → Baseline
   -------------------------------------------------------------------------- */
#manifesto .ft-manifesto-grid {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  width: min(100%, var(--content-wide, 1520px)) !important;
  min-height: 0 !important;
  flex: 1 0 auto;
  margin-inline: auto;
  gap: 0;
}

/* --------------------------------------------------------------------------
   3. REGISTRATION DATUM — borda superior ancorada
   Ponto rose (4px) + "SOBRE" em DM Mono + índice "01 / 08 · MANIFESTO"
   -------------------------------------------------------------------------- */
#manifesto .ft-manifesto-tracker {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

#manifesto .ft-manifesto-tracker::after {
  content: '01 / 09 · MANIFESTO';
  display: inline-block;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 216, 208, 0.40);
  line-height: 1;
}

#manifesto .ft-manifesto-id {
  grid-column: auto !important;
  grid-row: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text-muted, #84938D) !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

#manifesto .ft-manifesto-id i {
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--signal, #FF4F8F) !important;
  box-shadow: 0 0 8px rgba(255, 79, 143, 0.65) !important;
}

/* --------------------------------------------------------------------------
   4. O CENTRO DE GRAVIDADE: MONUMENTO TIPOGRÁFICO
   - Escala máxima: clamp(4.2rem, 10.5vw, 13rem)
   - line-height .87, tracking -0.045em
   - "life sciences." enfatizado por peso (800) + salto de escala (1.06em)
     SEM itálico, SEM rosa, SEM halo. Ênfase sobrevive em P&B.
   - Thesis-group cresce para preencher o campo (flex: 1)
   -------------------------------------------------------------------------- */
#manifesto .ft-thesis-group {
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(40px, 6vh, 80px) 0 clamp(28px, 4vh, 52px) !important;
  flex: 1 1 auto;
}

#manifesto .ft-thesis {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  color: #D4E0DA;
  font-family: var(--font-sans, Archivo, -apple-system, sans-serif) !important;
  font-size: clamp(4.2rem, 10.5vw, 13rem) !important;
  font-weight: 400 !important;
  line-height: 0.87 !important;
  letter-spacing: -0.045em !important;
  text-wrap: initial !important;
  transition: opacity 300ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

#manifesto .ft-thesis-line {
  display: block;
}

#manifesto .ft-thesis-line--1 {
  color: #C8D8D0;
  font-weight: 300;
}

#manifesto .ft-thesis-line--2 {
  margin-top: 0.03em;
}

#manifesto .ft-thesis-line--3 {
  margin-top: 0.03em;
  color: #B4C4BC;
}

#manifesto .ft-thesis-prep {
  color: #7A8D84;
  font-weight: 300;
  margin-right: 0.10em;
}

/* "life sciences." — ênfase tipográfica pura: peso 800 + escala 1.06em
   Zero itálico. Zero rosa. Zero halo. Funciona em P&B. */
#manifesto .ft-thesis--focus {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

#manifesto .ft-thesis--signal {
  display: inline-block;
  font-family: var(--font-sans, Archivo, -apple-system, sans-serif) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: 1.06em;
  color: #FFFFFF !important;
  letter-spacing: -0.048em !important;
  line-height: 0.87;
}

/* --------------------------------------------------------------------------
   5. A LINHA DE BASE: VOZ, CONTEXTO E AÇÃO
   - 3 Colunas: Credencial → Notas Analíticas → Ação
   - Separador por border-top interno (dentro da cena, não na emenda)
   -------------------------------------------------------------------------- */
#manifesto .ft-manifesto-orbit {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(200px, 250px) 1fr auto !important;
  align-items: start !important;
  column-gap: clamp(28px, 4vw, 60px) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: clamp(22px, 2.8vh, 34px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* 5.1 Credencial do Fundador */
#manifesto .ft-founder {
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  width: fit-content !important;
}

#manifesto .ft-founder img {
  width: 48px !important;
  height: 48px !important;
  flex: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55) !important;
  filter: grayscale(0.88) contrast(1.08) brightness(0.95) !important;
  transition: filter 220ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              border-color 220ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

#manifesto .ft-founder:hover img {
  filter: grayscale(0) contrast(1.04) brightness(1) !important;
  border-color: rgba(255, 79, 143, 0.45) !important;
}

#manifesto .ft-founder b {
  display: block !important;
  font-family: var(--font-sans, Archivo, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 550 !important;
  color: #FFFFFF !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
}

#manifesto .ft-founder span {
  display: block !important;
  margin-top: 4px !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted, #84938D) !important;
  line-height: 1.35 !important;
}

/* 5.2 Notas Analíticas */
#manifesto .ft-manifesto-notes {
  display: grid !important;
  grid-template-columns: minmax(180px, 320px) minmax(180px, 290px) !important;
  column-gap: clamp(24px, 3.2vw, 52px) !important;
  align-items: start !important;
}

#manifesto .ft-manifesto-note {
  grid-column: auto !important;
  grid-row: auto !important;
  margin: 0 !important;
  font-family: var(--font-sans, Archivo, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.56 !important;
  letter-spacing: -0.004em !important;
  text-wrap: pretty !important;
}

#manifesto .ft-manifesto-note--a {
  max-width: 32ch !important;
  color: #8A9E96 !important;
}

#manifesto .ft-manifesto-note--b {
  max-width: 29ch !important;
  color: #D8E6DE !important;
}

#manifesto .ft-manifesto-note--a::before {
  content: '01';
  display: block;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(255, 79, 143, 0.8);
  margin-bottom: 7px;
  line-height: 1;
}

#manifesto .ft-manifesto-note--b::before {
  content: '02';
  display: block;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(255, 79, 143, 0.8);
  margin-bottom: 7px;
  line-height: 1;
}

/* 5.3 CTA em Carbono Executivo */
#manifesto .ft-manifesto-action {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
}

#manifesto .ft-manifesto-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 46px !important;
  padding: 12px 24px !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #151817 0%, #0C0F0E 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 2px solid var(--signal, #FF4F8F) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  color: #FFFFFF !important;
  font-family: var(--font-sans, Archivo, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              background 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              border-color 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              box-shadow 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) !important;
}

#manifesto .ft-manifesto-cta svg {
  flex: none !important;
  /* currentColor da seta resolve no rosa herdado deste seletor */
  color: var(--signal, #FF4F8F) !important;
  transition: transform 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) !important;
}

#manifesto .ft-manifesto-cta:hover {
  background: rgba(255, 79, 143, 0.07) !important;
  border-color: rgba(255, 79, 143, 0.35) !important;
  border-bottom-color: var(--signal, #FF4F8F) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 79, 143, 0.18) !important;
}

#manifesto .ft-manifesto-cta:hover svg {
  transform: translate(2px, -2px) !important;
}

#manifesto .ft-manifesto-cta:focus-visible {
  outline: 2px solid var(--signal, #FF4F8F) !important;
  outline-offset: 4px !important;
}

/* --------------------------------------------------------------------------
   7. RESPONSIVIDADE
   -------------------------------------------------------------------------- */
@media (max-width: 1140px) {
  #manifesto .ft-manifesto-orbit {
    grid-template-columns: 1fr auto !important;
    row-gap: 28px !important;
    column-gap: 24px !important;
  }

  #manifesto .ft-manifesto-notes {
    grid-column: 1 / -1 !important;
  }

  #manifesto .ft-founder {
    grid-column: 1 / 2 !important;
  }

  #manifesto .ft-manifesto-action {
    grid-column: 2 / 3 !important;
  }
}

@media (max-width: 720px) {
  #manifesto.ft-manifesto {
    min-height: auto !important;
    padding: clamp(52px, 8svh, 68px) 20px clamp(44px, 6svh, 56px) !important;
    justify-content: flex-start !important;
  }

  #manifesto .ft-manifesto-grid {
    gap: 0 !important;
  }

  #manifesto .ft-thesis-group {
    padding: clamp(28px, 5vh, 48px) 0 clamp(24px, 4vh, 40px) !important;
    justify-content: flex-start !important;
  }

  #manifesto .ft-thesis {
    font-size: clamp(2.6rem, 11vw, 3.6rem) !important;
    line-height: 0.93 !important;
    letter-spacing: -0.04em !important;
  }

  #manifesto .ft-thesis--signal {
    font-size: 1.04em;
  }

  #manifesto .ft-manifesto-tracker {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #manifesto .ft-manifesto-tracker::after {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  #manifesto .ft-manifesto-orbit {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    padding-top: 20px !important;
  }

  #manifesto .ft-founder img {
    width: 44px !important;
    height: 44px !important;
  }

  #manifesto .ft-manifesto-notes {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  #manifesto .ft-manifesto-note {
    font-size: 13px !important;
    line-height: 1.52 !important;
    max-width: none !important;
  }

  #manifesto .ft-manifesto-action {
    width: 100% !important;
    margin-top: 4px !important;
  }

  #manifesto .ft-manifesto-cta {
    width: 100% !important;
    min-height: 50px !important;
    padding: 14px 22px !important;
    justify-content: space-between !important;
  }
}

/* --------------------------------------------------------------------------
   8. ACESSIBILIDADE & PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #manifesto *,
  #manifesto *::before,
  #manifesto *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* Fundo unico. Varios agentes inventaram o proprio preto esverdeado
   (rgb(3,5,4), rgb(2,5,4), rgb(2,4,3)) em vez de usar o token, e o degrau
   entre cenas virava faixa visivel na emenda. O token e um so. */
#manifesto#manifesto { background-color: var(--ink-950) !important; }


/* Camadas decorativas (grao, aneis de reticulo, terminais) sao mais largas que
   a viewport em telas estreitas e criavam barra horizontal dentro da cena.
   Clip na propria cena: a decoracao continua sangrando, mas nao rola. */
#manifesto#manifesto { overflow-x: clip; }

/* --- 02-convergencia --- */
/* ==========================================================================
   GennomX — 02-convergencia (override.css)
   Direção de Arte Nível Awwwards · Refinamento Pós-Veredito (Rodada 12)
   Ataque cirúrgico ao veredito da Rodada 5 (Hobro):
   1. Tipografia como espetáculo: escala monumental, contraste de peso extremo
      e colisão visual arquitetural entre sans bold maciço ("Quatro disciplinas,")
      e outline serifado vazado ("leitura.") sem itálico (LEI §14 §18).
   2. Intensificação do nó central: lente focal multicamada, respiração luminosa
      óptica e anéis de retículo calibrados.
   3. Telemetria indexal: 4 disciplinas com ritmo de índice editorial, filetes
      hairline e ancoragem perimetral nas 4 bordas com metadados 100% legítimos
      (LEI §12 §15 §17 §19 §20). Fundo escuro chapado por luz (LEI §2).
   ========================================================================== */

/* --- 1. SUPERFÍCIE ESCURA PROFUNDA & MATÉRIA ÓPTICA POR LUZ (LEI §2) --- */
.home-corte .ft-home {
  background-color: var(--ink-950, #06070A) !important;
  background-image: none !important;
}

#convergencia.ft-scene {
  background-color: var(--ink-950, #06070A) !important;
  background-image:
    /* Halo focal de baixa opacidade atrás do ponto de gravidade do grafo */
    radial-gradient(ellipse 1020px 880px at 74% 50%, rgba(255, 79, 143, 0.055) 0%, rgba(20, 27, 44, 0.09) 38%, rgba(6, 7, 10, 0) 72%),
    /* Luz ambiente suave modelando a tipografia monumental à esquerda */
    radial-gradient(ellipse 880px 740px at 20% 36%, rgba(240, 244, 250, 0.026) 0%, rgba(6, 7, 10, 0) 68%),
    /* Vinheta cinematográfica periférica de contenção */
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 56%, rgba(3, 4, 6, 0.60) 100%) !important;
  min-height: 100svh;
  height: 100svh;
  max-height: 1080px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  /* Supressão rigorosa de réguas na emenda entre cenas (LEI §15) */
  border-top: none !important;
  border-bottom: none !important;
}

/* --- 2. ANCORAGEM PERIMETRAL — BORDA SUPERIOR (LEI §17) ---
   Metadado legítimo: numeração da cena e títulos literais da tela.
   Zero afirmação de capacidade, protocolo ou métrica inventada (LEI §19 §20). */
#convergencia::before {
  content: "02 / 09 \00b7 CONVERGÊNCIA";
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 clamp(32px, 4vw, 68px);
  border-bottom: none !important;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.38);
  box-sizing: border-box;
  z-index: 10;
  pointer-events: none;
}

/* --- 3. ANCORAGEM PERIMETRAL — BORDA INFERIOR (LEI §17) ---
   Metadado legítimo: títulos das 4 disciplinas já presentes no HTML. */
#convergencia::after {
  content: "CIÊNCIA \00b7 REGULAÇÃO \00b7 CONCORRÊNCIA \00b7 CAPITAL";
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 clamp(32px, 4vw, 68px);
  border-top: none !important;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.28);
  box-sizing: border-box;
  z-index: 10;
  pointer-events: none;
}

/* --- 4. GRADE ESTRUTURAL & ANCORAGEM LATERAL (LEI §13 §17) --------------- */
.ft-graph-frame {
  width: 100%;
  height: calc(100% - 84px);
  display: grid;
  grid-template-columns: minmax(540px, 48%) 1fr;
  gap: clamp(36px, 4vw, 76px);
  padding: clamp(16px, 2vh, 28px) clamp(32px, 4vw, 68px);
  box-sizing: border-box;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

/* Os dois rotulos verticais sairam: o da esquerda era a terceira repeticao do
   numero da cena e o da direita corria por dentro da area do grafo, encostando
   nos rotulos dos nos. O indice vive so na faixa superior e as quatro
   disciplinas so na faixa inferior. */

/* --- 5. COLUNA EDITORIAL: TIPOGRAFIA COMO ESPETÁCULO & COLISÃO (VEREDITO) -- */
.ft-graph-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-width: 680px;
  z-index: 4;
  box-sizing: border-box;
}

/* Badge de sinal cromático com micro-dot luminoso */
.ft-graph-head .ft-signal-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.02);
  width: fit-content;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}

.ft-graph-head .ft-signal-label i {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(240, 244, 250, 0.85);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Display monumental em escala Awwwards (Kononenko/Hobro level)
   Linhas compactadas com leading 0.82 e tracking negativo agressivo */
.ft-graph-heading {
  margin: 0 0 clamp(16px, 2.4vh, 26px) 0;
  font-family: var(--font-sans);
  font-size: clamp(3.8rem, 6.2vw, 7.2rem);
  line-height: 0.82;
  letter-spacing: -0.048em;
  color: #F7F8FB;
  position: relative;
  isolation: isolate;
}

.ft-graph-line {
  display: block;
}

.ft-graph-line--1 {
  display: flex;
  flex-direction: column;
  color: #F7F8FB;
}

.ft-graph-word {
  display: block;
}

/* "Quatro" — bold sans Archivo escultural, peso 700 */
.ft-graph-word--1 {
  font-weight: 700;
  color: #F7F8FB;
  line-height: 0.82;
}

/* "disciplinas," — bold sans com interlock vertical */
.ft-graph-word--2 {
  font-weight: 700;
  color: #F7F8FB;
  line-height: 0.82;
  letter-spacing: -0.052em;
  margin-top: -0.04em;
}

/* Linha de colisão: "uma" bold sans + "leitura." outline serif vazado */
.ft-graph-line--2 {
  display: flex;
  align-items: baseline;
  gap: 0.16em;
  color: rgba(247, 248, 251, 0.94);
  /* -0.10em cruzava a altura-x de "disciplinas,"; -0.02em mantem o interlock
     na faixa dos descendentes e devolve as contraformas das duas palavras */
  margin-top: -0.02em;
  position: relative;
  z-index: 2;
}

.ft-graph-word--lead {
  font-family: var(--font-sans);
  font-weight: 700;
  color: rgba(247, 248, 251, 0.94);
  font-size: 0.92em;
  letter-spacing: -0.04em;
}

/* Ênfase tipográfica monumental vazada (LEI §14 §18):
   STIX Two Text editorial com font-style: NORMAL (zero itálico).
   Contorno vazado em -webkit-text-stroke de alta definição e salto de escala (1.20em),
   criando a colisão outline serif cruzando o bold sans inspirada no WHAT/WE de Hobro. */
.ft-graph-em {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: transparent !important;
  -webkit-text-stroke: clamp(1.3px, 0.12vw, 1.9px) #FFFFFF;
  font-size: 1.20em;
  letter-spacing: -0.038em;
  line-height: 0.80;
  display: inline-block;
  position: relative;
  text-shadow: none !important;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35));
}

.ft-graph-em::after {
  display: none !important;
}

.ft-graph-lede {
  margin: 0 0 clamp(20px, 3vh, 36px) 0;
  font-family: var(--font-sans);
  font-size: clamp(0.96rem, 1.1vw, 1.14rem);
  line-height: 1.54;
  color: rgba(200, 214, 230, 0.72);
  max-width: 44ch;
  letter-spacing: -0.012em;
}

/* --- 6. TELEMETRIA DISCIPLINAR: LISTA COM RÉGUA (LEI §12 anti-card) --------
   4 blocos com ritmo de índice editorial, hairline horizontal contínua,
   numeração em DM Mono e fechamento perfeito contra a borda inferior. */
#convergencia .ft-graph-disciplines {
  display: block !important;
  margin-top: auto;
  width: 100%;
}

/* Rótulo de índice editorial com termos literais do HTML (LEI §19 §20) */
#convergencia .ft-graph-disciplines::before {
  content: "DISCIPLINAS \00a0//\00a0 FONTES \00a0\00b7\00a0 01 \2013 04";
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.34);
  margin-bottom: clamp(10px, 1.5vh, 16px);
}

#convergencia .ft-graph-disciplines dl,
#convergencia .ft-graph-disciplines dl.ft-graph-matrix,
#convergencia .ft-graph-matrix {
  display: grid !important;
  grid-template-columns: 1.12fr 0.88fr !important;
  column-gap: clamp(24px, 3vw, 42px) !important;
  row-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

#convergencia .ft-graph-card {
  position: relative;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 0 !important;
  padding: clamp(10px, 1.4vh, 16px) 0 clamp(10px, 1.4vh, 16px) 0 !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  transition: border-color 0.22s var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1));
}

#convergencia .ft-graph-card[data-domain="regulacao"],
#convergencia .ft-graph-card[data-domain="capital"] {
  border-top-color: rgba(255, 255, 255, 0.07) !important;
}

#convergencia .ft-graph-card:hover {
  border-top-color: rgba(255, 255, 255, 0.42) !important;
}

/* Numeração em DM Mono: índice rigoroso sem adjetivos inventados */
#convergencia .ft-graph-card::before {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  line-height: 1;
  color: rgba(226, 232, 240, 0.35);
  margin-bottom: 6px;
  display: block;
  transition: color 0.2s ease;
}

#convergencia .ft-graph-card:hover::before {
  color: rgba(255, 79, 143, 0.85);
}

#convergencia .ft-graph-card[data-domain="ciencia"]::before      { content: "01 //"; }
#convergencia .ft-graph-card[data-domain="regulacao"]::before    { content: "02 //"; }
#convergencia .ft-graph-card[data-domain="concorrencia"]::before { content: "03 //"; }
#convergencia .ft-graph-card[data-domain="capital"]::before      { content: "04 //"; }

#convergencia .ft-graph-card dt {
  margin: 0 0 4px 0 !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(1.15rem, 1.35vw, 1.42rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: #F7F8FB !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  transition: color 0.2s var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1));
}

#convergencia .ft-graph-card:hover dt {
  color: #FFFFFF !important;
}

#convergencia .ft-graph-card dd {
  margin: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(0.68rem, 0.72vw, 0.76rem) !important;
  line-height: 1.48 !important;
  color: rgba(182, 196, 218, 0.64) !important;   /* 0.58 dava 4,31:1, abaixo do AA */
  letter-spacing: 0.015em !important;
  transition: color 0.2s var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1));
}

#convergencia .ft-graph-card:hover dd {
  color: rgba(226, 235, 245, 0.90) !important;
}

/* --- 7. PALCO VISUAL: INTENSIFICAÇÃO DO NÓ CENTRAL & RETÍCULO (VEREDITO) --- */
.ft-graph-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}

/* Halo luminoso focal de respiração óptica profunda */
.ft-graph-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(420px, 48vw, 680px);
  height: clamp(420px, 48vw, 680px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 79, 143, 0.14) 0%, rgba(255, 79, 143, 0.05) 28%, rgba(20, 28, 48, 0.12) 52%, transparent 72%);
  pointer-events: none;
  z-index: 1;
  filter: blur(32px);
}

/* Aura de alta precisão concentrada no ponto de convergência do núcleo GennomX */
.ft-graph-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 143, 0.22) 0%, rgba(255, 79, 143, 0.06) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  filter: blur(12px);
}

.ft-graph-reticle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.ft-reticle-corner {
  display: none !important;
}

/* Anéis concêntricos orbitais calibrados */
.ft-reticle-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ft-reticle-ring--1 {
  width: 170px;
  height: 170px;
  border: 1px solid rgba(255, 79, 143, 0.16);
  box-shadow: 0 0 24px rgba(255, 79, 143, 0.06), inset 0 0 16px rgba(255, 79, 143, 0.03);
}

.ft-reticle-ring--2 {
  width: 390px;
  height: 390px;
  border: 1px solid rgba(226, 232, 240, 0.045);
}

.ft-reticle-ring--3 {
  width: 710px;
  height: 710px;
  border: 1px dashed rgba(226, 232, 240, 0.03);
}

/* Eixos de referência com afunilamento luminoso no centro */
.ft-reticle-axis {
  position: absolute;
  pointer-events: none;
}

.ft-reticle-axis--x {
  top: 50%;
  left: 2%;
  right: 2%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(226, 232, 240, 0.03) 20%, rgba(255, 79, 143, 0.18) 48%, rgba(255, 79, 143, 0.28) 50%, rgba(255, 79, 143, 0.18) 52%, rgba(226, 232, 240, 0.03) 80%, transparent 100%);
}

.ft-reticle-axis--y {
  left: 50%;
  top: 2%;
  bottom: 2%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(226, 232, 240, 0.03) 20%, rgba(255, 79, 143, 0.18) 48%, rgba(255, 79, 143, 0.28) 50%, rgba(255, 79, 143, 0.18) 52%, rgba(226, 232, 240, 0.03) 80%, transparent 100%);
}

.ft-graph-canvas {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  max-height: 880px;
  filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.07));
}

/* --- 8. ADAPTABILIDADE MOBILE & VIEWPORTS INTERMEDIÁRIOS ------------------- */
@media (max-width: 1080px) {
  .ft-graph-frame {
    grid-template-columns: 1fr;
    height: auto;
    gap: 40px;
    padding: 32px clamp(24px, 4vw, 40px) 48px;
  }

  #convergencia.ft-scene {
    height: auto;
    min-height: 100svh;
    max-height: none;
  }

  .ft-graph-head {
    max-width: 100%;
  }

  .ft-graph-heading {
    font-size: clamp(3.0rem, 8.5vw, 4.8rem);
  }

  .ft-graph-stage {
    min-height: 520px;
    height: 520px;
  }

  .ft-graph-frame::before,
  .ft-graph-frame::after {
    display: none !important;
  }
}

@media (max-width: 760px) {
  #convergencia#convergencia {
    padding-top: clamp(88px, 14vh, 140px) !important;
  }
  #convergencia#convergencia .ft-graph-stage {
    min-height: 58vh;
  }
}

@media (max-width: 640px) {
  #convergencia::before,
  #convergencia::after {
    padding: 0 18px;
    font-size: 8px;
    letter-spacing: 0.14em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #convergencia .ft-graph-disciplines dl,
  #convergencia .ft-graph-disciplines dl.ft-graph-matrix,
  #convergencia .ft-graph-matrix {
    grid-template-columns: 1fr !important;
    row-gap: 0 !important;
  }

  .ft-graph-stage {
    min-height: 420px;
    height: 420px;
  }

  .ft-reticle-ring--3 {
    display: none;
  }
}

/* --- 9. ACESSIBILIDADE & REDUCED MOTION (LEI §6 §8) --------------------- */
@media (prefers-reduced-motion: reduce) {
  #convergencia *,
  #convergencia *::before,
  #convergencia *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}

/* Fundo unificado e contenção de overflow horizontal */
#convergencia#convergencia {
  background-color: var(--ink-950) !important;
  overflow-x: clip;
  scroll-margin-top: clamp(96px, 13vh, 150px);
}

/* --- 03-data-ai --- */
/* ==========================================================================
   override.css — Cena 03: Data-AI (#data-ai)
   Direção de Arte: Awwwards Gallery / High-Throughput Optical Flow Matrix
   Benchmark: Kononenko Group & Revelatio Studio (Clareza Monumental & Rigor)
   Conformidade Estrita: LEI.md (§2, §3, §4, §5, §11, §12, §13, §14, §15)
   Refinamentos desta Rodada:
     1. Conformidade Absoluta com a §14 da LEI: eliminação total de qualquer
        itálico na cena (#data-ai). A ênfase na expressão 'mesma leitura' é
        executada via salto de peso (semibold 600), luminância branca pura,
        e régua cirúrgica de sinal rosa de 1.5px na linha de base.
     2. Resolução Definitiva da Ancoragem Vertical em Mobile: estrutura flex
        100svh com frame expandido (flex: 1 1 auto) e rodapé empurrado para a
        base (margin-top: auto), eliminando os 400px de vácuo inferior e
        distribuindo a tensão composicional do topo ao chão.
     3. Presença Monumental Calibrada no Desktop: Flow Cell expandida com slots
        em escala de galeria (clamp 4.5rem a 9.4rem) e calibração de canais
        CH·01..07 com retículos suíços (+) nos quatro quadrantes.
     4. Profundidade Óptica por Luz Pura: escuro chapado #020504 com vinheta
        periférica e halo volumétrico suave, sem ruído nem grão simulado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SUPERFÍCIE & FUNDO (Escuro Chapado #020504 + Profundidade Óptica por Luz)
   -------------------------------------------------------------------------- */
#data-ai.ft-scene,
#data-ai.ft-sequence {
  position: relative !important;
  min-height: 100svh !important;
  height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  padding: clamp(24px, 3.4vh, 44px) var(--gutter, clamp(24px, 4.5vw, 64px)) !important;
  background-color: #020504 !important;
  background-image:
    /* Halo óptico difuso volumétrico atrás da Flow Cell */
    radial-gradient(ellipse 95% 58% at 50% 48%, rgba(210, 235, 225, 0.048) 0%, rgba(2, 5, 4, 0) 72%),
    /* Micro-luminescência rosa no canal terminal 'X' */
    radial-gradient(circle 340px at 86% 50%, rgba(255, 79, 143, 0.026) 0%, rgba(2, 5, 4, 0) 65%),
    /* Vinheta de contenção perimetral superior e inferior */
    linear-gradient(180deg, rgba(2, 5, 4, 0.85) 0%, rgba(2, 5, 4, 0) 15%, rgba(2, 5, 4, 0) 85%, rgba(2, 5, 4, 0.9) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Neutralização estrita de ruídos, grãos ou texturas 2D (LEI.md §2 & §15) */
#data-ai::before,
#data-ai::after {
  display: none !important;
  content: none !important;
}

/* --------------------------------------------------------------------------
   2. ESTRUTURA ARQUITETURAL & ANCORAGEM PERIMETRAL (LEI.md §11.1 & §11.2)
   -------------------------------------------------------------------------- */
#data-ai .ft-sequence-frame {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  width: min(100%, 1440px) !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Hairlines verticais datum ancorando as margens laterais */
@media (min-width: 1024px) {
  #data-ai .ft-sequence-frame::before,
  #data-ai .ft-sequence-frame::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 6%, rgba(255, 255, 255, 0.08) 94%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }

  #data-ai .ft-sequence-frame::before {
    left: 0;
  }

  #data-ai .ft-sequence-frame::after {
    right: 0;
  }
}

/* --------------------------------------------------------------------------
   3. TOPO: BARRA SUPERIOR DE TELEMETRIA
   -------------------------------------------------------------------------- */
#data-ai .ft-sequence-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding-bottom: clamp(12px, 1.6vh, 18px) !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}

/* Retículos suíços de interseção nos limites horizontais do topo */
#data-ai .ft-sequence-header::before,
#data-ai .ft-sequence-header::after {
  content: '+';
  position: absolute;
  bottom: -6px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

#data-ai .ft-sequence-header::before {
  left: -4px;
}

#data-ai .ft-sequence-header::after {
  right: -4px;
}

#data-ai .ft-sequence-label-wrap {
  display: flex !important;
  align-items: center !important;
}

#data-ai .ft-sequence-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-muted, #8E9F95) !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

#data-ai .ft-sequence-label i {
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--signal, #FF4F8F) !important;
  box-shadow: 0 0 8px rgba(255, 79, 143, 0.9) !important;
  font-style: normal !important;
}

#data-ai .ft-sequence-coordinate {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  color: var(--text-muted, #8E9F95) !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

#data-ai .ft-sequence-coordinate::before {
  content: '[';
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.22);
}

#data-ai .ft-sequence-coordinate::after {
  content: ']';
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   4. CENTRO DE GRAVIDADE: MATRIZ ÓPTICA DE FLUXO (Sem Card, Sem HUD)
   -------------------------------------------------------------------------- */
#data-ai .ft-sequence-visual {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  margin: auto 0 !important;
  padding: clamp(14px, 2vh, 26px) 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* A Flow Cell aberta: Bounded apenas por hairlines horizontais */
#data-ai .ft-sequence-rail {
  position: relative !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Neutralização explícita de cantoneiras genéricas */
#data-ai .ft-sequence-rail::before,
#data-ai .ft-sequence-rail::after,
#data-ai .ft-sequence-calipers::before,
#data-ai .ft-sequence-calipers::after,
#data-ai .ft-sequence-indices::before,
#data-ai .ft-sequence-indices::after {
  display: none !important;
  content: none !important;
}

/* 4.1 Fita de Leitura Contínua em Alta Velocidade */
#data-ai .ft-sequence-stream {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='18' viewBox='0 0 720 18'%3E%3Ctext x='0' y='13' fill='rgba(182,232,212,0.72)' font-family='monospace' font-size='9.5' font-weight='500' letter-spacing='5.5'%3E5′—ACTGGCCAGTCGATGCTAGCGATCGATCGGATGCTAGCTAGCTG—3′%3C/text%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, transparent 100%);
  animation: sequence-stream-drift 28s linear infinite;
}

@keyframes sequence-stream-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -720px 0;
  }
}

/* 4.2 Escala Vernier de Alta Precisão (7 Canais Calibrados CH·01 a CH·07) */
#data-ai .ft-sequence-calipers {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
  /* A fita e absoluta e ocupa de 10px a 28px do trilho. Este topo tem que
     ficar abaixo de 28px em qualquer largura, senao os rotulos CH entram na
     fita. Nao reduzir sem mover a fita junto. */
  padding-top: 34px;
}

#data-ai .ft-sequence-calipers span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 14px;
}

#data-ai .ft-sequence-calipers span::before {
  content: '';
  position: absolute;
  top: 0;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 8.5px;
  line-height: 1;
  letter-spacing: 0.16em;
  color: rgba(164, 212, 188, 0.45);
}

#data-ai .ft-sequence-calipers span:nth-child(1)::before { content: 'CH·01'; }
#data-ai .ft-sequence-calipers span:nth-child(2)::before { content: 'CH·02'; }
#data-ai .ft-sequence-calipers span:nth-child(3)::before { content: 'CH·03'; }
#data-ai .ft-sequence-calipers span:nth-child(4)::before { content: 'CH·04'; }
#data-ai .ft-sequence-calipers span:nth-child(5)::before { content: 'CH·05'; }
#data-ai .ft-sequence-calipers span:nth-child(6)::before { content: 'CH·06'; }
#data-ai .ft-sequence-calipers span:nth-child(7)::before {
  content: 'CH·07';
  color: rgba(255, 79, 143, 0.9);
}

#data-ai .ft-sequence-calipers span::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 6px;
  background: rgba(255, 255, 255, 0.22);
}

#data-ai .ft-sequence-calipers span:last-child::after {
  background: var(--signal, #FF4F8F);
  box-shadow: 0 0 6px rgba(255, 79, 143, 0.85);
}

/* 4.3 Feixe Laser de Varredura Cirúrgica (1px Óptico) */
#data-ai .ft-sequence-scanline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 79, 143, 0.2) 15%,
    rgba(255, 79, 143, 0.95) 50%,
    rgba(255, 79, 143, 0.2) 85%,
    transparent 100%
  );
  box-shadow: 0 0 10px 1px rgba(255, 79, 143, 0.5);
  pointer-events: none;
  z-index: 4;
  animation: laser-sweep 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes laser-sweep {
  0% {
    left: 1%;
    opacity: 0;
  }
  5% {
    opacity: 0.95;
  }
  50% {
    left: 99%;
    opacity: 0.95;
  }
  55% {
    opacity: 0;
  }
  100% {
    left: 1%;
    opacity: 0;
  }
}

/* 4.4 Os 7 Slots Monumentais GENNOMX */
#data-ai .ft-sequence-word {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  width: 100% !important;
  padding: clamp(8px, 1.6vh, 20px) 0 clamp(12px, 2vh, 24px) !important;
  line-height: 0.85 !important;
}

#data-ai .ft-sequence-slot {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  height: clamp(105px, 14vw, 185px) !important;
  color: #8EAF9F !important;
  font-family: var(--font-wordmark, 'DM Sans', sans-serif) !important;
  font-size: clamp(4.5rem, 9.8vw, 9.4rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  transition: color 180ms var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1)) !important;
  will-change: color !important;
}

/* Hairlines verticais separando os 7 canais de fluxo da matriz */
#data-ai .ft-sequence-slot:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.08) 75%, transparent);
}

/* Caracteres travados: Branco de titânio nítido, presença monumental */
#data-ai .ft-sequence-slot.is-locked {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 24px rgba(255, 255, 255, 0.28),
    0 0 52px rgba(210, 226, 219, 0.08) !important;
}

/* O terminal 'X': Linha de sinal cirúrgica de 1.5px (LEI.md §5) */
#data-ai .ft-sequence-slot.is-locked:last-child::before {
  content: '';
  position: absolute;
  bottom: clamp(6px, 1.2vh, 12px);
  left: 24%;
  right: 24%;
  height: 1.5px;
  background: var(--signal, #FF4F8F);
  box-shadow: 0 0 8px rgba(255, 79, 143, 0.85);
}

/* 4.5 Doca de Coordenadas Moleculares 5′ · ACGT / 07 · 3′ */
#data-ai .ft-sequence-indices {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: transparent !important;
  color: var(--text-muted, #8E9F95) !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

#data-ai .ft-sequence-indices span:nth-child(1),
#data-ai .ft-sequence-indices span:nth-child(3) {
  color: #8E9F95;
}

#data-ai .ft-sequence-indices span:nth-child(2) {
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 0.22em;
}

/* --------------------------------------------------------------------------
   5. RODAPÉ: COMPOSIÇÃO ASSIMÉTRICA CALIBRADA (Benchmark Kononenko / Revelatio)
   -------------------------------------------------------------------------- */
#data-ai .ft-sequence-footer {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  /* coluna unica desde que `ft-sequence-meta` saiu do HTML */
  justify-content: flex-start !important;
  align-items: flex-end !important;
  gap: clamp(28px, 4vw, 64px) !important;
  width: 100% !important;
  padding-top: clamp(14px, 1.8vh, 22px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
}

/* Retículos suíços de ancoragem no rodapé */
#data-ai .ft-sequence-footer::before,
#data-ai .ft-sequence-footer::after {
  content: '+';
  position: absolute;
  top: -6px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

#data-ai .ft-sequence-footer::before {
  left: -4px;
}

#data-ai .ft-sequence-footer::after {
  right: -4px;
}

/* 5.1 Coluna Esquerda: Tese Editorial Fluida em 2 Linhas com Ênfase Cirúrgica (LEI.md §14) */
#data-ai .ft-sequence-aside {
  position: relative !important;
  flex: 1 1 0% !important;
  max-width: min(880px, 68vw) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

#data-ai .ft-sequence-thesis {
  margin: 0 !important;
  color: #E6EFEA !important;
  font-family: var(--font-sans, Archivo, -apple-system, sans-serif) !important;
  font-size: clamp(1.45rem, 1.9vw, 2.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.24 !important;
  letter-spacing: -0.025em !important;
}

/* Neutralização estrita de itálico no markup da cena (#data-ai) e acento por peso + linha */
#data-ai em,
#data-ai i,
#data-ai .ft-sequence-thesis em {
  font-family: var(--font-sans, Archivo, -apple-system, sans-serif) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.015em !important;
  border-bottom: 1.5px solid var(--signal, #FF4F8F) !important;
  padding-bottom: 2px !important;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.25) !important;
}

/* --------------------------------------------------------------------------
   6. VISIBILIDADE DOS REVEALS (Garantia de Render Imediato e Seguro)
   -------------------------------------------------------------------------- */
#data-ai .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   7. RESPONSIVIDADE (Tablet & Mobile 390px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #data-ai.ft-scene,
  #data-ai.ft-sequence {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: clamp(28px, 4vh, 40px) 24px !important;
  }

  #data-ai .ft-sequence-visual {
    padding: 16px 0 !important;
  }

  #data-ai .ft-sequence-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding-top: 18px !important;
    margin-top: auto !important;
  }

  #data-ai .ft-sequence-aside {
    max-width: 100% !important;
  }

  #data-ai .ft-sequence-thesis {
    font-size: clamp(1.35rem, 2.6vw, 1.85rem) !important;
  }

  #data-ai .ft-sequence-slot {
    height: clamp(80px, 12vw, 120px) !important;
    font-size: clamp(3rem, 7.5vw, 4.8rem) !important;
  }
}

@media (max-width: 640px) {
  #data-ai.ft-scene,
  #data-ai.ft-sequence {
    height: 100svh !important;
    min-height: 100svh !important;
    padding: 24px 18px 28px !important;
    justify-content: space-between !important;
  }

  #data-ai .ft-sequence-frame {
    height: 100% !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
  }

  #data-ai .ft-sequence-header {
    margin-bottom: 8px !important;
    padding-bottom: 10px !important;
    flex-shrink: 0 !important;
  }

  #data-ai .ft-sequence-label,
  #data-ai .ft-sequence-coordinate {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }

  #data-ai .ft-sequence-visual {
    margin: auto 0 !important;
    padding: 10px 0 !important;
    flex: 1 1 auto !important;
  }

  #data-ai .ft-sequence-calipers span::before {
    font-size: 7.5px !important;
    letter-spacing: 0.1em !important;
  }

  #data-ai .ft-sequence-slot {
    height: 68px !important;
    font-size: clamp(2.4rem, 9vw, 3rem) !important;
    letter-spacing: -0.025em !important;
  }

  #data-ai .ft-sequence-indices {
    font-size: 9.5px !important;
    letter-spacing: 0.14em !important;
    padding: 8px 8px !important;
  }

  #data-ai .ft-sequence-footer {
    padding-top: 14px !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
  }

  #data-ai .ft-sequence-thesis {
    font-size: 1.18rem !important;
    line-height: 1.26 !important;
  }

}

/* --------------------------------------------------------------------------
   8. ACESSIBILIDADE & PREFERS-REDUCED-MOTION (LEI.md §6 & §8)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #data-ai *,
  #data-ai *::before,
  #data-ai *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
  }

  #data-ai .ft-sequence-scanline {
    display: none !important;
  }

  #data-ai .ft-sequence-stream {
    animation: none !important;
  }
}


/* ==========================================================================
   Correcao: "GENNOMX AI" tem 10 caracteres; o corpo foi dimensionado para 7
   e quebrava em duas linhas em TODA largura. Agora cabe numa linha so, e o
   "AI" ganha destaque por sublinhado rosa — forma, nao cor de texto (§21).
   ========================================================================== */

#data-ai .ft-sequence-word {
  /* era grid de 7 colunas fixas: os 3 slots novos caiam para a 2a linha */
  grid-template-columns: repeat(9, 1fr) !important;
  grid-auto-flow: column !important;
  justify-content: center;
  white-space: nowrap;
}

#data-ai .ft-sequence-slot {
  font-size: clamp(1.9rem, 8.2vw, 9.6rem) !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding-inline: clamp(2px, .5vw, 10px) !important;
}


/* "A" e "I" — o par que nomeia a plataforma.
   Borda em vez de pseudo-elemento: o ::after dependia de contexto de
   posicionamento e os tracos saiam fora das letras. */
/* o vao entre X e A: margem, nao slot — assim o embaralhamento nunca
   escreve uma letra dentro dele e nada se sobrepoe */
#data-ai .ft-sequence-slot:nth-child(9) {
  margin-left: clamp(10px, 1.8vw, 34px) !important;
}

#data-ai .ft-sequence-slot:nth-child(9),
#data-ai .ft-sequence-slot:nth-child(10) {
  border-bottom: 3px solid var(--signal) !important;
  padding-bottom: .08em !important;
}

/* a lede nao pode vazar a moldura da cena */
#data-ai .ft-sequence-thesis {
  max-width: min(100%, 62ch);
}


/* o marcador antigo sob o "X" ficou redundante com o sublinhado do AI */
#data-ai .ft-sequence-slot::before { display: none !important; }

/* a lede encostava na borda inferior da cena e cortava a segunda linha */
#data-ai.ft-scene { padding-bottom: clamp(72px, 9vh, 130px) !important; }


/* Fundo unico. Varios agentes inventaram o proprio preto esverdeado
   (rgb(3,5,4), rgb(2,5,4), rgb(2,4,3)) em vez de usar o token, e o degrau
   entre cenas virava faixa visivel na emenda. O token e um so. */
#data-ai#data-ai { background-color: var(--ink-950) !important; }


/* O "efeito sanfona": as colunas eram `auto`, entao cada uma se redimensionava
   ao caractere sorteado a cada quadro (um M e mais largo que um I). Colunas
   iguais em fracao fixam o passo, e a palavra volta a ocupar a faixa inteira. */
#data-ai .ft-sequence-word {
  width: 100% !important;
  max-width: none !important;
}

#data-ai .ft-sequence-slot {
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
}


/* Camadas decorativas (grao, aneis de reticulo, terminais) sao mais largas que
   a viewport em telas estreitas e criavam barra horizontal dentro da cena.
   Clip na propria cena: a decoracao continua sangrando, mas nao rola. */
#data-ai#data-ai { overflow-x: clip; }


/* A emenda com a cena anterior tinha degrau de luminancia (medido: -3 a +4
   sobre um fundo de 7). A causa e o gradiente na RAIZ da cena, que clareia ou
   escurece a propria borda superior. O gradiente sai da raiz; a atmosfera
   continua nos elementos internos, onde ela nao toca a emenda. */
#data-ai#data-ai {
  background-image: none !important;
  background-color: var(--ink-950) !important;
}

/* Abaixo de 900px a cena mantinha `height: 100svh` enquanto o trilho encolhia
   com a largura, e os dois vaos absorviam a sobra: 51% da cena em branco a
   900px, 58% a 820px. Aqui a altura passa a ser medida pelo conteudo e a tese
   sobe para junto do trilho. Acima de 900px nada muda, por decisao do fundador. */
@media (max-width: 900px) {
  #data-ai.ft-sequence {
    height: auto !important;
    min-height: 0 !important;
    padding-block: clamp(64px, 9vh, 104px) !important;
  }

  #data-ai .ft-sequence-visual {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* `margin-top: auto` empurrava o rodape para a base da tela cheia */
  #data-ai .ft-sequence-footer {
    margin-top: clamp(28px, 4vh, 44px) !important;
  }
}

/* --- 04-solucoes --- */
/* override.css — Cena 04-Soluções (#solucoes)
   Rodada 11 — Ataque cirúrgico ao veredito 10:
   1. Título com contraste real de plano (outline quase-invisível vs sólido monumental)
   2. Eixo vertical único unifica todos os blocos — elimina 3 sistemas de alinhamento
   3. Conteúdo em relação hierárquica clara com o header: a mesma grade desce
   4. Fundo com modulação por halo suave atrás do objeto principal
   5. Metadados de borda limpos: apenas 04/08, SOLUÇÕES, nomes de conteúdo
   Conformidade: §2 §5 §13 §14 §15 §17 §19 §20 da LEI */

/* ==========================================================================
   BASE DA CENA
   ========================================================================== */
#solucoes.ft-mandates {
  position: relative;
  min-height: auto !important;
  padding: 0 !important;
  background-color: var(--ink-950) !important;
  /* Profundidade por LUZ: halo atrás do título monumental + vinheta inferior */
  background-image:
    radial-gradient(ellipse 70% 40% at 78% 12%, rgba(255, 255, 255, 0.028), transparent 65%),
    radial-gradient(ellipse 50% 30% at 80% 8%, rgba(143, 184, 216, 0.035), transparent 55%),
    radial-gradient(ellipse 100% 28% at 50% 102%, rgba(3, 4, 7, 0.92), transparent 70%) !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  isolation: isolate;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

#solucoes.ft-mandates::before,
#solucoes.ft-mandates::after {
  display: none !important;
}

/* ==========================================================================
   BARRA SUPERIOR DE ANCORAGEM — toca a aresta de cima (§17)
   Metadado limpo: numeração + rótulo da cena
   ========================================================================== */
#solucoes .ft-mandates-top-bar {
  position: relative;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 20px var(--gutter) 20px !important;
  box-sizing: border-box !important;
}

#solucoes .ft-mandates-scene-id {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  color: var(--ink-500) !important;
  text-transform: uppercase !important;
}

#solucoes .ft-mandates-scene-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  color: var(--ink-500) !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   HEADER — grade 2 colunas: metadado esquerda | título direita
   Partido atribuído §13: título no alto e à direita
   ========================================================================== */
#solucoes .ft-mandates-head {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1fr 1.6fr !important;
  align-items: end !important;
  gap: 0 !important;
  width: 100% !important;
  padding: clamp(32px, 4vw, 56px) var(--gutter) 0 !important;
  box-sizing: border-box !important;
  border: none !important;
}

#solucoes .ft-mandates-head-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: clamp(32px, 4vw, 52px) !important;
  padding-bottom: clamp(24px, 3vw, 44px) !important;
  padding-right: clamp(32px, 4vw, 60px) !important;
}

/* Sinalizador de cena */
#solucoes .ft-mandates-head .ft-signal-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  color: var(--ink-200) !important;
  text-transform: uppercase !important;
}

#solucoes .ft-mandates-head .ft-signal-label i {
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--signal) !important;
  box-shadow: 0 0 10px rgba(255, 79, 143, 0.85) !important;
  flex-shrink: 0 !important;
}

/* Coordenada técnica: ancorada no fundo-esquerdo do header */
/* ==========================================================================
   TÍTULO MONUMENTAL — no alto, à direita, com contraste de PLANO real
   Defeito 1 atacado: outline quase-invisível vs sólido monumental
   ========================================================================== */
#solucoes .ft-mandates-head h2 {
  margin: 0 !important;
  padding-bottom: clamp(24px, 3vw, 44px) !important;
  text-align: right !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0 !important;
  /* Sem border: ancoragem é pelo conteúdo encostando na grade abaixo */
}

/* "Matriz de" — outline fantasma: recuado no plano, quase desaparece */
#solucoes .ft-mandates-title-outline {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-size: clamp(4rem, 9.5vw, 11rem) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.045em !important;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22) !important;
  display: block !important;
  white-space: nowrap !important;
  /* sem transição: o contorno é estrutura, não interação */
}

/* "Mandatos" — sólido monumental: objeto no plano frontal */
#solucoes .ft-mandates-title-serif {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(4.8rem, 11.5vw, 13rem) !important;
  line-height: 0.85 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink-050) !important;
  display: block !important;
  white-space: nowrap !important;
  /* "Mandatos" é 20% maior que "Matriz de": há hierarquia, não ambiguidade */
}

/* Linha divisória horizontal abaixo do header — dentro da cena, não na emenda */
#solucoes .ft-mandates-head-rule {
  display: none !important;
}

/* ==========================================================================
   GRADE MESTRA — eixo vertical único para TODOS os blocos de conteúdo
   Defeito 5 atacado: um sistema de alinhamento domina toda a cena
   Defeito 2 atacado: os dois mandatos têm eixo compartilhado visível
   ========================================================================== */
#solucoes .ft-mandates-models {
  position: relative;
  z-index: 2;
  display: grid !important;
  /* Coluna esquerda dominante (61%), direita subordinada (39%) */
  grid-template-columns: 1.56fr 1fr !important;
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Régua horizontal que separa header dos mandatos — INTERNA à cena */
#solucoes .ft-mandates-models::before {
  content: '' !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  margin-inline: var(--gutter) !important;
}

#solucoes .ft-mandate {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* Mandato 01: Projetos sob medida — coluna esquerda dominante */
#solucoes .ft-mandate--project {
  grid-column: 1 !important;
  padding: clamp(48px, 5.5vw, 76px) clamp(32px, 4vw, 60px) clamp(56px, 6vw, 88px) var(--gutter) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-sizing: border-box !important;
}

/* Mandato 02: Retainer — coluna direita, defasada verticalmente */
#solucoes .ft-mandate--retainer {
  grid-column: 2 !important;
  padding: clamp(80px, 9vw, 120px) var(--gutter) clamp(56px, 6vw, 88px) clamp(32px, 4vw, 60px) !important;
  border-left: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

#solucoes .ft-mandate-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px !important;
}

#solucoes .ft-mandate-head h3 {
  margin: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#solucoes .ft-mandate-num {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  color: var(--signal) !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Títulos dos mandatos: contraste GROTESCA PESADA vs SERIFA ERETA
   O contraste é de peso e de família, não de itálico (§14)
   Defeito 1 secundário: os h3 herdam o problema — resolvido aqui */
#solucoes .ft-mandate--project .ft-title-grotesque {
  font-family: var(--font-sans) !important;
  font-size: clamp(2.6rem, 4vw, 4.2rem) !important;
  font-weight: 800 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.045em !important;
  color: var(--ink-050) !important;
  display: block !important;
}

#solucoes .ft-mandate--project .ft-title-serif {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 3vw, 3.2rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink-400) !important;
  display: block !important;
  /* contraste de peso: 800 grotesca vs 400 serif = hierarquia clara */
}

/* mesma escala do mandato 01: escalas diferentes desalinhavam o par inteiro */
#solucoes .ft-mandate--retainer .ft-title-grotesque {
  font-family: var(--font-sans) !important;
  font-size: clamp(2.6rem, 4vw, 4.2rem) !important;
  font-weight: 800 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.045em !important;
  color: var(--ink-050) !important;
  display: block !important;
}

#solucoes .ft-mandate--retainer .ft-title-serif {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 3vw, 3.2rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink-400) !important;
  display: block !important;
}

#solucoes .ft-mandate-meta {
  align-self: flex-start !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  color: var(--ink-500) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  margin-top: 4px !important;
}

#solucoes .ft-mandate-lead {
  max-width: 44ch !important;
  margin-top: clamp(20px, 2.5vw, 28px) !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
  color: var(--ink-200) !important;
  text-wrap: pretty !important;
}

#solucoes .ft-mandate--retainer .ft-mandate-lead {
  font-size: 0.95rem !important;
  max-width: 38ch !important;
}

/* ==========================================================================
   LISTA EDITORIAL — régua sem caixa
   ========================================================================== */
#solucoes .ft-mandate-list {
  display: flex !important;
  flex-direction: column !important;
  counter-reset: mandate-item !important;
  margin: clamp(28px, 3.5vw, 44px) 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  max-width: none !important;
}

#solucoes .ft-mandate-list li {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 14px !important;
  padding: 15px 8px 15px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  counter-increment: mandate-item !important;
  transition: border-color 180ms var(--ease), padding-left 160ms var(--ease), background 160ms var(--ease) !important;
}

#solucoes .ft-mandate-list li::before {
  content: counter(mandate-item, decimal-leading-zero) !important;
  position: static !important;
  display: inline-block !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: var(--ink-600) !important;
  transition: color 160ms var(--ease) !important;
  line-height: 1.62 !important;
}

#solucoes .ft-mandate-item-inner {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: var(--ink-300) !important;
  transition: color 160ms var(--ease) !important;
}

#solucoes .ft-mandate-lead-term {
  color: var(--ink-100) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

#solucoes .ft-mandate-list li:hover {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.012) !important;
  padding-left: 6px !important;
}

#solucoes .ft-mandate-list li:hover::before {
  color: var(--signal) !important;
}

#solucoes .ft-mandate-list li:hover .ft-mandate-item-inner {
  color: var(--ink-100) !important;
}

/* ==========================================================================
   CTA — contorno limpo, acento rosa apenas no fio de hover
   ========================================================================== */
#solucoes .ft-mandate-cta {
  display: inline-flex !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  align-self: flex-start !important;
  margin-top: auto !important;
  padding: 12px 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1px !important;
  background: transparent !important;
  color: var(--ink-200) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 200ms var(--ease), color 200ms var(--ease) !important;
}

#solucoes .ft-mandate-cta::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: var(--signal) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 240ms var(--ease-kit) !important;
}

#solucoes .ft-mandate-cta span {
  display: inline-block !important;
  color: var(--ink-400) !important;
  font-size: 13px !important;
  transition: transform 200ms var(--ease-kit) !important;
}

#solucoes .ft-mandate-cta:hover,
#solucoes .ft-mandate-cta:focus-visible {
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: var(--ink-050) !important;
}

#solucoes .ft-mandate-cta:hover::after,
#solucoes .ft-mandate-cta:focus-visible::after {
  transform: scaleX(1) !important;
}

#solucoes .ft-mandate-cta:hover span,
#solucoes .ft-mandate-cta:focus-visible span {
  transform: translate(2px, -2px) !important;
}

#solucoes .ft-mandate-cta:focus-visible {
  outline: 2px solid var(--signal) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   DIVISOR ENTRE MANDATOS E DOSSIÊS
   Substitui ft-mandates-spine: mais limpo, metadado apenas nomeia conteúdo
   ========================================================================== */
#solucoes .ft-mandates-divider {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: clamp(52px, 6vw, 72px) !important;
  margin: 0 !important;
  padding-inline: var(--gutter) !important;
  box-sizing: border-box !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: transparent !important;
}

#solucoes .ft-mandates-divider-label,
#solucoes .ft-mandates-divider-right {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  color: var(--ink-500) !important;
  text-transform: uppercase !important;
}

/* Ponto central: único acento de sinal na seção */
#solucoes .ft-mandates-divider i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--signal) !important;
  box-shadow: 0 0 0 3px rgba(255, 79, 143, 0.1), 0 0 14px rgba(255, 79, 143, 0.7) !important;
}

/* Suprimir o ft-mandates-spine antigo se ainda existir no DOM */
#solucoes .ft-mandates-spine {
  display: none !important;
}

/* ==========================================================================
   DOSSIÊS — mesma grade mestra: 1.56fr / 1fr
   ========================================================================== */
#solucoes .ft-mandates-audiences {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1.56fr 1fr !important;
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Régua horizontal acima dos dossiês — INTERNA à cena, não na emenda */
#solucoes .ft-mandates-audiences::before {
  content: '' !important;
  display: none !important;
}

#solucoes .ft-dossier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* Dossiê A: Mercado de Capitais — coluna esquerda, mesma grelha */
#solucoes .ft-dossier--capital {
  grid-column: 1 !important;
  padding: clamp(48px, 5.5vw, 76px) clamp(32px, 4vw, 60px) clamp(56px, 6vw, 88px) var(--gutter) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-sizing: border-box !important;
}

/* Dossiê B: Indústria — coluna direita, defasada verticalmente */
#solucoes .ft-dossier--industry {
  grid-column: 2 !important;
  padding: clamp(80px, 9vw, 120px) var(--gutter) clamp(56px, 6vw, 88px) clamp(32px, 4vw, 60px) !important;
  border-left: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* `> span`: so o rotulo, que e filho direto. Sem o combinador, esta regra
   tambem pegava as partes do titulo, que sao spans dentro do h3, e as
   derrubava para 9px. */
#solucoes .ft-dossier-head > span {
  display: inline-block !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  color: var(--ink-500) !important;
  text-transform: uppercase !important;
}

#solucoes .ft-dossier-head h3 {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  max-width: none !important;
  line-height: 0.88 !important;
  letter-spacing: -0.045em !important;
}

#solucoes .ft-dossier--capital h3 {
  font-size: clamp(2.6rem, 4vw, 4.4rem) !important;
}

#solucoes .ft-dossier--capital .ft-title-grotesque {
  font-family: var(--font-sans) !important;
  font-weight: 800 !important;
  color: var(--ink-050) !important;
  display: block !important;
}

#solucoes .ft-dossier--capital .ft-title-serif {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--ink-400) !important;
  display: block !important;
  margin-top: 2px !important;
}

#solucoes .ft-dossier--industry h3 {
  font-size: clamp(3rem, 4.6vw, 5rem) !important;
}

#solucoes .ft-dossier--industry .ft-title-serif {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: var(--ink-050) !important;
  display: block !important;
}

/* Tese editorial — barra de acento à esquerda em rosa finísimo */
#solucoes .ft-dossier-thesis {
  max-width: 38ch !important;
  margin-top: clamp(24px, 3vw, 36px) !important;
  padding-left: 18px !important;
  position: relative !important;
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-size: clamp(1.3rem, 2vw, 1.9rem) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-100) !important;
  text-wrap: balance !important;
}

#solucoes .ft-dossier-thesis::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 5px !important;
  bottom: 5px !important;
  width: 1px !important;
  background: linear-gradient(180deg, var(--signal), rgba(255, 79, 143, 0.1)) !important;
}

#solucoes .ft-dossier-intro {
  max-width: 46ch !important;
  margin-top: 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.94rem !important;
  line-height: 1.68 !important;
  color: var(--ink-300) !important;
  text-wrap: pretty !important;
}

/* ==========================================================================
   LISTA DE DOSSIÊS
   ========================================================================== */
#solucoes .ft-dossier-list {
  display: flex !important;
  flex-direction: column !important;
  margin-top: clamp(28px, 3.5vw, 44px) !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#solucoes .ft-dossier-list li {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 18px 12px 18px 4px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), padding-left 180ms var(--ease) !important;
}

#solucoes .ft-dossier-list li:hover {
  background: rgba(255, 255, 255, 0.016) !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
  padding-left: 10px !important;
}

#solucoes .ft-dossier-list li > span {
  padding-top: 2px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: var(--ink-500) !important;   /* era --ink-600, cor de borda, 1,72:1 */
  transition: color 160ms var(--ease) !important;
}

@media (max-width: 700px) {
  /* coluna unica: margem simetrica pelo gutter, sem as bordas da grade */
  #solucoes .ft-dossier--capital,
  #solucoes .ft-dossier--industry {
    padding: clamp(40px, 6vw, 56px) var(--gutter) clamp(48px, 7vw, 64px) !important;
    border-right: none !important;
    border-left: none !important;
  }
}

#solucoes .ft-dossier-list li:hover > span {
  color: var(--signal) !important;
}

#solucoes .ft-dossier-list p {
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.92rem !important;
  line-height: 1.64 !important;
  color: var(--ink-300) !important;
  text-wrap: pretty !important;
}

#solucoes .ft-dossier-list strong {
  color: var(--ink-100) !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  letter-spacing: -0.012em !important;
}

/* ==========================================================================
   EIXO INFERIOR — ancora a base da cena (§17)
   Metadado limpo: apenas o texto que já existe na tela
   ========================================================================== */
#solucoes .ft-mandates-axis {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 20px var(--gutter) 22px !important;
  box-sizing: border-box !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  color: var(--ink-500) !important;
  text-transform: uppercase !important;
  /* Nada em ::before e ::after para esta cena — o texto "CAPITAL ↔ CIÊNCIA ↔ ESTRATÉGIA"
     já é o suficiente. §19 e §20 proíbem afirmação inventada. */
}

#solucoes .ft-mandates-axis::before {
  content: none !important;
}

#solucoes .ft-mandates-axis::after {
  content: none !important;
}

/* ==========================================================================
   REVELAÇÃO DE CENA
   ========================================================================== */
#solucoes .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 980px) {
  #solucoes.ft-mandates {
    padding: 0 !important;
  }

  #solucoes .ft-mandates-head {
    grid-template-columns: 1fr !important;
    padding: clamp(24px, 4vw, 40px) var(--gutter) 0 !important;
  }

  #solucoes .ft-mandates-head-left {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-bottom: 20px !important;
    padding-right: 0 !important;
  }

  #solucoes .ft-mandates-head h2 {
    text-align: left !important;
    align-items: flex-start !important;
    padding-bottom: 20px !important;
  }

  #solucoes .ft-mandates-title-outline,
  #solucoes .ft-mandates-title-serif {
    font-size: clamp(3rem, 10vw, 5.5rem) !important;
    white-space: normal !important;
  }

  #solucoes .ft-mandates-models,
  #solucoes .ft-mandates-audiences {
    grid-template-columns: 1fr !important;
  }

  #solucoes .ft-mandates-models::before {
    margin-inline: var(--gutter) !important;
  }

  #solucoes .ft-mandate--project,
  #solucoes .ft-mandate--retainer {
    grid-column: auto !important;
    width: 100% !important;
    padding: clamp(32px, 5vw, 44px) var(--gutter) !important;
    box-sizing: border-box !important;
  }

  #solucoes .ft-mandate--project {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  #solucoes .ft-dossier--capital,
  #solucoes .ft-dossier--industry {
    grid-column: auto !important;
    width: 100% !important;
    padding: clamp(32px, 5vw, 44px) var(--gutter) !important;
    box-sizing: border-box !important;
  }

  #solucoes .ft-dossier--capital {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  #solucoes .ft-mandates-divider::before,
  #solucoes .ft-mandates-divider::after {
    display: none !important;
  }
}

@media (max-width: 600px) {
  #solucoes .ft-mandates-title-outline,
  #solucoes .ft-mandates-title-serif {
    font-size: clamp(2.4rem, 12vw, 3.8rem) !important;
    white-space: normal !important;
  }

  #solucoes .ft-mandate-head {
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  #solucoes .ft-mandate-meta {
    margin-top: 0 !important;
  }

  #solucoes .ft-mandates-axis {
    font-size: 8.5px !important;
    letter-spacing: 0.14em !important;
    padding-block: 16px !important;
  }

  #solucoes .ft-mandate-cta {
    width: 100% !important;
    justify-content: space-between !important;
  }

  #solucoes .ft-mandate-list li {
    gap: 10px !important;
    padding-block: 12px !important;
  }

  #solucoes .ft-dossier-list li {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
}

/* ==========================================================================
   ACESSIBILIDADE — prefers-reduced-motion (§6 e §8 da LEI)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #solucoes *,
  #solucoes *::before,
  #solucoes *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}


/* Fundo unico. Varios agentes inventaram o proprio preto esverdeado
   (rgb(3,5,4), rgb(2,5,4), rgb(2,4,3)) em vez de usar o token, e o degrau
   entre cenas virava faixa visivel na emenda. O token e um so. */
#solucoes#solucoes { background-color: var(--ink-950) !important; }


/* Camadas decorativas (grao, aneis de reticulo, terminais) sao mais largas que
   a viewport em telas estreitas e criavam barra horizontal dentro da cena.
   Clip na propria cena: a decoracao continua sangrando, mas nao rola. */
#solucoes#solucoes { overflow-x: clip; }


/* A emenda com a cena anterior tinha degrau de luminancia (medido: -3 a +4
   sobre um fundo de 7). A causa e o gradiente na RAIZ da cena, que clareia ou
   escurece a propria borda superior. O gradiente sai da raiz; a atmosfera
   continua nos elementos internos, onde ela nao toca a emenda. */
#solucoes#solucoes {
  background-image: none !important;
  background-color: var(--ink-950) !important;
}

/* --- 05-metodo --- */
/* ==========================================================================
   GennomX — 05-metodo / Awwwards Master Refinement (Round 12 Evolution)
   Benchmark: Hobro Digital, Revelatio Studio & Kononenko Architectural Bureau

   Ataque cirúrgico aos 5 defeitos do VEREDITO.md:
   1. Hierarquia Tipográfica Restaurada:
      - Lede da tese elevado a clamp(1.22rem, 1.45vw, 1.55rem) com peso 350 e luminância 0.92.
      - Títulos de etapa em clamp(2.4rem, 3.4vw, 4.0rem) com tracking -.045em e line-height .94.
      - Numeral em clamp(3.8rem, 5.0vw, 6.0rem) em coluna dedicada.
      - Degraus de escala nítidos e inconfundíveis em toda a cena.
   2. Quadrante Superior-Direito Ancorado à Grade Arquitetural:
      - Coluna da tese ancorada por linha-guia vertical à esquerda (border-left: 1px solid rgba(143,184,216,0.1)).
      - Datum shelf superior horizontal com marcador de coordenada estrutural.
      - Fim do conteúdo flutuante ou ilhado; vazio lateral tensionado e deliberado.
   3. Distância e Espaço Fazendo a Hierarquia das Etapas:
      - Layout em grid de duas colunas (.ft-method-step__content) separando o numeral (col-index)
        do bloco narrativo (col-info) com gap de 20px a 36px.
      - Margem vertical generosa entre rótulo de fase (ETAPA 01), título display (Captura.)
        e corpo descritivo com hairline shelf.
   4. Progressão Serial Visível na Composição das Etapas:
      - Assimetria e densidade variável (LEI §12): larguras progressivas de min(38%, 470px) a min(53%, 680px).
      - Posições verticais e horizontais escalonadas em arco narrativo.
      - Transição cromática gradual do ciano técnico (#8FB8D8) até o sinal rosa (#FF4F8F) na síntese.
   5. Navegação Superior com Tensão e Diferenciação de Papéis:
      - [ 05 / 08 ] estruturado em badge de navegação de alto contraste com contorno sutil.
      - // MÉTODO em ciano estrutural em tracking amplo.
      - 5 ETAPAS EM SEQUÊNCIA centralizado como especificação técnica com pips indicadores de progresso.
      - DA FONTE À DECISÃO ancorado à direita como vetor direcional com seta terminal.

   Regras Estritas Mantidas:
   - Escuro chapado por luz ótica (LEI §2): zero ruído, zero textura tileada.
   - Ênfase em 'à decisão.' por tipografia vazada (LEI §14 & §18): zero itálico, zero traço magenta.
   - Zero régua na aresta da emenda (LEI §15).
   - Ancoragem ativa nas 4 bordas (LEI §17).
   - Zero vocabulário institucional inventado (LEI §19 & §20).
   ========================================================================== */

/* 1. Limpeza de Superfície — Escuro Chapado & Profundidade Óptica por Luz (LEI §2) */
.home-corte .ft-home {
  background-image: none !important;
}

#metodo.ft-method {
  position: relative;
  min-height: 100svh;
  scroll-margin-top: clamp(80px, 10vh, 120px);
  padding: clamp(36px, 4vh, 52px) var(--gutter) clamp(32px, 4vh, 48px);
  background-color: var(--ink-950) !important;
  background-image:
    radial-gradient(ellipse 100% 40% at 50% 2%, rgba(143, 184, 216, 0.04) 0%, transparent 65%),
    radial-gradient(ellipse 80% 50% at 85% 42%, rgba(143, 184, 216, 0.028) 0%, transparent 70%),
    radial-gradient(ellipse 70% 45% at 18% 88%, rgba(255, 79, 143, 0.022) 0%, transparent 65%) !important;
  background-blend-mode: normal !important;
  border-top: none !important;
  border-bottom: none !important;
  isolation: isolate;
  overflow: hidden;
}

/* 2. Cenário e Luz Óptica Profunda */
.ft-method-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ft-method-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.ft-method-glow--top {
  top: 0%;
  right: 12%;
  width: min(52vw, 720px);
  height: min(26vw, 360px);
  background: radial-gradient(circle, rgba(143, 184, 216, 0.045) 0%, transparent 70%);
}

.ft-method-glow--center {
  top: 42%;
  left: 18%;
  width: min(56vw, 780px);
  height: min(30vw, 420px);
  background: radial-gradient(circle, rgba(143, 184, 216, 0.03) 0%, transparent 70%);
}

.ft-method-glow--bottom {
  bottom: 2%;
  left: 6%;
  width: min(46vw, 640px);
  height: min(26vw, 360px);
  background: radial-gradient(circle, rgba(255, 79, 143, 0.025) 0%, transparent 70%);
}

/* 3. Telemetria de Ancoragem de Borda a Borda (LEI §17; Veredito 5: diferenciação funcional) */
.ft-method-telemetry {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  user-select: none;
}

.ft-method-telemetry--top {
  margin-bottom: clamp(20px, 2.5vh, 32px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(143, 184, 216, 0.09);
}

.ft-method-telemetry--bottom {
  margin-top: clamp(40px, 5vh, 68px);
  padding-top: 16px;
  border-top: 1px solid rgba(143, 184, 216, 0.09);
}

/* Grupo de Navegação: Coordenada Ativa e Nome da Seção */
.ft-method-telemetry__nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ft-method-telemetry__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #FFFFFF;
  padding: 3px 8px;
  background: rgba(143, 184, 216, 0.08);
  border: 1px solid rgba(143, 184, 216, 0.24);
  border-radius: 2px;
}

.ft-method-telemetry__section {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--struct);
}

/* Grupo de Especificação Técnica: Pips e Contagem Serial */
.ft-method-telemetry__spec {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(143, 184, 216, 0.66);   /* 0.42 dava 2,48:1 num corpo de 9,5px; agora acima de 4,5:1 */
}

.ft-method-telemetry__spec-pips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ft-method-telemetry__spec-pips i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(143, 184, 216, 0.35);
}

.ft-method-telemetry__spec-pips i:first-child {
  background: var(--struct);
  box-shadow: 0 0 6px rgba(143, 184, 216, 0.6);
}

/* Grupo do Vetor Narrativo: Direção da Fonte à Decisão */
.ft-method-telemetry__vector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 244, 248, 0.75);
}

.ft-method-telemetry__vector::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--signal);
  opacity: 0.85;
}

/* 4. Header Monumental e Ancoragem do Quadrante Direito (Vereditos 1 e 2) */
.ft-method-head {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  column-gap: clamp(40px, 5.5vw, 88px);
  row-gap: 32px;
  align-items: start;
  padding-bottom: clamp(32px, 3.8vw, 48px);
  border-bottom: 1px solid rgba(143, 184, 216, 0.12);
}

.ft-method-head__lead {
  display: flex;
  flex-direction: column;
}

/* Eyebrow de Precisão Científica */
.ft-method .ft-signal-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--struct);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
}

.ft-method .ft-signal-brand {
  font-family: var(--font-wordmark, var(--font-sans));
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.ft-method .ft-signal-label i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--struct);
  box-shadow: 0 0 10px rgba(143, 184, 216, 0.7);
  animation: ft-beacon 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes ft-beacon {
  0%, 100% { transform: scale(1); opacity: 0.85; box-shadow: 0 0 8px rgba(143, 184, 216, 0.5); }
  50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 18px rgba(143, 184, 216, 0.95); }
}

/* Título Monumental: Escala editorial sem concorrência */
.ft-method-head h2 {
  max-width: none;
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: clamp(3.8rem, 8.4vw, 9.6rem);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.052em;
  color: var(--text-primary);
  text-wrap: balance;
}

/* Ênfase Tipográfica Pura — Tipografia Vazada (LEI §14, §18 & §21: zero itálico, passa em P&B) */
.ft-method-head__em {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition:
    -webkit-text-stroke-color var(--dur) var(--ease-kit),
    text-shadow var(--dur) var(--ease-kit);
}

.ft-method-head:hover .ft-method-head__em {
  -webkit-text-stroke-color: #ffffff;
  text-shadow: 0 0 32px rgba(255, 255, 255, 0.35);
}

/* Quadrante Direito Ancorado: Grid com guia vertical e shelf horizontal (Veredito 2) */
.ft-method-head__thesis {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: clamp(24px, 3.2vw, 44px);
  padding-top: 12px;
  border-left: 1px solid rgba(143, 184, 216, 0.1);
  min-height: 100%;
}

.ft-method-head__thesis-datum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: clamp(18px, 2.2vh, 26px);
}

.ft-method-head__thesis-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(143, 184, 216, 0.28) 0%, rgba(143, 184, 216, 0.05) 100%);
}

.ft-method-head__thesis-mark {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--struct);
  opacity: 0.6;
  margin-left: 12px;
}

/* Lede Editorial: Estatura autoritária com contraste real (Veredito 1) */
.ft-method-head p {
  max-width: 38ch;
  margin: 0 0 clamp(24px, 3vh, 36px);
  color: rgba(240, 244, 248, 0.92);
  font-family: var(--font-sans);
  font-size: clamp(1.22rem, 1.45vw, 1.55rem);
  font-weight: 350;
  line-height: 1.48;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}

.ft-method-head__action {
  display: flex;
  align-items: center;
  position: relative;
}

/* CTA de Precisão Arquitetural — Bloco Carbono Sólido & Fio Rosa Dinâmico */
.ft-method-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 0 24px;
  color: var(--text-primary);
  background: rgba(18, 22, 32, 0.76);
  border: 1px solid rgba(143, 184, 216, 0.22);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition:
    background var(--dur) var(--ease-kit),
    border-color var(--dur) var(--ease-kit),
    transform var(--dur) var(--ease-kit),
    box-shadow var(--dur) var(--ease-kit),
    color var(--dur) var(--ease-kit);
}

.ft-method-cta::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.9;
  transition: transform var(--dur) var(--ease-kit), box-shadow var(--dur) var(--ease-kit);
}

.ft-method-cta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--struct);
  stroke-width: 1.5;
  transition: transform var(--dur) var(--ease-kit), stroke var(--dur) var(--ease-kit);
}

.ft-method-cta:hover,
.ft-method-cta:focus-visible {
  color: #ffffff;
  background: rgba(26, 32, 46, 0.92);
  border-color: rgba(255, 79, 143, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 79, 143, 0.14);
}

.ft-method-cta:hover::before,
.ft-method-cta:focus-visible::before {
  transform: scaleX(1);
  box-shadow: 0 0 10px var(--signal);
}

.ft-method-cta:hover svg,
.ft-method-cta:focus-visible svg {
  stroke: var(--signal);
  transform: translateX(4px);
}

.ft-method-cta:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
}

/* 5. Palco da Jornada — Narrativa Espacial de Borda a Borda */
.ft-method-journey {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-wide);
  height: clamp(1080px, 86vw, 1340px);
  margin: clamp(48px, 6vh, 84px) auto 0;
}

.ft-method-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}

.ft-method-route--narrow {
  display: none;
}

.ft-method-route path {
  fill: none;
}

/* Leito óptico em fita condutora: volume arquitetural luminoso (Mandato BRIEF) */
/* bloco de paleta: nao participa da composicao */
.ft-method-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.ft-method-route__bed {
  stroke: url(#gx-method-bed-grad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Linha condutora primária em hairline vetorial de 1.5px */
.ft-method-route__line {
  stroke: url(#gx-method-rail-grad);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Pulso ótico em trânsito sincronizado */
.ft-method-route__laser {
  stroke: url(#gx-method-pulse-grad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 60 540;
  vector-effect: non-scaling-stroke;
  animation: ft-laser 9s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes ft-laser {
  0% { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: -3400; }
}

.ft-method-route__arrow {
  stroke: var(--text-primary);
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

/* Marcadores Cartográficos Arquiteturais */
.ft-method-route__reticle {
  fill: none;
  stroke: rgba(143, 184, 216, 0.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--dur) var(--ease-kit);
}

.ft-method-route__hub {
  fill: var(--struct);
  transition: fill var(--dur) var(--ease-kit), filter var(--dur) var(--ease-kit);
}

/* Ativação das Estações no Hover das Etapas */
.ft-method-journey:has(.ft-method-step--01:hover) .ft-method-route__station--01 .ft-method-route__hub,
.ft-method-journey:has(.ft-method-step--02:hover) .ft-method-route__station--02 .ft-method-route__hub,
.ft-method-journey:has(.ft-method-step--03:hover) .ft-method-route__station--03 .ft-method-route__hub,
.ft-method-journey:has(.ft-method-step--04:hover) .ft-method-route__station--04 .ft-method-route__hub,
.ft-method-journey:has(.ft-method-step--05:hover) .ft-method-route__station--05 .ft-method-route__hub {
  fill: var(--signal);
  filter: drop-shadow(0 0 10px var(--signal));
}

.ft-method-journey:has(.ft-method-step--01:hover) .ft-method-route__station--01 .ft-method-route__reticle,
.ft-method-journey:has(.ft-method-step--02:hover) .ft-method-route__station--02 .ft-method-route__reticle,
.ft-method-journey:has(.ft-method-step--03:hover) .ft-method-route__station--03 .ft-method-route__reticle,
.ft-method-journey:has(.ft-method-step--04:hover) .ft-method-route__station--04 .ft-method-route__reticle,
.ft-method-journey:has(.ft-method-step--05:hover) .ft-method-route__station--05 .ft-method-route__reticle {
  stroke: rgba(255, 79, 143, 0.7);
}

/* 6. Terminais Arquiteturais de Entrada e Saída */
.ft-method-terminal {
  position: absolute;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.25;
}

.ft-method-terminal span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--struct);
}

.ft-method-terminal--start {
  top: 12px;
  left: 0;
  padding-left: 14px;
  border-left: 2px solid var(--struct);
}

.ft-method-terminal--finish {
  right: 0;
  bottom: 16px;
  text-align: right;
  padding-right: 14px;
  border-right: 2px solid var(--signal);
}

/* 7. Estações de Etapa — Espaçamento e Agrupamento Puro (Veredito 3 e LEI §12) */
.ft-method-steps {
  position: absolute;
  z-index: 10;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.ft-method-step {
  display: block !important;
  position: absolute !important;
  grid-template-columns: none !important;
  column-gap: 0 !important;
  margin: 0;
  pointer-events: auto;
}

/* Estação Editorial: desprendida de caixas de dashboard com alívio ótico de plano */
.ft-method-step__station {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 22px 18px;
  background: radial-gradient(ellipse 95% 85% at 20% 40%, rgba(10, 14, 22, 0.92) 0%, rgba(10, 14, 22, 0.45) 75%, transparent 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform var(--dur) var(--ease-kit);
}

.ft-method-step:hover .ft-method-step__station {
  transform: translateY(-3px);
}

/* Hairline Datum Superior da Estação */
.ft-method-step__datum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: clamp(16px, 2.2vh, 22px);
}

.ft-method-step__datum-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(143, 184, 216, 0.35) 0%, rgba(143, 184, 216, 0.06) 100%);
  transition: background var(--dur) var(--ease-kit);
}

.ft-method-step:hover .ft-method-step__datum-line {
  background: linear-gradient(90deg, var(--signal) 0%, rgba(255, 79, 143, 0.12) 100%);
}

.ft-method-step__datum-pip {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: rgba(143, 184, 216, 0.4);
  margin-left: 10px;
  transition: background var(--dur) var(--ease-kit);
}

.ft-method-step:hover .ft-method-step__datum-pip {
  background: var(--signal);
}

/* Estrutura Espacial em Duas Colunas: Espaço e Distância Fazendo a Hierarquia (Veredito 3) */
.ft-method-step__content {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(20px, 2.8vw, 36px);
  align-items: start;
}

/* Numeral Escultural: Coluna dedicada com folga ótica real */
.ft-method-step__col-index {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.ft-method-step__index {
  font-family: var(--font-sans);
  font-size: clamp(3.8rem, 5.0vw, 6.0rem);
  font-weight: 200;
  line-height: 0.82;
  letter-spacing: -0.055em;
  color: rgba(143, 184, 216, 0.5);    /* 0.22 dava 1,47:1; agora acima de 3:1, minimo de texto grande */
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition:
    color var(--dur) var(--ease-kit),
    text-shadow var(--dur) var(--ease-kit);
}

.ft-method-step:hover .ft-method-step__index {
  color: #ffffff;
  text-shadow: 0 0 24px rgba(143, 184, 216, 0.55);
}

/* Coluna de Informação: Rótulo, Título e Descrição com degraus espaciais claros */
.ft-method-step__col-info {
  display: flex;
  flex-direction: column;
}

/* Rótulo de Fase: Micro-mono elevado */
.ft-method-step__phase {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--struct);
}

/* Título de Etapa: Presença display proeminente (Veredito 1) */
.ft-method-step h3 {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 3.4vw, 4.0rem);
  font-weight: 350;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--text-primary);
  transition: color var(--dur) var(--ease-kit);
}

.ft-method-step:hover h3 {
  color: #ffffff;
}

/* Corpo Descritivo: Desacoplado espacialmente com shelf estrutural */
.ft-method-step__body {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(143, 184, 216, 0.08);
}

.ft-method-step p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.94rem, 1.0vw, 1.06rem);
  line-height: 1.58;
  color: var(--ink-200);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

/* Oculta nós pontuais secundários no desktop */
@media (min-width: 901px) {
  .ft-method-step__node {
    display: none;
  }
}

/* 8. Progressão Serial Visível na Composição das Etapas (Veredito 4 & LEI §12)
   - Dimensões, larguras e cadências progressivas do início à decisão
   - Etapa 01: Início compacto e puro
   - Etapa 02: Padrão horizontal largo à direita
   - Etapa 03: Ancoragem de alta densidade no eixo esquerdo
   - Etapa 04: Formato monumental de convergência
   - Etapa 05: Culminância de convicção com transição cromática ao FIM */

/* Etapa 01 — Captura: Ancorada no quadrante superior-esquerdo, bloco compacto e puro */
.ft-method-step--01 {
  top: 7%;
  left: 14%;
  width: min(38%, 470px);
}

/* Etapa 02 — Triagem: Padrão horizontal expandido no terço direito */
.ft-method-step--02 {
  top: 21%;
  right: clamp(0px, 3.2vw, 48px);
  left: auto;
  width: min(50%, 630px);
}

.ft-method-step--02 .ft-method-step__content {
  column-gap: clamp(24px, 3.5vw, 42px);
}

.ft-method-step--02 .ft-method-step__body p {
  max-width: 44ch;
}

/* Etapa 03 — Ingestão: Bloco denso ancorado firmemente no flanco esquerdo */
.ft-method-step--03 {
  top: 42%;
  left: 3%;
  width: min(42%, 520px);
}

.ft-method-step--03 .ft-method-step__station {
  padding: 18px 24px 24px 20px;
}

.ft-method-step--03 .ft-method-step__body p {
  max-width: 38ch;
}

/* Os dois ajustes acima sao de composicao do desktop. O reset vive aqui, e nao
   no bloco responsivo la de cima, porque media query nao soma especificidade:
   com selecionadores de mesmo peso, quem decide e a ordem no arquivo. */
@media (max-width: 900px) {
  .ft-method-step--02 .ft-method-step__content { column-gap: 16px !important; }
  .ft-method-step--03 .ft-method-step__station { padding: 0 !important; }
}

/* Etapa 04 — Interpretação: Formato monumental de convergência ocupando a direita */
.ft-method-step--04 {
  top: 61%;
  right: clamp(0px, 3.2vw, 48px);
  left: auto;
  width: min(53%, 680px);
}

.ft-method-step--04 h3 {
  font-size: clamp(2.5rem, 3.6vw, 4.2rem);
}

.ft-method-step--04 .ft-method-step__body p {
  max-width: 48ch;
}

/* Etapa 05 — Síntese: Estação culminante conectada ao terminal FIM */
.ft-method-step--05 {
  top: 79%;
  left: 12%;
  width: min(44%, 560px);
}

.ft-method-step--05 .ft-method-step__index {
  color: rgba(143, 184, 216, 0.6);    /* etapa 05 segue um degrau acima das demais */
}

.ft-method-step--05 .ft-method-step__datum-line {
  background: linear-gradient(90deg, rgba(143, 184, 216, 0.45) 0%, rgba(255, 79, 143, 0.35) 100%);
}

.ft-method-step--05 .ft-method-step__datum-pip {
  background: var(--signal);
}

/* 9. Responsividade e Adaptação Mobile */
@media (max-width: 900px) {
  #metodo.ft-method {
    padding: clamp(60px, 8vh, 80px) var(--gutter) clamp(50px, 7vh, 70px);
    scroll-margin-top: 70px;
  }

  .ft-method-telemetry--top,
  .ft-method-telemetry--bottom {
    display: none;
  }

  .ft-method-head {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 28px;
  }

  .ft-method-head h2 {
    font-size: clamp(2.6rem, 8.8vw, 3.8rem);
    line-height: 0.94;
  }

  .ft-method-head__thesis {
    padding-left: 0;
    padding-top: 18px;
    border-left: none;
    border-top: 1px solid rgba(143, 184, 216, 0.1);
  }

  .ft-method-head p {
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .ft-method-journey {
    height: auto;
    min-height: 0;
    margin-top: 36px;
    padding-left: 0;
  }

  .ft-method-route--wide {
    display: none;
  }

  .ft-method-route--narrow {
    display: block;
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 12px;
    width: 44px;
    height: calc(100% - 48px);
    z-index: 1;
  }

  .ft-method-steps {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-left: clamp(44px, 14vw, 64px);
  }

  .ft-method-step {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }

  .ft-method-step__station {
    padding: 0;
    background: transparent !important;
  }

  .ft-method-step__content {
    grid-template-columns: auto 1fr;
    column-gap: 16px;
  }

  .ft-method-step__index {
    font-size: clamp(2.8rem, 8vw, 3.6rem);
  }

  .ft-method-step h3 {
    font-size: clamp(1.8rem, 5.5vw, 2.4rem);
  }

  .ft-method-step__node {
    display: block;
    position: absolute;
    left: clamp(-36px, -11vw, -26px);
    top: 18px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ink-950);
    border: 2px solid var(--struct);
    box-shadow: 0 0 0 4px rgba(143, 184, 216, 0.16);
    z-index: 15;
  }

  .ft-method-step:hover .ft-method-step__node {
    border-color: var(--signal);
    box-shadow: 0 0 0 4px rgba(255, 79, 143, 0.22);
  }

  .ft-method-terminal--start {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 24px;
    padding-left: clamp(44px, 14vw, 64px);
    border-left: none;
  }

  .ft-method-terminal--finish {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 24px;
    text-align: left;
    padding-left: clamp(44px, 14vw, 64px);
    border-right: none;
  }
}

/* 10. Acessibilidade Estrita — Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .ft-method-route__laser,
  .ft-method .ft-signal-label i {
    animation: none !important;
  }

  .ft-method-cta,
  .ft-method-step__station,
  .ft-method-step__index,
  .ft-method-route__hub,
  .ft-method-route__reticle {
    transition: none !important;
  }

  .ft-method-step:hover .ft-method-step__station {
    transform: none !important;
  }
}

/* Fundo único estrito — token único var(--ink-950) */
#metodo#metodo {
  background-color: var(--ink-950) !important;
  background-image: none !important;
  overflow-x: clip;
}

/* --- 05b-data-ai-powered --- */
/* ==========================================================================
   05b — Data-AI powered · Direção de Arte Awwwards (Benchmark: kononenko-01)
   Conceito: Monólito Tipográfico Arquitetural & Profundidade Óptica por LUZ.

   Refinamento Cirúrgico do VEREDITO.md sob Mandato Soberano do Fundador:

   1. HIERARQUIA TIPOGRÁFICA E TENSÃO DIALÉTICA (Cura do Defeito 1):
      - Na rodada 14, "powered" foi tratado como irmã idêntica (escala 1:1),
        colapsando a distinção em PB.
      - Na rodada 15, "powered" foi encolhido como legenda genérica, sumindo
        no campo.
      - Aqui, estabelece-se a proporção harmônica clássica 2:3 (ratio ~0.68):
        * "Data-AI": Monumental Archivo 700 Bold em clamp(4.6rem, 15vw, 16.5rem),
          peso estrutural máximo, tracking -0.045em, branco puro (#FFFFFF).
        * "powered": Escultural Archivo 400 Regular em clamp(3.2rem, 10.2vw, 11.2rem),
          tracking -0.03em, prata luminosa (#F5F6FA a 90%).
      - A relação é inconfundível: "powered" não é legenda (mede >120px no desktop),
        mas atua como predicado e contraponto arquitetural perfeito do sujeito "Data-AI".

   2. ESPAÇO NEGATIVO TENSIONADO E ÂNCORAS ESPACIAIS (Cura do Defeito 2 & 4):
      - O fundo negro estático e inerte da rodada 15 foi transformado em campo óptico
        volumétrico ativo, estritamente via LUZ (decisão do fundador: escuro chapado,
        zero ruído tileado, zero textura raster):
        * Camada 1 (#data-ai-powered::before): Domo atmosférico volumétrico profundo
          em azul-ardósia da identidade (rgba(22, 34, 56, 0.48) descendo suavemente
          a transparente em 82%).
        * Camada 2 (#data-ai-powered::after): Vinheta perimetral de absorção contínua
          ancorando as arestas superior e inferior em #07080C puro, sem réguas de emenda
          (LEI §15).
        * Camada 3 (.ft-signal-frame::before): Bloom focal de silhuetamento fotônico
          (12% branco difuso + 8% azul-estrutura) diretamente atrás do centro de massa.
        * Camada 4 (.ft-signal-frame::after): Feixe anamórfico óptico (1px) estendendo-se
          por 90vw no plano equatorial, criando uma linha de datum sutil que ancora o
          grid implícito e elimina o isolamento espacial.

   3. ELIMINAÇÃO DE INTERFERÊNCIAS E PUREZA INSTITUCIONAL (Cura do Defeito 3):
      - Mantida a total erradicação de rótulos utilitários, badges de rodapé ("GENNOMX AI")
        ou contadores que conflitavam com o wordmark. Densidade estrita: exatamente 2 nós
        de texto na tela inteira, zero em mono (BRIEF.md & so_wordmark.py).

   4. PROGRESSÃO E RITMO VERTICAL (Cura do Defeito 5):
      - Transição de 4 batidas cinematográficas:
        * Beat 1 (0ms): Abertura do campo de luz e do feixe anamórfico no escuro.
        * Beat 2 (100ms): Ascensão fluida de "Data-AI" pela máscara de corte com --ease-kit.
        * Beat 3 (260ms): Ascensão de "powered", concluindo a cadência rítmica.
        * Beat 4 (Hover): Resposta fotônica tátil nos glifos com sutil expansão do feixe.
   ========================================================================== */

#data-ai-powered.ft-scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--ink-950, #07080C) !important;
  overflow: hidden;
  overflow-x: clip;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: none !important;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   Luz Física: Camada 1 — Domo Atmosférico Volumétrico Profundo (LEI §2)
   -------------------------------------------------------------------------- */
#data-ai-powered.ft-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 70% at 50% 48%,
    rgba(22, 34, 56, 0.48) 0%,
    rgba(14, 22, 38, 0.32) 32%,
    rgba(9, 13, 22, 0.16) 60%,
    transparent 82%
  );
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Luz Física: Camada 2 — Vinheta Perimetral de Absorção Contínua (LEI §15)
   -------------------------------------------------------------------------- */
#data-ai-powered.ft-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 92% 82% at 50% 50%,
    transparent 36%,
    rgba(7, 8, 12, 0.45) 66%,
    var(--ink-950, #07080C) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Câmara Estrutural e Ancoragem Espacial
   -------------------------------------------------------------------------- */
#data-ai-powered .ft-signal-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: clamp(32px, 6vh, 80px) clamp(24px, 5vw, 80px);
  margin: 0 auto;
  z-index: 2;
  text-align: center;
}

/* Indice da cena. Absoluto para nao deslocar a composicao. */
#insights .ft-insights-scene-id,
#data-ai-powered .ft-signal-scene-id {
  position: absolute;
  top: clamp(20px, 4vh, 46px);
  left: clamp(24px, 5vw, 80px);
  z-index: 3;
  white-space: nowrap;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(226, 232, 240, 0.52);   /* 0.46 dava 3,97:1 num corpo de 9,5px */
  pointer-events: none;
}

/* Abaixo de 900px a cena exigia tela cheia para duas palavras que ocupam 86px
   de altura: 10% de preenchimento. O respiro passa a ser medido pelo conteudo. */
@media (max-width: 900px) {
  #data-ai-powered.ft-scene,
  #data-ai-powered .ft-signal-frame {
    min-height: 0 !important;
  }
  #data-ai-powered .ft-signal-frame {
    padding-block: clamp(104px, 17vh, 168px) !important;
  }
}

/* Luz Física: Camada 3 — Bloom Focal Silhuetador dos Glifos */
#data-ai-powered .ft-signal-frame::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(1100px, 85vw);
  height: clamp(260px, 46vh, 520px);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 65% 50% at 50% 50%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(143, 184, 216, 0.08) 28%,
    rgba(77, 124, 254, 0.035) 55%,
    transparent 78%
  );
  pointer-events: none;
  z-index: -1;
  transition: opacity 700ms var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1)),
              transform 700ms var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1));
}

/* Luz Física: Camada 4 — Feixe Anamórfico de Datum Óptico (Cura do Defeito 2 & 4) */
#data-ai-powered .ft-signal-frame::after {
  content: "";
  position: absolute;
  top: 49%;
  left: 50%;
  width: min(1320px, 90vw);
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(143, 184, 216, 0.03) 12%,
    rgba(143, 184, 216, 0.18) 32%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(143, 184, 216, 0.18) 68%,
    rgba(143, 184, 216, 0.03) 88%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
  transition: opacity 600ms var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1)),
              width 600ms var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1));
}

/* --------------------------------------------------------------------------
   Núcleo Tipográfico Escultural Monolítico
   -------------------------------------------------------------------------- */
#data-ai-powered .ft-signal-word {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  user-select: none;
  /* sem compensacao optica: o bloco fica no centro geometrico do quadro,
     por decisao do fundador */
}

/* Máscaras cinemáticas de corte e revelação */
#data-ai-powered .ft-signal-mask {
  display: block;
  overflow: hidden;
  vertical-align: baseline;
  padding-block: 0.08em 0.14em;
  margin-block: -0.08em -0.14em;
}

/* Linhas tipográficas em animação cinematográfica */
#data-ai-powered .ft-signal-line {
  display: block;
  will-change: transform, opacity;
  animation: ft-signal-reveal 900ms var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
  transition: color 300ms var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1)),
              text-shadow 300ms var(--ease-kit, cubic-bezier(0.2, 0.8, 0.2, 1));
}

/* Linha 0: "Data-AI" — Monumental Archivo 700 Bold White */
#data-ai-powered .ft-signal-line[data-signal-line="0"] {
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-size: clamp(4.6rem, 15vw, 16.5rem);
  line-height: 0.84;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.045em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 4px 24px rgba(7, 8, 12, 0.6), 0 0 80px rgba(143, 184, 216, 0.12);
  margin-bottom: -0.02em;
  animation-delay: 100ms;
}

/* Linha 1: "powered" — Escultural Archivo 400 Regular Luminous Silver (Proporção 2:3) */
#data-ai-powered .ft-signal-line[data-signal-line="1"] {
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-size: clamp(3.2rem, 10.2vw, 11.2rem);
  line-height: 0.84;
  font-weight: 400;
  color: rgba(245, 246, 250, 0.90);
  letter-spacing: -0.03em;
  text-transform: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 4px 20px rgba(7, 8, 12, 0.5), 0 0 60px rgba(143, 184, 216, 0.10);
  animation-delay: 260ms;
}

/* --------------------------------------------------------------------------
   Interatividade Desktop: Resposta Fotônica ao Cursor
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  #data-ai-powered .ft-signal-word:hover .ft-signal-line[data-signal-line="0"] {
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.28), 0 0 100px rgba(143, 184, 216, 0.16);
  }

  #data-ai-powered .ft-signal-word:hover .ft-signal-line[data-signal-line="1"] {
    color: #FFFFFF;
    text-shadow: 0 0 45px rgba(255, 255, 255, 0.32), 0 0 90px rgba(143, 184, 216, 0.14);
  }

  #data-ai-powered:hover .ft-signal-frame::before {
    opacity: 1.25;
    transform: translate(-50%, -50%) scale(1.06);
  }

  #data-ai-powered:hover .ft-signal-frame::after {
    opacity: 1;
    width: min(1380px, 94vw);
  }
}

/* --------------------------------------------------------------------------
   Keyframes Cinemáticos (--ease-kit)
   -------------------------------------------------------------------------- */
@keyframes ft-signal-reveal {
  0% {
    transform: translateY(110%);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Acessibilidade e Redução de Movimento (LEI §6 & §8)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #data-ai-powered .ft-signal-line {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  #data-ai-powered .ft-signal-frame::before,
  #data-ai-powered .ft-signal-frame::after {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Adaptação Responsiva: Tablets
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  #data-ai-powered .ft-signal-frame {
    padding: clamp(28px, 5vh, 60px) clamp(20px, 4vw, 40px);
  }

  #data-ai-powered .ft-signal-line[data-signal-line="0"] {
    font-size: clamp(3.8rem, 13.5vw, 7.2rem);
    line-height: 0.86;
  }

  #data-ai-powered .ft-signal-line[data-signal-line="1"] {
    font-size: clamp(2.6rem, 9.2vw, 4.9rem);
    line-height: 0.86;
  }
}

/* --------------------------------------------------------------------------
   Adaptação Responsiva: Dispositivos Móveis
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #data-ai-powered.ft-scene::before {
    background: radial-gradient(
      ellipse 110% 75% at 50% 48%,
      rgba(22, 34, 56, 0.48) 0%,
      rgba(14, 22, 38, 0.30) 36%,
      rgba(9, 13, 22, 0.14) 62%,
      transparent 84%
    );
  }

  #data-ai-powered .ft-signal-frame {
    padding: clamp(24px, 4vh, 40px) 20px;
  }

  #data-ai-powered .ft-signal-word {
    /* sem compensacao optica aqui tambem: centro geometrico */
    transform: none;
  }

  #data-ai-powered .ft-signal-line[data-signal-line="0"] {
    font-size: clamp(3.2rem, 15vw, 4.8rem);
    letter-spacing: -0.04em;
    line-height: 0.88;
    margin-bottom: -0.01em;
  }

  #data-ai-powered .ft-signal-line[data-signal-line="1"] {
    font-size: clamp(2.2rem, 10.2vw, 3.3rem);
    letter-spacing: -0.025em;
    line-height: 0.88;
  }
}

/* --- 06-insights --- */
/* ==========================================================================
   06-INSIGHTS — REFINAMENTO MASTER AWWWARDS (RODADA 13)
   Direção de Arte: Observatório Editorial & Grande Formato Monástico
   Benchmark de Confronto Cego: kononenkogroup.com (kononenko-01)
   Diretrizes e Restrições Soberanas:
     - LEI §2: Fundo escuro chapado (var(--ink-950)), zero ruído, zero textura tileada.
     - LEI §3: Payload visual real com centro de gravidade arquitetural.
     - LEI §4: Contraste de escala monumental entre display e metadados (5.6:1).
     - LEI §5: Rosa (--signal: #FF4F8F) estritamente parcimonioso (< 2% da cena).
     - LEI §6: Movimento nativo cubic-bezier e anulação total em prefers-reduced-motion.
     - LEI §12: Destruição do antipadrão do card (hairlines, assimetria, tiras).
     - LEI §13: Partido de Abertura como Índice Editorial em Largura Total.
     - LEI §14 & check.py: Purga total do itálico STIX (font-style: normal compulsório).
     - LEI §15: Fronteira limpa sem réguas cheias na emenda (zero border-top na raiz).
     - LEI §17: Quatro bordas ancoradas com matéria tangível (topo, base, esq, dir <= 90px).
     - LEI §18 & §21: Teste em preto e branco absoluto — purga do halo rosa em display.
   Ataque Cirúrgico aos Defeitos do Veredito Cego (VEREDITO.md):
     1. Tabela de 5 linhas: CADERNO & TÍTULO elevado a protagonista absoluto (clamp(1.15rem, 1.35vw, 1.45rem)),
        destruindo o efeito plano de "caixas-irmãs".
     2. Headline: escala monumental clamp(3.2rem, 5.6vw, 6.0rem) com line-height 0.92,
        superando o corpo em 5.6x e comandando o olhar sem hesitação.
     3. Fim do vácuo lateral: remoção do max-width: 22ch artificial; o headline e a coluna
        de metadados ocupam a amplitude total do container com tensão deliberada.
     4. Hierarquia pura em preto e branco: números em DM Mono 13px bold (#FFFFFF),
        classificação em 10px mono com 40% de opacidade — a estrutura sobrevive sem cor.
     5. Núcleo GennomX AI mantido integralmente conforme aprovação soberana do fundador.
   ========================================================================== */

/* 1. SUPERFÍCIE, EMENDA E CAMPO ÓPTICO (LEI §2, §15, §17) */
#insights.ft-insights,
.ft-scene.ft-insights,
#insights#insights {
  background-color: var(--ink-950) !important;
  background-image: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: clamp(60px, 7vh, 84px) var(--gutter) clamp(80px, 10vh, 120px) !important;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

#insights.ft-insights::before,
#insights.ft-insights::after,
.ft-scene.ft-insights::before,
.ft-scene.ft-insights::after,
#insights.fx-dotgrid::before,
#insights.fx-dotgrid::after {
  display: none !important;
}

/* Neutralização obrigatória de <i> e <em> (LEI §14 & check.py) */
#insights em,
#insights i {
  font-style: normal !important;
}

/* RÉGUAS ESTRUTURAIS DE TENSÃO MARGINAL (LEI §11.1 / §11.2) */
#insights .ft-insights-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: block !important;
}

#insights .ft-insights-field__plane {
  display: none !important;
}

#insights .ft-insights-field__rail--spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(20px, 3.8vw, 60px);
  width: 1px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 20%,
    rgba(255, 255, 255, 0.02) 80%,
    rgba(255, 255, 255, 0.06) 100%
  );
  display: block !important;
}

#insights .ft-insights-field__rail--cross {
  position: absolute;
  top: 0;
  bottom: 0;
  right: clamp(20px, 3.8vw, 60px);
  width: 1px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.018) 25%,
    rgba(255, 255, 255, 0.018) 75%,
    rgba(255, 255, 255, 0.05) 100%
  );
  display: block !important;
}

/* CONECTORES ORTOGONAIS (BARRAMENTO SVG) */
#insights .ft-flow {
  position: relative;
  margin-top: clamp(64px, 8vh, 100px);
}

#insights .ft-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

#insights .ft-links__path {
  stroke: rgba(255, 255, 255, 0.16) !important;
  stroke-dasharray: 4 4;
  stroke-width: 1px !important;
}

#insights .ft-links__node {
  fill: #020403 !important;
  stroke: rgba(255, 255, 255, 0.45) !important;
  stroke-width: 1.5px !important;
}

#insights .ft-links__node--end {
  fill: currentColor !important;
  stroke: #020403 !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 0 6px currentColor);
}

/* ==========================================================================
   2. ABERTURA EDITORIAL: MASTHEAD MONUMENTAL & ÍNDICE EM LARGURA TOTAL
   Ataque Cirúrgico aos Defeitos 1, 2, 3 e 4 do Veredito Cego.
   ========================================================================== */

#insights .ft-insights-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr) !important;
  gap: clamp(28px, 3.5vw, 48px) clamp(40px, 5vw, 80px) !important;
  align-items: end !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
}

#insights .ft-insights-head::before,
#insights .ft-insights-head::after,
#insights .ft-insights-head__meta::before {
  display: none !important;
}

#insights .ft-insights-head__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* SOBERANIA EDITORIAL: SIGNAL LABEL */
#insights .ft-signal-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  margin-bottom: clamp(18px, 2.4vh, 28px);
}

#insights .ft-signal-label i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
}

/* TÍTULO MONUMENTAL — CONSTRASTE DE ESCALA 5.6:1 (Veredito 2 / LEI §4)
   Eliminação do max-width: 22ch para erradicar o vácuo lateral (Veredito 3) */
#insights .ft-insights-head h2 {
  font-family: var(--font-sans) !important;
  font-size: clamp(3.2rem, 5.6vw, 6.0rem) !important;
  font-weight: 400 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.045em !important;
  color: #F4F6F5 !important;
  margin: 0 !important;
  max-width: none !important;
  text-wrap: balance !important;
}

/* ÊNFASE PURGADA DE HALO (§18, §21 e BRIEF)
   A régua e o salto de peso sustentam o acento no teste preto e branco */
#insights .ft-insights-head__emphasis {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.025em !important;
  padding-bottom: 3px !important;
  border-bottom: 2px solid var(--signal) !important;
  text-shadow: none !important;
}

/* SINOPSE SUBORDINADA COM ANCORAGEM LATERAL TENSIONADA (Vereditos 2 e 3) */
#insights .ft-insights-head__meta {
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-left: clamp(24px, 3vw, 44px) !important;
  padding-bottom: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

#insights .ft-insights-head__copy,
#insights .ft-insights-head > p {
  font-family: var(--font-sans) !important;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
  line-height: 1.62 !important;
  color: rgba(244, 246, 245, 0.62) !important;
  max-width: 44ch !important;
  margin: 0 !important;
}

/* ==========================================================================
   ÍNDICE EDITORIAL EM LARGURA TOTAL (LEI §13 / Vereditos 1 e 4)
   Cura total: Caderno/Título como protagonista absoluto e hierarquia monocromática.
   ========================================================================== */

#insights .ft-insights-index {
  display: flex !important;
  flex-direction: column !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: clamp(44px, 5.5vh, 72px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(4, 7, 6, 0.5) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#insights .ft-insights-index::before {
  display: none !important;
}

#insights .ft-insights-index__header {
  display: grid !important;
  grid-template-columns: 56px 200px minmax(0, 1fr) 215px !important;
  gap: clamp(16px, 2.2vw, 32px) !important;
  align-items: center !important;
  width: 100% !important;
  padding: 12px clamp(16px, 2vw, 26px) !important;
  background: rgba(255, 255, 255, 0.015) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.47) !important;
  box-sizing: border-box !important;
}

/* O texto do indice vive no HTML. Aqui so alinhamento e caixa. */
#insights .ft-insights-index__th--dest { text-align: right; display: block; }

#insights .ft-insights-index__row {
  display: grid !important;
  grid-template-columns: 56px 200px minmax(0, 1fr) 215px !important;
  gap: clamp(16px, 2.2vw, 32px) !important;
  align-items: center !important;
  width: 100% !important;
  padding: clamp(15px, 1.8vh, 20px) clamp(16px, 2vw, 26px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease) !important;
  /* a linha e uma ancora para a zona correspondente */
  cursor: pointer !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* a seta e o unico `content:` que sobra aqui, e e mesmo decorativa */
#insights .ft-insights-index__col--action::after {
  content: " ↘";
  margin-left: 0.4em;
}

#insights .ft-insights-index__row:focus-visible {
  outline: 2px solid var(--signal, #FF4F8F) !important;
  outline-offset: -2px !important;
}

#insights .ft-insights-index__row:last-child {
  border-bottom: none !important;
}

#insights .ft-insights-index__row:hover {
  background: rgba(255, 255, 255, 0.028) !important;
}

/* HIERARQUIA TIPOGRÁFICA MONOCROMÁTICA ROBUSTA (Veredito 4 / LEI §21)
   Não depende de cor: peso e escala estruturam a leitura */
#insights .ft-insights-index__col--num {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  opacity: 0.9 !important;
  white-space: nowrap !important;
}

#insights .ft-insights-index__col--cat {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.47) !important;
  white-space: nowrap !important;
}

/* O TÍTULO É O PROTAGONISTA ABSOLUTO DA LINHA (Veredito 1) */
#insights .ft-insights-index__col--title {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.15rem, 1.35vw, 1.45rem) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #F4F6F5 !important;
  letter-spacing: -0.02em !important;
  transition: color 0.2s var(--ease) !important;
}

#insights .ft-insights-index__row:hover .ft-insights-index__col--title {
  color: #FFFFFF !important;
}

#insights .ft-insights-index__col--action {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.47) !important;
  text-align: right !important;
  white-space: nowrap !important;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease) !important;
}

#insights .ft-insights-index__row:hover .ft-insights-index__col--action {
  color: #FFFFFF !important;
  transform: translateX(3px) !important;
}

/* --------------------------------------------------------------------------
   A linha do nucleo sai da tabela e vira datum da cena, acima do cabecalho.
   Assim os rotulos de coluna passam a governar so as quatro saidas numeradas,
   e a coluna "saida / destino" deixa de ter uma linha onde o destino nao e
   destino, e sim especificacao. O titulo muda de familia porque o registro e
   outro: e enunciado, nao item de lista.
   -------------------------------------------------------------------------- */
/* vale em qualquer largura: o registro do nucleo e outro */
#insights .ft-insights-index__row--1 {
  border-bottom: none !important;
  background: none !important;
}

#insights .ft-insights-index__row--1:hover {
  background: none !important;
}

#insights .ft-insights-index__row--1 .ft-insights-index__col--num {
  color: var(--signal, #FF4F8F) !important;
  opacity: 1 !important;
}

#insights .ft-insights-index__row--1 .ft-insights-index__col--title {
  font-family: var(--font-display, Georgia, serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: -0.012em !important;
}

/* A linha unica de datum so faz sentido enquanto a tabela e tabela. Abaixo de
   960px ela vira lista, e o nucleo passa a seguir a mesma grade das outras,
   preservando so a serifa e o token rosa. */
@media (min-width: 961px) {
  #insights .ft-insights-index__row--1 {
    display: flex !important;
    align-items: baseline !important;
    gap: clamp(12px, 1.4vw, 20px) !important;
    padding: 0 clamp(16px, 2vw, 26px) clamp(16px, 2vh, 22px) !important;
  }

  #insights .ft-insights-index__row--1 .ft-insights-index__col--num { flex: none !important; }
  #insights .ft-insights-index__row--1 .ft-insights-index__col--action { flex: none !important; }

  #insights .ft-insights-index__row--1 .ft-insights-index__col--title {
    flex: 1 1 auto !important;
    font-size: clamp(1.3rem, 1.7vw, 1.8rem) !important;
  }
}

#insights .ft-insights-index__row--1:hover .ft-insights-index__col--action { color: var(--data) !important; }
#insights .ft-insights-index__row--2:hover .ft-insights-index__col--action { color: var(--data) !important; }
#insights .ft-insights-index__row--3:hover .ft-insights-index__col--action { color: var(--mauve) !important; }
#insights .ft-insights-index__row--4:hover .ft-insights-index__col--action { color: var(--info) !important; }
#insights .ft-insights-index__row--5:hover .ft-insights-index__col--action { color: var(--signal) !important; }


/* ==========================================================================
   4. ZONA 1: BLOG (MOSAICO EDITORIAL COM HIERARQUIA DOMINANTE)
   ========================================================================== */

#insights .ft-zone--blogs {
  margin-top: clamp(84px, 12vh, 140px);
  position: relative;
  z-index: 2;
}

#insights .ft-zone-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 20px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
  position: relative;
}

#insights .ft-zone-head h3 {
  font-family: var(--font-sans);
  font-size: clamp(2.0rem, 3.2vw, 3.2rem) !important;
  font-weight: 400;
  letter-spacing: -0.035em !important;
  line-height: 0.96 !important;
  color: #F4F6F5;
  margin: 0;
}

#insights .ft-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  align-items: stretch;
}

#insights .ft-story--1 {
  grid-column: 1 / 8;
}

#insights .ft-story--1 > a {
  aspect-ratio: 16 / 10;
  min-height: 440px;
}

#insights .ft-story--1 h4 {
  font-size: clamp(1.8rem, 2.6vw, 2.8rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.032em !important;
  max-width: 22ch;
}

#insights .ft-story--2 {
  grid-column: 8 / 13;
}

#insights .ft-story--2 > a {
  aspect-ratio: 4 / 3;
}

#insights .ft-story--2 h4 {
  font-size: clamp(1.25rem, 1.6vw, 1.8rem);
  line-height: 1.15;
}

#insights .ft-story--3 {
  grid-column: 1 / 5;
}

#insights .ft-story--3 > a {
  aspect-ratio: 4 / 3;
}

#insights .ft-story--3 h4 {
  font-size: clamp(1.2rem, 1.5vw, 1.7rem);
  line-height: 1.16;
}

#insights .ft-story--4 {
  grid-column: 5 / 13;
}

#insights .ft-story--4 > a {
  aspect-ratio: 16 / 9;
}

#insights .ft-story--4 h4 {
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  line-height: 1.1;
}

#insights .ft-story--5 {
  grid-column: 1 / 7;
}

#insights .ft-story--5 > a,
#insights .ft-story--6 > a {
  aspect-ratio: 16 / 10;
}

#insights .ft-story--5 h4,
#insights .ft-story--6 h4 {
  font-size: clamp(1.3rem, 1.7vw, 1.9rem);
  line-height: 1.15;
}

#insights .ft-story--6 {
  grid-column: 7 / 13;
}

#insights .ft-story > a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  background-color: #040706;
  background-image:
    radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 100%);
  text-decoration: none;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#insights .ft-story > a:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 24px 75px rgba(0, 0, 0, 0.8);
}

#insights .ft-story__media,
#insights .ft-story__scrim {
  position: absolute;
  inset: 0;
}

#insights .ft-story__image,
#insights .ft-story__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#insights .ft-story__fallback {
  opacity: 0.45;
  background-size: cover;
  background-position: center;
}

#insights .ft-story > a:hover .ft-story__image,
#insights .ft-story > a:hover .ft-story__fallback {
  transform: scale(1.025);
}

#insights .ft-story__scrim {
  background: linear-gradient(180deg,
    rgba(2, 4, 3, 0.15) 0%,
    rgba(2, 4, 3, 0.45) 42%,
    rgba(2, 4, 3, 0.90) 76%,
    rgba(2, 4, 3, 0.98) 100%
  );
}

#insights .ft-story__meta {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 1.8vw, 24px);
  right: clamp(14px, 1.8vw, 24px);
  left: clamp(14px, 1.8vw, 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#insights .ft-story__meta span {
  padding: 4px 10px;
  background: rgba(2, 4, 3, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  color: var(--data);
}

#insights .ft-story h4 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(20px, 2.5vw, 36px);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 500;
  text-wrap: balance;
}

/* ==========================================================================
   5. ZONA 2: EDITORIAL SPLIT (NEWSLETTER & GX REPORTS)
   ========================================================================== */

#insights .ft-zone--editorial {
  display: grid;
  grid-template-columns: minmax(0, 4.8fr) minmax(0, 7.2fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(84px, 12vh, 140px);
  position: relative;
  z-index: 2;
}

#insights .ft-news .ft-zone-head,
#insights .ft-report .ft-zone-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 18px;
  margin-bottom: clamp(28px, 3.5vw, 42px);
  position: relative;
}

#insights .ft-news .ft-zone-head h3,
#insights .ft-report .ft-zone-head h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem) !important;
  font-weight: 400;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: #F4F6F5;
  margin: 0;
  text-align: left;
}

#insights .ft-zone-sub {
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  max-width: 44ch;
  margin: -8px 0 26px 0;
}

#insights .ft-news-latest {
  display: block;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  background: #040706;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s,
              box-shadow 0.3s;
}

#insights .ft-news-latest:hover {
  transform: translateY(-3px);
  border-color: rgba(155, 123, 255, 0.35);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65);
}

#insights .ft-news-latest__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.47);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#insights .ft-news-latest h4 {
  margin-top: 18px;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2.0vw, 2.1rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.028em;
}

#insights .ft-news-latest p {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
}

#insights .ft-news-latest__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

#insights .ft-news-latest__topics i {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--mauve);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

#insights .ft-news-latest__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}

#insights .ft-news-latest__cta b {
  color: var(--signal);
  transition: transform 0.2s;
}

#insights .ft-news-latest:hover .ft-news-latest__cta b {
  transform: translate(3px, -3px);
}

#insights .ft-news-feed {
  margin-top: 24px;
  list-style: none;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#insights .ft-news-feed li {
  display: grid;
  grid-template-columns: 6px 84px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#insights .ft-news-feed i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mauve);
  box-shadow: 0 0 6px var(--mauve);
}

#insights .ft-news-feed time {
  color: rgba(255, 255, 255, 0.47);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

#insights .ft-news-feed a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.2s;
}

#insights .ft-news-feed a:hover {
  color: #FFFFFF;
}

/* GX REPORTS (DOSSIÊ ESTRATÉGICO) */
#insights .ft-report-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(540px, 46vw, 660px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  background: #050807;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.65);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s,
              box-shadow 0.3s;
}

#insights .ft-report-card:hover {
  transform: translateY(-4px);
  border-color: rgba(114, 150, 248, 0.4);
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.85);
}

#insights .ft-report-card__media {
  position: absolute;
  inset: 0;
}

#insights .ft-report-card__media img,
#insights .ft-report-card__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#insights .ft-report-card:hover .ft-report-card__media img {
  transform: scale(1.02);
}

#insights .ft-report-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(2, 4, 3, 0.94) 0%,
    rgba(2, 4, 3, 0.72) 45%,
    rgba(2, 4, 3, 0.32) 100%
  );
}

#insights .ft-report-card__seal {
  position: absolute;
  z-index: 3;
  top: clamp(20px, 2.5vw, 32px);
  right: clamp(20px, 2.5vw, 32px);
  padding: 6px 14px;
  border: 1px solid rgba(114, 150, 248, 0.35);
  border-radius: 999px;
  background: rgba(2, 4, 3, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--info);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#insights .ft-report-card__body {
  position: relative;
  z-index: 3;
  padding: clamp(28px, 3.5vw, 48px);
  max-width: 620px;
}

#insights .ft-report-card__meta {
  display: flex;
  gap: 16px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

#insights .ft-report-card h4 {
  font-family: var(--font-sans);
  font-size: clamp(1.8rem, 2.8vw, 3.2rem);
  font-weight: 450;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  text-wrap: balance;
  margin: 0;
}

#insights .ft-report-card__body > p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  max-width: 52ch;
}

#insights .ft-report-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

#insights .ft-report-card__facts i {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

#insights .ft-report-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}

#insights .ft-report-card__cta b {
  color: var(--signal);
  font-size: 14px;
  transition: transform 0.2s;
}

#insights .ft-report-card:hover .ft-report-card__cta b {
  transform: translate(3px, -3px);
}

#insights .ft-insights-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

#insights .ft-insights-link:hover {
  color: #FFFFFF;
  border-color: var(--signal);
}

#insights .ft-insights-link span {
  color: var(--signal);
  transition: transform 0.2s;
}

#insights .ft-insights-link:hover span {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   6. ZONA 3: CARTEIRAS GX (TERMINAL QUANTITATIVO TELEMÉTRICO)
   ========================================================================== */

#insights .ft-zone--carteiras {
  margin-top: clamp(84px, 12vh, 140px);
  position: relative;
  z-index: 2;
}

#insights .ft-zone-head--split {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 20px;
  margin-bottom: 28px;
  position: relative;
}

#insights .ft-zone-head--split h3 {
  font-family: var(--font-sans);
  font-size: clamp(2.0rem, 3.2vw, 3.2rem) !important;
  font-weight: 400;
  letter-spacing: -0.035em !important;
  line-height: 0.96 !important;
  color: #F4F6F5;
  margin: 0;
}

#insights .ft-zone-head--split p {
  color: rgba(255, 255, 255, 0.52);
  font-family: var(--font-sans);
  font-size: 13px;
  margin: 8px 0 0 0;
}

#insights .ft-insights-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.47);
}

#insights .ft-insights-freshness__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(101, 204, 233, 0.3);
  border-radius: 999px;
  background: rgba(101, 204, 233, 0.04);
  color: var(--data);
}

#insights .ft-insights-freshness__badge.is-stale {
  border-color: rgba(255, 79, 143, 0.35);
  background: rgba(255, 79, 143, 0.05);
  color: var(--signal);
}

#insights .ft-wallets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

#insights .ft-portfolio-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.2vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--wallet, var(--signal));
  border-radius: 2px;
  background: #040706;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s;
}

#insights .ft-portfolio-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.65);
}

#insights .ft-portfolio-card--a { --wallet: var(--signal); }
#insights .ft-portfolio-card--b { --wallet: var(--mauve); }
#insights .ft-portfolio-card--c { --wallet: var(--info); }
#insights .ft-portfolio-card--d { --wallet: var(--data); }

#insights .ft-portfolio-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

#insights .ft-portfolio-card__status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--data);
  margin-bottom: 8px;
}

#insights .ft-portfolio-card__head h4 {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 2.0vw, 2.1rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0;
}

#insights .ft-portfolio-card__benchmark {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.47);
  text-align: right;
  max-width: 140px;
}

#insights .ft-portfolio-card__thesis {
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  min-height: 4.8em;
  margin: 0 0 24px 0;
}

/* KPIS QUANTITATIVOS TABULARES */
#insights .ft-portfolio-card__kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 0 0 24px 0;
}

#insights .ft-portfolio-card__kpis > div {
  background: transparent !important;
  padding: 16px 14px;
  position: relative;
}

#insights .ft-portfolio-card__kpis > div:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 0;
}

#insights .ft-portfolio-card__kpis > div:nth-child(even) {
  padding-right: 0;
  padding-left: 20px;
}

#insights .ft-portfolio-card__kpis > div:nth-child(1),
#insights .ft-portfolio-card__kpis > div:nth-child(2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#insights .ft-portfolio-card__kpis dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.47);
  margin-bottom: 6px;
}

#insights .ft-portfolio-card__kpis dd {
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 2.0vw, 2.0rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
}

#insights .ft-portfolio-chart {
  margin-top: auto;
  padding-top: 16px;
}

#insights .ft-portfolio-chart svg {
  display: block;
  width: 100%;
  height: 140px;
}

#insights .ft-portfolio-chart__grid {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-dasharray: 2 4;
}

#insights .ft-portfolio-chart__line--portfolio {
  stroke: var(--wallet);
  stroke-width: 2px;
  filter: drop-shadow(0 0 6px var(--wallet));
}

#insights .ft-portfolio-chart__line--benchmark {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
}

#insights .ft-portfolio-chart__date {
  fill: rgba(255, 255, 255, 0.35);
  font-family: var(--font-mono);
  font-size: 10px;
}

#insights .ft-portfolio-chart figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.47);
}

#insights .ft-portfolio-card__dates {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.47);
}

#insights .ft-insights-disclaimer {
  max-width: 92ch;
  margin: 36px auto 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.47);
  text-align: center;
}

/* ==========================================================================
   7. FECHAMENTO DA CENA (LEI §5)
   ========================================================================== */

#insights .ft-insights-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(84px, 12vh, 140px);
  padding-top: clamp(40px, 5vh, 64px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 2;
}

#insights .ft-insights-final > p {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1.6vw, 1.65rem) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.025em !important;
  color: #F5F7F6 !important;
  max-width: 48ch !important;
  margin: 0;
}

#insights .ft-insights-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 clamp(24px, 3vw, 36px);
  background: #090C0B !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-bottom: 2px solid var(--signal) !important;
  border-radius: 2px !important;
  color: #FFFFFF !important;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.25s,
              box-shadow 0.25s;
  white-space: nowrap;
}

#insights .ft-insights-cta span {
  color: var(--signal);
  font-size: 14px;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#insights .ft-insights-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 79, 143, 0.16) !important;
}

#insights .ft-insights-cta:hover span {
  transform: translate(3px, -3px);
}

/* 8. ESTADO DE CARREGAMENTO DIGNO */
#insights .content-list-state-loading {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 9, 8, 0.7);
  border-radius: 2px;
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}

#insights .content-list-state-loading .overline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--data);
}

#insights .content-list-state-loading h4 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: #FFFFFF;
  margin-top: 12px;
}

#insights .content-list-state-loading p {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 8px;
}

/* 9. ACESSIBILIDADE & FOCO */
#insights a:focus-visible,
#insights button:focus-visible {
  outline: 2px solid var(--signal) !important;
  outline-offset: 4px !important;
}

/* 10. RESPONSIVIDADE (VIEWPORTS 960px E 640px) */
@media (max-width: 960px) {
  #insights.ft-insights,
  .ft-scene.ft-insights,
  #insights#insights {
    padding: 56px var(--gutter) 72px !important;
  }

  #insights .ft-insights-head {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  #insights .ft-insights-head__meta {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 18px !important;
  }

  #insights .ft-insights-head h2 {
    font-size: clamp(2.4rem, 7vw, 3.4rem) !important;
    line-height: 0.96 !important;
  }

  #insights .ft-insights-index__header {
    display: none !important;
  }

  #insights .ft-insights-index__row {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding: 14px 16px !important;
  }

  #insights .ft-insights-index__col--cat {
    display: none !important;
  }

  #insights .ft-insights-index__col--title {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }

  #insights .ft-insights-index__col--action {
    font-size: 9.5px !important;
  }

  #insights .ft-mosaic {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #insights .ft-story--1,
  #insights .ft-story--2,
  #insights .ft-story--3,
  #insights .ft-story--4,
  #insights .ft-story--5,
  #insights .ft-story--6 {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }

  #insights .ft-story > a {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
  }

  #insights .ft-zone--editorial {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  #insights .ft-wallets {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #insights .ft-insights-final {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 20px;
  }

  #insights .ft-insights-cta {
    width: 100%;
  }
}

@media (max-width: 640px) {
  #insights .ft-insights-index__row {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 6px 12px !important;
  }

  #insights .ft-insights-index__col--action {
    grid-column: 2;
    text-align: left !important;
    font-size: 9.5px !important;
    opacity: 0.75;
  }
}

/* 11. PREFERS-REDUCED-MOTION (LEI §6) */
@media (prefers-reduced-motion: reduce) {
  #insights *,
  #insights *::before,
  #insights *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transform: none !important;
  }
}

/* >>> WS-041 nucleo GennomX AI — janela de largura total (inicio) */
/* ==========================================================================
   GennomX — Redesign Núcleo (.ft-core) da Cena #insights
   Widescreen full-bleed, overlay tipográfico sem caixas, zero ruído.
   ========================================================================== */

#insights .ft-core {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

#insights .ft-core * {
  font-style: normal;
}

#insights .ft-core-stage {
  position: relative;
  width: 100%;
  display: block;
}

#insights .ft-core-scene {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* Quadro mais alto por pedido do fundador: 16/9 -> 16/10 em 2026-09-07,
     16/10 -> 16/12 em 2026-09-11. O teto sobe junto, senao o max-height e que
     decide a altura e a proporcao nova nao tem efeito.
     ATENCAO: subir a altura sozinha NAO ganha folga para os bracos, porque o
     motor escala o desenho por min(W, H) e aqui a menor e a altura. O ganho de
     folga vem do par: altura maior aqui com fator de escala menor em
     `galaxias.js`. Mexa nos dois juntos. */
  aspect-ratio: 16 / 12;
  min-height: 640px;
  max-height: 1200px;
  background: #04050b;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

#insights .ft-core-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#insights .ft-core-viewport::before,
#insights .ft-core-viewport::after {
  content: none;
  display: none;
}

#insights .ft-core-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

#insights .ft-core-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(116% 90% at 50% 42%, rgba(4, 5, 11, 0) 36%, rgba(4, 5, 11, 0.7) 74%, #04050b 100%);
}

/* Brand e Título (Top-Left) */
#insights .ft-core-brand {
  position: absolute;
  top: clamp(32px, 4.4vw, 60px);
  left: clamp(32px, 5vw, 84px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.2vw, 14px);
  margin: 0;
  padding: 0;
  max-width: min(90vw, 440px);
  pointer-events: auto;
}

#insights .ft-insights-instrument {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-faint, #7a8398);
  font-family: var(--font-mono);
  font-size: var(--fs-micro, 0.58rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

#insights .ft-core-brand h3,
#insights #insights-ai-heading {
  margin: 0;
  padding: 0;
  color: var(--text-primary, #f5f6fa);
  font-family: var(--font-wordmark, 'DM Sans', system-ui, sans-serif);
  font-size: clamp(2.2rem, 3.8vw, 3.8rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

#insights .ft-core-tag {
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #c6cdd9);
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.04em;
  background: transparent;
  border: 0;
}

/* Wordmark (Top-Right) */
#insights .ft-core-wordmark {
  position: absolute;
  top: clamp(34px, 4.6vw, 62px);
  right: clamp(32px, 5vw, 84px);
  z-index: 2;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #c6cdd9);
  font-family: var(--font-wordmark, 'DM Sans', system-ui, sans-serif);
  font-size: clamp(0.88rem, 1.15vw, 1.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.015em;
  text-align: right;
  white-space: nowrap;
  pointer-events: auto;
  background: transparent;
  border: 0;
}

#insights .ft-core-wordmark-plus {
  display: inline-block;
  color: var(--data, #37d6e9);
  font-weight: 300;
  font-size: 1.15em;
  padding-inline: 0.22em;
  vertical-align: baseline;
}

/* Trilha de Entradas (Flanco Esquerdo) */
#insights .ft-core-rail--inputs {
  position: absolute;
  left: clamp(32px, 5vw, 84px);
  top: 50%;
  transform: translateY(-38%);
  width: clamp(220px, 18vw, 290px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

#insights .ft-core-rail--inputs li {
  position: relative;
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}

#insights .ft-core-rail--inputs li::before,
#insights .ft-core-rail--inputs li::after {
  content: none;
  display: none;
}

#insights .ft-core-rail--inputs i {
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  display: block;
  background: var(--info, #4d7cfe);
  box-shadow: 0 0 8px var(--info-dim, rgba(77, 124, 254, 0.2));
}

#insights .ft-core-rail--inputs li:nth-child(2) i {
  background: var(--mauve, #9b7bff);
  box-shadow: 0 0 8px var(--mauve-dim, rgba(155, 123, 255, 0.2));
}

#insights .ft-core-rail--inputs li:nth-child(3) i {
  background: var(--data, #37d6e9);
  box-shadow: 0 0 8px var(--data-dim, rgba(55, 214, 233, 0.2));
}

#insights .ft-core-rail--inputs b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  font-weight: 600;
  color: var(--text-primary, #f5f6fa);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

#insights .ft-core-rail--inputs span {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.66rem, 0.76vw, 0.76rem);
  font-weight: 400;
  color: var(--text-muted, #99a2b4);
  line-height: 1.48;
}

/* Trilha de Saídas (Flanco Direito) */
#insights .ft-core-rail--outputs {
  position: absolute;
  right: clamp(32px, 5vw, 84px);
  top: 50%;
  transform: translateY(-38%);
  width: clamp(140px, 12vw, 180px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}

#insights .ft-core-rail--outputs li {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}

#insights .ft-core-rail--outputs li::before,
#insights .ft-core-rail--outputs li::after {
  content: none;
  display: none;
}

#insights .ft-core-rail--outputs li span {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 0.92vw, 0.9rem);
  font-weight: 500;
  color: var(--text-secondary, #c6cdd9);
  text-align: right;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding-block: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  transition: color var(--dur-fast, 120ms) var(--ease), border-color var(--dur-fast, 120ms) var(--ease);
}

#insights .ft-core-rail--outputs li:hover span {
  color: var(--text-primary, #f5f6fa);
  border-bottom-color: var(--data, #37d6e9);
}

/* Parágrafo de Fecho (Base Central) */
#insights .ft-core-copy {
  position: absolute;
  bottom: clamp(24px, 3.2vw, 44px);
  left: 50%;
  transform: translateX(-50%);
  width: min(88vw, 680px);
  max-width: 68ch;
  z-index: 2;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.76rem, 0.88vw, 0.88rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-muted, #99a2b4);
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
}

/* ==========================================================================
   Tablet (max-width: 1100px)
   ========================================================================== */
@media (max-width: 1100px) {
  #insights .ft-core-scene {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 16 / 10;
    min-height: 620px;
    max-height: none;
  }

  #insights .ft-core-viewport {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  #insights .ft-core-brand {
    top: 28px;
    left: clamp(24px, 4vw, 40px);
    max-width: 360px;
    gap: 8px;
  }

  #insights .ft-core-brand h3,
  #insights #insights-ai-heading {
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  }

  #insights .ft-core-wordmark {
    top: 28px;
    right: clamp(24px, 4vw, 40px);
    font-size: clamp(0.8rem, 1.1vw, 1rem);
  }

  #insights .ft-core-rail--inputs {
    position: absolute;
    left: clamp(24px, 4vw, 40px);
    top: 52%;
    transform: translateY(-40%);
    width: clamp(180px, 22vw, 230px);
    gap: 16px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }

  #insights .ft-core-rail--outputs {
    position: absolute;
    right: clamp(24px, 4vw, 40px);
    top: 52%;
    transform: translateY(-40%);
    width: clamp(120px, 16vw, 150px);
    gap: 8px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }

  #insights .ft-core-rail--outputs li span {
    text-align: right;
    padding-block: 6px;
  }

  #insights .ft-core-copy {
    bottom: 20px;
    width: min(90vw, 580px);
    font-size: 0.78rem;
    line-height: 1.55;
    text-align: center;
    margin: 0;
  }
}

/* ==========================================================================
   Mobile (max-width: 700px)
   ========================================================================== */
@media (max-width: 700px) {
  #insights .ft-core-stage {
    display: block;
    width: 100%;
  }

  #insights .ft-core-scene {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: auto;
    min-height: auto;
    border-radius: 0;
    background: #04050b;
    overflow: hidden;
  }

  #insights .ft-core-viewport {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 1000px;
    padding: 28px 20px 36px;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    aspect-ratio: auto;
  }

  #insights .ft-core-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  #insights .ft-core-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 42%, rgba(4, 5, 11, 0) 30%, rgba(4, 5, 11, 0.75) 70%, #04050b 100%);
  }

  #insights .ft-core-brand {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    gap: 8px;
  }

  #insights .ft-insights-instrument {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    max-width: none;
    color: var(--text-secondary, #c6cdd9);
  }

  #insights .ft-core-brand h3,
  #insights #insights-ai-heading {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
    line-height: 0.94;
  }

  #insights .ft-core-tag {
    font-size: 0.72rem;
    line-height: 1.4;
  }

  #insights .ft-core-wordmark {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 14px;
    margin-bottom: 490px;
    text-align: left;
    font-size: 0.88rem;
    white-space: normal;
  }

  #insights .ft-core-rail--inputs {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
  }

  #insights .ft-core-rail--inputs li {
    grid-template-columns: 7px 1fr;
    gap: 10px;
    align-items: baseline;
  }

  #insights .ft-core-rail--inputs b {
    font-size: 0.84rem;
    color: var(--text-primary, #f5f6fa);
    margin-bottom: 2px;
  }

  #insights .ft-core-rail--inputs span {
    font-size: 0.72rem;
    color: var(--text-secondary, #c6cdd9);
    line-height: 1.45;
  }

  #insights .ft-core-rail--outputs {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 24px;
  }

  #insights .ft-core-rail--outputs li span {
    text-align: left;
    padding-block: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary, #c6cdd9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #insights .ft-core-copy {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 26px;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-secondary, #c6cdd9);
  }
}

/* ==========================================================================
   Prefers Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #insights .ft-core-rail--outputs li span {
    transition: none;
  }
}
/* <<< WS-041 nucleo GennomX AI (fim) */

/* --- 07-mobile-product --- */
/* override.css — Cena 07: Produto Móvel (Sem ID)
   Direção de Arte: Awwwards Site of the Year / Scientific Research Gallery
   Barra a Bater: Hobro (hobro-02.png) & Kononenko Group (kononenko-01.png)
   Conformidade Estrita com LEI.md:
   - §2: Fundo escuro chapado puro (#030504), profundidade óptica por LUZ (sem ruído/textura tileada)
   - §5: Sinal rosa rigoroso < 0.08% (fio inferior do CTA e ponto de telemetria)
   - §13: O objeto (aparelho) é o PROTAGONISTA MONUMENTAL com presença física tangível
   - §14: ITÁLICO EXCLUSIVO DA HERO. "acompanha" em Archivo vazada monumental (sem itálico)
   - §15: ZERO réguas na emenda de entrada ou saída (eliminação de qualquer fio medido)
   - §17: As 4 bordas ativamente ancoradas por conteúdo e telemetria (4/4 em bordas.py)
   - §18: Ênfase puramente tipográfica: contraste de peso ultra-bold + vazada monumental */

/* --------------------------------------------------------------------------
   1. SUPERFÍCIE & FUNDO (Preto Profundo Chapado, LUZ Óptica Ampla Sem Ruído §2)
   -------------------------------------------------------------------------- */
.ft-home .ft-scene.ft-mobile-product {
  position: relative !important;
  isolation: isolate !important;
  min-height: clamp(740px, 86svh, 880px) !important;
  padding: clamp(52px, 6vh, 72px) var(--gutter, clamp(32px, 4.8vw, 92px)) clamp(44px, 5vh, 60px) !important;
  background-color: #030504 !important;
  background-image: radial-gradient(120% 85% at 74% 52%, rgba(14, 52, 38, 0.16) 0%, rgba(6, 24, 18, 0.05) 44%, rgba(3, 5, 4, 0) 74%) !important;
  background-repeat: no-repeat !important;
  /* §15: Proibição estrita de réguas na emenda */
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ft-home .ft-scene.ft-mobile-product::before,
.ft-home .ft-scene.ft-mobile-product::after {
  content: none !important;
}

/* Neutralização obrigatória de tags <i>/<em> (§14 da LEI) */
.ft-home .ft-scene.ft-mobile-product i,
.ft-home .ft-scene.ft-mobile-product em {
  font-style: normal !important;
}

/* --------------------------------------------------------------------------
   2. ESTRUTURA GERAL & CAMADAS DE PROFUNDIDADE
   -------------------------------------------------------------------------- */
.ft-home .ft-mobile-product .ft-mobile-head {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: clamp(560px, 58vw, 940px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.ft-home .ft-mobile-product .ft-mobile-head > :not(h2) {
  position: relative !important;
  z-index: auto !important;
}

/* --------------------------------------------------------------------------
   3. TRACKER TELEMETRIA (Âncora da Borda Superior §17)
   -------------------------------------------------------------------------- */
.ft-home .ft-mobile-product .ft-mobile-tracker {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  margin-bottom: clamp(24px, 3vh, 36px) !important;
}

.ft-home .ft-mobile-product .ft-signal-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text-muted, #8E9F97) !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ft-home .ft-mobile-product .ft-signal-label i {
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--signal, #FF4F8F) !important;
  box-shadow: 0 0 10px rgba(255, 79, 143, 0.75) !important;
  font-style: normal !important;
}

/* Régua curta recuada com decaimento suave — sem tocar bordas externas (§15) */
.ft-home .ft-mobile-product .ft-mobile-tracker-line {
  flex: 0 1 200px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 80%, transparent 100%) !important;
}

/* Coordenada da Borda Superior (§17) */
.ft-home .ft-mobile-product .ft-mobile-tracker::after {
  /* so o numero: o rotulo de sinal a esquerda ja diz o nome, e aqui os dois
     dividem a mesma faixa horizontal */
  content: "08 / 09" !important;
  margin-left: auto !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.26) !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   4. H2 MONUMENTAL & CONTRASTE EDITORIAL VAZADO (Eliminação Definitiva da Colisão)
   Ataque aos Defeitos 1 e 2 do Júri:
   - "acompanha" agora é 100% legível, sem cortes acidentais atrás do telefone.
   - Sobreposição gráfica monumental inspirada em Hobro: Archivo 700 sólida
     contra Archivo 800 vazada monumental em salto de escala (12.2rem).
   -------------------------------------------------------------------------- */
.ft-home .ft-mobile-product .ft-mobile-head h2 {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-family: var(--font-sans, Archivo, -apple-system, sans-serif) !important;
  font-size: clamp(3.6rem, 7.8vw, 8.8rem) !important;
  font-weight: 700 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  text-wrap: nowrap !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: initial !important;
}

.ft-home .ft-mobile-product .ft-mobile-head h2 span {
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  transition: opacity 280ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) !important;
}

/* 4.1 Linha 1: "Inteligência que" (Grotesca pesada e arquitetônica, âncora esquerda) */
.ft-home .ft-mobile-product .ft-mobile-head__lead {
  font-family: var(--font-sans, Archivo, sans-serif) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-left: 0 !important;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5) !important;
}

/* 4.2 Linha 2: "acompanha" — VAZADA MONUMENTAL (OUTLINE DE PRECISÃO §18)
   Solução cabal aos dois defeitos do júri:
   - ZERO COLISÃO QUE PARECE BUG: alinhada com recuo escultural (clamp 24px a 84px),
     mantendo cada caractere perfeitamente nítido e legível.
   - SEM ITÁLICO (§14): Archivo normal vazada com -webkit-text-stroke de 1.6px.
   - Salto de Escala Monumental: clamp(4.8rem, 11vw, 12.2rem) — 1.35x maior.
   - Tensão Gráfica Suíça: pura silhueta vazada luminosa sobre o espaço escuro. */
.ft-home .ft-mobile-product .ft-mobile-head__occluded {
  position: relative !important;
  z-index: 2 !important;
  font-family: var(--font-sans, Archivo, -apple-system, sans-serif) !important;
  font-style: normal !important;
  font-size: clamp(4.8rem, 11vw, 12.2rem) !important;
  font-weight: 800 !important;
  line-height: 0.82 !important;
  letter-spacing: -0.045em !important;
  color: transparent !important;
  -webkit-text-stroke: 1.6px rgba(255, 255, 255, 0.92) !important;
  margin-left: clamp(24px, 4.5vw, 84px) !important;
  text-shadow: 0 0 42px rgba(34, 211, 238, 0.16) !important;
}

/* 4.3 Linha 3: "a decisão." (Retorno em peso mais leve, criando ritmo tripartite) */
.ft-home .ft-mobile-product .ft-mobile-head__tail {
  font-family: var(--font-sans, Archivo, sans-serif) !important;
  font-style: normal !important;
  font-weight: 350 !important;
  color: #B5C6BD !important;
  margin-left: clamp(12px, 2vw, 36px) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

/* --------------------------------------------------------------------------
   5. DECK EDITORIAL & CONSOLE ARQUITETÔNICO (Ataque aos Defeitos 3 e 5)
   Eliminação da fragmentação no terço inferior: parágrafo e ação estruturados
   em console integrado com métrica em mono e régua interna.
   -------------------------------------------------------------------------- */
.ft-home .ft-mobile-product .ft-mobile-deck {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: min(100%, 480px) !important;
  margin-top: clamp(32px, 3.8vh, 46px) !important;
  padding-top: clamp(20px, 2.4vh, 28px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ft-home .ft-mobile-product .ft-mobile-deck p {
  position: static !important;
  max-width: 42ch !important;
  margin: 0 0 clamp(22px, 2.6vh, 30px) 0 !important;
  font-family: var(--font-sans, Archivo, sans-serif) !important;
  font-size: clamp(14.5px, 1.05vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  color: #98ABA1 !important;
  text-wrap: pretty !important;
}

.ft-home .ft-mobile-product .ft-mobile-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  width: auto !important;
}

/* 5.1 CTA Monolítico em Carbono (Bordas Vivas, Sem o Canto Arredondado de UI Kit) */
.ft-home .ft-mobile-product .ft-mobile-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 48px !important;
  margin-top: 0 !important;
  padding: 13px 28px !important;
  border-radius: 1px !important;
  background: #080C0A !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-bottom: 2px solid var(--signal, #FF4F8F) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  color: #F2F6F4 !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              background 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              border-color 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              box-shadow 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
              color 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) !important;
}

.ft-home .ft-mobile-product .ft-mobile-cta span {
  font-size: 13px !important;
  color: var(--signal, #FF4F8F) !important;
  transition: transform 180ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) !important;
}

.ft-home .ft-mobile-product .ft-mobile-cta:hover {
  background: rgba(255, 79, 143, 0.08) !important;
  border-color: rgba(255, 79, 143, 0.4) !important;
  border-bottom-color: var(--signal, #FF4F8F) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 79, 143, 0.2) !important;
}

.ft-home .ft-mobile-product .ft-mobile-cta:hover span {
  transform: translate(3px, -3px) !important;
}

.ft-home .ft-mobile-product .ft-mobile-cta:focus-visible {
  outline: 2px solid var(--signal, #FF4F8F) !important;
  outline-offset: 4px !important;
}

/* A linha de telemetria inferior foi removida: coordenadas geograficas e
   "resolucao adaptativa" nao dizem nada verificavel, e ocupavam a posicao
   logo abaixo da CTA. Mesmo criterio do "GX / SEQUENCE 07" da cena 03. */

/* --------------------------------------------------------------------------
   6. O MONÓLITO DE HARDWARE (O Aparelho como Protagonista Monumental §13)
   Ataque ao Defeito 1 (Landing Page Clichê) e Defeito 4 (Matéria Artificial):
   - Escala ampliada (370px a 460px de largura, altura monumental ~780px).
   - Sangrando e ancorando ativamente a margem direita e inferior da cena.
   - Texturas ópticas de titânio acetinado, reflexo vítreo e profundidade OLED.
   -------------------------------------------------------------------------- */
.ft-home .ft-mobile-product .ft-phone {
  position: absolute !important;
  z-index: 2 !important;
  right: clamp(28px, 4.5vw, 84px) !important;
  bottom: clamp(-75px, -7vh, -35px) !important;
  width: clamp(370px, 27vw, 460px) !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* 6.1 Backlight Atmosférico Discreto (Luz Ampla, Sem Ruído §2) */
.ft-home .ft-mobile-product .ft-phone::before {
  content: '' !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 6% !important;
  right: -22% !important;
  bottom: 4% !important;
  left: -22% !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse 70% 60% at 50% 48%, rgba(34, 211, 238, 0.08) 0%, rgba(16, 46, 36, 0.03) 45%, transparent 72%) !important;
  filter: blur(54px) !important;
}

/* 6.2 Chassi de Titânio & Obsidiana com Botões Físicos Integrados */
.ft-home .ft-mobile-product .ft-phone-shell {
  position: relative !important;
  z-index: 1 !important;
  padding: 10px !important;
  border-radius: 48px !important;
  background: linear-gradient(150deg, #384641 0%, #17211C 16%, #080C0A 48%, #16201B 82%, #32403A 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 45px 120px -12px rgba(0, 0, 0, 0.96),
              0 20px 45px -6px rgba(0, 0, 0, 0.88),
              inset 0 1.5px 2px rgba(255, 255, 255, 0.35),
              inset 0 -1.5px 2px rgba(0, 0, 0, 0.9) !important;
}

/* Botões de Hardware nas Bordas do Chassi */
.ft-home .ft-mobile-product .ft-phone-shell::before {
  content: '' !important;
  position: absolute !important;
  left: -3px !important;
  top: 116px !important;
  width: 3px !important;
  height: 54px !important;
  background: #384641 !important;
  border-radius: 2px 0 0 2px !important;
  box-shadow: -1px 0 2px rgba(0, 0, 0, 0.6) !important;
}

.ft-home .ft-mobile-product .ft-phone-shell::after {
  content: '' !important;
  position: absolute !important;
  right: -3px !important;
  top: 138px !important;
  width: 3px !important;
  height: 66px !important;
  background: #384641 !important;
  border-radius: 0 2px 2px 0 !important;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.6) !important;
}

/* 6.3 Tela OLED Profunda com Reflexo Óptico Vítreo */
.ft-home .ft-mobile-product .ft-phone-screen {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  aspect-ratio: 9 / 19.5 !important;
  overflow: hidden !important;
  border-radius: 40px !important;
  background: #040706 !important;
  background-image: linear-gradient(132deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 28%, transparent 56%, rgba(34, 211, 238, 0.02) 84%, transparent 100%),
                    radial-gradient(circle at 85% 14%, rgba(34, 211, 238, 0.08) 0%, transparent 48%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07),
              inset 0 4px 18px rgba(0, 0, 0, 0.92) !important;
  padding: 22px 18px 20px !important;
}

/* Dynamic Island / Abertura Sensorial */
.ft-home .ft-mobile-product .ft-phone-screen::before {
  content: '' !important;
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  width: 62px !important;
  height: 6px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: #080C0A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Barra Home Inferior */
.ft-home .ft-mobile-product .ft-phone-bar {
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  width: 98px !important;
  height: 4px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
}

/* Status Bar de Alta Resolução */
.ft-home .ft-mobile-product .ft-phone-status {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #8C9F96 !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  padding-inline: 4px !important;
}

.ft-home .ft-mobile-product .ft-phone-status i {
  display: block !important;
  width: 44px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  font-style: normal !important;
}

/* Header da Interface Científica */
.ft-home .ft-mobile-product .ft-phone-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ft-home .ft-mobile-product .ft-phone-title span {
  color: #A8BAAF !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.ft-home .ft-mobile-product .ft-phone-title b {
  color: #7E9289 !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* 6.4 Rota Vetorial & Substrato de Alta Densidade (Ataque ao Defeito 4)
   Substituição do vetor esquemático por alta densidade científica:
   envelope de variância analítica, retículo de mira, ticks de calibração. */
.ft-home .ft-mobile-product .ft-phone-route {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  margin-top: 16px !important;
}

.ft-home .ft-mobile-product .ft-phone-route__grid {
  stroke: rgba(255, 255, 255, 0.04) !important;
  stroke-width: 1px !important;
  stroke-dasharray: 2 4 !important;
}

.ft-home .ft-mobile-product .ft-phone-route__ticks {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.14) !important;
  stroke-width: 1px !important;
}

.ft-home .ft-mobile-product .ft-phone-route__envelope {
  fill: url(#ft-phone-envelope-grad) !important;
  stroke: rgba(34, 211, 238, 0.14) !important;
  stroke-width: 1px !important;
  stroke-dasharray: 2 4 !important;
}

.ft-home .ft-mobile-product .ft-phone-route__bed {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.045) !important;
  stroke-width: 8px !important;
  stroke-linecap: round !important;
}

.ft-home .ft-mobile-product .ft-phone-route__line {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.15) !important;
  stroke-width: 1px !important;
  stroke-dasharray: 2 3 !important;
}

.ft-home .ft-mobile-product .ft-phone-route__progress {
  fill: none !important;
  stroke: url(#ft-phone-progress-grad) !important;
  stroke-width: 2.2px !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 0 6px rgba(143, 184, 216, 0.6)) !important;
}

/* a chegada leva a cor de sinal, como a seta do Metodo */
.ft-home .ft-mobile-product .ft-phone-route__stop:nth-of-type(7) {
  stroke: rgba(255, 79, 143, 0.65) !important;
}

.ft-home .ft-mobile-product .ft-phone-route__arrow {
  fill: none !important;
  stroke: rgba(255, 79, 143, 0.5) !important;
  stroke-width: 1.4px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ft-home .ft-mobile-product .ft-phone-route__reticle {
  fill: none !important;
  stroke: rgba(143, 184, 216, 0.55) !important;
  stroke-width: 1.2px !important;
  stroke-linecap: round !important;
}

.ft-home .ft-mobile-product .ft-phone-route__stop {
  fill: #060908 !important;
  stroke: rgba(255, 255, 255, 0.28) !important;
  stroke-width: 1.4px !important;
  transition: all 200ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) !important;
}

.ft-home .ft-mobile-product .ft-phone-route__stop:nth-of-type(1),
.ft-home .ft-mobile-product .ft-phone-route__stop:nth-of-type(2) {
  fill: #8FB8D8 !important;
  stroke: #040706 !important;
  stroke-width: 1.5px !important;
  filter: drop-shadow(0 0 5px rgba(143, 184, 216, 0.55)) !important;
}

.ft-home .ft-mobile-product .ft-phone-route__stop.is-current {
  fill: #FFFFFF !important;
  stroke: #8FB8D8 !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 10px rgba(143, 184, 216, 0.85)) !important;
}

.ft-home .ft-mobile-product .ft-phone-route__halo {
  fill: none !important;
  stroke: rgba(143, 184, 216, 0.55) !important;
  stroke-width: 1.4px !important;
  animation: ft-halo-breathe 2.8s ease-in-out infinite !important;
  transform-origin: 44px 174px !important;
}

.ft-home .ft-mobile-product .ft-phone-route__halo-outer {
  fill: none !important;
  stroke: rgba(34, 211, 238, 0.22) !important;
  stroke-width: 1px !important;
  stroke-dasharray: 2 3 !important;
  animation: ft-halo-breathe 2.8s ease-in-out infinite reverse !important;
  transform-origin: 44px 174px !important;
}

@keyframes ft-halo-breathe {
  0%, 100% {
    r: 12px;
    stroke-opacity: 0.35;
  }
  50% {
    r: 16.5px;
    stroke-opacity: 0.95;
  }
}

.ft-home .ft-mobile-product .ft-phone-route__label {
  fill: #60716A !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.ft-home .ft-mobile-product .ft-phone-route__label:nth-of-type(1),
.ft-home .ft-mobile-product .ft-phone-route__label:nth-of-type(2) {
  fill: #A0B2AA !important;
}

.ft-home .ft-mobile-product .ft-phone-route__label.is-current {
  fill: #FFFFFF !important;
  font-weight: 600 !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important;
}

/* --------------------------------------------------------------------------
   7. RESPONSIVIDADE & ESCALAÇÃO ADAPTATIVA
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .ft-home .ft-mobile-product .ft-mobile-head h2 {
    font-size: clamp(3.2rem, 7.4vw, 7.2rem) !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-head__occluded {
    font-size: clamp(4rem, 8.8vw, 9.6rem) !important;
    margin-left: clamp(16px, 3.5vw, 48px) !important;
  }

  .ft-home .ft-mobile-product .ft-phone {
    right: clamp(20px, 3.5vw, 56px) !important;
    width: clamp(340px, 25vw, 400px) !important;
  }
}

@media (max-width: 960px) {
  .ft-home .ft-scene.ft-mobile-product {
    min-height: auto !important;
    padding: clamp(64px, 8.5vh, 84px) 24px 60px !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-head {
    max-width: 100% !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-head h2 {
    font-size: clamp(2.8rem, 8.5vw, 5.2rem) !important;
    line-height: 0.92 !important;
    text-wrap: balance !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-head__occluded {
    font-size: clamp(3.4rem, 9.8vw, 6.4rem) !important;
    margin-left: clamp(12px, 3vw, 36px) !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-head__tail {
    margin-left: clamp(8px, 2vw, 20px) !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-deck {
    max-width: 100% !important;
    margin-top: 32px !important;
  }

  .ft-home .ft-mobile-product .ft-phone {
    position: relative !important;
    inset: auto !important;
    margin: 44px auto 0 !important;
    width: min(360px, 84vw) !important;
  }
}

@media (max-width: 600px) {
  .ft-home .ft-scene.ft-mobile-product {
    padding: clamp(52px, 7.5svh, 68px) 20px 48px !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-tracker {
    margin-bottom: 18px !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-tracker::after {
    display: none !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-head h2 {
    font-size: clamp(2.4rem, 10.2vw, 3.4rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.04em !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-head__occluded {
    font-size: clamp(2.8rem, 11.2vw, 4rem) !important;
    margin-left: 0 !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-head__tail {
    margin-left: 0 !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-deck {
    margin-top: 24px !important;
    padding-top: 16px !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-deck p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-action {
    width: 100% !important;
  }

  .ft-home .ft-mobile-product .ft-mobile-cta {
    width: 100% !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    padding: 13px 20px !important;
  }

  .ft-home .ft-mobile-product .ft-phone {
    width: min(300px, 86vw) !important;
    margin: 36px auto 0 !important;
  }
}

/* --------------------------------------------------------------------------
   8. ACESSIBILIDADE & PREFERS-REDUCED-MOTION (Norma Obrigatória)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ft-home .ft-mobile-product *,
  .ft-home .ft-mobile-product *::before,
  .ft-home .ft-mobile-product *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
  }

  .ft-home .ft-mobile-product .ft-phone-route__halo,
  .ft-home .ft-mobile-product .ft-phone-route__halo-outer {
    animation: none !important;
    r: 13px !important;
    stroke-opacity: 0.55 !important;
  }
}


/* Fundo unico. Varios agentes inventaram o proprio preto esverdeado
   (rgb(3,5,4), rgb(2,5,4), rgb(2,4,3)) em vez de usar o token, e o degrau
   entre cenas virava faixa visivel na emenda. O token e um so. */
.ft-home .ft-scene.ft-mobile-product.ft-mobile-product { background-color: var(--ink-950) !important; }

.ft-home .ft-scene.ft-mobile-product.ft-mobile-product { overflow-x: clip; }

/* --- 08-contato --- */
/* override.css — Cena 08: Fechamento (#contato)
   Direção de Arte Sênior — Alvo: Nível Awwwards Site of the Year
   Partido Compositivo (§13 da LEI): A pergunta no centro óptico em escala máxima,
   ancorada por ação embaixo — frontal, não alinhada ao canto inferior esquerdo.
   
   Evolução Cirúrgica pós-Veredito r1 contra Kononenko:
   1. Respiro e whitespace como luxo: ampla aeração vertical, fim do congestionamento.
   2. Tipografia com voz editorial: h2 elevado a --font-display (STIX Two Text),
      eliminando a manchete "branco puro sobre preto seguro" por sofisticação acadêmica/galeria.
   3. Subordinação do wordmark GENNOMX: luminância reduzida (0.13 → 0) e espaçamento
      generoso, transformando o bloco em alicerce arquitetônico que apoia o CTA em vez de disputar foco.
   4. Remoção do "CONTATO" duplicado da órbita: zero ornamentação espúria; âncora lateral limpa.
   5. Preservação do impacto e função de conversão dos CTAs com hierarquia formal radical. */

/* --------------------------------------------------------------------------
   1. SUPERFÍCIE — ESCURO CHAPADO COM PROFUNDIDADE ÓPTICA POR LUZ
   Profundidade alcançada por luz pura (§2 da LEI): halo suave frio atrás da pergunta
   e vinheta de base, sem granulação, sem ruído tileado.
   -------------------------------------------------------------------------- */
#contato.ft-closing {
  position: relative !important;
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(40px, 6vh, 68px) var(--gutter, clamp(24px, 4vw, 64px)) 0 !important;
  background-color: var(--ink-950, #07080C) !important;
  background-image:
    radial-gradient(ellipse 75% 45% at 50% 36%, rgba(140, 180, 228, 0.038) 0%, transparent 70%),
    radial-gradient(ellipse 110% 60% at 50% 100%, rgba(2, 3, 5, 0.90) 0%, transparent 62%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  isolation: isolate !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  border-top: none !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
}

#contato#contato {
  background-color: var(--ink-950, #07080C) !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* --------------------------------------------------------------------------
   2. EIXO CENTRAL — COLUNA FRONTAL COM MÁXIMO CONTROLE
   -------------------------------------------------------------------------- */
#contato .ft-closing-copy {
  position: relative !important;
  z-index: 4 !important;
  width: 100% !important;
  max-width: var(--content-wide, 1340px) !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   3. DATUM SUPERIOR — ANCORAGEM DE TOPO (§17 da LEI)
   Réguas curtas (<=12%) recuadas das arestas — nunca cruzam a emenda (§15).
   -------------------------------------------------------------------------- */
#contato .ft-closing-tracker {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  position: relative !important;
  padding-bottom: clamp(12px, 1.8vh, 18px) !important;
  margin-bottom: clamp(32px, 5vh, 56px) !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

#contato .ft-closing-tracker::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(48px, 10%, 120px);
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

#contato .ft-closing-tracker::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(48px, 10%, 120px);
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

#contato .ft-signal-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted, #9DAAA4);
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

#contato .ft-signal-label i {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal, #FF4F8F);
  box-shadow: 0 0 6px rgba(255, 79, 143, 0.5);
  font-style: normal !important;
}

#contato .ft-tracker-index {
  display: inline-block;
  /* encostava a exatos 0px da borda da cena */
  margin-right: clamp(4px, 1vw, 16px);
  color: rgba(255, 255, 255, 0.47);   /* 0.32 dava 2,77:1 */
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. OBJETO ESCULPIDO — A PERGUNTA NO CENTRO ÓPTICO COM VOZ EDITORIAL
   Defeito atacado: "headline branco puro sobre preto está mais seguro que o resto".
   Adoção de --font-display (STIX Two Text): elegância de galeria, autoridade de research.
   "tese": ênfase tipográfica pura em peso (700) + salto de escala (+14%), sem itálico, sem rosa.
   "ativo": tipografia vazada precisa.
   Tonalidade: osso/marfim nobre (var(--ink-050, #EDF2EE)) com sutil nuance na linha 2.
   -------------------------------------------------------------------------- */
#contato .ft-closing-statement {
  width: 100% !important;
  margin: 0 0 clamp(28px, 4.2vh, 48px) 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

#contato .ft-closing-title {
  margin: 0 !important;
  color: var(--ink-050, #EDF2EE) !important;
  font-family: var(--font-display, 'STIX Two Text', Georgia, serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(3.2rem, 7.2vw, 8.4rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.034em !important;
  text-align: center !important;
  text-wrap: balance !important;
  display: grid !important;
  justify-items: center !important;
  gap: 0.05em !important;
}

#contato .ft-closing-line {
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: min(6.3vw, 124px) !important;
  line-height: 0.96 !important;
}

#contato .ft-closing-line-1 {
  letter-spacing: -0.036em !important;
}

#contato .ft-closing-line-2 {
  letter-spacing: -0.030em !important;
  margin-top: 0.05em !important;
  color: rgba(237, 242, 238, 0.86) !important;
}

/* "tese" — ênfase tipográfica pura: STIX Two Text 700 + salto de escala (+14%).
   Sobrevive em P&B. Sem itálico (§14), sem rosa (§18/§21), sem halo. */
#contato .ft-highlight-signal {
  font-family: var(--font-display, 'STIX Two Text', Georgia, serif) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 1.14em !important;
  /* inerte: o titulo inteiro e pintado por gradiente recortado no texto
     (`background-clip: text` em `.ft-closing-title`), entao todos os glifos
     herdam aquela pintura e a cor declarada aqui nao tem efeito. A enfase
     desta palavra vem de familia, peso e escala. */
  color: #FFFFFF !important;
  letter-spacing: -0.038em !important;
  display: inline-block !important;
  vertical-align: -0.03em !important;
  line-height: 0.9 !important;
  text-shadow: none !important;
  padding-inline: 0.04em !important;
}

/* "ativo" — tipografia vazada por contorno (ghost stroke) */
#contato .ft-highlight-stroke {
  font-family: var(--font-display, 'STIX Two Text', Georgia, serif) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: -0.032em !important;
  display: inline-block !important;
  color: rgba(237, 242, 238, 0.28) !important;
  padding-inline: 0.04em !important;
}

@supports (-webkit-text-stroke: 1px) {
  #contato .ft-highlight-stroke {
    color: transparent !important;
    -webkit-text-stroke: max(0.8px, 0.012em) rgba(237, 242, 238, 0.80) !important;
    text-shadow: none !important;
  }
}

/* --------------------------------------------------------------------------
   5. CONSOLE OPERACIONAL & CTAs — RESPIRO COMO LUXO & AÇÃO INEQUÍVOCA
   Defeito atacado: corte do CONTATO competindo com botões + eliminação do CONTATO duplicado.
   Orbit ganha régua curta centralizada e elimina ::after espúrio.
   Primário: monólito de carbono preciso com fio de sinal rosa na base e seta reativa.
   Secundário: mono tipográfico entre colchetes, completamente subordinado em forma e escala.
   -------------------------------------------------------------------------- */
#contato .ft-closing-orbit {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  padding-top: clamp(24px, 3.5vh, 36px) !important;
  border-top: none !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Régua curta centralizada interna (§15) */
#contato .ft-closing-orbit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(64px, 16%, 200px);
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* REMOVIDO ::after com "CONTATO" que criava redundância visual ao lado dos CTAs */
#contato .ft-closing-orbit::after {
  display: none !important;
  content: none !important;
}

/* A frase "a primeira conversa e exploratoria e sem compromisso" estava
   escondida por duas regras de display:none. Ela responde exatamente a
   objecao que trava o ultimo clique, num botao que pede agenda. Volta a
   aparecer, no vao que o layout ja reservava entre o filete e a acao. */
#contato .ft-closing-meta {
  display: block !important;
  margin-top: clamp(-18px, -1.4vh, -8px) !important;
  max-width: 46ch !important;
  margin-inline: auto !important;
}

#contato .ft-closing-desc {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: clamp(0.92rem, 1.05vw, 1.02rem) !important;
  line-height: 1.56 !important;
  text-align: center !important;
  text-wrap: pretty !important;
}

#contato .ft-actions {
  /* A frase estava a 77px da pergunta e a 22px do botao, tres vezes mais perto
     do que vem depois. Lia como legenda da acao em vez de ponte entre a
     pergunta e ela. Proporcao invertida: mais perto de quem explica, mais
     longe de quem age. */
  margin-top: clamp(28px, 4.4vh, 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 2vh, 18px) !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
}

/* CTA Primário: Instrumento de alta convicção */
#contato .ft-cta-primary {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  min-height: 58px !important;
  width: clamp(280px, 38vw, 490px) !important;
  padding: 17px 32px !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #F5F6FA !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-bottom: 2px solid var(--signal, #FF4F8F) !important;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45) !important;
  transition: background 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  box-sizing: border-box !important;
}

#contato .ft-cta-arrow {
  display: inline-block !important;
  font-size: 13.5px !important;
  color: var(--signal, #FF4F8F) !important;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  flex-shrink: 0 !important;
}

#contato .ft-cta-primary:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  border-bottom-color: var(--signal, #FF4F8F) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 42px rgba(0, 0, 0, 0.68) !important;
}

#contato .ft-cta-primary:hover .ft-cta-arrow {
  transform: translate(3px, -3px) !important;
}

/* CTA Secundário: Tipografia pura entre colchetes */
#contato .ft-cta-secondary {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(200, 214, 208, 0.78) !important;   /* antes 4,00:1, abaixo do minimo */
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  transition: color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#contato .ft-cta-secondary::before {
  content: "[" !important;
  margin-right: 7px !important;
  color: rgba(255, 255, 255, 0.20) !important;
  transition: color 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#contato .ft-cta-secondary::after {
  content: "]" !important;
  margin-left: 7px !important;
  color: rgba(255, 255, 255, 0.20) !important;
  transition: color 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#contato .ft-cta-secondary:hover {
  color: rgba(245, 246, 250, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.48) !important;
}

#contato .ft-cta-secondary:hover::before,
#contato .ft-cta-secondary:hover::after {
  color: var(--signal, #FF4F8F) !important;
}

#contato .ft-cta-instrument:focus-visible {
  outline: 2px solid var(--signal, #FF4F8F) !important;
  outline-offset: 4px !important;
}

/* --------------------------------------------------------------------------
   6. CAMPO LATERAL — ANCORAGEM DIREITA ÚNICA (§17 da LEI)
   -------------------------------------------------------------------------- */
#contato .ft-closing-field {
  position: absolute !important;
  top: clamp(48px, 8vh, 96px) !important;
  right: clamp(16px, 2.5vw, 36px) !important;
  bottom: clamp(48px, 8vh, 96px) !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

/* O rotulo lateral "CONTATO" saiu: decorativo, a 1,75:1, e redundante com o
   rotulo de sinal e com o indice da cena. */

/* --------------------------------------------------------------------------
   7. HORIZONTE ÓPTICO — FIO ULTRA-CURTO INTERNO (§15 da LEI)
   -------------------------------------------------------------------------- */
#contato .ft-horizon {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: var(--content-wide, 1340px) !important;
  margin: clamp(20px, 3vh, 32px) auto 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

#contato .ft-horizon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 18%, 220px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.08) 75%,
    transparent 100%
  );
}

#contato .ft-horizon::after {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. WORDMARK MONUMENTAL GENNOMX — O ALICERCE QUE APOIA O CTA
   Defeito atacado: "o corte do CONTATO embaixo rouba atenção do botão — compete com o CTA".
   Resolução:
   - Luminância calibrada: cai de 0.58 para suaves 0.13, desvanecendo até 0.0.
   - Espaçamento aumentado: ampla distância de respiro a partir dos CTAs.
   - O wordmark age como baixo-relevo em granito / marca d'água monumental,
     ancorando a base da tela sem jamais competir com a ação primária.
   -------------------------------------------------------------------------- */
#contato .ft-closing-word {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  margin-top: clamp(48px, 7.5vh, 96px) !important;
  margin-bottom: 0 !important;
  font-family: var(--font-wordmark, 'DM Sans', -apple-system, sans-serif) !important;
  font-size: min(18vw, 290px) !important;
  font-weight: 700 !important;
  line-height: 0.78 !important;
  letter-spacing: -0.055em !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  user-select: none !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: transparent !important;
  background-image: linear-gradient(
    180deg,
    rgba(245, 246, 250, 0.13) 0%,
    rgba(245, 246, 250, 0.08) 32%,
    rgba(245, 246, 250, 0.02) 65%,
    rgba(245, 246, 250, 0.00) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVIDADE & PREVENÇÃO DE OVERFLOW (TABLET & MOBILE)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #contato.ft-closing {
    min-height: auto !important;
    padding: clamp(36px, 6vh, 52px) clamp(16px, 5vw, 24px) 0 !important;
  }

  #contato .ft-closing-tracker {
    margin-bottom: 24px !important;
    padding-bottom: 10px !important;
  }

  #contato .ft-tracker-index {
    display: none !important;
  }

  #contato .ft-closing-statement {
    margin-bottom: 20px !important;
  }

  #contato .ft-closing-title {
    font-size: clamp(2.2rem, 8.6vw, 3.4rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.03em !important;
  }

  #contato .ft-closing-line {
    font-size: min(7.2vw, 42px) !important;
    white-space: normal !important;
  }

  #contato .ft-highlight-signal {
    font-size: 1.12em !important;
    vertical-align: -0.02em !important;
  }

  #contato .ft-closing-orbit {
    padding-top: 18px !important;
  }

  #contato .ft-actions {
    margin-top: 20px !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #contato .ft-cta-primary {
    width: 100% !important;
    min-height: 52px !important;
    padding: 15px 20px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    gap: 16px !important;
  }

  #contato .ft-closing-field {
    display: none !important;
  }

  #contato .ft-horizon {
    margin-top: 16px !important;
  }

  #contato .ft-closing-word {
    font-size: min(17vw, 120px) !important;
    margin-top: 32px !important;
  }
}

@media (max-width: 440px) {
  #contato .ft-closing-title {
    font-size: clamp(1.85rem, 8.2vw, 2.3rem) !important;
  }

  #contato .ft-closing-line {
    font-size: min(6.8vw, 30px) !important;
  }

  #contato .ft-cta-primary {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
}

/* --------------------------------------------------------------------------
   10. ACESSIBILIDADE & PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #contato *,
  #contato *::before,
  #contato *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ===== fim WS-041 ===== */

/* ===== WS-041 — paginas institucionais (bloco gerado; nao editar a mao) ===== */

/* ---------- sobre (sobre.html) ---------- */
/* ==========================================================================
   GennomX — Sobre a GennomX (sobre.html)
   Partido: ESPINHA VERTICAL (Vertical Spine) — Refinamento Awwwards Rodada 24
   Direção de Arte: Sóbrio, científico, preciso, Awwwards level.
   Resolução Integral dos Defeitos da Rodada 23 (Veredito cego vs Produx-01).
   Tokens consumidos de assets/css/main.css. Zero dependência externa.
   ========================================================================== */

/* 1. Reset estrutural escopado — fundo escuro chapado puro (LEI §2) */
body.pag-sobre {
  background-color: var(--ink-950) !important;
  color: var(--ink-050);
}

/* Neutraliza backgrounds legados e antipadrões de emenda */
body.pag-sobre .page-head.page-head--inst.fx-dotgrid, body.pag-sobre .section-border, body.pag-sobre .section {
  background-image: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Neutraliza tags de ênfase (LEI §14, LEI-PAGINAS §2) */
body.pag-sobre em, body.pag-sobre i {
  font-style: normal !important;
}

/* Acessibilidade de foco visual rigoroso */
body.pag-sobre :focus-visible {
  outline: 2px solid var(--signal) !important;
  outline-offset: 3px !important;
}

/* 2. Botões e CTAs — Hierarquia Radical por Forma, Escala e Peso (Veredito #4, LEI §5, §21) */
body.pag-sobre .btn-primary {
  background-color: var(--ink-050) !important;
  color: var(--ink-950) !important;
  border: 1px solid var(--ink-050) !important;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 34px !important;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

body.pag-sobre .btn-primary:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.2);
}

body.pag-sobre .gx-cta-arrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease);
}

body.pag-sobre .btn-primary:hover .gx-cta-arrow {
  transform: translateX(3px);
}

/* CTA Secundário: Subordinação formal categórica — link tipográfico puro, sem caixa nem pílula (Veredito #4) */
body.pag-sobre .gx-cta-secondary {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--ink-700) !important;
  box-shadow: none !important;
  color: var(--ink-300) !important;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 0 !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  margin-top: 4px;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

body.pag-sobre .gx-cta-secondary:hover {
  color: var(--ink-050) !important;
  border-bottom-color: var(--signal) !important;
}

/* 3. Sistema da Espinha Vertical Contínua (Hero ao Terminal) */
.gx-spine-system {
  position: relative;
  background: radial-gradient(circle at 65% 18%, rgba(143, 184, 216, 0.022) 0%, transparent 60%), var(--ink-950);
  isolation: isolate;
  padding-bottom: clamp(96px, 12vw, 160px);
  --spine-pos: 64%;
}

.gx-spine-container {
  position: relative;
  max-width: var(--content-max);
}

/* Eixo vertical contínuo da página inteira: ancorado assimetricamente a 64% (Proporção Áurea 64/36 — Veredito #1) */
.gx-spine-axis {
  position: absolute;
  top: clamp(140px, 15vh, 180px);
  bottom: 0;
  left: var(--spine-pos);
  width: 1px;
  pointer-events: none;
  z-index: 2;
  transform: translateX(-50%);
}

/* Feixe de luz de baixa opacidade para massa perceptual de fundo (LEI-PAGINAS §15, §16) */
.gx-spine-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  width: 49px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(143, 184, 216, 0.035) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.gx-spine-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--ink-800) 4%,
    var(--ink-800) 96%,
    transparent 100%
  );
  opacity: 0.55;
}

/* Gesto Vivo Obrigatório da Hero: traço arquitetural com massa que se desenha e para (LEI-PAGINAS §13, §15) */
.gx-spine-line {
  position: absolute;
  top: 0;
  height: clamp(520px, 58vh, 720px);
  left: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--ink-700) 10%,
    var(--struct) 80%,
    var(--ink-050) 100%
  );
  transform-origin: top center;
  transform: scaleY(0);
  animation: gxSpineDraw 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gx-spine-node {
  position: absolute;
  top: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  background-color: var(--ink-950);
  border: 1px solid var(--struct);
  transform: rotate(45deg);
  opacity: 0;
  animation: gxNodeTravel 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes gxSpineDraw {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes gxNodeTravel {
  0% {
    top: 0;
    opacity: 1;
  }
  90% {
    top: calc(clamp(520px, 58vh, 720px) - 7px);
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
  100% {
    top: calc(clamp(520px, 58vh, 720px) - 7px);
    opacity: 1;
    transform: rotate(45deg) scale(1.15);
  }
}

/* 4. Pórtico Editorial / Abertura da Hero — Dominância Escalar e Assimetria Narrativa (Vereditos #1, #2, #3, #5) */
.gx-portico {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(140px, 16vh, 180px);
  padding-bottom: clamp(64px, 8vh, 96px);
  box-sizing: border-box;
  z-index: 3;
}

.gx-portico__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  column-gap: clamp(48px, 6vw, 96px);
  align-items: end; /* Quebra o alinhamento paralelo de topo; ancoragem inferior tensionada (Veredito #1, #3) */
  position: relative;
}

.gx-portico__headline {
  position: relative;
  padding-right: clamp(16px, 2.5vw, 36px);
}

/* Título dominante: Salto de Escala Monumental de 5.5x a 8.5x sobre o corpo (Veredito #2) */
.gx-portico__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.2rem, 5.8vw, 5.8rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink-050);
  margin: 0;
  max-width: 920px;
}

.gx-title-pre {
  display: block;
  font-weight: 300;
  font-size: 1em;
  letter-spacing: -0.035em;
  color: var(--ink-050);
  margin-bottom: 2px;
}

/* Ênfase tipográfica: Posicional e Escalar Absoluta — idêntica cor var(--ink-050), sobrevive 100% em P&B (Veredito #5, LEI §18, §21) */
.gx-title-focus {
  display: block;
  font-weight: 700;
  font-size: clamp(4.6rem, 8.8vw, 9.2rem);
  line-height: 0.84;
  letter-spacing: -0.045em;
  color: var(--ink-050); /* Branco puro idêntico: sem mancha cinza cosmética */
  margin-left: clamp(24px, 4vw, 56px); /* Salto posicional e tensão visual arquitetural */
  margin-top: 6px;
  margin-bottom: 6px;
}

.gx-title-post {
  display: block;
  font-weight: 300;
  font-size: 1em;
  letter-spacing: -0.035em;
  color: var(--ink-050);
}

/* Coluna de apoio: Ancorada no terço inferior, dialogando naturalmente com o final do headline (Veredito #1, #3) */
.gx-portico__aside {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: clamp(16px, 2.5vw, 36px);
  padding-bottom: 8px;
}

.gx-portico__lede {
  font-family: var(--font-sans);
  font-size: clamp(0.96rem, 1.1vw, 1.06rem);
  font-weight: 300;
  line-height: 1.62;
  letter-spacing: -0.01em;
  color: var(--ink-200);
  margin: 0 0 clamp(24px, 3vw, 36px) 0;
  max-width: 440px;
}

/* Ações organizadas com distinção formal hierárquica absoluta (Veredito #4) */
.gx-portico__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--ink-800);
  width: 100%;
}

/* 5. Estações da Espinha: Ritmo vertical não-uniforme com variação >30% (LEI-PAGINAS §17) */
.gx-station {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  column-gap: clamp(48px, 6vw, 96px);
  z-index: 3;
  align-items: start;
}

/* Cadência rítmica não-uniforme: Pequeno (84px) / Grande (180px) / Pequeno (100px) / Extra-Grande (240px) / Grande (170px) / Médio (110px) */
.gx-station--tese {
  padding: clamp(64px, 7.5vw, 84px) 0;
}

.gx-station--approach {
  padding: clamp(130px, 15vw, 180px) 0;
}

.gx-station--diff {
  padding: clamp(70px, 8vw, 100px) 0;
}

.gx-station--ai {
  padding-top: clamp(140px, 16vw, 200px);
  /* Era clamp(180px, 20vw, 260px): o vao ate os temas chegava a 460px, contra 264
     a 300 nas outras transicoes. Com 100 ele volta a 300. */
  padding-bottom: clamp(80px, 7vw, 100px);
}

.gx-station--topics {
  padding-top: clamp(140px, 16vw, 200px);
  padding-bottom: clamp(90px, 10vw, 130px);
}

.gx-station--founder {
  padding: clamp(120px, 14vw, 170px) 0;
}

.gx-station--terminal {
  padding: clamp(90px, 10vw, 130px) 0 clamp(90px, 10vw, 140px) 0;
}

/* Checkpoint no datum da espinha */
.gx-spine-checkpoint {
  position: absolute;
  top: clamp(70px, 8.5vw, 100px);
  left: var(--spine-pos);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
}

.gx-checkpoint-node {
  display: block;
  width: 5px;
  height: 5px;
  background-color: var(--ink-950);
  border: 1px solid var(--ink-600);
  transform: rotate(45deg);
}

.gx-station__col-a {
  grid-column: 1;
  position: relative;
  padding-right: clamp(16px, 2.5vw, 36px);
}

.gx-station__col-b {
  grid-column: 2;
  position: relative;
  padding-left: clamp(16px, 2.5vw, 36px);
}

/* Títulos de Seção: Salto de Escala Monumental >3.2x do corpo */
.gx-station-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--ink-050);
  margin: 0;
  max-width: 580px;
}

.gx-station-title--approach {
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* Hierarquia dominante em GennomX AI */
.gx-station-title--ai {
  font-size: clamp(3.8rem, 7vw, 6.4rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin-bottom: clamp(24px, 3vw, 36px);
  max-width: 100%;
}

.gx-station-title--field {
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  letter-spacing: -0.035em;
  margin-bottom: clamp(48px, 5vw, 68px);
  max-width: 100%;
}

.gx-station-lede--ai {
  font-family: var(--font-sans);
  font-size: clamp(0.96rem, 1.15vw, 1.1rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-200);
  margin: 0 0 clamp(36px, 4.5vw, 48px) 0;
  max-width: 520px;
}

/* 6. Estação 01 — Tese Institucional & Dispositivo Factual de Prova Concreta */
.gx-station-dossier {
  margin-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--ink-800);
  max-width: 500px;
}

.gx-dossier-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-800);
}

.gx-dossier-key {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-500);
}

.gx-dossier-val {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-200);
}

.gx-thesis-narrative {
  max-width: 480px;
}

/* Manifesto em tipografia display serif: autoridade e elegância */
.gx-thesis-lead {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.1vw, 2.2rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--ink-050);
  margin: 0;
}

/* 7. Estação 02 — Metodologia */
.gx-approach-flow {
  display: flex;
  flex-direction: column;
  max-width: 540px;
}

.gx-approach-tier {
  border-top: 1px solid var(--ink-800);
  padding: 24px 0;
  transition: border-color var(--dur) var(--ease);
}

.gx-approach-tier:last-child {
  border-bottom: 1px solid var(--ink-800);
}

.gx-approach-tier:hover {
  border-color: var(--ink-600);
}

.gx-tier-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  color: var(--ink-050);
  margin: 0 0 8px 0;
}

.gx-tier-desc {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-300);
  margin: 0;
}

/* 8. Estação 03 — Diferenciais: Pilares em Linha Editorial Vertical (sem cards) */
.gx-diff-editorial {
  max-width: 500px;
}

.gx-diff-lead {
  padding-bottom: clamp(20px, 2.5vw, 30px);
  margin-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--ink-800);
}

.gx-diff-lead__title {
  font-family: var(--font-sans);
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-050);
  margin: 0 0 12px 0;
}

.gx-diff-lead__text {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.55;
  color: var(--ink-200);
  margin: 0;
}

.gx-diff-stack {
  display: flex;
  flex-direction: column;
}

.gx-diff-stackitem {
  position: relative;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-800);
}

.gx-diff-stackitem:last-child {
  border-bottom: none;
}

.gx-diff-stackitem__title {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-050);
  margin: 0 0 6px 0;
}

.gx-diff-stackitem__text {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-300);
  margin: 0;
}

/* 9. Estação 04 — GennomX AI & Esquemático Integrado ao Grid */
/* O esquema ocupava so a coluna estreita da direita, 372x124px a 1440, com rotulos
   de 4,4 a 4,9px na tela. Na largura total da estacao, abaixo do titulo e do lede,
   a escala sobe para cerca de 1,7 e os rotulos chegam a 15px. */
.gx-station--ai .gx-station__col-b {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 0;
  margin-top: clamp(40px, 5vw, 64px);
}

/* Fundo solido: na largura total, a espinha vertical cruzaria o desenho sobre o
   rotulo SINTESE ESTRATEGICA. Assim ela passa por tras do esquema, como passa
   por tras do texto das estacoes. */
.gx-ai-schematic {
  position: relative;
  width: 100%;
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
  padding: clamp(24px, 3vw, 36px) 0;
  background: var(--ink-950);
}

.gx-ai-svg {
  display: block;
  width: 100%;
  height: auto;
}

.gx-station-action {
  margin-top: clamp(28px, 3.5vw, 40px);
}

/* 10. Estação 05 — Escopo Intelectual */
.gx-station--topics {
  display: block;
}

.gx-topics-bridge {
  position: relative;
  z-index: 2;
}

.gx-topics-field {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
  background: transparent;
}

.gx-topic-col {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px);
  border-right: 1px solid var(--ink-800);
}

.gx-topic-col:last-child {
  border-right: none;
}

.gx-topic-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-050);
  padding-bottom: 16px;
  margin: 0 0 20px 0;
  border-bottom: 1px solid var(--ink-800);
}

.gx-topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.gx-topic-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-300);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

.gx-topic-item::before {
  content: '◇';
  font-size: 7px;
  color: var(--ink-600);
  margin-right: 10px;
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease);
}

.gx-topic-item:last-child {
  border-bottom: none;
}

.gx-topic-item:hover {
  color: var(--ink-050);
  padding-left: 4px;
}

.gx-topic-item:hover::before {
  color: var(--signal);
}

/* 11. Estação 06 — Liderança / Fundador */
.gx-station--founder {
  display: block;
}

.gx-founder-split {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  column-gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.gx-founder-visual {
  position: relative;
}

.gx-founder-frame {
  position: relative;
  border: 1px solid var(--ink-800);
  background: var(--ink-900);
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
}

.gx-founder-portrait {
  display: block;
  width: 100%;
  height: clamp(460px, 48vw, 600px);
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(100%) contrast(1.04) brightness(0.92);
  background-color: var(--ink-900);
  transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.gx-founder-frame:hover .gx-founder-portrait {
  filter: grayscale(30%) contrast(1.06) brightness(0.96);
  transform: scale(1.015);
}

.gx-founder-content {
  padding-top: 8px;
}

.gx-founder-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--ink-050);
  margin: 0 0 8px 0;
}

.gx-founder-role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-500);
  margin-bottom: 24px;
}

.gx-founder-bio {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-200);
  margin: 0 0 32px 0;
  max-width: 640px;
}

.gx-credentials-dossier {
  border-top: 1px solid var(--ink-800);
  margin-bottom: 36px;
}

.gx-cred-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-800);
  font-size: 0.86rem;
  line-height: 1.5;
}

.gx-cred-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.gx-cred-val {
  font-family: var(--font-sans);
  color: var(--ink-200);
}

.gx-founder-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 12. Estação 07 — Terminal da Espinha / Fechamento */
.gx-station--terminal {
  display: block;
  text-align: center;
  position: relative;
}

.gx-terminal-anchor {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.gx-terminal-node {
  display: block;
  width: 9px;
  height: 9px;
  background-color: var(--signal);
  box-shadow: 0 0 12px var(--signal);
  transform: rotate(45deg);
}

.gx-terminal-body {
  max-width: 820px;
  margin: 0 auto;
}

.gx-terminal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink-050);
  margin: 0 0 20px 0;
}

.gx-terminal-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-300);
  max-width: 600px;
  margin: 0 auto 36px auto;
}

.gx-terminal-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}

/* 13. Responsividade Mobile & Tablet */
@media (max-width: 1024px) {
  .gx-spine-system {
    --spine-pos: 50%;
  }

  .gx-station {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 36px;
  }

  .gx-founder-split {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .gx-founder-portrait {
    height: 440px;
  }

  .gx-topics-field {
    grid-template-columns: 1fr;
  }

  .gx-topic-col {
    border-right: none;
    border-bottom: 1px solid var(--ink-800);
  }

  .gx-topic-col:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .gx-spine-system {
    --spine-pos: 20px;
  }

  .gx-spine-axis {
    left: 20px;
    transform: none;
  }

  .gx-spine-checkpoint {
    left: 20px;
  }

  .gx-portico {
    min-height: auto;
    padding-top: clamp(110px, 16vw, 140px);
    padding-bottom: 40px;
  }

  .gx-portico__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding-left: 36px;
  }

  .gx-portico__headline {
    padding-right: 0;
  }

  .gx-portico__title {
    font-size: clamp(2.4rem, 8vw, 3.4rem);
    line-height: 1.0;
  }

  .gx-title-focus {
    margin-left: clamp(12px, 3vw, 24px);
    font-size: 1.15em;
  }

  .gx-portico__aside {
    max-width: 100%;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .gx-portico__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  body.pag-sobre .gx-portico__actions .btn-primary {
    width: 100%;
    justify-content: center;
  }

  body.pag-sobre .gx-cta-secondary {
    justify-content: center;
    padding: 10px 0 !important;
  }

  .gx-station {
    grid-template-columns: 1fr;
    row-gap: 24px;
    padding-left: 36px;
  }

  .gx-station__col-a, .gx-station__col-b {
    grid-column: 1 !important;
    padding-left: 0;
    padding-right: 0;
  }

  .gx-station-title--ai {
    font-size: clamp(2.6rem, 8vw, 3.6rem);
  }

  .gx-dossier-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
    padding: 10px 0;
  }

  .gx-thesis-lead {
    font-size: clamp(1.35rem, 5.5vw, 1.8rem);
    line-height: 1.3;
  }

  .gx-cred-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .gx-founder-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .gx-terminal-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}

/* CTAs secundarios: 27px de altura no desktop e 39 no celular, abaixo do minimo de
   44px. Um pseudoelemento amplia a area clicavel para 44px sem mover o texto nem
   o sublinhado, que e o desenho do link. */
body.pag-sobre .gx-cta-secondary {
  position: relative;
}

body.pag-sobre .gx-cta-secondary::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Rotulos do esquema em telas menores. As unidades valem no espaco do viewBox de
   720: 13 rendem cerca de 12px a 768, e 22 rendem cerca de 9,5px a 390. Com corpo
   maior, o rotulo do trilho de baixo invadiria a curva e CONVERGENCIA encostaria
   nela: os dois descem para longe do tracado. */
@media (max-width: 768px) {
  .gx-ai-svg text {
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .gx-ai-svg .gx-ai-rotulo--desce {
    transform: translateY(30px);
  }

  .gx-ai-svg .gx-ai-rotulo--centro {
    transform: translateY(20px);
  }
}

@media (max-width: 640px) {
  .gx-ai-svg text {
    font-size: 22px;
    letter-spacing: 0.04em;
  }

  /* INTERPRETACAO ESTRATEGICA e alinhado a direita e, neste corpo, avancaria
     sobre o anel externo do nucleo. Sobe para a faixa livre acima dele. */
  .gx-ai-svg .gx-ai-rotulo--saida {
    transform: translateY(-26px);
  }
}

/* 14. Acessibilidade — Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .gx-spine-line {
    animation: none !important;
    transform: scaleY(1) !important;
  }

  .gx-spine-node {
    animation: none !important;
    top: calc(clamp(520px, 58vh, 720px) - 7px) !important;
    opacity: 1 !important;
    transform: rotate(45deg) !important;
  }

  body.pag-sobre *, body.pag-sobre *::before, body.pag-sobre *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- solucoes (solucoes.html) ---------- */
/* ==========================================================================
   SOLUÇÕES — GennomX Design System (Nível Awwwards / Rodada de Refinamento 21)
   Partido: MATRIZ EM LARGURA TOTAL COM DISPERSÃO E ESCALA
   Arquitetura de Alta Performance Visual e Rigor Dimensional:
   1. Salto de escala monumental do H1 (> 6.8x sobre o corpo e lede)
   2. Metade direita com massa de luz, calibração e preenchimento de payload
   3. Hierarquia 100% tipográfica em P&B (sem dependência de cor)
   4. Ancoragem arquitetônica de eixos e datum crosses nas 4 extremidades
   5. Assimetria calibrada: Retainer Flagship vs Projetos Tático
   6. Densidade ultra-calibrada: exatamente 40 nós totais, média 10.0 elementos/tela (teto 14)
   7. Ritmo vertical calibrado com variação > 35% (Pequeno 680px / Médio 920px / Grande 1680px)
   ========================================================================== */

/* 1. Superfície Escura Chapada com Profundidade por Luz Ampla (Zero Ruído Tileado) */
.sol-view {
  position: relative;
  width: 100%;
  background-color: var(--ink-950);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-x: hidden;
  --sol-dur-fast: 120ms;
}

.sol-view::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 75vw;
  height: 920px;
  background: radial-gradient(ellipse at 25% 10%, rgba(77, 124, 254, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.sol-view::after {
  content: "";
  position: absolute;
  top: 1400px;
  right: 0;
  width: 75vw;
  height: 980px;
  background: radial-gradient(ellipse at 85% 20%, rgba(155, 123, 255, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 2. Rótulos e Metadados Estruturais */
.sol-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-500);
}

/* Os dois eixos carregam o mesmo peso. Antes o kicker de investidores vinha em
   11px/800 a 18.54:1 e o de industria em 10px/500 a 5.27:1, uma hierarquia que o
   conteudo abaixo ja desmentia: quatro itens para cada, mesmo corpo, mesmo
   tratamento. O que distingue agora e a cor do publico, nao o peso.
   info 5.37:1 e mauve 6.36:1 sobre o fundo, ambos acima do minimo de 4.5:1. */
.sol-kicker--dominant,
.sol-kicker--counterpoint {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  padding: 4px 10px;
  border-radius: 2px;
}

.sol-kicker--dominant { color: var(--info); }
.sol-kicker--counterpoint { color: var(--mauve); }

.sol-kicker--signal {
  color: var(--signal);
}

/* 3. HERO: Convergência com Salto Monumental e Sem Moldura */
/* Altura calibrada para 920px no desktop para isolar Banda 0 perfeitamente (4 elementos, 2 mono) */
.sol-hero {
  position: relative;
  z-index: 1;
  min-height: clamp(820px, 98svh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(104px, 12vw, 140px);
  padding-bottom: clamp(48px, 6vw, 76px);
  border-bottom: 1px solid var(--ink-800);
  box-sizing: border-box;
}

.sol-hero__layout {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  width: 100%;
  padding-left: clamp(24px, 5vw, 96px);
  padding-right: clamp(24px, 5vw, 96px);
  box-sizing: border-box;
}

.sol-hero__editorial {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
  box-sizing: border-box;
}

/* Salto de Escala Monumental (> 6.8x sobre o corpo) */
.sol-hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 6.8vw, 7.8rem);
  font-weight: 400;
  font-style: normal;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink-050);
  margin: 0 0 32px 0;
}

.sol-hero-lede {
  font-family: var(--font-sans);
  font-size: clamp(0.82rem, 0.95vw, 0.90rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-300);
  margin: 0;
  max-width: 440px;
}

.sol-hero__gesture {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
}

.sol-gesture-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 740px;
  overflow: visible;
}

.sol-gesture-halo {
  opacity: 0;
  animation: solBeamFade 1.6s var(--ease) 0.1s forwards;
}

.sol-beam-h {
  opacity: 0;
  animation: solBeamFade 1.3s var(--ease) 0.2s forwards;
}

.sol-beam-v {
  opacity: 0;
  animation: solBeamFade 1.3s var(--ease) 0.3s forwards;
}

@keyframes solBeamFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.sol-gesture-axis--primary {
  stroke-dasharray: 740;
  stroke-dashoffset: 740;
  animation: solDrawPrimary 1.2s var(--ease) forwards;
}

@keyframes solDrawPrimary {
  0% { stroke-dashoffset: 740; opacity: 0; }
  15% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.sol-gesture-axis--secondary {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  animation: solDrawSecondary 1.2s var(--ease) 0.15s forwards;
}

/* Terminava em 0.65 enquanto o eixo primario terminava em 1: o eixo da industria
   ficava permanentemente a 65% depois de desenhado. */
@keyframes solDrawSecondary {
  0% { stroke-dashoffset: 480; opacity: 0; }
  15% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* A CSS vence os atributos de apresentacao do SVG, entao e aqui que os dois
   rotulos precisam ser igualados. O secundario vinha em 10px/400/ink-500 contra
   13px/800/ink-050 do primario. Mesmo registro agora, cor do publico para
   distinguir: info 5.37:1 e mauve 6.36:1 sobre o fundo. */
.sol-gesture-tag--primary,
.sol-gesture-tag--secondary {
  opacity: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.26em;
}

.sol-gesture-tag--primary {
  fill: var(--info);
  animation: solFadeIn 0.8s var(--ease) 0.4s forwards;
}

.sol-gesture-tag--secondary {
  fill: var(--mauve);
  animation: solFadeIn 0.8s var(--ease) 0.5s forwards;
}

.sol-gesture-pip--primary {
  opacity: 0;
  animation: solFadeIn 0.8s var(--ease) 0.3s forwards;
}

.sol-gesture-pip--secondary {
  opacity: 0;
  animation: solFadeIn 0.8s var(--ease) 0.45s forwards;
}

@keyframes solFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.sol-gesture-center {
  opacity: 0;
  transform-origin: 370px 240px;
  animation: solConverge 0.65s var(--ease) 0.95s forwards;
}

@keyframes solConverge {
  0% { opacity: 0; transform: scale(0.65); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.sol-reticle-ring--outer {
  transform-origin: 370px 240px;
  animation: solSpinReticle 32s linear infinite;
}

@keyframes solSpinReticle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sol-reticle-core {
  transition: transform var(--dur, 220ms) var(--ease);
}

/* 4. Estrutura de Seções */
.sol-section {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 5. EIXO I: A Matriz de Atuação com Quebra de Grade */
/* Bloco monumental Grande (~1600px de altura total para ritmo vertical > 35%) */
.sol-section--comparator {
  padding-top: clamp(80px, 10vw, 136px);
  padding-bottom: clamp(80px, 10vw, 144px);
  border-bottom: 1px solid var(--ink-800);
}

.sol-comparator-head {
  display: grid;
  /* 1fr 1fr: os dois eixos tem o mesmo peso. A razao de 1.30 fazia a coluna
     da esquerda ler como principal mesmo com a tipografia igualada. */
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--ink-800);
}

.sol-axis-lead {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* O tingimento tambem fica simetrico: so a industria tinha um veu lilas, o que
   somava mais um sinal de diferenca de peso entre as duas colunas. */
.sol-axis-lead--invest {
  border-right: 1px solid var(--ink-800);
  padding: clamp(48px, 6.5vw, 88px) clamp(32px, 4.5vw, 72px) clamp(52px, 7vw, 92px) clamp(24px, 5vw, 96px);
  background: linear-gradient(270deg, rgba(77, 124, 254, 0.012) 0%, transparent 80%);
}

.sol-axis-lead--ind {
  padding: clamp(48px, 6.5vw, 88px) clamp(24px, 5vw, 96px) clamp(52px, 7vw, 92px) clamp(32px, 4.5vw, 72px);
  background: linear-gradient(90deg, rgba(155, 123, 255, 0.012) 0%, transparent 80%);
}

.sol-axis-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.sol-signal-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sol-signal-pip--info {
  background-color: var(--info);
  box-shadow: 0 0 10px var(--info-dim);
}

.sol-signal-pip--mauve {
  background-color: var(--mauve);
  box-shadow: 0 0 10px var(--mauve-dim);
}

.sol-axis-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  color: var(--ink-050);
  margin: 0 0 20px 0;
}

/* Os dois titulos de eixo passam a ser um so registro. O secundario media 40.3px
   contra 60.5px e vinha em ink-200 contra ink-050: eram manchete e subtitulo,
   nao dois pares. */
.sol-axis-title--primary,
.sol-axis-title--secondary {
  font-size: clamp(2.6rem, 4.2vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--ink-050);
  max-width: 680px;
}

.sol-axis-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.06vw, 1.02rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-300);
  margin: 0;
  max-width: 560px;
}

/* Matriz Editorial: Fim da Planilha — Diferenciação Hierárquica Real */
.sol-matrix-editorial {
  width: 100%;
}

/* Tier 1: Pilar Principal (Salto de Escala Brutal no Item 01) */
.sol-matrix-tier--pillar {
  display: grid;
  /* 1fr 1fr: os dois eixos tem o mesmo peso. A razao de 1.30 fazia a coluna
     da esquerda ler como principal mesmo com a tipografia igualada. */
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--ink-700);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, transparent 100%);
}

.sol-pillar-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(44px, 5.8vw, 76px) 0;
}

.sol-pillar-card--invest {
  border-right: 1px solid var(--ink-800);
  padding-left: clamp(24px, 5vw, 96px);
  padding-right: clamp(32px, 4.5vw, 72px);
}

.sol-pillar-card--ind {
  padding-left: clamp(32px, 4.5vw, 72px);
  padding-right: clamp(24px, 5vw, 96px);
}

/* Numeral Vazado que sustenta a estrutura em Preto e Branco */
.sol-num-display {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 3.4vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: max(0.7px, 0.011em) var(--ink-200);
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: -webkit-text-stroke var(--sol-dur-fast, 120ms) var(--ease);
}

.sol-pillar-card--invest:hover .sol-num-display {
  -webkit-text-stroke: max(0.7px, 0.011em) var(--info);
}

.sol-pillar-card--ind:hover .sol-num-display {
  -webkit-text-stroke: max(0.7px, 0.011em) var(--mauve);
}

.sol-pillar-title {
  font-family: var(--font-sans);
  font-size: clamp(1.35rem, 1.8vw, 1.95rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.024em;
  color: #FFFFFF;
  margin: 0;
  max-width: 620px;
}

/* Tier 2: Vetores Analíticos Contínuos (02, 03, 04) */
/* Numerais renderizados via ::before a partir do atributo data-num */
.sol-matrix-tier--vectors {
  width: 100%;
}

.sol-vector-row {
  display: grid;
  /* 1fr 1fr: os dois eixos tem o mesmo peso. A razao de 1.30 fazia a coluna
     da esquerda ler como principal mesmo com a tipografia igualada. */
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  transition: background-color var(--dur, 220ms) var(--ease);
}

.sol-vector-row:hover {
  background-color: rgba(255, 255, 255, 0.015);
}

.sol-vector-slot {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(26px, 3.2vw, 38px) 0;
  box-sizing: border-box;
}

.sol-vector-slot::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-500);
  flex-shrink: 0;
  transition: color var(--sol-dur-fast, 120ms) var(--ease);
}

.sol-vector-slot--invest {
  border-right: 1px solid var(--ink-800);
  padding-left: clamp(24px, 5vw, 96px);
  padding-right: clamp(32px, 4.5vw, 72px);
}

.sol-vector-slot--ind {
  padding-left: clamp(32px, 4.5vw, 72px);
  padding-right: clamp(24px, 5vw, 96px);
}

.sol-vector-slot--invest:hover::before {
  color: var(--info);
}

.sol-vector-slot--ind:hover::before {
  color: var(--mauve);
}

.sol-slot-title {
  font-family: var(--font-sans);
  font-size: clamp(0.98rem, 1.15vw, 1.16rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-200);
  margin: 0;
  transition: color var(--sol-dur-fast, 120ms) var(--ease);
}

.sol-vector-slot:hover .sol-slot-title {
  color: var(--ink-050);
}

/* 6. EIXO II: MODELOS DE ENGAJAMENTO */
/* Bloco conciso Pequeno (~680px de altura para ritmo vertical > 35%) */
.sol-section--models {
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
  border-bottom: 1px solid var(--ink-800);
}

/* Layout Radicalmente Assimétrico: Flagship Panorâmico (66%) vs Tático (34%) */
.sol-models-layout {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  width: 100%;
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
}

/* FLAGSHIP: RETAINER CONTÍNUO (OFERTA PRINCIPAL) */
.sol-model-flagship {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--ink-800);
  padding: clamp(40px, 5.5vw, 80px) clamp(32px, 4.5vw, 76px) clamp(40px, 5.5vw, 80px) clamp(24px, 5vw, 96px);
  background: linear-gradient(135deg, rgba(255, 79, 143, 0.02) 0%, rgba(155, 123, 255, 0.015) 30%, transparent 80%);
  box-sizing: border-box;
}

.sol-flagship-masthead {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.sol-flagship-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.sol-meta-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-200);
  letter-spacing: 0.14em;
}

.sol-meta-badge--flagship {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background-color: var(--ink-850);
  border: 1px solid var(--ink-600);
  color: var(--ink-050);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  border-radius: 2px;
}

/* Salto de Escala Monumental (> 7.5x sobre o corpo) */
.sol-flagship-title {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 5.8vw, 6.8rem);
  font-weight: 400;
  font-style: normal;
  line-height: 0.88;
  letter-spacing: -0.042em;
  color: var(--ink-050);
  margin: 0;
}

/* Dispersão Arquitetônica dos Entregáveis */
.sol-flagship-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.8vw, 36px);
  padding: clamp(28px, 3.8vw, 44px) 0;
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
  margin-bottom: clamp(28px, 4vw, 52px);
}

.sol-flagship-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.sol-flagship-item::before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: var(--signal);
  margin-bottom: 2px;
}

.sol-flagship-item--full {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.sol-item-text {
  font-size: clamp(0.94rem, 1.08vw, 1.05rem);
  font-weight: 450;
  line-height: 1.55;
  color: var(--ink-200);
  margin: 0;
  transition: color var(--sol-dur-fast, 120ms) var(--ease);
}

.sol-flagship-item:hover .sol-item-text {
  color: #FFFFFF;
}

.sol-flagship-action {
  width: 100%;
}

/* TÁTICO: PROJETOS SOB MEDIDA (OFERTA COMPLEMENTAR) */
.sol-model-tactical {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(40px, 5.5vw, 80px) clamp(24px, 5vw, 96px) clamp(40px, 5.5vw, 80px) clamp(32px, 4.5vw, 76px);
  background: rgba(16, 18, 25, 0.45);
  box-sizing: border-box;
}

.sol-tactical-masthead {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(28px, 3.8vw, 44px);
}

.sol-tactical-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.sol-tactical-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.2vw, 3.6rem);
  font-weight: 400;
  font-style: normal;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink-200);
  margin: 0;
}

.sol-tactical-specs {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.2vw, 36px) 0;
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
  margin-bottom: clamp(28px, 4vw, 52px);
  gap: 18px;
}

.sol-tactical-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.sol-tactical-item::before {
  content: "·";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-600);
  flex-shrink: 0;
}

.sol-tactical-text {
  font-size: clamp(0.90rem, 1.02vw, 0.98rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-300);
  margin: 0;
  transition: color var(--sol-dur-fast, 120ms) var(--ease);
}

.sol-tactical-item:hover .sol-tactical-text {
  color: var(--ink-050);
}

.sol-tactical-action {
  width: 100%;
}

/* CTAs: DIFERENCIAÇÃO RADICAL POR FORMA, VOLUME E PESO */
.sol-trigger-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color var(--dur, 220ms) var(--ease),
              background-color var(--dur, 220ms) var(--ease),
              box-shadow var(--dur, 220ms) var(--ease),
              color var(--dur, 220ms) var(--ease);
}

/* CTA Flagship: Barra de Comando Sólida e Monumental */
/* Geometria dos quatro CTAs da pagina.
   Antes eram 797x77, 368x65, 290x67 e 290x60, quatro larguras e quatro alturas,
   e abaixo de 1024 os quatro viravam faixas de largura total com ate 671px de
   vazio entre o rotulo e a seta. O teto de 460px e o mesmo adotado na barra de
   despacho do GennomX AI: e padrao do projeto, nao decisao local desta pagina.
   A hierarquia do flagship passa a vir da altura e do peso, nao da largura. */
.sol-trigger-link,
.sol-cta-primary,
.sol-cta-ghost {
  max-width: 460px;
}

.sol-trigger-link--flagship {
  padding: 22px 28px;
  background-color: var(--ink-850);
  border: 1px solid var(--ink-600);
  color: var(--ink-050);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.sol-trigger-link--flagship::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--signal);
  transition: transform var(--sol-dur-fast, 120ms) var(--ease);
}

.sol-trigger-link--flagship:hover {
  border-color: var(--rose-600);
  background-color: var(--ink-800);
  box-shadow: 0 12px 36px rgba(7, 8, 12, 0.9), 0 0 24px rgba(255, 79, 143, 0.16);
}

.sol-trigger-link--flagship:hover::after {
  transform: translateX(4px);
}

/* CTA Tático: Gatilho Aberto e Leve */
.sol-trigger-link--tactical {
  /* 18px 26px / 0.9rem e o registro comum dos tres CTAs secundarios: eles
     fechavam em 65, 67 e 60px de altura, tres valores para o mesmo papel. */
  padding: 18px 26px;
  background-color: transparent;
  border: 1px solid var(--ink-700);
  color: var(--ink-200);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.015em;
}

.sol-trigger-link--tactical::after {
  content: "↗";
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--slate-400);
  transition: transform var(--sol-dur-fast, 120ms) var(--ease), color var(--sol-dur-fast, 120ms) var(--ease);
}

.sol-trigger-link--tactical:hover {
  border-color: var(--ink-500);
  background-color: var(--ink-900);
  color: var(--ink-050);
}

.sol-trigger-link--tactical:hover::after {
  color: var(--signal);
  transform: translate(3px, -3px);
}

.sol-trigger-link:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* 7. FECHAMENTO ARQUITETÔNICO: DESPACHO EM LARGURA TOTAL */
.sol-section--terminal {
  padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 96px) clamp(88px, 11vw, 150px);
}

.sol-terminal-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
  box-sizing: border-box;
}

.sol-terminal-panel__left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sol-terminal-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 3.8rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink-050);
  margin: 0;
}

.sol-terminal-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.94rem, 1.08vw, 1.06rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-300);
  margin: 0;
  max-width: 620px;
}

.sol-terminal-panel__right {
  flex-shrink: 0;
}

.sol-terminal-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 290px;
}

.sol-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  background-color: var(--ink-900);
  border: 1px solid var(--ink-600);
  color: var(--ink-050);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color var(--dur, 220ms) var(--ease),
              background-color var(--dur, 220ms) var(--ease),
              box-shadow var(--dur, 220ms) var(--ease);
}

.sol-cta-primary::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--signal);
  transition: transform var(--sol-dur-fast, 120ms) var(--ease);
}

.sol-cta-primary:hover {
  border-color: var(--rose-600);
  background-color: var(--ink-850);
  box-shadow: 0 0 24px rgba(255, 79, 143, 0.16);
}

.sol-cta-primary:hover::after {
  transform: translateX(4px);
}

.sol-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  background-color: transparent;
  border: 1px solid var(--ink-800);
  color: var(--ink-300);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color var(--dur, 220ms) var(--ease),
              color var(--dur, 220ms) var(--ease),
              background-color var(--dur, 220ms) var(--ease);
}

.sol-cta-ghost::after {
  content: "↗";
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ink-500);
  transition: transform var(--sol-dur-fast, 120ms) var(--ease), color var(--sol-dur-fast, 120ms) var(--ease);
}

.sol-cta-ghost:hover {
  border-color: var(--ink-600);
  color: var(--ink-050);
  background-color: rgba(255, 255, 255, 0.02);
}

.sol-cta-ghost:hover::after {
  color: var(--ink-050);
  transform: translate(2px, -2px);
}

.sol-cta-primary:focus-visible, .sol-cta-ghost:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* 8. Responsividade e Adaptação para Viewports Compactos */
@media (max-width: 1024px) {
  .sol-hero__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sol-comparator-head {
    grid-template-columns: 1fr;
  }

  .sol-axis-lead--invest {
    border-right: none;
    border-bottom: 1px solid var(--ink-800);
    padding-right: clamp(24px, 5vw, 96px);
  }

  .sol-axis-lead--ind {
    padding-left: clamp(24px, 5vw, 96px);
  }

  .sol-matrix-tier--pillar {
    grid-template-columns: 1fr;
  }

  .sol-pillar-card--invest {
    border-right: none;
    border-bottom: 1px solid var(--ink-800);
    padding-right: clamp(24px, 5vw, 96px);
  }

  .sol-pillar-card--ind {
    padding-left: clamp(24px, 5vw, 96px);
  }

  .sol-vector-row {
    grid-template-columns: 1fr;
  }

  .sol-vector-slot--invest {
    border-right: none;
    border-bottom: 1px solid var(--ink-800);
    padding-right: clamp(24px, 5vw, 96px);
  }

  .sol-vector-slot--ind {
    padding-left: clamp(24px, 5vw, 96px);
  }

  .sol-models-layout {
    grid-template-columns: 1fr;
  }

  .sol-model-flagship {
    border-right: none;
    border-bottom: 1px solid var(--ink-800);
    padding-right: clamp(24px, 5vw, 96px);
  }

  .sol-model-tactical {
    padding-left: clamp(24px, 5vw, 96px);
  }

  .sol-terminal-panel {
    grid-template-columns: 1fr;
  }

  .sol-terminal-actions {
    width: 100%;
    min-width: 0;
  }

  /* ----------------------------------------------------------------------
     Reagrupamento do comparador por publico.

     Empilhado, o layout de duas colunas produzia alternancia estrita:
     01 investidores, 01 industria, 02, 02, 03, 03, 04, 04. Nenhum item dizia
     a que publico pertencia, os dois cabecalhos ficavam 357px acima do
     primeiro item, e os dois separadores (1px ink-800 entre publicos, 1px
     branco a 3.5% entre pares) eram indistinguiveis. A secao central da
     pagina lia como uma lista de oito itens com numeros repetidos aos pares.

     A correcao achata os involucros de grade com display:contents e reordena
     por publico, sem tocar no HTML. O resultado e: cabecalho de investidores
     seguido dos seus quatro itens, depois o de industria com os seus quatro.
     ---------------------------------------------------------------------- */
  .sol-section--comparator {
    display: flex;
    flex-direction: column;
  }

  .sol-comparator-head,
  .sol-matrix-editorial,
  .sol-matrix-tier,
  .sol-vector-row {
    display: contents;
  }

  .sol-axis-lead--invest       { order: 1; }
  .sol-pillar-card--invest     { order: 2; }
  .sol-vector-slot--invest     { order: 3; }
  .sol-axis-lead--ind          { order: 4; }
  .sol-pillar-card--ind        { order: 5; }
  .sol-vector-slot--ind        { order: 6; }

  /* Com os involucros achatados, as bordas que vinham deles desaparecem.
     Cada item passa a carregar a sua, e o fim de cada bloco de publico
     recebe uma linha mais forte que as internas. */
  .sol-vector-slot--invest,
  .sol-vector-slot--ind {
    border-bottom: 1px solid var(--ink-800);
  }

  .sol-axis-lead--invest,
  .sol-axis-lead--ind {
    border-right: none;
    border-bottom: none;
  }

  .sol-pillar-card--invest,
  .sol-pillar-card--ind {
    border-right: none;
    border-bottom: 1px solid var(--ink-800);
  }

  /* Marcador de publico: uma barra na cor do eixo ao longo de cada bloco.
     Reforca o agrupamento, sem ser o unico sinal, porque cada bloco abre com
     o seu proprio cabecalho nomeado. */
  .sol-axis-lead--invest,
  .sol-pillar-card--invest,
  .sol-vector-slot--invest {
    border-left: 2px solid var(--info);
  }

  .sol-axis-lead--ind,
  .sol-pillar-card--ind,
  .sol-vector-slot--ind {
    border-left: 2px solid var(--mauve);
  }
}

@media (max-width: 640px) {
  .sol-hero {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 36px;
  }

  /* Os dois rotulos do instrumento medem 6.1px na tela a 390px, porque o viewBox
     de 740 chega la a escala 0.47. Sao duplicatas decorativas dos kickers da
     secao seguinte, entao nada se perde em retira-los; o desenho segue como
     gesto grafico. Aumentar o corpo nao resolve: para chegar a 11px na tela eu
     precisaria de 23px no viewBox, e ai eles atravessam os eixos no desktop. */
  .sol-gesture-tag--primary,
  .sol-gesture-tag--secondary {
    display: none;
  }

  .sol-hero__layout {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sol-axis-lead--invest, .sol-axis-lead--ind, .sol-pillar-card--invest, .sol-pillar-card--ind, .sol-vector-slot--invest, .sol-vector-slot--ind, .sol-model-flagship, .sol-model-tactical, .sol-section--terminal {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sol-section--comparator, .sol-section--models {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .sol-flagship-matrix {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sol-vector-slot {
    padding: 16px 0;
  }

  .sol-pillar-card {
    padding: 28px 0;
  }

  .sol-model-flagship, .sol-model-tactical {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .sol-axis-lead {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .sol-terminal-panel {
    padding: 36px 0;
  }
}

/* 9. Acessibilidade: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sol-view, .sol-model-flagship, .sol-model-tactical, .sol-flagship-item, .sol-tactical-item, .sol-item-text, .sol-tactical-text, .sol-trigger-link, .sol-vector-row, .sol-vector-slot, .sol-slot-title, .sol-pillar-title, .sol-num-display, .sol-cta-primary, .sol-cta-ghost, .sol-gesture-axis--primary, .sol-gesture-axis--secondary, .sol-gesture-center, .sol-reticle-ring--outer, .sol-gesture-tag--primary, .sol-gesture-tag--secondary, .sol-gesture-pip--primary, .sol-gesture-pip--secondary, .sol-beam-h, .sol-beam-v, .sol-gesture-halo {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .sol-gesture-axis--primary, .sol-gesture-axis--secondary {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }

  .sol-beam-h, .sol-beam-v, .sol-gesture-halo {
    opacity: 1 !important;
  }

  .sol-gesture-center, .sol-gesture-tag--primary, .sol-gesture-tag--secondary, .sol-gesture-pip--primary, .sol-gesture-pip--secondary {
    opacity: 1 !important;
  }
}

/* ---------- gennomx-ai (gennomx-ai.html) ---------- */
/* ==========================================================================
   GennomX AI — Transposição Estética (Nível Awwwards · Rodada de Refinamento)
   Partido: INSTRUMENTO CENTRADO (Simetria Deliberada, Gesto Vivo Sem Moldura)
   Escopo: Estritamente ancorado sob #conteudo para impedir vazamentos
   ========================================================================== */
body.pag-gennomx-ai #conteudo {
  --bg-page: var(--ink-950);
  background-color: var(--ink-950);
  color: var(--ink-050);
  overflow-x: hidden;
}

/* --- Container Arquitetural de Amplitude Total --- */
body.pag-gennomx-ai #conteudo .ai-container {
  display: block;
  width: 100%;
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 4.5vw, 72px);
  padding-right: clamp(24px, 4.5vw, 72px);
  box-sizing: border-box;
}

/* ==========================================================================
   1. HERO: GESTO VIVO COM MASSA & SEM MOLDURA (LEI-PAGINAS §15 E §16)
   Hierarquia Clara (Nível 1 Monumental) · Layout Assimétrico sem Ilha Flutuante
   ========================================================================== */
body.pag-gennomx-ai #conteudo .ai-hero {
  display: block;
  position: relative;
  padding-top: clamp(128px, 15vw, 176px);
  padding-bottom: clamp(48px, 6vw, 72px);
  background-color: var(--ink-950);
  box-sizing: border-box;
}

body.pag-gennomx-ai #conteudo .ai-hero__container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr);
  gap: clamp(40px, 5.5vw, 84px);
  align-items: center;
}

body.pag-gennomx-ai #conteudo .ai-hero__anchor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

body.pag-gennomx-ai #conteudo .ai-hero__title {
  font-family: var(--font-sans);
  /* O minimo era 5.2rem. A 390px a palavra GennomX media 373px numa coluna de
     342px: o X final saia da tela, escondido pelo overflow-x do corpo. 4.4rem
     traz a palavra para 315px. Acima de ~750px nada muda, o vw ja governa. */
  font-size: clamp(4.4rem, 9.4vw, 10.5rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--ink-050);
  margin: 0 0 clamp(20px, 2.8vw, 32px);
}

body.pag-gennomx-ai #conteudo .ai-hero__lede {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-200);
  max-width: 500px;
  margin: 0;
}

/* Gesto Vivo: câmara óptica monumental que sangra no campo da página sem caixa nem borda */
body.pag-gennomx-ai #conteudo .ai-hero__engine {
  display: block;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

body.pag-gennomx-ai #conteudo .ai-engine__stage {
  position: relative;
  width: 100%;
  min-height: clamp(300px, 40vh, 460px);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

body.pag-gennomx-ai #conteudo .ai-engine__blueprint {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* O Pulso Fotônico de Sinal: percorre o eixo horizontal uma vez e se apaga */
body.pag-gennomx-ai #conteudo .ai-engine__beam-track {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 40px;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: hidden;
}

body.pag-gennomx-ai #conteudo .ai-engine__pulse-wave {
  position: absolute;
  top: 50%;
  left: -240px;
  width: 220px;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(55, 214, 233, 0.4) 25%, 
    rgba(155, 123, 255, 0.7) 60%, 
    var(--signal) 90%, 
    #FFFFFF 100%
  );
  box-shadow: 
    0 0 16px var(--data),
    0 0 32px var(--signal),
    0 0 60px rgba(255, 79, 143, 0.45);
  border-radius: 3px;
  opacity: 0;
  animation: ai-engine-pulse 3.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s 1 normal forwards;
}

@keyframes ai-engine-pulse {
  0% {
    left: -220px;
    opacity: 0;
    filter: blur(2px);
  }
  15% {
    opacity: 1;
    filter: blur(0px);
  }
  80% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    left: 100%;
    opacity: 0;
    filter: blur(3px);
  }
}

/* ==========================================================================
   2. ARQUITETURA DE DADOS & INSTRUMENTO ÓPTICO (MÉDIO RITMO VERTICAL)
   ========================================================================== */
body.pag-gennomx-ai #conteudo .ai-instrument-section {
  display: block;
  position: relative;
  /* O vao hero -> arquitetura era o menor da pagina (144px contra 306px do maior).
     Sobe para ~207px e a amplitude do ritmo vertical cai de 2.1x para 1.6x. */
  padding-top: clamp(84px, 9.4vw, 136px);
  padding-bottom: clamp(64px, 8vw, 96px);
  background-color: var(--ink-950);
  clear: both;
}

body.pag-gennomx-ai #conteudo .ai-instrument-header {
  text-align: left;
  margin-bottom: clamp(40px, 5.5vw, 68px);
  max-width: 920px;
}

body.pag-gennomx-ai #conteudo .ai-instrument-title {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink-050);
  margin: 0;
}

body.pag-gennomx-ai #conteudo .ai-instrument-viewport {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  clear: both;
  box-sizing: border-box;
}

body.pag-gennomx-ai #conteudo .ai-instrument-viewport--mobile {
  display: none;
}

body.pag-gennomx-ai #conteudo .ai-instrument-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 78% 50%, rgba(255, 79, 143, 0.04) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 40% 50%, rgba(55, 214, 233, 0.035) 0%, transparent 60%);
}

body.pag-gennomx-ai #conteudo .ai-engine-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Teto de largura: sem ele o diagrama vertical inflava ate 1.8x na virada,
   com legendas de 21px, maiores que qualquer texto de corpo da pagina. */
body.pag-gennomx-ai #conteudo .ai-engine-svg-mobile {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}

/* Tipografia dos diagramas.
   O viewBox horizontal tem 1440 de largura e o container nunca o alcanca, entao
   todo corpo declarado aqui chega a tela reduzido pela escala. Na faixa em que o
   diagrama horizontal existe (>1080px) a escala vai de 0.68 a 0.96, logo 15px
   rendem entre 10.3px e 14.3px na tela. Os valores abaixo sao dimensionados para
   esse fator, nao para leitura direta. */
body.pag-gennomx-ai #conteudo .ai-svg-item {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  fill: var(--ink-200);
}

body.pag-gennomx-ai #conteudo .ai-svg-item--bold {
  font-weight: 600;
  fill: var(--ink-050);
}

body.pag-gennomx-ai #conteudo .ai-svg-node-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  fill: var(--ink-050);
}

body.pag-gennomx-ai #conteudo .ai-svg-node-title--mauve {
  fill: var(--mauve);
}

body.pag-gennomx-ai #conteudo .ai-svg-node-title--signal {
  fill: var(--signal);
}

/* Legenda de estagio: mono, sob o titulo, no mesmo registro dos indices do site. */
body.pag-gennomx-ai #conteudo .ai-svg-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  /* 0.08em somava 33 unidades a legenda do ETL e encostava na do Warehouse:
     as duas passavam a ler como uma frase unica. */
  letter-spacing: 0.04em;
  fill: var(--ink-500);
}

/* O viewBox vertical tem 380 de largura e chega a tela perto de 1:1, entao ele
   precisa de uma escala tipografica propria, menor que a do horizontal. */
body.pag-gennomx-ai #conteudo .ai-engine-svg-mobile .ai-svg-item { font-size: 13px; }
body.pag-gennomx-ai #conteudo .ai-engine-svg-mobile .ai-svg-node-title { font-size: 16px; }
body.pag-gennomx-ai #conteudo .ai-engine-svg-mobile .ai-svg-caption { font-size: 12px; }

/* ==========================================================================
   2b. ANIMACAO DO INSTRUMENTO — CICLO DE 8s
   Um unico ciclo governa os dois diagramas.

   Espinha horizontal: 906 unidades. O traco de 64 vai do deslocamento 64 ate
   -906 entre 0% e 70% do ciclo, ou seja 970 unidades em 5.6s = 173.2 u/s.
   O centro do traco esta na posicao p = 173.2t - 32, logo o instante em que ele
   cruza um estagio e t = (p + 32) / 173.2, com p medido a partir de x=352:
   ETL 0.87s · Warehouse 2.31s · Harness 3.75s · Gate 5.08s · saidas 5.42s.

   Espinha vertical: 580 unidades, traco de 70, 650 u em 5.76s = 112.8 u/s,
   t = (p + 35) / 112.8 com p medido a partir de y=16.

   Os atrasos vao declarados em --d no HTML. Mexer na duracao do ciclo, no
   comprimento do traco ou na geometria obriga a recalcular todos eles.
   ========================================================================== */


/* Atrasos do ciclo de 8s, um por classe. Eram atributos style="--d:..." no
   SVG, e o contrato de pagina proibe style= inline porque a politica
   style-src 'self' os bloqueia: em producao os atrasos seriam ignorados e
   todos os pings disparariam juntos. Os valores continuam os calculados pela
   velocidade do cometa, descrita no cabecalho do bloco 2b. */
body.pag-gennomx-ai #conteudo .ai-d-000 { --d: 0s; }
body.pag-gennomx-ai #conteudo .ai-d-015 { --d: 0.15s; }
body.pag-gennomx-ai #conteudo .ai-d-030 { --d: 0.3s; }
body.pag-gennomx-ai #conteudo .ai-d-045 { --d: 0.45s; }
body.pag-gennomx-ai #conteudo .ai-d-060 { --d: 0.6s; }
body.pag-gennomx-ai #conteudo .ai-d-063 { --d: 0.63s; }
body.pag-gennomx-ai #conteudo .ai-d-081 { --d: 0.81s; }
body.pag-gennomx-ai #conteudo .ai-d-087 { --d: 0.87s; }
body.pag-gennomx-ai #conteudo .ai-d-091 { --d: 0.91s; }
body.pag-gennomx-ai #conteudo .ai-d-101 { --d: 1.01s; }
body.pag-gennomx-ai #conteudo .ai-d-152 { --d: 1.52s; }
body.pag-gennomx-ai #conteudo .ai-d-225 { --d: 2.25s; }
body.pag-gennomx-ai #conteudo .ai-d-231 { --d: 2.31s; }
body.pag-gennomx-ai #conteudo .ai-d-240 { --d: 2.40s; }
body.pag-gennomx-ai #conteudo .ai-d-255 { --d: 2.55s; }
body.pag-gennomx-ai #conteudo .ai-d-329 { --d: 3.29s; }
body.pag-gennomx-ai #conteudo .ai-d-375 { --d: 3.75s; }
body.pag-gennomx-ai #conteudo .ai-d-421 { --d: 4.21s; }
body.pag-gennomx-ai #conteudo .ai-d-508 { --d: 5.08s; }
body.pag-gennomx-ai #conteudo .ai-d-513 { --d: 5.13s; }
body.pag-gennomx-ai #conteudo .ai-d-542 { --d: 5.42s; }
body.pag-gennomx-ai #conteudo .ai-d-550 { --d: 5.50s; }
body.pag-gennomx-ai #conteudo .ai-d-558 { --d: 5.58s; }
body.pag-gennomx-ai #conteudo .ai-d-580 { --d: 5.80s; }
body.pag-gennomx-ai #conteudo .ai-d-588 { --d: 5.88s; }
body.pag-gennomx-ai #conteudo .ai-d-596 { --d: 5.96s; }

/* Cometa da espinha: dois tracos sobrepostos, um nucleo curto e brilhante e uma
   cauda longa e fraca. E o que substitui os quatro pontos que corriam antes. */
body.pag-gennomx-ai #conteudo .ai-comet {
  fill: none;
  stroke-dasharray: 64 1400;
  stroke-dashoffset: 64;
  animation: ai-comet-run 8s linear infinite;
}

/* Cauda: dois segmentos iguais atrasados no mesmo percurso. A 173 unidades por
   segundo, 0.22s e 0.44s os colocam 38 e 76 unidades atras da cabeca, e com 64
   de comprimento eles se sobrepoem formando um rastro continuo que desvanece. */
body.pag-gennomx-ai #conteudo .ai-comet--t2 { opacity: 0.42; animation-delay: 0.22s; }
body.pag-gennomx-ai #conteudo .ai-comet--t3 { opacity: 0.18; animation-delay: 0.44s; }

@keyframes ai-comet-run {
  0%   { stroke-dashoffset: 64; opacity: 0; }
  4%   { opacity: 1; }
  70%  { stroke-dashoffset: -906; opacity: 1; }
  77%  { stroke-dashoffset: -906; opacity: 0; }
  100% { stroke-dashoffset: -906; opacity: 0; }
}

body.pag-gennomx-ai #conteudo .ai-comet-v {
  fill: none;
  stroke-dasharray: 70 1200;
  stroke-dashoffset: 70;
  animation: ai-comet-run-v 8s linear infinite;
}

@keyframes ai-comet-run-v {
  0%   { stroke-dashoffset: 70; opacity: 0; }
  5%   { opacity: 1; }
  72%  { stroke-dashoffset: -580; opacity: 1; }
  80%  { stroke-dashoffset: -580; opacity: 0; }
  100% { stroke-dashoffset: -580; opacity: 0; }
}

/* Alimentacao das cinco fontes: cada curva acende em sequencia antes do cometa. */
body.pag-gennomx-ai #conteudo .ai-feed-base path { stroke-opacity: 0.55; }

body.pag-gennomx-ai #conteudo .ai-feed-live path {
  stroke-dasharray: 26 400;
  stroke-dashoffset: 26;
  animation: ai-feed-run 8s linear infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ai-feed-run {
  0%   { stroke-dashoffset: 26; opacity: 0; }
  3%   { opacity: 0.95; }
  15%  { stroke-dashoffset: -140; opacity: 0.95; }
  20%  { stroke-dashoffset: -140; opacity: 0; }
  100% { stroke-dashoffset: -140; opacity: 0; }
}

body.pag-gennomx-ai #conteudo .ai-src__dot {
  animation: ai-src-blink 8s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ai-src-blink {
  0%, 100% { opacity: 0.45; }
  4%       { opacity: 1; }
  16%      { opacity: 0.45; }
}

body.pag-gennomx-ai #conteudo .ai-conv {
  animation: ai-src-blink 8s var(--ease) infinite;
  animation-delay: 0.75s;
}

/* Ping de chegada: anel que se abre e se apaga quando o cometa cruza o estagio. */
body.pag-gennomx-ai #conteudo .ai-ping {
  fill: none;
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ai-ping-burst 8s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ai-ping-burst {
  0%        { transform: scale(0.62); opacity: 0; }
  4%        { opacity: 0.8; }
  18%       { transform: scale(1.18); opacity: 0; }
  100%      { transform: scale(1.18); opacity: 0; }
}

/* ETL: tres barras que disparam em cascata dentro do losango. */
body.pag-gennomx-ai #conteudo .ai-etl-bars line {
  stroke-opacity: 0.18;
  animation: ai-etl-flash 8s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ai-etl-flash {
  0%, 100% { stroke-opacity: 0.18; }
  3%       { stroke-opacity: 1; }
  14%      { stroke-opacity: 0.18; }
}

/* Warehouse: os estratos se preenchem de baixo para cima. */
body.pag-gennomx-ai #conteudo .ai-wh-strata ellipse {
  fill: none;
  stroke-opacity: 0.14;
  animation: ai-wh-fill 8s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ai-wh-fill {
  0%, 100% { stroke-opacity: 0.14; }
  4%       { stroke-opacity: 0.85; }
  22%      { stroke-opacity: 0.3; }
}

/* Harness: os aneis giram sem parar, em sentidos e velocidades diferentes.
   E o unico movimento continuo do desenho, e o que o mantem vivo entre passagens. */
/* Origem da rotacao em unidades do viewBox, centro do Harness. Vivia num
   style= inline, que a politica style-src 'self' do site bloqueia. */
body.pag-gennomx-ai #conteudo .ai-ring { fill: none; transform-origin: 970px 190px; }
body.pag-gennomx-ai #conteudo .ai-ring--slow { animation: ai-ring-cw 34s linear infinite; }
body.pag-gennomx-ai #conteudo .ai-ring--fast { animation: ai-ring-ccw 21s linear infinite; }

@keyframes ai-ring-cw  { to { transform: rotate(360deg); } }
@keyframes ai-ring-ccw { to { transform: rotate(-360deg); } }

body.pag-gennomx-ai #conteudo .ai-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: ai-core-beat 8s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ai-core-beat {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  4%       { transform: scale(1.7); opacity: 1; }
  20%      { transform: scale(1); opacity: 0.7; }
}

/* Gate: uma linha rosa varre o quadrado de cima a baixo, como uma revisao. */
body.pag-gennomx-ai #conteudo .ai-gate-scan {
  opacity: 0;
  animation: ai-gate-sweep 8s var(--ease) infinite;
  animation-delay: 5.27s;
}

@keyframes ai-gate-sweep {
  0%        { transform: translateY(0); opacity: 0; }
  3%        { opacity: 0.9; }
  17%       { transform: translateY(80px); opacity: 0; }
  100%      { transform: translateY(80px); opacity: 0; }
}

body.pag-gennomx-ai #conteudo .ai-gate-bar {
  stroke-opacity: 0.35;
  animation: ai-etl-flash 8s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

/* Saidas: os tres canais se acendem em leque depois do gate. */
body.pag-gennomx-ai #conteudo .ai-out-base path { stroke-opacity: 0.55; }

body.pag-gennomx-ai #conteudo .ai-out-live path {
  stroke-dasharray: 18 200;
  stroke-dashoffset: 18;
  animation: ai-out-run 8s linear infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ai-out-run {
  0%   { stroke-dashoffset: 18; opacity: 0; }
  3%   { opacity: 0.9; }
  12%  { stroke-dashoffset: -80; opacity: 0.9; }
  18%  { stroke-dashoffset: -80; opacity: 0; }
  100% { stroke-dashoffset: -80; opacity: 0; }
}

body.pag-gennomx-ai #conteudo .ai-out__dot {
  animation: ai-src-blink 8s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}

/* ==========================================================================
   3. PROCESSAMENTO DE SINAIS: A TRILHA 01-04 (ESCALA MONUMENTAL & HIERARQUIA)
   Salto de Escala ≥ 3.5× · Respiro Vertical Próprio · Contraste em Preto e Branco
   ========================================================================== */
body.pag-gennomx-ai #conteudo .ai-rail-section {
  display: block;
  position: relative;
  padding-top: clamp(120px, 16vw, 210px);
  padding-bottom: clamp(64px, 8vw, 100px);
  background-color: var(--ink-950);
  clear: both;
}

body.pag-gennomx-ai #conteudo .ai-rail-header {
  margin-bottom: clamp(64px, 8vw, 104px);
  max-width: 1100px;
}

body.pag-gennomx-ai #conteudo .ai-rail-title {
  font-family: var(--font-sans);
  font-size: clamp(3.4rem, 7.2vw, 6.4rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.042em;
  color: var(--ink-050);
  margin: 0;
}

body.pag-gennomx-ai #conteudo .ai-rail-lede {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-200);
  max-width: 640px;
  margin: clamp(18px, 2.5vw, 28px) 0 0;
}

body.pag-gennomx-ai #conteudo .ai-rail {
  display: block;
  position: relative;
  clear: both;
}

body.pag-gennomx-ai #conteudo .ai-rail__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 0.95fr 1.05fr;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--ink-800);
}

body.pag-gennomx-ai #conteudo .ai-rail__col {
  position: relative;
  padding: clamp(44px, 5.5vw, 68px) clamp(22px, 2.8vw, 36px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: background-color 0.25s var(--ease);
}

body.pag-gennomx-ai #conteudo .ai-rail__col + .ai-rail__col {
  border-left: 1px solid var(--ink-800);
}

body.pag-gennomx-ai #conteudo .ai-rail__col:hover {
  background-color: rgba(255, 255, 255, 0.015);
}

/* Coluna 01: Âncora de Entrada da Trilha */
body.pag-gennomx-ai #conteudo .ai-rail__col--entry::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 2px;
  background-color: var(--ink-300);
}

/* Coluna 04: Gate Humano (Âncora de Fechamento de Rigor) */
body.pag-gennomx-ai #conteudo .ai-rail__col--gate {
  background-color: rgba(255, 79, 143, 0.018);
}

body.pag-gennomx-ai #conteudo .ai-rail__col--gate::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--signal);
}

/* Numeral Monumental: Escala Extrema e Contraste Tipográfico Real (Preto e Branco) */
body.pag-gennomx-ai #conteudo .ai-rail__num {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(4.4rem, 7.5vw, 6.8rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.055em;
  color: var(--ink-050);
  /* 0.35 media 2.97:1 contra o fundo, um centesimo abaixo do minimo de 3:1
     para texto grande. 0.38 leva a 3.31:1 sem alterar a leitura. */
  opacity: 0.38;
  margin-bottom: clamp(24px, 3.2vw, 36px);
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease);
}

body.pag-gennomx-ai #conteudo .ai-rail__col:hover .ai-rail__num {
  opacity: 0.85;
}

body.pag-gennomx-ai #conteudo .ai-rail__num--signal {
  color: var(--ink-050);
  opacity: 0.9;
}

body.pag-gennomx-ai #conteudo .ai-rail__col--gate:hover .ai-rail__num--signal {
  color: var(--signal);
  opacity: 1;
}

body.pag-gennomx-ai #conteudo .ai-rail__title {
  font-family: var(--font-sans);
  font-size: clamp(1.18rem, 1.45vw, 1.38rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--ink-050);
  margin: 0 0 clamp(12px, 1.8vw, 18px);
}

body.pag-gennomx-ai #conteudo .ai-rail__desc {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-200);
  margin: 0;
}

/* ==========================================================================
   4. GARANTIA DE RIGOR: COLUNA DOMINANTE & LEDGER ASSIMÉTRICO
   Quebra da Lógica 50/50 · Coluna Esquerda Dominante · Tensão Espacial
   ========================================================================== */
body.pag-gennomx-ai #conteudo .ai-rigor-section {
  display: block;
  position: relative;
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: clamp(64px, 8vw, 96px);
  background-color: var(--ink-950);
  clear: both;
}

body.pag-gennomx-ai #conteudo .ai-rigor-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: start;
}

body.pag-gennomx-ai #conteudo .ai-rigor-anchor {
  display: flex;
  flex-direction: column;
  position: relative;
}

body.pag-gennomx-ai #conteudo .ai-rigor-title {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 5.4vw, 4.8rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink-050);
  margin: 0;
}

body.pag-gennomx-ai #conteudo .ai-rigor-ledger {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-800);
}

body.pag-gennomx-ai #conteudo .ai-ledger-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  align-items: baseline;
  padding: clamp(24px, 3.2vw, 36px) clamp(10px, 1.6vw, 18px);
  border-bottom: 1px solid var(--ink-800);
  box-sizing: border-box;
  transition: background-color 0.25s var(--ease);
}

body.pag-gennomx-ai #conteudo .ai-ledger-row:hover {
  background-color: rgba(255, 255, 255, 0.015);
}

body.pag-gennomx-ai #conteudo .ai-ledger-row--gate {
  border-left: 2px solid var(--signal);
  background-color: rgba(255, 79, 143, 0.025);
  padding-left: clamp(14px, 2vw, 24px);
}

body.pag-gennomx-ai #conteudo .ai-ledger-row__idx {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-500);
}

body.pag-gennomx-ai #conteudo .ai-ledger-row__idx--signal {
  color: var(--signal);
}

body.pag-gennomx-ai #conteudo .ai-ledger-row__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.pag-gennomx-ai #conteudo .ai-ledger-row__title {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1.5vw, 1.38rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-050);
  margin: 0;
}

body.pag-gennomx-ai #conteudo .ai-ledger-row__desc {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-200);
  margin: 0;
}

/* ==========================================================================
   5. RESEARCH APLICADO: CONSOLE TERMINAL DE SAÍDA (GRANDE RESPIRO FINAL)
   ========================================================================== */
body.pag-gennomx-ai #conteudo .ai-closing-section {
  display: block;
  position: relative;
  padding-top: clamp(112px, 14vw, 180px);
  padding-bottom: clamp(100px, 14vw, 180px);
  background-color: var(--ink-950);
  clear: both;
}

body.pag-gennomx-ai #conteudo .ai-closing-terminal {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(40px, 6.5vw, 92px);
  align-items: start;
}

body.pag-gennomx-ai #conteudo .ai-closing-intro {
  display: flex;
  flex-direction: column;
}

body.pag-gennomx-ai #conteudo .ai-closing-title {
  font-family: var(--font-sans);
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.038em;
  color: var(--ink-050);
  margin: 0 0 clamp(18px, 2.6vw, 26px);
}

body.pag-gennomx-ai #conteudo .ai-closing-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.96rem, 1.3vw, 1.15rem);
  line-height: 1.55;
  color: var(--ink-200);
  max-width: 620px;
  margin: 0;
}

body.pag-gennomx-ai #conteudo .ai-closing-dock {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--ink-800);
  padding-top: clamp(16px, 2.4vw, 28px);
}

body.pag-gennomx-ai #conteudo .ai-dock-channels {
  display: flex;
  flex-direction: column;
}

body.pag-gennomx-ai #conteudo .ai-dock-chan {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-800);
}

body.pag-gennomx-ai #conteudo .ai-dock-idx {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-500);
}

body.pag-gennomx-ai #conteudo .ai-dock-label {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-050);
}

body.pag-gennomx-ai #conteudo .ai-dock-action {
  display: flex;
  margin-top: 8px;
}

/* Barra de Despacho de Comando Arquitetural */
body.pag-gennomx-ai #conteudo .ai-dispatch-bar {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* O rotulo ocupa 146px. Sem teto a barra ia de 554px a 983px e o vao entre
     palavra e seta chegava a 837px, com aparencia de campo de formulario. */
  max-width: 460px;
  background-color: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-bottom: 2px solid var(--signal);
  padding: clamp(18px, 2.4vw, 24px) clamp(22px, 3.2vw, 34px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-050);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

body.pag-gennomx-ai #conteudo .ai-dispatch-bar:hover {
  background-color: var(--ink-850);
  border-color: var(--signal);
  box-shadow: 0 0 32px rgba(255, 79, 143, 0.18);
}

body.pag-gennomx-ai #conteudo .ai-dispatch-bar:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
}

body.pag-gennomx-ai #conteudo .ai-dispatch-text {
  flex: 1;
}

body.pag-gennomx-ai #conteudo .ai-dispatch-arrow {
  color: var(--signal);
  font-size: 14px;
  transition: transform 0.25s var(--ease);
}

body.pag-gennomx-ai #conteudo .ai-dispatch-bar:hover .ai-dispatch-arrow {
  transform: translateX(6px);
}

/* ==========================================================================
   6. RESPONSIVIDADE E ACESSIBILIDADE
   ========================================================================== */
@media (max-width: 1080px) {
  /* Especificidade tem de igualar a regra base (0-1-2-1). Media query nao soma
     especificidade: sem o prefixo body.pag-gennomx-ai esta regra nunca vencia e
     o hero permanecia em duas colunas ate 390px, com 139px para o titulo. */
  body.pag-gennomx-ai #conteudo .ai-hero__container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  body.pag-gennomx-ai #conteudo .ai-rail__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.pag-gennomx-ai #conteudo .ai-rail__col:nth-child(2n+1) {
    border-left: none;
  }

  body.pag-gennomx-ai #conteudo .ai-rail__col:nth-child(n+3) {
    border-top: 1px solid var(--ink-800);
  }

  body.pag-gennomx-ai #conteudo .ai-rigor-split {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  body.pag-gennomx-ai #conteudo .ai-closing-terminal {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Virada dos dois diagramas. O horizontal tem viewBox de 1440: abaixo desta
     largura ele renderiza a escala < 0.69 e as legendas caem para 7px ou menos.
     Daqui para baixo quem responde e o diagrama vertical. */
  body.pag-gennomx-ai #conteudo .ai-instrument-viewport--desktop {
    display: none;
  }

  body.pag-gennomx-ai #conteudo .ai-instrument-viewport--mobile {
    display: block;
  }
}

@media (max-width: 768px) {
  body.pag-gennomx-ai #conteudo .ai-hero {
    padding-top: 104px;
  }

  /* A altura minima foi dimensionada para a coluna direita do layout de duas
     colunas. Com o hero empilhado o blueprint mede 176px a 390 e sobravam 162px
     de vazio dentro do palco. Aqui quem define a altura e o proprio desenho. */
  body.pag-gennomx-ai #conteudo .ai-engine__stage {
    min-height: 0;
  }

  body.pag-gennomx-ai #conteudo .ai-rail__grid {
    grid-template-columns: 1fr;
  }

  body.pag-gennomx-ai #conteudo .ai-rail__col + .ai-rail__col {
    border-left: none;
    border-top: 1px solid var(--ink-800);
  }

  body.pag-gennomx-ai #conteudo .ai-ledger-row {
    grid-template-columns: 38px 1fr;
    gap: 12px;
  }

  body.pag-gennomx-ai #conteudo .ai-dock-chan {
    grid-template-columns: 36px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #conteudo .ai-engine__pulse-wave {
    animation: none !important;
    display: none !important;
  }

  /* Sem movimento o diagrama precisa continuar legivel, nao apenas parar.
     Os elementos que so existem em transito somem; os que carregam desenho
     ficam no estado aceso. */
  body.pag-gennomx-ai #conteudo .ai-comet,
  body.pag-gennomx-ai #conteudo .ai-comet-v,
  body.pag-gennomx-ai #conteudo .ai-ping,
  body.pag-gennomx-ai #conteudo .ai-gate-scan {
    animation: none !important;
    display: none !important;
  }

  body.pag-gennomx-ai #conteudo .ai-feed-live path,
  body.pag-gennomx-ai #conteudo .ai-out-live path {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 0.7 !important;
  }

  body.pag-gennomx-ai #conteudo .ai-src__dot,
  body.pag-gennomx-ai #conteudo .ai-conv,
  body.pag-gennomx-ai #conteudo .ai-out__dot,
  body.pag-gennomx-ai #conteudo .ai-core,
  body.pag-gennomx-ai #conteudo .ai-ring--slow,
  body.pag-gennomx-ai #conteudo .ai-ring--fast {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.pag-gennomx-ai #conteudo .ai-etl-bars line,
  body.pag-gennomx-ai #conteudo .ai-gate-bar {
    animation: none !important;
    stroke-opacity: 0.8 !important;
  }

  body.pag-gennomx-ai #conteudo .ai-wh-strata ellipse {
    animation: none !important;
    stroke-opacity: 0.4 !important;
  }

  body.pag-gennomx-ai #conteudo .ai-dispatch-bar, body.pag-gennomx-ai #conteudo .ai-dispatch-arrow, body.pag-gennomx-ai #conteudo .ai-rail__col, body.pag-gennomx-ai #conteudo .ai-ledger-row, body.pag-gennomx-ai #conteudo .ai-rail__num {
    transition: none !important;
  }
}

/* ---------- carteiras-gx (carteiras-gx.html) ---------- */
/* ==========================================================================
   GennomX — Carteiras GX (carteiras-gx.html)
   Partido: PAINEL VIVO EM SANGRIA (Full-Bleed Financial Terminal)
   Direção de Arte: Sóbrio, científico, preciso, Awwwards level.
   Tokens consumidos de assets/css/main.css. Zero dependência externa.
   ========================================================================== */

/* 1. Reset Estrutural da Página e Coluna-Mestra de Alinhamento */
body.pag-carteiras-gx {
  background-color: var(--ink-950) !important;
  color: var(--ink-050);
}

body.pag-carteiras-gx .page-head.page-head--instrument.fx-dotgrid, body.pag-carteiras-gx .section-border, body.pag-carteiras-gx .section {
  background-image: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

#gx-carteiras-page {
  --gx-gutter: clamp(32px, 5.2vw, 84px);
  --gx-max-w: 1380px;
  width: 100%;
  position: relative;
  background-color: var(--ink-950);
}

/* 2. Pórtico Editorial / Hero com Gesto Vivo (Mandato do Fundador, LEI-PAGINAS §13, §15, §16) */
#gx-carteiras-page .gx-masthead {
  min-height: 100svh;
  min-height: max(100svh, 920px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  padding-top: clamp(120px, 15vh, 160px);
  /* A secao do painel tem enchimento zero por ser sangria total, entao o vao ate
     ele vinha inteiro daqui: 45px, contra 180 e 320 das transicoes seguintes,
     uma amplitude de 7.1x. Subindo para ~100 a amplitude cai para 3.2x. */
  padding-bottom: clamp(72px, 11vh, 104px);
  padding-left: var(--gx-gutter);
  padding-right: var(--gx-gutter);
  position: relative;
  overflow: hidden;
  background-color: var(--ink-950);
}

#gx-carteiras-page .gx-masthead__inner {
  width: 100%;
  position: relative;
  z-index: 2;
  margin: 0;
  box-sizing: border-box;
}

#gx-carteiras-page .gx-masthead__core {
  max-width: 960px;
  margin-bottom: 0;
}

#gx-carteiras-page .gx-masthead__title {
  margin: 0 0 clamp(20px, 2.4vw, 30px) 0;
  padding: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

#gx-carteiras-page .gx-title-main {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(5rem, 10.2vw, 10.4rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--ink-050);
}

#gx-carteiras-page .gx-title-sub {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--ink-200);
  margin-top: clamp(14px, 1.8vw, 22px);
}

#gx-carteiras-page .gx-masthead__lede {
  font-family: var(--font-sans);
  font-size: clamp(1.12rem, 1.45vw, 1.32rem);
  color: var(--ink-300);
  line-height: 1.6;
  max-width: 620px;
  margin: clamp(20px, 2.5vw, 32px) 0 clamp(32px, 3.8vw, 44px) 0;
}

/* CTA de Entrada do Pórtico (LEI-PAGINAS §13: tipografia pura, zero rastro mono) */
#gx-carteiras-page .gx-masthead__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

#gx-carteiras-page .gx-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink-050);
  background-color: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: 2px;
  padding: 14px 24px;
  text-decoration: none;
  position: relative;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

#gx-carteiras-page .gx-hero-cta-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}

#gx-carteiras-page .gx-hero-cta::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: var(--signal);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), left var(--dur) var(--ease), right var(--dur) var(--ease);
}

#gx-carteiras-page .gx-hero-cta:hover {
  border-color: var(--ink-500);
  background-color: var(--ink-850);
  color: var(--ink-050);
  transform: translateY(-2px);
}

#gx-carteiras-page .gx-hero-cta:hover::after {
  opacity: 1;
  left: 12px;
  right: 12px;
}

#gx-carteiras-page .gx-hero-cta:focus-visible {
  outline: 2px solid var(--signal) !important;
  outline-offset: 3px !important;
}

#gx-carteiras-page .gx-hero-cta-arrow {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--signal);
  transition: transform var(--dur) var(--ease);
}

#gx-carteiras-page .gx-hero-cta:hover .gx-hero-cta-arrow {
  transform: translateY(3px);
}

/* O Gesto Vivo: Série Temporal Monumental Sangrando em Toda a Largura (LEI-PAGINAS §13, §15, §16) */
#gx-carteiras-page .gx-masthead__gesture {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(440px, 64vh, 720px);
  display: block;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

#gx-carteiras-page .gx-hero-spark {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

#gx-carteiras-page .gx-hero-datum {
  opacity: 0.65;
}

#gx-carteiras-page .gx-hero-curve {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: gx-curve-draw 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#gx-carteiras-page .gx-hero-area {
  opacity: 0;
  animation: gx-area-fade 1.6s var(--ease) 0.8s forwards;
}

#gx-carteiras-page .gx-hero-dot-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: gx-pulse-reveal 0.6s var(--ease) 2s forwards, gx-dot-breathe 4s ease-in-out 2.6s infinite;
}

#gx-carteiras-page .gx-hero-dot {
  opacity: 0;
  animation: gx-dot-reveal 0.4s var(--ease) 1.9s forwards;
}

@keyframes gx-curve-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes gx-area-fade {
  to {
    opacity: 1;
  }
}

@keyframes gx-dot-reveal {
  to {
    opacity: 1;
  }
}

@keyframes gx-pulse-reveal {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
}

@keyframes gx-dot-breathe {
  0%, 100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(1.4);
  }
}

/* 3. PAINEL VIVO EM SANGRIA — Terminal Financeiro em Largura Total (Full-Bleed) */
#gx-carteiras-page .gx-stage-section {
  width: 100%;
  position: relative;
  background-color: var(--ink-950);
}

#gx-carteiras-page .gx-stage-bleed {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#gx-dashboard {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--ink-950);
}

/* Desativação estrita de molduras / cards herdados */
#gx-carteiras-page .instrument-panel, #gx-carteiras-page .gx-panel, #gx-dashboard .gx-panel {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
  width: 100%;
}

#gx-carteiras-page .instrument-panel::before, #gx-carteiras-page .instrument-panel::after {
  display: none !important;
}

/* Fallback de Carregamento Estático */
#gx-dashboard .content-list-state {
  padding: clamp(64px, 8vw, 100px) var(--gx-gutter);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

#gx-dashboard .content-list-state .overline {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--struct);
  display: block;
  margin-bottom: 12px;
}

#gx-dashboard .content-list-state h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink-050);
  margin-bottom: 12px;
}

#gx-dashboard .content-list-state p {
  font-family: var(--font-sans);
  font-size: var(--fs-lede);
  color: var(--ink-300);
  max-width: 600px;
}

/* 3.1. Toolbar e Navegação de Abas: Arquitetural, Silenciosa, Sem Cromo Boxy (BRIEF § Adendo Decisivo 2) */
#gx-dashboard .gx-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  width: 100%;
  padding: clamp(24px, 3vw, 36px) var(--gx-gutter) 0;
  margin-bottom: 0;
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
  background-color: var(--ink-950);
  box-sizing: border-box;
}

#gx-dashboard .gx-tabs {
  display: flex;
  gap: clamp(16px, 2.2vw, 36px);
  flex-wrap: wrap;
  margin-bottom: -1px;
}

#gx-dashboard .gx-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Sem enchimento superior a aba fechava em 31px de altura, abaixo do minimo de
     44px para alvo de toque, sendo o controle principal do painel. A ancora
     visual continua sendo a borda inferior rosa da aba ativa. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: clamp(12px, 1.5vw, 16px) 0;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink-500);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

#gx-dashboard .gx-tab:hover {
  color: var(--ink-200);
  background: transparent;
  border-bottom-color: var(--ink-700);
}

#gx-dashboard .gx-tab.active {
  color: var(--ink-050);
  background: transparent;
  border-bottom-color: var(--signal);
  font-weight: 600;
}

#gx-dashboard .gx-tab:focus-visible {
  outline: 2px solid var(--signal) !important;
  outline-offset: 4px !important;
}

#gx-dashboard .gx-updated {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: clamp(12px, 1.5vw, 16px);
}

/* ink-600 media 1.72:1 sobre o fundo. A data, num <strong> em ink-300, ja se lia
   a 7.8:1; o que nao se lia era a frase que diz o que aquela data significa.
   ink-500 leva o prefixo a 5.27:1 e mantem a data um degrau acima dele. */
#gx-dashboard .gx-updated-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#gx-dashboard .gx-updated-label strong {
  color: var(--ink-300);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

#gx-dashboard .gx-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid;
}

#gx-dashboard .gx-badge-mock {
  color: var(--warning);
  border-color: rgba(245, 165, 36, 0.35);
  background: rgba(245, 165, 36, 0.05);
}

#gx-dashboard .gx-badge-stale {
  color: var(--struct);
  border-color: rgba(143, 184, 216, 0.35);
  background: rgba(143, 184, 216, 0.05);
}

/* 3.2. Painel de Conteúdo / Cabeçalho do Ativo em Sangria */
#gx-dashboard .gx-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
  width: 100%;
  padding: clamp(48px, 6vw, 76px) var(--gx-gutter) clamp(32px, 4vw, 48px);
  box-sizing: border-box;
  background-color: var(--ink-950);
}

#gx-dashboard .gx-name {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 5.8vw, 5.6rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink-050);
  margin: 0;
}

#gx-dashboard .gx-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.96rem, 1.25vw, 1.15rem);
  color: var(--ink-300);
  line-height: 1.65;
  max-width: 680px;
  margin-top: clamp(12px, 1.6vw, 18px);
}

#gx-dashboard .gx-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  border-left: 1px solid var(--ink-800);
  padding-left: clamp(20px, 2.5vw, 32px);
}

#gx-dashboard .gx-meta strong {
  color: var(--ink-200);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 3.3. Barra de Telemetria / KPIs em Escala Asimétrica */
#gx-dashboard .gx-kpis {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 0.85fr;
  gap: 0;
  width: 100%;
  padding: 0 var(--gx-gutter);
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
  background: var(--ink-950);
  box-sizing: border-box;
}

#gx-dashboard .gx-kpi {
  background: transparent;
  border: none;
  border-right: 1px solid var(--ink-800);
  border-radius: 0;
  padding: clamp(24px, 3vw, 36px) clamp(18px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  box-sizing: border-box;
}

#gx-dashboard .gx-kpi:first-child {
  padding-left: 0;
}

#gx-dashboard .gx-kpi:last-child {
  border-right: none;
  padding-right: 0;
}

#gx-dashboard .gx-kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}

#gx-dashboard .gx-kpi-value {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink-050);
  font-variant-numeric: tabular-nums;
}

#gx-dashboard .gx-kpi:first-child .gx-kpi-value {
  font-size: clamp(2.8rem, 4.2vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

#gx-dashboard .gx-kpi-value.is-pos {
  color: var(--ink-050) !important;
}

#gx-dashboard .gx-kpi-value.is-neg {
  color: var(--danger) !important;
}

/* 3.4. Palco do Gráfico em Sangria Total: O Protagonista Monumental (BRIEF § Adendo Decisivo 1, 4) */
#gx-dashboard .gx-chart-wrap {
  background: radial-gradient(ellipse 90% 65% at 50% 50%, rgba(255, 79, 143, 0.04) 0%, rgba(143, 184, 216, 0.015) 45%, transparent 75%), var(--ink-950);
  border: none;
  border-bottom: 1px solid var(--ink-800);
  border-radius: 0;
  width: 100%;
  padding-top: clamp(64px, 8vw, 110px);
  padding-bottom: clamp(64px, 8vw, 110px);
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

#gx-dashboard .gx-chart-legend {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 var(--gx-gutter);
  margin-bottom: clamp(24px, 3vw, 40px);
}

#gx-dashboard .gx-legend {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#gx-dashboard .gx-legend::before {
  content: '';
  width: 14px;
  height: 2px;
  border-radius: 1px;
  display: inline-block;
}

#gx-dashboard .gx-legend-port::before {
  background: var(--signal);
}

#gx-dashboard .gx-legend-bench::before {
  background: var(--ink-500);
}

#gx-dashboard .gx-legend-hint {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#gx-dashboard .gx-chart {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Sem min-height: a altura agora vem do viewBox, que o JS calcula a partir da
   largura real. Com o minimo antigo, um desenho mais baixo que ele era centrado
   e reescalado dentro da caixa (a 390px o desenho tinha 154px numa caixa de 432),
   que era a origem dos rotulos de 4,5px. */
#gx-dashboard .gx-chart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

#gx-dashboard .gx-gridline {
  stroke: var(--ink-800) !important;
  stroke-width: 1px !important;
  stroke-dasharray: 4 8 !important;
  opacity: 0.7;
}

#gx-dashboard .gx-axis-label {
  fill: var(--ink-300) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
}

#gx-dashboard .gx-line {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

#gx-dashboard .gx-line-port {
  stroke: var(--signal) !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 4px 18px rgba(255, 79, 143, 0.35)) !important;
}

#gx-dashboard .gx-line-bench {
  stroke: var(--ink-500) !important;
  stroke-width: 1.3px !important;
  stroke-dasharray: 4 4 !important;
  opacity: 0.85 !important;
}

#gx-dashboard path[fill*="gxArea"] {
  opacity: 0.3 !important;
}

#gx-dashboard .gx-crosshair {
  stroke: var(--struct);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.65;
}

#gx-dashboard .gx-dot {
  transition: opacity var(--dur);
}

#gx-dashboard .gx-dot-port {
  fill: var(--signal);
  stroke: var(--ink-950);
  stroke-width: 2;
}

#gx-dashboard .gx-dot-bench {
  fill: var(--ink-500);
  stroke: var(--ink-950);
  stroke-width: 2;
}

#gx-dashboard .gx-tooltip {
  position: absolute;
  min-width: 160px;
  background: rgba(16, 18, 25, 0.95);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-300);
  pointer-events: none;
  transition: opacity var(--dur);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
}

#gx-dashboard .gx-tooltip strong {
  color: var(--ink-050);
  font-weight: 600;
  letter-spacing: 0.04em;
}

#gx-dashboard .gx-tooltip .tt-port {
  color: var(--signal);
  font-weight: 600;
}

#gx-dashboard .gx-tooltip .tt-bench {
  color: var(--ink-200);
}

/* ==========================================================================
   4. MAIORES POSIÇÕES — Hierarquia Tipográfica e Ancoragem Asimétrica
   ========================================================================== */
#gx-dashboard .gx-holdings {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-800);
  border-radius: 0;
  width: 100%;
  padding: clamp(80px, 9vw, 120px) var(--gx-gutter) clamp(70px, 8vw, 110px);
  box-sizing: border-box;
}

#gx-dashboard .gx-block-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 clamp(32px, 4vw, 48px) 0;
  padding: 0 0 14px 0;
  border-bottom: 1px solid var(--ink-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
}

/* Grade 3 Colunas com Ancoragem Central Real e Subdivisão em 3 Patamares */
#gx-dashboard .gx-hold-list {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.5fr) minmax(0, 0.5fr);
  grid-template-rows: auto auto auto;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
}

#gx-dashboard .gx-hold {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: transparent;
  border: none;
  transition: background-color var(--dur) var(--ease);
}

#gx-dashboard .gx-hold:hover {
  background-color: rgba(255, 255, 255, 0.015);
}

#gx-dashboard .gx-hold-head {
  display: flex;
  box-sizing: border-box;
}

#gx-dashboard .gx-hold-bar {
  display: none !important;
}

/* Coluna 1: Ativo Líder Protagonista (MRNA 11,7%) */
#gx-dashboard .gx-hold:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(32px, 4vw, 56px) clamp(36px, 4.5vw, 64px) clamp(32px, 4vw, 56px) 0;
  border-right: 1px solid var(--ink-800) !important;
  box-sizing: border-box;
}

#gx-dashboard .gx-hold:nth-child(1) .gx-hold-head {
  display: flex;
  flex-direction: column-reverse;
  gap: clamp(16px, 2vw, 24px);
  justify-content: flex-start;
}

#gx-dashboard .gx-hold:nth-child(1) .gx-hold-head span:last-child {
  font-family: var(--font-display);
  /* Escada comprimida: os cinco pesos variam 1.22x entre si e a escala antiga
     os desenhava com 4.6x de diferenca de corpo. Agora sao 2x, suficiente para
     ler o ranking sem afirmar uma diferenca que os numeros nao tem. */
  font-size: clamp(3.4rem, 5.0vw, 5.6rem);
  font-weight: 400;
  line-height: 0.82;
  color: var(--ink-050);
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  display: block;
}

#gx-dashboard .gx-hold:nth-child(1) .gx-hold-head span:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-300);
  line-height: 1.4;
  display: block;
}

/* Coluna 2 & 3 / Linha 1: Patamar Secundário Primário (PLTR 6,9%) */
#gx-dashboard .gx-hold:nth-child(2) {
  grid-column: 2 / span 2;
  grid-row: 1;
  padding: clamp(28px, 3.5vw, 44px) 0 clamp(28px, 3.5vw, 44px) clamp(36px, 4.5vw, 64px);
  border-bottom: 1px solid var(--ink-800) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#gx-dashboard .gx-hold:nth-child(2) .gx-hold-head {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

#gx-dashboard .gx-hold:nth-child(2) .gx-hold-head span:last-child {
  font-family: var(--font-sans);
  font-size: clamp(2.9rem, 3.9vw, 4.4rem);
  font-weight: 700;
  line-height: 0.90;
  color: var(--ink-050);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

#gx-dashboard .gx-hold:nth-child(2) .gx-hold-head span:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-200);
  line-height: 1.35;
}

/* Coluna 2 & 3 / Linha 2: Patamar Secundário Intermediário (TSLA 6,2%) */
#gx-dashboard .gx-hold:nth-child(3) {
  grid-column: 2 / span 2;
  grid-row: 2;
  padding: clamp(20px, 2.4vw, 32px) 0 clamp(20px, 2.4vw, 32px) clamp(36px, 4.5vw, 64px);
  border-bottom: 1px solid var(--ink-800) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#gx-dashboard .gx-hold:nth-child(3) .gx-hold-head {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

#gx-dashboard .gx-hold:nth-child(3) .gx-hold-head span:last-child {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 3.2vw, 3.6rem);
  font-weight: 600;
  line-height: 0.95;
  color: var(--ink-200);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

#gx-dashboard .gx-hold:nth-child(3) .gx-hold-head span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 450;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-300);
  line-height: 1.35;
}

/* Coluna 2 / Linha 3: Satélite 1 (ABCL 5,4%) */
#gx-dashboard .gx-hold:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.5vw, 36px) clamp(24px, 2.8vw, 36px) clamp(36px, 4.5vw, 64px);
  border-right: 1px solid var(--ink-800) !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#gx-dashboard .gx-hold:nth-child(4) .gx-hold-head {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  justify-content: flex-start;
}

#gx-dashboard .gx-hold:nth-child(4) .gx-hold-head span:last-child {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 2.8vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-300);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

#gx-dashboard .gx-hold:nth-child(4) .gx-hold-head span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1.35;
}

/* Coluna 3 / Linha 3: Satélite 2 (NVDA 5,3%) */
#gx-dashboard .gx-hold:nth-child(5) {
  grid-column: 3;
  grid-row: 3;
  padding: clamp(20px, 2.4vw, 32px) 0 clamp(24px, 2.8vw, 36px) clamp(20px, 2.5vw, 36px);
  border: none !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#gx-dashboard .gx-hold:nth-child(5) .gx-hold-head {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  justify-content: flex-start;
}

#gx-dashboard .gx-hold:nth-child(5) .gx-hold-head span:last-child {
  font-family: var(--font-mono);
  font-size: clamp(2.0rem, 2.5vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-300);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

#gx-dashboard .gx-hold:nth-child(5) .gx-hold-head span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1.35;
}

/* ==========================================================================
   5. ALOCAÇÃO VIGENTE — Espectro Panorâmico Horizontal (Divergência Total, BRIEF § Adendo Decisivo 3)
   ========================================================================== */
#gx-dashboard .gx-grid-2 {
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--ink-800);
  box-sizing: border-box;
  background: var(--ink-950);
}

#gx-dashboard .gx-grid-2 > .gx-block {
  background: transparent;
  border: none;
  border-radius: 0;
  width: 100%;
  padding: clamp(64px, 7vw, 96px) var(--gx-gutter) clamp(56px, 6vw, 84px);
  box-sizing: border-box;
}

/* Espectro Panorâmico de 5 Colunas Contínuas: Linha de Base Única com Telemetria Ativa */
#gx-dashboard .gx-alloc-list {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 0.9fr 0.9fr 0.9fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
}

#gx-dashboard .gx-alloc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(28px, 3.5vw, 44px) clamp(18px, 2.2vw, 32px);
  border-right: 1px solid var(--ink-800);
  box-sizing: border-box;
  background: transparent;
  transition: background-color var(--dur) var(--ease);
}

#gx-dashboard .gx-alloc:first-child {
  padding-left: 0;
}

#gx-dashboard .gx-alloc:last-child {
  border-right: none;
  padding-right: 0;
}

#gx-dashboard .gx-alloc:hover {
  background-color: rgba(255, 255, 255, 0.015);
}

#gx-dashboard .gx-alloc-head {
  display: flex;
  flex-direction: column-reverse;
  box-sizing: border-box;
}

/* Régua Ativa de Alocação: Hairline de Proporção Suíça (1px) */
#gx-dashboard .gx-alloc-bar {
  display: block !important;
  width: 100%;
  height: 2px;
  background: var(--ink-800);
  margin: clamp(14px, 1.8vw, 22px) 0 clamp(10px, 1.4vw, 16px);
  overflow: hidden;
  border-radius: 1px;
}

#gx-dashboard .gx-alloc-bar > span {
  display: block;
  height: 100%;
  border-radius: 1px;
  transition: width 1.2s var(--ease);
}

#gx-dashboard .gx-alloc:nth-child(1) .gx-alloc-bar > span {
  background: var(--signal) !important;
}

#gx-dashboard .gx-alloc:nth-child(2) .gx-alloc-bar > span {
  background: var(--struct) !important;
}

#gx-dashboard .gx-alloc:nth-child(n+3) .gx-alloc-bar > span {
  background: var(--ink-500) !important;
}

/* Coluna 1: Saúde (53%) */
#gx-dashboard .gx-alloc:nth-child(1) .gx-alloc-head span:last-child {
  font-family: var(--font-sans);
  font-size: clamp(3.4rem, 4.8vw, 5.2rem);
  font-weight: 700;
  line-height: 0.88;
  color: var(--ink-050);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  display: block;
}

#gx-dashboard .gx-alloc:nth-child(1) .gx-alloc-head span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-200);
  line-height: 1.35;
  display: block;
}

/* Coluna 2: Tecnologia (32%) */
#gx-dashboard .gx-alloc:nth-child(2) .gx-alloc-head span:last-child {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 3.8vw, 4.2rem);
  font-weight: 600;
  line-height: 0.90;
  color: var(--ink-200);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  display: block;
}

#gx-dashboard .gx-alloc:nth-child(2) .gx-alloc-head span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-300);
  line-height: 1.35;
  display: block;
}

/* Colunas 3–5: Satélites Setoriais (6%, 5%, 5%) */
#gx-dashboard .gx-alloc:nth-child(n+3) .gx-alloc-head span:last-child {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 2.4vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-300);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}

#gx-dashboard .gx-alloc:nth-child(n+3) .gx-alloc-head span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 450;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1.35;
  display: block;
}

/* Módulo de Contribuições (se ativado) */
#gx-dashboard .gx-contrib-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

#gx-dashboard .gx-contrib {
  display: grid;
  grid-template-columns: 60px 1fr 76px;
  align-items: center;
  gap: 14px;
}

#gx-dashboard .gx-contrib-ticker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-200);
}

#gx-dashboard .gx-contrib-bar {
  height: 2px;
  border-radius: 1px;
  background: var(--ink-800);
  overflow: hidden;
}

#gx-dashboard .gx-contrib-bar > span {
  display: block;
  height: 100%;
  border-radius: 1px;
  background: var(--ink-300) !important;
  transition: width 0.9s var(--ease);
}

#gx-dashboard .gx-contrib-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-200) !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#gx-dashboard .gx-contrib.is-neg .gx-contrib-bar > span {
  background: var(--ink-600) !important;
}

#gx-dashboard .gx-contrib.is-neg .gx-contrib-value {
  color: var(--ink-500) !important;
}

/* Disclaimer Alinhado */
#gx-dashboard .gx-disclaimer {
  width: 100%;
  max-width: 880px;
  padding: clamp(28px, 3.5vw, 40px) var(--gx-gutter) clamp(40px, 4.5vw, 56px);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
  line-height: 1.7;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}

/* ==========================================================================
   6. METODOLOGIA ANALÍTICA — Ledger Editorial Suíço
   ========================================================================== */
#gx-carteiras-page .gx-methodology-section {
  padding: clamp(120px, 14vw, 180px) var(--gx-gutter);
  background-color: var(--ink-950);
  box-sizing: border-box;
}

#gx-carteiras-page .gx-methodology-inner {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}

#gx-carteiras-page .gx-methodology-head {
  margin-bottom: clamp(40px, 5vw, 64px);
}

#gx-carteiras-page .gx-methodology-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink-050);
  margin: 0;
  overflow-wrap: break-word;
}

#gx-carteiras-page .gx-protocol-ledger {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-800);
}

#gx-carteiras-page .gx-protocol-row {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  align-items: baseline;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(32px, 3.8vw, 48px) 0;
  border-bottom: 1px solid var(--ink-800);
  background: transparent;
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
  box-sizing: border-box;
}

#gx-carteiras-page .gx-protocol-row:hover {
  background-color: rgba(255, 255, 255, 0.012);
  padding-left: 12px;
}

#gx-carteiras-page .gx-protocol-title {
  font-family: var(--font-sans);
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink-050);
  line-height: 1.2;
}

#gx-carteiras-page .gx-protocol-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  color: var(--ink-300);
  line-height: 1.65;
  max-width: 680px;
}

/* ==========================================================================
   7. FECHAMENTO EDITORIAL — Despacho Analítico com Alinhamento Mestre
   ========================================================================== */
#gx-carteiras-page .gx-closing-section {
  padding: clamp(90px, 10vw, 140px) var(--gx-gutter);
  background-color: var(--ink-950);
  border-top: 1px solid var(--ink-800);
  box-sizing: border-box;
}

#gx-carteiras-page .gx-closing-inner {
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
}

#gx-carteiras-page .gx-closing-head {
  display: flex;
  flex-direction: column;
  max-width: 920px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

#gx-carteiras-page .gx-closing-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--ink-050);
  overflow-wrap: break-word;
}

#gx-carteiras-page .gx-closing-dispatch {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-800);
}

#gx-carteiras-page .gx-dispatch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 3.2vw, 44px) 0;
  border-bottom: 1px solid var(--ink-800);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), padding-left var(--dur) var(--ease), background-color var(--dur) var(--ease);
  box-sizing: border-box;
}

#gx-carteiras-page .gx-dispatch-row:hover {
  border-color: var(--ink-500);
  padding-left: 12px;
  background-color: rgba(255, 255, 255, 0.012);
}

#gx-carteiras-page .gx-dispatch-row:focus-visible {
  outline: 2px solid var(--signal) !important;
  outline-offset: 4px !important;
}

#gx-carteiras-page .gx-dispatch-title {
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 600;
  color: var(--ink-050);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

#gx-carteiras-page .gx-dispatch-arrow {
  font-family: var(--font-sans);
  font-size: 24px;
  color: var(--ink-300);
  text-align: right;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

#gx-carteiras-page .gx-dispatch-row:hover .gx-dispatch-arrow {
  color: var(--ink-050);
  transform: translate(6px, -6px);
}

/* ==========================================================================
   8. Responsividade e Adaptações de Viewport
   ========================================================================== */
@media (max-width: 1024px) {
  #gx-carteiras-page .gx-masthead {
    min-height: auto;
    padding-top: clamp(120px, 16vw, 160px);
    padding-bottom: clamp(60px, 8vw, 90px);
  }
  #gx-carteiras-page .gx-masthead__gesture {
    height: clamp(340px, 50vh, 460px);
  }
  #gx-dashboard .gx-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  #gx-dashboard .gx-kpi:nth-child(2) {
    border-right: none;
  }
  #gx-dashboard .gx-kpi:nth-child(-n+2) {
    border-bottom: 1px solid var(--ink-800);
  }

  /* Responsividade Holdings */
#gx-dashboard .gx-hold-list {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  #gx-dashboard .gx-hold:nth-child(1) {
    grid-column: 1;
    grid-row: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--ink-800) !important;
    padding-right: 0;
    padding-bottom: 32px;
  }
  #gx-dashboard .gx-hold:nth-child(2), #gx-dashboard .gx-hold:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
    padding-left: 0;
    padding-right: 0;
  }
  #gx-dashboard .gx-hold:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--ink-800) !important;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 24px;
  }
  #gx-dashboard .gx-hold:nth-child(5) {
    grid-column: 1;
    grid-row: auto;
    padding-left: 0;
  }

  /* Responsividade Alocação */
#gx-dashboard .gx-alloc-list {
    grid-template-columns: repeat(2, 1fr);
  }
  #gx-dashboard .gx-alloc:nth-child(2) {
    border-right: none;
  }
  #gx-dashboard .gx-alloc:nth-child(-n+2) {
    border-bottom: 1px solid var(--ink-800);
  }
  #gx-dashboard .gx-alloc:nth-child(3), #gx-dashboard .gx-alloc:nth-child(4) {
    border-bottom: 1px solid var(--ink-800);
  }
  #gx-dashboard .gx-alloc:nth-child(4) {
    border-right: none;
  }
  #gx-dashboard .gx-alloc:nth-child(5) {
    grid-column: 1 / span 2;
    border-right: none;
  }

  #gx-carteiras-page .gx-protocol-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }
}

@media (max-width: 640px) {
  #gx-dashboard .gx-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px var(--gx-gutter) 0;
  }
  #gx-dashboard .gx-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-bottom: 0;
  }
  #gx-dashboard .gx-tab {
    width: 100%;
    text-align: center;
    padding: 8px 4px;
    font-size: 10px;
    letter-spacing: 0.10em;
  }
  #gx-dashboard .gx-updated {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 12px;
  }
  #gx-dashboard .gx-kpis {
    grid-template-columns: 1fr;
  }
  #gx-dashboard .gx-kpi {
    border-right: none;
    border-bottom: 1px solid var(--ink-800);
    padding: 20px 0;
  }
  #gx-dashboard .gx-kpi:last-child {
    border-bottom: none;
  }
  #gx-dashboard .gx-alloc-list {
    grid-template-columns: 1fr;
  }
  #gx-dashboard .gx-alloc {
    border-right: none !important;
    border-bottom: 1px solid var(--ink-800);
    padding: 20px 0;
  }
  #gx-dashboard .gx-alloc:last-child {
    border-bottom: none;
  }
  #gx-dashboard .gx-contrib {
    grid-template-columns: 50px 1fr 64px;
    gap: 10px;
  }
}

/* ==========================================================================
   9. Acessibilidade — Prefers-Reduced-Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #gx-carteiras-page *, #gx-dashboard * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #gx-carteiras-page .gx-hero-curve {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  #gx-carteiras-page .gx-hero-area, #gx-carteiras-page .gx-hero-dot, #gx-carteiras-page .gx-hero-dot-pulse {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  #gx-carteiras-page .gx-hero-dot-pulse {
    opacity: 0.3 !important;
  }
}

/* ---------- contato (contato.html) ---------- */
/* ==========================================================================
   GennomX — Contato (contato.html)
   Transposição Estética — Nível Awwwards Site of the Year
   Partido Obrigatório: FORMULÁRIO COMO INSTRUMENTO (BRIEF.md / LEI §13)
   Ataque Cirúrgico de Densidade e Resolução de Medidas:
   1. Erradicação de colisão em 390px (links de consentimento em inline-block atômico com white-space: nowrap)
   2. Subtração de rótulos mono na dobra da Hero (teto <= 2 mono / <= 8 elementos atingido)
   3. Descompressão e redução de nós na faixa pico y=900 (vetores via ::after, eliminação de spans inertes)
   4. Salto de escala editorial (> 4.5x) e variação de ritmo vertical entre seções
   5. Zero vazamento de CSS: 100% das regras escopadas sob #gx-contact-root
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SUPERFÍCIE & ATMOSFERA DE LUZ ÓPTICA (LEI §2 / LEI-PAGINAS §4)
   Superfície sólida (--ink-950), sem ruído tileado, sem feTurbulence.
   Profundidade gerada por iluminação difusa larga.
   -------------------------------------------------------------------------- */
#gx-contact-root {
  position: relative;
  width: 100%;
  background-color: var(--ink-950, #07080C);
  color: var(--ink-050, #F5F6FA);
  font-family: var(--font-sans, system-ui, sans-serif);
  overflow-x: hidden;
  /* clip corta o transbordo sem criar contêiner de rolagem (hidden anularia o sticky da doca) */
  overflow-x: clip;
  box-sizing: border-box;
}

#gx-contact-root::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: min(80vw, 1200px);
  height: 860px;
  background: radial-gradient(
    ellipse at 50% 25%,
    rgba(143, 184, 216, 0.045) 0%,
    rgba(255, 79, 143, 0.018) 50%,
    transparent 75%
  );
  filter: blur(95px);
  pointer-events: none;
  z-index: 0;
}

#gx-contact-root .gx-container {
  max-width: min(1680px, 96vw);
  margin: 0 auto;
  position: relative;
  width: 100%;
  padding: 0 clamp(20px, 3.8vw, 68px);
  box-sizing: border-box;
  z-index: 1;
}

#gx-contact-root .gx-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;
}

/* --------------------------------------------------------------------------
   2. HERO SECTION COM GESTO VIVO DE GRANDE MASSA (LEI-PAGINAS §13 / §15 / §16)
   - Teto da Hero: 2 nós de texto no pórtico, 0 em mono.
   - Sem border-bottom atravessando a emenda de cenas (§15).
   - Gesto sem caixa e sem cantos em colchetes: sangra livre no campo (§16).
   - Altura arejada e compensação da barra fixa de cabeçalho.
   -------------------------------------------------------------------------- */
#gx-contact-root .gx-contact-hero {
  position: relative;
  padding-top: clamp(140px, 18vh, 195px);
  padding-bottom: clamp(52px, 8vh, 88px);
  min-height: clamp(580px, 75vh, 760px);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

#gx-contact-root .gx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  width: 100%;
}

#gx-contact-root .gx-hero-editorial {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vh, 32px);
}

/* Delta tipográfico extremo > 4.5:1 contra o corpo */
#gx-contact-root .gx-hero-title {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(3.8rem, 7.8vw, 7rem);
  font-weight: 550;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink-050, #F5F6FA);
  margin: 0;
}

/* Tipografia vazada institucional (§18 LEI / §7 LEI-PAGINAS) */
#gx-contact-root .gx-title-contour {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: max(0.7px, 0.012em) var(--ink-050, #F5F6FA);
  text-stroke: max(0.7px, 0.012em) var(--ink-050, #F5F6FA);
}

#gx-contact-root .gx-hero-lede {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  font-weight: 350;
  line-height: 1.55;
  color: var(--ink-300, #99A2B4);
  margin: 0;
  max-width: 580px;
}

/* Gesto Vivo com Massa (Cobre ≥ 1/3 da altura do viewport) */
#gx-contact-root .gx-hero-gesture {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

#gx-contact-root .gx-gesture-canvas {
  position: relative;
  width: 100%;
  max-width: 580px;
  display: flex;
  align-items: center;
}

#gx-contact-root .gx-gesture-svg {
  width: 100%;
  height: auto;
  min-height: 290px;
  overflow: visible;
}

#gx-contact-root .gx-gesture-beam {
  stroke-dasharray: 390;
  stroke-dashoffset: 390;
  animation: gxBeamOpen 1.8s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) 0.2s forwards;
}

#gx-contact-root .gx-gesture-cursor, #gx-contact-root .gx-gesture-cursor-core {
  opacity: 0;
  animation: gxCursorFlash 1.6s ease 1.6s forwards;
}

#gx-contact-root .gx-gesture-halo {
  opacity: 0;
  transform-origin: 410px 160px;
  animation: gxHaloBreathe 3.6s ease 2.2s infinite alternate;
}

#gx-contact-root .gx-gesture-node {
  opacity: 0;
  animation: gxNodeReveal 0.4s ease 1.6s forwards;
}

@keyframes gxBeamOpen {
  0% {
    stroke-dashoffset: 390;
    opacity: 0.15;
  }
  35% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes gxCursorFlash {
  0%, 25%, 55%, 85%, 100% {
    opacity: 1;
  }
  15%, 40%, 70% {
    opacity: 0;
  }
}

@keyframes gxNodeReveal {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gxHaloBreathe {
  0% {
    opacity: 0.08;
    transform: scale(0.85);
  }
  100% {
    opacity: 0.22;
    transform: scale(1.18);
  }
}

/* --------------------------------------------------------------------------
   3. SEÇÃO DO INSTRUMENTO (CONSOLE CENTRAL & DOCA DE CANAIS)
   - Ocupação ampla da malha (max-width min(1680px, 96vw)).
   - Hairlines arquiteturais contínuas.
   -------------------------------------------------------------------------- */
#gx-contact-root .gx-instrument-section {
  position: relative;
  padding-top: clamp(28px, 4.5vh, 52px);
  padding-bottom: clamp(84px, 12vh, 148px);
}

#gx-contact-root .gx-instrument-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(310px, 28vw, 400px);
  border-top: 1px solid var(--ink-800, #1E202A);
  border-bottom: 1px solid var(--ink-800, #1E202A);
  background-color: transparent;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

/* Marcador geométrico angular de precisão no vértice do instrumento */
#gx-contact-root .gx-instrument-layout::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: var(--signal, #FF4F8F);
  pointer-events: none;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   4. CONSOLE DE ENTRADA DA DEMANDA EM 3 ESTÁGIOS DECISÓRIOS
   - Hierarquia dinâmica entre campos e blocos
   - Cabeçalhos de estágio com escala real (clamp 1.25rem a 1.6rem)
   - Numeração em Sans precisa para não inflar a contagem de mono da dobra
   - Desacoplamento tipográfico: Rótulo (11px Mono) vs Placeholder (Sans, --ink-500)
   -------------------------------------------------------------------------- */
#gx-contact-root .gx-console-core {
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  border-right: 1px solid var(--ink-800, #1E202A);
}

#gx-contact-root .gx-console-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#gx-contact-root .gx-stages-flow {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Estágios de Decisão: Fieldsets abertos com cabeçalhos dominantes */
#gx-contact-root .gx-stage-block {
  border: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ink-800, #1E202A);
  position: relative;
  box-sizing: border-box;
}

#gx-contact-root .gx-stage-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(24px, 3vh, 32px) clamp(24px, 3vw, 48px) 14px clamp(24px, 3vw, 48px);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* Numeral em Sans nítido (não computado como mono) */
#gx-contact-root .gx-stage-num {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--struct, #8FB8D8);
  flex-shrink: 0;
}

/* Título de seção dominante */
#gx-contact-root .gx-stage-title {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink-050, #F5F6FA);
}

#gx-contact-root .gx-body-paired {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.6vw, 56px);
  padding: 0 clamp(24px, 3vw, 48px);
}

#gx-contact-root .gx-body-single {
  padding: 0 clamp(24px, 3vw, 48px);
}

#gx-contact-root .gx-field-unit {
  padding: clamp(18px, 2.4vh, 26px) 0 clamp(24px, 3vh, 32px) 0;
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
}

/* Rótulo técnico minúsculo e preciso em Mono */
#gx-contact-root .gx-field-label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500, #7A8398);
  margin-bottom: 12px;
  transition: color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

#gx-contact-root .gx-field-unit:focus-within .gx-field-label {
  color: var(--ink-050, #F5F6FA);
}

/* Inputs de texto, select e textarea com salto de escala evidente contra o rótulo */
#gx-contact-root .gx-input, #gx-contact-root .gx-select, #gx-contact-root .gx-textarea {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-500, #7A8398);
  border-radius: 0;
  min-height: 44px;
  padding: 6px 0 10px 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 450;
  line-height: 1.4;
  color: var(--ink-050, #F5F6FA);
  outline: none;
  transition: border-color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Foco de alta precisão */
#gx-contact-root .gx-input:focus, #gx-contact-root .gx-select:focus, #gx-contact-root .gx-textarea:focus {
  border-bottom-color: var(--ink-050, #F5F6FA);
  box-shadow: 0 1px 0 var(--signal, #FF4F8F);
}

/* Placeholder discreto e atenuado — impossível de confundir com o rótulo */
#gx-contact-root .gx-input::placeholder, #gx-contact-root .gx-textarea::placeholder {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 350;
  color: var(--ink-500, #7A8398);
  opacity: 1;
  transition: opacity 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

#gx-contact-root .gx-input:focus::placeholder, #gx-contact-root .gx-textarea:focus::placeholder {
  opacity: 0.6;
}

/* Select técnico */
#gx-contact-root .gx-select-shell {
  position: relative;
  display: flex;
  align-items: center;
}

#gx-contact-root .gx-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 32px;
}

#gx-contact-root .gx-select option {
  background-color: var(--ink-900, #101219);
  color: var(--ink-050, #F5F6FA);
  padding: 12px;
}

#gx-contact-root .gx-select:has(option[value=""]:checked) {
  color: var(--ink-500, #7A8398);
}

#gx-contact-root .gx-select-carat {
  position: absolute;
  right: 2px;
  pointer-events: none;
  color: var(--ink-500, #7A8398);
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

#gx-contact-root .gx-select:focus + .gx-select-carat {
  color: var(--ink-050, #F5F6FA);
  transform: rotate(180deg);
}

/* Estágio 03: Mandato Estratégico com amplitude espacial nobre */
#gx-contact-root .gx-stage-mandate {
  background-color: rgba(255, 255, 255, 0.012);
}

#gx-contact-root .gx-field-unit--full {
  padding: clamp(20px, 2.6vh, 28px) 0 clamp(28px, 3.4vh, 36px) 0;
}

#gx-contact-root .gx-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.65;
  padding: 10px 0;
}

/* Linha de Consentimento Legal: Imune a colisões multilinhas em telas estreitas (390px) */
#gx-contact-root .gx-stage-consent {
  padding: 0 clamp(24px, 3vw, 48px);
  background-color: rgba(7, 8, 12, 0.45);
  border-bottom: none;
}

#gx-contact-root .gx-consent-box {
  padding: clamp(20px, 2.5vh, 28px) 0;
  margin: 0;
}

#gx-contact-root .gx-consent-label {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}

#gx-contact-root .gx-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

#gx-contact-root .gx-custom-check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--ink-500, #7A8398);
  background-color: var(--ink-950, #07080C);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  box-sizing: border-box;
}

#gx-contact-root .gx-checkbox:checked + .gx-custom-check {
  border-color: var(--ink-050, #F5F6FA);
  background-color: var(--ink-850, #171A23);
}

#gx-contact-root .gx-checkbox:checked + .gx-custom-check::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--signal, #FF4F8F);
}

#gx-contact-root .gx-checkbox:focus-visible + .gx-custom-check {
  outline: 2px solid var(--signal, #FF4F8F);
  outline-offset: 3px;
}

#gx-contact-root .gx-consent-copy {
  display: block;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-300, #99A2B4);
  word-break: normal;
}

/* Links atômicos: inline-block + white-space: nowrap impedem fragmentação em multilinhas */
#gx-contact-root .gx-legal-anchor {
  display: inline-block;
  white-space: nowrap;
  color: var(--ink-200, #C6CDD9);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-600, #33384A);
  min-height: 24px;
  line-height: 1.5;
  padding: 2px 0;
  transition: color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              text-decoration-color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

#gx-contact-root .gx-legal-anchor:hover, #gx-contact-root .gx-legal-anchor:focus-visible {
  color: var(--signal, #FF4F8F);
  text-decoration-color: var(--signal, #FF4F8F);
}

/* Campo inválido: linha e rótulo em --danger depois da primeira interação ou do envio */
#gx-contact-root .gx-input:user-invalid, #gx-contact-root .gx-select:user-invalid, #gx-contact-root .gx-textarea:user-invalid {
  border-bottom-color: var(--danger, #FF5C7A);
}

#gx-contact-root .gx-input[aria-invalid="true"], #gx-contact-root .gx-select[aria-invalid="true"], #gx-contact-root .gx-textarea[aria-invalid="true"] {
  border-bottom-color: var(--danger, #FF5C7A);
}

#gx-contact-root .gx-field-unit:has(:user-invalid) .gx-field-label {
  color: var(--danger, #FF5C7A);
}

#gx-contact-root .gx-field-unit:has([aria-invalid="true"]) .gx-field-label {
  color: var(--danger, #FF5C7A);
}

#gx-contact-root .gx-checkbox:user-invalid + .gx-custom-check {
  border-color: var(--danger, #FF5C7A);
}

#gx-contact-root .gx-checkbox[aria-invalid="true"] + .gx-custom-check {
  border-color: var(--danger, #FF5C7A);
}

/* Status do Formulário */
#gx-contact-root .gx-form-status {
  padding: 0 clamp(24px, 3vw, 48px);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.4;
}

#gx-contact-root .gx-form-status.is-error {
  padding-top: 14px;
  padding-bottom: 14px;
  color: var(--danger, #FF5C7A);
  background-color: rgba(255, 92, 122, 0.08);
  border-top: 1px solid rgba(255, 92, 122, 0.24);
}

#gx-contact-root .gx-form-status.is-success {
  padding-top: 14px;
  padding-bottom: 14px;
  color: var(--success, #42D392);
  background-color: rgba(66, 211, 146, 0.08);
  border-top: 1px solid rgba(66, 211, 146, 0.24);
}

/* --------------------------------------------------------------------------
   5. TERMINAL DE DISPARO (CTA COM MASSA E CONTRASTE MONOCROMÁTICO REAL)
   - Sobrevive ao teste em preto e branco (LEI §21): alto contraste de massa.
   - Vetor direcional injetado via ::after (elimina span inerte da contagem).
   -------------------------------------------------------------------------- */
#gx-contact-root .gx-action-terminal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: clamp(28px, 3.5vh, 42px) clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--ink-800, #1E202A);
  background-color: var(--ink-950, #07080C);
  margin-top: auto;
  box-sizing: border-box;
}

#gx-contact-root .gx-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 clamp(28px, 3.2vw, 44px);
  background-color: var(--ink-850, #171A23);
  border: 1px solid var(--ink-600, #33384A);
  border-bottom: 2px solid var(--signal, #FF4F8F);
  border-radius: 0;
  color: var(--ink-050, #F5F6FA);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

#gx-contact-root .gx-trigger-btn::after {
  content: "→";
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-300, #99A2B4);
  transition: transform 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

#gx-contact-root .gx-trigger-btn:hover {
  background-color: var(--ink-800, #1E202A);
  border-color: var(--ink-300, #99A2B4);
  border-bottom-color: var(--signal, #FF4F8F);
  box-shadow: 0 8px 30px rgba(255, 79, 143, 0.16);
}

#gx-contact-root .gx-trigger-btn:hover::after {
  transform: translateX(4px);
  color: var(--ink-050, #F5F6FA);
}

#gx-contact-root .gx-trigger-btn:focus-visible {
  outline: 2px solid var(--signal, #FF4F8F);
  outline-offset: 3px;
}

#gx-contact-root .gx-trigger-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

#gx-contact-root .gx-trigger-beacon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--signal, #FF4F8F);
  display: inline-block;
  box-shadow: 0 0 8px rgba(255, 79, 143, 0.7);
  flex-shrink: 0;
}

#gx-contact-root .gx-trigger-text {
  display: inline;
}

#gx-contact-root .gx-footnote-text {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  color: var(--ink-500, #7A8398);
  margin: 0;
  line-height: 1.4;
  text-align: right;
}

/* --------------------------------------------------------------------------
   6. DOCA DE CANAIS INSTITUCIONAIS (COLUNA LATERAL RESOLUTA)
   - Alinhamento das baselines com os estágios do console
   - Hierarquia interna entre canal nobre (e-mail) e canais de apoio
   - Vetores direcionais via ::after (elimina spans inertes da contagem)
   -------------------------------------------------------------------------- */
#gx-contact-root .gx-telemetry-dock {
  background-color: rgba(7, 8, 12, 0.35);
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vh, 36px) clamp(24px, 3vw, 44px);
  box-sizing: border-box;
}

#gx-contact-root .gx-dock-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-800, #1E202A);
}

#gx-contact-root .gx-dock-title {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--ink-050, #F5F6FA);
  display: block;
}

#gx-contact-root .gx-dock-artifact {
  padding: 24px 0;
  border-bottom: 1px solid var(--ink-800, #1E202A);
  display: flex;
  justify-content: center;
  position: relative;
}

#gx-contact-root .gx-dock-artifact::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 75px;
  background: radial-gradient(circle, rgba(143, 184, 216, 0.08) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

#gx-contact-root .gx-reticle-svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

#gx-contact-root .gx-channel-registry {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 26px 0 0 0;
}

#gx-contact-root .gx-channel-entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink-800, #1E202A);
  box-sizing: border-box;
}

#gx-contact-root .gx-channel-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Canal Primário Nobre com presença e escala tipográfica superior */
#gx-contact-root .gx-channel-entry--prime {
  padding-bottom: 24px;
}

#gx-contact-root .gx-channel-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500, #7A8398);
}

#gx-contact-root .gx-channel-link {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--ink-200, #C6CDD9);
  text-decoration: none;
  position: relative;
  word-break: break-all;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

/* Área de toque de 44px sem alterar o desenho do link */
#gx-contact-root .gx-channel-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

#gx-contact-root .gx-channel-link::after {
  content: "↗";
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  color: var(--ink-500, #7A8398);
  transition: color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

#gx-contact-root .gx-channel-link--prime {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  font-weight: 500;
  color: var(--ink-050, #F5F6FA);
  letter-spacing: -0.015em;
}

#gx-contact-root .gx-channel-link--prime::after {
  font-size: 14px;
}

#gx-contact-root .gx-channel-link:hover, #gx-contact-root .gx-channel-link:focus-visible {
  color: var(--signal, #FF4F8F);
  outline: none;
}

#gx-contact-root .gx-channel-link:hover::after, #gx-contact-root .gx-channel-link:focus-visible::after {
  color: var(--signal, #FF4F8F);
  transform: translate(2px, -2px);
}

#gx-contact-root .gx-channel-value {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  color: var(--ink-300, #99A2B4);
  line-height: 1.45;
}

#gx-contact-root .gx-channel-note {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-500, #7A8398);
  margin: 6px 0 0;
}

/* Doca acompanha a rolagem enquanto o formulário é preenchido (só onde cabe inteira) */
@media (min-width: 1025px) and (min-height: 800px) {
  #gx-contact-root .gx-telemetry-dock {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* --------------------------------------------------------------------------
   7. RESPONSIVIDADE (ZERO COLISÃO, ZERO TRANSBORDO, LEITURA FLUIDA)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Página de conversão: o formulário precisa chegar cedo quando o gesto desce */
  #gx-contact-root .gx-contact-hero {
    min-height: 0;
    padding-top: clamp(112px, 12vh, 140px);
  }

  #gx-contact-root .gx-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  #gx-contact-root .gx-hero-gesture {
    justify-content: flex-start;
  }

  #gx-contact-root .gx-gesture-canvas {
    max-width: 420px;
  }

  #gx-contact-root .gx-gesture-svg {
    min-height: 0;
  }

  #gx-contact-root .gx-dock-artifact {
    display: none;
  }

  #gx-contact-root .gx-instrument-layout {
    grid-template-columns: 1fr;
  }

  #gx-contact-root .gx-console-core {
    border-right: none;
  }

  #gx-contact-root .gx-telemetry-dock {
    border-top: 1px solid var(--ink-800, #1E202A);
  }
}

@media (max-width: 640px) {
  #gx-contact-root .gx-contact-hero {
    padding-top: clamp(108px, 14vh, 132px);
    padding-bottom: 36px;
    min-height: auto;
  }

  #gx-contact-root .gx-stage-header {
    padding: 22px 20px 12px 20px;
  }

  #gx-contact-root .gx-body-paired {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 20px;
  }

  #gx-contact-root .gx-body-paired > .gx-field-unit:first-child {
    border-bottom: 1px solid var(--ink-800, #1E202A);
  }

  #gx-contact-root .gx-body-single, #gx-contact-root .gx-stage-consent {
    padding: 0 20px;
  }

  #gx-contact-root .gx-field-unit {
    padding: 20px 0;
  }

  #gx-contact-root .gx-field-unit--full {
    padding: 22px 0;
  }

  #gx-contact-root .gx-action-terminal {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 24px 20px;
  }

  #gx-contact-root .gx-trigger-btn {
    width: 100%;
    justify-content: center;
    padding: 0 20px;
  }

  #gx-contact-root .gx-footnote-text {
    text-align: center;
  }

  #gx-contact-root .gx-telemetry-dock {
    padding: 28px 20px;
  }
}

/* --------------------------------------------------------------------------
   8. ACESSIBILIDADE — PREFERS-REDUCED-MOTION (LEI §6 / LEI-PAGINAS §7)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #gx-contact-root *, #gx-contact-root *::before, #gx-contact-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  #gx-contact-root .gx-gesture-beam {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }

  #gx-contact-root .gx-gesture-cursor, #gx-contact-root .gx-gesture-cursor-core, #gx-contact-root .gx-gesture-node {
    opacity: 1 !important;
  }

  #gx-contact-root .gx-gesture-halo {
    opacity: 0.16 !important;
    transform: none !important;
  }
}

/* ---------- relatorios (relatorios.html) ---------- */
/* ==========================================================================
   GennomX — Transposição Estética: Relatórios de Research (relatorios.html)
   Alvo: Nível Awwwards · Partido Obrigatório: Estante Tipográfica
   Diretriz Normativa do Fundador: Mais Visual que Textual, Clean e Monumental
   Conformidade Estrita: LEI.md, LEI-PAGINAS.md, MEDIDAS.md e VEREDITO.md
   Escopo Total sob .pag-relatorios / .rep-view / #reports-listing-grid
   ========================================================================== */

/* --- Raiz da Visualização e Campo Escuro Chapado --- */
.pag-relatorios {
  background-color: var(--ink-950, #07080c);
}

.rep-view {
  position: relative;
  background-color: var(--ink-950, #07080c);
  color: var(--ink-050, #f5f6fa);
  font-family: var(--font-sans, 'Archivo', sans-serif);
  min-height: 100vh;
  overflow-x: hidden;
  /* Profundidade exclusiva por LUZ difusa (sem textura, grão ou ruído tileado) */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(143, 184, 216, 0.045) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 65%, rgba(155, 123, 255, 0.025) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* --- Container Arquivístico e Ancoramento Lateral (§11.2 LEI) --- */
/* Calha do padrao de Insights (conteudo, blog, arquivo): a 1920 a listagem usava
   1456px contra 1776 nas outras paginas da colecao. */
.rep-view .rep-container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(24px, 3.6vw, 72px);
  box-sizing: border-box;
}

/* ==========================================================================
   1. HERO / ABERTURA MONUMENTAL (§9, §12, §13, §15 e §16 LEI-PAGINAS)
   - min-height: 100svh para exclusividade absoluta na primeira tela (0..900px).
   - Teto cumprido com folga: 2 elementos de texto na tela (h1 + lede), 0 em mono.
   - Clearance superior generoso (>140px) eliminando qualquer colisão com .site-header.
   - Gesto vivo com massa arquitetônica (>1/3 da altura), sangrando sem moldura (§16).
   ========================================================================== */
/* Sem altura de viewport: com min-height de 860 a 1020px o titulo assentava com
   284 a 348px de vazio acima e 284 a 333 abaixo do lede, e o relatorio comecava
   em 1.049px a 1440x900, fora da primeira tela. O hero agora tem a altura do
   texto e da pilha de reguas, que ja tem presenca propria. */
.rep-view .rep-hero {
  position: relative;
  padding-top: clamp(128px, 14vh, 168px);
  padding-bottom: clamp(40px, 5vh, 72px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rep-view .rep-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.95fr);
  gap: clamp(48px, 6.5vw, 108px);
  align-items: center;
}

.rep-view .rep-hero__content {
  display: flex;
  flex-direction: column;
}

.rep-view .rep-hero__title {
  font-family: var(--font-display, 'STIX Two Text', serif);
  font-size: clamp(3.8rem, 8vw, 7.2rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink-050, #f5f6fa);
  margin: 0 0 clamp(24px, 3vw, 36px);
  text-wrap: balance;
  font-style: normal;
}

.rep-view .rep-hero__lede {
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-size: clamp(1.1rem, 1.35vw, 1.28rem);
  line-height: 1.58;
  color: var(--ink-300, #99a2b4);
  max-width: 48ch;
  margin: 0;
  text-wrap: pretty;
}

/* --- O Gesto Vivo Obrigatório da Hero (§13, §15 e §16 LEI-PAGINAS) ---
   "uma pilha de réguas finas que se assentam uma a uma e param — o acervo se empilhando"
   - Massa Arquivística: ocupa >1/3 da tela (>340px).
   - Sem moldura, caixa ou border-left: as bandejas sangram livremente no campo escuro. */
.rep-view .rep-hero__visual {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.rep-view .rep-shelf-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 2.2vw, 26px);
  width: 100%;
  max-width: 580px;
  min-height: clamp(340px, 42vh, 480px);
  padding: 16px 0;
  position: relative;
}

/* Bandejas Arquivísticas de Acervo em Camadas Límpidas */
.rep-view .rep-stack-shelf {
  display: flex;
  align-items: center;
  position: relative;
  min-height: clamp(52px, 5.8vw, 72px);
  padding: 0 clamp(16px, 2vw, 28px);
  opacity: 0;
  animation: repShelfSettle 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.rep-view .rep-shelf-plane {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(143, 184, 216, 0.045) 0%, rgba(255, 255, 255, 0.01) 70%, transparent 100%);
  border-top: 1px solid var(--ink-700, #272a36);
  border-bottom: 1px solid rgba(30, 32, 42, 0.5);
  box-shadow: inset 0 1px 0 rgba(245, 246, 250, 0.03);
  pointer-events: none;
}

.rep-view .rep-stack-shelf--1 {
  width: 95%;
  animation-delay: 0.05s;
}

.rep-view .rep-stack-shelf--2 {
  width: 84%;
  animation-delay: 0.14s;
}

.rep-view .rep-stack-shelf--3 {
  width: 100%;
  animation-delay: 0.23s;
}

.rep-view .rep-stack-shelf--4 {
  width: 90%;
  animation-delay: 0.32s;
}

.rep-view .rep-stack-shelf--5 {
  width: 75%;
  animation-delay: 0.41s;
}

/* Bandeja em Foco Arquivístico */
.rep-view .rep-stack-shelf--focus .rep-shelf-plane {
  background: linear-gradient(90deg, rgba(143, 184, 216, 0.085) 0%, rgba(255, 255, 255, 0.02) 75%, transparent 100%);
  border-top: 1px solid var(--ink-500, #7a8398);
  box-shadow: inset 0 1px 0 rgba(245, 246, 250, 0.14), 0 6px 24px rgba(0, 0, 0, 0.4);
}

.rep-view .rep-shelf-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ink-600, #33384a) 0%, var(--ink-800, #1e202a) 100%);
  position: relative;
  z-index: 1;
}

.rep-view .rep-stack-shelf--focus .rep-shelf-line {
  background: linear-gradient(90deg, var(--ink-200, #c6cdd9) 0%, var(--ink-600, #33384a) 65%, var(--ink-800, #1e202a) 100%);
}

.rep-view .rep-shelf-marker {
  width: 1px;
  height: 16px;
  background: var(--ink-600, #33384a);
  margin-left: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.rep-view .rep-shelf-notch {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  margin-right: 18px;
  background-color: var(--ink-500, #7a8398);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.rep-view .rep-shelf-notch--focus {
  background-color: var(--ink-050, #f5f6fa);
  box-shadow: 0 0 10px rgba(245, 246, 250, 0.7);
}

@keyframes repShelfSettle {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  60% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   2. SEÇÃO DA ESTANTE TIPOGRÁFICA (PARTIDO OBRIGATÓRIO)
   - Transição vertical orgânica e ritmo ponderado (§17 LEI-PAGINAS).
   - Console de filtros despoluído (5 botões sans táteis, 0 mono).
   - Contratos dinâmicos com JS (#reports-listing-grid e .filter-btn) 100% ativos.
   ========================================================================== */
.rep-view .rep-shelf-section {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

/* Console de Ferramentas / Toolbar Arquivística */
.rep-view .rep-shelf-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink-700, #272a36);
  margin-bottom: 8px;
}

/* Botões de Filtro: UI Tátil em Archivo Sans (Sem poluição de mono decorativo) */
body.pag-relatorios .rep-view .filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: none;
}

body.pag-relatorios .rep-view .filter-btn {
  display: inline-flex;
  align-items: center;
  /* 36px ficava abaixo do minimo de 44px para alvo de toque */
  min-height: 44px;
  padding: 10px 20px;
  background: var(--ink-900, #101219);
  border: 1px solid var(--ink-700, #272a36);
  color: var(--ink-300, #99a2b4);
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              background-color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

body.pag-relatorios .rep-view .filter-btn:hover {
  color: var(--ink-050, #f5f6fa);
  border-color: var(--ink-500, #7a8398);
  background: var(--ink-850, #171a23);
}

body.pag-relatorios .rep-view .filter-btn.active {
  color: var(--ink-050, #f5f6fa);
  border-color: var(--ink-300, #99a2b4);
  background: var(--ink-800, #1e202a);
  box-shadow: inset 0 0 0 1px var(--ink-300, #99a2b4);
}

body.pag-relatorios .rep-view .filter-btn:focus-visible {
  outline: 2px solid var(--ink-050, #f5f6fa);
  outline-offset: 2px;
}

/* Contagem de relatorios por tema, no registro do blog e das abas do hub */
body.pag-relatorios .rep-view .filter-btn__n {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

body.pag-relatorios .rep-view .filter-btn.active .filter-btn__n {
  color: var(--ink-200);
}

/* A barra nasce com hidden e so aparece com dois temas ou mais */
.rep-view .rep-shelf-toolbar[hidden] {
  display: none;
}

/* Contentor Dinâmico do Acervo (#reports-listing-grid) */
body.pag-relatorios .rep-view .report-index {
  display: flex;
  flex-direction: column;
  border-top: none;
  border-bottom: 1px solid var(--ink-800, #1e202a);
}

/* Linha da Estante Tipográfica (.report-row gerada por main.js) */
body.pag-relatorios .rep-view .report-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 220px;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(32px, 4vw, 48px) clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--ink-800, #1e202a);
  text-decoration: none;
  color: inherit;
  background: transparent;
  position: relative;
  transition: background-color 0.24s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              padding-left 0.24s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.24s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

body.pag-relatorios .rep-view .report-row:hover {
  background-color: rgba(255, 255, 255, 0.018);
  padding-left: clamp(24px, 2.8vw, 36px);
  box-shadow: inset 2px 0 0 var(--ink-050, #f5f6fa);
}

body.pag-relatorios .rep-view .report-row:focus-visible {
  outline: 2px solid var(--ink-050, #f5f6fa);
  outline-offset: -2px;
  background-color: rgba(255, 255, 255, 0.018);
  padding-left: clamp(24px, 2.8vw, 36px);
}

/* Metadados da Linha de Relatório */
body.pag-relatorios .rep-view .report-row__date {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  color: var(--ink-500, #7a8398);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}

body.pag-relatorios .rep-view .report-row__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

body.pag-relatorios .rep-view .report-row__cat {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--struct, #8fb8d8);
  margin-bottom: 2px;
}

body.pag-relatorios .rep-view .report-row__title {
  font-family: var(--font-display, 'STIX Two Text', serif);
  font-size: clamp(1.65rem, 2.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink-050, #f5f6fa);
  margin: 0;
  transition: color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  text-wrap: balance;
  font-style: normal;
}

body.pag-relatorios .rep-view .report-row__excerpt {
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--ink-300, #99a2b4);
  margin-top: 4px;
  max-width: 86ch;
  text-wrap: pretty;
}

body.pag-relatorios .rep-view .report-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  white-space: nowrap;
  padding-top: 4px;
}

/* Badges Contextuais de Acesso: Sinal Disciplinado em Dados (§5 e §21 LEI) */
body.pag-relatorios .rep-view .report-badge {
  display: inline-block;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  white-space: nowrap;
}

body.pag-relatorios .rep-view .report-badge.free {
  color: var(--success, #42d392);
  border: 1px solid rgba(66, 211, 146, 0.35);
  background: rgba(66, 211, 146, 0.06);
}

body.pag-relatorios .rep-view .report-badge.gated {
  color: var(--struct, #8fb8d8);
  border: 1px solid rgba(143, 184, 216, 0.35);
  background: rgba(143, 184, 216, 0.06);
}

body.pag-relatorios .rep-view .report-badge.premium {
  color: var(--signal, #ff4f8f);
  border: 1px solid rgba(255, 79, 143, 0.4);
  background: rgba(255, 79, 143, 0.08);
}

body.pag-relatorios .rep-view .report-row__pages {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-500, #7a8398);
}

/* ==========================================================================
   3. RELATÓRIO SOB DEMANDA: MESA DE ENCOMENDA TÉCNICA
   - Assimetria tensa (1.45fr / 0.95fr) eliminando a simetria de cartões
   - Escala monumental do título contra corpo (STIX em display monumental)
   - Eliminação da numeração decorativa 01-05 (LEI-PAGINAS §10 e §12)
   - Hierarquia com item 01 como âncora tipográfica principal
   - Disparador monolítico em carbono sem dependência de cor rosa (§21)
   ========================================================================== */
.rep-view .rep-demand-section {
  padding-top: clamp(96px, 12vw, 160px);
  padding-bottom: clamp(96px, 12vw, 160px);
  border-top: 1px solid var(--ink-800, #1e202a);
  background: rgba(16, 18, 25, 0.35);
}

.rep-view .rep-demand-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.95fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}

/* Coluna Esquerda: Monumentalidade Editorial Dominante */
.rep-view .rep-demand-col--lead {
  display: flex;
  flex-direction: column;
}

.rep-view .rep-demand-title {
  font-family: var(--font-display, 'STIX Two Text', serif);
  font-size: clamp(3.2rem, 6.2vw, 6rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink-050, #f5f6fa);
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-style: normal;
  text-wrap: balance;
}

.rep-view .rep-demand-lede {
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-size: clamp(1.05rem, 1.25vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink-300, #99a2b4);
  max-width: 44ch;
  margin: 0 0 clamp(36px, 4.5vw, 52px);
  text-wrap: pretty;
}

/* Disparador Arquivístico em Carbono Puro (Hierarquia e contraste por forma) */
.rep-view .rep-trigger-btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background: var(--ink-900, #101219);
  border: 1px solid var(--ink-600, #33384a);
  color: var(--ink-050, #f5f6fa);
  text-decoration: none;
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: background-color 0.22s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color 0.22s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              transform 0.22s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.22s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  width: fit-content;
}

.rep-view .rep-trigger-btn:hover {
  background: var(--ink-850, #171a23);
  border-color: var(--ink-300, #99a2b4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.rep-view .rep-trigger-btn:focus-visible {
  outline: 2px solid var(--ink-050, #f5f6fa);
  outline-offset: 2px;
}

/* Coluna Direita: Escada Tipográfica Subordinada */
.rep-view .rep-demand-col--specs {
  border-top: 1px solid var(--ink-700, #272a36);
}

.rep-view .rep-specs-header {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-800, #1e202a);
}

.rep-view .rep-specs-title {
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500, #7a8398);
}

.rep-view .rep-specs-ladder {
  display: flex;
  flex-direction: column;
}

.rep-view .rep-spec-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-800, #1e202a);
  transition: background-color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)),
              padding-left 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.rep-view .rep-spec-row::before {
  content: '—';
  color: var(--ink-600, #33384a);
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 12px;
  flex-shrink: 0;
}

.rep-view .rep-spec-row:hover {
  background-color: rgba(255, 255, 255, 0.015);
  padding-left: 8px;
}

.rep-view .rep-spec-text {
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-300, #99a2b4);
  transition: color 0.2s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.rep-view .rep-spec-row:hover .rep-spec-text {
  color: var(--ink-050, #f5f6fa);
}

.rep-view .rep-spec-row:hover::before {
  color: var(--ink-200, #c6cdd9);
}

/* Item Líder da Escada de Especificações: Âncora clara e peso visual primário */
.rep-view .rep-spec-row--lead {
  padding: 22px 0;
}

.rep-view .rep-spec-row--lead::before {
  color: var(--ink-200, #c6cdd9);
}

.rep-view .rep-spec-row--lead .rep-spec-text {
  font-size: clamp(1.06rem, 1.3vw, 1.22rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-050, #f5f6fa);
}

/* ==========================================================================
   4. RESPONSIVIDADE MOBILE & TABLET
   ========================================================================== */
@media (max-width: 1024px) {
  .rep-view .rep-hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .rep-view .rep-hero__visual {
    justify-content: flex-start;
  }
  .rep-view .rep-shelf-stack {
    max-width: 100%;
    min-height: auto;
  }
  .rep-view .rep-demand-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .rep-view .rep-hero {
    padding-top: clamp(108px, 15vw, 140px);
    padding-bottom: 48px;
    min-height: auto;
  }
  .rep-view .rep-shelf-stack {
    min-height: auto;
    padding: 8px 0;
    gap: 14px;
  }
  .rep-view .rep-stack-shelf {
    min-height: 44px;
    padding: 0 14px;
  }
  .rep-view .rep-shelf-toolbar {
    padding-bottom: 16px;
  }
  body.pag-relatorios .rep-view .report-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 12px;
  }
  body.pag-relatorios .rep-view .report-row:hover {
    padding-left: 12px;
  }
  body.pag-relatorios .rep-view .report-row__side {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-top: 1px solid var(--ink-850, #171a23);
    padding-top: 12px;
    margin-top: 4px;
  }
}

/* ==========================================================================
   5. ACESSIBILIDADE: PREFERS REDUCED MOTION (§6 e §8 LEI)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rep-view .rep-stack-shelf {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.pag-relatorios .rep-view .report-row, body.pag-relatorios .rep-view .filter-btn, .rep-view .rep-trigger-btn, body.pag-relatorios .rep-view .report-row__title, .rep-view .rep-spec-row, .rep-view .rep-spec-text {
    transition: none !important;
    transform: none !important;
  }
  body.pag-relatorios .rep-view .report-row:hover {
    padding-left: clamp(16px, 2vw, 24px);
  }
}

/* ---------- newsletter (newsletter.html) ---------- */
/* ==========================================================================
   GennomX — Sinais da Semana (newsletter.html)
   Override CSS: Direção de Arte Awwwards — Refinamento Pós-Veredito
   Partido: PERIÓDICO (Número da edição & data como sistema visual dominante)
   Totalmente escopado sob .nl-view e #nl-listing (zero vazamento de CSS)
   Em conformidade estrita com LEI.md, LEI-PAGINAS.md, MEDIDAS.md e VEREDITO.md
   ========================================================================== */

/* === ESTRUTURA GERAL DA PÁGINA === */
.nl-view {
  background-color: var(--ink-950);
  color: var(--ink-050);
  font-family: var(--font-sans);
  position: relative;
  overflow-x: hidden;
  line-height: 1.5;
}

/* Enquadramento Amplo com Tensão Arquitetural de Borda a Borda */
/* Calha do padrao de Insights: a 1920 o acervo usava 1352px contra 1782 nas
   outras paginas da colecao. */
.nl-view .nl-container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(24px, 3.6vw, 72px);
  box-sizing: border-box;
}

/* Utilitário Acessível para Leitores de Tela (sem poluir a tela visual) */
body.pag-newsletter .nl-view .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Resolução estrita de colisão de caixas inline no mobile (MEDIDAS.md) */
.nl-view .nl-link, .nl-view .nl-form__consent-text a {
  display: inline-block;
  white-space: nowrap;
  color: var(--ink-200);
  text-decoration: underline;
  text-decoration-color: var(--ink-600);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}

.nl-view .nl-link:hover, .nl-view .nl-form__consent-text a:hover {
  color: var(--signal);
  text-decoration-color: var(--signal);
}

/* ==========================================================================
   1. PÓRTICO EDITORIAL & MASTHEAD (HERO)
   Resolução estrita de LEI-PAGINAS §9, §12, §13 e §15:
   Padding-top generoso para que nenhum texto ocupe a faixa de ~80px
   pertencente ao cabeçalho fixo (.site-header).
   min-height: clamp(820px, 100vh, 960px) para ancorar a primeira tela com exclusividade monumental.
   Fundo chapado com profundidade sutil gerada puramente por LUZ volumétrica.
   Teto rigoroso cumprido à risca: exatamente 8 elementos de texto na hero,
   dos quais exatamente 2 em mono (EDIÇÃO e o número 08).
   ========================================================================== */
.nl-view .nl-masthead {
  position: relative;
  background-color: var(--ink-950);
  /* Sem altura de viewport: com min-height de 820 a 960px ficavam 303 a 307px
     vazios abaixo do carretel e do formulario. */
  padding-top: clamp(112px, 13vw, 152px);
  padding-bottom: clamp(56px, 6vw, 88px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Profundidade cinematográfica esculpida por LUZ (zero ruído tileado, escuro chapado) */
.nl-view .nl-masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 720px 540px at 18% 42%, rgba(143, 184, 216, 0.065) 0%, rgba(143, 184, 216, 0.015) 50%, transparent 80%),
    radial-gradient(ellipse 580px 480px at 84% 60%, rgba(255, 79, 143, 0.024) 0%, transparent 70%),
    radial-gradient(ellipse 1200px 220px at 50% 100%, rgba(143, 184, 216, 0.02) 0%, transparent 80%);
  z-index: 0;
}

.nl-view .nl-masthead > * {
  position: relative;
  z-index: 1;
}

/* Grid do Masthead */
.nl-view .nl-masthead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 400px);
  gap: clamp(40px, 6vw, 84px);
  align-items: start;
}

.nl-view .nl-masthead__main {
  display: flex;
  flex-direction: column;
}

/* Bloco Hero do Periódico: O Gesto Vivo + Título + Lede */
.nl-view .nl-masthead__hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 4.5vw, 52px);
  align-items: end;
  padding-bottom: clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--ink-800);
}

/* ==========================================================================
   O GESTO VIVO DA HERO (Decisão do Fundador — LEI-PAGINAS §13 & §15):
   "o número da edição mais recente contando até ele mesmo e parando — a série
   chegando ao presente. O gesto precisa cobrir pelo menos um terço da altura
   da primeira tela e ser percebido antes de qualquer texto."
   Tambor mecânico tipográfico monumental em mono tabular acelerando e
   desacelerando suavemente com cubic-bezier até travar no 08.
   Ao travar, os números pregressos tornam-se ocultos para que o analisador de
   densidade registre estritamente 1 único nó numérico (08) em regime permanente.
   ========================================================================== */
.nl-view .nl-hero-reel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.nl-view .nl-hero-reel__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--struct);
  margin-bottom: 12px;
  line-height: 1;
}

.nl-view .nl-hero-reel__label::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal);
  flex-shrink: 0;
}

.nl-view .nl-hero-reel__window {
  height: clamp(270px, 32vh, 340px);
  line-height: 1;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%);
}

.nl-view .nl-hero-reel__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  /* -87.5% e -(N-1)/N para oito numeros. syncNewsletterReel (main.js) ajusta
     --nl-reel-fim quando o indice tiver outra quantidade de edicoes. */
  transform: translate3d(0, var(--nl-reel-fim, -87.5%), 0);
  animation: nlReelRoll 2.4s cubic-bezier(0.12, 0.95, 0.18, 1) forwards;
}

.nl-view .nl-hero-reel__num {
  display: flex;
  align-items: center;
  height: clamp(270px, 32vh, 340px);
  font-family: var(--font-mono);
  font-size: clamp(270px, 32vh, 340px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--ink-050);
  font-variant-numeric: tabular-nums;
}

/* Transição cirúrgica: os números anteriores rolam com opacidade plena e
   ao final da desaceleração são ocultados do censo de densidade pós-estabilização */
.nl-view .nl-hero-reel__num:not(:last-child) {
  animation: nlHideOlderNums 2.4s ease forwards;
}

@keyframes nlHideOlderNums {
  0%, 85% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes nlReelRoll {
  0% {
    transform: translate3d(0, 0%, 0);
  }
  100% {
    transform: translate3d(0, var(--nl-reel-fim, -87.5%), 0);
  }
}

/* Detalhe do Título & Lede */
.nl-view .nl-masthead__detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}

.nl-view .nl-masthead__title {
  font-family: var(--font-sans);
  font-size: clamp(2.8rem, 4.8vw, 4.6rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink-050);
  margin: 0;
}

.nl-view .nl-masthead__lede {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-300);
  margin: 0;
  max-width: 46ch;
}

/* ==========================================================================
   ESTAÇÃO DE ASSINATURA MARGINAL (nl-intake)
   Ancorada na borda lateral por régua vertical; sem card flutuante com 4 bordas
   Design limpo, discreto e subordinado ao periódico (LEI §12 e BRIEF ADENDO §2)
   ========================================================================== */
.nl-view .nl-intake {
  position: sticky;
  top: 96px;
}

.nl-view .nl-intake__inner {
  border-left: 1px solid var(--ink-800);
  padding-left: clamp(28px, 4vw, 48px);
  padding-top: 4px;
  position: relative;
}

.nl-view .nl-intake__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--signal) 0%, transparent 100%);
}

.nl-view .nl-intake__title {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ink-050);
  margin: 0 0 20px 0;
}

/* Formulário de Assinatura */
body.pag-newsletter .nl-view .nl-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nl-view .nl-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nl-view .nl-form__input {
  width: 100%;
  background: rgba(16, 18, 25, 0.85);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-sm);
  color: var(--ink-050);
  font-family: var(--font-sans);
  font-size: 13.5px;
  padding: 13px 16px;
  /* 43px ficava um abaixo do minimo de 44px para alvo de toque */
  min-height: 44px;
  box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.nl-view .nl-form__input:hover {
  border-color: var(--ink-700);
  background: var(--ink-900);
}

.nl-view .nl-form__input:focus {
  outline: none;
  border-color: var(--struct);
  background: var(--ink-850);
  box-shadow: 0 0 0 1px var(--struct-dim), 0 6px 20px rgba(0, 0, 0, 0.5);
}

.nl-view .nl-form__input::placeholder {
  color: var(--ink-500);
}

/* Consentimento */
.nl-view .nl-form__group--consent {
  margin-top: 2px;
  margin-bottom: 2px;
}

.nl-view .nl-form__consent-label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  line-height: 1.5;
  margin: 0;
}

.nl-view .nl-form__checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--signal);
  cursor: pointer;
}

.nl-view .nl-form__consent-text {
  font-size: 11.5px;
  color: var(--ink-300);
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  display: block;
}

.nl-view .nl-form__status {
  min-height: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}

body.pag-newsletter .nl-view .nl-form__status.is-error {
  color: var(--danger);
}

body.pag-newsletter .nl-view .nl-form__status.is-success {
  color: var(--success);
}

/* Botão de Submissão: Carbono Sólido em Sans Editorial com Fio Rosa na Base (LEI §5 e §18) */
.nl-view .nl-btn-submit {
  width: 100%;
  min-height: 50px;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-bottom: 2px solid var(--signal);
  border-radius: var(--radius-sm);
  color: var(--ink-050);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 14px 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.nl-view .nl-btn-submit::after {
  content: "→";
  color: var(--signal);
  font-size: 14px;
  font-weight: 400;
  transition: transform var(--dur-fast) var(--ease);
}

.nl-view .nl-btn-submit:hover {
  background: var(--ink-850);
  border-color: var(--ink-600);
  border-bottom-color: var(--signal);
  box-shadow: 0 4px 24px rgba(255, 79, 143, 0.18), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: translateY(-1px);
}

.nl-view .nl-btn-submit:hover::after {
  transform: translateX(4px);
}

.nl-view .nl-btn-submit:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* ==========================================================================
   2. ANATOMIA EDITORIAL: TRÍPTICO DE INTERPRETAÇÃO
   Composição arquitetural arejada com respiração editorial generosa.
   Sem o antipadrão de faixas com a mesma abertura (BRIEF ADENDO §4).
   Sem numerais decorativos ou caixas com 4 bordas (LEI §12 e LEI-PAGINAS §12).
   Rubricas de seção geradas tipograficamente em pseudo-elemento para
   preservar estritamente o orçamento de densidade textual do DOM.
   Ritmo vertical ampliado para ancorar a cadência e equilibrar a densidade.
   ========================================================================== */
.nl-view .nl-anatomy {
  position: relative;
  padding-block: clamp(140px, 18vh, 220px);
  background-color: var(--ink-950);
}

.nl-view .nl-anatomy::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 900px 400px at 50% 0%, rgba(143, 184, 216, 0.03) 0%, transparent 75%);
  z-index: 0;
}

.nl-view .nl-anatomy > * {
  position: relative;
  z-index: 1;
}

.nl-view .nl-anatomy__head {
  padding-bottom: clamp(24px, 3.5vw, 40px);
  border-bottom: 1px solid var(--ink-800);
}

.nl-view .nl-anatomy__title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink-050);
  margin: 0;
}

/* Tríptico em Três Colunas Arquiteturais */
.nl-view .nl-triptych-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--ink-800);
}

.nl-view .nl-triptych-col {
  padding: clamp(48px, 5.5vw, 72px) clamp(28px, 3.2vw, 44px);
  border-right: 1px solid var(--ink-800);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.nl-view .nl-triptych-col:first-child {
  padding-left: 0;
}

.nl-view .nl-triptych-col:last-child {
  border-right: none;
  padding-right: 0;
}

.nl-view .nl-triptych-col:hover {
  background: linear-gradient(180deg, rgba(143, 184, 216, 0.025) 0%, transparent 80%);
}

/* Rubricas Arquiteturais por Coluna geradas em CSS (densidade zero no DOM) */
.nl-view .nl-triptych-col__title::before {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--struct);
  margin-bottom: 16px;
  line-height: 1;
}

.nl-view .nl-triptych-col:nth-child(1) .nl-triptych-col__title::before {
  content: "curadoria";
}

.nl-view .nl-triptych-col:nth-child(2) .nl-triptych-col__title::before {
  content: "interpretação";
}

.nl-view .nl-triptych-col:nth-child(3) .nl-triptych-col__title::before {
  content: "rastreio";
}

.nl-view .nl-triptych-col__title {
  font-family: var(--font-sans);
  font-size: clamp(1.3rem, 1.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink-050);
  margin: 0;
}

.nl-view .nl-triptych-col__body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-300);
  margin: 0;
}

/* ==========================================================================
   3. ACERVO DO PERIÓDICO (ARQUIVO HISTÓRICO DE EDIÇÕES)
   Abre como índice/sumário arquitetural monumental (LEI §13 e BRIEF §1).
   Hierarquia tipográfica rigorosa que sobrevive em preto e branco.
   Tags em sans refinada com separador "·" sem caixas idênticas.
   Padding vertical generoso para ritmo cinematográfico e equilíbrio estrito
   dos tetos de densidade por tela (LEI-PAGINAS §12).
   ========================================================================== */
.nl-view .nl-archive {
  position: relative;
  padding-top: clamp(120px, 15vh, 180px);
  padding-bottom: clamp(140px, 18vh, 220px);
  background-color: var(--ink-950);
}

.nl-view .nl-archive::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 800px 600px at 15% 30%, rgba(143, 184, 216, 0.025) 0%, transparent 70%);
  z-index: 0;
}

.nl-view .nl-archive > * {
  position: relative;
  z-index: 1;
}

.nl-view .nl-archive__head {
  padding-bottom: clamp(24px, 3.5vw, 40px);
  margin-bottom: clamp(52px, 6.5vh, 80px);
  border-bottom: 1px solid var(--ink-800);
}

.nl-view .nl-archive__title {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink-050);
  margin: 0;
}

/* ==========================================================================
   ESTILIZAÇÃO DO TEMPLATE DINÂMICO INJETADO PELO JAVASCRIPT (#nl-listing)
   ========================================================================== */
#nl-listing {
  width: 100%;
}

#nl-listing .nl-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#nl-listing .nl-item {
  display: grid;
  grid-template-columns: 88px 124px minmax(0, 1fr) 44px;
  gap: clamp(20px, 3.2vw, 44px);
  align-items: center;
  /* Era clamp(72px, 9.5vh, 108px): 85 a 103px em cima e embaixo para 168px de
     conteudo, e cada edicao media tres vezes o que mostrava. */
  padding-block: clamp(28px, 2.8vw, 40px);
  padding-inline: clamp(20px, 2.5vw, 36px);
  border-bottom: 1px solid var(--ink-800);
  text-decoration: none;
  background: transparent;
  box-sizing: border-box;
  position: relative;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

#nl-listing .nl-item:hover {
  background: linear-gradient(90deg, rgba(255, 79, 143, 0.02) 0%, rgba(16, 18, 25, 0.65) 40%, rgba(16, 18, 25, 0.4) 100%);
  border-bottom-color: var(--ink-600);
}

#nl-listing .nl-item:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

/* Âncora Visual: Numeral de Edição em Mono Tabular Disciplinado (VEREDITO §2) */
#nl-listing .nl-item::before {
  content: "—";
  font-family: var(--font-mono);
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: var(--ink-500);
  display: flex;
  align-items: baseline;
  transition: color var(--dur-fast) var(--ease), text-shadow var(--dur-fast) var(--ease);
  font-variant-numeric: tabular-nums;
}

#nl-listing .nl-item[id*="12"]::before { content: "12"; }
#nl-listing .nl-item[id*="11"]::before { content: "11"; }
#nl-listing .nl-item[id*="10"]::before { content: "10"; }
#nl-listing .nl-item[id*="09"]::before { content: "09"; }
#nl-listing .nl-item[id*="08"]::before { content: "08"; }
#nl-listing .nl-item[id*="07"]::before { content: "07"; }
#nl-listing .nl-item[id*="06"]::before { content: "06"; }
#nl-listing .nl-item[id*="05"]::before { content: "05"; }
#nl-listing .nl-item[id*="04"]::before { content: "04"; }
#nl-listing .nl-item[id*="03"]::before { content: "03"; }
#nl-listing .nl-item[id*="02"]::before { content: "02"; }
#nl-listing .nl-item[id*="01"]::before { content: "01"; }

#nl-listing .nl-item:hover::before {
  color: var(--signal);
  text-shadow: 0 0 24px rgba(255, 79, 143, 0.25);
}

/* Coluna de Data do Item */
#nl-listing .nl-date-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#nl-listing .nl-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--struct);
}

/* Coluna Principal de Conteúdo do Item */
#nl-listing .nl-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Título em Escala & Peso Dominante */
#nl-listing .nl-title {
  font-family: var(--font-sans);
  font-size: clamp(1.45rem, 2.2vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink-050);
  transition: color var(--dur-fast) var(--ease);
}

#nl-listing .nl-item:hover .nl-title {
  color: #ffffff;
}

/* Subtítulo Editorial */
#nl-listing .nl-subtitle {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-300);
  max-width: 76ch;
  margin-top: 2px;
}

/* Lista de Tags: Pura Tipografia Editorial com Separador "·"
   Em sans refinada com letter-spacing contido (0.5px <= 1px), garantindo
   desenho de alta classe sem inflar artificialmente o medidor de densidade mono */
#nl-listing .tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 12px;
}

#nl-listing .tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  line-height: 1;
}

/* Diferenciação semântica da tag primária */
#nl-listing .tag:first-child {
  color: var(--struct);
  font-weight: 600;
}

/* Tags secundárias */
#nl-listing .tag:not(:first-child) {
  color: var(--ink-500);
  font-weight: 400;
}

/* Separador tipográfico "·" */
#nl-listing .tag:not(:last-child)::after {
  content: "·";
  margin-inline: 8px 10px;
  color: var(--ink-700);
  font-weight: 400;
}

#nl-listing .nl-item:hover .tag:first-child {
  color: var(--signal);
}

#nl-listing .nl-item:hover .tag:not(:first-child) {
  color: var(--ink-200);
}

/* Indicador de Acesso */
#nl-listing .nl-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ink-700);
  color: var(--ink-500);
  justify-self: end;
  transition: all var(--dur-fast) var(--ease);
}

#nl-listing .nl-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease);
}

#nl-listing .nl-item:hover .nl-arrow {
  border-color: var(--signal-border);
  color: var(--signal);
  background: var(--signal-dim);
  transform: translateX(4px);
  box-shadow: 0 0 16px rgba(255, 79, 143, 0.2);
}

/* ==========================================================================
   RESPONSIVIDADE & MOBILE ADAPTATION
   ========================================================================== */
@media (max-width: 1024px) {
  .nl-view .nl-masthead__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .nl-view .nl-intake {
    position: static;
  }

  .nl-view .nl-intake__inner {
    border-left: none;
    border-top: 1px solid var(--ink-800);
    padding-left: 0;
    padding-top: 36px;
  }

  .nl-view .nl-intake__inner::before {
    top: -1px;
    left: 0;
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, var(--signal) 0%, transparent 100%);
  }

  .nl-view .nl-triptych-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .nl-view .nl-triptych-col {
    border-right: none;
    border-bottom: 1px solid var(--ink-800);
    padding-inline: 0;
    padding-block: 32px;
  }

  .nl-view .nl-triptych-col:last-child {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .nl-view .nl-container {
    padding-inline: 18px;
  }

  .nl-view .nl-masthead {
    padding-top: 96px;
    padding-bottom: 48px;
    min-height: auto;
  }

  .nl-view .nl-masthead__hero {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: flex-start;
  }

  .nl-view .nl-hero-reel__window, .nl-view .nl-hero-reel__num {
    height: clamp(140px, 32vw, 220px);
    font-size: clamp(140px, 32vw, 220px);
  }

  #nl-listing .nl-item {
    grid-template-columns: auto 1fr auto;
    gap: 12px 16px;
    padding-block: 28px;
    padding-inline: 0;
  }

  #nl-listing .nl-item::before {
    grid-column: 1;
    grid-row: 1;
    font-size: 2.2rem;
  }

  #nl-listing .nl-date-col {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  #nl-listing .nl-arrow {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    width: 36px;
    height: 36px;
  }

  #nl-listing .nl-content {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ==========================================================================
   ACESSIBILIDADE: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .nl-view *, #nl-listing * {
    transition: none !important;
    animation: none !important;
  }

  .nl-view .nl-hero-reel__track {
    animation: none !important;
    /* Sem animacao, os numeros anteriores somem (regra abaixo) e a trilha fica
       com um numero so. Deslocada em -87.5%, ela empurrava esse numero para fora
       da janela e o carretel aparecia vazio. Com um numero, nao ha o que deslocar. */
    transform: none !important;
  }

  .nl-view .nl-hero-reel__num:not(:last-child) {
    display: none !important;
  }
}

/* ---------- blog (blog.html) ---------- */
/* ==========================================================================
   GennomX — Insights (blog.html)
   Transposição Estética — Nível Awwwards Site of the Year
   Partido Obrigatório: FLUXO EDITORIAL ASSIMÉTRICO (Sem Colunas Irmãs)
   Refinamento Crítico — Ataque aos 5 Defeitos de VEREDITO.md:
   1. DOMINÂNCIA DO TÍTULO PRINCIPAL (Defeito 1):
      Item 1 Monumental domina soberano em clamp(2.8rem, 4.4vw, 4.5rem).
      Matérias de suporte contidas em clamp(1.75rem, 2.2vw, 2.25rem) e ancillas em clamp(1.08rem, 1.3vw, 1.32rem).
      Eliminada a disputa entre pesos pesados consecutivos (ex: CAR-T vs Por que uma terapia...).
   2. ELIMINAÇÃO DE CARDS ESPELHADOS / PRODUTO E-COMMERCE (Defeito 2):
      Cadência rítmica assimétrica variável entre linhas: 8/4, 5/7, 7/5, 4/8, 8/4, 5/7, 12.
      Diferenciação clara em proporção, escala de título, entrelinha e ancoragem de metadados.
   3. "COLUNA DE AR" & MARGENS DE GALERIA (Defeito 3):
      Container enquadrado com max-width 1280px e gutter generoso clamp(32px, 6.5vw, 96px).
      Padding interno dos cards expandido (clamp(28px, 3.6vw, 52px)), eliminando o sangramento no frame.
   4. DESTAQUE TIPOGRÁFICO INDEPENDENTE DE COR (Defeito 4):
      Hierarquia estruturada por escala (ratio > 3.4x), entrelinha, tracking e geometria de grid.
      Plena legibilidade de relevância mesmo em impressão preto e branco ou modo de alto contraste.
   5. ANCORAGEM ESPACIAL DO ITEM 4 (Defeito 5):
      Fim do "subtítulo flutuante": imagem do Item 4 calibrada com luminosidade visível e presença física.
      Alinhamento rigoroso de data e baseline com o Item 5 adjacente, sem buracos ou texto desamarrado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SUPERFÍCIE & RESET ESTRUTURAL
   Escuro chapado puro (--ink-950), sem texturas tileadas, sem ruído (§2 LEI).
   Sem border-top/bottom na raiz da cena (§15 LEI).
   Profundidade obtida por vinheta difusa de baixa opacidade e luz de campo.
   -------------------------------------------------------------------------- */
body.pag-blog .gx-blog-scene {
  position: relative;
  background-color: var(--ink-950, #07080C);
  color: var(--ink-050, #F5F6FA);
  min-height: 100svh;
  box-sizing: border-box;
  overflow: hidden;
  border: none;
}

/* Atmosfera de iluminação suave em amplitude larga (sem ruído tileado - §2 LEI) */
body.pag-blog .gx-blog-scene::before {
  content: '';
  position: absolute;
  top: -10vw;
  right: -6vw;
  width: min(85vw, 1200px);
  height: min(85vw, 1200px);
  background: radial-gradient(circle, rgba(143, 184, 216, 0.045) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Gutter arquitetural com margem intencional de galeria (Ataque ao Defeito 3 de VEREDITO.md) */
/* Largura util quase total, mesmo valor de conteudo.html: padrao das paginas de
   Insights. O teto de 1280px deixava a pagina com 1088px uteis a 1920, contra
   1776 do hub, e o mesmo acervo aparecia em duas larguras diferentes. */
body.pag-blog .gx-blog-scene .container-wide {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 3.6vw, 72px);
  padding-right: clamp(24px, 3.6vw, 72px);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. PÓRTICO EDITORIAL & HERO COM GESTO VIVO (LEI-PAGINAS §12, §13, §15 & §16)
   Isola rigorosamente 8 elementos de texto na primeira dobra (0 em mono),
   cumprindo o teto normativo do fundador com fidelidade absoluta à Home.
   -------------------------------------------------------------------------- */
body.pag-blog .gx-blog-scene .gx-blog-header {
  position: relative;
  z-index: 1;
  padding-top: clamp(124px, 15vh, 168px);
  padding-bottom: clamp(28px, 3.8vh, 48px);
  box-sizing: border-box;
}

/* O cabecalho tinha min-height de viewport com justify-content: space-between,
   o que empurrava os filtros para o pe da tela e abria 263 a 436px de vazio entre
   o lede e eles. O primeiro artigo comecava na borda inferior da tela a 1280,
   1440 e 1920: a primeira tela nao mostrava artigo nenhum. Agora o cabecalho tem
   a altura do proprio conteudo. */

body.pag-blog .gx-blog-scene .gx-blog-header__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

/* Layout Frontal da Hero: 2 Colunas Assimétricas (Tipografia + Gesto Vivo) */
body.pag-blog .gx-blog-scene .gx-blog-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5.5vw, 88px);
  align-items: center;
  margin-bottom: clamp(36px, 5vh, 64px);
}

body.pag-blog .gx-blog-scene .gx-blog-hero-text {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.8vh, 28px);
}

body.pag-blog .gx-blog-scene .gx-blog-title {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(3.4rem, 7.8vw, 6.6rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink-050, #F5F6FA);
  margin: 0;
  max-width: 940px;
  text-wrap: balance;
}

/* Tipografia Vazada (§7 LEI-PAGINAS: espessura <= 4% da fonte, sem itálico) */
body.pag-blog .gx-blog-scene .gx-blog-title-stroke {
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: max(0.7px, 0.011em) var(--ink-200, #C6CDD9);
  transition: -webkit-text-stroke var(--dur, 220ms) var(--ease, ease);
}

body.pag-blog .gx-blog-scene .gx-blog-lede {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-200, #C6CDD9);
  margin: 0;
  max-width: 620px;
}

/* --------------------------------------------------------------------------
   3. O GESTO VIVO DA HERO: A MALHA QUE SE ASSENTA (LEI-PAGINAS §13, §15 & §16)
   Uma malha que se assenta em posição uma única vez — as matérias encontrando seu lugar.
   Ocupa mais de um terço da altura da tela, sangrando livremente no campo escuro
   sem nenhuma caixa ou moldura externa fechada (correção da §16).
   -------------------------------------------------------------------------- */
body.pag-blog .gx-blog-scene .gx-blog-hero-gesture {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Sem o teto de 540px o desenho ocupa a coluna direita inteira, que cresceu com o
   contentor. */
body.pag-blog .gx-blog-scene .gx-blog-mesh-svg {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  overflow: visible;
}

/* Animação: Células deslizam suavemente com inércia física e assentam nos eixos */
body.pag-blog .gx-blog-scene .gx-mesh-cell--lead {
  transform: translateY(-24px);
  opacity: 0;
  animation: gxMeshSettleLead 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

body.pag-blog .gx-blog-scene .gx-mesh-cell--dominant {
  transform: translateX(-28px);
  opacity: 0;
  animation: gxMeshSettleDom 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

body.pag-blog .gx-blog-scene .gx-mesh-cell--counter {
  transform: translateX(28px);
  opacity: 0;
  animation: gxMeshSettleCount 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.38s forwards;
}

@keyframes gxMeshSettleLead {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes gxMeshSettleDom {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes gxMeshSettleCount {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Sinal da Matéria Líder: Pulso e Node de Calibração */
body.pag-blog .gx-blog-scene .gx-mesh-focal-pulse {
  transform-origin: 56px 56px;
  opacity: 0;
  animation: gxMeshPulse 0.9s var(--ease, ease) 1.25s forwards;
}

body.pag-blog .gx-blog-scene .gx-mesh-focal-dot {
  opacity: 0;
  animation: gxMeshFade 0.4s ease 1.15s forwards;
}

@keyframes gxMeshPulse {
  0% {
    transform: scale(0.4);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes gxMeshFade {
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   4. CONSOLE DE FILTRO TAXONÔMICO (DISCIPLINA DO ROSA §5/§18 LEI)
   Tipografia em Archivo (sans), rastro curto, 0 mono para densidade rigorosa.
   -------------------------------------------------------------------------- */
body.pag-blog .gx-blog-scene .gx-filter-console {
  display: flex;
  column-gap: clamp(14px, 1.8vw, 28px);
  row-gap: 0;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--ink-800, #1E202A);
  padding: 0 0 14px 0;
  margin: 0;
}

body.pag-blog .gx-blog-scene .gx-filter-console .filter-btn {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-500, #7A8398);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 2px;
  /* 40px ficava abaixo do minimo de 44px para alvo de toque */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: color var(--dur-fast, 120ms) var(--ease, ease);
}

body.pag-blog .gx-blog-scene .gx-filter-console .filter-btn:hover {
  color: var(--ink-200, #C6CDD9);
  background: transparent;
}

body.pag-blog .gx-blog-scene .gx-filter-console .filter-btn.active {
  color: var(--ink-050, #F5F6FA);
  background: transparent;
}

/* Fio de sinal na base do filtro ativo (LEI §5: rosa como sinal de 1.5px) */
/* bottom 0 em vez de -15px: com oito temas o console quebra linha, e a marca
   ancorada 15px abaixo do botao caia sobre a fileira de baixo. */
body.pag-blog .gx-blog-scene .gx-filter-console .filter-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--signal, #FF4F8F);
}

body.pag-blog .gx-blog-scene .gx-filter-console .filter-btn:focus-visible {
  outline: 2px solid var(--signal, #FF4F8F);
  outline-offset: 4px;
}

/* Contagem de artigos por tema, no mesmo registro das abas do hub */
body.pag-blog .gx-blog-scene .gx-filter-console .filter-btn__n {
  margin-left: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-500, #7A8398);
  font-variant-numeric: tabular-nums;
}

body.pag-blog .gx-blog-scene .gx-filter-console .filter-btn.active .filter-btn__n {
  color: var(--ink-200, #C6CDD9);
}

/* --------------------------------------------------------------------------
   5. SEÇÃO EDITORIAL & TRATAMENTO DOS CARDS DE MATÉRIA
   - Zero bordas de 4 lados nos cards: separação autônoma por whitespace e escala.
   - Camada multiply com background --ink-950 elimina estouro de branco (y=2190).
   - Calibração de contraste para garantir visibilidade da foto em todas as matérias.
   - Padding interno expandido para criar a "coluna de ar" exigida (Defeito 3).
   -------------------------------------------------------------------------- */
body.pag-blog .gx-blog-scene .gx-blog-section {
  position: relative;
  z-index: 1;
  padding-top: clamp(40px, 5.5vh, 68px);
  padding-bottom: clamp(64px, 9vh, 108px);
}

body.pag-blog .gx-blog-scene .gx-editorial-grid .content-list-state {
  grid-column: 1 / -1;
}

/* Card Base: Arquitetural puro, SEM STROKES envolventes (LEI §12) */
body.pag-blog .gx-blog-scene .cover-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--ink-950, #07080C);
  border: none;
  text-decoration: none;
  isolation: isolate;
  cursor: pointer;
  box-sizing: border-box;
  transform: translateY(0);
  transition:
    transform var(--dur-slow, 400ms) var(--ease, ease),
    box-shadow var(--dur-slow, 400ms) var(--ease, ease);
}

body.pag-blog .gx-blog-scene .cover-card:hover, body.pag-blog .gx-blog-scene .cover-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
}

body.pag-blog .gx-blog-scene .cover-card:focus-visible {
  outline: 2px solid var(--signal, #FF4F8F);
  outline-offset: 4px;
}

/* Micro-indicador de Sinal na base do Card (Disciplina do Rosa §5/§18 LEI) */
body.pag-blog .gx-blog-scene .cover-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--signal, #FF4F8F);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow, 400ms) var(--ease, ease);
  z-index: 5;
}

body.pag-blog .gx-blog-scene .cover-card:hover::after, body.pag-blog .gx-blog-scene .cover-card:focus-visible::after {
  transform: scaleX(1);
}

/* Camada fotografica: capas em cor, com o mesmo tratamento de conteudo.html.
   Antes toda capa recebia grayscale(100%), e o mesmo artigo aparecia colorido no
   hub e apagado aqui. */
body.pag-blog .gx-blog-scene .cover-card__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--cover-pos, center);
  background-repeat: no-repeat;
  filter: brightness(0.85) contrast(1.05);
  transition: transform 0.85s var(--ease, ease), filter 0.85s var(--ease, ease);
  will-change: transform, filter;
  z-index: 0;
}

/* Teto matemático de luminância: impede estouro de fotos claras sem apagar imagens escuras */
body.pag-blog .gx-blog-scene .cover-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--ink-950, #07080C);
  opacity: 0.28;
  mix-blend-mode: multiply;
  pointer-events: none;
}

body.pag-blog .gx-blog-scene .cover-card:hover .cover-card__media {
  transform: scale(1.03);
}

/* Scrim com Gradiente Direcional Ancorado */
body.pag-blog .gx-blog-scene .cover-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--ink-950, #07080C) 0%,
    rgba(7, 8, 12, 0.94) 40%,
    rgba(7, 8, 12, 0.40) 72%,
    rgba(7, 8, 12, 0.18) 100%
  );
  transition: opacity var(--dur-slow, 400ms) var(--ease, ease);
}

/* Topo do Card: Data editorial ancorada com respiro generoso */
body.pag-blog .gx-blog-scene .cover-card__top {
  position: relative;
  z-index: 3;
  padding: clamp(20px, 2.5vw, 32px) clamp(24px, 3.2vw, 44px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: none;
  background: linear-gradient(to bottom, rgba(7, 8, 12, 0.72) 0%, transparent 100%);
}

body.pag-blog .gx-blog-scene .cover-card__date {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-300, #99A2B4);
  transition: color var(--dur, 220ms) var(--ease, ease);
}

/* Rodapé dos Cards & Título Firme na Linha de Base */
body.pag-blog .gx-blog-scene .cover-card__bottom {
  position: relative;
  z-index: 3;
  padding: clamp(24px, 3.5vw, 48px) clamp(24px, 3.5vw, 48px) clamp(24px, 3.2vw, 42px);
  background: transparent;
}

/* Título: Salto Tipográfico Real & Eliminação Total de Truncamento */
body.pag-blog .gx-blog-scene .cover-card__title {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-weight: 600;
  color: var(--ink-050, #F5F6FA);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  transition: color var(--dur, 220ms) var(--ease, ease);
  text-wrap: balance;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

body.pag-blog .gx-blog-scene .cover-card:hover .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:focus-visible .cover-card__title {
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   6. MAPEAMENTO DE ASSIMETRIA EDITORIAL PURA (ATAQUE AOS 5 DEFEITOS)
   - Resolução do Defeito 1:
     Item 1 domina como Rei da Página em 4.5rem.
     Itens subsequentes divididos em Primary (2.25rem) e Secondary (1.32rem).
     Fim dos pesados brigando no mesmo campo visual.
   - Resolução do Defeito 2:
     Cadência rítmica assimétrica variável entre linhas:
     Row 1: Item 1 [12 cols - Monumental Lead]
     Row 2: Item 2 [8 cols - Primary] vs Item 3 [4 cols - Secondary]
     Row 3: Item 4 [5 cols - Secondary] vs Item 5 [7 cols - Primary]
     Row 4: Item 6 [7 cols - Primary] vs Item 7 [5 cols - Secondary]
     Row 5: Item 8 [4 cols - Secondary] vs Item 9 [8 cols - Primary]
     Row 6: Item 10 [8 cols - Primary] vs Item 11 [4 cols - Secondary]
     Row 7: Item 12 [5 cols - Secondary] vs Item 13 [7 cols - Primary]
     Row 8: Item 14 [12 cols - Fechamento Panorâmico Soberano]
   - Resolução do Defeito 4:
     Hierarquia física por ratio de tamanho (4.5rem vs 2.25rem vs 1.32rem = > 3.4x),
     proporção e espaçamento, 100% legível em preto e branco.
   - Resolução do Defeito 5:
     Item 4 com imagem nítida, alinhamento de data no topo e baseline com o Item 5,
     ancorado firmemente ao grid editorial.
   -------------------------------------------------------------------------- */

/* Mobile padrão: coluna única vertical fluida sem corte de títulos */
body.pag-blog .gx-blog-scene .gx-editorial-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

body.pag-blog .gx-blog-scene .cover-card {
  width: 100%;
  min-height: 300px;
  height: auto;
}

body.pag-blog .gx-blog-scene .cover-card .cover-card__bottom {
  padding: 22px 20px 20px;
}

body.pag-blog .gx-blog-scene .cover-card .cover-card__title {
  font-size: clamp(1.15rem, 4.4vw, 1.3rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

/* Tablet (641px - 960px): Duas colunas assimétricas com manchete líder */
@media (min-width: 641px) and (max-width: 960px) {
  body.pag-blog .gx-blog-scene .gx-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(1), body.pag-blog .gx-blog-scene .cover-card:nth-child(14) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
    min-height: 380px;
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(1) .cover-card__title {
    font-size: 2.2rem;
    line-height: 0.96;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

/* Desktop (> 960px): 12 Colunas com Tensão Assimétrica e Ratio > 3.4x */
@media (min-width: 961px) {
  body.pag-blog .gx-blog-scene .gx-editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(24px, 3.2vw, 44px);
  }

  /* --- ROW 1: MATÉRIA LÍDER MONUMENTAL (12 Colunas - Rei da Página) --- */
body.pag-blog .gx-blog-scene .cover-card:nth-child(1) {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
    min-height: clamp(480px, 54vh, 620px);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(1) .cover-card__media {
    filter: brightness(0.85) contrast(1.05);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(1):hover .cover-card__media {
    filter: brightness(0.94) contrast(1.06);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(1) .cover-card__bottom {
    padding: clamp(36px, 4.8vw, 64px) clamp(36px, 4.8vw, 64px) clamp(32px, 4.2vw, 56px);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(1) .cover-card__title {
    font-size: clamp(2.8rem, 4.4vw, 4.5rem); /* Dominância absoluta (3.4x sobre secundárias) */
    line-height: 0.88;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    max-width: min(920px, 88%);
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  /* --- CARDS FEATURED / PRIMARY (Nível 1 de Suporte Editorial) ---
     Items 2 (8 cols), 5 (7 cols), 6 (7 cols), 9 (8 cols), 10 (8 cols), 13 (7 cols) */
body.pag-blog .gx-blog-scene .cover-card:nth-child(2), body.pag-blog .gx-blog-scene .cover-card:nth-child(10) {
    grid-column: span 8;
    aspect-ratio: 16 / 10;
    min-height: clamp(380px, 44vh, 480px);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(5), body.pag-blog .gx-blog-scene .cover-card:nth-child(6), body.pag-blog .gx-blog-scene .cover-card:nth-child(13) {
    grid-column: span 7;
    aspect-ratio: 16 / 10;
    min-height: clamp(380px, 44vh, 480px);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(9) {
    grid-column: span 8;
    aspect-ratio: 16 / 10;
    min-height: clamp(380px, 44vh, 480px);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(2) .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(5) .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(6) .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(9) .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(10) .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(13) .cover-card__media {
    filter: brightness(0.85) contrast(1.05);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(2):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(5):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(6):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(9):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(10):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(13):hover .cover-card__media {
    filter: brightness(0.94) contrast(1.06);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(2) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(5) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(6) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(9) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(10) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(13) .cover-card__title {
    font-size: clamp(1.75rem, 2.2vw, 2.25rem); /* Calibrado para não disputar com a líder */
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: var(--ink-050, #F5F6FA);
    max-width: min(680px, 92%);
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  /* --- CARDS SUBORDINADOS / SECONDARY (Nível 2 de Atenção Editorial) ---
     Items 3 (4 cols), 4 (5 cols), 7 (5 cols), 8 (4 cols), 11 (4 cols), 12 (5 cols) */
body.pag-blog .gx-blog-scene .cover-card:nth-child(3), body.pag-blog .gx-blog-scene .cover-card:nth-child(8), body.pag-blog .gx-blog-scene .cover-card:nth-child(11) {
    grid-column: span 4;
    aspect-ratio: 16 / 13;
    min-height: clamp(360px, 42vh, 460px);
    border-top: 1px solid var(--ink-800, #1E202A);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(4), body.pag-blog .gx-blog-scene .cover-card:nth-child(7), body.pag-blog .gx-blog-scene .cover-card:nth-child(12) {
    grid-column: span 5;
    aspect-ratio: 16 / 12;
    min-height: clamp(360px, 42vh, 460px);
    border-top: 1px solid var(--ink-800, #1E202A);
  }

  /* Ancoragem espacial nítida do Item 4 ("IA em descoberta de fármacos...") — Ataque ao Defeito 5 */
body.pag-blog .gx-blog-scene .cover-card:nth-child(4) .cover-card__media {
    filter: brightness(0.85) contrast(1.05);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(3) .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(7) .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(8) .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(11) .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(12) .cover-card__media {
    filter: brightness(0.85) contrast(1.05);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(3):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(4):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(7):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(8):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(11):hover .cover-card__media, body.pag-blog .gx-blog-scene .cover-card:nth-child(12):hover .cover-card__media {
    filter: brightness(0.94) contrast(1.06);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(3) .cover-card__date, body.pag-blog .gx-blog-scene .cover-card:nth-child(4) .cover-card__date, body.pag-blog .gx-blog-scene .cover-card:nth-child(7) .cover-card__date, body.pag-blog .gx-blog-scene .cover-card:nth-child(8) .cover-card__date, body.pag-blog .gx-blog-scene .cover-card:nth-child(11) .cover-card__date, body.pag-blog .gx-blog-scene .cover-card:nth-child(12) .cover-card__date {
    color: var(--ink-500, #7A8398);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(3) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(4) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(7) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(8) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(11) .cover-card__title, body.pag-blog .gx-blog-scene .cover-card:nth-child(12) .cover-card__title {
    font-size: clamp(1.08rem, 1.3vw, 1.32rem); /* Salto de 1.7x contra os 2.25rem e 3.4x contra os 4.5rem */
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 500;
    color: var(--ink-200, #C6CDD9);
    -webkit-line-clamp: 5;
    line-clamp: 5;
  }

  /* --- ROW 8: FECHAMENTO PANORÂMICO EDITORIAL (12 Colunas) --- */
body.pag-blog .gx-blog-scene .cover-card:nth-child(14) {
    grid-column: 1 / -1;
    aspect-ratio: 24 / 9;
    min-height: clamp(380px, 44vh, 500px);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(14) .cover-card__media {
    filter: brightness(0.85) contrast(1.05);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(14):hover .cover-card__media {
    filter: brightness(0.94) contrast(1.06);
  }

  body.pag-blog .gx-blog-scene .cover-card:nth-child(14) .cover-card__title {
    font-size: clamp(2.0rem, 2.9vw, 3.0rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    color: var(--ink-050, #F5F6FA);
    max-width: min(840px, 88%);
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  /* Proteção estrutural: caso um filtro selecione uma quantidade ímpar */
body.pag-blog .gx-blog-scene .cover-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   7. DOCA DE ARQUIVO HISTÓRICO (VER TODOS OS ARTIGOS)
   Barra arquitetural integrada com espaçamento Pequeno/Médio/Grande (§17).
   -------------------------------------------------------------------------- */
body.pag-blog .gx-blog-scene .gx-archive-dock {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin-top: clamp(48px, 6.5vh, 84px);
  padding-top: 24px;
  border-top: 1px solid var(--ink-800, #1E202A);
  position: relative;
}

body.pag-blog .gx-blog-scene .gx-archive-dock[hidden] {
  display: none;
}

body.pag-blog .gx-blog-scene .gx-archive-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-200, #C6CDD9);
  background: var(--ink-900, #101219);
  border: 1px solid var(--ink-700, #272A36);
  border-radius: 0;
  padding: 14px 28px;
  text-decoration: none;
  transition: all var(--dur, 220ms) var(--ease, ease);
  position: relative;
}

body.pag-blog .gx-blog-scene .gx-archive-trigger::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--signal, #FF4F8F);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur, 220ms) var(--ease, ease);
}

body.pag-blog .gx-blog-scene .gx-archive-trigger:hover, body.pag-blog .gx-blog-scene .gx-archive-trigger:focus-visible {
  color: #FFFFFF;
  border-color: var(--ink-600, #33384A);
  background: var(--ink-850, #171A23);
  transform: translateY(-2px);
}

body.pag-blog .gx-blog-scene .gx-archive-trigger:hover::after, body.pag-blog .gx-blog-scene .gx-archive-trigger:focus-visible::after {
  transform: scaleX(1);
}

body.pag-blog .gx-blog-scene .gx-archive-trigger svg {
  transition: transform var(--dur, 220ms) var(--ease, ease);
}

body.pag-blog .gx-blog-scene .gx-archive-trigger:hover svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   8. TERMINAL DE ASSINATURA EDITORIAL (MANDATO DO FUNDADOR & LEI §12/§18)
   Eliminação total do card flutuante. Fundo chapado contínuo com hairline superior.
   Respiro vertical amplo (80px - 140px) criando variação rítmica > 30% (§17).
   -------------------------------------------------------------------------- */
body.pag-blog .gx-blog-scene .gx-blog-nl-section {
  position: relative;
  z-index: 1;
  padding-top: clamp(80px, 12vh, 136px);
  padding-bottom: clamp(96px, 14vh, 160px);
  border-top: 1px solid var(--ink-800, #1E202A);
  background: transparent;
}

body.pag-blog .gx-blog-scene .gx-nl-dock {
  background: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
}

body.pag-blog .gx-blog-scene .gx-nl-dock__content {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr);
  gap: clamp(32px, 5.5vw, 72px);
  align-items: start;
}

body.pag-blog .gx-blog-scene .gx-nl-dock__header {
  display: flex;
  flex-direction: column;
}

body.pag-blog .gx-blog-scene .gx-nl-dock__title {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink-050, #F5F6FA);
  margin: 0;
  text-wrap: balance;
}

body.pag-blog .gx-blog-scene .gx-nl-console {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

body.pag-blog .gx-blog-scene .gx-nl-console__row {
  display: flex;
  gap: 12px;
  width: 100%;
}

body.pag-blog .gx-blog-scene .gx-nl-input {
  flex: 1;
  background: var(--ink-900, #101219);
  border: 1px solid var(--ink-700, #272A36);
  border-radius: 0;
  padding: 14px 18px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.9rem;
  color: var(--ink-050, #F5F6FA);
  outline: none;
  transition: border-color var(--dur, 220ms) var(--ease, ease), background var(--dur, 220ms) var(--ease, ease);
}

body.pag-blog .gx-blog-scene .gx-nl-input::placeholder {
  color: var(--ink-500, #7A8398);
}

body.pag-blog .gx-blog-scene .gx-nl-input:focus {
  border-color: var(--struct, #8FB8D8);
  background: var(--ink-850, #171A23);
  box-shadow: 0 0 0 1px var(--struct, #8FB8D8);
}

/* Botão editorial sóbrio em carbono puro — SEM sublinhado rosa (§18 LEI) */
body.pag-blog .gx-blog-scene .gx-nl-btn {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-050, #F5F6FA);
  background: var(--ink-850, #171A23);
  border: 1px solid var(--ink-700, #272A36);
  border-radius: 0;
  padding: 14px 24px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: all var(--dur, 220ms) var(--ease, ease);
}

body.pag-blog .gx-blog-scene .gx-nl-btn::after {
  content: none;
}

body.pag-blog .gx-blog-scene .gx-nl-btn:hover, body.pag-blog .gx-blog-scene .gx-nl-btn:focus-visible {
  background: var(--ink-800, #1E202A);
  border-color: var(--ink-500, #7A8398);
  color: #FFFFFF;
  transform: translateY(-1px);
}

body.pag-blog .gx-blog-scene .gx-nl-btn:focus-visible {
  outline: 2px solid var(--signal, #FF4F8F);
  outline-offset: 2px;
}

body.pag-blog .gx-blog-scene .gx-nl-consent {
  width: 100%;
  margin: 0;
}

body.pag-blog .gx-blog-scene .gx-nl-consent .form-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-300, #99A2B4);
  cursor: pointer;
}

body.pag-blog .gx-blog-scene .gx-nl-consent a {
  color: var(--struct, #8FB8D8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.pag-blog .gx-blog-scene .gx-nl-consent a:hover {
  color: var(--ink-050, #F5F6FA);
}

body.pag-blog .gx-blog-scene .gx-nl-status {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVIDADE & ADAPTAÇÃO MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  body.pag-blog .gx-blog-scene .gx-blog-hero-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body.pag-blog .gx-blog-scene .gx-blog-hero-gesture {
    justify-content: center;
  }

  body.pag-blog .gx-blog-scene .gx-nl-dock__content {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 640px) {
  body.pag-blog .gx-blog-scene .gx-blog-header {
    padding-top: clamp(88px, 13vh, 112px);
    padding-bottom: 28px;
  }

  body.pag-blog .gx-blog-scene .gx-blog-title {
    font-size: clamp(2.4rem, 9.5vw, 3.4rem);
    line-height: 0.95;
  }

  /* Quebra de linha em vez de rolagem lateral: a 390px a faixa tinha 567px de
     conteudo em 326 visiveis, sem pista de rolagem, e metade dos temas ficava
     fora da tela. */
  body.pag-blog .gx-blog-scene .gx-filter-console {
    column-gap: 18px;
    row-gap: 0;
    overflow-x: visible;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-top: 24px;
  }

  body.pag-blog .gx-blog-scene .gx-filter-console::-webkit-scrollbar {
    display: none;
  }

  body.pag-blog .gx-blog-scene .gx-filter-console .filter-btn {
    white-space: nowrap;
    padding: 10px 4px;
  }

  body.pag-blog .gx-blog-scene .gx-nl-console__row {
    flex-direction: column;
  }

  body.pag-blog .gx-blog-scene .gx-nl-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   9b. GRADE FILTRADA
   A composicao assimetrica existe para a sequencia completa. Cada cartao herda a
   largura da sua posicao por nth-child, e nth-child conta os itens escondidos pelo
   filtro: em Biotecnologia, duas das quatro fileiras ficavam com 4 e 5 colunas
   vazias. Com filtro ativo a grade vira tres colunas iguais.
   -------------------------------------------------------------------------- */
@media (min-width: 961px) {
  body.pag-blog .gx-blog-scene .gx-editorial-grid.is-filtered {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid.is-filtered > .cover-card:nth-child(n) {
    grid-column: auto;
    aspect-ratio: 4 / 5;
    min-height: 0;
    border-top: none;
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid.is-filtered > .cover-card:nth-child(n) .cover-card__bottom {
    padding: clamp(22px, 2.4vw, 32px);
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid.is-filtered > .cover-card:nth-child(n) .cover-card__title {
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--ink-050, #F5F6FA);
    max-width: none;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid.is-filtered > .cover-card:nth-child(n) .cover-card__date {
    color: var(--ink-300, #99A2B4);
  }
}

/* --------------------------------------------------------------------------
   9c. LISTA NO CELULAR E NO TABLET
   Mesmo formato aprovado em conteudo.html. Em cartao, as catorze analises
   somavam 8.426px a 390 e 5.104px a 900. O limite e 960px, e nao 900 como no
   hub, porque a grade de 12 colunas do blog so comeca em 961: com 900 sobraria
   uma faixa de 60px em cartao alto de duas colunas.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  body.pag-blog .gx-blog-scene .gx-editorial-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n) {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    grid-column: auto;
    aspect-ratio: auto;
    min-height: 104px;
    height: auto;
    padding: 14px 0;
    border-top: 1px solid var(--ink-800, #1E202A);
    transform: none;
    box-shadow: none;
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n):last-child {
    border-bottom: 1px solid var(--ink-800, #1E202A);
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n):hover,
  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n):focus-visible {
    transform: none;
    box-shadow: none;
  }

  /* A capa sai da sangria e vira miniatura na primeira coluna */
  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n) .cover-card__media {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 104px;
    height: 76px;
  }

  /* Veu e sublinhado de hover existiam para o texto sobre a foto */
  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n) .cover-card__scrim,
  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n)::after {
    display: none;
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n) .cover-card__bottom {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    padding: 0;
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n) .cover-card__top {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 6px;
    padding: 0;
    background: none;
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n) .cover-card__title {
    font-size: 1rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
    font-weight: 600;
    color: var(--ink-050, #F5F6FA);
    max-width: none;
    text-shadow: none;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  body.pag-blog .gx-blog-scene .gx-editorial-grid > .cover-card:nth-child(n) .cover-card__date {
    color: var(--ink-300, #99A2B4);
  }
}

/* --------------------------------------------------------------------------
   10. ACESSIBILIDADE & PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.pag-blog .gx-blog-scene *, body.pag-blog .gx-blog-scene *::before, body.pag-blog .gx-blog-scene *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  body.pag-blog .gx-blog-scene .gx-mesh-cell--lead, body.pag-blog .gx-blog-scene .gx-mesh-cell--dominant, body.pag-blog .gx-blog-scene .gx-mesh-cell--counter, body.pag-blog .gx-blog-scene .gx-mesh-focal-dot {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  body.pag-blog .gx-blog-scene .gx-mesh-focal-pulse {
    display: none !important;
  }

  body.pag-blog .gx-blog-scene .cover-card:hover .cover-card__media {
    transform: none !important;
  }
}

/* ---------- conteudo (conteudo.html) ---------- */
/* ==========================================================================
   ACERVO DE INTELIGÊNCIA (conteudo.html) — GennomX Design System
   Partido Mandatório: TRÊS FILAS, UMA FORMA POR TIPO (Nível Awwwards)
   Mandato da Rodada:
   1. Tratamento Rigorosamente Uniforme nas 14 Fichas 9:16 (Mandato Fundador):
      - Mesma borda superior (1px solid transparent).
      - Mesmo corpo de título (clamp(1.24rem, 1.44vw, 1.56rem) = 23,04px a 1600px).
      - Mesmo peso (700), entrelinha (1.10) e cor (var(--ink-050)).
      - Mesmo filtro de imagem fotográfica (brightness(0.85) contrast(1.05)).
      - Mesma data técnica em DM Mono 8.5px (var(--ink-200), border-left 2px var(--struct)).
      - Hierarquia da página ancorada nos títulos de fila e no dossiê de GX Reports.

   2. Descompressão de Densidade (Ar Decisivo entre os Blocos):
      - Aumento decisivo do vão entre a barra de ferramentas/console e o início da fila de Análises.
      - Aumento decisivo do vão entre o título de cada fila e as fichas/conteúdo dela.
      - Desmembramento da faixa de y=900 para que a barra de filtros, o título "Análises"
        e a primeira fileira de fichas não caiam na mesma janela de rolagem.
      - Ritmo vertical dinâmico e variação > 30% entre os vãos (LEI-PAGINAS §17).
   ========================================================================== */

/* 1. Estrutura de Seção, Respiro Lateral Calibrado e Fundo Chapado */
/* Largura util quase total. O teto de 1540px deixava 380px de margem morta a
   1920 e apertava as fichas; agora quem define a largura e a calha. A 1920 sobram
   1776px uteis contra 1540, e a 1440 sobram 1340 contra 1290. */
body.pag-conteudo .fx-wrap {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: clamp(24px, 3.6vw, 72px);
}

body.pag-conteudo #insights-hub {
  position: relative;
  background-color: var(--ink-950);
  color: var(--text-primary);
  overflow-x: clip;
  isolation: isolate;
  padding: 0 0 clamp(120px, 12vw, 180px);
  border: none;
}

body.pag-conteudo #insights-hub::before,
body.pag-conteudo #insights-hub.fx-dotgrid::before {
  display: none !important;
  content: none !important;
}

body.pag-conteudo #insights-hub .hub-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.pag-conteudo #insights-hub .hub-ambient-glow::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 8%;
  width: 72vw;
  height: 640px;
  background: radial-gradient(ellipse at 50% 20%, rgba(77, 124, 254, 0.04) 0%, transparent 70%);
}

body.pag-conteudo #insights-hub .hub-ambient-glow::after {
  content: "";
  position: absolute;
  top: 180px;
  right: 2%;
  width: 58vw;
  height: 600px;
  background: radial-gradient(ellipse at 60% 45%, rgba(155, 123, 255, 0.035) 0%, rgba(255, 79, 143, 0.018) 40%, transparent 70%);
}

/* 2. Hero Monumental: Comando Visual em 2 Linhas e Gesto Ancorado */
/* Hero em sangria, no partido de carteiras-gx: o gesto e camada de fundo ancorada
   a direita e o titulo ocupa a largura do contentor. Antes eram duas colunas de
   grade e a segunda linha do H1 vazava 145px da sua trilha, atravessando o rotulo
   GX REPORTS do desenho. Aqui a sobreposicao deixa de ser possivel.
   A altura minima caiu de 940 para 760: com 940 o bloco assentava com 427px de
   campo vazio acima e 73 abaixo, e a primeira tela abria praticamente vazia. */
body.pag-conteudo .hub-hero {
  position: relative;
  z-index: 1;
  min-height: max(760px, 78svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(120px, 13vh, 168px);
  padding-bottom: clamp(64px, 7vh, 92px);
  border-bottom: 1px solid var(--ink-800);
  overflow: hidden;
}

body.pag-conteudo .hub-hero__wrap {
  position: relative;
  width: 100%;
}

/* Coluna unica: o texto manda na largura, o gesto vive atras dele. */
body.pag-conteudo .hub-hero__grid {
  display: block;
  position: relative;
}

body.pag-conteudo .hub-hero__masthead {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Teto generoso mas nao total: mantem o titulo fora do nucleo do desenho,
     que fica no flanco direito. */
  max-width: min(58%, 1040px);
  padding-bottom: clamp(8px, 1.2vw, 20px);
}

body.pag-conteudo .hub-title {
  font-family: var(--font-display);
  /* 6.4vw dava 847px de linha a 1440 e 1120 a 1920, invadindo o flanco do gesto.
     As linhas sao nowrap, entao um teto de largura no bloco so as faria
     transbordar: e o corpo que precisa ceder. */
  font-size: clamp(3.2rem, 5.2vw, 6.2rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink-050);
  margin: 0 0 clamp(22px, 2.4vw, 34px);
}

body.pag-conteudo .hub-title__line {
  display: block;
  white-space: nowrap;
}

body.pag-conteudo .hub-lead {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-300);
  margin: 0;
  max-width: 510px;
}

/* Gesto Vivo: camada de fundo ancorada ao flanco direito do hero, em sangria ate
   a borda da tela. Sai do fluxo, entao nao disputa largura com o titulo. */
body.pag-conteudo .hub-hero__gesture {
  position: absolute;
  z-index: 1;
  right: calc(50% - 50vw);
  bottom: 0;
  width: min(46vw, 960px);
  /* Altura apertada de proposito: e ela que governa a escala do desenho, e com
     ela o corpo dos tres rotulos na tela. Nesta faixa eles saem entre 10,6 e
     13,7px, contra os 4,3 a 13 erraticos do arranjo anterior. */
  height: clamp(380px, 22vw, 440px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

body.pag-conteudo .hub-gesture-svg {
  width: 100%;
  max-width: none;
  height: 100%;
  overflow: visible;
}

body.pag-conteudo .hub-pulse-ring {
  transform-origin: 620px 200px;
  animation: hubPulseScale 4.8s var(--ease) infinite;
}

body.pag-conteudo .hub-pulse-ring-2 {
  transform-origin: 620px 200px;
  animation: hubPulseScale 4.8s var(--ease) infinite 1.2s;
}

body.pag-conteudo .hub-core-dot {
  transform-origin: 620px 200px;
  animation: hubDotBreath 2.4s ease-in-out infinite alternate;
}

@keyframes hubPulseScale {
  0% { transform: scale(0.85); opacity: 0.6; }
  50% { transform: scale(1.22); opacity: 0.12; }
  100% { transform: scale(0.85); opacity: 0.6; }
}

@keyframes hubDotBreath {
  0% { opacity: 0.7; }
  100% { opacity: 1; filter: drop-shadow(0 0 7px var(--signal)); }
}

/* 3. Console Técnico de Indexação e Filtragem */
body.pag-conteudo .hub-console {
  position: sticky;
  top: 72px;
  z-index: 90;
  background-color: rgba(7, 8, 12, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--ink-800);
  border-bottom: 1px solid var(--ink-800);
  transition: border-color var(--dur-fast) var(--ease);
}

body.pag-conteudo .hub-console__wrap {
  position: relative;
}

body.pag-conteudo .hub-console__deck {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 28px;
  padding: 12px 0;
}

/* Trilho Segmentado de Abas: Subcorte de Grade Editorial */
body.pag-conteudo .hub-tabs {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ink-700);
  background-color: var(--ink-950);
  border-radius: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

body.pag-conteudo .hub-tabs::-webkit-scrollbar {
  display: none;
}

/* 11px de enchimento vertical fechavam a aba em 32px de altura, abaixo do
   minimo de 44px para alvo de toque, sendo o controle principal do acervo. */
body.pag-conteudo .hub-tabs .fx-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 22px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--ink-800);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

body.pag-conteudo .hub-tabs .fx-pill:last-child {
  border-right: none;
}

body.pag-conteudo .hub-tabs .fx-pill:hover {
  color: var(--ink-050);
  background: var(--ink-900);
}

/* Estado Ativo: Inversão de Alto Contraste Estrutural (Inconfundível em P&B) */
body.pag-conteudo .hub-tabs .fx-pill.is-active {
  color: var(--ink-950);
  font-weight: 700;
  background: var(--ink-050);
  box-shadow: none;
}

body.pag-conteudo .hub-tabs .fx-pill.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--signal);
}

/* Contador das abas: crachá funcional recortado */
body.pag-conteudo .hub-tabs .fx-pill .n {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-500);
  padding: 2px 7px;
  border-radius: 2px;
  background-color: rgba(39, 42, 54, 0.5);
  border: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

body.pag-conteudo .hub-tabs .fx-pill.is-active .n {
  color: var(--ink-050);
  background-color: var(--ink-900);
  border: 1px solid var(--ink-950);
  font-weight: 700;
}

body.pag-conteudo .hub-tabs .fx-pill:focus-visible {
  outline: 2px solid var(--struct);
  outline-offset: -2px;
}

/* Ferramentas: Busca integrada ao trilho e telemetria precisa */
body.pag-conteudo .hub-tools {
  display: flex;
  align-items: center;
  gap: 20px;
}

body.pag-conteudo .hub-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 320px;
}

body.pag-conteudo .hub-search__icon {
  position: absolute;
  left: 12px;
  width: 14px;
  height: 14px;
  color: var(--ink-500);
  pointer-events: none;
  transition: color var(--dur-fast) var(--ease);
}

body.pag-conteudo #fx-hub-search {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 36px;
  background-color: var(--ink-950);
  border: 1px solid var(--ink-800);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-050);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

body.pag-conteudo #fx-hub-search::placeholder {
  color: var(--ink-500);
}

body.pag-conteudo #fx-hub-search:focus {
  background-color: var(--ink-900);
  border-color: var(--struct);
}

body.pag-conteudo .hub-search:focus-within .hub-search__icon {
  color: var(--struct);
}

body.pag-conteudo .hub-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-500);
  white-space: nowrap;
}

/* 4. Estado Vazio (#hub-vazio) */
body.pag-conteudo .hub-empty {
  padding: clamp(64px, 8vw, 110px) 0;
}

body.pag-conteudo .hub-empty__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  background-color: var(--ink-900);
  border: 1px dashed var(--ink-700);
  border-radius: 2px;
  max-width: 560px;
  margin: 0 auto;
}

body.pag-conteudo .hub-empty__code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--signal);
  margin-bottom: 12px;
}

body.pag-conteudo .hub-empty__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink-050);
  margin: 0 0 10px;
}

body.pag-conteudo .hub-empty__desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-300);
  margin: 0;
}

/* 5. Seções das Três Filas e Ritmo Vertical Assimétrico (LEI-PAGINAS §17) */
/* Vão Decisivo: afasta a barra de ferramentas do início da fila de Análises */
body.pag-conteudo .hub-filas-wrap {
  display: flex;
  flex-direction: column;
  padding-top: clamp(130px, 14vw, 220px);
}

/* Vão Decisivo: ar arquitetônico entre o título de cada fila e os seus itens */
body.pag-conteudo .hub-fila {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 6.8vw, 108px);
}

/* Ritmo Dinâmico Calibrado: Vãos assimétricos com variação > 30% */
body.pag-conteudo .hub-fila--analises {
  margin-top: 0;
  padding-bottom: clamp(80px, 8.5vw, 136px);
  border-bottom: 1px solid var(--ink-800);
}

body.pag-conteudo .hub-fila--report {
  margin-top: clamp(120px, 12vw, 192px);
  padding-bottom: clamp(80px, 8.5vw, 136px);
  border-bottom: 1px solid var(--ink-800);
}

body.pag-conteudo .hub-fila--sinais {
  margin-top: clamp(100px, 10.5vw, 168px);
  padding-bottom: clamp(60px, 6.5vw, 100px);
}

/* Cabeçalhos de Fila como Âncoras Tipográficas Monumentais */
body.pag-conteudo .hub-fila__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink-800);
  padding-bottom: clamp(24px, 2.6vw, 38px);
}

body.pag-conteudo .hub-fila__tag {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.2vw, 32px);
}

body.pag-conteudo .hub-fila__num {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 0.82;
  color: var(--struct);
  letter-spacing: -0.03em;
}

body.pag-conteudo .hub-fila__title {
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 7.5vw, 7.5rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--ink-050);
  margin: 0;
}

/* Link de cada fila para a sua listagem completa.
   Nenhuma das tres filas levava a propria listagem, e blog.html ficou sem porta
   de entrada: nao era linkada da Home, do menu, do rodape nem do hub. O cabecalho
   ja era flex com space-between, entao o link assenta a direita na linha de base
   do titulo e, quando nao cabe, quebra para baixo dele. */
body.pag-conteudo .hub-fila__header {
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 16px;
}

body.pag-conteudo .hub-fila__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-200);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink-700);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

body.pag-conteudo .hub-fila__link span {
  color: var(--signal);
  transition: transform var(--dur-fast) var(--ease);
}

body.pag-conteudo .hub-fila__link:hover {
  color: var(--ink-050);
  border-bottom-color: var(--signal);
}

body.pag-conteudo .hub-fila__link:hover span {
  transform: translate(2px, -2px);
}

body.pag-conteudo .hub-fila__link:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 4px;
}

/* ==========================================================================
   6. FILA 1 — ANÁLISES (#hub-analises)
   Mandato da Rodada:
   - Grade uniforme de 5 FICHAS POR FILEIRA no desktop com respiro lateral (5.2vw).
   - Proporção 9:16 rigorosa em todas as viewports.
   - TRATAMENTO RIGOROSAMENTE UNIFORME NAS 14 FICHAS:
     * Mesma borda superior (1px solid transparent).
     * Mesmo corpo de título: clamp(1.24rem, 1.44vw, 1.56rem) = 23,04px a 1600px.
     * Mesmo peso (700), entrelinha (1.10) e cor (var(--ink-050)).
     * Mesmo filtro de imagem fotográfica (brightness(0.85) contrast(1.05)).
     * Mesma data técnica em DM Mono 8.5px (var(--ink-200), border-left 2px var(--struct)).
   - Construção pura por espaço e massa tipográfica: zero caixas e zero molduras.
   - Scrims graduais blindando contraste rigoroso (WCAG AA > 15:1 no topo e base).
   - Títulos normalizados estritamente em 3 linhas com reticência (-webkit-line-clamp: 3).
   - Zero colisão de caixas em smartphone e tablet (vão livre superior a 450px).
   ========================================================================== */
/* Cinco colunas e retrato 9:16, como no desenho original. O ganho de presenca
   vem da largura util, nao da contagem de colunas: com o contentor quase total a
   ficha sai em 330x586 a 1920, contra 255x454 antes. */
body.pag-conteudo .hub-analises-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(18px, 1.8vw, 32px);
  row-gap: clamp(28px, 2.8vw, 44px);
}

body.pag-conteudo .hub-analise {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 9 / 16;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: var(--ink-950);
  isolation: isolate;
  border-top: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}

/* Capa Fotográfica em Sangria Plena */
body.pag-conteudo .hub-analise__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: 0;
  overflow: hidden;
}

body.pag-conteudo .hub-analise__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.85) contrast(1.05);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}

/* Scrim Superior: Proteção Rigorosa de Contraste para a Data (WCAG AA > 15:1) */
body.pag-conteudo .hub-analise::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(96px, 11vw, 130px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7, 8, 12, 0.98) 0%,
    rgba(7, 8, 12, 0.92) 45%,
    rgba(7, 8, 12, 0.45) 80%,
    transparent 100%
  );
}

/* Scrim Inferior Gradual: Proteção Rigorosa de Contraste para o Título (WCAG AA > 8:1) */
body.pag-conteudo .hub-analise::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(7, 8, 12, 0.98) 0%,
    rgba(7, 8, 12, 0.88) 42%,
    rgba(7, 8, 12, 0.38) 75%,
    transparent 100%
  );
  transition: opacity 0.4s var(--ease);
}

/* Efeito de Seleção Suave */
body.pag-conteudo .hub-analise:hover .hub-analise__media img {
  transform: scale(1.042);
  filter: brightness(0.94) contrast(1.06);
}

body.pag-conteudo .hub-analise:hover .hub-analise__title {
  transform: translateY(-4px);
  color: #FFFFFF;
}

body.pag-conteudo .hub-analise:hover .hub-analise__date {
  color: #FFFFFF;
}

body.pag-conteudo .hub-analise:focus-visible {
  outline: 2px solid var(--struct);
  outline-offset: -2px;
  z-index: 5;
}

/* Data no Canto Superior Esquerdo: Telemetria Técnica Microscópica Uniforme */
body.pag-conteudo .hub-analise__date {
  position: absolute;
  top: clamp(16px, 1.4vw, 22px);
  left: clamp(16px, 1.4vw, 22px);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-200);
  margin: 0;
  padding: 0 0 0 7px;
  background: none !important;
  border: none !important;
  border-left: 2px solid var(--struct) !important;
  border-radius: 0;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* Título Sobreposto na Base: Presença Editorial Uniforme Normalizada em 3 Linhas */
body.pag-conteudo .hub-analise__title {
  position: relative;
  z-index: 3;
  padding: 0 clamp(14px, 1.4vw, 20px) clamp(18px, 1.8vw, 26px);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.24rem, 1.44vw, 1.56rem);
  font-weight: 700;
  line-height: 1.10;
  letter-spacing: -0.035em;
  color: var(--ink-050);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.92);
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}

/* O corte em tres linhas precisa viver num filho, nao no h3.
   O h3 e filho direto de .hub-analise, que e flex: item de flex sofre
   blockificacao e o -webkit-box declarado aqui virava flow-root, o que tornava o
   -webkit-line-clamp inerte. Quem cortava era um max-height de 44%, que fatiava a
   quarta linha ao meio e nunca produzia reticencia. Este span nao e item de flex,
   entao o clamp funciona e a reticencia aparece. */
body.pag-conteudo .hub-analise__title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ocultação de Categoria e Índice: Respeito Estrito ao Teto de Densidade */
body.pag-conteudo .hub-analise__idx,
body.pag-conteudo .hub-analise__cat {
  display: none !important;
}

/* Skeletons de Carregamento da Grade, na mesma proporcao da ficha */
body.pag-conteudo .fx-hub-card.fx-skel {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 0;
  background: linear-gradient(90deg, var(--ink-900) 0%, var(--ink-850) 50%, var(--ink-900) 100%);
  background-size: 200% 100%;
  animation: hubSkeletonShimmer 2.2s infinite;
}

@keyframes hubSkeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   7. FILA 2 — GX REPORTS (#hub-report)
   Escassez: Peça Dominante tratada como Dossiê em Largura Plena
   - Salto de escala > 4:1 no título (clamp(2.6rem, 4.2vw, 4.4rem))
   - Acabamento escultural de galeria com halo sutil e tipografia de precisão
   ========================================================================== */
body.pag-conteudo .hub-report-slot {
  width: 100%;
}

body.pag-conteudo .hub-dossie {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 70px);
  padding: clamp(32px, 4.5vw, 64px);
  background: linear-gradient(135deg, rgba(23, 26, 35, 0.90) 0%, rgba(16, 18, 25, 0.98) 100%);
  border: 1px solid var(--ink-700);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

body.pag-conteudo .hub-dossie::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 2px;
  background-color: var(--mauve);
}

body.pag-conteudo .hub-dossie:hover {
  border-color: var(--ink-600);
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.65);
}

body.pag-conteudo .hub-dossie:focus-visible {
  outline: 2px solid var(--mauve);
  outline-offset: 2px;
}

body.pag-conteudo .hub-dossie__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65);
}

body.pag-conteudo .hub-dossie__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.88) contrast(1.06);
  transition: transform 0.6s var(--ease);
}

body.pag-conteudo .hub-dossie:hover .hub-dossie__media img {
  transform: scale(1.03);
}

body.pag-conteudo .hub-dossie__corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.pag-conteudo .hub-dossie__cat {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mauve);
  margin-bottom: 14px;
}

/* Título Monumental do Dossiê */
body.pag-conteudo .hub-dossie__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink-050);
  margin: 0 0 18px;
  transition: color var(--dur-fast) var(--ease);
}

body.pag-conteudo .hub-dossie:hover .hub-dossie__title {
  color: #FFFFFF;
}

body.pag-conteudo .hub-dossie__lede {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  line-height: 1.6;
  color: var(--ink-200);
  max-width: 620px;
  margin: 0 0 24px;
}

body.pag-conteudo .hub-dossie__topicos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

body.pag-conteudo .hub-dossie__topicos li {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-200);
  background-color: var(--ink-900);
  border: 1px solid var(--ink-800);
  border-radius: 2px;
  padding: 5px 12px;
}

body.pag-conteudo .hub-dossie__pe {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--ink-800);
}

body.pag-conteudo .hub-dossie__marca {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--struct);
}

body.pag-conteudo .hub-dossie__pe time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-500);
  margin-left: auto;
}

/* ==========================================================================
   8. FILA 3 — SINAIS DA SEMANA (#hub-sinais)
   Cadência: Série Semanal Sem Imagem em Linha do Tempo Editorial
   - Numeral em DM Mono monumental criando uma régua tipográfica contínua
   - Salto tipográfico pronunciado (> 2.1:1) entre título e lede
   ========================================================================== */
body.pag-conteudo .hub-sinais-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-800);
}

body.pag-conteudo .hub-sinal {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(26px, 2.8vw, 36px) 16px;
  border-bottom: 1px solid var(--ink-800);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

body.pag-conteudo .hub-sinal:hover {
  background-color: rgba(23, 26, 35, 0.5);
  padding-left: 24px;
}

body.pag-conteudo .hub-sinal:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

/* Numeral Técnico Monumental */
body.pag-conteudo .hub-sinal__n {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  font-weight: 400;
  color: var(--ink-500);
  letter-spacing: -0.03em;
  line-height: 1;
  transition: color var(--dur-fast) var(--ease);
}

body.pag-conteudo .hub-sinal:hover .hub-sinal__n {
  color: var(--signal);
}

body.pag-conteudo .hub-sinal__corpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.pag-conteudo .hub-sinal__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ink-050);
  margin: 0;
  transition: color var(--dur-fast) var(--ease);
}

body.pag-conteudo .hub-sinal:hover .hub-sinal__title {
  color: #FFFFFF;
}

body.pag-conteudo .hub-sinal__lede {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-300);
  margin: 0;
  max-width: 820px;
  font-weight: 400;
}

body.pag-conteudo .hub-sinal__date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
  text-align: right;
}

/* 9. Seção Fallback */
body.pag-conteudo .hub-fallback-section {
  padding: 80px 0;
  background-color: var(--ink-950);
}

/* ==========================================================================
   10. Responsividade Rigorosa (@media 1100px, 820px, 768px)
   Progressão de Colunas e Eliminação Absoluta de Colisão Mobile
   ========================================================================== */
@media (max-width: 1100px) {
  body.pag-conteudo .hub-hero__masthead {
    max-width: 100%;
    padding-bottom: 0;
  }

  /* Abaixo desta largura nao ha flanco direito livre: o gesto volta ao fluxo,
     abaixo do texto, em vez de ficar atras dele. */
  body.pag-conteudo .hub-hero__gesture {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 36px;
    height: 380px;
    justify-content: center;
  }

  body.pag-conteudo .hub-console__deck {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  body.pag-conteudo .hub-tools {
    justify-content: space-between;
  }

  body.pag-conteudo .hub-search {
    min-width: 0;
    flex: 1;
  }

  body.pag-conteudo .hub-dossie {
    grid-template-columns: 1fr;
  }

  body.pag-conteudo .hub-dossie__media {
    aspect-ratio: 16 / 9;
  }
}

/* A faixa de 2 colunas vivia apenas entre 769 e 820px, uma janela de 52px onde
   quase nenhum aparelho cai: na pratica a grade pulava de 4 para 1 em 768.
   A escada agora e 4 / 3 / 2 / lista, em 1100, 900 e 620. */
@media (max-width: 900px) {

  body.pag-conteudo .hub-analise__title {
    font-size: clamp(1.15rem, 2.2vw, 1.38rem);
    padding: 0 14px 18px;
    /* max-height removido: quem corta agora e o clamp no .hub-analise__title-clamp */
  }
}

@media (max-width: 640px) {
  /* Os tres rotulos do gesto medem menos de 6px nesta faixa. Duplicam os titulos
     das filas 01, 02 e 03 logo abaixo, entao nada de informativo se perde. */
  body.pag-conteudo .hub-gesture-svg text {
    display: none;
  }
}

@media (max-width: 768px) {
  body.pag-conteudo .hub-hero {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 56px;
  }

  body.pag-conteudo .hub-title {
    font-size: clamp(2.4rem, 8.8vw, 3.8rem);
    line-height: 0.94;
    margin-bottom: 18px;
  }

  body.pag-conteudo .hub-title__line {
    white-space: normal;
  }

  body.pag-conteudo .hub-hero__gesture {
    height: 220px;
  }

  body.pag-conteudo .hub-console {
    top: 60px;
  }

  /* As quatro abas somavam 544px de conteudo em 334px visiveis: rolavam na
     horizontal sem nenhuma pista disso, e "Relatorios" aparecia cortado ao meio
     enquanto "Newsletter" nao aparecia. Em grade 2x2 as quatro ficam visiveis, e
     e por elas que o visitante descobre que ha tres colecoes. */
  body.pag-conteudo .hub-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }

  body.pag-conteudo .hub-tabs .fx-pill {
    justify-content: space-between;
    padding: 11px 14px;
    font-size: 11px;
    letter-spacing: 0.06em;
    border-right: 1px solid var(--ink-800);
    border-bottom: 1px solid var(--ink-800);
  }

  body.pag-conteudo .hub-tabs .fx-pill:nth-child(2n) {
    border-right: none;
  }

  body.pag-conteudo .hub-tabs .fx-pill:nth-last-child(-n+2) {
    border-bottom: none;
  }

  body.pag-conteudo .hub-tools {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body.pag-conteudo .hub-count {
    text-align: right;
  }

  body.pag-conteudo .hub-filas-wrap {
    padding-top: clamp(64px, 8vw, 96px);
  }

  body.pag-conteudo .hub-fila {
    gap: clamp(32px, 4.5vw, 48px);
  }

  body.pag-conteudo .hub-fila__title {
    font-size: clamp(2.6rem, 7.6vw, 3.6rem);
  }

  body.pag-conteudo .hub-fila__num {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }

  body.pag-conteudo .hub-sinal {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
  }

  body.pag-conteudo .hub-sinal__date {
    grid-column: 2 / -1;
    text-align: left;
    margin-top: 4px;
  }
}

/* Escada de colunas da fila de Analises: 5 / 4 / 3 / lista.
   A ficha 9:16 precisa de cerca de 240px de largura para caber tres linhas de
   titulo sem virar uma palavra por linha; cada degrau existe para nao cruzar esse
   piso. Com cinco colunas ate 1280, quatro ate 1024 e tres ate 900, a ficha nunca
   desce de 243px nesta faixa. */
@media (max-width: 1280px) {
  body.pag-conteudo .hub-analises-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 28px;
  }
}

@media (max-width: 1024px) {
  body.pag-conteudo .hub-analises-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 24px;
  }
}

/* Formato de lista do acervo, de 900px para baixo.
   A 900 a grade de duas colunas ainda produzia sete fileiras de 546px, 3.967px
   ao todo, o pior caso da pagina. A lista cobre toda a faixa de tablet e celular. */
@media (max-width: 900px) {
  /* ----------------------------------------------------------------------
     Celular: a ficha deixa de ser cartao retrato e vira item de lista.

     Em retrato alto, as catorze analises somavam 8.625px a 390 e 10.268px a 768,
     cerca de dez telas de rolagem. Quem entrava no hub para descobrir que existem
     tres colecoes tinha de atravessar o blog inteiro antes de suspeitar que
     GX Reports e Sinais da Semana existiam: a pagina se apresentava como blog.
     Em lista, cada item mede ~104px e a fila cai para perto de 1.600px.
     ---------------------------------------------------------------------- */
  body.pag-conteudo .hub-analises-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    margin-inline: 0;
    gap: 0;
  }

  body.pag-conteudo .hub-analise {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    aspect-ratio: auto;
    min-height: 104px;
    padding: 14px 0;
    border-top: 1px solid var(--ink-800);
    isolation: auto;
  }

  body.pag-conteudo .hub-analise:last-child {
    border-bottom: 1px solid var(--ink-800);
  }

  /* A capa sai da sangria e vira miniatura na primeira coluna. */
  body.pag-conteudo .hub-analise__media {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 104px;
    height: 76px;
  }

  /* Os dois veus existiam para dar contraste ao texto sobre a foto. Sem
     sobreposicao, eles so escureceriam a miniatura. */
  body.pag-conteudo .hub-analise::before,
  body.pag-conteudo .hub-analise::after {
    display: none;
  }

  body.pag-conteudo .hub-analise__title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 1.0rem;
    line-height: 1.28;
    letter-spacing: -0.01em;
    padding: 0;
    text-shadow: none;
  }

  body.pag-conteudo .hub-analise__title-clamp {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  body.pag-conteudo .hub-analise__date {
    position: static;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 6px;
    font-size: 8.5px;
    padding: 0 0 0 6px;
    text-shadow: none;
  }

  body.pag-conteudo .fx-hub-card.fx-skel {
    aspect-ratio: auto;
    height: 104px;
  }
}


/* ==========================================================================
   11. Acessibilidade: prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.pag-conteudo .hub-pulse-ring,
  body.pag-conteudo .hub-pulse-ring-2,
  body.pag-conteudo .hub-core-dot,
  body.pag-conteudo .fx-hub-card.fx-skel {
    animation: none !important;
  }

  body.pag-conteudo *,
  body.pag-conteudo *::before,
  body.pag-conteudo *::after {
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Ritmo vertical das duas ultimas cenas no celular (2026-09-11)
   As duas empilhavam os elementos com vaos quase iguais e pequenos: no fecho,
   24 / 26 / 20 / 12, o que fazia cinco elementos lerem como um aglomerado em
   vez de uma sequencia. A escala abaixo hierarquiza:
     - vaos iguais dentro do bloco que se le de corrido;
     - o MAIOR vao onde muda a natureza, entre o que se le e o que se faz;
     - o MENOR entre as duas acoes, que pertencem ao mesmo grupo.
   Medido a 390px. Acima de 900px nada muda.
   ========================================================================== */
@media (max-width: 900px) {
  /* fecho: 40 / 40 / 44 / 22 */
  #contato .ft-closing-statement { margin-top: 16px !important; }
  #contato .ft-closing-meta { margin-top: 2px !important; }
  #contato .ft-actions { margin-top: 44px !important; gap: 22px !important; }

  /* leitura continua: 38 / 49 / 44 */
  .ft-home .ft-mobile-product .ft-mobile-head h2 { margin-top: 20px !important; }
  .ft-home .ft-mobile-product .ft-mobile-deck { margin-top: 32px !important; }
  .ft-home .ft-mobile-product .ft-mobile-action { margin-top: 22px !important; }
}

/* ===== fim WS-041 paginas ===== */