/* ============================================================================
   VX CONSULTORIA EMPRESARIAL — MESA DE OPERAÇÕES
   Sistema de design: chassi anodizado, placas usinadas, legendas gravadas,
   lâmpadas indicadoras. Paleta extraída pixel a pixel de logo.png.
   ========================================================================= */

/* ---------- 1. FONTES (auto-hospedadas, sem CDN) ------------------------- */
@font-face{font-family:'Barlow';src:url('../fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlowcond-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlowcond-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlowcond-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. TOKENS ---------------------------------------------------- */
:root{
  /* chassi — retirado da logo: #020B1C base, #040D21 centro */
  --void:        #01060F;
  --chassis:     #020B1C;
  --chassis-2:   #04101F;
  --plate-top:   #071630;
  --plate-bot:   #030C1D;
  --plate-raise: #0A1B38;
  --plate-edge:  rgba(126,166,224,.13);
  --rule:        rgba(126,166,224,.15);
  --rule-strong: rgba(126,166,224,.26);
  --recess:      rgba(0,0,0,.55);
  --bevel:       rgba(158,196,246,.15);

  /* sinal — azul exato da logo */
  --signal:      #0767FD;
  --signal-hi:   #63A0FF;   /* 7.4:1 sobre o chassi — texto pequeno */
  --signal-deep: #0A3EA8;
  --signal-wash: rgba(7,103,253,.13);
  /* Superfície de sinal que carrega texto branco. O azul da logo puro dá 4.75:1
     com branco — passa, mas sem folga, e o gradiente do controle primário subia
     acima dele (#1276FF = 4.16:1, reprovado). Estes dois passos existem para que
     TODO pixel de um controle azul com rótulo branco fique acima de 4.5:1:
     topo 5.3:1, base 8.9:1. A luz de cima continua vindo do chanfro, não da
     tinta — que é o que uma chapa usinada faz de verdade. */
  --signal-lift: #0A63E6;
  --signal-sink: #0342A8;

  /* âmbar — reservado exclusivamente ao módulo de prazo */
  --amber:       #FFB020;
  --amber-wash:  rgba(255,176,32,.13);

  /* estados */
  --ok:          #34D08A;
  --alert:       #FF5C5C;

  /* tinta — toda tingida do matiz, nunca cinza */
  /* Rampa aferida contra a placa mais clara (#0B1A33), não contra o chassi:
     todos os quatro passos cruzam 4.5:1 mesmo sobre a superfície mais alta. */
  --ink:         #EDF3FC;   /* 16.2:1 */
  --ink-2:       #AFC0D9;   /*  9.6:1 */
  --ink-3:       #93A8C6;   /*  7.2:1 */
  --ink-4:       #7E93B4;   /*  5.6:1 — legendas gravadas */
  --stroke:      #FAF9F9;

  /* tipografia */
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-cond: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --t-display: clamp(2.2rem, 5.2vw, 4.2rem);
  --t-h2:      clamp(1.7rem, 3.4vw, 2.55rem);
  --t-h3:      clamp(1.2rem, 1.8vw, 1.5rem);
  --t-lead:    clamp(1.02rem, 1.2vw, 1.18rem);
  --t-body:    1.0625rem;
  --t-legend:  .78rem;

  /* medidas */
  --shell:  1240px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 6rem;   --s10: 8rem;

  --ease: cubic-bezier(.16,1,.3,1);
  --radius: 3px;
}

/* ---------- 3. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
ul,ol{list-style:none;padding:0}

/* A cor do chassi vive no html para que o palco de fundo (z-index:-1) apareça
   por baixo do body sem nunca deixar branco em lugar nenhum. */
html{background-color:var(--chassis)}

body{
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.62;
  color:var(--ink-2);
  background:transparent;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- palco: o vídeo de fundo -------------------------------------------
   Fica atrás de tudo, fixo, e nunca é o assunto. O clipe já vem desfocado e
   escurecido do arquivo (nada de filter em tela cheia, que repinta a cada
   quadro); aqui em cima entram o escurecimento de segurança, os gradientes
   do chassi e o mesmo grão escovado do resto do site. O resultado lê como
   luz da sala se movendo, não como um vídeo tocando.                      */
.stage{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background-color:var(--chassis);
}
.stage__poster,
.stage video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transform:scale(1.04);        /* esconde a borda mole do desfoque */
}
.stage video{opacity:0;transition:opacity 1.4s var(--ease)}
.stage.is-playing video{opacity:1}
.stage.is-playing .stage__poster{opacity:0;transition:opacity 1.4s var(--ease)}

/*  O escurecimento é calculado contra o pixel mais claro medido nos quatro
    arquivos (140,174,225 — bg-painel), não estimado: mesmo esse pixel, atrás
    da legenda mais fraca e menor do sistema (--ink-3, gravada, sem placa por
    baixo), mantém contraste 4.8:1 — acima do piso de 4.5. Alpha .72/.85
    deixa a textura do vídeo claramente perceptível (24-28% de mistura) sem
    abrir mão da leitura em nenhum canto da página.                         */
.stage::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(130% 70% at 50% -12%, rgba(11,46,102,.34), transparent 62%),
    radial-gradient(90% 55% at 88% 108%, rgba(7,103,253,.09), transparent 60%),
    repeating-linear-gradient(90deg, rgba(190,216,255,.016) 0 1px, transparent 1px 3px),
    radial-gradient(125% 105% at 50% 42%, rgba(2,11,28,.72), rgba(1,6,15,.85) 100%);
}

/* ---------- 4. MATERIAIS ------------------------------------------------- */

/* placa usinada montada sobre o chassi */
.plate{
  position:relative;
  background:
    linear-gradient(180deg, rgba(190,216,255,.030), rgba(190,216,255,0) 140px),
    linear-gradient(176deg, var(--plate-top), var(--plate-bot));
  border:1px solid var(--plate-edge);
  border-radius:var(--radius);
  box-shadow:
    inset 0 1px 0 var(--bevel),
    inset 0 -1px 0 var(--recess),
    0 22px 48px -22px rgba(0,0,0,.9);
  overflow:hidden;
}
/* iluminação especular reativa ao cursor (spotlight físico de chapa metálica) */
.plate::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(126,166,224,.075), transparent 65%);
  opacity:0;transition:opacity .5s var(--ease);z-index:1;
}
.plate:hover::before{opacity:1}
.plate > *{position:relative;z-index:2}
.plate--recessed{
  background:linear-gradient(176deg, #030B19, #02080F);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.75),
    inset 0 -1px 0 rgba(190,216,255,.06);
}
.plate--flush{ box-shadow:inset 0 1px 0 var(--bevel), inset 0 -1px 0 var(--recess); }

/* cruzetas de alinhamento ótico / calibragem industrial */
.crosshair{
  position:absolute;width:9px;height:9px;pointer-events:none;color:var(--rule-strong);
  opacity:.6;z-index:3;
}
.crosshair::before,.crosshair::after{content:'';position:absolute;background:currentColor}
.crosshair::before{top:4px;left:0;right:0;height:1px}
.crosshair::after{left:4px;top:0;bottom:0;width:1px}
.crosshair--tl{top:6px;left:6px}
.crosshair--tr{top:6px;right:6px}
.crosshair--bl{bottom:6px;left:6px}
.crosshair--br{bottom:6px;right:6px}

/* parafusos de fixação */
.fastener{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #22334F 0%, #16233C 40%, #060E1E 100%);
  box-shadow:inset 0 .5px 0 rgba(170,205,255,.30), 0 1px 2px rgba(0,0,0,.8);
  pointer-events:none;
}
.fastener::after{
  content:'';position:absolute;inset:0;margin:auto;width:5px;height:1px;
  background:rgba(0,0,0,.8);transform:rotate(-38deg);
}
.fastener--tl{top:11px;left:11px}   .fastener--tr{top:11px;right:11px}
.fastener--bl{bottom:11px;left:11px}.fastener--br{bottom:11px;right:11px}

/* sulco gravado */
.groove{height:2px;background:linear-gradient(180deg, rgba(0,0,0,.62) 0 1px, rgba(170,205,255,.11) 1px 2px);border:0}

/* régua de aferição */
.ticks{
  height:9px;
  background-image:
    repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 12px);
  background-position:0 0, 0 3px;
  background-size:auto 9px, auto 5px;
  background-repeat:repeat-x;
}

/* legenda gravada na chapa */
.legend{
  font-family:var(--font-cond);
  font-weight:600;
  font-size:var(--t-legend);
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-shadow:0 1px 0 rgba(170,205,255,.09);
}
.legend--signal{color:var(--signal-hi);text-shadow:0 1px 0 rgba(7,103,253,.18)}
.legend--amber{color:var(--amber);text-shadow:0 1px 0 rgba(255,176,32,.16)}

