/* ==========================================================================
   QRA Coleção Isométrica — primitivas partilhadas
   Ver docs/adr/0007..0009. Todo o Arquétipo (<qra-iso-flow>, <qra-iso-pipeline>,
   etc.) usa estas classes. Nenhum motor redefine cor/proj./sombra — herda daqui.
   Toda a cópia visível vem da Legenda (content/illustrations/{loc}/{id}.php).
   ========================================================================== */

/* --- Palco isométrico -------------------------------------------------- */
/* Palco preenche o Mount (ou o container próprio de página, ex.: .idx-hero-stage).
   overflow:visible por decisão — a cena pode transbordar suavemente do palco;
   o clipping fica a cargo da secção anfitriã, se quiser. */
.qis-stage{
  position:relative;width:100%;height:100%;overflow:visible;background:transparent;
  font-family:var(--font-body);
}
/* Cena tem coordenadas internas fixas (720×320) — todas as primitivas se posicionam
   nesse espaço. A escala é fluida via clamp: shrink puro, sem restruturar (ver
   docs/adr/0004). No desktop (>=1440px) fica na --iso-scene-scale (=1.15); no
   mobile (~400px) fica em ~0.55. */
.qis-scene{
  position:absolute;
  left:var(--iso-scene-x);top:var(--iso-scene-y);
  width:720px;height:320px;margin-left:-360px;margin-top:-160px;
  transform-style:preserve-3d;
  /* O translate vem primeiro na lista, logo é aplicado POR ÚLTIMO — atua em
     espaço de ecrã, depois da escala e das rotações. Serve para reenquadrar a
     cena sem mexer nas coordenadas internas. */
  transform:
    translate(var(--iso-scene-nudge-x), var(--iso-scene-nudge-y))
    scale(clamp(0.55, calc(100vw / 1440px * var(--iso-scene-scale)), var(--iso-scene-scale)))
    rotateX(var(--iso-scene-rx))
    rotateZ(var(--iso-scene-rz));

  /* Âncora da cena dentro do palco, e correção fina de enquadramento. */
  --iso-scene-x:50%;
  --iso-scene-y:60%;
  --iso-scene-nudge-x:0px;
  --iso-scene-nudge-y:0px;

  /* Proporções internas da Cena, em coordenadas do palco. A escala acima encolhe
     tudo por igual; estas variáveis permitem REEQUILIBRAR o peso entre o Signo e
     os cards no mobile, onde a redução uniforme torna o texto ilegível.
     As posições derivam daqui (calc), por isso mudar um tamanho não desalinha nada. */
  --iso-core-w:150px;
  --iso-core-h:118px;
  --iso-card-w:172px;
  --iso-card-pad:12px 13px;
  --iso-card-fs:var(--text-xs);
  --iso-card-fs-xs:var(--text-2xs);
  --iso-card-ico:14px;
}
.qis-svg{position:absolute;inset:0;overflow:visible;z-index:1}

/* --- Cards (in/out) --------------------------------------------------- */
.qis-card{
  position:absolute;border-radius:var(--radius-xl);background:var(--iso-card-bg);
  box-sizing:border-box;padding:var(--iso-card-pad);box-shadow:var(--iso-card-shadow);
}
.qis-card .qis-ch{
  display:flex;align-items:center;gap:6px;
  font-size:var(--iso-card-fs-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--iso-card-mut);margin-bottom:7px;
}
.qis-card .qis-ch i{font-size:var(--iso-card-ico);color:var(--primary-500)}
.qis-cr{font-size:var(--iso-card-fs);color:var(--iso-card-title);line-height:1.45}
.qis-cr.qis-mut{color:var(--iso-card-mut)}
.qis-ctag{
  margin-top:8px;display:inline-block;
  font-size:var(--iso-card-fs-xs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--iso-card-mut);background:var(--iso-card-tag-bg);
  border-radius:var(--radius-md);padding:3px 7px;
}
.qis-ctag.qis-ia{color:var(--iso-card-tag-ai-fg);background:var(--iso-card-tag-ai-bg)}

