/* Pagamento parcelado: cartão metálico em CSS 3D, contrato assinado e valor dividido. Estado final é o padrão. */
.finance-offer{padding-block:var(--section-space);background:var(--white);border-bottom:1px solid var(--line);overflow:hidden}
.finance-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:6%;align-items:center}
.finance-copy>p{font-size:17px;line-height:1.65;color:var(--muted);max-width:500px;margin-top:24px}
.finance-points{list-style:none;margin:32px 0 0;padding:0;max-width:560px}
.finance-points li{border-top:1px solid var(--line);padding-block:20px}
.finance-points li:last-child{border-bottom:1px solid var(--line)}
.finance-points h3{font-size:21px;line-height:1.25;letter-spacing:-.03em;margin-bottom:6px}
.finance-points p{font-size:15px;line-height:1.6;color:var(--muted)}
.finance-copy .button{margin-top:30px}

.finance-scene{position:relative;height:clamp(380px,34vw,500px);perspective:1100px;perspective-origin:50% 40%}
.finance-scene:before{content:'';position:absolute;left:16%;right:8%;bottom:4%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(17,17,16,.22),transparent);filter:blur(6px)}
.finance-rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(6deg + var(--rx,0deg))) rotateY(calc(-10deg + var(--ry,0deg)))}

