/* ===== NUCLEO: copia de motor/assets/css/deck-base-referencia.css =====
   Unica divergencia declarada: font-display block -> swap (licao 1 do craft; PDF font-safe).
   Fontes copiadas de motor/assets/fonts/roboto/, byte-identicas (md5 conferido). */
@font-face{font-family:'Roboto';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/roboto-400.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/roboto-500.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/roboto-700.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-weight:900;font-style:normal;font-display:swap;src:url('fonts/roboto-900.woff2') format('woff2');}

:root{
  --ink-900:#0A0D14; --ink-800:#151A28; --ink-700:#2A3145;
  --navy-600:#2C3864; --paper-50:#F2F5FA; --paper-100:#FAFBFD;
  --slate-500:#4D4D4D; --mist-300:#C4C8D0; --azure-500:#07B1DE;
  --azure-light:#96D6EE;
  --cta-a:#1B6FF5; --cta-b:#0FA3E0;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:#3a3a3a;}
@page{size:1920px 1080px;margin:0;}

.slide{
  position:relative;width:1920px;height:1080px;overflow:hidden;
  font-family:'Roboto',sans-serif;-webkit-font-smoothing:antialiased;
  page-break-after:always;break-after:page;
  font-feature-settings:"kern" 1;text-rendering:optimizeLegibility;
}
.slide:last-child{page-break-after:auto;}

.dark{background:var(--ink-900);color:var(--mist-300);}
.light{background:var(--paper-50);color:var(--slate-500);}

/* safe-area frame: 120px margin, live area 1680x840 */
.frame{position:absolute;inset:120px;}

/* type */
.kicker{font-size:17px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--azure-500);line-height:1;}
.display{font-size:104px;font-weight:900;line-height:100px;letter-spacing:-.015em;}
.h1{font-size:68px;font-weight:700;line-height:77px;letter-spacing:-.01em;}
.h2{font-size:44px;font-weight:700;line-height:52px;letter-spacing:-.005em;}
.h3{font-size:30px;font-weight:500;line-height:40px;}
.body{font-size:22px;font-weight:400;line-height:33px;}
.cap{font-size:15px;font-weight:400;line-height:22px;}
.dark .h1{color:#EEF1F6;}
.light .h1{color:var(--navy-600);}
.dark .body{color:var(--mist-300);}
.light .body{color:var(--slate-500);}

/* footer chrome */
.pagenum{position:absolute;left:120px;bottom:64px;font-size:15px;font-weight:500;letter-spacing:.04em;}
.dark .pagenum{color:rgba(7,177,222,.55);}
.light .pagenum{color:rgba(7,177,222,.7);}
.logo-foot{position:absolute;right:120px;bottom:60px;height:44px;width:165px;
  background-size:contain;background-repeat:no-repeat;background-position:right center;}
.logo-foot.branco{background-image:url('img/logo-branco.png');}
.logo-foot.cores{background-image:url('img/logo-cores.png');}

/* signal line */
.signal{height:2px;background:var(--azure-500);position:relative;}
.signal::after{content:"";position:absolute;left:42%;top:50%;width:11px;height:11px;
  border-radius:50%;background:var(--azure-500);
  box-shadow:0 0 14px 3px rgba(7,177,222,.65);transform:translate(-50%,-50%);}

/* callout chips */
.callout{display:inline-block;border:1.5px solid var(--azure-500);border-radius:6px;
  padding:16px 24px;font-size:22px;line-height:31px;}
.dark .callout{background:rgba(7,177,222,.07);color:#DDE6F0;}
.light .callout{background:rgba(7,177,222,.06);color:var(--navy-600);font-weight:500;}
.callout .em{color:var(--azure-500);font-weight:700;}

/* check rows */
.checkrow{display:flex;align-items:center;gap:14px;font-size:24px;font-weight:500;}
.dark .checkrow{color:#E4E9F0;}
.light .checkrow{color:var(--navy-600);}
.checkdot{width:30px;height:30px;flex:0 0 30px;}

/* CTA pill - gradient ONLY here */
.cta-pill{display:inline-flex;align-items:center;gap:16px;
  background:linear-gradient(100deg,var(--cta-a),var(--cta-b));
  color:#fff;font-size:30px;font-weight:700;letter-spacing:-.005em;
  padding:26px 56px;border-radius:999px;
  box-shadow:0 18px 50px -12px rgba(15,111,224,.6);}

.az{color:var(--azure-500);}
.white{color:#F4F7FB;}
.mist{color:var(--mist-300);}
.navy{color:var(--navy-600);}

/* =====================================================================
   EXTENSOES DA PECA: deck-institucional-processo-preditiva-2026-07
   Todos os valores derivam dos tokens :root do nucleo e da paleta oficial +
   estendida do canone. DUAS cores funcionais declaradas como token nesta peca:
   (1) --alarm (ambar de status "Alarme"/"Parada"), amostrada do dashboard oficial
   ZentONE (asset aprovado do cliente), para os sinais de status do chao de fabrica;
   (2) --azure-700, ciano-escuro AA-safe para ROTULOS/ACENTOS de TEXTO e para os arcos
   dos medidores sobre FUNDO CLARO (o --azure-500 rende so 2,4:1 sobre o paper, abaixo de
   4,5:1 texto e de 3:1 grafico; o --azure-700 bate AA e preserva a familia ciano como
   acento distinto do navy). Extensao on-brand da familia azure.
   qa-tokens as aceita porque sao custom properties declaradas.
   ===================================================================== */
:root{
  --alarm:#E6A23C;         /* status "Alarme"/"Parada", consistente com o HMI ZentONE */
  --azure-700:#0A6F8C;     /* ciano-escuro AA sobre paper (texto 5,2-5,5:1; arco >=4,3:1 sobre o trilho) */
  --paper-line:rgba(44,56,100,.14);
  --paper-line-s:rgba(44,56,100,.22);
  --dark-line:rgba(196,200,208,.16);
  /* --- escala de tipo desta peca (extensao; ancora as manchetes a 3 degraus e documenta
     o sistema; nomeada e declarada = os tamanhos entram na escala permitida do qa-tokens,
     que le custom properties. Os degraus do nucleo (104/68/44/30/24/22/17/15) seguem intactos). --- */
  --t-cover:80px;   /* L1 manchete-capa */
  --t-lead:56px;    /* L2 problema e L10 fecho: manchete de peso */
  --t-title:48px;   /* L3..L9: manchete de secao (um degrau unico) */
  --t-stat:92px;    /* numeral-heroi (L2) */
  --t-stat-u:52px;  /* unidade do numeral */
  --t-gauge:34px;   /* valor de medidor (L4) */
  --t-h3:26px;      /* titulo de passo (L3) */
  --t-h4:25px;      /* subtitulo de passo/card */
  --t-body-lg:23px; /* corpo de destaque (L1,L10) */
  --t-body:21px;    /* corpo de pilar (L4,L6,L9) */
  --t-body-d:20px;  /* corpo denso / rotulo grande */
  --t-ui:19px;      /* rotulo de UI */
  --t-ui-s:18px;    /* rotulo de UI menor / nota */
  --t-meta:16px;    /* assinatura / nota fina */
  --t-cap:14px;     /* legenda */
  --t-micro:13px;   /* metaline */
}
/* preserva o casing de marca (ZentONE/ZentNode) dentro de eyebrows caixa-alta:
   o rotulo segue uppercase, o token de marca volta ao seu proprio caixa (guarda de marca). */
.kicker .brandcase,.spin-badge .brandcase{text-transform:none;}

/* logos otimizados em webp (override do nucleo, que aponta .png) */
.logo-foot.branco{background-image:url('img/logo-branco.webp');}
.logo-foot.cores{background-image:url('img/logo-cores.webp');}

/* BALANCO VERTICAL: o conteudo de fluxo ocupa a area viva (1680x840), centrado no
   eixo vertical (override do .frame do nucleo, sem mutar a regra do nucleo; o gate
   NUCLEO confere que o nucleo esta contido, e este override e adicao). Mata o "vao
   inferior morto" recorrente. GRID (nao flex): os itens mantem largura/max-width
   proprios (sem stretch cross-axis que colidia com as cenas absolutas). Elementos
   absolutos das cenas centram-se a parte (top:50%/translateY). */
.frame{display:grid;align-content:center;}
.slide.top-align .frame{align-content:start;}
/* itens que nao devem esticar ate a coluna absoluta ao lado */
.frame > .callout{justify-self:start;}

/* --- profundidade de fundo (vinheta radial; e fundo, pode sangrar) --- */
.slide.dark.depth-hero{background:radial-gradient(120% 90% at 70% 40%, var(--ink-800) 0%, var(--ink-900) 62%);}
.slide.dark.depth-cta{background:radial-gradient(110% 90% at 28% 80%, var(--ink-800) 0%, var(--ink-900) 60%);}
.slide.dark.depth-scope{background:radial-gradient(120% 100% at 62% 46%, var(--ink-800) 0%, var(--ink-900) 66%);}
.slide.light.depth-top{background:radial-gradient(100% 80% at 30% 0%, var(--paper-100) 0%, var(--paper-50) 70%);}
.slide.light.depth-top.halo-28{background:radial-gradient(100% 80% at 28% 0%, var(--paper-100) 0%, var(--paper-50) 70%);}

/* --- banda de foto full-bleed (capa e provas dark) --- */
.photo-band{position:absolute;top:0;right:0;bottom:0;background-size:cover;background-position:center;}
.photo-band.textil{background-image:url('img/foto-textil.webp');}
.photo-band.envase{background-image:url('img/foto-envase.webp');}
.photo-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--ink-900) 0%, var(--ink-900) 36%, rgba(10,13,20,.84) 54%, rgba(10,13,20,.40) 100%);}
.photo-band.plato44::after{background:linear-gradient(90deg, var(--ink-900) 0%, var(--ink-900) 44%, rgba(10,13,20,.86) 60%, rgba(10,13,20,.45) 100%);}

/* --- atmosfera duotone (textura de profundidade em laminas dark; NUNCA statement de linha) ---
   a foto industrial entra baixa, mascarada num canto e dissolvida no escuro: vira o ar da
   fabrica atras do conteudo, nao uma figura. Preserva a vinheta da lamina (a mascara some as
   bordas). Estatica, entra tambem no PDF. */
.atmo-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
.atmo{position:absolute;inset:0;background-size:cover;opacity:.16;
  /* mascara por ALFA (so o alfa dos stops importa; a cor e ink-900 da paleta, sem preto puro) */
  -webkit-mask-image:radial-gradient(118% 104% at 76% 28%, rgba(10,13,20,1) 0%, rgba(10,13,20,.38) 42%, rgba(10,13,20,0) 70%);
          mask-image:radial-gradient(118% 104% at 76% 28%, rgba(10,13,20,1) 0%, rgba(10,13,20,.38) 42%, rgba(10,13,20,0) 70%);}
/* a textil e mais clara: opacidade menor para virar ambiencia, nunca figura de linha */
.atmo.a-textil{background-image:url('img/foto-linha-textil-duotone.webp');background-position:68% 36%;opacity:.10;}
.atmo.a-envase{background-image:url('img/foto-linha-envase-duotone.webp');background-position:58% 46%;opacity:.16;}

/* --- sombras (nunca mudam box-model, so box-shadow) --- */
.shadow-card-l{box-shadow:0 8px 24px -10px rgba(44,56,100,.16);}
.shadow-anchor-l{box-shadow:0 14px 36px -12px rgba(44,56,100,.20);}
.shadow-diagram{box-shadow:0 10px 30px -12px rgba(44,56,100,.18);}
.shadow-card-d{box-shadow:0 12px 40px -16px rgba(10,13,20,.6);}
.shadow-scene-d{box-shadow:0 16px 46px -18px rgba(10,13,20,.7);}

/* --- eyebrow row helper --- */
.eyerow{display:flex;flex-direction:column;gap:14px;}
/* protege termos que nao podem quebrar dentro (on-premise, 4-20 mA, tempo real, OPC-UA...) */
.nb{white-space:nowrap;}
.proto span,.read-chip,.geo-chip,.hero-tag,.st-pill,.chip{white-space:nowrap;}

/* ---------- CAPA (L1) ---------- */
.hero-copy{position:absolute;left:0;top:118px;width:1020px;z-index:3;}
.hero-stage{position:absolute;right:64px;top:150px;width:720px;height:660px;z-index:2;}
.hero-canvas{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:600px;height:338px;display:none;}
.hero-static{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:600px;height:auto;display:block;}
.hero-ring{position:absolute;left:50%;top:48%;width:600px;height:600px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(7,177,222,.09);pointer-events:none;}
.hero-ring::before{content:"";position:absolute;left:50%;top:50%;width:430px;height:430px;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(7,177,222,.16);}
.hero-halo{position:absolute;left:50%;top:48%;width:520px;height:520px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(7,177,222,.20) 0%, rgba(7,177,222,.05) 46%, transparent 72%);
  filter:blur(2px);pointer-events:none;}