/* --- Flow-specific card placement + arrival animations ---------------
   Ancorados às margens do palco (0 e 720): mudar --iso-card-w reposiciona
   o card de saída sozinho, sem tocar em coordenadas à mão. */
.qis-email{left:0;top:92px;width:var(--iso-card-w);transform:translateZ(30px)}
.qis-email.qis-arrive{animation:qisSlideIn .6s ease-out}
.qis-out{left:calc(720px - var(--iso-card-w));top:92px;width:var(--iso-card-w);transform:translateZ(30px);opacity:0;transition:opacity .35s}
.qis-out.qis-show{opacity:1;animation:qisSlideInR .6s ease-out}
@keyframes qisSlideIn { from{opacity:0;transform:translateZ(30px) translateX(-30px)} to{opacity:1;transform:translateZ(30px) translateX(0)} }
@keyframes qisSlideInR{ from{opacity:0;transform:translateZ(30px) translateX(30px)}  to{opacity:1;transform:translateZ(30px) translateX(0)} }

/* Placeholder do card de saída — ocupa exatamente o mesmo sítio enquanto o
   resultado não chega, para o lado direito nunca ficar vazio. Skeleton puro,
   sem texto: nada a traduzir, logo a Legenda fica intocada. */
.qis-skel{
  position:absolute;
  left:calc(720px - var(--iso-card-w));top:92px;width:var(--iso-card-w);
  box-sizing:border-box;padding:var(--iso-card-pad);
  border-radius:var(--radius-xl);
  background:var(--iso-card-bg);
  box-shadow:var(--iso-card-shadow);
  border:1px dashed var(--iso-hud-border);
  transform:translateZ(30px);
  opacity:0;transition:opacity .35s;
}
.qis-skel.qis-on{opacity:1}
.qis-skel-head{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.qis-skel-dot{
  width:var(--iso-card-ico);height:var(--iso-card-ico);flex-shrink:0;
  border-radius:var(--radius-sm);background:var(--iso-card-tag-bg);
}
.qis-skel-bar{
  height:8px;border-radius:4px;margin-bottom:9px;
  background:linear-gradient(90deg,
    var(--iso-card-tag-bg) 0%,
    var(--iso-card-tag-ai-bg) 50%,
    var(--iso-card-tag-bg) 100%);
  background-size:200% 100%;
  animation:qisShimmer 1.5s linear infinite;
}
.qis-skel-head .qis-skel-bar{margin-bottom:0}
.qis-skel-tag{
  margin-top:10px;width:78px;height:16px;border-radius:var(--radius-md);
  background:var(--iso-card-tag-bg);
}
@keyframes qisShimmer{ from{background-position:100% 0} to{background-position:-100% 0} }

/* --- Signo (QRA crystal core) ---------------------------------------- */
/* Centrado em (360,145) do palco, seja qual for --iso-core-w/h. */
.qis-core{
  position:absolute;
  left:calc(360px - var(--iso-core-w) / 2);
  top:calc(145px - var(--iso-core-h) / 2);
  width:var(--iso-core-w);height:var(--iso-core-h);
  transform-style:preserve-3d;
  transform:translateZ(24px) rotateZ(calc(-1 * var(--iso-scene-rz))) rotateX(calc(-1 * var(--iso-scene-rx)));
}
.qis-core-inner{animation:qisBreathe 4.2s ease-in-out infinite}
.qis-core-inner svg{width:var(--iso-core-w);height:auto;display:block;overflow:visible}
.qis-core-inner path{transform-box:fill-box;transform-origin:center;transition:filter .18s ease-out}
.qis-lt{animation:qisFlo 3.1s ease-in-out infinite}
.qis-lm{animation:qisFlo 3.1s ease-in-out .22s infinite}
.qis-lb{animation:qisFlo 3.1s ease-in-out .44s infinite}
.qis-core-inner path.qis-rip{filter:brightness(1.5) saturate(1.15)}
@keyframes qisFlo    { 0%,100%{transform:translateY(0)}   50%{transform:translateY(-13px)} }
@keyframes qisBreathe{ 0%,100%{transform:scale(1)}         50%{transform:scale(1.035)} }

/* --- HUD (counter + step line) --------------------------------------- */
.qis-hud-count{
  position:absolute;right:16px;top:14px;
  display:flex;align-items:center;gap:8px;
  background:transparent;color:var(--primary-500);padding:0;z-index:5;
}
.qis-hud-count i{font-size:26px}
.qis-hud-num{font-size:30px;font-weight:var(--weight-bold);font-variant-numeric:tabular-nums}
.qis-hud-count.qis-tick{animation:qisIt .4s ease-out}
@keyframes qisIt{ 0%{transform:scale(1)} 35%{transform:scale(1.06)} 100%{transform:scale(1)} }

.qis-hud-step{
  position:absolute;right:16px;bottom:14px;
  display:flex;align-items:center;gap:10px;
  background:var(--iso-hud-bg);backdrop-filter:blur(4px);
  border:.5px solid var(--iso-hud-border);border-radius:var(--radius-lg);padding:7px 12px;z-index:5;
  font-family:var(--font-mono);
}
.qis-hud-step .qis-sl{
  font-size:var(--text-2xs);color:var(--iso-card-title);
  min-width:118px;transition:color .2s;
}
.qis-hud-step .qis-sl.qis-done{color:var(--primary-500)}
.qis-dots{display:flex;gap:4px}
.qis-dots span{width:7px;height:7px;border-radius:var(--radius-full);background:#D6D3E8;transition:background .2s}
.qis-dots span.qis-on{background:var(--primary-500)}

.qis-tag{
  position:absolute;right:14px;top:14px;
  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:#9B98B4;z-index:5;
}

/* --- Step rail (mode="steps") ---------------------------------------- */
.qis-steps{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  display:none;flex-direction:column;gap:12px;z-index:6;
}
.qis-step{display:flex;align-items:center;gap:11px;opacity:.45;transition:opacity .25s}
.qis-step.qis-on{opacity:1}
.qis-sq{
  width:42px;height:42px;flex-shrink:0;
  border-radius:var(--radius-xl);
  background:var(--iso-step-bg);color:var(--iso-step-fg);
  display:flex;align-items:center;justify-content:center;
  transition:background .22s,color .22s,box-shadow .22s;
}
.qis-sq i{font-size:21px}
.qis-step.qis-on .qis-sq{
  background:var(--iso-step-on-bg);color:var(--surface-0);
  box-shadow:var(--iso-step-on-shadow);
}
.qis-lbl{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--iso-card-title);white-space:nowrap}

/* ========================================================================
   Pipeline · Stack · Converge · Branch — primitivas partilhadas por N Cenas.
   Cada motor JS aplica estas classes a nós que gera dinamicamente.
   ======================================================================== */

/* Station (Pipeline / Branch) — bloco isométrico com ícone + label debaixo */
.qis-station{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;
  z-index:3;transform-style:preserve-3d;
}
.qis-station-tile{
  width:64px;height:64px;border-radius:var(--radius-2xl);
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  display:flex;align-items:center;justify-content:center;
  color:var(--iso-card-mut);
  transform:translateZ(28px);
  transition:background .25s,color .25s,box-shadow .25s;
}
.qis-station-tile i{font-size:28px}
.qis-station.qis-on .qis-station-tile{
  background:var(--iso-step-on-bg);color:var(--surface-0);
  box-shadow:var(--iso-step-on-shadow);
}
.qis-station-lbl{
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  color:var(--iso-card-title);white-space:nowrap;
  transform:translateZ(28px);
}
.qis-station-sub{
  font-size:var(--text-2xs);color:var(--iso-card-mut);
  transform:translateZ(28px);
}

/* Stack layer — paralelogramo isométrico que empilha */
.qis-layer{
  position:absolute;left:50%;margin-left:-140px;
  width:280px;height:56px;border-radius:var(--radius-lg);
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  display:flex;align-items:center;padding:0 20px;gap:12px;
  border-left:3px solid var(--primary-500);
  transform:translateZ(0) translateY(80px);opacity:0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .35s;
}
.qis-layer.qis-arrive{opacity:1}
.qis-layer i{font-size:22px;color:var(--primary-500);flex-shrink:0}
.qis-layer-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.qis-layer-title{
  font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--iso-card-title);line-height:1.2;
}
.qis-layer-sub{
  font-size:var(--text-2xs);color:var(--iso-card-mut);letter-spacing:.04em;text-transform:uppercase;
}
.qis-layer-tag{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--iso-card-tag-ai-fg);background:var(--iso-card-tag-ai-bg);
  padding:3px 8px;border-radius:var(--radius-sm);
}

