/* Checkout · Marranghello — card único premium (navy + branco) */
:root{
  --navy:#09212C; --navy2:#12313D; --navy3:#1a3b48; --gold:#97927D; --gold2:#b6ad91; --goldsoft:#D9D4C3;
  --paper:#fbfaf6; --line:rgba(9,33,44,.12); --ink:#1d2a31; --muted:#697680; --ok:#27614a; --err:#9b3a36;
  --sans:"Source Sans 3","Segoe UI",Roboto,Arial,sans-serif; --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--sans);color:#fff;min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(circle at 84% -10%,rgba(151,146,125,.16),transparent 42%),radial-gradient(circle at 6% 110%,rgba(95,170,190,.10),transparent 40%),linear-gradient(160deg,#04141b,var(--navy) 54%,var(--navy2));}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* topbar */
.topbar{max-width:760px;width:100%;margin:0 auto;padding:22px clamp(16px,4vw,24px);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.topbar .brand{display:inline-flex;}
.topbar .brand img{height:30px;width:auto;display:block;}
.topbar-link{color:#cfc9b6;font-weight:800;font-size:.86rem;text-decoration:none;opacity:.85;transition:opacity .2s;}
.topbar-link:hover{opacity:1;}

.checkout-shell{flex:1;display:grid;place-items:center;padding:6px clamp(16px,4vw,24px) 56px;width:100%;}

/* CARD ÚNICO */
.checkout-panel{width:100%;max-width:760px;display:grid;grid-template-columns:47% 53%;background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 36px 90px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06);}
@media(max-width:760px){.checkout-panel{grid-template-columns:1fr;}}

/* ESQUERDA — navy (marca + produto) */
.checkout-copy{position:relative;background:linear-gradient(165deg,var(--navy),var(--navy3));padding:clamp(26px,3vw,34px);
  display:flex;flex-direction:column;border-right:1px solid rgba(151,146,125,.34);}
.checkout-copy::after{content:"";position:absolute;top:0;right:-1px;width:2px;height:100%;background:linear-gradient(180deg,transparent,rgba(151,146,125,.5),transparent);}
.side-logo{height:24px;width:auto;max-width:170px;align-self:flex-start;object-fit:contain;margin-bottom:22px;}
.checkout-copy .eyebrow{color:var(--gold2);font-size:.62rem;font-weight:900;letter-spacing:.24em;text-transform:uppercase;}
.checkout-copy h1{font-family:var(--serif);font-weight:500;line-height:1.08;color:#fff;margin:11px 0 5px;font-size:1.68rem;}
.product-tagline{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--gold2);margin:0 0 9px;letter-spacing:.01em;}
.product-tagline[hidden]{display:none;}
.checkout-copy #productDescription{color:rgba(255,255,255,.58);font-size:.9rem;line-height:1.55;margin:0;}
.benefit-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:15px;}
.benefit-list li{display:flex;gap:11px;font-size:.9rem;line-height:1.46;color:rgba(255,255,255,.72);align-items:flex-start;}
.benefit-list b{color:#fff;font-weight:700;}
.benefit-list .bic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(151,146,125,.2);display:inline-flex;align-items:center;justify-content:center;margin-top:1px;}
.benefit-list .bic svg{width:12px;height:12px;color:var(--goldsoft);fill:none;stroke:currentColor;stroke-width:2.8;}
.side-foot{margin-top:auto;padding-top:22px;color:rgba(255,255,255,.4);font-size:.78rem;font-weight:700;letter-spacing:.02em;}