/* lâmpada indicadora */
.lamp{
  position:relative;flex:none;
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #0E1E38, #030A16 72%);
  box-shadow:inset 0 0 0 1px rgba(150,190,250,.22), inset 0 1px 1px rgba(0,0,0,.85);
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.lamp.is-on{
  background:radial-gradient(circle at 38% 32%, #DCEAFF 0%, var(--signal) 52%, var(--signal-deep) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(160,200,255,.55),
    0 0 7px -1px rgba(7,103,253,.9),
    0 0 16px -3px rgba(7,103,253,.55);
}
.lamp--amber.is-on{
  background:radial-gradient(circle at 38% 32%, #FFF0D0 0%, var(--amber) 52%, #B87400 100%);
  box-shadow:inset 0 0 0 1px rgba(255,214,140,.55), 0 0 7px -1px rgba(255,176,32,.85), 0 0 16px -3px rgba(255,176,32,.5);
}
.lamp--ok.is-on{
  background:radial-gradient(circle at 38% 32%, #D6FFEC 0%, var(--ok) 52%, #0F6B44 100%);
  box-shadow:inset 0 0 0 1px rgba(150,255,210,.5), 0 0 7px -1px rgba(52,208,138,.8);
}
.lamp--alert.is-on{
  background:radial-gradient(circle at 38% 32%, #FFDCDC 0%, var(--alert) 52%, #8C1F1F 100%);
  box-shadow:inset 0 0 0 1px rgba(255,180,180,.5), 0 0 7px -1px rgba(255,92,92,.8);
}
.lamp--lg{width:13px;height:13px}

/* ---------- 5. TIPOGRAFIA ------------------------------------------------ */
.display{
  font-family:var(--font-cond);
  font-weight:700;
  font-size:var(--t-display);
  line-height:1.08;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}
h2.section-title{
  font-family:var(--font-cond);font-weight:700;
  font-size:var(--t-h2);line-height:1.02;letter-spacing:-.004em;
  text-transform:uppercase;color:var(--ink);text-wrap:balance;
}
h3.block-title{
  font-family:var(--font-cond);font-weight:600;
  font-size:var(--t-h3);line-height:1.14;letter-spacing:.005em;
  text-transform:uppercase;color:var(--ink);text-wrap:balance;
}
.micro-title{
  font-family:var(--font-cond);font-weight:600;font-size:1.075rem;
  letter-spacing:.045em;text-transform:uppercase;color:var(--ink);line-height:1.25;
  text-wrap:balance;
}
/* ritmo de parágrafo: um valor para toda relação de leitura repetida, em vez
   de margem lançada à mão a cada ocorrência */
.micro-title + p{margin-top:var(--s2)}
h2.section-title + .lead{margin-top:var(--s3)}
p + p{margin-top:var(--s4)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:64ch;text-wrap:pretty}
p{max-width:68ch;text-wrap:pretty}
strong{color:var(--ink);font-weight:600}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.sig{color:var(--signal-hi)}

/* ---------- 6. ESTRUTURA ------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(2rem,4.5vw,3.75rem)}
.section--tight{padding-block:clamp(1.4rem,3vw,2.4rem)}

.skip{
  position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--signal-lift);color:#fff;padding:.6rem 1rem;border-radius:var(--radius);
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{top:var(--s4)}

/* ---------- 7. TRILHO SUPERIOR (NAV) ------------------------------------- */
.rail{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg, rgba(3,12,28,.94), rgba(3,12,28,.88));
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(0,0,0,.6), 0 10px 30px -20px rgba(0,0,0,.9);
}
.rail__inner{
  display:flex;align-items:center;gap:var(--s5);
  height:66px;
}
.brand{position:relative;display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
/* mesma razão do .textlink: o lockup tem 29px de altura, o alvo precisa de 44 */
.brand::after{content:'';position:absolute;inset:-8px -6px}
.brand__mark{width:46px;height:auto;color:var(--stroke)}
.brand__mark path[fill]{fill:var(--signal)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-cond);font-weight:700;font-size:.98rem;letter-spacing:.2em;color:var(--ink);text-transform:uppercase}
.brand__sub{font-family:var(--font-cond);font-weight:500;font-size:.68rem;letter-spacing:.235em;color:var(--ink-4);text-transform:uppercase;margin-top:2px}

.nav{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.nav__link{
  position:relative;display:flex;align-items:center;gap:.45rem;
  padding:.5rem .75rem;text-decoration:none;border-radius:2px;
  font-family:var(--font-cond);font-weight:600;font-size:.88rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;
  transition:color .22s var(--ease), text-shadow .22s var(--ease);
}
.nav__link::before{
  content:'';position:absolute;left:.75rem;right:.75rem;bottom:.2rem;height:2px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::before{transform:scaleX(1)}
.nav__link[aria-current="page"]{
  color:#fff;background:transparent;
  text-shadow:0 0 10px rgba(99,160,255,.45);
}
.nav__link[aria-current="page"]::before{
  transform:scaleX(1);background:var(--signal-hi);
  box-shadow:0 0 8px var(--signal-hi);
}

.rail__status{
  display:flex;align-items:center;gap:.5rem;padding-left:var(--s5);
  border-left:1px solid var(--rule);flex:none;
}
.rail__status .legend{font-size:.72rem;letter-spacing:.16em}

.burger{
  display:none;margin-left:auto;width:44px;height:44px;flex:none;
  background:linear-gradient(180deg,#0A1B38,#050F22);
  border:1px solid var(--plate-edge);border-radius:2px;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--bevel), 0 2px 6px rgba(0,0,0,.6);
  position:relative;
}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink-2);transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- 8. CONTROLES ------------------------------------------------- */
.ctrl{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;padding:.85rem 1.5rem;
  font-family:var(--font-cond);font-weight:600;font-size:.94rem;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .2s;
}
.ctrl:hover{will-change:transform}
.ctrl--primary{
  position:relative;overflow:hidden;
  color:#fff;
  background:linear-gradient(180deg, var(--signal-lift), var(--signal-sink));
  border-color:rgba(150,195,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.35), 0 10px 24px -12px rgba(7,103,253,.75);
}
.ctrl--primary::before{
  content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform:skewX(-24deg);transition:left .6s var(--ease);pointer-events:none;
}
.ctrl--primary:hover::before{left:160%}
.ctrl--primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.35), 0 16px 32px -14px rgba(7,103,253,.9)}
.ctrl--primary:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.ctrl--ghost{
  color:var(--ink);
  background:linear-gradient(180deg, rgba(190,216,255,.07), rgba(190,216,255,.02));
  border-color:var(--rule-strong);
  box-shadow:inset 0 1px 0 var(--bevel);
}
.ctrl--ghost:hover{transform:translateY(-1px);border-color:rgba(126,166,224,.42);background:linear-gradient(180deg, rgba(190,216,255,.11), rgba(190,216,255,.04))}
.ctrl--ghost:active{transform:translateY(1px)}
.ctrl__arrow{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.ctrl:hover .ctrl__arrow{transform:translateX(3px)}

.textlink{
  position:relative;
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--signal-hi);text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(99,160,255,.32);padding:.3rem 0 2px;
  transition:border-color .25s var(--ease), color .25s;
}
/*  O sublinhado precisa ficar colado no texto — é o que o faz ler como link.
    O alvo de toque precisa de 44px. Um não cabe no outro: aumentar o padding
    afastaria a linha da palavra. A área de toque então cresce por fora, em um
    pseudo-elemento centrado, sem mover um único pixel do que se vê.          */
.textlink::before{
  content:'';position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:48px;
}
.textlink:hover{color:#9CC3FF;border-bottom-color:#9CC3FF}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--signal-hi);outline-offset:3px;border-radius:2px;
}

/* ---------- 9. HERO / MESA ----------------------------------------------- */
.hero{position:relative;padding-block:clamp(1.5rem,3.5vw,2.5rem) clamp(1.8rem,4vw,3rem)}
.console{
  position:relative;overflow:hidden;
  padding:clamp(1.5rem,3.4vw,2.75rem);
}
/* luz rasante — o que uma fonte de luz faz ao cruzar chapa escovada.
   Translada em X e nada mais: a placa fica no compositor. */
.console__scan{
  position:absolute;top:-25%;bottom:-25%;left:-62%;width:52%;
  pointer-events:none;z-index:3;opacity:0;
  background:linear-gradient(100deg,
    transparent 0%, rgba(140,190,255,.09) 36%, rgba(214,234,255,.19) 50%,
    rgba(140,190,255,.09) 64%, transparent 100%);
  transform:translateX(0) skewX(-9deg);
}
/* véu de "sem energia": some quando a mesa liga e revela a placa inteira */
.console__power{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:rgba(1,5,12,.82);opacity:0;
  transition:opacity .62s var(--ease);
}
.vx-pre .console__power{opacity:1}
/* faixa de identificação da placa — cromo do instrumento, corre de ponta a ponta */
.console__strip{
  display:flex;align-items:center;gap:var(--s4);
  margin:calc(clamp(1.5rem,3.4vw,2.75rem) * -1) calc(clamp(1.5rem,3.4vw,2.75rem) * -1) 0;
  padding:.7rem clamp(1.5rem,3.4vw,2.75rem);
  background:linear-gradient(180deg, rgba(190,216,255,.05), rgba(0,0,0,.2));
  border-bottom:1px solid var(--rule);
  box-shadow:inset 0 1px 0 var(--bevel), 0 1px 0 rgba(0,0,0,.5);
}
.console__state{display:flex;align-items:center;gap:.5rem;margin-left:auto}

/* chave de movimento — uma chave de painel, que é o que ela é de fato */
.switch{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;
  min-height:40px;padding:.3rem .6rem;
  background:linear-gradient(180deg, rgba(190,216,255,.05), rgba(190,216,255,.012));
  border:1px solid var(--plate-edge);border-radius:2px;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--bevel);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .18s var(--ease);
}
.switch:hover{
  border-color:rgba(126,166,224,.36);
  background:linear-gradient(180deg, rgba(190,216,255,.09), rgba(190,216,255,.03));
}
.switch:active{transform:translateY(1px)}
.switch[aria-checked="true"]{border-color:rgba(99,160,255,.34)}
.switch .legend{font-size:.7rem;letter-spacing:.15em}
/*  Sem JavaScript a chave não liga nem desliga nada, e o aria-checked estático
    mentiria sobre um estado que ela não controla. Um controle que não age não
    deve ser anunciado: ele só existe depois que o script assume.             */
html:not(.js) .switch{display:none}
@media (max-width:660px){
  .switch{min-height:44px}
  /*  A legenda ao lado da lâmpada NÃO some no celular. Escondê-la deixava um
      ponto de 10px colorido sozinho — estado comunicado só por cor, ilegível
      para leitor de tela e sem sentido para quem enxerga. Ela encolhe.       */
  .console__strip{flex-wrap:wrap;row-gap:.45rem}
  /* encolhe pela entreletra, não pelo corpo: a legenda continua acima de 11px */
  .console__state .legend{font-size:.72rem;letter-spacing:.07em}
}

.console__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.75rem,3.4vw,3.25rem);align-items:center;
  padding-top:clamp(2rem,4vw,3.25rem);
}
.display .kw{color:var(--signal-hi)}

