/* =========================================================================
   FARPEX — DESIGN SYSTEM 01 · "ANODIZADO / LUZ"
   css/designsystem.css
   Tema claro editorial · laranja Farpex · alumínio escovado · azul-aço · grafite
   ========================================================================= */

/* -------------------------------------------------------------------------
   00 · TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Neutros — escala alumínio */
  --alu-50:  #FAFAFA;
  --alu-100: #F1F2F3;
  --alu-200: #E3E5E7;
  --alu-300: #CBCFD3;
  --alu-400: #A8AEB4;
  --alu-500: #878E96;
  --alu-600: #6B727A;
  --alu-700: #525860;
  --alu-800: #3A3F45;
  --alu-900: #25282D;
  --alu-950: #141618;

  /* Fundo osso (papel técnico) */
  --osso:    #F7F6F4;
  --osso-2:  #EFEEEB;

  /* Grafite profundo — secundário / seções escuras */
  --grafite-700: #23272C;
  --grafite-800: #1A1D21;
  --grafite-900: #121417;
  --grafite-950: #0B0D0F;

  /* Laranja Farpex — marca e ação principal */
  --farpex-50:  #FDF1EC;
  --farpex-100: #FBE3D9;
  --farpex-200: #F6C4B5;
  --farpex-300: #EE9B83;
  --farpex-400: #E36A4B;
  --farpex-500: #D1431F;
  --farpex-600: #B73719;
  --farpex-700: #972D17;
  --farpex-800: #7B2718;
  --farpex-900: #632118;
  --farpex-950: #46160A;
  --farpex-focus-ring: rgba(209,67,31,.24);

  /* Azul-aço frio — apoio técnico e informação */
  --aco-50:  #EEF4F9;
  --aco-100: #D8E6F1;
  --aco-200: #B3CDE2;
  --aco-300: #84AECE;
  --aco-400: #5289B4;
  --aco-500: #2E6B99;
  --aco-600: #245779;
  --aco-700: #1D4560;
  --aco-800: #173648;
  --aco-900: #122A38;

  /* Feedback */
  --ok:    #2E7D5B;
  --alerta:#B5771F;
  --erro:  #A83232;
  --info:  #2E6B99;

  /* Gradientes do sistema */
  --grad-metal: linear-gradient(100deg,
      #6B727A 0%, #E3E5E7 14%, #A8AEB4 26%, #FFFFFF 38%,
      #9AA1A8 50%, #E9EBED 62%, #7A8189 76%, #D3D7DA 88%, #5A6068 100%);
  --grad-metal-safe: var(--grad-metal);
  --grad-anodizado: linear-gradient(135deg, #122A38 0%, #2E6B99 46%, #84AECE 100%);
  --grad-escovado-h: linear-gradient(90deg, #CBCFD3 0%, #FFFFFF 20%, #A8AEB4 40%, #F1F2F3 60%, #878E96 80%, #E3E5E7 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.16) 100%);
  --grad-divisor: linear-gradient(90deg, transparent, rgba(37,40,45,.10) 18%, rgba(37,40,45,.34) 50%, rgba(37,40,45,.10) 82%, transparent);
  --grad-divisor-inv: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 18%, rgba(255,255,255,.40) 50%, rgba(255,255,255,.10) 82%, transparent);

  /* Motion */
  --ease-sys: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-tec: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapida: 200ms;
  --dur-padrao: 320ms;
  --dur-lenta: 700ms;
  --dur-editorial: 1800ms;
}

/* -------------------------------------------------------------------------
   01 · BASE TIPOGRÁFICA
   ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "cv05" 1, "ss01" 1, "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--osso);
  color: var(--grafite-900);
}

.font-mono, code, kbd, pre, samp {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-ligatures: none;
}

/* Papéis tipográficos do sistema (espelham a tabela da seção 02) */
.t-display { font-size: clamp(3.5rem, 9vw, 7.5rem); line-height: .88; letter-spacing: -.035em; font-weight: 300; }
.t-h1      { font-size: clamp(2.75rem, 6vw, 4.5rem);  line-height: .95; letter-spacing: -.03em;  font-weight: 300; }
.t-h2      { font-size: clamp(2rem, 4vw, 3rem);       line-height: 1.05; letter-spacing: -.025em; font-weight: 300; }
.t-h3      { font-size: clamp(1.5rem, 2.6vw, 2rem);   line-height: 1.15; letter-spacing: -.02em;  font-weight: 400; }
.t-h4      { font-size: 1.25rem; line-height: 1.3;  letter-spacing: -.015em; font-weight: 500; }
.t-h5      { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.01em; font-weight: 500; }
.t-h6      { font-size: .9375rem; line-height: 1.45; letter-spacing: 0; font-weight: 600; }
.t-body-lg { font-size: 1.125rem; line-height: 1.75; font-weight: 300; }
.t-body    { font-size: 1rem;     line-height: 1.7;  font-weight: 300; }
.t-body-sm { font-size: .875rem;  line-height: 1.65; font-weight: 300; }
.t-caption { font-size: .8125rem; line-height: 1.5;  font-weight: 400; color: var(--alu-600); }
.t-label   { font-size: .6875rem; line-height: 1.2;  font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.t-helper  { font-size: .75rem;   line-height: 1.5;  font-weight: 400; color: var(--alu-600); }
.t-eyebrow { font-size: .625rem;  line-height: 1.2;  font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
             font-family: 'JetBrains Mono', monospace; color: var(--aco-600); }

/* -------------------------------------------------------------------------
   02 · SUPERFÍCIES METÁLICAS
   ------------------------------------------------------------------------- */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Texto em alumínio escovado (claro) */
.text-metal {
  background-image: var(--grad-metal-safe);
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.65)) drop-shadow(0 2px 14px rgba(37,40,45,.16));
  animation: metalSweep 9s var(--ease-tec) infinite alternate;
}
/* Variante para fundos escuros.
   Sem animação ambiente: a varredura é um evento único, disparado por
   .is-settled quando a linha termina de subir. Brilho perpétuo em display
   grande compete com a leitura e denuncia enfeite. */
