/* =========================================================================
   AKROS — camada "futuro"
   Carrega POR ÚLTIMO (depois de bandas.css). Não repinta a hero nem o menu:
   tudo aqui é escopado por seção. Se algo daqui precisar sair, apague o
   bloco inteiro — nenhum arquivo antigo depende dele.
   Linguagem: cantos retos (--r:0), serifa só nos títulos, rótulo e número em
   mono, um foco luminoso por tela, azul de marca + ciano como LUZ.
   ========================================================================= */

:root{
  --mono: "JetBrains Mono","Cascadia Mono","SFMono-Regular",ui-monospace,Consolas,monospace;
  --luz:      #46B6FF;            /* a luz: ciano-azul, só onde algo está VIVO */
  --luz-lo:   #1B8CFF;
  --noite-1:  #0E2245;
  --noite-2:  #091630;
  --noite-3:  #060F22;
}

/* ===========================================================================
   SEÇÃO 2 · PIPELINE — o quadro vira o foco
   =========================================================================== */

/* O painel é vidro ESCURO dentro da seção clara. Os tokens de tinta são
   redefinidos AQUI: a maior parte do texto do quadro usa var(--ink),
   var(--muted)… e flipa sozinha. O que precisa continuar claro (tela do
   celular, cartão vivo, avisos) devolve os tokens claros logo abaixo. */
