/* Da função ao processo: a mesma linguagem de luz, com espaço para a leitura. */
.h-operation{background:var(--ink);color:var(--paper);--tx:var(--paper);--tx-2:var(--cream);--tx-3:var(--cream);--line:color-mix(in srgb,var(--paper) 12%,transparent);--signal-text:var(--signal);--bg:var(--ink);--bg-alt:var(--soot);--bg-card:var(--soot)}
.h-operation em{color:var(--signal)}
.h-operation :focus-visible{outline-color:var(--signal)}
.h-operation{position:relative;isolation:isolate;background:var(--ink);padding:0;--operation-height:100vh;--operation-distance:0px}
@supports(height:100svh){.h-operation{--operation-height:100svh}}
.h-operation-stage{position:relative;overflow:clip;background:radial-gradient(ellipse 520px 400px at calc(50% + min(24vw,300px)) 52%,color-mix(in srgb,var(--signal) 6%,transparent),transparent 85%),var(--ink)}
.h-operation-stage::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent 10%,color-mix(in srgb,var(--signal) 40%,transparent),transparent 90%);box-shadow:0 0 45px color-mix(in srgb,var(--signal) 14%,transparent);pointer-events:none}
.h-operation-inner{padding-block:calc(var(--home-header,89px) + 36px) 32px}
.h-operation-heading{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;column-gap:72px;margin-bottom:clamp(32px,5vh,64px)}
.h-operation-heading .h-kicker{grid-column:1/-1;margin-bottom:20px;color:var(--cream)}
.h-operation-heading h2{font-size:clamp(34px,3.8vw,54px);font-weight:500;line-height:1.08;letter-spacing:-.045em}
.h-operation-heading>p:last-child{font-size:15px;line-height:1.7;color:color-mix(in srgb,var(--paper) 68%,var(--ink));max-width:36ch}
.h-operation .h-flow{display:block;gap:0;align-items:stretch}
.h-operation-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center;perspective:1200px}
.h-operation .h-flow-scenes{position:relative;top:auto;min-width:0;display:grid;align-items:center}
.h-operation .h-flow-scene{border:0;border-radius:0;padding:0;background:none;margin:0 0 48px;min-width:0}
.h-operation [data-flow-scene]{scroll-margin-top:calc(var(--home-header,89px) + 24px)}
.h-operation-overline{display:flex;gap:20px;font-family:var(--code);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--cream);margin-bottom:20px}
.h-operation-overline>span{color:var(--signal)}
.h-operation .h-flow-scene h3{font-size:clamp(29px,2.8vw,40px);line-height:1.13;letter-spacing:-.04em;font-weight:500;max-width:18ch;text-wrap:balance}
.h-operation-description{font-size:16px;line-height:1.75;max-width:43ch;margin-top:22px;color:color-mix(in srgb,var(--paper) 76%,var(--ink))}
.h-operation-rule{margin-top:28px;border-left:2px solid var(--signal);padding-left:18px}
.h-operation-rule>span{font-size:12px;font-weight:600;color:var(--paper)}
.h-operation-rule>p{font-size:13px;line-height:1.65;margin-top:6px;color:color-mix(in srgb,var(--paper) 65%,var(--ink))}
.h-operation-visual{min-width:0;margin:0;align-self:center}
.h-operation-map{position:relative;isolation:isolate}
.h-operation-map>svg{display:block;width:100%;height:auto;overflow:visible}
.h-operation-map-grid{stroke:var(--paper);stroke-width:.5;opacity:.07;mask-image:radial-gradient(ellipse,var(--ink) 25%,transparent 72%)}
.h-operation-rail{stroke:var(--paper);stroke-width:1;opacity:.18}
.h-operation-current,.h-operation-current-halo{stroke:var(--signal);stroke-width:2.5;transform-origin:115px 240px}
.h-operation-current-halo{stroke-width:9;opacity:.16}
.h-operation-source,.h-operation-person{stroke:var(--cream);stroke-width:1.6}
.h-operation-source>rect{fill:var(--soot)}
.h-operation-source>circle,.h-operation-agent>circle,.h-operation-person>circle:last-child{fill:var(--ink);stroke:var(--signal);stroke-width:2}
.h-operation-agent{--tx-3:var(--cream);--bg-card:var(--soot);--bg-alt:var(--ink)}
.h-operation-packet>circle:first-child{fill:var(--signal);opacity:.08}
.h-operation-packet>circle:last-child{fill:var(--signal)}
.h-operation-packet>.h-operation-packet-halo{fill:var(--signal);opacity:.22}
.h-operation-packet-layer{position:absolute;inset:0 auto auto 0;width:100%;pointer-events:none}
.h-operation-packet-layer>svg{display:block;width:100%;height:auto;overflow:visible}
.h-operation-record{stroke:color-mix(in srgb,var(--paper) 32%,var(--ink));stroke-width:1.5}
.h-operation-record>rect{fill:var(--ink)}
.h-operation-check,.h-operation-alert{stroke:var(--signal);stroke-width:2}
.h-operation-alert{opacity:0}
.h-operation-review{stroke:var(--signal);stroke-width:1.5;opacity:.65}
.h-operation-map-labels{position:absolute;inset:63% 0 auto;display:grid;grid-template-columns:repeat(3,1fr);text-align:center;font-family:var(--code);font-size:12px;line-height:1.3;color:var(--cream)}
.h-operation-visual figcaption{display:flex;justify-content:center;align-items:center;gap:8px;font-size:10px;color:color-mix(in srgb,var(--paper) 60%,var(--ink));margin-top:24px}
.h-operation .h-flow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:40px}
.h-operation .h-flow-step{position:relative;display:flex;gap:12px;align-items:center;border:0;padding:18px 0;min-height:56px;background:none;transition:background .2s}
.h-operation .h-flow-step strong{font-size:12px;font-weight:500;margin:0;color:var(--cream)}
.h-operation .h-step-count{font-family:var(--code);padding:0;font-size:10px;color:color-mix(in srgb,var(--paper) 55%,var(--ink))}
.h-operation-step-line{position:absolute;inset:0 0 auto;height:1px;background:color-mix(in srgb,var(--paper) 15%,transparent)}
.h-operation-step-line::after{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(var(--step-fill,0));transform-origin:left}
.h-operation .h-flow-step[aria-current="step"] strong,.h-operation .h-flow-step[aria-current="step"] .h-step-count{color:var(--signal)}
.h-operation .h-flow-step[aria-current="step"] strong{font-weight:600}
.h-operation .h-flow-step[aria-current="step"] .h-operation-step-line{transform:scaleY(2)}
.h-operation .h-flow-step:focus-visible{outline:2px solid var(--signal);outline-offset:5px;border-radius:2px;background:var(--soot)}
@media(hover:hover){.h-operation .h-flow-step:hover strong{color:var(--paper)}}
.h-operation .h-section-footnote{font-size:11px;color:color-mix(in srgb,var(--paper) 58%,var(--ink));margin-top:4px}
.h-operation[data-operation-mode="pinned"]{height:calc(var(--operation-height) + var(--operation-distance))}
/* O palco cobre a viewport grande (barra recolhida) e o conteúdo usa a pequena:
   recolher a barra do celular não remede nem corta a cena. */