.text-metal-dark {
  background-image: linear-gradient(100deg,
      #8D949B 0%, #FFFFFF 16%, #B9BFC5 30%, #F5F6F7 44%,
      #8A9199 58%, #E7E9EB 72%, #6E757D 86%, #C7CBCF 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.text-metal-dark.is-settled {
  animation: metalSweepOnce 2.6s var(--ease-sys) both;
}
@keyframes metalSweepOnce {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
.text-anodizado {
  background-image: var(--grad-anodizado);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Folga lateral para texto com gradiente recortado.
   background-clip:text recorta na caixa de avanço do texto, que ignora a
   sobra de tinta do glifo (side bearing). Em finais como "...Linear" isso
   raspa a última letra. O padding estende a área pintada e a margem negativa
   devolve o espaço, então o layout não muda. */
.gradient-text,
.text-anodizado {
  padding-right: .08em;
  margin-right: -.08em;
}
@keyframes metalSweep {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* -------------------------------------------------------------------------
   03a · LUZ DE MOUSE DO HERO
   O gradiente fica aqui e o JS só move --spot-x / --spot-y. Assim o navegador
   não reinterpreta a declaração de gradiente a cada quadro.
   Intensidades baixas de propósito: a luz é um reflexo raso no alumínio, não
   uma lanterna. O halo largo carrega a cor, o núcleo só levanta o brilho.
   ------------------------------------------------------------------------- */
#hero-spotlight,
#hero-spotlight-core {
  transition: opacity 1100ms var(--ease-sys);
}
#hero-spotlight {
  background: radial-gradient(760px circle at var(--spot-x, 50%) var(--spot-y, 50%),
              rgba(82, 137, 180, .16) 0%,
              rgba(82, 137, 180, .07) 34%,
              transparent 66%);
}
#hero-spotlight-core {
  background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%),
              rgba(255, 255, 255, .10) 0%,
              transparent 68%);
}

@media (prefers-reduced-motion: reduce) {
  #hero-spotlight, #hero-spotlight-core { display: none; }
}

/* -------------------------------------------------------------------------
   03b · H1 DO HERO — REVELAÇÃO POR MÁSCARA
   ------------------------------------------------------------------------- */
/* leading .86 aperta a caixa da linha abaixo da zona de acentos: sem esta
   folga o Í de ALUMÍNIO e o à de PRECISÃO batem no overflow e são cortados.
   O padding devolve o espaço e a margem negativa preserva o ritmo vertical. */
.hero-line-mask {
  display: block;
  overflow: hidden;
  padding-top: .18em;
  margin-top: -.18em;
}

/* A revelação é 100% CSS, sem depender do GSAP.
   Regra de segurança: o estado escondido existe SÓ dentro do @keyframes.
   Numa regra normal, qualquer falha de JS deixaria o título invisível para
   sempre — o repouso do elemento tem que ser "visível". */
.hero-line {
  display: block;
  animation: heroLineRise 1.6s var(--ease-sys) var(--rise-delay, .30s) both;
}
.hero-line-mask:nth-of-type(2) .hero-line { --rise-delay: .43s; }
.hero-line-mask:nth-of-type(3) .hero-line { --rise-delay: .56s; }

@keyframes heroLineRise {
  from { transform: translate3d(0, 100%, 0); filter: blur(14px); }
  to   { transform: none; filter: none; }
}

/* A linha metálica sobe sem blur: filter sobre background-clip:text é um bug
   conhecido do Chromium (o texto some). Só ela abre mão do desfoque; empilha a
   varredura como segunda animação, com o atraso que a faz começar já parada. */
@keyframes heroLineRiseLimpa {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: none; }
}
.hero-line.text-metal-dark {
  animation:
    heroLineRiseLimpa 1.6s var(--ease-sys) var(--rise-delay, .43s) both,
    metalSweepOnce 3s var(--ease-sys) 2.3s both;
}

/* -------------------------------------------------------------------------
   03c · ENTRADA DE CARGA DO HERO — UM RELÓGIO SÓ

   Tudo da primeira dobra entra por aqui, em CSS. O motivo é concreto:
   gsap.from() roda em window.load, que só dispara depois do vídeo de 11 MB.
   Até lá o elemento já pintou visível — o GSAP então o joga para opacity 0 e
   anima de volta. É o "aparece, some, volta" clássico. Animação de CSS começa
   no primeiro paint e não espera recurso nenhum.

   A ordem é uma passagem de bastão: o kicker abre, o título ocupa, e o texto
   de apoio entra enquanto a última linha ainda assenta.

     kicker ......... 0,15s        painel .......... 1,30s
     título 1/2/3 ... 0,30 / 0,43 / 0,56
     subtítulo ...... 0,95s        telemetria ...... 1,15 / 1,30 / 1,42s
     CTAs ........... 1,10 / 1,19s varredura ....... 2,30s
   ------------------------------------------------------------------------- */
.hero-kicker,
.hero-sub,
.hero-cta,
.hero-panel,
.entra {
  animation: entraSobe var(--entra-dur, 1s) var(--ease-sys) var(--entra-delay, 0s) both;
}
.entra-escala { animation-name: entraEscala; }
.entra-lado   { animation-name: entraLado; }