:is(.pipeline,#estudio) .panel{
  --ink:#EAF3FF; --body:#B9CBE3; --muted:rgba(214,229,250,.66); --faint:rgba(196,216,244,.48);
  --ghost:rgba(196,216,244,.30); --line:rgba(140,185,255,.18); --line-soft:rgba(140,185,255,.11);
  --accent-ink:#8CC8FF; --accent-lo:#5CC4FF; --ink-soft:#D3E3F8;
  background:
    radial-gradient(110% 80% at 88% -14%, rgba(40,130,255,.30) 0%, rgba(40,130,255,0) 58%),
    radial-gradient(80% 70% at -4% 112%, rgba(0,200,255,.13) 0%, rgba(0,200,255,0) 62%),
    linear-gradient(165deg,var(--noite-1) 0%,var(--noite-2) 52%,var(--noite-3) 100%);
  border-color:rgba(120,175,255,.20);
  box-shadow:
    0 80px 120px -44px rgba(5,16,38,.80),
    0 34px 70px -30px rgba(20,100,230,.42),
    0 0 0 1px rgba(120,175,255,.10),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 60px rgba(40,130,255,.05);
}
/* a luz que segue o mouse: azul, não branca */
:is(.pipeline,#estudio) .panel::after{
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%), rgba(70,170,255,.17), transparent 70%);
}
/* grade de pontos: só aparece por cima do fundo, nunca do conteúdo */
:is(.pipeline,#estudio) .panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.55;
  background-image:radial-gradient(rgba(150,200,255,.16) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 70%);
}
:is(.pipeline,#estudio) .panel__head,:is(.pipeline,#estudio) .panel__body{position:relative}

/* halo azul atrás do quadro: separa o painel do branco sem pintar o branco */
:is(.pipeline,#estudio) .feature__demo::before{
  content:"";position:absolute;z-index:-1;left:-4%;right:-6%;top:2%;bottom:6%;pointer-events:none;
  background:radial-gradient(60% 56% at 58% 50%, rgba(27,140,255,.20) 0%, rgba(27,140,255,0) 72%);
  filter:blur(26px);
}

/* cabeçalho do painel: rótulo e telemetria em mono */
:is(.pipeline,#estudio) .panel__label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:is(.pipeline,#estudio) .dot-live{background:var(--luz);box-shadow:0 0 0 3px rgba(70,182,255,.22),0 0 12px rgba(70,182,255,.9)}
:is(.pipeline,#estudio) .panel__total b{font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(70,182,255,.35)}
:is(.pipeline,#estudio) .panel__total small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
:is(.pipeline,#estudio) .bump{font-family:var(--mono);color:#7FE3B4}

.tele{
  position:absolute;left:50%;top:2px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.tele b{font-weight:600;color:var(--luz)}
.tele i{display:block;width:22px;height:1px;background:linear-gradient(90deg,rgba(70,182,255,.9),rgba(70,182,255,0))}
.tele span{color:var(--ink);transition:opacity .3s}
.tele.is-swap span{opacity:0}

/* --- o celular fica na luz: aro de titânio claro e brilho atrás --- */
.pipeline .phone{
  box-shadow:
    0 46px 74px -26px rgba(0,0,0,.65),
    0 0 70px -8px rgba(40,140,255,.38),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 0 1px rgba(255,255,255,.16);
}

/* --- o que continua CLARO dentro do painel escuro --- */
.pipeline .phone__screen,
.pipeline .live,
.pipeline .toast,
.pipeline .incoming,
#estudio .folha,
#estudio .voa{
  --ink-soft:#16325A; --ghost:rgba(10,31,69,.28);
  --ink:#0A1F45; --body:#38485F; --muted:rgba(10,31,69,.60); --faint:rgba(10,31,69,.44);
  --line:rgba(10,31,69,.12); --line-soft:rgba(10,31,69,.07);
  --accent-ink:#063A82; --accent-lo:#0A56C8;
}

/* --- as colunas: poços de vidro; o fade do pé vira máscara (vale sobre
       qualquer fundo, não precisa de cor opaca para casar) --- */
.pipeline .col{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
  border-color:rgba(140,185,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:opacity .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.pipeline .col__list::after{display:none}
.pipeline .col__list{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent);
}
.pipeline .col__head{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.pipeline .count{
  font-family:var(--mono);font-size:10.5px;background:rgba(140,185,255,.12);color:var(--muted);
  border-radius:calc(7px * var(--r));
}

/* holofote: com um cartão em jogo, só a coluna dele fica acesa */
.pipeline .kanban.has-hot .col{opacity:.5}
.pipeline .kanban.has-hot .col.is-hot{
  opacity:1;
  background:linear-gradient(180deg,rgba(70,182,255,.14),rgba(70,182,255,.04));
  border-color:rgba(90,190,255,.42);
  box-shadow:0 0 0 1px rgba(90,190,255,.10),0 0 34px -6px rgba(40,150,255,.45),inset 0 1px 0 rgba(255,255,255,.12);
}
.pipeline .col.is-hot .col__head{color:var(--ink)}
.pipeline .count.is-tick{animation:tick .95s var(--ease)}
@keyframes tick{
  0%{background:rgba(70,182,255,.75);color:#04122A;transform:scale(1.22)}
  100%{background:rgba(140,185,255,.12);color:var(--muted);transform:none}
}

/* a vaga do cartão */
.pipeline .slot.is-open{border-color:rgba(140,185,255,.22)}
.pipeline .slot.is-armed{
  border-color:rgba(90,190,255,.75);background:rgba(40,150,255,.11);
  box-shadow:inset 0 0 30px rgba(40,150,255,.22),0 0 22px -4px rgba(40,150,255,.35);
}

/* --- cartões dos outros leads: gente e valor, não esqueleto --- */
.pipeline .ghost{
  --h:210;
  padding:10px 10px 9px;margin-bottom:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid rgba(140,185,255,.14);
  border-radius:calc(13px * var(--r));
  box-shadow:0 10px 22px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
}
.pipeline .ghost__top{display:flex;align-items:center;gap:8px;min-width:0}
.pipeline .ghost__who{min-width:0;display:block;line-height:1.25}
.pipeline .ghost__who b{
  display:block;font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pipeline .ghost__who small{
  display:block;font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pipeline .avatar{
  width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.02em;color:#fff;
  background:linear-gradient(140deg,hsl(var(--h) 78% 60%),hsl(calc(var(--h) + 24) 70% 36%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(255,255,255,.08);
}
.pipeline .ghost__foot{display:flex;align-items:center;gap:7px;margin-top:8px}
.pipeline .ghost .tag{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);border:1px solid rgba(140,185,255,.18);padding:1px 5px;background:rgba(140,185,255,.06);
}
.pipeline .ghost .tag--score{color:var(--luz);border-color:rgba(70,182,255,.32);background:rgba(70,182,255,.08)}
.pipeline .ghost .money{
  flex:none;margin-left:auto;white-space:nowrap;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
}
.pipeline .ghost .when{flex:none;margin-left:auto;white-space:nowrap;font-family:var(--mono);font-size:9px;color:var(--faint)}
.pipeline .ghost .meter{
  margin-left:auto;flex:0 1 38px;height:3px;background:rgba(140,185,255,.16);position:relative;overflow:hidden;
}
.pipeline .ghost .meter::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--s,50%);
  background:linear-gradient(90deg,var(--luz-lo),var(--luz));box-shadow:0 0 8px rgba(70,182,255,.7);
}

/* --- o cartão vivo: branco puro no meio do azul-noite = o foco --- */
.pipeline .live{
  border-color:rgba(255,255,255,.9);
  box-shadow:0 26px 54px -16px rgba(0,0,0,.65),0 0 0 1px rgba(70,182,255,.30),0 0 46px -2px rgba(40,150,255,.42);
}
.pipeline .live.is-moving{
  box-shadow:0 38px 70px -16px rgba(0,0,0,.7),0 0 0 1px rgba(70,182,255,.6),0 0 70px 2px rgba(40,160,255,.6);
  border-color:#fff;
}
.pipeline .live.is-won{
  border-color:#fff;
  box-shadow:0 26px 54px -16px rgba(0,0,0,.65),0 0 0 1px rgba(66,220,134,.7),0 0 60px 0 rgba(66,220,134,.5);
}
.pipeline .live__src{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em}
.pipeline .field .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;width:38px}
.pipeline .field .v.is-typing::after{
  content:"";display:inline-block;width:1px;height:1.05em;margin-left:1px;vertical-align:-.15em;
  background:var(--accent-lo);animation:blink .7s steps(1) infinite;
}
.pipeline .agent{font-family:var(--mono);font-size:10px;letter-spacing:.02em}
/* varredura: uma faixa de luz que desce pelo cartão enquanto a IA trabalha */
.pipeline .live::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:linear-gradient(180deg,rgba(10,128,226,0),rgba(10,128,226,.16) 55%,rgba(70,182,255,.32) 92%,rgba(10,128,226,0)) no-repeat;
  background-size:100% 34%;background-position:0 -40%;
  transition:opacity .3s;
}
.pipeline .live.is-working::after{opacity:1;animation:varre 1.9s linear infinite}
@keyframes varre{to{background-position:0 140%}}

/* avisos: continuam claros, ganham halo */
.pipeline .incoming,.pipeline .toast{
  box-shadow:0 22px 44px -14px rgba(0,0,0,.6),0 0 0 1px rgba(70,182,255,.22),0 0 30px -4px rgba(40,150,255,.3);
}

/* --- o cometa: liga o que o lead DISSE ao que o cartão GUARDOU --- */
.pipeline .panel__body{position:relative}
.pulse{
  position:absolute;left:0;top:0;z-index:9;width:70px;height:2px;margin-left:-70px;margin-top:-1px;
  pointer-events:none;opacity:0;transform-origin:100% 50%;
  background:linear-gradient(90deg,rgba(70,182,255,0),rgba(70,182,255,.55) 70%,#bfe8ff);
  filter:drop-shadow(0 0 6px rgba(70,182,255,.95));
}
.pulse::after{
  content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px rgba(70,182,255,.45),0 0 16px 4px rgba(70,182,255,.9);
}

/* --- capítulos: a barra tem ponta luminosa e número em mono --- */
.pipeline .chapter{color:var(--faint)}
.pipeline .chapter[aria-current="true"]{color:var(--ink)}
.pipeline .chapter__track{height:3px;overflow:visible;background:rgba(10,31,69,.10);margin-bottom:11px}
.pipeline .chapter__fill{position:relative;background:linear-gradient(90deg,var(--accent-lo),var(--luz))}
.pipeline .chapter__fill::after{
  content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;
  background:#fff;border:2px solid var(--luz);box-shadow:0 0 12px 2px rgba(70,182,255,.75);
  opacity:0;transition:opacity .25s;
}
.pipeline .chapter[aria-current="true"] .chapter__fill::after{opacity:1}
.chapter__lbl{display:flex;align-items:baseline;gap:9px}
.chapter__lbl b{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--ghost);
  transition:color .3s;
}
.pipeline .chapter[aria-current="true"] .chapter__lbl b{color:var(--accent)}
.pipeline .chapter__lbl span{font-size:12.5px}

/* --- indicadores: número grande, legenda em mono --- */
.signals .signal span{font-family:var(--mono);font-size:10.5px;letter-spacing:0;line-height:1.5;max-width:36ch;color:var(--faint)}
.signals .signals__src{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

@media (max-width:1180px){
  .tele{display:none}
}
@media (max-width:880px){
  .pipeline .ghost .tag,.pipeline .ghost .when,.pipeline .meter{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pulse{display:none}
  .pipeline .live.is-working::after{animation:none;opacity:0}
  .pipeline .count.is-tick{animation:none}
}

/* ===========================================================================
   SEÇÃO 3 · ESTÚDIO — o mesmo vidro escuro; a FOLHA da proposta segue branca
   (é papel: o cliente assina num documento, não numa tela de comando)
   =========================================================================== */
#estudio .item{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border-color:rgba(140,185,255,.14);
  box-shadow:0 10px 22px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
}
#estudio .item.is-alvo{
  background:linear-gradient(180deg,rgba(70,182,255,.17),rgba(70,182,255,.05));
  border-color:rgba(90,190,255,.62);
  box-shadow:0 0 0 1px rgba(90,190,255,.22),0 0 38px -6px rgba(40,150,255,.55),inset 0 1px 0 rgba(255,255,255,.12);
}
#estudio .item__mini{
  color:var(--luz);background:linear-gradient(150deg,rgba(70,182,255,.24),rgba(70,182,255,.08));
  box-shadow:inset 0 0 0 1px rgba(70,182,255,.24),inset 0 1px 0 rgba(255,255,255,.12);
}
#estudio .item__mini--peca{
  color:#B9CBE3;background:linear-gradient(150deg,rgba(185,203,227,.20),rgba(185,203,227,.06));
  box-shadow:inset 0 0 0 1px rgba(185,203,227,.2),inset 0 1px 0 rgba(255,255,255,.1);
}
#estudio .item__ia{background:rgba(70,182,255,.12);border-color:rgba(70,182,255,.34);color:var(--luz);font-family:var(--mono);font-size:9px}
#estudio .item__estoque,#estudio .item__preco{font-family:var(--mono);letter-spacing:-.02em}
#estudio .item__preco{color:var(--ink)}
#estudio .item__preco.calc{color:var(--luz)}
#estudio .item__estoque.baixo{color:#F2B24C}

#estudio .motor,#estudio .ficha{
  background:linear-gradient(168deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border-color:rgba(140,185,255,.18);
  box-shadow:0 18px 38px -20px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.09);
}
#estudio .motor__head{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em}
#estudio .cel{background:rgba(255,255,255,.05);border-color:rgba(140,185,255,.14)}
#estudio .cel__v,#estudio .motor__parcelas b,#estudio .motor__out b{font-family:var(--mono);letter-spacing:-.02em}
#estudio .motor__out b{text-shadow:0 0 22px rgba(70,182,255,.4)}
#estudio .motor__form{background:rgba(255,255,255,.04);border-color:rgba(140,185,255,.24)}
#estudio .motor__form.is-on{background:rgba(70,182,255,.12);border-color:rgba(90,190,255,.6);color:var(--luz)}

#estudio .folha{
  box-shadow:0 34px 64px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.35),inset 0 1px 0 #fff;
}
#estudio .folha.is-aceita{
  border-color:rgba(21,155,82,.55);
  box-shadow:0 34px 64px -24px rgba(0,0,0,.75),0 0 46px -2px rgba(66,220,134,.5),inset 0 1px 0 #fff;
}
#estudio .voa{box-shadow:0 18px 38px -12px rgba(0,0,0,.6),0 0 30px -4px rgba(40,150,255,.4)}

#estudio .passo{background:rgba(255,255,255,.04);border-color:rgba(140,185,255,.12)}
#estudio .passo i{border-color:rgba(140,185,255,.30)}
#estudio .passo.is-feito{background:rgba(255,255,255,.085);border-color:rgba(140,185,255,.24)}
#estudio .passo.is-fim.is-feito i{border-color:#42DC86}
#estudio .passo.is-fim.is-feito i::after{background:#42DC86}
#estudio .passo em{font-family:var(--mono)}
#estudio .linkpub{background:rgba(255,255,255,.04);border-color:rgba(140,185,255,.24)}
#estudio .linkpub code{color:var(--luz)}

#estudio .cela{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(140,185,255,.08)}
#estudio .cela.util{background:rgba(255,255,255,.07)}
#estudio .grade__dias,#estudio .grade__horas{font-family:var(--mono)}
#estudio .bloco-ag{background:rgba(140,168,196,.22);border-left-color:rgba(165,200,235,.65)}
#estudio .bloco-ag.t-consulta{background:rgba(6,182,212,.20);border-left-color:rgba(6,182,212,.85)}
#estudio .bloco-ag.t-visita{background:rgba(16,185,129,.19);border-left-color:rgba(16,185,129,.85)}
#estudio .bloco-ag.t-reuniao{background:rgba(155,123,255,.20);border-left-color:rgba(155,123,255,.85)}
#estudio .vaga{background:linear-gradient(150deg,rgba(40,150,255,.30),rgba(40,150,255,.14));box-shadow:0 0 30px -4px rgba(40,150,255,.55)}
#estudio .vaga.is-confirmada{
  background:linear-gradient(150deg,rgba(66,220,134,.28),rgba(66,220,134,.12));
  border-left-color:#42DC86;color:#9CF0C4;box-shadow:0 0 30px -4px rgba(66,220,134,.5);
}
#estudio .vaga.is-confirmada b{color:#9CF0C4}
#estudio .vaga__ok{color:#42DC86}

