.pn-envio{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:#FFF6F8;border:1px solid #F3C4D1}
.pn-envio--ok{background:#F2FBFA;border-color:#B5E3DF;animation:pnOk .6s .7s cubic-bezier(.3,1.6,.5,1) both}
.pn-envio__txt{margin:0 0 10px;font-size:15px;font-weight:600;line-height:1.35;text-align:center;color:#1E2A3A}
.pn-envio__txt strong{display:inline-block;color:#B3244D;animation:pnPop .45s .75s ease-out both}
.pn-envio--ok .pn-envio__txt strong{color:#0B6B66;animation:none}

.pn-envio__barra{position:relative;height:10px;background:#F6D3DD;border-radius:99px}
.pn-envio--ok .pn-envio__barra{background:#CDEAE7}
.pn-envio__fill{position:relative;display:block;height:100%;width:var(--pn-pct);border-radius:99px;background:#D8315F;overflow:hidden;animation:pnFill .8s cubic-bezier(.2,.8,.2,1) both}
.pn-envio--ok .pn-envio__fill{background:#12918B}
.pn-envio__fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);transform:translateX(-100%);animation:pnShine 1.1s 1s ease-in-out 3}

.pn-envio__chispas{position:absolute;top:50%;left:var(--pn-pct);width:0;height:0;animation:pnTip .8s cubic-bezier(.2,.8,.2,1) both}
.pn-envio__chispas b{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;background:#FFC21A;opacity:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:pnTwinkle .9s .8s ease-out 4}
.pn-envio__chispas b:nth-child(2){width:8px;height:8px;margin:-15px 0 0 3px;animation-delay:1.1s}
.pn-envio__chispas b:nth-child(3){width:7px;height:7px;margin:5px 0 0 -1px;animation-delay:1.4s}

@keyframes pnFill{from{width:0}to{width:var(--pn-pct)}}
@keyframes pnTip{from{left:0}to{left:var(--pn-pct)}}
@keyframes pnShine{to{transform:translateX(100%)}}
@keyframes pnTwinkle{0%{opacity:0;transform:scale(0) rotate(0)}40%{opacity:1;transform:scale(1.1) rotate(45deg)}100%{opacity:0;transform:scale(.4) rotate(90deg)}}
@keyframes pnPop{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes pnOk{0%,100%{transform:scale(1)}40%{transform:scale(1.03)}}

@media (prefers-reduced-motion:reduce){
  .pn-envio,.pn-envio__txt strong,.pn-envio__fill,.pn-envio__fill::after,.pn-envio__chispas{animation:none}
  .pn-envio__chispas{display:none}
}