@keyframes entraSobe {
  from { opacity: 0; transform: translate3d(0, var(--entra-y, 18px), 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes entraEscala {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes entraLado {
  from { opacity: 0; transform: translate3d(-28px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

.hero-kicker { --entra-delay: .15s; --entra-dur: .9s; --entra-y: 12px; }
.hero-sub    { --entra-delay: .95s; --entra-dur: 1s; }
.hero-cta    { --entra-delay: 1.10s; --entra-dur: .9s; }
.hero-cta:nth-child(2) { --entra-delay: 1.19s; }
.hero-panel  { --entra-delay: 1.30s; --entra-dur: 1.15s; --entra-y: 26px; }

@media (prefers-reduced-motion: reduce) {
  .hero-line,
  .hero-line.text-metal-dark,
  .hero-kicker, .hero-sub, .hero-cta, .hero-panel, .entra { animation: none; }
}

/* Régua/divisor metálico */
.metal-rule { height: 1px; background-image: var(--grad-divisor); }
.metal-rule-inv { height: 1px; background-image: var(--grad-divisor-inv); }
.card-divider {
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgba(37,40,45,.14) 20%, rgba(37,40,45,.30) 50%, rgba(37,40,45,.14) 80%, transparent);
}
.card-divider-inv {
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 20%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.18) 80%, transparent);
}

/* Barra de perfil extrudado (assinatura visual) */
.perfil-extrusao {
  background-image: repeating-linear-gradient(90deg,
    rgba(37,40,45,.00) 0px, rgba(37,40,45,.00) 3px,
    rgba(37,40,45,.10) 3px, rgba(37,40,45,.10) 4px);
}
.perfil-extrusao-inv {
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.00) 0px, rgba(255,255,255,.00) 3px,
    rgba(255,255,255,.12) 3px, rgba(255,255,255,.12) 4px);
}

/* -------------------------------------------------------------------------
   03 · GLASS / GLOW / ÍCONES
   ------------------------------------------------------------------------- */
.glass-effect {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background-image: var(--grad-glass);
}
.glass-effect-dark {
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  background-image: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
}
.glass-button {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--dur-padrao) var(--ease-tec);
}
.glass-button:hover { transform: translateY(-1px); }

.glow { box-shadow: 0 0 32px rgba(46,107,153,.28); }
.glow-soft { box-shadow: 0 0 24px rgba(46,107,153,.16); }
.glow-metal { box-shadow: 0 10px 40px -12px rgba(37,40,45,.35), inset 0 1px 0 rgba(255,255,255,.7); }

@keyframes border-glow {
  0%, 100% { border-color: rgba(203,207,211,1); box-shadow: 0 0 0 rgba(46,107,153,0); }
  50%      { border-color: rgba(46,107,153,.55); box-shadow: 0 0 26px rgba(46,107,153,.22); }
}
.hover-glow:hover { animation: border-glow 2s infinite; }

.icon-circle {
  height: 2.5rem; width: 2.5rem;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--alu-300);
  color: var(--aco-600);
  transition: all var(--dur-padrao) var(--ease-tec);
}
.icon-circle:hover { background: var(--grafite-900); border-color: var(--grafite-900); color: #fff; }
.icon-square {
  height: 2.5rem; width: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--alu-300);
  background: #fff;
  color: var(--alu-700);
  transition: all var(--dur-padrao) var(--ease-tec);
}
.icon-square:hover { border-color: var(--aco-500); color: var(--aco-600); box-shadow: 0 0 18px rgba(46,107,153,.18); }

/* -------------------------------------------------------------------------
   04 · FUNDOS ANIMADOS (uma variação por dobra)
   ------------------------------------------------------------------------- */
.bg-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, var(--alu-400) 1px, transparent 1px),
    linear-gradient(to bottom, var(--alu-400) 1px, transparent 1px);
}
.bg-grid-fine {
  background-size: 14px 14px;
  background-image:
    linear-gradient(to right, var(--alu-500) 1px, transparent 1px),
    linear-gradient(to bottom, var(--alu-500) 1px, transparent 1px);
}
.bg-grid-dark {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, #FFFFFF 1px, transparent 1px),
    linear-gradient(to bottom, #FFFFFF 1px, transparent 1px);
}
/* grade que "respira" */
.bg-grid-anim { animation: gridDrift 24s linear infinite; }
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 40px 40px, 40px 40px; }
}
/* seção transversal de perfil: linhas verticais tipo extrusão */
.bg-extrusao {
  background-image: repeating-linear-gradient(90deg,
    rgba(37,40,45,.055) 0px, rgba(37,40,45,.055) 1px,
    transparent 1px, transparent 22px);
}
.bg-extrusao-dark {
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px,
    transparent 1px, transparent 22px);
}
/* fachada glazing: malha diagonal */
.bg-glazing {
  background-size: 56px 56px;
  background-image:
    linear-gradient(45deg, rgba(46,107,153,.07) 25%, transparent 25%, transparent 75%, rgba(46,107,153,.07) 75%),
    linear-gradient(45deg, rgba(46,107,153,.07) 25%, transparent 25%, transparent 75%, rgba(46,107,153,.07) 75%);
  background-position: 0 0, 28px 28px;
}
/* ruído sutil */
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* orbs flutuantes */
.orb { position: absolute; border-radius: 9999px; filter: blur(90px); pointer-events: none; }
@keyframes orbFloatA {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33%     { transform: translate3d(6%, -8%, 0) scale(1.12); }
  66%     { transform: translate3d(-5%, 6%, 0) scale(.94); }
}
@keyframes orbFloatB {
  0%,100% { transform: translate3d(0,0,0) scale(1.05); }
  50%     { transform: translate3d(-8%, 7%, 0) scale(.9); }
}
.orb-a { animation: orbFloatA 22s ease-in-out infinite; }
.orb-b { animation: orbFloatB 28s ease-in-out infinite; }

/* gradiente radial pulsante */
@keyframes radialPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .75; transform: scale(1.06); }
}
.animate-radial-pulse { animation: radialPulse 9s ease-in-out infinite; }

