:root{--blue:#004274;--blue2:#00335a;--or:#FF6300;--or2:#e55900;--ink:#0f1b2a;--mut:#5b6b7d;--line:#e3e9f0;--bg:#f3f6f9;--ok:#13a05a;--r:14px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
a{color:var(--blue)}
[hidden]{display:none!important}

.top{background:var(--blue);color:#fff;position:sticky;top:0;z-index:5;box-shadow:0 2px 12px rgba(0,30,60,.25)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo img{height:30px;display:block}
.secure{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:600;opacity:.95}
.mockbar{background:#fff3e8;color:#9a3d00;text-align:center;font-weight:600;font-size:13px;padding:8px 12px;border-bottom:1px solid #ffd2b0}

.grid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start;padding-top:24px;padding-bottom:40px}
.flow{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:14px}
.summary{grid-column:2;grid-row:1;position:sticky;top:86px;background:#fff;border-radius:var(--r);box-shadow:0 1px 3px rgba(15,27,42,.08);overflow:hidden}
.sum-toggle{display:none}
.sum-body{padding:20px}
.h{font:700 18px Exo,Inter,sans-serif;margin:0 0 14px;color:var(--blue)}

.lines{list-style:none;margin:0;padding:8px 8px 0 0;display:flex;flex-direction:column;gap:12px;max-height:340px;overflow:auto}
.lines li{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center}
.thumb{position:relative;width:58px;height:58px;border:1px solid var(--line);border-radius:10px;background:#fff;display:grid;place-items:center}
.thumb img{max-width:50px;max-height:50px;object-fit:contain}
.thumb b{position:absolute;top:-7px;right:-7px;background:var(--blue);color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.l-t{font-size:13.5px;font-weight:600;line-height:1.3}
.l-t small{display:block;color:var(--mut);font-weight:500}
.l-p{font-weight:600;font-size:14px;white-space:nowrap}
.totals{margin:16px 0 0;border-top:1px solid var(--line);padding-top:12px}
.totals div{display:flex;justify-content:space-between;margin:6px 0;color:var(--mut)}
.totals dt,.totals dd{margin:0}
.totals .grand{color:var(--ink);font-weight:800;font-size:20px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.totals .grand dd{font-family:Exo,Inter,sans-serif}
.green{color:var(--ok)!important;font-weight:600}
.inst-note{font-size:13px;color:var(--mut);text-align:right;margin-top:2px}
.trust{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--mut)}
.trust li{display:flex;gap:9px;align-items:center}
.trust svg{width:18px;height:18px;flex:none;color:var(--blue)}
.warn{background:#fff6ec;border:1px solid #ffd6b3;color:#8a3a00;border-radius:10px;padding:10px 12px;font-size:13px;margin-top:12px}

.step{background:#fff;border-radius:var(--r);box-shadow:0 1px 3px rgba(15,27,42,.08);overflow:hidden;transition:box-shadow .2s}
.step[data-state=open]{box-shadow:0 0 0 2px var(--blue),0 8px 24px rgba(0,66,116,.12)}
.step-h{display:flex;align-items:center;gap:12px;padding:18px 20px}
.step-h h2{font:700 18px Exo,Inter,sans-serif;margin:0;flex:1}
.n{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.step[data-state=locked] .n{background:#c9d4df}
.step[data-state=locked] h2{color:#9aa8b6}
.step[data-state=done] .n{background:var(--ok);font-size:0}
.step[data-state=done] .n::after{content:"";width:10px;height:6px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-1px)}
.edit{background:none;border:0;color:var(--blue);font-weight:600;cursor:pointer;font-size:14px;display:none}
.step[data-state=done] .edit{display:block}
.step-b{padding:0 20px 20px;display:none}
.step[data-state=open] .step-b{display:block}
form.step-b{grid-template-columns:1fr 1fr;gap:12px 14px}
.step[data-state=open] form.step-b{display:grid}
.step-sum{display:none;padding:0 20px 18px 60px;color:var(--mut);font-size:14px;margin-top:-8px}
.step[data-state=done] .step-sum{display:block}

.f{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#33475b}
.f.full,.addr,.opts,.err,.btn,.cep-help{grid-column:1/-1}
.f i{font-weight:400;color:var(--mut);font-style:normal}
input,select{font:inherit;font-size:16px;padding:12px 13px;border:1.5px solid #ccd6e0;border-radius:10px;background:#fff;color:var(--ink);width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,66,116,.15)}
input.bad{border-color:#d93025;box-shadow:0 0 0 3px rgba(217,48,37,.12)}
.addr{display:grid;grid-template-columns:1fr 1fr 110px;gap:12px 14px}
.addr .full{grid-column:1/3}
.addr .f:nth-child(3),.addr .f:nth-child(5){grid-column:1/3}
.cep-help{font-size:13px;margin-top:-4px}
.err{color:#c62828;font-size:14px;margin:0;min-height:0;font-weight:500}
.err:empty{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--or);color:#fff;border:0;border-radius:12px;padding:15px 20px;font:700 16px Inter,sans-serif;cursor:pointer;text-decoration:none;transition:background .15s,transform .05s;box-shadow:0 4px 14px rgba(255,99,0,.28)}
.btn:hover{background:var(--or2)}.btn:active{transform:translateY(1px)}
.btn:disabled{background:#c9d4df;box-shadow:none;cursor:not-allowed}
.btn.big{width:100%;font-size:17px;padding:17px}
.btn.sm{padding:10px 14px;font-size:14px;box-shadow:none;white-space:nowrap}
.btn.ghost{background:#fff;color:var(--blue);border:1.5px solid var(--blue);box-shadow:none}
.btn.loading{pointer-events:none;opacity:.8}
.btn.loading::before{content:"";width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.link{background:none;border:0;color:var(--mut);text-decoration:underline;cursor:pointer;font-size:13px;margin-top:6px}

.opts{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.opt{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;border:1.5px solid #d6dfe8;border-radius:12px;padding:13px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:#9db4c9}
.opt input{width:20px;height:20px;margin:0;accent-color:var(--blue)}
.opt.sel{border-color:var(--blue);background:#f2f7fc}
.opt b{display:block;font-size:15px}
.opt small{color:var(--mut);font-size:13px}
.opt .pr{font-weight:700;white-space:nowrap}
.opt .pr.free{color:var(--ok)}
.tag{display:inline-block;background:var(--or);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;margin-left:6px;vertical-align:2px}
.opts .loading-line{color:var(--mut);font-size:14px;display:flex;gap:8px;align-items:center}

.tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-bottom:16px}
.tabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;border:1.5px solid #d6dfe8;border-radius:12px;background:#fff;cursor:pointer;font:600 14px Inter,sans-serif;color:var(--ink)}
.tabs svg{width:24px;height:24px;color:var(--blue)}
.tabs em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--mut)}
.tabs button[aria-selected=true]{border-color:var(--blue);background:#f2f7fc;box-shadow:0 0 0 1px var(--blue)}
#pixBadge{position:absolute;top:-9px;right:8px;background:var(--ok);color:#fff;border-radius:6px;padding:1px 7px;font-size:11px}
.pix-why{margin:0 0 14px;padding:0;list-style:none;font-size:14px;color:#33475b}
.pix-why li{padding-left:24px;position:relative;margin:6px 0}
.pix-why li::before{content:"";position:absolute;left:4px;top:5px;width:10px;height:6px;border:solid var(--ok);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.pix-box{text-align:center;padding:4px 0 0}
.pix-t{font-weight:700;margin:6px 0 12px}
#pixImg{width:220px;height:220px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff;image-rendering:pixelated}
.copy{display:flex;gap:8px;margin:14px 0 8px}
.copy input{font-size:13px;color:var(--mut);background:#f7f9fb}
.waiting{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;color:var(--blue);margin:12px 0 4px}
.spin{width:16px;height:16px;border:2.5px solid #c9d8e6;border-top-color:var(--blue);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.small{font-size:13px;color:var(--mut)}
.legal{font-size:12px;color:var(--mut);margin:16px 0 0}
.mock-card{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.mock-card .small,.mock-card .btn{grid-column:1/-1}
.boleto-box{margin-top:14px;display:flex;flex-direction:column;gap:8px}

.done,.empty{grid-column:1/-1;background:#fff;border-radius:var(--r);box-shadow:0 1px 3px rgba(15,27,42,.08);padding:48px 24px;text-align:center}
.done h1,.empty h1{font:800 28px Exo,Inter,sans-serif;color:var(--blue);margin:14px 0 6px}
.order-n{font:700 18px Exo,Inter,sans-serif;color:var(--or);margin:0 0 10px}
.done p{max-width:460px;margin:0 auto 8px;color:#33475b}
.done-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.check svg{width:84px;height:84px;fill:none;stroke:var(--ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.check circle{stroke-dasharray:160;stroke-dashoffset:160;animation:dr .6s ease forwards}
.check path{stroke-dasharray:40;stroke-dashoffset:40;animation:dr .4s .5s ease forwards}
@keyframes dr{to{stroke-dashoffset:0}}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mut);font-size:12px;padding-bottom:28px}

@media (max-width:860px){
  .grid{grid-template-columns:1fr;padding-top:0;gap:14px}
  .summary{grid-column:1;grid-row:1;position:static;border-radius:0;margin:0 -16px;box-shadow:0 1px 0 var(--line)}
  .flow{grid-column:1;grid-row:2}
  .sum-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;background:#eef4f9;border:0;padding:14px 16px;font:600 14px Inter,sans-serif;color:var(--blue);cursor:pointer}
  .sum-toggle b{font:800 17px Exo,Inter,sans-serif;color:var(--ink)}
  .st-l{display:flex;gap:8px;align-items:center}
  .sum-body{display:none;padding:16px}
  .summary.open .sum-body{display:block}
  .summary .trust{display:none}
  .step-h{padding:16px}
  .step-b{padding:0 16px 18px}
  .step-sum{padding:0 16px 16px 56px}
  form.step-b{grid-template-columns:1fr}
  .step[data-state=open] form.step-b{grid-template-columns:1fr}
  .addr{grid-template-columns:1fr 96px}
  .addr .f{grid-column:1/-1!important}
  .addr .f:nth-child(2){grid-column:1/2!important;max-width:160px}
  .addr .f:nth-child(5){grid-column:1/2!important}
  .addr .f:nth-child(6){grid-column:2/3!important}
  .done,.empty{margin-top:14px}
}

/* ---- contagem regressiva ---- */
.timer{position:sticky;top:62px;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff3e8;color:#9a3d00;font-size:14px;font-weight:500;padding:9px 12px;border-bottom:1px solid #ffd9bd}
.timer b{font:800 16px Exo,Inter,sans-serif;color:var(--or);font-variant-numeric:tabular-nums}
.timer.hot{background:#ffe9e6;color:#a1170b;border-color:#ffc9c2}
.timer.hot b{color:#d93025}

/* ---- quantidade no resumo ---- */
.lines li{align-items:start}
.l-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.l-row .unit{display:inline;margin:0}
.qty{display:inline-flex;align-items:center;border:1.5px solid #d6dfe8;border-radius:999px;background:#fff;height:34px}
.qty button{width:34px;height:32px;border:0;background:none;font:600 18px Inter,sans-serif;color:var(--blue);cursor:pointer;display:grid;place-items:center;border-radius:999px}
.qty button:hover{background:#f2f7fc}
.qty button:disabled{color:#b8c4d0;cursor:not-allowed;background:none}
.qty input{width:36px;border:0;padding:0;text-align:center;font:600 14px Inter,sans-serif;box-shadow:none!important;background:none}
.qty.off{opacity:.6}
.l-p{padding-top:2px}

/* ---- cupom ---- */
.coupon{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.coupon.off{pointer-events:none;opacity:.55}
.coupon-open{display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;color:var(--blue);font:700 13px Inter,sans-serif;letter-spacing:.3px;cursor:pointer}
.coupon-open:hover{text-decoration:underline}
.coupon-form{display:flex;gap:8px}
.coupon-form input{text-transform:uppercase;font-size:15px;padding:10px 12px}
.coupon-form input::placeholder{text-transform:none}
.coupon-form .btn{background:var(--blue);box-shadow:none}
.coupon-form .btn:hover{background:var(--blue2)}
.coupon-on{display:flex;align-items:center;justify-content:space-between;background:#eefaf3;border:1px dashed #8fd3ad;color:#0d7a43;border-radius:10px;padding:9px 12px;font-size:14px}
.coupon-on span{display:flex;align-items:center;gap:6px}
.coupon-on .link{margin:0}
.coupon .err{margin-top:8px;font-size:13px}

/* ---- rodapé ---- */
.foot{display:block;background:#f4f4f4;border-top:1px solid #e6e6e6;color:#8a8a8a;font-size:13px;text-align:center;padding:30px 0 34px;margin-top:10px}
.foot p{margin:4px 0}
.foot a{color:#8a8a8a}
.foot-t{font-size:15px;color:#8a8a8a;margin:0 0 12px!important}
.brands{list-style:none;margin:0 auto 26px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.brands li{width:52px;height:32px;background:#fff;border:1px solid #d9d9d9;border-radius:4px;display:grid;place-items:center}
.brands svg{width:48px;height:30px}
.foot-info b{color:#7a7a7a;font-weight:500}
.foot-lock{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:#7a7a7a;text-align:left}
.foot-lock span{display:flex;flex-direction:column;font-size:11px;line-height:1.2;letter-spacing:.3px}
.foot-lock b{font-size:12px}

/* ---- página de agradecimento ---- */
.done{text-align:left;padding:0;background:none;box-shadow:none;max-width:720px;margin:0 auto;width:100%}
.done-head{display:flex;align-items:center;gap:16px;margin:8px 0 18px}
.done-head .check svg{width:60px;height:60px}
.done-head h1{font:800 26px Exo,Inter,sans-serif;color:var(--blue);margin:2px 0 0}
.done .order-n{font:600 14px Inter,sans-serif;color:var(--mut);margin:0}
.done-card{background:#fff;border-radius:var(--r);box-shadow:0 1px 3px rgba(15,27,42,.08);padding:20px 22px;margin-bottom:14px}
.done-card h2{font:700 17px Exo,Inter,sans-serif;color:var(--ink);margin:0 0 8px}
.done-card p{margin:0;color:#33475b;max-width:none}
.done-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-top:12px}
.done-grid h3{font:600 13px Inter,sans-serif;color:var(--mut);margin:0 0 4px;text-transform:uppercase;letter-spacing:.4px}
.done-grid p{font-size:14px;line-height:1.5}
.done-grid small{color:var(--mut)}
.done-grid .ok{color:var(--ok);font-weight:600}
.d-lines{list-style:none;margin:12px 0 0;padding:6px 0 0;display:flex;flex-direction:column;gap:12px}
.d-lines li{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center}
.done-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 30px}
.done-foot p{margin:0;font-size:14px;color:var(--mut)}
@media (max-width:860px){
  .done{margin-top:14px}
  .done-grid{grid-template-columns:1fr}
  .done-head h1{font-size:22px}
  .done-foot .btn{width:100%}
  .timer{font-size:13px}
}

/* ---- faixa de aviso ---- */
.banner{background:var(--or);color:#fff;text-align:center;font-weight:600;font-size:14px;padding:8px 12px}

/* ---- order bump ---- */
.bumps{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.bump{display:block;border:2px dashed var(--or);border-radius:12px;background:#fffaf5;cursor:pointer;overflow:hidden;transition:background .15s,border-color .15s}
.bump.on{border-style:solid;background:#fff3e8}
.bump.off{cursor:default;opacity:.7}
.bump-h{background:var(--or);color:#fff;font:800 13px Exo,Inter,sans-serif;letter-spacing:.4px;text-transform:uppercase;padding:7px 14px}
.bump-b{display:grid;grid-template-columns:22px 64px 1fr;gap:12px;align-items:center;padding:12px 14px}
.bump-b input{width:20px;height:20px;margin:0;accent-color:var(--or)}
.bump-img{width:64px;height:64px;border:1px solid var(--line);border-radius:10px;background:#fff;display:grid;place-items:center}
.bump-img img{max-width:56px;max-height:56px;object-fit:contain}
.bump-t{display:flex;flex-direction:column;gap:3px;font-size:14px}
.bump-t small{color:var(--mut)}
.bump-d{color:#33475b;font-size:13px}
.bump-p{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bump-p s{color:var(--mut);font-size:13px}
.bump-p b{font:800 17px Exo,Inter,sans-serif;color:var(--ok)}
.bump-p em{font-style:normal;background:var(--ok);color:#fff;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700}
.bump-cta{font-weight:700;color:var(--or);font-size:13px}
.bump.on .bump-cta{color:var(--ok)}
.bump-line .l-p{display:flex;flex-direction:column;align-items:flex-end}
.bump-line .l-p s{color:var(--mut);font-size:12px;font-weight:500}
.bump-line .tag{margin-left:0}
.bump-line .link{margin:0}