/* Do detalhe à estrada — sequência de quadros controlada pela rolagem */
.d2e{position:relative;height:520vh;background:#101315;margin-top:55px}
.d2e-sticky{position:sticky;top:78px;height:calc(100svh - 78px);overflow:hidden;color:#fff;--p:0}
.d2e-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.d2e-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0c0f11cc 0%,#0c0f1166 32%,transparent 60%),linear-gradient(0deg,#0c0f11b0 0%,transparent 28%)}
.d2e-copy{position:relative;z-index:2;padding-top:clamp(40px,8vh,90px);transition:opacity .45s ease,transform .45s ease}
.d2e-copy.is-changing{opacity:0;transform:translateY(10px)}
.d2e-copy .eyebrow{color:#c3cad1}
.d2e-copy h2{max-width:560px;line-height:1.12;font-size:clamp(36px,4.2vw,62px);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
.d2e-copy p{max-width:380px;margin-top:24px;font-size:17px;line-height:1.7;color:#cdd0d4}
.d2e-progress{position:absolute;left:0;right:0;bottom:44px;height:2px;background:#ffffff22;z-index:3}
.d2e-progress span{display:block;height:100%;background:#d7dce1;transform:scaleX(var(--p));transform-origin:left}
.d2e-hot{position:absolute;z-index:4;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;border-radius:50%;background:transparent;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s}
.d2e.show-hot .d2e-hot{opacity:1;pointer-events:auto}
.d2e-hot:before{content:'';position:absolute;inset:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px #ffffff40}
.d2e-hot:after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid #ffffffb0;animation:d2e-pulse 2.2s ease-out infinite}
.d2e-hot span{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);white-space:nowrap;font-size:12px;letter-spacing:.04em;background:#0c0f11d9;color:#fff;padding:5px 10px;border-radius:4px;opacity:0;transition:opacity .2s}
.d2e-hot:hover span,.d2e-hot:focus-visible span{opacity:1}
.d2e-hot:focus-visible{outline:2px solid #d7dce1;outline-offset:3px}
@keyframes d2e-pulse{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.25);opacity:0}}
.d2e-back{position:absolute;z-index:4;right:max(28px,calc((100% - 1180px)/2));bottom:72px;display:inline-flex;align-items:center;gap:12px;padding:13px 20px;border:1px solid #ffffff70;border-radius:5px;background:#0c0f1166;color:#fff;font:inherit;font-size:13px;letter-spacing:.02em;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,background .2s;backdrop-filter:blur(6px)}
.d2e.show-hot .d2e-back{opacity:1;pointer-events:auto}
.d2e-back:hover{background:#ffffff1f}
.d2e-back:focus-visible{outline:2px solid #d7dce1;outline-offset:3px}
.d2e-hint{position:absolute;z-index:3;left:0;right:0;bottom:16px;text-align:center;font-size:11px;letter-spacing:.06em;color:#b1b4b8;opacity:0;transition:opacity .4s}
.d2e.show-hot .d2e-hint{opacity:1}
.d2e-panel{position:absolute;z-index:6;inset:auto max(28px,calc((100% - 1180px)/2)) 72px auto;width:min(420px,calc(100% - 40px));background:#f6f7f8;color:#202d35;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px #00000066;transform:translateY(12px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.d2e-panel.is-open{opacity:1;transform:none;pointer-events:auto}
.d2e-panel img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.d2e-panel div{padding:22px 24px 24px}
.d2e-panel .eyebrow{color:#5b6773}
.d2e-panel h3{font-size:24px;font-weight:450;margin:8px 0 8px;line-height:1.2}
.d2e-panel p{font-size:15px;line-height:1.65;color:#5e666f;margin:0}
.d2e-panel small{display:block;margin-top:12px;font-size:11px;color:#8a929a}
.d2e-panel button{margin-top:18px;padding:11px 16px;border-radius:5px;border:1px solid #202d35;background:#202d35;color:#fff;font:inherit;font-size:13px;cursor:pointer}
.d2e-panel button:focus-visible{outline:2px solid #5b6773;outline-offset:3px}
@media (max-width:820px){
  .d2e{height:460vh}
  .d2e-sticky{top:66px;height:calc(100svh - 66px)}
  .d2e-shade{background:linear-gradient(180deg,#0c0f11d0 0%,#0c0f1155 38%,transparent 62%),linear-gradient(0deg,#0c0f11b8 0%,transparent 30%)}
  .d2e-copy{padding-top:34px}
  .d2e-copy h2{font-size:32px;max-width:330px}
  .d2e-copy p{font-size:14.5px;max-width:300px;margin-top:16px}
  .d2e-back{left:20px;right:20px;justify-content:center;bottom:64px}
  .d2e-panel{left:12px;right:12px;bottom:12px;width:auto}
  .d2e-panel img{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){.d2e-copy,.d2e-panel,.d2e-hot,.d2e-back{transition:none}.d2e-hot:after{animation:none}}