.spin-badge{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);
  font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(7,177,222,.75);}
.hero-tag{position:absolute;display:flex;align-items:center;gap:9px;font-size:16px;font-weight:500;
  color:#E4E9F0;background:rgba(10,13,20,.55);border:1px solid rgba(7,177,222,.28);
  border-radius:999px;padding:9px 16px;}
.hero-tag b{color:var(--azure-500);font-weight:700;}
.hero-tag .d{width:8px;height:8px;border-radius:50%;background:var(--azure-500);box-shadow:0 0 10px 2px rgba(7,177,222,.7);}
.hero-tag.t1{top:60px;right:150px;}
.hero-tag.t2{top:300px;right:8px;}
.hero-tag.t3{bottom:170px;right:190px;}
.assinatura{position:absolute;left:120px;bottom:118px;font-size:16px;font-weight:500;letter-spacing:.01em;color:var(--mist-300);}
.assinatura b{color:#E4E9F0;font-weight:700;}

/* ---------- PROBLEMA (L2) ---------- */
.truths{display:flex;flex-direction:column;gap:0;margin-top:32px;}
.truth{display:flex;align-items:center;gap:20px;padding:16px 2px;border-bottom:1px solid var(--dark-line);}
.truth:first-child{border-top:1px solid var(--dark-line);}
.truth .ti{width:44px;height:44px;flex:0 0 44px;border-radius:9px;border:1.5px solid rgba(7,177,222,.4);
  background:rgba(7,177,222,.06);display:flex;align-items:center;justify-content:center;}
.truth .tt{font-size:23px;line-height:30px;color:#E4E9F0;font-weight:400;}
.truth .tt b{color:#EEF1F6;font-weight:700;}
.closeline{margin-top:24px;font-size:24px;line-height:33px;color:#EEF1F6;font-weight:500;max-width:1080px;}
.closeline .az{color:var(--azure-500);font-weight:700;}
.stat-col{position:absolute;right:0;top:50%;transform:translateY(-50%);width:470px;display:flex;flex-direction:column;gap:40px;}
.bigstat{border-left:3px solid var(--azure-500);padding-left:26px;}
.bigstat .pre{font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--azure-500);margin-bottom:4px;}
.bigstat .n{font-size:92px;font-weight:900;line-height:90px;letter-spacing:-.02em;color:#EEF1F6;}
.bigstat .n .u{font-size:52px;font-weight:700;color:var(--azure-500);margin-left:2px;}
.bigstat .l{font-size:19px;line-height:27px;color:var(--mist-300);margin-top:12px;max-width:400px;}
.src-note{font-size:15px;color:rgba(196,200,208,.55);letter-spacing:.01em;}
.light .src-note{color:rgba(77,77,77,.6);}

/* ---------- PASSOS + DIAGRAMA (L3) ---------- */
.steps{display:flex;gap:40px;}
.step{flex:1;}
.num{width:54px;height:54px;border:2px solid var(--azure-500);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:700;color:var(--azure-500);
  background:rgba(7,177,222,.08);}
.st-h{font-size:26px;font-weight:700;color:var(--navy-600);line-height:34px;margin-top:20px;}
.st-b{font-size:18px;line-height:27px;color:var(--slate-500);margin-top:10px;}
/* passos empilhados (L3, coluna esquerda ao lado do diagrama) */
.steps-v{display:flex;flex-direction:column;gap:24px;}
.steps-v .vstep{display:flex;gap:20px;align-items:flex-start;}
.steps-v .num{flex:0 0 50px;width:50px;height:50px;font-size:23px;}
.steps-v .vs-body{flex:1;}
.steps-v .vs-h{font-size:25px;font-weight:700;color:var(--navy-600);line-height:32px;}
.steps-v .vs-b{font-size:18px;font-weight:400;color:var(--slate-500);line-height:26px;margin-top:8px;}
.diagram-wrap{position:relative;border:1.5px solid var(--paper-line);border-radius:12px;
  background:var(--paper-100);padding:22px 26px;overflow:hidden;}
.diagram-wrap img{display:block;width:100%;height:auto;}
.diagram-pulse{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--azure-500);
  box-shadow:0 0 16px 5px rgba(7,177,222,.6);top:50%;left:0;opacity:0;pointer-events:none;}
.arch-nota{margin-top:18px;font-size:18px;line-height:26px;color:var(--slate-500);}
.arch-nota b{color:var(--navy-600);font-weight:700;}

/* ---------- GAUGES / VARIAVEIS DE PROCESSO (L4) ---------- */
.gauge-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;}
.gauge{background:var(--paper-100);border:1.5px solid var(--paper-line);border-radius:12px;
  padding:20px 24px;display:flex;align-items:center;gap:22px;}
.gauge svg{width:118px;height:78px;flex:0 0 118px;}
.gauge .g-arc-bg{fill:none;stroke:rgba(44,56,100,.14);stroke-width:9;stroke-linecap:round;}
.gauge .g-arc{fill:none;stroke:var(--azure-500);stroke-width:9;stroke-linecap:round;}
.gauge .g-body{display:flex;flex-direction:column;}
.gauge .g-name{font-size:20px;font-weight:700;color:var(--navy-600);}
.gauge .g-val{font-size:34px;font-weight:900;color:var(--navy-600);line-height:1.05;letter-spacing:-.01em;margin-top:2px;}
.gauge .g-val .u{font-size:18px;font-weight:700;color:var(--azure-500);margin-left:3px;}
.gauge .g-sub{font-size:15px;color:var(--slate-500);margin-top:4px;}
.loop-note{margin-top:20px;display:flex;align-items:center;gap:14px;font-size:18px;color:var(--slate-500);}
.loop-note svg{width:150px;height:26px;flex:0 0 150px;}
.loop-note .trace{fill:none;stroke:var(--azure-500);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.loop-note b{color:var(--navy-600);font-weight:700;}

/* ---------- SCOPE / PREDITIVA (L5) ---------- */
.scope{position:relative;border:1.5px solid rgba(7,177,222,.22);border-radius:14px;
  background:linear-gradient(180deg, rgba(21,26,40,.9), rgba(10,13,20,.9));padding:26px 30px;overflow:hidden;}
.scope svg{display:block;width:100%;height:auto;}
.scope .grid-l{stroke:rgba(196,200,208,.10);stroke-width:1;}
.scope .band{fill:rgba(230,162,60,.10);}
.scope .band-line{stroke:var(--alarm);stroke-width:1.4;stroke-dasharray:6 6;opacity:.7;}
.scope .wave{fill:none;stroke:var(--azure-500);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(7,177,222,.5));}
.scope .axis{stroke:rgba(196,200,208,.28);stroke-width:1.4;}
.scope .axis-t{fill:rgba(196,200,208,.55);font-size:14px;font-family:'Roboto',sans-serif;}
.scope .alert{fill:var(--alarm);}
.scope .alert-ring{fill:none;stroke:var(--alarm);stroke-width:2;}
.scope-tag{position:absolute;top:22px;right:26px;display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;color:var(--alarm);letter-spacing:.02em;}
.scope-tag .d{width:9px;height:9px;border-radius:50%;background:var(--alarm);}
.scope-cap{font-size:15px;color:rgba(196,200,208,.6);margin-top:12px;letter-spacing:.01em;}
.read-row{display:flex;gap:16px;margin-top:0;}
.read-chip{display:flex;align-items:center;gap:11px;border:1px solid rgba(7,177,222,.28);
  border-radius:999px;padding:11px 22px;background:rgba(7,177,222,.06);font-size:19px;color:#E4E9F0;font-weight:500;}
.read-chip .d{width:9px;height:9px;border-radius:50%;background:var(--azure-500);box-shadow:0 0 9px 2px rgba(7,177,222,.6);}
.mtx{display:flex;gap:46px;margin-top:0;}
.mtx .m{font-size:19px;color:var(--mist-300);}
.mtx .m b{color:#EEF1F6;font-weight:700;}

/* ---------- BRIDGE / INTEGRACAO (L6) ---------- */
/* A ponte tem DUAS MARGENS e uma trave central. ENTRADA (OT): quatro protocolos em pills de
   contorno navy convergindo por um coletor azure para dentro do ZentEdge (render real, sobre
   pedestal navy com degrau de profundidade e glow azure). SAIDA (TI): MQTT e o banco SQL local
   fluem do ZentEdge por um fio azure ate o ENDPOINT de TI/BI (a outra margem: servidor e monitor,
   vetor neutro, sem numeros). Um unico pulso azure atravessa a ponte uma vez. Ritmo 8pt, edge-safe. */
.bridge{border:1.5px solid var(--paper-line);border-radius:16px;background:var(--paper-100);
  padding:40px 48px;position:relative;}
.bhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px;}
.bhead .bhd{font-size:16px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.bhead .bhd.in{color:var(--slate-500);}
.bhead .bhd.out{color:var(--azure-500);}
/* grid das 4 zonas: OT (340) | ZentEdge (auto) | fio de saida (1fr) | endpoint TI (168).
   height fixa: as coordenadas do coletor/fio (SVG) casam com os boxes. O pulso fica FORA do grid. */
.bdeck{position:relative;display:grid;grid-template-columns:340px auto 1fr 168px;align-items:center;
  column-gap:40px;height:248px;margin-bottom:16px;}
.bdeck > *{position:relative;z-index:1;}
/* SVG do tabuleiro: coletor OT (4 leads -> 1) + fio de saida ate o endpoint. Atras dos boxes. */
.bdeck .bwire{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;}
.bwire .lead{fill:none;stroke:var(--azure-500);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.5;}
.bwire .out{fill:none;stroke:var(--azure-500);stroke-width:2.4;stroke-linecap:round;opacity:.85;}
.bwire .node-dot{fill:var(--azure-500);}
/* ENTRADA OT: coluna de 4 pills navy, alinhadas a direita (apontando para o ZentEdge) */
.ot-col{display:flex;flex-direction:column;gap:16px;align-items:stretch;justify-self:stretch;}
.ot-col .proto-pill{border:1.5px solid var(--paper-line-s);border-radius:10px;height:44px;display:flex;align-items:center;
  padding:0 20px;font-size:20px;font-weight:500;color:var(--navy-600);background:#fff;white-space:nowrap;}
/* ZentEdge: degrau navy de profundidade + pedestal navy arredondado + render real + glow azure */
.bcore{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.edge-plinth{position:relative;width:130px;height:190px;border-radius:20px;
  background:linear-gradient(180deg,var(--navy-600),var(--ink-700));
  box-shadow:0 18px 42px -16px rgba(7,177,222,.45), 0 0 0 6px rgba(7,177,222,.06);}
.edge-plinth::before{content:"";position:absolute;left:-16px;top:14px;width:130px;height:190px;border-radius:20px;
  background:var(--ink-800);z-index:-1;}
.edge-plinth .edge-img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:172px;width:auto;filter:drop-shadow(0 10px 20px rgba(10,13,20,.5));}
.bcore .elab{margin-top:16px;font-size:20px;font-weight:700;color:var(--navy-600);letter-spacing:.02em;white-space:nowrap;}
/* SAIDA: pills MQTT e banco SQL local sobre o fio azure */
.out-wire{display:flex;align-items:center;gap:16px;justify-content:center;}
.out-wire .proto-pill{border:1.5px solid rgba(7,177,222,.5);border-radius:10px;height:44px;display:flex;align-items:center;
  padding:0 20px;font-size:20px;font-weight:500;color:var(--navy-600);background:rgba(7,177,222,.08);white-space:nowrap;}
/* ENDPOINT de TI/BI: servidor + monitor (vetor neutro), a outra margem da ponte */
.ti-endpoint{display:flex;flex-direction:column;align-items:center;gap:12px;justify-self:end;}
.ti-endpoint svg{width:104px;height:auto;}
.ti-endpoint .tlab{font-size:18px;font-weight:700;color:var(--navy-600);white-space:nowrap;letter-spacing:.01em;}
.bnote{text-align:right;font-size:17px;color:var(--slate-500);margin-top:2px;}
.bfoot{margin-top:24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.erp-note{font-size:18px;line-height:26px;color:var(--slate-500);}
.erp-note b{color:var(--navy-600);font-weight:700;}
.open-badge{display:inline-flex;align-items:center;gap:10px;border:1.5px solid rgba(7,177,222,.4);
  border-radius:999px;padding:10px 20px;font-size:18px;font-weight:700;color:var(--navy-600);background:rgba(7,177,222,.06);}

/* ---------- SOBERANIA (L7) ---------- */
.sov-stage{position:absolute;right:0;top:50%;transform:translateY(-50%);width:900px;height:600px;}
.plant{position:absolute;inset:0;border:2px dashed rgba(7,177,222,.5);border-radius:20px;
  background:rgba(7,177,222,.04);}
.plant-lab{position:absolute;top:-14px;left:28px;background:var(--ink-900);padding:0 12px;
  font-size:16px;font-weight:500;color:var(--azure-500);letter-spacing:.02em;}
.plant-shot{position:absolute;left:34px;top:52px;right:54px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(7,177,222,.2);box-shadow:0 18px 46px -18px rgba(10,13,20,.7);}
.plant-shot img{display:block;width:100%;height:auto;}
.plant-shot .glass{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,13,20,0) 60%, rgba(10,13,20,.35));}
.shot-cap{position:absolute;left:34px;bottom:66px;font-size:15px;color:rgba(196,200,208,.62);}
.lock-node{position:absolute;right:-30px;top:calc(50% - 30px);width:60px;height:60px;border-radius:50%;
  background:var(--ink-800);border:1.6px solid var(--azure-500);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px rgba(7,177,222,.08);}
.leak{position:absolute;right:-30px;top:50%;width:14px;height:14px;border-radius:50%;background:var(--azure-500);
  box-shadow:0 0 14px 4px rgba(7,177,222,.6);transform:translate(0,-50%);opacity:0;}
.sov-list{margin-top:32px;display:flex;flex-direction:column;gap:16px;max-width:760px;}
.sov-item{display:flex;gap:16px;align-items:flex-start;font-size:21px;line-height:29px;color:#E4E9F0;}
.sov-item svg{flex:0 0 28px;width:28px;height:28px;margin-top:2px;}
.sov-item b{color:#EEF1F6;font-weight:700;}

/* ---------- PROVA (L8) ---------- */
/* Cada card e uma MAQUINA (glyph duotone navy/azure da marca) com o seu ZentNode real lendo o
   sinal junto ao controle. Estado vivo no card inteiro: 01 e 02 em azure (Em Ciclo), 03 em ambar
   (Alarme). Os 3 ZentNodes emitem fluxos azure (o da 03 ambar) que convergem para a Base SQL local.
   Honestidade: sem dashboard, sem numero, sem OEE; so os estados Em Ciclo / Alarme. */
.geo-chip{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(7,177,222,.3);
  border-radius:999px;padding:10px 22px;font-size:18px;color:#E4E9F0;background:rgba(7,177,222,.06);font-weight:500;}
.geo-chip b{color:var(--azure-500);font-weight:700;}
.proof-stage{margin-top:32px;display:flex;align-items:stretch;gap:40px;height:392px;position:relative;}
.mach-rail{flex:1;display:flex;gap:28px;align-items:flex-start;}
.mach{flex:1;height:300px;background:rgba(21,26,40,.7);border:1px solid var(--dark-line);border-radius:16px;
  padding:22px 24px 18px;display:flex;flex-direction:column;position:relative;
  --mach-accent:var(--azure-500);}
.mach.alarm-state{--mach-accent:var(--alarm);border-color:rgba(230,162,60,.34);}
.mach::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:16px 16px 0 0;
  background:var(--mach-accent);opacity:.7;}
.mach-top{display:flex;align-items:center;justify-content:space-between;width:100%;}
.mach-n{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--azure-500);}
.mach.alarm-state .mach-n{color:var(--alarm);}
.mach .status{display:flex;gap:8px;align-items:center;}
.st-pill{font-size:14px;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:5px 13px;}
.st-pill.run{color:#EEF1F6;background:rgba(7,177,222,.16);border:1px solid rgba(7,177,222,.5);}
.st-pill.alarm{color:#0A0D14;background:rgba(230,162,60,.9);border:1px solid var(--alarm);}
.alert-tri{width:22px;height:22px;flex:0 0 22px;}
/* palco maquina + node */
.mach-visual{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;}
.mach-glyph{width:204px;height:auto;flex:0 0 204px;}
.read-link{width:34px;height:60px;flex:0 0 34px;}
.read-link .rl{fill:none;stroke:var(--mach-accent);stroke-width:2.4;stroke-linecap:round;}
.read-link .rd{fill:var(--mach-accent);}
.node-mount{display:flex;flex-direction:column;align-items:center;gap:7px;}
.node-mount .znode-hero{width:96px;height:auto;filter:drop-shadow(0 8px 14px rgba(10,13,20,.5));}
.node-mount .np{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:#E4E9F0;
  letter-spacing:.02em;white-space:nowrap;}
.node-mount .np .d{width:8px;height:8px;border-radius:50%;background:var(--mach-accent);
  box-shadow:0 0 9px 2px color-mix(in srgb, var(--mach-accent) 60%, transparent);}
/* Base SQL local */
.sqlbase{flex:0 0 240px;border:1px solid rgba(7,177,222,.3);border-radius:14px;background:rgba(7,177,222,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:22px;position:relative;z-index:2;}
.sqlbase .db{width:64px;height:64px;}
.sqlbase .lab{font-size:19px;font-weight:700;color:#EEF1F6;text-align:center;line-height:26px;}
.sqlbase .sub{font-size:15px;color:var(--mist-300);text-align:center;}
/* SVG dos 3 fluxos convergentes para a Base SQL local (over the cards, pointer-events none) */
.proof-flow{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;}
.proof-flow .flow{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55;}
.proof-flow .flow.az{stroke:var(--azure-500);}
.proof-flow .flow.am{stroke:var(--alarm);}
.proof-flow .emit{opacity:.9;}
.proof-flow .emit.az{fill:var(--azure-500);}
.proof-flow .emit.am{fill:var(--alarm);}
/* cometas (pulso que viaja ate a Base SQL local): so no motion, invisiveis no estatico/reduced */
.proof-flow .comet{opacity:0;}
.proof-flow .comet.az{fill:var(--azure-500);filter:drop-shadow(0 0 7px rgba(7,177,222,.85));}
.proof-flow .comet.am{fill:var(--alarm);filter:drop-shadow(0 0 7px rgba(230,162,60,.85));}
.proof-cap{margin-top:24px;font-size:19px;line-height:28px;color:var(--mist-300);max-width:1360px;}
.proof-cap b{color:#EEF1F6;font-weight:700;}

/* ---------- MODELO (L9) ---------- */
/* A RELACAO node-sobre-maquina (nao a foto de linha, nao painel vazio): o ZentNode chega em escala
   de heroi, com glow azure de "sinal adquirido", e ENCONTRA a maquina que ja existe (glyph de maquina
   da marca, o mesmo vetor da L8). Um vinculo azure entre os dois (a leitura nao invasiva) com um
   marcador discreto no ponto de leitura. O verbo do cliente e instalar e conectar; leitura nao invasiva. Machine-centric. */
.retro-stage{position:absolute;right:0;top:50%;transform:translateY(-50%);width:520px;height:480px;
  --mach-accent:var(--azure-500);}
.retro-machine-glyph{position:absolute;left:6px;bottom:44px;width:312px;height:auto;
  filter:drop-shadow(0 18px 40px rgba(44,56,100,.34));}
.retro-glow{position:absolute;right:18px;top:78px;width:300px;height:230px;pointer-events:none;
  background:radial-gradient(closest-side, rgba(7,177,222,.24) 0%, rgba(7,177,222,.06) 52%, transparent 74%);
  filter:blur(2px);}
.retro-node{position:absolute;right:22px;top:104px;z-index:3;width:238px;height:auto;
  filter:drop-shadow(0 22px 34px rgba(44,56,100,.42));}
/* o vinculo azure (leitura nao invasiva) + marcador no ponto de leitura, over a maquina */
.retro-read{position:absolute;left:0;top:0;width:520px;height:480px;z-index:2;pointer-events:none;overflow:visible;}
.retro-read .rlink{fill:none;stroke:var(--azure-500);stroke-width:3;stroke-linecap:round;}
.retro-read .rmark{fill:none;stroke:var(--azure-500);stroke-width:2.4;}
.retro-read .rdot{fill:var(--azure-500);}
.retro-label{position:absolute;left:22px;bottom:2px;z-index:4;font-size:15px;font-weight:700;color:var(--navy-600);
  letter-spacing:.02em;display:inline-flex;align-items:center;gap:9px;}
.retro-label .lp{width:9px;height:9px;border-radius:50%;background:var(--azure-500);flex:0 0 9px;}
/* centragem por text-align no wrap (nao por transform, que o guard de reduced-motion zera) */
.retro-badge-wrap{position:absolute;top:0;left:0;right:0;text-align:center;z-index:5;}
.retro-badge{display:inline-flex;align-items:center;gap:10px;
  border:1.5px solid rgba(7,177,222,.45);border-radius:999px;padding:11px 22px;background:rgba(7,177,222,.07);
  font-size:18px;font-weight:700;color:var(--navy-600);white-space:nowrap;}
.model-grid{display:flex;gap:26px;margin-top:32px;max-width:1000px;}
.model-card{flex:1;background:var(--paper-100);border:1.5px solid var(--paper-line);border-radius:12px;padding:26px 28px;}
.model-card.accent{border-top:4px solid var(--azure-500);}
.model-card .mtag{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--azure-500);}
.model-card .mtag.mut{color:var(--slate-500);}
.model-card .mh{font-size:24px;font-weight:700;color:var(--navy-600);margin-top:12px;line-height:31px;}
.model-card .mb{font-size:18px;line-height:26px;color:var(--slate-500);margin-top:10px;}
.channel-note{margin-top:24px;border-left:3px solid var(--azure-500);padding-left:22px;font-size:19px;line-height:28px;color:var(--slate-500);max-width:1040px;}
.channel-note b{color:var(--navy-600);font-weight:700;}

/* ---------- CTA (L10) ---------- */
.cta-actions{display:flex;align-items:center;gap:26px;margin-top:40px;flex-wrap:wrap;}
.cta-second{display:inline-flex;align-items:center;gap:12px;border:1.6px solid rgba(7,177,222,.5);
  border-radius:999px;padding:22px 40px;font-size:22px;font-weight:700;color:#EEF1F6;background:rgba(7,177,222,.06);}
.cta-glow{position:relative;display:inline-flex;}
.cta-glow::before{content:"";position:absolute;left:50%;top:50%;width:560px;height:320px;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(27,111,245,.30) 0%, rgba(15,163,224,.12) 46%, transparent 72%);
  filter:blur(2px);z-index:-1;pointer-events:none;}
.cta-contact{margin-top:32px;font-size:18px;color:rgba(196,200,208,.62);letter-spacing:.01em;}
.cta-contact b{color:var(--azure-500);font-weight:700;}
.cta-note{margin-top:14px;font-size:17px;color:var(--azure-500);font-weight:500;}

/* --- meta-linha de rodape (assinatura discreta) --- */
.metaline{position:absolute;left:300px;right:320px;bottom:64px;font-size:13px;line-height:18px;
  letter-spacing:.02em;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:clip;}
.dark .metaline{color:rgba(196,200,208,.42);}
.light .metaline{color:rgba(77,77,77,.55);}

/* generic chips row */
.chips{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;}
.chip{display:flex;align-items:center;border:1.5px solid var(--paper-line-s);border-radius:999px;
  padding:0 24px;height:52px;font-size:18px;font-weight:500;color:var(--navy-600);
  background:rgba(7,177,222,.05);line-height:24px;white-space:nowrap;}
.dark .chip{border-color:rgba(7,177,222,.28);color:#E4E9F0;background:rgba(7,177,222,.06);}
.chip .em{color:var(--azure-500);font-weight:700;margin-right:7px;}

/* honest mechanism note (discreto) */
.mech-note{margin-top:20px;font-size:17px;line-height:25px;color:var(--slate-500);border-left:3px solid rgba(7,177,222,.4);padding-left:18px;max-width:1360px;}
.dark .mech-note{color:var(--mist-300);}
.mech-note b{color:var(--navy-600);font-weight:700;}
.dark .mech-note b{color:#EEF1F6;}

/* ---------- AA SOBRE FUNDO CLARO (WCAG 1.4.3 texto / 1.4.11 grafico) ----------
   O --azure-500 (#07B1DE) rende 2,3-2,4:1 sobre o paper (paper-50/paper-100): reprova AA
   como TEXTO (4,5:1) e o piso 3:1 como GRAFICO. Nas laminas CLARAS (L3,L4,L6,L9) os rotulos
   e acentos de texto e os arcos dos medidores passam ao --azure-700 (ciano-escuro on-brand:
   texto 5,2-5,5:1, arco >=4,3:1 sobre o trilho). O --azure-500 segue VIVO nas laminas dark
   (7,5:1) e no grafismo nao-essencial (signal, trace do laco, barras de acento, pulso).
   Overrides ADITIVOS: nucleo e regras-base intactos (vencem por especificidade e ordem).
   Fecha a CLASSE "azure como acento de TEXTO sobre fundo claro", nao a instancia. */
.light .kicker,
.light .az,
.light .num,
.light .chip .em,
.light .gauge .g-val .u,
.light .bhead .bhd.out,
.light .model-card.accent .mtag{color:var(--azure-700);}
.light .num{border-color:var(--azure-700);}
.light .gauge .g-arc{stroke:var(--azure-700);}

/* ===================== MOTION DA PECA (sob html.motion-on) =====================
   Reveals base e o momento vem de deck-motion.css. Aqui: gestos custom desta peca,
   TODOS com os dois guards (print + prefers-reduced-motion) para o PDF/estatico sair
   integro (licao 1 do craft). O estado escondido so existe sob html.motion-on. */

/* o signal se DESENHA (nao rise) */
.signal{transform-origin:left center;}
html.motion-on .slide.active .signal[data-reveal]{animation-name:sig-draw;}
@keyframes sig-draw{from{transform:scaleX(0);opacity:1;}to{transform:scaleX(1);opacity:1;}}

/* Ken Burns discreto na banda de foto (capa e provas) */
.kb-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;}
.kb-wrap .photo-band{position:absolute;}
html.motion-on .slide.active .kb-settle{animation:kb-settle 1.8s cubic-bezier(.22,1,.36,1) both;transform-origin:100% 50%;}
@keyframes kb-settle{from{transform:scale(1.06);}to{transform:scale(1);}}

/* estados escondidos dos elementos animados por JS (gauges, wave, pulses):
   so escondidos sob motion-on; JS os revela/anima. Sem JS/print/reduced: visiveis. */
html.motion-on .slide .scope .wave{stroke-dasharray:var(--w-len,2000);stroke-dashoffset:var(--w-len,2000);}
html.motion-on .slide .scope .alert,html.motion-on .slide .scope .alert-ring{opacity:0;}
html.motion-on .slide .diagram-pulse{opacity:0;}
html.motion-on .slide .leak{opacity:0;}

/* guards duros: sob print e reduced-motion tudo visivel, sem transform, sem dash */
@media print{
  .signal[data-reveal]{animation:none !important;transform:none !important;}
  .kb-settle{animation:none !important;transform:none !important;}
  .scope .wave{stroke-dasharray:none !important;stroke-dashoffset:0 !important;}
  .scope .alert,.scope .alert-ring{opacity:1 !important;}
  .diagram-pulse,.leak{opacity:0 !important;}
}
@media (prefers-reduced-motion: reduce){
  html.motion-on .slide.active [data-reveal],
  html.motion-on .slide.active [data-moment]{opacity:1 !important;animation:none !important;transform:none !important;clip-path:none !important;}
  html.motion-on .slide .signal[data-reveal]{animation:none !important;transform:none !important;}
  html.motion-on .slide .kb-settle{animation:none !important;transform:none !important;}
  html.motion-on .slide .scope .wave{stroke-dasharray:none !important;stroke-dashoffset:0 !important;}
  html.motion-on .slide .scope .alert,html.motion-on .slide .scope .alert-ring{opacity:1 !important;}
  html.motion-on .slide .diagram-pulse,html.motion-on .slide .leak{opacity:0 !important;}
}