/* -------------------------------------------------------------------------
   05 · KEYFRAMES DO SISTEMA
   ------------------------------------------------------------------------- */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes scan-vertical {
  0%   { top: 0%;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.animate-scan { animation: scan-vertical 2.6s var(--ease-tec) infinite; }

@keyframes scan-horizontal {
  0%   { left: -30%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
.animate-scan-h { animation: scan-horizontal 6s var(--ease-tec) infinite; }

@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spinSlow 6s linear infinite; }
.animate-spin-slower { animation: spinSlow 18s linear infinite; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 45s linear infinite;
}
.marquee-track-reverse { animation: marqueeScroll 52s linear infinite reverse; }
.marquee-container:hover .marquee-track { animation-play-state: paused; }

@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.animate-float { animation: floatY 6s ease-in-out infinite; }

@keyframes extrude {
  0%   { transform: translateX(-14%) scaleX(.86); opacity: .25; }
  55%  { opacity: 1; }
  100% { transform: translateX(0) scaleX(1); opacity: 1; }
}
.animate-extrude { animation: extrude 1.6s var(--ease-sys) both; }

/* -------------------------------------------------------------------------
   06 · SCROLLBARS
   ------------------------------------------------------------------------- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.scrollable-content { scrollbar-width: thin; scrollbar-color: rgba(46,107,153,.45) transparent; }
.scrollable-content::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollable-content::-webkit-scrollbar-track { background: rgba(37,40,45,.06); }
.scrollable-content::-webkit-scrollbar-thumb { background: rgba(46,107,153,.45); }
.scrollable-content::-webkit-scrollbar-thumb:hover { background: rgba(46,107,153,.7); }

/* -------------------------------------------------------------------------
   07 · REVEAL (sys-*) — blur + translate + fade
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .sys-reveal {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    transition: opacity var(--dur-editorial) var(--ease-sys),
                transform var(--dur-editorial) var(--ease-sys),
                filter 1.2s ease-out;
    will-change: opacity, transform;
  }
  .sys-rise    { transform: translateY(34px); }
  .sys-slide-l { transform: translateX(-34px); }
  .sys-slide-r { transform: translateX(34px); }
  .sys-scale   { transform: scale(.94); }
  /* filter: none, não blur(0). blur(0) mantém o filtro ativo e o elemento
     preso numa camada composta; qualquer filho com background-clip:text passa
     a ser rasterizado nos limites dessa camada e perde a última letra.
     will-change também precisa sair: sem isso a página acumula uma camada
     promovida por elemento revelado, para sempre. */
  .sys-active  {
    opacity: 1;
    transform: translate(0) scale(1);
    filter: none;
    will-change: auto;
  }
  .sys-delay-100 { transition-delay: 160ms; }
  .sys-delay-200 { transition-delay: 320ms; }
  .sys-delay-300 { transition-delay: 480ms; }
  .sys-delay-400 { transition-delay: 640ms; }
  .sys-delay-500 { transition-delay: 800ms; }

  /* fotos dentro de sys-reveal têm um problema à parte do resto do conteúdo:
     se a rede ainda não entregou o arquivo quando a transição do card acima
     termina, a <img> pula do nada para a imagem decodificada — o <img> não
     tem fade próprio, só herda a opacidade do pai. Cada foto ganha aqui o
     seu próprio fade, disparado por .is-loaded (ver initImgFadeIn em
     designsystem.js) no momento em que ELA termina de carregar, e não mais
     amarrado ao tempo do container. */
  .sys-reveal img { opacity: 0; transition: opacity var(--dur-lenta) var(--ease-tec); }
  .sys-reveal img.is-loaded { opacity: 1; }
}

/* -------------------------------------------------------------------------
   08 · 3D / SPOTLIGHT / TELEMETRIA
   ------------------------------------------------------------------------- */
.preserve-3d     { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rotate-y-180    { transform: rotateY(180deg); }
.perspective-1000 { perspective: 1000px; }
.is-flipped      { transform: rotateY(180deg); }
.card-inner      { transition: transform .6s var(--ease-tec); }

.spotlight-card {
  position: relative;
  overflow: hidden;
}
.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(700px circle at var(--mouse-x) var(--mouse-y),
    rgba(46,107,153,.85), transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
}
.spotlight-grid:hover .spotlight-card::before { opacity: 1; }
.spotlight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mouse-x) var(--mouse-y),
    rgba(46,107,153,.07), transparent 45%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s;
}
.spotlight-grid:hover .spotlight-card::after { opacity: 1; }

.inner-sheen {
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
    rgba(255,255,255,.55), transparent 40%);
  z-index: 2;
}
.inner-sheen-dark {
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
    rgba(255,255,255,.10), transparent 40%);
  z-index: 2;
}

.telemetry-card {
  transition: transform .12s ease-out, border-color var(--dur-padrao) var(--ease-tec);
  box-shadow: 0 24px 60px -18px rgba(11,13,15,.45);
}

.glitch-text span { position: relative; display: inline-block; }

/* -------------------------------------------------------------------------
   09 · BOTÕES (classes utilitárias do DS)
   ------------------------------------------------------------------------- */
.ds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .875rem 2rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: background-color var(--dur-padrao) var(--ease-tec),
              color var(--dur-padrao) var(--ease-tec),
              border-color var(--dur-padrao) var(--ease-tec),
              box-shadow var(--dur-padrao) var(--ease-tec),
              transform var(--dur-rapida) var(--ease-tec);
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn:active { transform: translateY(0) scale(.985); }
.ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--farpex-500); }
.ds-btn[disabled], .ds-btn.is-disabled {
  opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}
.ds-btn .shine {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  pointer-events: none;
}
.ds-btn:hover .shine { animation: shimmer 1.5s infinite; }