/* Piece (Converge) — pequeno bloco à esquerda que "voa" para o motor */
.qis-piece{
  position:absolute;display:flex;align-items:center;gap:8px;
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  padding:8px 12px;border-radius:var(--radius-lg);
  transform:translateZ(24px);
  transition:transform .8s cubic-bezier(.5,0,.4,1),opacity .5s;
  z-index:2;
}
.qis-piece i{font-size:16px;color:var(--iso-card-mut)}
.qis-piece span{
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  color:var(--iso-card-title);white-space:nowrap;
}
.qis-piece.qis-leak{border:1px dashed var(--secondary-400)}
.qis-piece.qis-leak i{color:var(--secondary-400)}
.qis-piece.qis-fly{opacity:0;pointer-events:none}

/* Engine (Converge / target of Branch) — bloco escuro do "um só motor" */
.qis-engine{
  position:absolute;right:24px;top:50%;
  width:180px;padding:16px;transform:translate(0,-50%) translateZ(30px);
  background:var(--iso-card-bg);border-radius:var(--radius-xl);
  box-shadow:var(--iso-card-shadow);
  border:1px solid var(--primary-500);
  display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;
  z-index:4;transition:box-shadow .3s,border-color .3s;
}
.qis-engine.qis-on{
  border-color:var(--secondary-400);
  box-shadow:0 0 0 4px rgba(107,63,255,.16), var(--iso-card-shadow);
}
.qis-engine-signo{width:44px;height:44px;display:block}
.qis-engine-title{
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:var(--text-md);color:var(--iso-card-title);line-height:1.1;
}
.qis-engine-sub{
  font-size:var(--text-2xs);color:var(--iso-card-mut);letter-spacing:.06em;text-transform:uppercase;
}