/* campo armadilha antisspam — invisível e fora do fluxo de foco */
.honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.hero__lead{margin-top:var(--s5)}
.hero__ctrls{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* rack de módulos */
.rack{display:flex;flex-direction:column;gap:7px}
.rack__item{
  position:relative;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--s4);padding:.95rem 1.1rem;text-decoration:none;
  background:linear-gradient(180deg, rgba(190,216,255,.05), rgba(190,216,255,.012));
  border:1px solid var(--plate-edge);border-radius:2px;
  box-shadow:inset 0 1px 0 var(--bevel);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  overflow:hidden;
}
.rack__item::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--signal);transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s var(--ease);
}
.rack__item--amber::after{background:var(--amber)}
.rack__item:hover,.rack__item:focus-visible{
  transform:translateX(4px);border-color:rgba(126,166,224,.34);
  background:linear-gradient(180deg, rgba(190,216,255,.085), rgba(190,216,255,.025));
  box-shadow:inset 0 1px 0 rgba(158,196,246,.24), 0 12px 26px -18px rgba(0,0,0,.9);
}
.rack__item:hover::after,.rack__item:focus-visible::after{transform:scaleY(1)}
.rack__id{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:2.6rem;flex:none}
.rack__icon{width:20px;height:20px;color:var(--ink-4);flex:none;transition:color .3s var(--ease)}
.rack__item:hover .rack__icon,.rack__item:focus-visible .rack__icon{color:var(--signal-hi)}
.rack__item--amber:hover .rack__icon,.rack__item--amber:focus-visible .rack__icon{color:var(--amber)}
.rack__desig{
  font-family:var(--font-cond);font-weight:700;font-size:.76rem;letter-spacing:.16em;
  color:var(--ink-4);text-align:center;
}
.rack__body{min-width:0}
.rack__name{font-family:var(--font-cond);font-weight:600;font-size:1.075rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);line-height:1.2}
.rack__spec{font-size:.86rem;color:var(--ink-3);line-height:1.4;margin-top:2px}
.rack__lamps{display:flex;align-items:center;gap:.55rem}
.rack__chev{width:14px;height:14px;color:var(--ink-4);transition:transform .3s var(--ease),color .3s}
.rack__item:hover .rack__chev{transform:translateX(3px);color:var(--signal-hi)}

/* rodapé de aferição do console */
.console__rail{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem var(--s6);
  margin-top:clamp(1.5rem,3vw,2.25rem);padding-top:var(--s4);
  border-top:1px solid var(--rule);
}
.console__rail dl{display:flex;align-items:baseline;gap:.55rem;margin:0}
.console__rail dt{font-family:var(--font-cond);font-weight:600;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-4)}
.console__rail dd{margin:0;font-family:var(--font-cond);font-weight:600;font-size:.92rem;letter-spacing:.07em;color:var(--ink);text-transform:uppercase}

/* cabeçalho de página interna — mesma placa, composição mais curta */
.console--page .console__grid{
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:end;
  padding-top:clamp(1.5rem,3vw,2.5rem);
}
.console--page .display{font-size:clamp(2.35rem,5.6vw,4rem)}
@media (max-width:1080px){ .console--page .console__grid{grid-template-columns:1fr;align-items:start} }

