/* ==========================================================
   Identidade visual "Noite Gelada" — tema escuro premium
   Assinaturas: mascote Cubo, cartões com corte de lacre,
   gesto "puxe o lacre" para pagar, ícones ilustrados próprios
   ========================================================== */
@font-face{font-family:"Big Shoulders Display";src:url(assets/fonts/bigshoulders.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
  --pri:#8BEAFF; --sec:#FF9A3C;
  --ink:#05080E; --ink2:#0A111C; --ink3:#111B2A;
  --line:rgba(160,220,255,.12); --line2:rgba(160,220,255,.22);
  --glass:linear-gradient(155deg,rgba(150,215,255,.10),rgba(150,215,255,.025) 60%);
  --txt:#EAF6FF; --mut:#7F93A8; --ok:#3EE6A8; --bad:#FF5A6E;
  --cut:16px;
  --disp:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--ink)}
body{font-family:var(--sans);color:var(--txt);background:
  radial-gradient(900px 500px at 85% -10%,rgba(63,184,230,.16),transparent 60%),
  radial-gradient(700px 600px at -10% 110%,rgba(255,154,60,.10),transparent 60%),var(--ink);
  min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;border:0;cursor:pointer;color:inherit;background:none}
a{color:var(--pri);text-decoration:none}
input,select{font:inherit;color:var(--txt)}
.i{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:middle}
.disp{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:.9}
.mut{color:var(--mut);font-size:13px}
.hide{display:none!important}

/* textura de gelo/condensação reaproveitável */
.frost{position:relative}
.frost::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.55;mix-blend-mode:screen;
  background:
   radial-gradient(1.6px 2.2px at 12% 18%,rgba(255,255,255,.55),transparent 70%),
   radial-gradient(1.2px 1.6px at 28% 72%,rgba(255,255,255,.45),transparent 70%),
   radial-gradient(2px 2.8px at 64% 30%,rgba(255,255,255,.5),transparent 70%),
   radial-gradient(1.4px 1.9px at 82% 64%,rgba(255,255,255,.45),transparent 70%),
   radial-gradient(1px 1.4px at 46% 88%,rgba(255,255,255,.4),transparent 70%),
   radial-gradient(2.4px 3.2px at 92% 14%,rgba(255,255,255,.4),transparent 70%),
   radial-gradient(1.2px 1.6px at 6% 52%,rgba(255,255,255,.4),transparent 70%)}

/* corte de lacre — forma de cartão própria */
.cut{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.glass{background:var(--glass),rgba(12,20,32,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--line)}
.cutb{position:relative;background:var(--line2);padding:1px}  /* borda que acompanha o corte */
.cutb>.in{background:var(--glass),#0B1320}

/* botões */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 18px;font-weight:800;font-size:15px;letter-spacing:.02em;
  color:#04121C;background:linear-gradient(135deg,#E8FBFF,var(--pri) 45%,#3FB8E6);box-shadow:0 10px 30px -8px rgba(139,234,255,.55),inset 0 1px 0 rgba(255,255,255,.7);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.amb{color:#1A0C00;background:linear-gradient(135deg,#FFD7A8,var(--sec) 50%,#E46F12);box-shadow:0 10px 30px -8px rgba(255,154,60,.55)}
.btn.ghost{background:rgba(139,234,255,.07);color:var(--pri);box-shadow:inset 0 0 0 1px var(--line2)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800;color:#06101A}

/* aviso discreto de protótipo */
.demo{font-size:11px;color:#56687C;text-align:center;padding:18px 16px 8px;letter-spacing:.02em}
.demo a{color:#7FA6BF;text-decoration:underline;text-underline-offset:2px}

/* toast */
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:99;display:flex;align-items:center;gap:10px;padding:11px 18px 11px 12px;border-radius:999px;font-weight:700;font-size:14px;
  background:rgba(14,26,40,.92);backdrop-filter:blur(14px);border:1px solid var(--line2);box-shadow:0 16px 40px -10px rgba(0,0,0,.7);animation:tin .35s cubic-bezier(.2,1.4,.4,1),tout .3s 1.6s forwards;white-space:nowrap}
.toast .ti{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--pri);color:#04121C}
.toast .ti .i{width:15px;height:15px}
@keyframes tin{from{opacity:0;transform:translate(-50%,-14px) scale(.9)}}
@keyframes tout{to{opacity:0;transform:translate(-50%,-10px)}}

/* bolhas subindo (fundo) */
.fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fx i{position:absolute;bottom:-20px;border-radius:50%;border:1px solid rgba(255,190,120,.35);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),rgba(255,154,60,.06));animation:sobe linear infinite}
@keyframes sobe{to{transform:translate3d(var(--dx,10px),-110vh,0)}}