.ds-btn-primary { background: var(--farpex-500); color: #fff; border-color: var(--farpex-500); }
.ds-btn-primary:hover { background: var(--farpex-600); border-color: var(--farpex-600); box-shadow: 0 0 30px rgba(209,67,31,.35); }

.ds-btn-secondary { background: var(--aco-500); color: #fff; border-color: var(--aco-500); }
.ds-btn-secondary:hover { background: var(--aco-600); box-shadow: 0 0 30px rgba(46,107,153,.4); }

.ds-btn-outline { background: transparent; color: var(--grafite-900); border-color: var(--grafite-900); }
.ds-btn-outline:hover { background: var(--grafite-900); color: #fff; }

.ds-btn-ghost { background: transparent; color: var(--alu-700); border-color: transparent; }
.ds-btn-ghost:hover { background: rgba(37,40,45,.06); color: var(--grafite-900); }

.ds-btn-metal { color: var(--grafite-900); border-color: var(--alu-300); background-image: var(--grad-escovado-h); background-size: 200% 100%; }
.ds-btn-metal:hover { background-position: 100% 50%; box-shadow: var(--glow-metal, 0 10px 30px -12px rgba(37,40,45,.4)); }

.ds-btn-link {
  padding: 0 0 .35rem 0; border: 0; border-bottom: 1px solid var(--grafite-900);
  color: var(--grafite-900); background: transparent;
}
.ds-btn-link:hover { color: var(--farpex-600); border-color: var(--farpex-600); }

.ds-btn-icon { padding: 0; width: 2.75rem; height: 2.75rem; }

.ds-btn.is-loading { pointer-events: none; color: transparent !important; }
.ds-btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: spinSlow .8s linear infinite;
}
.ds-btn-outline.is-loading::after, .ds-btn-metal.is-loading::after, .ds-btn-ghost.is-loading::after {
  border-color: rgba(37,40,45,.25); border-top-color: var(--grafite-900);
}

/* -------------------------------------------------------------------------
   10 · FORMULÁRIOS
   ------------------------------------------------------------------------- */
.ds-field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--alu-300);
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 300;
  color: var(--grafite-900);
  transition: border-color var(--dur-padrao) var(--ease-tec), box-shadow var(--dur-padrao) var(--ease-tec), background-color var(--dur-padrao) var(--ease-tec);
}
.ds-field::placeholder { color: var(--alu-400); }
.ds-field:hover { border-color: var(--alu-400); }
.ds-field:focus { outline: none; border-color: var(--farpex-500); box-shadow: 0 0 0 3px var(--farpex-focus-ring); }
.ds-field:disabled { background: var(--alu-100); color: var(--alu-400); cursor: not-allowed; }
.ds-field.is-error { border-color: var(--erro); box-shadow: 0 0 0 3px rgba(168,50,50,.12); }
.ds-field.is-ok    { border-color: var(--ok);   box-shadow: 0 0 0 3px rgba(46,125,91,.12); }
select.ds-field { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }

/* Linha inferior (padrão editorial luxury) */
.ds-field-line {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--alu-400);
  padding: .5rem 0; font-size: .9375rem; font-weight: 300; color: var(--grafite-900);
  transition: border-color var(--dur-padrao) var(--ease-tec);
}
.ds-field-line:focus { outline: none; border-color: var(--farpex-500); }
.ds-field-line-inv {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.4);
  padding: .5rem 0; font-size: .9375rem; font-weight: 400; color: #fff;
  transition: border-color var(--dur-padrao) var(--ease-tec);
}
.ds-field-line-inv::placeholder { color: rgba(255,255,255,.55); }
.ds-field-line-inv:focus { outline: none; border-color: var(--farpex-300); }

/* Checkbox / Radio customizados */
.ds-check {
  width: 1.125rem; height: 1.125rem; flex: 0 0 auto;
  border: 1px solid var(--alu-400); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-rapida) var(--ease-tec);
}
.peer:checked ~ .ds-check { background: var(--farpex-500); border-color: var(--farpex-500); }
.peer:focus-visible ~ .ds-check { box-shadow: 0 0 0 3px var(--farpex-focus-ring); }
.peer:disabled ~ .ds-check { background: var(--alu-200); border-color: var(--alu-300); }
.ds-check svg, .ds-check iconify-icon { opacity: 0; transform: scale(.6); transition: all var(--dur-rapida) var(--ease-tec); color: #fff; }
.peer:checked ~ .ds-check iconify-icon { opacity: 1; transform: scale(1); }

.ds-radio { border-radius: 9999px; }
.ds-radio::after {
  content: ""; width: .45rem; height: .45rem; border-radius: 9999px; background: #fff;
  opacity: 0; transform: scale(.4); transition: all var(--dur-rapida) var(--ease-tec);
}
.peer:checked ~ .ds-radio::after { opacity: 1; transform: scale(1); }

/* Toggle */
.ds-toggle {
  width: 2.75rem; height: 1.5rem; background: var(--alu-300);
  position: relative; transition: background-color var(--dur-padrao) var(--ease-tec); border-radius: 9999px;
}
.ds-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 1.125rem; height: 1.125rem;
  background: #fff; border-radius: 9999px; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform var(--dur-padrao) var(--ease-sys);
}
.peer:checked ~ .ds-toggle { background: var(--farpex-500); }
.peer:checked ~ .ds-toggle::after { transform: translateX(1.25rem); }
.peer:disabled ~ .ds-toggle { opacity: .45; }

/* Range */
.ds-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--alu-300); outline: none; }
.ds-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  background: var(--grafite-900); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--alu-400);
  cursor: pointer; transition: all var(--dur-rapida) var(--ease-tec);
}
.ds-range::-webkit-slider-thumb:hover { background: var(--farpex-500); box-shadow: 0 0 0 1px var(--farpex-500), 0 0 14px rgba(209,67,31,.45); }
.ds-range::-moz-range-thumb {
  width: 14px; height: 14px; border: 2px solid #fff; background: var(--grafite-900);
  box-shadow: 0 0 0 1px var(--alu-400); cursor: pointer;
}