/* Status HUD reutilizado — status line em bottom-left para pipeline/converge */
.qis-status-line{
  position:absolute;left:16px;bottom:14px;
  font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--iso-card-mut);z-index:5;letter-spacing:.04em;
}
.qis-status-line.qis-done{color:var(--primary-500)}

/* Branch — origem + ramos que fanam para N destinos */
.qis-origin{
  position:absolute;left:60px;top:50%;transform:translate(-50%,-50%) translateZ(28px);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.qis-origin-dot{
  width:56px;height:56px;border-radius:var(--radius-full);
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  border:2px solid var(--primary-500);
  display:flex;align-items:center;justify-content:center;
}
.qis-origin-dot svg{width:26px;height:26px}
.qis-origin-lbl{
  font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--iso-card-mut);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.qis-destination{
  position:absolute;display:flex;align-items:center;gap:10px;
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  padding:10px 14px;border-radius:var(--radius-lg);
  transform:translateY(-50%) translateZ(28px);
  z-index:3;transition:box-shadow .3s,border-color .3s;
  border:1px solid transparent;
}
.qis-destination i{font-size:20px;color:var(--iso-card-mut);transition:color .3s}
.qis-destination-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.qis-destination-lbl{
  font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--iso-card-title);line-height:1.2;
}
.qis-destination-sub{
  font-size:var(--text-2xs);color:var(--iso-card-mut);letter-spacing:.04em;
}
.qis-destination.qis-on{
  border-color:var(--primary-500);
  box-shadow:0 0 0 3px rgba(107,63,255,.16), var(--iso-card-shadow);
}
.qis-destination.qis-on i{color:var(--primary-500)}
.qis-destination.qis-winner{
  border-color:var(--secondary-400);
  box-shadow:0 0 0 4px rgba(232,62,140,.22), var(--iso-card-shadow);
}
.qis-destination.qis-winner i{color:var(--secondary-400)}