/* trilha de etapas — a ordem é a informação */
.steps{position:relative;display:flex;flex-direction:column}
.steps > li{position:relative;padding:0 0 var(--s6) 2.6rem}
.steps > li:last-child{padding-bottom:0}
.steps > li::before{
  content:'';position:absolute;left:0;top:.34em;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #DCEAFF 0%, var(--signal) 52%, var(--signal-deep) 100%);
  box-shadow:inset 0 0 0 1px rgba(160,200,255,.5), 0 0 8px -1px rgba(7,103,253,.75);
}
.steps > li::after{
  content:'';position:absolute;left:6px;top:calc(.34em + 17px);bottom:.4rem;width:1px;
  background:linear-gradient(180deg, var(--rule-strong), rgba(126,166,224,.05));
}
.steps > li:last-child::after{display:none}
.steps--amber > li::before{
  background:radial-gradient(circle at 38% 32%, #FFF0D0 0%, var(--amber) 52%, #B87400 100%);
  box-shadow:inset 0 0 0 1px rgba(255,214,140,.5), 0 0 8px -1px rgba(255,176,32,.7);
}
.steps__stage{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin-bottom:.3rem}
.steps__when{font-family:var(--font-cond);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.steps p{color:var(--ink-3);font-size:.97rem}

/* pares de aptidão: para quem é / para quem não é */
.fit{display:flex;flex-direction:column;gap:.8rem}
.fit li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;line-height:1.5}
.fit svg{width:18px;height:18px;flex:none;margin-top:.22em}
.fit--yes svg{color:var(--ok)}
.fit--no svg{color:#8496B3}
.fit--no li{color:var(--ink-3)}

/* ---------- 10. CABEÇALHO DE SEÇÃO --------------------------------------- */
.shead{display:flex;flex-direction:column;gap:var(--s4);margin-bottom:clamp(2rem,4vw,3rem);max-width:62ch}
.shead__mark{display:flex;align-items:center;gap:.6rem}
.shead__icon{width:16px;height:16px;color:var(--signal-hi);flex:none}
.shead__icon--amber{color:var(--amber)}

/* glifo planilha → mostrador — visualiza a própria tese da página inicial:
   a grade que a empresa usa hoje resolve para o instrumento que ela precisa. */
.panorama__glyph{width:100%;max-width:250px;height:auto;margin-top:var(--s6)}
.panorama__glyph .pg-grid{stroke:var(--ink-4);stroke-width:1.3;fill:none}
.panorama__glyph .pg-arrow{stroke:var(--signal-hi);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.panorama__glyph .pg-dial{stroke:var(--signal-hi);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* trilha de trajetória — variante circular e autônoma do diagrama de fluxo,
   para sequências de posição (1ª a 4ª) em vez de etapas de processo. Não
   herda de .flow: aquele exige largura mínima de 660px para caber os nós
   retangulares mais largos, e esta trilha é deliberadamente compacta. */
.trail{padding:clamp(1.25rem,2.4vw,1.9rem)}
.trail svg{width:100%;height:auto;display:block}
.trail .link{stroke:var(--rule-strong);stroke-width:1.5;fill:none}
.trail circle.node-plate{fill:#08172F;stroke:var(--rule-strong);stroke-width:1}
.trail circle.node-plate--ai{fill:rgba(7,103,253,.16);stroke:rgba(99,160,255,.55)}
.trail .node-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;fill:var(--ink)}
.trail .node-sub{font-family:'Barlow',sans-serif;font-size:12px;fill:var(--ink-3)}

/* ---------- 11. BLOCOS DE CONTEÚDO --------------------------------------- */
.split{display:grid;gap:clamp(1.25rem,2.6vw,2rem)}
.split--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split--aside{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
.split--lead{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}

.panel{padding:clamp(1.35rem,2.4vw,2rem)}
.panel__head{display:flex;align-items:center;gap:.7rem;margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.panel__head .legend{flex:1}
.panel > * + *{margin-top:var(--s4)}
.panel__head + *{margin-top:0}

/* cabeçalho leve: ícone + legenda solta, sem borda nem lâmpada — para um
   rótulo dentro de uma placa recessada que não é um .panel__head completo */
.loose-head{display:flex;align-items:center;gap:.5rem;margin-bottom:var(--s3)}
.loose-head .legend{margin:0}

/* ícone de identificação no cabeçalho de placa — o que a lâmpada não consegue
   dizer sozinha: qual é o assunto, não só que o bloco está ativo */
.panel__head-icon{width:18px;height:18px;color:var(--signal-hi);flex:none}
.panel__head-icon--ok{color:var(--ok)}
.panel__head-icon--muted{color:var(--ink-4)}
.panel__head-icon--amber{color:var(--amber)}

/* selo de frente — usado nos cabeçalhos de seção que abrem GST/IA/WEB/SIS */
.frente-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:2px;color:var(--signal-hi);
  background:linear-gradient(180deg, rgba(190,216,255,.07), rgba(190,216,255,.015));
  border:1px solid var(--plate-edge);box-shadow:inset 0 1px 0 var(--bevel);
}
.frente-badge svg{width:19px;height:19px}
.frente-badge--amber{color:var(--amber)}

/* ícone de bloco-miniatura — as colunas de 3 que resumem um subtema */
.mini-icon{width:22px;height:22px;color:var(--signal-hi);margin-bottom:.65rem;display:block}

/* lista gravada com marcador quadrado */
.spec{display:flex;flex-direction:column;gap:.85rem}
.spec li{position:relative;padding-left:1.5rem;color:var(--ink-2);line-height:1.55}
.spec li::before{
  content:'';position:absolute;left:0;top:.58em;width:7px;height:7px;
  background:var(--signal);
  box-shadow:0 0 8px -1px rgba(7,103,253,.7);
}
.spec--amber li::before{background:var(--amber);box-shadow:0 0 8px -1px rgba(255,176,32,.6)}
.spec strong{display:block;color:var(--ink);font-weight:600}

/* registro tabular gravado */
.register{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;table-layout:auto}
.register th,.register td{text-align:left;padding:.85rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
.register th:last-child,.register td:last-child{text-align:right}
.register thead th{
  font-family:var(--font-cond);font-weight:600;font-size:.73rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-4);border-bottom-color:var(--rule-strong);
  padding-bottom:.6rem;
}
.register tbody tr:last-child td{border-bottom:0}
.register td:first-child{color:var(--ink);font-weight:500}
.register .grade{
  font-family:var(--font-cond);font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--signal-hi);white-space:normal;line-height:1.4;word-break:normal;display:inline-block;text-align:right;
}
.register .grade--ok{color:var(--ok)}
.register .grade--prazo{color:var(--amber)}
.register .grade--caveat{color:var(--ink-3)}

/* ---------- 12. MÓDULO DE DEMONSTRAÇÃO ----------------------------------- */
.demo{padding:clamp(1.25rem,2.4vw,1.9rem)}
.demo__top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin-bottom:var(--s5)}
/*  A etiqueta diz que os dados são fictícios — informação necessária, e por
    isso ela fica. Em âmbar era o elemento mais alto da página e roubava a
    primeira fixação do próprio mostrador que veio provar alguma coisa. Em
    tinta gravada continua legível e honesta, sem gritar antes do instrumento. */
.demo__tag{
  display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .6rem;
  border:1px solid var(--rule-strong);background:rgba(0,0,0,.3);border-radius:2px;
  font-family:var(--font-cond);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.seg{display:flex;gap:0;margin-left:auto;border:1px solid var(--plate-edge);border-radius:2px;overflow:hidden;background:rgba(0,0,0,.3)}
.seg button{
  min-height:46px;padding:.5rem 1rem;background:transparent;border:0;cursor:pointer;
  font-family:var(--font-cond);font-weight:600;font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
  transition:background .25s var(--ease), color .25s;
  border-right:1px solid var(--plate-edge);
}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink);background:rgba(190,216,255,.05)}
.seg button[aria-pressed="true"]{
  color:#fff;background:linear-gradient(180deg,var(--signal-lift),var(--signal-sink));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.14);
  transform:translateY(1px);
}

.readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin-bottom:var(--s5)}
.readout{background:linear-gradient(180deg,#040E1F,#020911);padding:.95rem 1rem}
.readout dt{font-family:var(--font-cond);font-weight:600;font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:.35rem}
.readout dd{margin:0;font-family:var(--font-cond);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.readout dd .unit{font-size:.55em;color:var(--ink-3);margin-left:.15em}
.readout--sig dd{color:var(--signal-hi)}

.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid-line{stroke:var(--rule);stroke-width:1}
.chart .axis-label{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:.11em;fill:var(--ink-4);text-transform:uppercase}
.chart .val-label{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums}
.chart .bar{transition:height .75s var(--ease), y .75s var(--ease), fill .35s var(--ease)}
.chart .bar-a{fill:var(--signal-deep)}
.chart .bar-b{fill:var(--signal)}
.chart__key{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule)}
.chart__key span{display:flex;align-items:center;gap:.45rem;font-family:var(--font-cond);font-weight:600;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.chart__key i{width:11px;height:11px;flex:none;border-radius:1px}

/* ---------- 13. LINHA DO TEMPO DE 7 DIAS --------------------------------- */
.timeline{padding:clamp(1.25rem,2.4vw,1.9rem)}
.tl__track{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:var(--s5) 0}
.tl__stop{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:.85rem .3rem .7rem;background:linear-gradient(180deg,rgba(190,216,255,.045),rgba(190,216,255,.01));
  border:1px solid var(--plate-edge);border-radius:2px;cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.tl__stop:hover{background:linear-gradient(180deg,rgba(190,216,255,.09),rgba(190,216,255,.03));transform:translateY(-2px)}
.tl__stop[aria-selected="true"],
.tl__stop[aria-selected="true"]:hover{
  border-color:rgba(255,176,32,.5);
  background:linear-gradient(180deg,rgba(255,176,32,.13),rgba(255,176,32,.05));
  box-shadow:inset 0 2px 7px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,214,140,.22);
  transform:translateY(1px);
}
.tl__day{font-family:var(--font-cond);font-weight:700;font-size:1.15rem;letter-spacing:.06em;color:var(--ink);line-height:1}
.tl__stop[aria-selected="true"] .tl__day{color:var(--amber)}
.tl__label,.tl__mini{font-family:var(--font-cond);font-weight:600;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);text-align:center;line-height:1.2}
.tl__stop[aria-selected="true"] .tl__label,.tl__stop[aria-selected="true"] .tl__mini{color:rgba(255,200,120,.9)}
.tl__detail{padding:clamp(1.1rem,2.2vw,1.6rem);min-height:190px}
.tl__detail .legend{display:block;margin-bottom:.5rem}

/* ---------- 14. FLUXO DE AUTOMAÇÃO --------------------------------------- */
/*  O diagrama tem 660px de largura mínima e o celular tem 351px de área útil.
    Antes ele rolava na horizontal sem nenhuma pista disso: a metade direita —
    onde fica o ramo tracejado da exceção humana, que é o argumento inteiro
    desta página — simplesmente não existia para quem estava no telefone.
    Agora a rolagem é dita em duas linguagens: uma máscara na borda direita
    mostra que a chapa continua, e uma legenda gravada diz em português o que
    fazer. As duas só aparecem quando há de fato o que rolar.                 */
.flow{position:relative;padding:clamp(1.25rem,2.4vw,1.9rem)}
.flow__scroll{overflow-x:auto;overscroll-behavior-x:contain}
.flow__scroll svg{min-width:660px}
.flow::after{
  content:'';position:absolute;top:1px;right:1px;bottom:1px;width:56px;
  pointer-events:none;border-radius:0 var(--radius) var(--radius) 0;
  background:linear-gradient(90deg, rgba(3,12,29,0), rgba(3,12,29,.94));
  opacity:0;transition:opacity .3s var(--ease);
}
.flow.is-scrollable::after{opacity:1}
.flow.is-scrollable.is-at-end::after{opacity:0}
.flow__hint{
  display:none;align-items:center;gap:.45rem;
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule);
}
.flow.is-scrollable .flow__hint{display:flex}
.flow__hint svg{width:14px;height:14px;flex:none;color:var(--signal-hi)}
.flow .node-plate{fill:#08172F;stroke:var(--rule-strong);stroke-width:1}
.flow .node-plate--ai{fill:rgba(7,103,253,.14);stroke:rgba(99,160,255,.5)}
.flow .node-label{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;fill:var(--ink);text-transform:uppercase}
.flow .node-sub{font-family:'Barlow',sans-serif;font-size:12px;fill:var(--ink-3)}
.flow .link{stroke:var(--rule-strong);stroke-width:1.5;fill:none}
.flow .pulse{stroke:var(--signal);stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:26 300;filter:drop-shadow(0 0 4px rgba(7,103,253,.85))}

/* ---------- 15. FORMULÁRIO ----------------------------------------------- */
.form{display:grid;gap:var(--s4)}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-family:var(--font-cond);font-weight:600;font-size:.77rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.field .req{color:var(--signal-hi)}
.input,.select,.textarea{
  width:100%;min-height:50px;padding:.8rem .9rem;
  background:linear-gradient(180deg,#020A16,#03101F);
  border:1px solid var(--rule);border-radius:2px;color:var(--ink);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.textarea{min-height:132px;resize:vertical;line-height:1.55}
.input::placeholder,.textarea::placeholder{color:#8095B5}
.input:hover,.select:hover,.textarea:hover{border-color:var(--rule-strong)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--signal);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 3px rgba(7,103,253,.22);
  background:linear-gradient(180deg,#030D1D,#051428);
}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237A8FAE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:12px;
  padding-right:2.5rem;
}
.select option{background:#04101F;color:var(--ink)}
.field--invalid .input,.field--invalid .select,.field--invalid .textarea{
  border-color:var(--alert);box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 3px rgba(255,92,92,.18);
}
.field__error{
  display:none;align-items:flex-start;gap:.4rem;
  font-size:.85rem;line-height:1.4;color:#FF9494;
}
.field--invalid .field__error{display:flex}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s2)}
.form__note{font-size:.84rem;color:var(--ink-4);max-width:40ch;line-height:1.45}

.status{
  display:none;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;border-radius:2px;
  border:1px solid var(--rule);background:rgba(0,0,0,.32);
  font-size:.93rem;line-height:1.5;color:var(--ink-2);
}
.status.is-shown{display:flex}
.status--ok{border-color:rgba(52,208,138,.42);background:rgba(52,208,138,.09);color:#B8F2D6}
.status--err{border-color:rgba(255,92,92,.42);background:rgba(255,92,92,.09);color:#FFC3C3}
.status strong{color:inherit;display:block;font-family:var(--font-cond);letter-spacing:.09em;text-transform:uppercase;font-size:.88rem;margin-bottom:.15rem}
.ctrl.is-busy{pointer-events:none;opacity:.72}

/* ---------- 16. PLACA DE PERFIL ------------------------------------------ */
.portrait{
  position:relative;border-radius:2px;overflow:hidden;
  border:1px solid var(--plate-edge);
  box-shadow:inset 0 1px 0 var(--bevel), 0 24px 48px -26px rgba(0,0,0,.95);
  background:#04101F;
}
.portrait img{width:100%;height:auto;display:block;filter:saturate(.92) contrast(1.04)}
.portrait::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(2,11,28,0) 55%, rgba(2,11,28,.55) 100%),
             repeating-linear-gradient(90deg, rgba(190,216,255,.02) 0 1px, transparent 1px 3px);
}
.cert{display:flex;flex-direction:column;gap:8px}
.cert li{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  padding:.85rem .95rem;border:1px solid var(--plate-edge);border-radius:2px;
  background:linear-gradient(180deg,rgba(190,216,255,.045),rgba(190,216,255,.012));
  box-shadow:inset 0 1px 0 var(--bevel);
}
.cert__icon{width:20px;height:20px;color:var(--signal-hi);flex:none;margin-top:1px}
/*  Versalete é a voz das LEGENDAS deste sistema — rótulos curtos, gravados na
    chapa. "Qualificação Profissional em Gestão de Segurança da Informação" tem
    62 caracteres: é um título, não uma legenda, e em caixa alta com entrelinha
    1.25 vira a passagem mais densa do site. Mantém a família condensada e o
    peso (o mundo continua o mesmo); solta a caixa e a entrelinha.            */
.cert__t{font-family:var(--font-cond);font-weight:600;font-size:1.06rem;letter-spacing:.012em;color:var(--ink);line-height:1.34;text-wrap:balance}
.cert__d{font-size:.85rem;color:var(--ink-3);line-height:1.45;margin-top:2px}

/* ---------- 17. REGISTRO DE OPERAÇÕES (CASES REAIS ENTREGUES) ----------- */
.records-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.15rem,2.4vw,1.8rem);
  margin-top:var(--s4);
}
.record{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.2rem,2.2vw,1.6rem);
  background:linear-gradient(176deg,#030C19,#010710);
  border:1px solid var(--plate-edge);border-radius:2px;
  box-shadow:inset 0 1px 0 var(--bevel), 0 20px 40px -22px rgba(0,0,0,.9);
  transition:border-color .28s var(--ease), transform .25s var(--ease), box-shadow .28s, opacity .3s;
}
.record:hover{
  border-color:rgba(126,166,224,.38);
  box-shadow:inset 0 1px 0 rgba(158,196,246,.3), 0 24px 48px -20px rgba(0,0,0,.95), 0 0 16px -6px rgba(7,103,253,.3);
  transform:translateY(-2px);
}
.record__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;padding-bottom:.65rem;border-bottom:1px solid var(--rule);
  margin-bottom:var(--s3);
}
.record__tag{
  font-family:var(--font-cond);font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--signal-hi);
  background:var(--signal-wash);padding:.18rem .45rem;border-radius:2px;
  border:1px solid rgba(99,160,255,.2);
}
.record__tag--amber{color:var(--amber);background:var(--amber-wash);border-color:rgba(255,176,32,.25)}
.record__title{
  font-family:var(--font-cond);font-weight:600;font-size:1.14rem;
  letter-spacing:.025em;text-transform:uppercase;color:var(--ink);
  line-height:1.24;margin-bottom:var(--s3);
}
.record dl{display:grid;gap:.65rem;margin:0;font-size:.91rem}
.record dt{
  font-family:var(--font-cond);font-weight:600;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);
}
.record dd{
  margin:.1rem 0 0;color:var(--ink-2);line-height:1.48;
}
.record dd strong{color:var(--ink)}
.record__stack{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:var(--s3);
  border-top:1px solid var(--rule);
}
.record__pill{
  font-family:var(--font-cond);font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);background:rgba(190,216,255,.04);
  padding:.15rem .45rem;border-radius:2px;border:1px solid var(--rule);
}