/* -------------------------------------------------------------------------
   11 · BADGES · TOOLTIPS · PROGRESSO · TABELA
   ------------------------------------------------------------------------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .65rem;
  font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid transparent;
}
.ds-badge-default { background: var(--alu-200); color: var(--alu-800); border-color: var(--alu-300); }
.ds-badge-success { background: rgba(46,125,91,.10); color: #236247; border-color: rgba(46,125,91,.35); }
.ds-badge-warning { background: rgba(181,119,31,.10); color: #8A5A16; border-color: rgba(181,119,31,.35); }
.ds-badge-error   { background: rgba(168,50,50,.10); color: #8A2929; border-color: rgba(168,50,50,.35); }
.ds-badge-info    { background: rgba(46,107,153,.10); color: var(--aco-700); border-color: rgba(46,107,153,.35); }
.ds-badge-outline { background: transparent; color: var(--grafite-900); border-color: var(--grafite-900); }
.ds-badge-solid   { background: var(--grafite-900); color: #fff; border-color: var(--grafite-900); }

.recommend-badge {
  background: rgba(46,107,153,.10);
  border: 1px solid rgba(46,107,153,.35);
  color: var(--aco-700);
  font-family: 'JetBrains Mono', monospace;
  font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .25rem .75rem;
  transition: opacity var(--dur-padrao) var(--ease-tec);
}

/* Tooltip CSS puro em 4 direções */
.ds-tooltip { position: relative; display: inline-flex; }
.ds-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 60;
  white-space: nowrap;
  background: var(--grafite-900);
  color: #fff;
  font-size: .6875rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  padding: .4rem .7rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-padrao) var(--ease-tec), transform var(--dur-padrao) var(--ease-sys);
  box-shadow: 0 12px 30px -10px rgba(11,13,15,.55);
}
.ds-tooltip:hover::after, .ds-tooltip:focus-within::after { opacity: 1; }
.tip-top::after    { bottom: 100%; left: 50%; transform: translate(-50%, 4px); margin-bottom: .5rem; }
.tip-top:hover::after { transform: translate(-50%, -2px); }
.tip-bottom::after { top: 100%; left: 50%; transform: translate(-50%, -4px); margin-top: .5rem; }
.tip-bottom:hover::after { transform: translate(-50%, 2px); }
.tip-left::after   { right: 100%; top: 50%; transform: translate(4px, -50%); margin-right: .5rem; }
.tip-left:hover::after { transform: translate(-2px, -50%); }
.tip-right::after  { left: 100%; top: 50%; transform: translate(-4px, -50%); margin-left: .5rem; }
.tip-right:hover::after { transform: translate(2px, -50%); }

/* Progresso */
.ds-progress { width: 100%; height: 4px; background: var(--alu-200); overflow: hidden; }
.ds-progress > span {
  display: block; height: 100%;
  background-image: var(--grad-anodizado);
  width: 0%;
  transition: width 1.2s var(--ease-sys);
  position: relative;
}
.ds-progress > span::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #fff;
  animation: pulseBar 1.4s ease-in-out infinite;
}
@keyframes pulseBar { 0%,100% { opacity: .2; } 50% { opacity: 1; } }

.ds-progress-striped > span {
  background-image: repeating-linear-gradient(45deg,
    var(--aco-500) 0 8px, var(--aco-600) 8px 16px);
  background-size: 32px 32px;
  animation: stripeMove 1.1s linear infinite;
}
@keyframes stripeMove { from { background-position: 0 0; } to { background-position: 32px 0; } }

/* Tabela */
.ds-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ds-table th {
  text-align: left; font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--alu-600); padding: .875rem 1rem;
  border-bottom: 1px solid var(--alu-300);
  font-family: 'JetBrains Mono', monospace;
}
.ds-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--alu-200); font-weight: 300; color: var(--alu-800); }
.ds-table tbody tr { transition: background-color var(--dur-rapida) var(--ease-tec); }
.ds-table tbody tr:hover { background: rgba(46,107,153,.05); }

/* -------------------------------------------------------------------------
   12 · ACCORDION · TABS · CENÁRIOS
   ------------------------------------------------------------------------- */
.ds-accordion-item { border-bottom: 1px solid var(--alu-300); }
.ds-accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; text-align: left; cursor: pointer; background: none; border: 0;
  transition: color var(--dur-padrao) var(--ease-tec);
}
.ds-accordion-trigger:hover { color: var(--aco-600); }
.ds-accordion-panel {
  max-height: 0; overflow: hidden;
  transition: max-height .6s var(--ease-tec), opacity .4s var(--ease-tec), padding .4s var(--ease-tec);
  opacity: 0;
}
.ds-accordion-item.is-open .ds-accordion-panel { max-height: 420px; opacity: 1; padding-bottom: 1.5rem; }
.ds-accordion-item.is-open .ds-accordion-icon { transform: rotate(45deg); }
.ds-accordion-icon { transition: transform var(--dur-padrao) var(--ease-sys); }

.scenario-tab {
  border-left: 2px solid transparent;
  transition: background-color var(--dur-padrao) var(--ease-tec), border-color var(--dur-padrao) var(--ease-tec);
}
.scenario-tab.is-active { border-left-color: var(--aco-500); background: rgba(46,107,153,.06); }
.scenario-panel { transition: opacity .35s var(--ease-tec), transform .35s var(--ease-tec); }

.ds-tab-btn {
  padding: .75rem 1.25rem; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--alu-600); border-bottom: 2px solid transparent; background: none;
  cursor: pointer; transition: all var(--dur-padrao) var(--ease-tec);
}
.ds-tab-btn:hover { color: var(--grafite-900); }
.ds-tab-btn.is-active { color: var(--grafite-900); border-bottom-color: var(--grafite-900); }