#estudio .ficha__tipo{font-family:var(--mono);font-size:9px}
#estudio .ficha__quando{background:rgba(255,255,255,.05);border-color:rgba(140,185,255,.14);font-family:var(--mono)}
#estudio .selo--ok{background:rgba(66,220,134,.10);border-color:rgba(66,220,134,.32);color:#8EEAB9}
#estudio .selo--risco{background:rgba(255,255,255,.05);border-color:rgba(140,185,255,.16)}
#estudio .carga__t,#estudio .linkpub__t{font-family:var(--mono)}
#estudio .contexto small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}

/* ===========================================================================
   SISTEMA GLOBAL
   =========================================================================== */

/* --- rótulos de seção em mono, caixa alta, tracking largo --- */
.sechead__eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em}

/* --- a borda que acende onde o cursor está --- */
.spot{
  position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%), rgba(70,182,255,.13), transparent 72%);
}
.spot::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:radial-gradient(200px circle at var(--sx,50%) var(--sy,50%), rgba(70,182,255,.95), rgba(70,182,255,0) 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
[data-spot]:hover > .spot{opacity:1}
/* sobre o cartão branco da seção 7 a luz é azul de marca: a base clara lava o ciano */
.cap__c > .spot{background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%), rgba(10,128,226,.08), transparent 72%)}
.cap__c > .spot::after{background:radial-gradient(180px circle at var(--sx,50%) var(--sy,50%), rgba(10,128,226,.9), rgba(10,128,226,0) 72%)}