/* ---------- 17b. MOSTRADORES E MOCKUPS DE SOFTWARE ---------------------- */
.mockup-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.25rem,2.8vw,2.25rem);
  margin-top:var(--s5);
}
.mockup-frame{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(176deg,#030C19,#010710);
  border:1px solid var(--plate-edge);border-radius:3px;
  box-shadow:inset 0 1px 0 var(--bevel), 0 24px 48px -24px rgba(0,0,0,.95);
  overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.mockup-frame:hover{
  border-color:rgba(126,166,224,.4);
  box-shadow:inset 0 1px 0 rgba(158,196,246,.3), 0 28px 56px -20px rgba(0,0,0,.95), 0 0 20px -8px rgba(7,103,253,.35);
  transform:translateY(-2px);
}
.mockup-frame__bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem 1rem;background:linear-gradient(180deg,rgba(190,216,255,.05),rgba(0,0,0,.35));
  border-bottom:1px solid var(--rule);
}
.mockup-frame__dots{display:flex;align-items:center;gap:6px}
.mockup-frame__dot{width:7px;height:7px;border-radius:50%;background:rgba(126,166,224,.28)}
.mockup-frame__dot:nth-child(1){background:rgba(255,92,92,.65)}
.mockup-frame__dot:nth-child(2){background:rgba(255,176,32,.65)}
.mockup-frame__dot:nth-child(3){background:rgba(52,208,138,.65)}
.mockup-frame__body{
  position:relative;overflow:hidden;background:#020814;
  aspect-ratio:16/9;
}
.mockup-frame__img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.mockup-frame:hover .mockup-frame__img{
  transform:scale(1.025);
}
.mockup-frame__foot{
  padding:1rem 1.15rem;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.5));
  border-top:1px solid var(--rule);
}
.mockup-frame__title{
  font-family:var(--font-cond);font-weight:600;font-size:1.02rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  margin-bottom:3px;
}
.mockup-frame__desc{
  font-size:.86rem;color:var(--ink-3);line-height:1.45;
}

/* ---------- 18. RODAPÉ --------------------------------------------------- */
.foot{border-top:1px solid var(--rule);margin-top:clamp(3rem,7vw,6rem);background:linear-gradient(180deg,#020B1C,#01060F)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:clamp(1.75rem,4vw,3rem);padding-block:clamp(2.5rem,5vw,3.5rem)}
.foot__brand{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.foot__mark{width:78px;color:var(--stroke)}
.foot__mark path[fill]{fill:var(--signal)}
.foot .foot__h{font-family:var(--font-cond);font-weight:600;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s4)}
.foot__list{display:flex;flex-direction:column}
/* min-height dá o alvo de toque de 44px sem inflar o ritmo vertical do rodapé */
.foot__list a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink-2);text-decoration:none;transition:color .22s var(--ease);font-size:.95rem;
}
.foot__list a:hover{color:var(--signal-hi)}
.foot__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s5);
  padding-block:var(--s5);border-top:1px solid var(--rule);
  font-size:.88rem;color:var(--ink-4);
}
.foot__legal .num{letter-spacing:.04em}

/* CNPJ copiável — um dado que o dono de PME realmente precisa colar em nota
   fiscal e contrato; copiar em um toque é utilidade, não enfeite */
.foot__copy{
  display:inline-flex;align-items:center;min-height:44px;
  background:transparent;border:0;padding:0;margin:0;cursor:pointer;
  transition:color .2s var(--ease);
}
.foot__copy:hover,.foot__copy:focus-visible{color:var(--signal-hi)}
.foot__copy.is-copied{color:var(--ok)}

/* ---------- 18b. INSTRUMENTAÇÃO E TELEMETRIA AO VIVO -------------------- */
.telemetry-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem var(--s4);
  font-family:var(--font-cond);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.telemetry-item{
  display:inline-flex;align-items:center;gap:.45rem;
}
.telemetry-dot{
  width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 7px var(--ok);animation:vx-pulse-dot 2.2s ease-in-out infinite;
  flex:none;
}
@keyframes vx-pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.85)}
}
.telemetry-clock{
  font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;
}
.telemetry-tag{
  padding:.15rem .45rem;border-radius:2px;border:1px solid var(--rule);
  background:rgba(190,216,255,.04);color:var(--ink-2);
}

/* ---------- 18c. SIMULADOR DE DIAGNÓSTICO OPERACIONAL -------------------- */
.sim-matrix{
  position:relative;
  margin-top:var(--s5);
  padding:clamp(1.25rem,2.4vw,2rem);
}
.sim-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);
  gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:var(--s3);
  align-items:start;
}
.sim-group{
  display:flex;flex-direction:column;gap:var(--s2);
  margin-bottom:var(--s3);
}
.sim-label{
  font-family:var(--font-cond);font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.sim-options{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
}
.sim-btn{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:.8rem .95rem;background:linear-gradient(180deg,rgba(190,216,255,.045),rgba(190,216,255,.012));
  border:1px solid var(--plate-edge);border-radius:2px;cursor:pointer;text-align:left;
  box-shadow:inset 0 1px 0 var(--bevel);
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .18s var(--ease),box-shadow .22s;
  overflow:hidden;
}
.sim-btn::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--signal);
  transform:scaleY(0);transform-origin:bottom;transition:transform .25s var(--ease);
}
.sim-btn:hover{
  border-color:rgba(126,166,224,.36);
  background:linear-gradient(180deg,rgba(190,216,255,.085),rgba(190,216,255,.025));
  transform:translateY(-1px);
}
.sim-btn.is-active{
  border-color:rgba(99,160,255,.45);
  background:linear-gradient(180deg,rgba(7,103,253,.18),rgba(7,103,253,.06));
  box-shadow:inset 0 1px 0 rgba(158,196,246,.32), 0 0 16px -4px rgba(7,103,253,.4);
  transform:translateY(1px);
}
.sim-btn.is-active::before{transform:scaleY(1)}
.sim-btn__title{
  font-family:var(--font-cond);font-weight:600;font-size:.92rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);line-height:1.2;
}
.sim-btn.is-active .sim-btn__title{color:#fff}
.sim-btn__desc{font-size:.78rem;color:var(--ink-4);line-height:1.3}
.sim-btn.is-active .sim-btn__desc{color:var(--ink-2)}

.sim-display{
  position:relative;display:flex;flex-direction:column;gap:var(--s3);
  padding:clamp(1.2rem,2.2vw,1.6rem);
  background:linear-gradient(176deg,#030C19,#010710);
  border:1px solid var(--plate-edge);border-radius:2px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8), inset 0 -1px 0 rgba(190,216,255,.06);
}
.sim-display__head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:var(--s2);border-bottom:1px solid var(--rule);
}
.sim-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-cond);font-weight:700;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-hi);background:var(--signal-wash);
  padding:.2rem .55rem;border-radius:2px;border:1px solid rgba(7,103,253,.35);
}
.sim-badge--amber{
  color:var(--amber);background:rgba(255,176,32,.08);border-color:rgba(255,176,32,.35);
}
.sim-metric{
  display:grid;grid-template-columns:1fr auto;gap:var(--s2);align-items:baseline;
}
.sim-metric__lbl{
  font-family:var(--font-cond);font-size:.76rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
.sim-metric__val{
  font-family:var(--font-cond);font-size:1.15rem;font-weight:700;
  color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;
}
.sim-metric__val--amber{color:var(--amber)}
.sim-progress{
  position:relative;height:7px;background:rgba(0,0,0,.6);border-radius:2px;
  border:1px solid var(--rule);overflow:hidden;margin-top:.2rem;
}
.sim-progress__bar{
  height:100%;background:linear-gradient(90deg,var(--signal-deep),var(--signal-hi));
  border-radius:1px;transition:width .55s var(--ease);box-shadow:0 0 8px rgba(7,103,253,.6);
}
.sim-summary{
  font-size:.9rem;line-height:1.5;color:var(--ink-2);
  border-top:1px solid var(--rule);padding-top:var(--s3);
}
.sim-summary strong{color:var(--ink)}
.sim-action{margin-top:var(--s2)}

/* ---------- 18d. FUNIL DE EVOLUÇÃO EMPRESARIAL (VX 3.0) ------------------- */
.funnel-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);
  margin-top:var(--s4);position:relative;
}
.funnel-step{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.25rem,2.2vw,1.75rem);min-height:100%;
}
.funnel-step__head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--rule);
}
.funnel-step__num{
  font-family:var(--font-cond);font-weight:700;font-size:1.5rem;
  letter-spacing:.05em;color:var(--ink-3);line-height:1;
}
.funnel-step--featured{
  border-color:rgba(7,103,253,.45);
  box-shadow:inset 0 1px 0 rgba(190,216,255,.2), 0 0 28px -8px rgba(7,103,253,.35);
}
.funnel-step__title{
  font-family:var(--font-cond);font-size:1.25rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:var(--ink);
  margin-bottom:var(--s2);line-height:1.2;
}
.funnel-step__desc{
  font-size:.9rem;line-height:1.5;color:var(--ink-2);margin-bottom:var(--s3);
}
.funnel-step__foot{
  margin-top:auto;padding-top:var(--s3);border-top:1px dashed var(--rule);
}