.h-operation[data-operation-mode="pinned"] .h-operation-stage{position:sticky;top:0;height:var(--operation-height)}
@supports(height:100lvh){.h-operation[data-operation-mode="pinned"]{height:calc(max(var(--operation-height),100lvh) + var(--operation-distance))}.h-operation[data-operation-mode="pinned"] .h-operation-stage{height:max(var(--operation-height),100lvh)}}
.h-operation[data-operation-mode="pinned"] .h-operation-inner{min-height:var(--operation-height);display:flex;flex-direction:column}
.h-operation[data-operation-mode="pinned"] .h-flow{flex:1;display:flex;flex-direction:column;justify-content:center}
.h-operation[data-operation-mode="pinned"] .h-operation-body{flex:1}
.h-operation[data-operation-mode="pinned"] .h-flow-scene{grid-area:1/1;margin:0}
@media(max-width:767px){
 .h-operation-stage{background:radial-gradient(ellipse 260px 240px at 50% 42%,color-mix(in srgb,var(--signal) 6%,transparent),transparent 85%),var(--ink)}
 .h-operation-inner{padding-block:calc(var(--home-header,73px) + 22px) calc(22px + env(safe-area-inset-bottom,0px))}
 .h-operation-heading{display:block;margin-bottom:26px}.h-operation-heading h2{font-size:32px;line-height:1.1}.h-operation-heading .h-kicker{font-size:9px;margin-bottom:14px}.h-operation-heading>p:last-child{font-size:13px;margin-top:14px}.h-operation-heading>p:last-child br{display:none}
 .h-operation-body{grid-template-columns:1fr;gap:16px}.h-operation-visual{grid-row:1;max-width:380px;justify-self:center;width:100%}.h-operation-map{max-width:270px;margin:auto}.h-operation-map-labels{font-size:10px}.h-operation-visual figcaption{font-size:10px;margin-top:8px}
 .h-operation-overline{font-size:10px;margin-bottom:12px}.h-operation .h-flow-scene h3{font-size:28px;max-width:24ch}.h-operation-description{font-size:14px;line-height:1.65;margin-top:14px}.h-operation-rule{margin-top:18px;padding-left:12px}.h-operation-rule>p{font-size:12px}.h-operation-rule>span{font-size:11px}
 .h-operation .h-flow-steps{gap:10px;margin-top:26px}.h-operation .h-flow-step{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:12px 0;min-height:60px}.h-operation .h-flow-step strong{font-size:11px}.h-operation .h-section-footnote{font-size:10px;line-height:1.6}
}
@media(min-width:768px) and (max-height:760px){.h-operation-inner{padding-top:calc(var(--home-header,89px) + 20px);padding-bottom:20px}.h-operation-heading{margin-bottom:22px}.h-operation-heading h2{font-size:36px}.h-operation-heading .h-kicker{margin-bottom:12px}.h-operation .h-flow-scene h3{font-size:32px}.h-operation-description{font-size:14px;margin-top:16px}.h-operation-rule{margin-top:18px}.h-operation .h-flow-steps{margin-top:22px}}
@media(min-width:768px) and (max-height:760px){.h-operation-visual{width:100%;max-width:500px;justify-self:center}}
/* Saída do pin: um filete desce do centro do palco e encontra o que abre o
   topo do processo; o diagrama recua em profundidade enquanto o palco sobe.
   Só decoração, no compositor, e apenas no modo pinado com movimento. */
.h-operation-stage::after{content:"";position:absolute;inset:auto 0 0;height:clamp(64px,11vh,128px);pointer-events:none;transform-origin:50% 100%;transform:scaleY(0);background:linear-gradient(transparent,color-mix(in srgb,var(--signal) 55%,transparent)) 50% 100%/1px 100% no-repeat}
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .h-operation{view-timeline:--h-operation block}
  .h-operation[data-operation-mode="pinned"] .h-operation-stage::before{animation:h-operation-hairline linear both;animation-timeline:--h-operation;animation-range:entry 10% entry 60%}
  .h-operation[data-operation-mode="pinned"] .h-operation-stage::after{animation:h-operation-filament linear both;animation-timeline:--h-operation;animation-range:exit 0% exit 35%}
  .h-operation[data-operation-mode="pinned"] .h-operation-visual{animation:h-operation-recede linear both;animation-timeline:--h-operation;animation-range:exit 0% exit 70%}
 }
}
@keyframes h-operation-hairline{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes h-operation-filament{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes h-operation-recede{from{opacity:1;transform:none}to{opacity:.35;transform:translate3d(0,-4vh,0) scale(.94)}}