/* =====================================================================
   diagrams.css — REV 2 (light) — diagramas de processo + layout .tech
   Tecnologias 8–10: produto/gôndola (esq) → lógica/diagrama (dir) → equipamento (rodapé)
   Fonte técnica: KB _fontes/conhecimento/. Convenções: diagram-design.
   ===================================================================== */

/* ---------- LAYOUT .tech (slide de tecnologia) ---------- */
.tech{display:grid;grid-template-columns:600px 1024px;gap:56px;flex:1;min-height:0;margin-top:24px}
.tech__product{display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0}
.tech__product .slot{flex:1;min-height:0}
.tech__product .value{font-family:var(--f-sans);font-weight:600;font-size:23px;line-height:1.4;color:var(--ink-soft)}
.tech__product .value b{color:var(--ink);font-weight:700}
.tech__logic{display:flex;flex-direction:column;justify-content:center;gap:22px;min-width:0;min-height:0}

.proc__svg{width:100%;height:300px;min-width:0}
.proc__svg svg{width:100%;height:100%;display:block;overflow:visible}
.proc__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proc__steps.is4{grid-template-columns:repeat(4,1fr)}
.pstep{display:flex;flex-direction:column;gap:4px}
.pstep .n{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--gold-deep)}
.pstep .t{font-family:var(--f-sans);font-weight:600;font-size:18px;color:var(--ink)}
.pstep .d{font-family:var(--f-sans);font-size:14px;line-height:1.4;color:var(--ink-faint)}

.tech__equip{margin-top:16px;padding-top:18px;border-top:1px solid var(--border);display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.tech__equip .lbl{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.tech__equip .v{font-family:var(--f-sans);font-size:20px;color:var(--ink-soft)}
.tech__equip .v b{color:var(--blue);font-weight:600}

/* legenda de gases (ATM) */
.legend{display:flex;flex-wrap:wrap;gap:10px 22px}
.legend span{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:13px;color:var(--ink-soft)}
.legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.lg-o2{background:var(--gold)}.lg-co2{background:#2E8B9E}.lg-n2{background:#A9B4C2}

/* ---------- ELEMENTOS SVG (light) ---------- */
.dg-pack{fill:none;stroke:var(--ink-soft);stroke-width:1.6}
.dg-tray{fill:rgba(0,85,165,.05);stroke:var(--ink-soft);stroke-width:1.6}
.dg-tray-base{stroke:var(--blue);stroke-width:3}
.dg-film{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:5 3}
.dg-film-solid{fill:none;stroke:var(--blue);stroke-width:2.4}
.dg-meat-purple{fill:#7A5C8A}
.dg-meat-red{fill:#B23A2E}
.dg-label{font-family:var(--f-mono);font-size:13px;letter-spacing:.05em;fill:var(--ink-soft)}
.dg-label-sm{font-family:var(--f-mono);font-size:12px;letter-spacing:.03em;fill:var(--ink-faint)}
.dg-arrow{stroke:var(--blue);stroke-width:2;fill:none}
.mol-o2 circle{fill:var(--gold)}
.mol-co2 circle{fill:#2E8B9E}
.mol-n2 circle{fill:#A9B4C2}

/* ---------- ANIMAÇÃO (dg-active setado pelo deck.js no slide enter) ---------- */
@media (prefers-reduced-motion: no-preference){
  .proc__svg .a-draw{stroke-dasharray:1;stroke-dashoffset:1}
  .proc__svg .a-fade{opacity:0;transition:opacity .55s ease}
  .dg-active .a-draw{animation:dgDraw .9s ease forwards}
  .dg-active .a-fade{opacity:1}
  .dg-active .d1{animation-delay:.12s;transition-delay:.12s}
  .dg-active .d2{animation-delay:.40s;transition-delay:.40s}
  .dg-active .d3{animation-delay:.70s;transition-delay:.70s}
  .dg-active .d4{animation-delay:1.0s;transition-delay:1.0s}
  .dg-active .d5{animation-delay:1.3s;transition-delay:1.3s}
  @keyframes dgDraw{to{stroke-dashoffset:0}}
  .dg-active .mol-out{animation:molOut 1.1s ease-in forwards;animation-delay:.6s}
  @keyframes molOut{60%{opacity:1}100%{opacity:0;transform:translateY(-44px)}}
}
@media (prefers-reduced-motion: reduce){
  .proc__svg .a-draw{stroke-dashoffset:0!important}
  .proc__svg .a-fade{opacity:1!important}
}
@media print{
  .proc__svg .a-draw{stroke-dashoffset:0!important;animation:none!important}
  .proc__svg .a-fade{opacity:1!important;animation:none!important}
  .proc__svg .mol-out{opacity:1!important;animation:none!important;transform:none!important}
}