/* Counter — N HUD tiles em linha, cada um com número grande + label */
.qis-counters{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:var(--space-5);z-index:3;
}
.qis-tile{
  min-width:150px;padding:20px 22px;
  background:var(--iso-card-bg);border-radius:var(--radius-xl);
  box-shadow:var(--iso-card-shadow);
  display:flex;flex-direction:column;gap:6px;
  border:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.qis-tile.qis-on{
  border-color:var(--primary-500);
  box-shadow:0 0 0 3px rgba(107,63,255,.14), var(--iso-card-shadow);
}
.qis-tile-num{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--display-md);color:var(--primary-500);
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em;
}
.qis-tile-num small{
  font-size:.6em;color:var(--iso-card-mut);margin-left:4px;font-weight:var(--weight-semibold);
}
.qis-tile-lbl{
  font-size:var(--text-sm);color:var(--iso-card-title);line-height:1.3;
}
.qis-tile-meta{
  font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--iso-card-mut);letter-spacing:.06em;text-transform:uppercase;
}

/* Counter source — o Signo como fonte, à esquerda. Mesma contra-rotação do
   hero: fica de frente, não inclinado com o plano. */
.qis-source{
  position:absolute;left:40px;top:50%;width:96px;height:76px;
  margin:-38px 0 0 -48px;z-index:2;opacity:.9;
  transform-style:preserve-3d;
  transform:translateZ(20px) rotateZ(calc(-1 * var(--iso-scene-rz))) rotateX(calc(-1 * var(--iso-scene-rx)));
}
.qis-source svg{width:96px;height:auto;display:block;overflow:visible;animation:qisBreathe 4.2s ease-in-out infinite}

/* ========================================================================
   SWEEP (Email) — coluna de emails à esquerda; o signo varre de cima a baixo,
   cada email ganha um chip de categoria e voa para o bin correspondente.
   ======================================================================== */
.qis-inbox{position:absolute;left:40px;top:40px;display:flex;flex-direction:column;gap:10px;z-index:3}
.qis-mail{
  width:190px;padding:9px 12px;border-radius:var(--radius-lg);
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  display:flex;align-items:center;gap:9px;
  transform:translateZ(20px);
  transition:transform .7s cubic-bezier(.4,0,.3,1),opacity .5s;
}
.qis-mail i{font-size:15px;color:var(--iso-card-mut);flex-shrink:0;transition:color .3s}
.qis-mail-from{
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  color:var(--iso-card-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qis-mail.qis-lit i{color:var(--primary-500)}
.qis-mail-chip{
  margin-left:auto;flex-shrink:0;
  font-size:var(--text-2xs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--iso-card-tag-ai-fg);background:var(--iso-card-tag-ai-bg);
  padding:2px 7px;border-radius:var(--radius-sm);
  opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s;
}
.qis-mail.qis-lit .qis-mail-chip{opacity:1;transform:scale(1)}
.qis-mail.qis-sent{opacity:0}
.qis-sweeper{
  position:absolute;left:24px;width:222px;height:44px;z-index:2;
  border-radius:var(--radius-lg);pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--iso-card-tag-ai-bg),transparent);
  opacity:0;transition:top .45s cubic-bezier(.4,0,.3,1),opacity .3s;
}
.qis-sweeper.qis-on{opacity:1}
.qis-bins{position:absolute;right:40px;top:56px;display:flex;flex-direction:column;gap:12px;z-index:3}
.qis-bin{
  min-width:130px;padding:9px 13px;border-radius:var(--radius-lg);
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  display:flex;align-items:center;gap:9px;transform:translateZ(20px);
  border:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.qis-bin i{font-size:16px;color:var(--iso-card-mut);transition:color .3s}
.qis-bin-lbl{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--iso-card-title);white-space:nowrap}
.qis-bin-n{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--iso-card-mut);font-variant-numeric:tabular-nums;
}
.qis-bin.qis-hit{
  border-color:var(--primary-500);
  box-shadow:0 0 0 3px rgba(107,63,255,.14),var(--iso-card-shadow);
}
.qis-bin.qis-hit i{color:var(--primary-500)}