/* -------------------------------------------------------------------------
   13 · MODAL
   ------------------------------------------------------------------------- */
.ds-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,13,15,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-padrao) var(--ease-tec);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.ds-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ds-modal-card {
  width: 34rem; max-width: 100%;
  transform: translateY(24px) scale(.96);
  opacity: 0;
  transition: transform .5s var(--ease-sys), opacity .4s var(--ease-tec);
}
.ds-modal-backdrop.is-open .ds-modal-card { transform: translateY(0) scale(1); opacity: 1; }

/* -------------------------------------------------------------------------
   14 · CLASSES ESTRUTURAIS DO DESIGN SYSTEM (ds-*)
   ------------------------------------------------------------------------- */
.ds-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  background: rgba(247,246,244,.82);
  border-bottom: 1px solid var(--alu-300);
  transition: background-color var(--dur-lenta) var(--ease-tec), box-shadow var(--dur-lenta) var(--ease-tec), border-color var(--dur-lenta) var(--ease-tec);
}
.ds-nav.is-scrolled {
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 0 rgba(37,40,45,.06), 0 12px 40px -24px rgba(11,13,15,.45);
}
.ds-nav-link {
  position: relative;
  font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: var(--alu-600);
  transition: color var(--dur-padrao) var(--ease-tec);
  white-space: nowrap;
}
.ds-nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.4rem; height: 1px;
  background: var(--grafite-900); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-padrao) var(--ease-tec);
}
.ds-nav-link:hover { color: var(--grafite-900); }
.ds-nav-link:hover::after { transform: scaleX(1); }
.ds-nav-link.is-active { color: var(--grafite-900); }
.ds-nav-link.is-active::after { transform: scaleX(1); background: var(--farpex-500); }

.ds-section { padding: 7rem 1.5rem; max-width: 1400px; margin: 0 auto; position: relative; }
@media (min-width: 768px) { .ds-section { padding: 9rem 3rem; } }

.ds-section-title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.02;
}

.ds-card {
  background: #fff;
  border: 1px solid var(--alu-300);
  padding: 2rem;
  transition: border-color var(--dur-padrao) var(--ease-tec), box-shadow var(--dur-padrao) var(--ease-tec), transform var(--dur-padrao) var(--ease-tec);
}
.ds-card:hover { border-color: var(--alu-400); box-shadow: 0 22px 50px -28px rgba(11,13,15,.4); }
.ds-card-dark { background: var(--grafite-800); border-color: rgba(255,255,255,.12); color: var(--alu-200); }
.ds-card-lift:hover { transform: translateY(-4px); }

.ds-spec-row {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--alu-200);
}
@media (min-width: 900px) { .ds-spec-row { flex-direction: row; align-items: center; gap: 0; } }
.ds-spec-row:last-child { border-bottom: none; }
.ds-spec-name {
  flex: 0 0 190px;
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  color: var(--alu-600);
  font-family: 'JetBrains Mono', monospace;
}
.ds-spec-preview { flex: 1; min-width: 0; }
@media (min-width: 900px) { .ds-spec-preview { padding: 0 2rem; } }
.ds-spec-value {
  flex: 0 0 260px;
  text-align: left;
  font-size: .6875rem;
  line-height: 1.7;
  color: var(--alu-600);
  font-family: 'JetBrains Mono', monospace;
}
@media (min-width: 900px) { .ds-spec-value { text-align: right; } }

.ds-color-swatch {
  width: 100%; height: 88px;
  border: 1px solid rgba(37,40,45,.12);
  margin-bottom: .75rem;
  position: relative; overflow: hidden;
  transition: transform var(--dur-padrao) var(--ease-sys), box-shadow var(--dur-padrao) var(--ease-tec);
  cursor: pointer;
}
.ds-color-swatch:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(11,13,15,.5); }
.ds-color-swatch::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%);
}
.ds-color-swatch:hover::after { animation: shimmer 1.1s ease-out; }

.ds-component-state { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.ds-state-label {
  font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--alu-500); font-family: 'JetBrains Mono', monospace;
}

.motion-demo-box {
  width: 118px; height: 118px;
  background-image: var(--grad-escovado-h);
  background-size: 200% 100%;
  border: 1px solid var(--alu-400);
  display: flex; align-items: center; justify-content: center;
  color: var(--grafite-900);
  font-family: 'JetBrains Mono', monospace;
  font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 12px 28px -18px rgba(11,13,15,.6);
}

.ds-code {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6875rem;
  line-height: 1.8;
  color: var(--alu-200);
  background: var(--grafite-900);
  border: 1px solid rgba(255,255,255,.10);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  white-space: pre;
}
.ds-code .k { color: #84AECE; }
.ds-code .v { color: #E3E5E7; }
.ds-code .c { color: #6B727A; }

.ds-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .625rem; letter-spacing: .1em;
  border: 1px solid var(--alu-300);
  background: #fff;
  color: var(--alu-700);
  padding: .2rem .5rem;
}

/* Numeração editorial de seção (01 / 02 / 03) */
.ds-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: .625rem;
  letter-spacing: .28em;
  color: var(--alu-500);
  text-transform: uppercase;
}

/* Avatares */
.ds-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--alu-300); }
.ds-avatar-group > * + * { margin-left: -.75rem; }
.ds-avatar-group > * { transition: transform var(--dur-padrao) var(--ease-sys); }
.ds-avatar-group:hover > * { transform: translateX(.2rem); }

/* Breadcrumb */
.ds-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--alu-500); font-family: 'JetBrains Mono', monospace; }
.ds-breadcrumb a { transition: color var(--dur-padrao) var(--ease-tec); }
.ds-breadcrumb a:hover { color: var(--grafite-900); }