/* DIREITA — pagamento (branco) */
.payment-card{padding:clamp(26px,3vw,34px);background:#fff;color:var(--ink);display:flex;flex-direction:column;}
.payment-label{color:var(--gold);font-size:.64rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;}
.payment-card h2{font-family:var(--serif);font-size:1.28rem;color:var(--navy);margin:4px 0 14px;font-weight:500;}
.order-subtitle[hidden]{display:none;}

.order-price{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:15px 17px;}
.op-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.op-list{font-family:var(--serif);font-size:1.46rem;color:var(--navy);transition:font-size .3s,color .3s;}
.order-price.is-applied .op-list{font-size:1rem;color:var(--muted);text-decoration:line-through;opacity:.7;}
.op-final{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px;}
.op-final[hidden]{display:none;}
.op-final-label{color:var(--gold);font-size:.68rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;}
.op-final strong{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--navy);font-weight:500;}
.op-coupon{display:flex;gap:8px;margin-top:12px;}
.op-coupon input{flex:1;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:0 14px;font:600 .92rem var(--sans);color:var(--navy);outline:none;background:#fff;transition:border-color .2s,box-shadow .2s;}
.op-coupon input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(151,146,125,.16);}
.op-coupon button{min-height:44px;padding:0 17px;border:0;border-radius:10px;background:var(--navy);color:#fff;font-weight:800;cursor:pointer;transition:filter .2s,transform .14s;}
.op-coupon button:hover{filter:brightness(1.14);} .op-coupon button:active{transform:scale(.97);}
.op-coupon-msg{margin:8px 2px 0;font-size:.83rem;font-weight:700;}
.op-coupon-msg:empty{display:none;}
.op-coupon-msg.ok{color:var(--ok);} .op-coupon-msg.err{color:var(--err);}

.checkout-form{display:block;margin:0;}
.checkout-form label{display:block;font-weight:800;color:var(--navy);margin:18px 0 0;font-size:.95rem;}
.checkout-form input{display:block;width:100%;min-height:52px;margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:0 16px;font:500 1.05rem var(--sans);color:var(--navy);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;}
.checkout-form input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(151,146,125,.16);}
.field-help{display:block;margin:10px 2px 0;color:var(--muted);font-size:.9rem;line-height:1.6;font-weight:500;}

.status-box{margin-top:14px;padding:11px 14px;border-radius:10px;font-size:.88rem;font-weight:700;line-height:1.45;}
.status-box:empty{display:none;padding:0;margin:0;}
.status-box.ready{background:rgba(39,97,74,.1);color:var(--ok);}
.status-box.error{background:rgba(155,58,54,.1);color:var(--err);}

.primary-button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:56px;margin-top:18px;
  border:0;border-radius:13px;background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--navy);font-weight:900;font-size:1.06rem;cursor:pointer;
  box-shadow:0 16px 30px rgba(9,33,44,.22);transition:transform .15s,box-shadow .25s,filter .2s;text-decoration:none;}
.primary-button:hover{transform:translateY(-2px);box-shadow:0 22px 42px rgba(9,33,44,.28);filter:brightness(1.04);}
.primary-button:active{transform:translateY(0);}
.primary-button:disabled{opacity:.7;cursor:default;transform:none;}
.primary-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
.primary-button:hover svg{transform:translateX(4px);}
.primary-button::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);transform:translateX(-130%);animation:sweep 4s ease-in-out infinite;}
@keyframes sweep{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

.trust{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:6px;margin-top:16px;color:var(--muted);font-size:.72rem;font-weight:700;}
.trust span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.trust svg{width:13px;height:13px;flex:0 0 auto;color:var(--gold);}

.product-access-button{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:13px;background:var(--navy);color:#fff;font-weight:900;text-decoration:none;}
.product-access-button[hidden]{display:none;}

.doubt{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;
  border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--navy);font-weight:800;font-size:.92rem;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s;}
.doubt:hover{border-color:rgba(151,146,125,.6);background:var(--paper);}
.doubt svg{width:16px;height:16px;color:#25a35a;}

@media (max-width:760px){
  .checkout-copy{order:1;} .payment-card{order:2;}
  .checkout-copy .side-foot{padding-top:18px;}
}
@media (prefers-reduced-motion:reduce){ .primary-button::after{animation:none;display:none;} }