/* Um roteiro de implantação, em fluxo natural e com o tempo de leitura do visitante. */
/* O navegador deve restaurar o pixel salvo, sem usar nós desta cena como âncora
   intermediária. A rolagem e as demais seções mantêm o comportamento nativo. */
.h-scroll-ready .h-process{overflow-anchor:none}
.h-process{position:relative;isolation:isolate;color:var(--paper);--tx:var(--paper);--tx-2:var(--cream);--signal-text:var(--signal);background:linear-gradient(var(--ink),var(--soot) 42%,var(--soot));padding-block:clamp(100px,12vh,160px)}
.h-process::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 540px 700px at 78% 45%,color-mix(in srgb,var(--signal) 4%,transparent),transparent 80%);z-index:-1}
.h-process-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(60px,7vw,112px);align-items:start}
.h-process-intro{position:static;top:calc(var(--home-header,89px) + 64px);padding-bottom:32px}
@media(min-width:768px){.h-process[data-process-sticky="true"] .h-process-intro{position:sticky}}
.h-process h2{font-size:clamp(36px,3.4vw,50px);line-height:1.12;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.h-process h2 em{color:var(--signal)}
.h-process-lead{font-size:16px;line-height:1.8;color:var(--cream);max-width:38ch;margin-top:24px}
.h-process-time{margin-top:52px;border-top:1px solid color-mix(in srgb,var(--paper) 14%,transparent);padding-top:24px;max-width:340px}
.h-process-time>span{font-family:var(--code);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--cream)}
.h-process-time strong{display:block;font-weight:400;font-size:72px;line-height:1.15;letter-spacing:-.045em;margin-top:12px}
.h-process-time strong>span{font-size:30px;letter-spacing:-.03em}
.h-process-time small{display:block;font-size:13px;color:var(--cream);line-height:1.7;margin-top:10px;max-width:30ch}
.h-process-plan{position:relative;isolation:isolate;min-width:0}
.h-process-plan::before{content:"";position:absolute;inset:-24px 0;z-index:-1;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--paper) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--paper) 4%,transparent) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 48%,var(--ink) 20%,transparent 73%)}
.h-process-route{position:relative;list-style:none;margin:0;padding:0}
.h-process-route li{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 64px;gap:24px;align-items:start;min-height:260px;padding-block:24px 44px;perspective:800px;perspective-origin:right 48px}
.h-process-route li:not(:last-child)::before,.h-process-route li:not(:last-child)::after{content:"";position:absolute;top:43px;bottom:-43px;left:19px;width:1px;background:color-mix(in srgb,var(--paper) 15%,transparent);pointer-events:none}
.h-process-route li:not(:last-child)::after{background:var(--signal);transform:scaleY(var(--process-segment,1));transform-origin:top;box-shadow:0 0 9px color-mix(in srgb,var(--signal) 32%,transparent)}
.h-process-marker{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;font-family:var(--code);font-size:11px;border:1px solid color-mix(in srgb,var(--paper) 24%,transparent);border-radius:50%;background:var(--soot);color:var(--cream)}
.h-process-marker::after{content:"";position:absolute;inset:-1px;border:2px solid var(--signal);border-radius:inherit;opacity:var(--process-arrival,1);transform:scale(calc(.88 + var(--process-arrival,1)*.12));box-shadow:0 0 14px color-mix(in srgb,var(--signal) 12%,transparent);pointer-events:none}
.h-process-step-body{min-width:0}
.h-process-phase{font-family:var(--code);font-size:11px;line-height:1.6;letter-spacing:1px;text-transform:uppercase;color:var(--cream);margin-bottom:12px}
.h-process-step-body h3{font-size:26px;font-weight:500;line-height:1.25;letter-spacing:-.025em;text-wrap:balance;margin-bottom:16px}
.h-process-step-body>p:not([class]){font-size:15px;line-height:1.8;color:var(--cream);max-width:44ch}
.h-process-outcome{margin-top:20px;color:var(--paper);font-size:13px;line-height:1.6;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--paper) 12%,transparent)}
.h-process-symbol{width:64px;height:64px;color:color-mix(in srgb,var(--paper) 65%,var(--ink));stroke-width:1.2;margin-top:28px;transform-origin:center}
.h-process-accent{stroke:var(--signal);stroke-width:1.7}
.h-process-symbol :is(path,rect){vector-effect:non-scaling-stroke}
.h-process-rule{display:flex;gap:14px;align-items:flex-start;padding:24px 0 0 62px;border-top:1px solid color-mix(in srgb,var(--paper) 15%,transparent);font-size:13px;line-height:1.8;color:var(--cream)}
.h-process-rule .h-icon{color:var(--signal);width:24px;height:24px;margin-top:2px}.h-process-rule-title{color:var(--paper);font-size:14px;font-weight:500;margin-bottom:6px}
@media(prefers-reduced-motion:reduce){.h-process[data-process-sticky] .h-process-intro{position:static}.h-process .h-process-symbol,.h-process .h-process-accent{opacity:1!important;transform:none!important;will-change:auto!important}.h-process-marker::after{opacity:1;transform:scale(1)}.h-process-route li:not(:last-child)::after{transform:scaleY(1)}}
@media(max-width:1000px){.h-process-layout{gap:48px;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}.h-process-route li{grid-template-columns:38px minmax(0,1fr);gap:18px}.h-process-symbol{position:absolute;right:0;top:26px;margin:0;width:44px;height:44px}.h-process-phase,.h-process-step-body h3{margin-right:60px}.h-process-route li{min-height:280px}}
@media(max-width:767px){.h-process{padding-block:72px}.h-process-layout{display:block}.h-process-intro{position:static;padding-bottom:48px}.h-process h2{font-size:clamp(32px,9.2vw,36px)}.h-process .h-kicker{font-size:10px;margin-bottom:20px}.h-process-lead{font-size:15px;line-height:1.75}.h-process-time{margin-top:32px;padding-top:20px;max-width:none}.h-process-time strong{font-size:56px}.h-process-time strong>span{font-size:26px}.h-process-time small{max-width:none}.h-process-route li{min-height:0;padding-block:24px 40px;gap:16px}.h-process-step-body h3{font-size:24px}.h-process-step-body>p:not([class]){font-size:15px;line-height:1.7}.h-process-rule{padding-left:0}}
/* Continuidade com a operação: o filete de luz que desce do palco anterior
   atravessa a borda e se abre no topo desta seção. Sem suporte ou sem JS, o
   filete fica desenhado e parado. */