/* ---------- 18e. VITRINE DE SOFTWARES SOB MEDIDA (6 EXEMPLOS) ------------ */
.sw-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);
  margin-top:var(--s4);
}
.sw-card{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.2rem,2vw,1.6rem);
  transition:border-color .28s var(--ease),transform .24s var(--ease),box-shadow .28s;
}
.sw-card:hover{
  border-color:rgba(126,166,224,.4);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(190,216,255,.2), 0 12px 28px -10px rgba(0,0,0,.8), 0 0 20px -5px rgba(7,103,253,.3);
}
.sw-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-bottom:var(--s3);
}
.sw-card__icon{
  width:32px;height:32px;border-radius:2px;display:flex;align-items:center;justify-content:center;
  background:rgba(7,103,253,.12);border:1px solid rgba(7,103,253,.3);color:var(--signal-hi);
}
.sw-card__icon svg{width:18px;height:18px}
.sw-card__badge{
  font-family:var(--font-cond);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal-hi);padding:.15rem .45rem;border-radius:2px;
  background:rgba(7,103,253,.1);border:1px solid rgba(7,103,253,.25);
}
.sw-card__title{
  font-family:var(--font-cond);font-size:1.15rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);margin-bottom:var(--s2);line-height:1.25;
}
.sw-card__lead{
  font-size:.88rem;line-height:1.5;color:var(--ink-2);margin-bottom:var(--s3);
}
.sw-card__spec{
  list-style:none;padding:0;margin:0 0 var(--s3) 0;display:flex;flex-direction:column;gap:.4rem;
}
.sw-card__spec li{
  position:relative;padding-left:1.1rem;font-size:.84rem;color:var(--ink-3);line-height:1.4;
}
.sw-card__spec li::before{
  content:'';position:absolute;left:0;top:.48em;width:5px;height:5px;
  background:var(--signal);border-radius:1px;box-shadow:0 0 5px var(--signal);
}
.sw-card__foot{
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;
}

/* ---------- 18f. SUÍTE INTEGRADA (ALL-IN-ONE) --------------------------- */
.suite-panel{
  position:relative;margin-top:var(--s5);padding:clamp(1.4rem,2.8vw,2.2rem);
  border-color:rgba(7,103,253,.45);
  background:linear-gradient(178deg,rgba(7,22,48,.92),rgba(2,11,28,.98));
  box-shadow:inset 0 1px 0 rgba(190,216,255,.25), 0 0 32px -6px rgba(7,103,253,.35);
}
.suite-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(1.25rem,2.5vw,2.5rem);align-items:center;
}
.suite-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3);
}
.suite-chip{
  display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .65rem;
  background:rgba(190,216,255,.05);border:1px solid rgba(126,166,224,.25);border-radius:2px;
  font-family:var(--font-cond);font-size:.82rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);
}
.suite-chip .lamp{width:5px;height:5px}

/* ---------- 18g. BENCHMARKS E MÉTRICAS REAIS DE TEMPO (IA) --------------- */
.benchmark-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);
  margin-top:var(--s4);
}
.benchmark-card{
  position:relative;display:flex;flex-direction:column;padding:clamp(1.2rem,2vw,1.6rem);
}
.benchmark-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--rule);
}
.benchmark-card__task{
  font-family:var(--font-cond);font-size:1.1rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);line-height:1.25;
}
.benchmark-compare{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.75rem;align-items:center;
  margin:var(--s3) 0;padding:.8rem 1rem;background:rgba(0,0,0,.45);
  border:1px solid var(--rule);border-radius:2px;
}
.benchmark-side{display:flex;flex-direction:column;gap:2px}
.benchmark-side__label{
  font-family:var(--font-cond);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);
}
.benchmark-side__val{
  font-family:var(--font-cond);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.22rem);
  letter-spacing:.02em;color:var(--ink-2);word-break:break-word;
}
.benchmark-side--after .benchmark-side__val{
  color:var(--ok);text-shadow:0 0 10px rgba(52,208,138,.35);
}
.benchmark-side--after .benchmark-side__label{color:var(--ok)}
.benchmark-arrow{color:var(--ink-4);display:flex;align-items:center;justify-content:center}
.benchmark-saving{
  display:inline-flex;align-items:center;gap:.45rem;padding:.2rem .6rem;
  background:rgba(52,208,138,.1);border:1px solid rgba(52,208,138,.3);border-radius:2px;
  font-family:var(--font-cond);font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ok);margin-top:auto;
}

/* Badge Google Ads */
.badge--ads{
  display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .55rem;
  background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.4);border-radius:2px;
  font-family:var(--font-cond);font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);
}

/* ---------- 18h. BADGE FLUTUANTE DE DISPONIBILIDADE --------------------- */
.float-pill{
  position:fixed;bottom:var(--s5);right:var(--s5);z-index:90;
  display:inline-flex;align-items:center;gap:.65rem;padding:.65rem 1.15rem;
  background:linear-gradient(180deg,rgba(7,22,48,.92),rgba(3,12,29,.94));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(126,166,224,.32);border-radius:2px;
  box-shadow:0 16px 36px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(158,196,246,.25);
  color:var(--ink);font-family:var(--font-cond);font-weight:600;font-size:.82rem;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  transform:translateY(24px);opacity:0;pointer-events:none;
  transition:transform .35s var(--ease),opacity .35s var(--ease),border-color .25s var(--ease),box-shadow .25s;
}
.float-pill.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.float-pill:hover{
  border-color:var(--signal-hi);box-shadow:0 18px 40px -10px rgba(7,103,253,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateY(-2px);
}
.float-pill__dot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none;
}
.float-pill__arrow{width:14px;height:14px;color:var(--signal-hi);transition:transform .25s var(--ease);flex:none}
.float-pill:hover .float-pill__arrow{transform:translateX(3px)}

/* ---------- 18i. CHAVE DE ÁUDIO TÁTIL ----------------------------------- */
.switch--audio{min-height:36px;padding:.25rem .55rem}
.switch--audio .lamp{width:8px;height:8px}
.switch--audio .legend{font-size:.68rem;letter-spacing:.12em}

/* ---------- 19. MOVIMENTO ------------------------------------------------ */
/*  TESE: a mesa recebe energia e faz autoteste — a coisa que um painel de
    controle real faz ao ligar, e que nenhum outro site teria motivo para fazer.
    Energia sobe, uma luz rasante cruza a chapa, TODAS as lâmpadas acendem
    juntas (teste de lâmpada: o operador confere se alguma queimou), apagam, e
    então cada uma assume seu estado verdadeiro em sequência.

    Acontece UMA vez por chegada ao site. Navegar entre páginas não repete a
    partida — só a sequência curta de lâmpadas.

    Rolar a página não repete o boot inteiro, mas também não fica muda: cada
    família de superfície entra em operação com o movimento do seu próprio
    material — nunca a mesma entrada genérica repetida seção após seção. As
    lâmpadas continuam sendo a última coisa a acender, depois que o bloco
    assenta, nunca antes.                                                     */

/* --- 19.1 Partida ------------------------------------------------------- */
@keyframes vx-rake{
  0%  {opacity:0;transform:translateX(0) skewX(-9deg)}
  12% {opacity:1}
  84% {opacity:1}
  100%{opacity:0;transform:translateX(320%) skewX(-9deg)}
}
@keyframes vx-online{
  from{opacity:0;transform:translateX(14px)}
  to  {opacity:1;transform:none}
}
.js .boot .console__scan{
  animation:vx-rake 1.3s cubic-bezier(.36,.05,.28,1) .16s 1 both;
  will-change:transform,opacity;
}
/* o rack é uma lista de módulos entrando em operação: cascata é o próprio fato */
.js .boot .rack__item{
  animation:vx-online .62s var(--ease) both;
  animation-delay:calc(var(--i,0) * 90ms + 480ms);
}
/* durante o teste as lâmpadas comutam rápido; depois voltam ao tempo normal */
.lamp--test{transition-duration:.1s}

/* --- 19.2 Entrada por rolagem ---------------------------------------------
   Oito vozes distintas, uma por família de material — nunca a mesma entrada
   repetida. JS soma .is-in a [data-reveal] ao entrar em vista; a partir daí
   é só CSS. Toda a família de regras vive atrás de .js: sem JavaScript, a
   classe nunca existe, os seletores abaixo nunca casam, e o conteúdo nasce
   e permanece visível — a queda graciosa que o arquivo inteiro pratica.
   --i, quando presente no HTML, escalona blocos irmãos; --rv é o atraso
   base que cada voz soma ao seu próprio ritmo.                              */
.js [data-reveal]{ --rv:calc(var(--i,0) * 100ms); }

/* A — placas, painéis e consoles: uma gaveta que se estende do chassi */
.js [data-reveal].plate,
.js [data-reveal] > .plate,
.js [data-reveal] > .panel{
  opacity:0;transform:translateY(28px) scaleY(.965);transform-origin:50% 0%;
  transition:opacity .72s var(--ease), transform .72s var(--ease);
  transition-delay:var(--rv);
}
.js [data-reveal].is-in.plate,
.js [data-reveal].is-in > .plate,
.js [data-reveal].is-in > .panel{opacity:1;transform:none}

/* B — cabeçalhos e colunas de texto nu: a gravação resolve o foco */
.js [data-reveal].shead,
.js [data-reveal] > div:not(.plate):not(.panel):not(.portrait):not(.flow__scroll){
  opacity:0;filter:blur(5px);transform:translateY(12px);
  transition:opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease);
  transition-delay:var(--rv);
}
.js [data-reveal].is-in.shead,
.js [data-reveal].is-in > div:not(.plate):not(.panel):not(.portrait):not(.flow__scroll){opacity:1;filter:blur(0);transform:none}
/* a segunda coluna de um par de texto nu lê um instante depois da primeira */
.js [data-reveal] > div:not(.plate):not(.panel):not(.portrait):not(.flow__scroll) + div:not(.plate):not(.panel):not(.portrait):not(.flow__scroll){
  transition-delay:calc(var(--rv) + 140ms);
}

