/* A conversa é o ponto de chegada: atmosfera leve, um único próximo passo. */
.h-closing{position:relative;isolation:isolate;min-height:min(880px,100svh);padding-block:112px;background:var(--ink);border:0;color:var(--paper);--tx:var(--paper);--tx-2:var(--cream);--signal-text:var(--signal);text-align:center;display:flex;align-items:center}
.h-closing-atmosphere{position:absolute;inset:0;overflow:clip;perspective:1000px;pointer-events:none}
/* Máscara estática: o esmaecimento das bordas é uma camada fixa na cor do fundo,
   acima das órbitas, em vez de mask-image sobre a composição 3D que se move. */
.h-closing-atmosphere::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--ink),transparent) top/100% 22% no-repeat,linear-gradient(transparent,var(--ink)) bottom/100% 22% no-repeat}
.h-closing-glow{position:absolute;width:min(1080px,130vw);height:650px;top:54%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,color-mix(in srgb,var(--signal) 11%,transparent),transparent 68%);opacity:.6}
.h-closing-orbits{position:absolute;left:50%;top:115%;width:min(1120px,145vw);aspect-ratio:1;transform:translate(-50%,-50%) rotateX(68deg);transform-style:preserve-3d;opacity:.6}
.h-closing-orbits span{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--paper) 15%,transparent);border-radius:50%}
.h-closing-orbits span:nth-child(2){inset:14%;border-color:color-mix(in srgb,var(--signal) 22%,transparent)}
.h-closing-orbits span:nth-child(3){inset:28%}
.h-closing-content{position:relative;z-index:1}
.h-closing .h-kicker{font-size:11px;line-height:1.7;justify-content:center;margin-bottom:30px}
.h-closing .h-closing-title{font-size:clamp(44px,5.3vw,76px);line-height:1.07;letter-spacing:-.045em;max-width:1020px;margin:0 auto;font-weight:500;text-wrap:balance}
.h-closing .h-closing-title em{color:var(--signal);display:inline-block}
.h-closing .h-closing-content>.h-closing-lead{font-size:17px;line-height:1.8;max-width:58ch;margin:28px auto 0;color:var(--cream)}
.h-closing .h-closing-content>.h-button{margin-top:34px;min-height:58px;padding:18px 24px;gap:32px;font-size:15px;line-height:1.4;background:var(--signal);border:1px solid var(--signal);color:var(--ink);border-radius:4px;box-shadow:0 8px 32px color-mix(in srgb,var(--signal) 12%,transparent)}
.h-closing .h-button:focus-visible{outline:2px solid var(--paper);outline-offset:6px}
.h-closing .h-closing-content>.h-button:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.h-closing .h-button .h-icon{transition:transform .28s cubic-bezier(.22,1,.36,1)}
.h-closing .h-button:hover .h-icon{transform:none}
@media(hover:hover) and (pointer:fine){.h-closing .h-closing-content>.h-button:hover{border-color:var(--paper)}.h-closing .h-button:hover .h-icon{transform:translateX(4px)}}
.h-closing .h-closing-content>.h-closing-note{font-size:13px;line-height:1.8;max-width:57ch;margin:22px auto 0;color:var(--cream)}
@media(max-width:767px){.h-closing{min-height:0;padding-block:80px}.h-closing .h-kicker{font-size:10px;letter-spacing:.9px;max-width:28ch;margin:0 auto 24px}.h-closing .h-closing-title{font-size:clamp(36px,10vw,52px);line-height:1.1;letter-spacing:-.035em}.h-closing .h-closing-content>.h-closing-lead{font-size:15px;line-height:1.75;margin-top:24px}.h-closing .h-closing-title br{display:none}.h-closing .h-closing-content>.h-button{margin-top:28px}.h-closing .h-closing-content>.h-closing-note{font-size:13px;line-height:1.8;margin-top:20px;max-width:39ch}.h-closing-orbits{width:150vw}.h-closing-glow{width:140vw;height:480px}}
@media(min-width:768px) and (max-height:650px){.h-closing{min-height:0;padding-block:72px}}
@media(prefers-reduced-motion:reduce){.h-closing-orbits{transform:translate(-50%,-50%) rotateX(68deg)!important;opacity:.6!important;will-change:auto!important}.h-closing-glow{opacity:.6!important;will-change:auto!important}}
/* O fechamento recebe o filete que atravessou a página e o leva às órbitas. */
.h-closing::before{content:"";position:absolute;z-index:1;inset:0 0 auto;height:clamp(72px,14vh,160px);pointer-events:none;transform-origin:50% 0;background:linear-gradient(90deg,transparent 16%,color-mix(in srgb,var(--signal) 30%,transparent),transparent 84%) top/100% 1px no-repeat,linear-gradient(color-mix(in srgb,var(--signal) 50%,transparent),transparent) 50% 0/1px 100% no-repeat}
/* Melhoria progressiva: a linha do tempo da seção (entrada até saída completa)
   é o mesmo progresso calculado pelo JS. Com data-closing-driver="css" o JS
   não escreve transform/opacidade das órbitas e do brilho. */
@supports (animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .h-closing{view-timeline:--h-closing block}
  .h-closing[data-closing-mode="animated"][data-closing-driver="css"] .h-closing-orbits{animation:h-closing-orbits linear both;animation-timeline:--h-closing;animation-range:cover 0% cover 100%}
  .h-closing[data-closing-mode="animated"][data-closing-driver="css"] .h-closing-glow{animation:h-closing-glow linear both;animation-timeline:--h-closing;animation-range:cover 0% cover 100%}
  .h-closing[data-closing-mode="animated"]::before{animation:h-closing-filament linear both;animation-timeline:--h-closing;animation-range:entry 0% entry 50%}
 }
}
@keyframes h-closing-orbits{
 0%{opacity:.2;transform:translate(-50%,calc(-50% + 30px)) rotateX(68deg) scale(.86)}
 12.5%{opacity:.3913}25%{opacity:.5536}37.5%{opacity:.6619}50%{opacity:.7}62.5%{opacity:.6619}75%{opacity:.5536}87.5%{opacity:.3913}
 100%{opacity:.2;transform:translate(-50%,-50%) rotateX(68deg) scale(1.06)}}
@keyframes h-closing-glow{0%{opacity:.3}12.5%{opacity:.5679}25%{opacity:.795}37.5%{opacity:.9467}50%{opacity:1}62.5%{opacity:.9467}75%{opacity:.795}87.5%{opacity:.5679}100%{opacity:.3}}
@keyframes h-closing-filament{from{opacity:0;transform:scale(.18,0)}to{opacity:1;transform:none}}