.h-process::after{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:clamp(64px,11vh,128px);pointer-events:none;transform-origin:50% 0;background:linear-gradient(90deg,transparent 12%,color-mix(in srgb,var(--signal) 36%,transparent),transparent 88%) top/100% 1px no-repeat,linear-gradient(color-mix(in srgb,var(--signal) 55%,transparent),transparent) 50% 0/1px 100% no-repeat}
/* Melhoria progressiva: com linha do tempo de visualização, símbolos, acentos,
   filete e brilho seguem o scroll no compositor. O JS deixa de escrever essas
   propriedades (data-process-driver="css") e continua com trilha e contornos. */
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .h-process{view-timeline:--h-process block}
  .h-process-route li{view-timeline:--h-process-step block}
  .h-process[data-process-mode="animated"][data-process-driver="css"] .h-process-symbol{animation:h-process-symbol ease-in-out both;animation-timeline:--h-process-step;animation-range:cover 15vh cover 45vh}
  .h-process[data-process-mode="animated"][data-process-driver="css"] .h-process-accent{animation:h-process-accent ease-in-out both;animation-timeline:--h-process-step;animation-range:cover 15vh cover 45vh}
  .h-process[data-process-mode="animated"]::after{animation:h-process-filament linear both;animation-timeline:--h-process;animation-range:entry 0% entry 45%}
  .h-process[data-process-mode="animated"]::before{animation:h-process-depth linear both;animation-timeline:--h-process;animation-range:cover 0% cover 100%}
 }
}
@keyframes h-process-symbol{from{opacity:.4;transform:translate3d(0,14px,0) rotateY(-15deg)}to{opacity:1;transform:translate3d(0,0,0) rotateY(0deg)}}
@keyframes h-process-accent{from{opacity:0}to{opacity:1}}
@keyframes h-process-filament{from{opacity:0;transform:scale(.18,0)}to{opacity:1;transform:none}}
@keyframes h-process-depth{from{transform:translate3d(0,8%,0)}to{transform:translate3d(0,-6%,0)}}