/* ========================================================================
   ORBIT (Follow-up) — dial central; leads orbitam com timer; quando expira,
   o signo dispara um follow-up e o lead volta a ficar em silêncio.
   ======================================================================== */
/* Núcleo do orbit — o Signo completo a flutuar livre, sem disco por trás:
   é o mesmo tratamento do hero (ver .qis-core). As três camadas herdam as
   animações qisFlo pelas classes qis-lt/qis-lm/qis-lb da fundação. */
.qis-hub{
  position:absolute;left:50%;top:50%;width:124px;height:98px;
  margin:-49px 0 0 -62px;z-index:3;
  transform-style:preserve-3d;
  /* Contra-rotação idêntica à do hero (.qis-core): o Signo fica de frente para
     o observador, dentro do espaço isométrico, em vez de apanhar a inclinação. */
  transform:translateZ(26px) rotateZ(calc(-1 * var(--iso-scene-rz))) rotateX(calc(-1 * var(--iso-scene-rx)));
}
.qis-hub-inner{animation:qisBreathe 4.2s ease-in-out infinite}
.qis-hub-inner svg{width:124px;height:auto;display:block;overflow:visible}
.qis-hub-inner path{transform-box:fill-box;transform-origin:center}
.qis-ring{
  position:absolute;left:50%;top:50%;border-radius:var(--radius-full);
  border:1px dashed var(--iso-connector);opacity:.5;pointer-events:none;
}
.qis-lead{
  position:absolute;left:50%;top:50%;z-index:4;
  display:flex;align-items:center;gap:8px;
  padding:7px 11px;border-radius:var(--radius-lg);
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  border:1px solid transparent;
  transform:translateZ(24px);
  transition:border-color .3s,box-shadow .3s;
}
.qis-lead i{font-size:14px;color:var(--iso-card-mut);transition:color .3s}
.qis-lead-name{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--iso-card-title);white-space:nowrap}
.qis-lead-timer{
  font-family:var(--font-mono);font-size:var(--text-2xs);
  color:var(--iso-card-mut);font-variant-numeric:tabular-nums;
}
.qis-lead.qis-cold{border-color:var(--secondary-400);box-shadow:0 0 0 3px rgba(232,62,140,.18),var(--iso-card-shadow)}
.qis-lead.qis-cold i,.qis-lead.qis-cold .qis-lead-timer{color:var(--secondary-400)}
.qis-lead.qis-warm{border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(107,63,255,.16),var(--iso-card-shadow)}
.qis-lead.qis-warm i,.qis-lead.qis-warm .qis-lead-timer{color:var(--primary-500)}

/* ========================================================================
   SCAN (Invoices) — documento ao centro, linha de scan desce, campos saltam
   para uma tabela contabilística à direita.
   ======================================================================== */