.finance-contract{position:absolute;left:2%;top:3%;width:40%;aspect-ratio:.78;padding:7% 5.5%;background:#fbfaf6;border:1px solid #ddd9d0;box-shadow:0 22px 40px -22px rgba(17,17,16,.45);transform:translate3d(0,0,-90px) rotate(-7deg);display:flex;flex-direction:column;gap:6%}
.contract-kicker{font-size:clamp(7px,.62vw,9px);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);max-width:68%}
.contract-title{display:block;height:7px;width:58%;background:var(--ink)}
.finance-contract i{display:block;flex-shrink:0;height:3px;background:#d9d5cc}
.finance-contract i:nth-of-type(2){width:88%}.finance-contract i:nth-of-type(3){width:70%}.finance-contract i:nth-of-type(5){width:54%}
.contract-sign{position:relative;display:block;flex-shrink:0;width:74%;height:15%;margin-top:2%;border-bottom:1px solid #a9a59c}
.contract-signature{position:absolute;left:0;bottom:3px;width:100%;overflow:visible}
.contract-signature path{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.contract-seal{position:absolute;right:7%;top:6%;width:16%;aspect-ratio:1;border-radius:50%;background:var(--orange);display:grid;place-items:center}
.contract-seal svg{width:58%;height:58%;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.finance-card-float{position:absolute;left:30%;top:40%;width:58%;aspect-ratio:1.586;transform-style:preserve-3d;transform:translateZ(40px)}
.finance-card{--card-rest:rotateY(-8deg) rotateX(6deg) rotateZ(-7deg);position:absolute;inset:0;transform-style:preserve-3d;transform:var(--card-rest)}
.card-face,.card-edge{position:absolute;inset:0;border-radius:6.5%/10.3%}
.card-face{backface-visibility:hidden;overflow:hidden;container-type:inline-size}
.card-edge{transform:translateZ(calc(var(--z)*-1.2px));background:linear-gradient(100deg,#e9e9e4,#8e8e88 38%,#f6f6f2 56%,#77776f 82%,#c9c9c3)}
.card-front{background:
 radial-gradient(120% 140% at 0% 0%,rgba(255,255,255,.3),transparent 46%),
 repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 2px),
 repeating-linear-gradient(0deg,rgba(80,20,0,.06) 0 1px,transparent 1px 5px),
 linear-gradient(118deg,#ff9150 0%,#ff6418 30%,#e04f0c 56%,#ff7e38 74%,#c64205 100%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.card-back{transform:rotateY(180deg) translateZ(7px);background:
 repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),
 linear-gradient(118deg,#f4f4f1 0%,#a3a39d 34%,#ececE7 52%,#80807a 78%,#d9d9d3 100%)}
.card-stripe{position:absolute;left:0;right:0;top:16%;height:19%;background:var(--ink)}
.card-panel{position:absolute;left:8%;top:47%;width:58%;height:13%;background:#fbfaf6;border-radius:2px}
.card-brand{position:absolute;left:7.5%;top:9%;font-size:9cqw;font-weight:800;letter-spacing:-.07em;line-height:1;color:var(--ink)}
.card-brand b{color:var(--white)}
.card-chip{position:absolute;left:8%;top:38%;width:13.5%;aspect-ratio:1.3;border-radius:16%;background:linear-gradient(135deg,#f3f3ef,#9b9b95 45%,#e4e4de 60%,#86867f);box-shadow:inset 0 0 0 1px rgba(17,17,16,.25)}
.card-chip i{position:absolute;left:0;right:0;top:33%;height:1px;background:rgba(17,17,16,.35)}.card-chip i+i{top:66%}
.card-wave{position:absolute;right:8%;top:10%;width:9%;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.card-number{position:absolute;left:8%;bottom:25%;font-size:5.6cqw;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.card-holder{position:absolute;left:8%;bottom:9%;font-size:3.4cqw;font-weight:600;letter-spacing:.2em;color:rgba(17,17,16,.75)}
.card-glare{position:absolute;inset:0;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.5) 47%,rgba(255,255,255,.12) 54%,transparent 64%);background-size:260% 100%;background-position:calc(100% - var(--gx,.45)*100%) 0;pointer-events:none}

.finance-split{position:absolute;right:0;bottom:2%;width:40%;padding:5% 5.5% 6%;background:var(--ink);color:var(--white);transform:translate3d(0,0,90px);box-shadow:0 24px 40px -24px rgba(17,17,16,.6)}
.finance-split>span{display:block;font-size:clamp(11px,.95vw,14px);font-weight:600;letter-spacing:-.01em;margin-bottom:12%}
.split-bar{position:relative;height:9px;background:#3a3a36}
.split-bar b{position:absolute;inset:0;background:var(--orange);transform-origin:left}
.split-bar i{position:absolute;top:-4px;bottom:-4px;left:calc(var(--k)*100%/6);width:2px;margin-left:-1px;background:var(--ink)}

/* Entrada: preparado fora da tela (pausado no primeiro quadro) e executado quando a seção aparece. */
.finance-offer:is(.is-armed,.is-playing) .finance-contract{animation:fin-contract .8s var(--motion-arrive) 50ms both}
.finance-offer:is(.is-armed,.is-playing) .finance-card{animation:fin-card 1.5s var(--motion-arrive) 150ms both}
.finance-offer:is(.is-armed,.is-playing) .contract-signature path{animation:fin-sign .8s cubic-bezier(.33,0,.2,1) .9s both}
.finance-offer:is(.is-armed,.is-playing) .contract-seal{animation:fin-pop .5s var(--motion-arrive) 1.55s both}
.finance-offer:is(.is-armed,.is-playing) .finance-split{animation:fin-panel .6s var(--motion-arrive) 1s both}
.finance-offer:is(.is-armed,.is-playing) .split-bar b{animation:fin-fill .8s var(--motion-arrive) 1.35s both}
.finance-offer:is(.is-armed,.is-playing) .split-bar i{animation:fin-divide .4s var(--motion-arrive) calc(1.45s + var(--k)*70ms) both}
.finance-offer:is(.is-armed,.is-playing) .card-glare{animation:fin-glare 1s ease-in-out 1.35s both}
.finance-offer:is(.is-armed,.is-playing) .finance-points li{animation:fin-rise .7s var(--motion-arrive) calc(200ms + var(--n)*90ms) both}
.finance-offer.is-armed *{animation-play-state:paused!important}
.finance-offer.is-inview .finance-card-float{animation:fin-float 6s ease-in-out 2.2s infinite alternate}
@keyframes fin-contract{from{transform:translate3d(0,44px,-90px) rotate(-15deg);opacity:0}to{transform:translate3d(0,0,-90px) rotate(-7deg);opacity:1}}
@keyframes fin-card{from{transform:translate3d(-26%,-12%,-260px) rotateY(-200deg) rotateX(28deg) rotateZ(-24deg) scale(.7)}to{transform:var(--card-rest)}}
@keyframes fin-sign{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fin-pop{0%{transform:scale(.3);opacity:0}65%{transform:scale(1.1);opacity:1}100%{transform:none;opacity:1}}
@keyframes fin-panel{from{transform:translate3d(0,26px,90px);opacity:0}to{transform:translate3d(0,0,90px);opacity:1}}
@keyframes fin-fill{from{transform:scaleX(0)}to{transform:none}}
@keyframes fin-divide{from{transform:scaleY(0)}to{transform:none}}
@keyframes fin-glare{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes fin-rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes fin-float{from{transform:translate3d(0,0,40px)}to{transform:translate3d(0,-9px,40px) rotateZ(1.4deg)}}
.motion-paused .finance-offer *{animation:none!important}
@media(prefers-reduced-motion:reduce){.finance-offer *{animation:none!important}}

@media(max-width:1100px){
 .finance-grid{grid-template-columns:1fr 1fr;gap:5%}
 .finance-scene{height:400px}
}
@media(max-width:820px){
 .finance-grid{grid-template-columns:1fr;gap:28px}
 .finance-scene{height:clamp(300px,62vw,420px);width:100%;max-width:560px;justify-self:center}
 .finance-copy>p{margin-top:20px}
}
@media(max-width:540px){
 .finance-scene{height:clamp(300px,86vw,360px)}
 .finance-contract{width:44%;left:2%;top:2%;gap:4.5%}
 .finance-card-float{left:24%;width:70%;top:52%}
 .finance-split{width:54%;padding:4.5% 5%}
 .finance-split>span{font-size:11px;margin-bottom:9%}
 .finance-points h3{font-size:19px}
}