/* -------------------------------------------------------------------------
   15 · IMAGE ANIM CONTAINER (fatiamento em colunas — nexus)
   ------------------------------------------------------------------------- */
.image-anim-container { position: relative; overflow: hidden; }
.image-anim-container img { display: block; }

/* -------------------------------------------------------------------------
   16 · MOTION REDUZIDO
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .sys-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .marquee-track { animation: none !important; }
  .text-metal, .text-metal-dark { animation: none !important; }
}

/* -------------------------------------------------------------------------
   17 · UTILITÁRIOS FINAIS
   ------------------------------------------------------------------------- */
.snap-x-mandatory { scroll-snap-type: x mandatory; }
.cursor-crosshair { cursor: crosshair; }
.text-balance { text-wrap: balance; }
::selection { background: var(--grafite-900); color: #fff; }

/* -------------------------------------------------------------------------
   17b · NAVEGAÇÃO MÓVEL — controle sem superfície, movimento do sistema
   ------------------------------------------------------------------------- */
.nav-toggle { border: 0; background: transparent; color: var(--grafite-900); }
.nav-toggle__lines { --nav-toggle-shift: .34375rem; display: flex; flex-direction: column; justify-content: space-between; width: 1.125rem; height: .75rem; }
.nav-toggle__line { display: block; width: 100%; height: 1px; background: currentColor; transform-origin: center; transition: transform var(--dur-padrao) var(--ease-tec), opacity var(--dur-rapida) var(--ease-tec); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) { transform: translateY(var(--nav-toggle-shift)) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) { opacity: 0; transform: scaleX(.5); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) { transform: translateY(calc(var(--nav-toggle-shift) * -1)) rotate(-45deg); }
.ds-nav.is-dark .nav-toggle { color: var(--farpex-500); }
#mobile-menu { transition: transform var(--dur-padrao) var(--ease-tec), opacity var(--dur-rapida) var(--ease-tec); }
@media (prefers-reduced-motion: reduce) { .nav-toggle__line, #mobile-menu { transition-duration: .001ms !important; } }

/* -------------------------------------------------------------------------
   18 · PORTFOLIO GALLERY — composição elástica isolada
   ------------------------------------------------------------------------- */
.portfolio-gallery { display: flex; gap: .75rem; height: clamp(25rem, 47vw, 35rem); }
.portfolio-gallery__item { position: relative; flex: 1 1 0; min-width: 2.75rem; overflow: hidden; border: 1px solid var(--alu-300); background: var(--grafite-900); color: #fff; text-align: left; cursor: pointer; transition: flex var(--dur-lenta) var(--ease-tec), border-color var(--dur-padrao) var(--ease-tec), filter var(--dur-padrao) var(--ease-tec); }
.portfolio-gallery__item.is-active { flex: 5 1 0; border-color: var(--grafite-900); }
.portfolio-gallery__item:focus-visible { outline: 3px solid var(--farpex-focus-ring); outline-offset: 3px; }
.portfolio-gallery__image, .portfolio-gallery__wash, .portfolio-gallery__content { position: absolute; inset: 0; }
.portfolio-gallery__image { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lenta) var(--ease-tec), filter var(--dur-padrao) var(--ease-tec); }
.portfolio-gallery__item:not(.is-active) .portfolio-gallery__image { transform: scale(1.12); filter: brightness(.48) saturate(.7); }
.portfolio-gallery__wash { background: linear-gradient(0deg, rgba(11,13,15,.9), rgba(11,13,15,.08) 65%); }
.portfolio-gallery__content { --portfolio-gallery-padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; justify-content: end; align-items: flex-start; gap: .8rem; padding: var(--portfolio-gallery-padding); }
.portfolio-gallery__rail-label { position: absolute; inset: auto 50% 2rem auto; writing-mode: vertical-rl; transform: translateX(50%); white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: .65rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.portfolio-gallery__mobile-id { display: none; }
.portfolio-gallery__item.is-active .portfolio-gallery__rail-label, .portfolio-gallery__item:not(.is-active) .portfolio-gallery__content { opacity: 0; pointer-events: none; }
.portfolio-gallery__title { font-size: clamp(1.5rem, 3.2vw, 3rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.portfolio-gallery__cta { display: inline-flex; gap: .5rem; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--farpex-200); }
/* A largura do título já é a da posição aberta. Enquanto o card expande, a
   quebra final permanece pronta por trás do fade, sem saltar de linha. */
@media (min-width: 640px) { .portfolio-gallery { container-type: inline-size; } .portfolio-gallery__title { flex-shrink: 0; inline-size: calc(50cqw - 1.875rem - 6px - var(--portfolio-gallery-padding) - var(--portfolio-gallery-padding)); } }
@media (min-width: 1180px) { .portfolio-gallery__item[data-gallery-id="02"] .portfolio-gallery__title { white-space: nowrap; } }
@media (max-width: 639px) { .portfolio-gallery { gap: .375rem; height: 25rem; } .portfolio-gallery__item { min-width: 1.5rem; transition: flex .32s var(--ease-tec), border-color var(--dur-padrao) var(--ease-tec), filter var(--dur-padrao) var(--ease-tec); } .portfolio-gallery__item.is-active { flex: 6 1 0; } .portfolio-gallery__content { padding: 1rem; } .portfolio-gallery__title { font-size: 1.125rem; line-height: 1.05; inline-size: 100%; min-width: 0; } .portfolio-gallery__rail-label { display: none; } .portfolio-gallery__mobile-id { display: block; position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: .625rem; letter-spacing: .12em; writing-mode: vertical-rl; white-space: nowrap; } .portfolio-gallery__item.is-active .portfolio-gallery__mobile-id { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .portfolio-gallery *, .portfolio-gallery *::before, .portfolio-gallery *::after { transition-duration: .001ms !important; } }