.qis-doc{
  position:absolute;left:70px;top:50%;width:200px;height:240px;
  margin-top:-120px;z-index:2;
  border-radius:var(--radius-lg);padding:16px 15px;
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  transform:translateZ(22px);
  display:flex;flex-direction:column;gap:9px;
}
.qis-doc-head{
  font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--iso-card-mut);display:flex;align-items:center;gap:6px;margin-bottom:2px;
}
.qis-doc-head i{font-size:14px;color:var(--primary-500)}
.qis-doc-line{height:6px;border-radius:3px;background:var(--iso-card-tag-bg)}
.qis-doc-line--sm{width:55%}
.qis-doc-line--md{width:78%}
/* Dentro de preserve-3d é o translateZ (não o z-index) que decide a ordem de
   pintura: a linha tem de ficar ACIMA do documento (22px) e do ledger (24px). */
.qis-scanline{
  position:absolute;left:62px;width:216px;height:3px;z-index:4;
  transform:translateZ(34px);
  background:linear-gradient(90deg,transparent,var(--primary-500),transparent);
  box-shadow:0 0 12px rgba(107,63,255,.55);
  opacity:0;pointer-events:none;
}
.qis-scanline.qis-on{opacity:1}
.qis-ledger{
  position:absolute;right:46px;top:50%;width:238px;
  margin-top:-104px;z-index:3;
  border-radius:var(--radius-lg);padding:12px;
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  transform:translateZ(24px);display:flex;flex-direction:column;gap:6px;
}
.qis-ledger-head{
  font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--iso-card-mut);padding-bottom:6px;border-bottom:1px solid var(--iso-hud-border);
}
.qis-lrow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 0;opacity:0;transform:translateX(14px);
  transition:opacity .35s,transform .35s;
}
.qis-lrow.qis-in{opacity:1;transform:translateX(0)}
.qis-lrow-k{font-size:var(--text-2xs);color:var(--iso-card-mut);letter-spacing:.03em}
.qis-lrow-v{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--iso-card-title);font-weight:var(--weight-semibold);
}

/* ========================================================================
   STREAM (Reports) — N fontes à esquerda emitem streams para um dashboard.
   ======================================================================== */
.qis-srcs{position:absolute;left:38px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:3}
.qis-src{
  display:flex;align-items:center;gap:9px;
  padding:8px 12px;border-radius:var(--radius-lg);
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  transform:translateZ(22px);border-left:3px solid var(--primary-500);
}
.qis-src i{font-size:15px;color:var(--iso-card-mut)}
.qis-src-lbl{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--iso-card-title);white-space:nowrap}
.qis-dash{
  position:absolute;right:42px;top:50%;width:250px;
  margin-top:-96px;z-index:3;
  border-radius:var(--radius-lg);padding:15px;
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  transform:translateZ(26px);
}
.qis-dash-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:14px;
}
.qis-dash-title{font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--iso-card-mut)}
.qis-dash-num{
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-2xl);color:var(--primary-500);font-variant-numeric:tabular-nums;line-height:1;
}
.qis-bars{display:flex;align-items:flex-end;gap:8px;height:84px}
.qis-bar{
  flex:1;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--primary-400,#8765FF),var(--primary-500));
  height:0;transition:height .7s cubic-bezier(.2,.8,.3,1);
}

/* ========================================================================
   SLOT (Bookings) — grelha semanal; um pedido aterra num slot livre.
   ======================================================================== */