/* a textura das faixas (grade, aurora, grão) mora em atmosfera.css */

/* --- o trilho de seções --- */
.rail{
  position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.rail.is-on{opacity:1;pointer-events:auto}
.rail a{
  position:relative;display:flex;align-items:center;justify-content:flex-end;
  height:22px;padding-left:14px;color:var(--ink);transition:color .4s var(--ease);
}
.rail.is-dark a{color:#fff}
.rail a i{
  display:block;width:8px;height:1.5px;background:currentColor;opacity:.34;
  transition:width .4s var(--ease),opacity .3s,background .3s,box-shadow .4s;
}
.rail a:hover i{opacity:.8;width:14px}
.rail a[aria-current="true"] i{width:18px;opacity:1;background:var(--accent);box-shadow:0 0 10px rgba(70,182,255,.85)}
.rail.is-dark a[aria-current="true"] i{background:var(--luz)}
.rail a span{
  position:absolute;right:30px;white-space:nowrap;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;color:var(--ink);background:rgba(255,255,255,.92);
  border:1px solid rgba(10,31,69,.10);box-shadow:0 10px 24px -12px rgba(10,31,69,.45);
  opacity:0;transform:translateX(6px);transition:opacity .25s var(--ease),transform .3s var(--ease);
}
.rail.is-dark a span{color:#fff;background:rgba(8,22,44,.92);border-color:rgba(140,185,255,.22)}
.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
@media (max-width:1100px){.rail{display:none}}
@media (prefers-reduced-motion:reduce){.rail,.rail a i,.rail a span,.spot{transition:none}}

/* --- detalhes por seção --- */
/* 7 · capacidades: índice em mono no canto de cada cartão (telemetria, não enfeite) */
.cap{counter-reset:cap}
.cap__c{counter-increment:cap}
.cap__c::before{
  content:counter(cap,decimal-leading-zero) " / 06";
  position:absolute;top:clamp(22px,3.6vh,40px);right:clamp(20px,1.9vw,36px);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ghost);
  transition:color .4s var(--ease);
}
.cap__c:hover::before{color:var(--accent)}


/* 9 · planos: o cartão aceso leva um feixe de luz que dá a volta na borda */
.plano--destaque::before{
  content:"";position:absolute;inset:-1px;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--beam),transparent 0 68%,rgba(70,182,255,.95) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:beam 6s linear infinite;
}
@media (prefers-reduced-motion:reduce){.plano--destaque::before{animation:none;opacity:.5}}