/* C — retrato: a mesma luz rasante da partida, em miniatura, uma única vez */
.js [data-reveal] .portrait{
  opacity:0;transform:translateY(20px);
  transition:opacity .68s var(--ease), transform .68s var(--ease);
  transition-delay:var(--rv);
}
.js [data-reveal].is-in .portrait{opacity:1;transform:none}
.js [data-reveal] .portrait::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(100deg, transparent 0%, rgba(214,234,255,.34) 46%, transparent 92%);
  transform:translateX(-130%) skewX(-12deg);
}
.js [data-reveal].is-in .portrait::before{
  animation:vx-rake-once .9s cubic-bezier(.36,.05,.28,1) calc(var(--rv) + .32s) 1 both;
}
@keyframes vx-rake-once{
  0%{opacity:0;transform:translateX(-130%) skewX(-12deg)}
  14%{opacity:1} 60%{opacity:1}
  100%{opacity:0;transform:translateX(230%) skewX(-12deg)}
}

/* D — slots pendentes: impressos da esquerda para a direita */
.js [data-reveal].slot{clip-path:inset(0 100% 0 0);transition:clip-path .62s var(--ease);transition-delay:var(--rv)}
.js [data-reveal].is-in.slot{clip-path:inset(0 0 0 0)}

/* E — lista de credenciais: um relé fechando um contato de cada vez */
.js [data-reveal] .cert > li{opacity:0;transform:translateX(-16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js [data-reveal].is-in .cert > li{opacity:1;transform:none}
.js [data-reveal] .cert > li:nth-child(1){transition-delay:calc(var(--rv) + 0ms)}
.js [data-reveal] .cert > li:nth-child(2){transition-delay:calc(var(--rv) + 100ms)}
.js [data-reveal] .cert > li:nth-child(3){transition-delay:calc(var(--rv) + 200ms)}
.js [data-reveal] .cert > li:nth-child(4){transition-delay:calc(var(--rv) + 300ms)}
.js [data-reveal] .cert > li:nth-child(5){transition-delay:calc(var(--rv) + 400ms)}
.js [data-reveal] .cert > li:nth-child(6){transition-delay:calc(var(--rv) + 500ms)}

/* F — trilha de etapas: o fio carrega e cada marcador acende ao alcançá-lo */
.js [data-reveal] .steps > li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js [data-reveal].is-in .steps > li{opacity:1;transform:none}
.js [data-reveal] .steps > li::after{transform:scaleY(0);transform-origin:top;transition:transform .46s var(--ease)}
.js [data-reveal].is-in .steps > li::after{transform:scaleY(1)}
.js [data-reveal] .steps > li:nth-child(1){transition-delay:calc(var(--rv) + 120ms)}
.js [data-reveal] .steps > li:nth-child(1)::after{transition-delay:calc(var(--rv) + 340ms)}
.js [data-reveal] .steps > li:nth-child(2){transition-delay:calc(var(--rv) + 420ms)}
.js [data-reveal] .steps > li:nth-child(2)::after{transition-delay:calc(var(--rv) + 640ms)}
.js [data-reveal] .steps > li:nth-child(3){transition-delay:calc(var(--rv) + 720ms)}
.js [data-reveal] .steps > li:nth-child(3)::after{transition-delay:calc(var(--rv) + 940ms)}
.js [data-reveal] .steps > li:nth-child(4){transition-delay:calc(var(--rv) + 1020ms)}
.js [data-reveal] .steps > li:nth-child(4)::after{transition-delay:calc(var(--rv) + 1240ms)}
.js [data-reveal] .steps > li:nth-child(5){transition-delay:calc(var(--rv) + 1320ms)}
.js [data-reveal] .steps > li:nth-child(5)::after{transition-delay:calc(var(--rv) + 1540ms)}

/* G — registro tabular: linhas impressas uma a uma, como teleimpressora */
.js [data-reveal] .register tbody tr{opacity:0;transform:translateY(6px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
.js [data-reveal].is-in .register tbody tr{opacity:1;transform:none}
.js [data-reveal] .register tbody tr:nth-child(1){transition-delay:calc(var(--rv) + 460ms)}
.js [data-reveal] .register tbody tr:nth-child(2){transition-delay:calc(var(--rv) + 530ms)}
.js [data-reveal] .register tbody tr:nth-child(3){transition-delay:calc(var(--rv) + 600ms)}
.js [data-reveal] .register tbody tr:nth-child(4){transition-delay:calc(var(--rv) + 670ms)}
.js [data-reveal] .register tbody tr:nth-child(5){transition-delay:calc(var(--rv) + 740ms)}
.js [data-reveal] .register tbody tr:nth-child(6){transition-delay:calc(var(--rv) + 810ms)}
.js [data-reveal] .register tbody tr:nth-child(7){transition-delay:calc(var(--rv) + 880ms)}
.js [data-reveal] .register tbody tr:nth-child(8){transition-delay:calc(var(--rv) + 950ms)}
.js [data-reveal] .register tbody tr:nth-child(9){transition-delay:calc(var(--rv) + 1020ms)}

/* H — marcadores de lista: o LED acende um instante depois do texto chegar */
.js [data-reveal] .spec li{opacity:0;transition:opacity .46s var(--ease)}
.js [data-reveal].is-in .spec li{opacity:1}
.js [data-reveal] .spec li::before{transform:scale(0);transition:transform .34s var(--ease)}
.js [data-reveal].is-in .spec li::before{transform:scale(1)}
.js [data-reveal] .spec li:nth-child(1){transition-delay:calc(var(--rv) + 60ms)}
.js [data-reveal] .spec li:nth-child(1)::before{transition-delay:calc(var(--rv) + 220ms)}
.js [data-reveal] .spec li:nth-child(2){transition-delay:calc(var(--rv) + 140ms)}
.js [data-reveal] .spec li:nth-child(2)::before{transition-delay:calc(var(--rv) + 300ms)}
.js [data-reveal] .spec li:nth-child(3){transition-delay:calc(var(--rv) + 220ms)}
.js [data-reveal] .spec li:nth-child(3)::before{transition-delay:calc(var(--rv) + 380ms)}
.js [data-reveal] .spec li:nth-child(4){transition-delay:calc(var(--rv) + 300ms)}
.js [data-reveal] .spec li:nth-child(4)::before{transition-delay:calc(var(--rv) + 460ms)}

/* I — diagramas de fluxo: nós assentam, elos se desenham (JS mede o traçado).
   .flow É o próprio elemento [data-reveal] em todo uso real (<div class="flow
   plate" data-reveal>) — por isso o seletor não pede .flow como descendente
   separado: um combinador de descendência nunca casa um elemento consigo
   mesmo, e essa é exatamente a razão de nós de SVG terem ficado presos em
   opacity:0 na primeira verificação deste sistema.                          */
.js [data-reveal] svg > g{
  opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.js [data-reveal].is-in svg > g{opacity:1;transform:none}
.js [data-reveal] svg > g:nth-of-type(1){transition-delay:calc(var(--rv) + 520ms)}
.js [data-reveal] svg > g:nth-of-type(2){transition-delay:calc(var(--rv) + 640ms)}
.js [data-reveal] svg > g:nth-of-type(3){transition-delay:calc(var(--rv) + 760ms)}
.js [data-reveal] svg > g:nth-of-type(4){transition-delay:calc(var(--rv) + 880ms)}
.js [data-reveal] svg > g:nth-of-type(5){transition-delay:calc(var(--rv) + 1000ms)}
.js [data-reveal] svg > g:nth-of-type(6){transition-delay:calc(var(--rv) + 1120ms)}

/* --- 19.3 Continuidade entre páginas ------------------------------------ */
/*  A mesa é um instrumento só: o trilho não pisca ao trocar de módulo.
    Chromium hoje; onde não houver, a navegação é normal e nada quebra.      */
@view-transition{navigation:auto}
.rail{view-transition-name:vx-rail}
::view-transition-old(root),
::view-transition-new(root){animation-duration:.3s;animation-timing-function:var(--ease)}
::view-transition-group(vx-rail){animation-duration:.3s}

/* --- 19.4 Resposta ------------------------------------------------------ */
/* lâmpada do módulo intensifica sob o cursor — o indicador reagindo */
.rack__item:hover .lamp.is-on,
.rack__item:focus-visible .lamp.is-on{
  box-shadow:inset 0 0 0 1px rgba(185,218,255,.7), 0 0 11px 0 rgba(7,103,253,1), 0 0 24px -2px rgba(7,103,253,.65);
}
.rack__item--amber:hover .lamp.is-on,
.rack__item--amber:focus-visible .lamp.is-on{
  box-shadow:inset 0 0 0 1px rgba(255,224,164,.7), 0 0 11px 0 rgba(255,176,32,1), 0 0 24px -2px rgba(255,176,32,.6);
}

/* mostrador do cronograma atualiza: varredura da esquerda, como leitura nova */
@keyframes vx-readout{
  from{opacity:0;clip-path:inset(0 100% 0 0)}
  to  {opacity:1;clip-path:inset(0 0 0 0)}
}
.js .tl__detail.is-refresh > *{animation:vx-readout .4s var(--ease) both}
.js .tl__detail.is-refresh > *:nth-child(2){animation-delay:.06s}
.js .tl__detail.is-refresh > *:nth-child(3){animation-delay:.12s}

/* lâmpada do formulário pulsa enquanto transmite — e só enquanto transmite */
@keyframes vx-throb{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(255,214,140,.55), 0 0 7px -1px rgba(255,176,32,.85), 0 0 16px -3px rgba(255,176,32,.5)}
  50%    {box-shadow:inset 0 0 0 1px rgba(255,224,164,.75), 0 0 13px 0 rgba(255,176,32,1), 0 0 28px -2px rgba(255,176,32,.7)}
}
.lamp--busy.is-on{animation:vx-throb 1.05s ease-in-out infinite}

/* --- 19.5 Quem decide sobre o movimento --------------------------------- */
/*  A preferência do sistema é respeitada por padrão. A chave do painel pode
    sobrepor nos dois sentidos, e é ela que dá a um visitante com "efeitos de
    animação" desligados no Windows a chance de ver o site em movimento —
    sem isso, ele veria o vídeo parado e nunca saberia por quê.
    Sem JavaScript, nenhuma das duas classes existe e vale o sistema.        */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html:not(.vx-motion) .console__power{display:none}
  html:not(.vx-motion) *,
  html:not(.vx-motion) *::before,
  html:not(.vx-motion) *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* chave desligada à mão, mesmo com o sistema permitindo movimento */
.vx-still .console__power{display:none}
.vx-still *,
.vx-still *::before,
.vx-still *::after{
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.01ms !important;
}

/* ---------- 20. RESPONSIVO ----------------------------------------------- */
@media (max-width:1080px){
  .console__grid{grid-template-columns:1fr;gap:var(--s6)}
  .split--aside,.split--lead{grid-template-columns:1fr}
  .sim-grid{grid-template-columns:1fr}
  .records-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .funnel-grid{grid-template-columns:1fr}
  .suite-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  /*  "Aceitando projetos" é a única prova de disponibilidade do site inteiro,
      e estava escondida exatamente no aparelho em que o cliente avalia o
      fornecedor. Ela fica. O espaço vem do próprio lockup: no celular a marca
      se resolve em VX + monograma, que é o que uma marca faz quando aperta —
      e de quebra some a menor tipografia do site (10,88px) do cabeçalho.     */
  .rail__inner{gap:var(--s3)}
  .brand__sub{display:none}
  .rail__status{order:2;margin-left:auto;padding-left:var(--s3)}
  .rail__status .legend{font-size:.72rem;letter-spacing:.07em}
  .burger{order:3;margin-left:0}
  .nav{
    position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:linear-gradient(180deg,#04101F,#020A16);
    border-bottom:1px solid var(--rule);
    box-shadow:0 24px 48px -20px rgba(0,0,0,.95);
    padding:var(--s3) var(--gutter) var(--s5);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .32s var(--ease), opacity .28s var(--ease);
    max-height:calc(100dvh - 66px);overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__link{padding:.95rem .25rem;font-size:1rem;border-bottom:1px solid var(--rule)}
  .nav__link::before{left:.25rem;right:.25rem;bottom:0}
  .nav__link:last-child{border-bottom:0}
  .burger{display:block}
  .split--3{grid-template-columns:1fr}
  .mockup-grid{grid-template-columns:1fr}
  .readouts{grid-template-columns:1fr}
  .benchmark-grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:660px){
  .split--2{grid-template-columns:1fr}
  .records-grid{grid-template-columns:1fr}
  .sw-grid{grid-template-columns:1fr}
  .sim-options{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .tl__track{grid-template-columns:repeat(4,1fr)}
  .console__rail{gap:.5rem var(--s5)}
  .fastener{display:none}
  .brand__mark{width:40px}
  .foot__grid{grid-template-columns:1fr}
  .demo__top .seg{margin-left:0;width:100%}
  .seg button{flex:1}
  .float-pill{bottom:var(--s3);right:var(--s3);left:var(--s3);justify-content:center}
}
@media (max-width:420px){
  .tl__track{grid-template-columns:repeat(3,1fr)}
  .ctrl{width:100%}
}

/* ---------- 22. VITRINE INTERATIVA DE PRODUTO (VX 3.0) ------------------- */
.showcase{
  margin-top:var(--s4);
  padding:clamp(1rem,2vw,1.5rem);
  background:linear-gradient(180deg,#061328,#020B1C);
  border:1px solid var(--plate-edge);
  border-radius:3px;
  position:relative;
  box-shadow:inset 0 1px 0 var(--bevel), 0 16px 36px -12px rgba(0,0,0,.85);
}
.showcase__top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3) var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--rule);
  margin-bottom:var(--s4);
}
.showcase__tabs{
  display:flex;gap:6px;flex-wrap:wrap;
}
.showcase__tab{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .85rem;background:linear-gradient(180deg,rgba(190,216,255,.05),rgba(190,216,255,.015));
  border:1px solid var(--plate-edge);border-radius:2px;
  font-family:var(--font-cond);font-size:.85rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);cursor:pointer;
  transition:all .25s var(--ease);
}
.showcase__tab:hover{color:var(--ink);background:rgba(190,216,255,.08)}
.showcase__tab[aria-selected="true"]{
  color:#fff;border-color:rgba(7,103,253,.6);
  background:linear-gradient(180deg,rgba(7,103,253,.25),rgba(7,103,253,.08));
  box-shadow:inset 0 1px 0 rgba(190,216,255,.3), 0 0 16px -4px rgba(7,103,253,.5);
}
.showcase__pane{
  display:none;animation:paneFade .35s var(--ease) forwards;
}
.showcase__pane.is-active{display:block}
@keyframes paneFade{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* --- Componente: WhatsApp Simulator --- */
.wa-sim{
  max-width:580px;margin:0 auto;background:#051224;
  border:1px solid var(--plate-edge);border-radius:6px;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.6);
}
.wa-head{
  display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;
  background:linear-gradient(180deg,#0a1e3d,#06142a);border-bottom:1px solid var(--rule);
}
.wa-avatar{
  width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0767FD,#00E5A3);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem;
}
.wa-head-info{flex:1;line-height:1.2}
.wa-head-name{font-weight:600;font-size:.95rem;color:var(--ink);display:flex;align-items:center;gap:6px}
.wa-head-status{font-size:.78rem;color:var(--ok);display:flex;align-items:center;gap:4px}
.wa-chat{
  padding:1.25rem 1rem;display:flex;flex-direction:column;gap:1rem;min-height:280px;
  background:radial-gradient(ellipse at center, rgba(7,103,253,.03) 0%, transparent 80%), #030D1D;
}
.wa-msg{
  max-width:82%;padding:.7rem .9rem;border-radius:7px;font-size:.88rem;line-height:1.45;
  position:relative;animation:waPop .3s var(--ease) forwards;
}
@keyframes waPop{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
.wa-msg--in{
  align-self:flex-start;background:#0b203f;color:var(--ink);
  border:1px solid rgba(190,216,255,.08);border-bottom-left-radius:2px;
}
.wa-msg--out{
  align-self:flex-end;background:linear-gradient(180deg,#093a2e,#05241c);color:#e2f9f1;
  border:1px solid rgba(0,229,163,.25);border-bottom-right-radius:2px;
}
.wa-msg__time{
  font-size:.68rem;opacity:.65;margin-top:4px;display:block;text-align:right;font-variant-numeric:tabular-nums;
}
.wa-pill{
  align-self:center;background:rgba(7,103,253,.15);border:1px solid rgba(7,103,253,.3);
  color:var(--signal-hi);padding:.25rem .75rem;border-radius:20px;font-size:.75rem;
  font-family:var(--font-cond);letter-spacing:.08em;text-transform:uppercase;margin-top:.25rem;
}

/* --- Componente: Mini-Kanban CRM --- */
.kanban{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);
}
.kanban-col{
  background:rgba(190,216,255,.02);border:1px solid var(--plate-edge);
  border-radius:3px;padding:.85rem;display:flex;flex-direction:column;gap:.65rem;
}
.kanban-col__head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:.5rem;border-bottom:1px solid var(--rule);
}
.kanban-col__title{
  font-family:var(--font-cond);font-weight:700;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.kanban-card{
  background:linear-gradient(180deg,#0A1B38,#050F22);
  border:1px solid rgba(190,216,255,.1);border-radius:3px;padding:.75rem;
  display:flex;flex-direction:column;gap:.4rem;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.kanban-card:hover{transform:translateY(-2px);border-color:rgba(7,103,253,.45)}
.kanban-card__name{font-weight:600;font-size:.9rem;color:var(--ink);line-height:1.2}
.kanban-card__sub{font-size:.78rem;color:var(--ink-4)}
.kanban-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.3rem;
  padding-top:.4rem;border-top:1px dashed var(--rule);
}
.score-badge{
  font-family:var(--font-cond);font-size:.72rem;font-weight:700;padding:.15rem .45rem;
  border-radius:2px;letter-spacing:.06em;text-transform:uppercase;
}
.score-badge--hi{background:rgba(0,229,163,.15);color:var(--ok);border:1px solid rgba(0,229,163,.3)}
.score-badge--med{background:rgba(255,176,32,.15);color:var(--amber);border:1px solid rgba(255,176,32,.3)}

/* --- Componente: Mini-Dashboard Executivo --- */
.dash-sim{
  display:flex;flex-direction:column;gap:var(--s4);
}
.kpi-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);
}
.kpi-box{
  background:linear-gradient(180deg,rgba(190,216,255,.04),rgba(190,216,255,.01));
  border:1px solid var(--plate-edge);border-radius:3px;padding:.85rem 1rem;
}
.kpi-box__lbl{
  font-family:var(--font-cond);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:4px;
}
.kpi-box__val{
  font-family:var(--font-cond);font-weight:700;font-size:1.45rem;color:var(--ink);
  line-height:1.1;letter-spacing:.02em;display:flex;align-items:baseline;gap:6px;
}
.kpi-box__delta{font-size:.75rem;font-weight:600;color:var(--ok)}
.dash-split{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s4);
}
.dre-table{
  width:100%;font-size:.85rem;border-collapse:collapse;
}
.dre-table td{padding:.45rem .6rem;border-bottom:1px solid var(--rule)}
.dre-table tr:last-child td{border-bottom:0;font-weight:700;color:var(--signal-hi)}
.dre-table td:last-child{text-align:right;font-family:var(--font-cond);font-weight:600;letter-spacing:.04em}
.ai-summary-box{
  background:linear-gradient(180deg,rgba(7,103,253,.12),rgba(7,103,253,.03));
  border:1px solid rgba(7,103,253,.35);border-radius:3px;padding:1rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.ai-summary-box__head{
  display:flex;align-items:center;gap:6px;font-family:var(--font-cond);
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-hi);
}
.ai-summary-box__text{
  font-size:.86rem;line-height:1.5;color:var(--ink-2);margin:0;
}

@media (max-width:660px){
  .kanban{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr}
  .dash-split{grid-template-columns:1fr}
}