.qis-cal{
  position:absolute;left:50%;top:50%;z-index:3;
  transform:translate(-50%,-50%) translateZ(20px);
  display:grid;grid-template-columns:repeat(7,44px);gap:7px;
}
.qis-slot{
  height:30px;border-radius:var(--radius-md);
  border:1px dashed var(--iso-hud-border);
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.qis-slot.qis-busy{background:var(--iso-card-tag-bg);border-style:solid;border-color:transparent}
.qis-slot.qis-target{
  background:var(--primary-500);border-color:var(--primary-500);border-style:solid;
  box-shadow:0 0 0 3px rgba(107,63,255,.2);
}
.qis-slot.qis-target i{font-size:15px;color:var(--surface-0)}
.qis-req{
  position:absolute;left:30px;top:34px;z-index:5;
  display:flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:var(--radius-lg);
  background:var(--iso-card-bg);box-shadow:var(--iso-card-shadow);
  transform:translateZ(30px);
  transition:transform .85s cubic-bezier(.45,0,.35,1),opacity .4s;
}
.qis-req i{font-size:15px;color:var(--primary-500)}
.qis-req-body{display:flex;flex-direction:column;gap:1px}
.qis-req-lbl{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--iso-card-title);white-space:nowrap}
.qis-req-sub{font-size:var(--text-2xs);color:var(--iso-card-mut)}
.qis-req.qis-landed{opacity:0}
.qis-sms{
  position:absolute;right:34px;bottom:40px;z-index:5;
  display:flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:var(--radius-full);
  background:var(--iso-card-tag-ai-bg);
  transform:translateZ(28px) translateY(10px);
  opacity:0;transition:opacity .4s,transform .4s;
}
.qis-sms i{font-size:14px;color:var(--iso-card-tag-ai-fg)}
.qis-sms span{font-size:var(--text-2xs);font-weight:var(--weight-semibold);color:var(--iso-card-tag-ai-fg);white-space:nowrap}
.qis-sms.qis-on{opacity:1;transform:translateZ(28px) translateY(0)}

/* ========================================================================
   Mount — wrapper da Cena, com altura fluida por tamanho.
   Emitido pelo helper illustration('id', ['size' => 'sm|md|lg']). Aplica o
   contrato do site: shrink via clamp (fluid family), sem media queries para
   pura redução de tamanho. Ver docs/adr/0004.
   ======================================================================== */
.qis-mount{position:relative}   /* overflow visível — o palco pode transbordar */
.qis-mount--sm{height:clamp(180px, 24vw, 260px)}
.qis-mount--md{height:clamp(220px, 32vw, 340px)}
.qis-mount--lg{height:clamp(260px, 40vw, 400px)}

/* Reequilíbrio em mobile (≤768px, o break onde tudo empilha — ADR 0004).
   A escala da Cena encolhe tudo por igual, o que deixa o Signo a dominar e os
   cards ilegíveis. Aqui invertemos o peso: o Signo baixa a 2/3 e os cards
   crescem, com texto e padding maiores. Não é shrink, é mudança de proporção —
   por isso media query e não clamp. */
@media (max-width:768px){
  .qis-scene{
    /* Enquadramento: sobe a cena para o meio do palco (em desktop está a 60%,
       propositadamente baixa). Sem nudge horizontal — com o skeleton a ocupar
       o lugar do card de saída desde o início, a composição é simétrica durante
       todo o ciclo e não precisa de compensação. */
    --iso-scene-y:50%;
    --iso-scene-nudge-y:-12px;

    --iso-core-w:100px;              /* 150 → 100 (−1/3) */
    --iso-core-h:79px;               /* mantém o rácio do losango */
    /* 270px é o máximo prático: os cards partem das margens (0 e 720) e o
       núcleo ocupa 310–410, deixando ~34px de cada lado para o conector. */
    --iso-card-w:270px;              /* 172 → 270 */
    --iso-card-pad:18px 20px;
    --iso-card-fs:var(--text-lg);
    --iso-card-fs-xs:var(--text-base);
    --iso-card-ico:20px;
  }
}

/* Restruturação em mobile (≤640px) — HUD counter e tag decorativos ficam
   pequenos demais para lerem, escondemos. É uma restruturação, portanto
   media query (ADR 0004). */
@media (max-width:640px){
  .qis-hud-count{display:none}
  .qis-tag{display:none}
  /* Rail de passos vertical não cabe — colapsa junto do palco */
  .qis-steps{display:none !important}
}