:root{
  --bg:#0b0f19; --panel:#141a29; --panel2:#1b2233; --line:#26304a;
  --txt:#e8ecf5; --muted:#93a0bd; --accent:#5b8cff; --accent2:#22c55e;
  --danger:#ef4444; --warn:#f59e0b; --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:radial-gradient(1200px 600px at 20% -10%,#16203a 0%,var(--bg) 55%);
  color:var(--txt); font:15px/1.5 Inter,system-ui,Segoe UI,Roboto,sans-serif;
  min-height:100vh;
}
html[dir="rtl"] body{font-family:Cairo,Inter,system-ui,sans-serif}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--line);
  background:rgba(11,15,25,.75); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:5;
}
.brand{font-weight:700; letter-spacing:.2px; display:flex; align-items:center; gap:8px}
.brand small{color:var(--muted); font-weight:500}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.topbar-right{display:flex; align-items:center; gap:10px}
.demo-pill{
  font-size:11px; font-weight:700; letter-spacing:.6px;
  background:rgba(245,158,11,.14); color:var(--warn);
  border:1px solid rgba(245,158,11,.4); padding:5px 10px; border-radius:999px;
}

main{max-width:1080px; margin:0 auto; padding:22px 18px 60px; display:grid; gap:18px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line); border-radius:var(--radius); padding:18px;
}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.card-head h2{margin:0; font-size:15px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.8px}
.badge{background:rgba(91,140,255,.16); color:var(--accent); border:1px solid rgba(91,140,255,.4);
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700}
.badge.pro{background:rgba(34,197,94,.15); color:var(--accent2); border-color:rgba(34,197,94,.4)}
.badge.warn{background:rgba(245,158,11,.15); color:var(--warn); border-color:rgba(245,158,11,.4)}

.price{font-size:34px; font-weight:800; margin:6px 0 10px}
.price small{font-size:14px; color:var(--muted); font-weight:500}
.features{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:6px}
.features li{color:var(--txt); font-size:14px; padding-inline-start:20px; position:relative}
.features li::before{content:"✓"; position:absolute; inset-inline-start:0; color:var(--accent2); font-weight:800}

.usage-head{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:6px}
.bar{height:8px; background:#0d1322; border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),#8b5cf6); transition:width .4s}
.renews{margin-top:10px; font-size:12.5px; color:var(--muted)}

.pay-method{
  display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line);
  border-radius:10px; background:#101728; margin-bottom:12px; font-weight:600;
}
.pay-method .chip{
  background:#1f2a44; border:1px solid var(--line); padding:3px 8px; border-radius:6px; font-size:12px; color:var(--muted)
}
.lbl{display:block; font-size:12.5px; color:var(--muted); margin:10px 0 6px}
select{
  width:100%; padding:10px; background:#101728; color:var(--txt);
  border:1px solid var(--line); border-radius:10px; font:inherit;
}
.row{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.hint{font-size:12.5px; color:var(--muted); margin:12px 0 0}

button{font:inherit; cursor:pointer; border-radius:10px; padding:10px 14px; border:1px solid transparent; transition:.15s}
button:active{transform:translateY(1px)}
.primary{background:linear-gradient(180deg,#6c9bff,#4a7bf0); color:#fff; font-weight:700; box-shadow:0 6px 18px rgba(74,123,240,.28)}
.primary:hover{filter:brightness(1.07)}
.ghost{background:#182033; color:var(--txt); border-color:var(--line)}
.ghost:hover{background:#1e2842}
.danger-ghost{background:transparent; color:var(--danger); border-color:rgba(239,68,68,.35)}
.danger-ghost:hover{background:rgba(239,68,68,.1)}
.ghost:disabled,.primary:disabled{opacity:.5; cursor:not-allowed}

.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:820px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line); border-radius:12px; padding:16px; background:#101728; display:flex; flex-direction:column; gap:10px}
.plan.current{border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,140,255,.12)}
.plan h3{margin:0; font-size:16px}
.plan .p{font-size:24px; font-weight:800}
.plan .p small{font-size:12px; color:var(--muted); font-weight:500}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:13.5px; color:var(--muted)}
.plan ul li::before{content:"• "; color:var(--accent)}
.plan button{margin-top:auto}

.cycle{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted)}

.inv{width:100%; border-collapse:collapse; font-size:14px}
.inv th{ text-align:start; color:var(--muted); font-weight:600; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.6px; padding:8px 10px; border-bottom:1px solid var(--line)}
.inv td{padding:10px; border-bottom:1px solid rgba(38,48,74,.55)}
.inv tr:last-child td{border-bottom:none}
.tag{font-size:12px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:#16203a}
.tag.ok{color:var(--accent2); border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.1)}
.empty{color:var(--muted); font-size:13.5px; margin:14px 0 0}

.banner{border-color:rgba(245,158,11,.45); background:linear-gradient(180deg,rgba(245,158,11,.12),rgba(245,158,11,.04)); font-size:14px}

.toast{
  position:fixed; inset-inline:0; bottom:22px; margin:0 auto; width:max-content; max-width:90vw;
  background:#101728; border:1px solid var(--accent); color:var(--txt);
  padding:11px 18px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:20;
}

/* ---------- pasarela de pago (checkout.html) ---------- */
.pay-body{display:flex; align-items:flex-start; justify-content:center; padding:40px 16px}
.pay-wrap{width:100%; max-width:430px}
.pay-box{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.pay-head{display:flex; gap:12px; align-items:flex-start; margin-bottom:18px}
.pay-head .lock{
  width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center;
  background:#101728; border:1px solid var(--line); border-radius:10px; font-size:17px;
}
.pay-head h1{margin:0; font-size:17px}
.pay-head .sub{margin:3px 0 0; font-size:12.5px; color:var(--warn)}
.pay-summary{
  display:flex; align-items:center; justify-content:space-between;
  background:#101728; border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin-bottom:16px; font-size:14px;
}
.pay-summary strong{font-size:18px}
.pay-box input{
  width:100%; padding:11px 12px; background:#0d1322; color:var(--txt);
  border:1px solid var(--line); border-radius:10px; font:inherit; outline:none;
}
.pay-box input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,140,255,.15)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.wide{width:100%; margin-top:18px}
.cancel-link{display:block; text-align:center; margin-top:12px; color:var(--muted); font-size:13px; text-decoration:none}
.cancel-link:hover{color:var(--txt)}
.test-note{margin:16px 0 0; font-size:12px; color:var(--muted); text-align:center; line-height:1.6}
.test-note code{background:#0d1322; border:1px solid var(--line); padding:1px 5px; border-radius:5px}