:root{
  --deep:#020617;
  --navy:#0f2552;
  --navy2:#071633;
  --burgundy:#2563eb;
  --burgundy2:#7c3aed;
  --gold:#38bdf8;
  --gold2:#a78bfa;
  --muted:#dbeafe;
  --soft:#cbd5e1;
  --line:rgba(255,255,255,.15);
  --green:#22c55e;
  --red:#ef4444;
  --blue:#38bdf8;
  --purple:#a78bfa;
  --sky:#38bdf8;
  --violet:#818cf8;
  --glass:rgba(255,255,255,.075);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:Poppins,Arial,sans-serif;
  color:white;
  background:
    radial-gradient(circle at 84% 14%,rgba(56,189,248,.26),transparent 18%),
    radial-gradient(circle at 92% 42%,rgba(124,58,237,.34),transparent 28%),
    radial-gradient(circle at 10% 84%,rgba(56,189,248,.12),transparent 24%),
    linear-gradient(135deg,#020617,#071633 42%,#172554 72%,#312e81);
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(112deg,transparent 0 42%,rgba(56,189,248,.08) 48%,transparent 56%),
    repeating-linear-gradient(115deg,transparent 0 80px,rgba(56,189,248,.025) 82px,transparent 86px);
}
a{text-decoration:none;color:inherit}
.page{position:relative;z-index:1}
.container{width:min(1220px,calc(100% - 40px));margin:auto}

.navbar{
  position:sticky;
  top:0;
  z-index:20;
  height:88px;
  background:rgba(2,6,23,.88);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:28px;
}
.logo{display:flex;align-items:center;min-width:max-content}
.logo img{height:58px;width:58px;object-fit:contain;display:block}
.brand-name{font-family:"Playfair Display",serif;font-size:18px;font-weight:800;line-height:1.05;margin-left:10px}
.brand-name small{display:block;color:var(--gold);font-family:Poppins,Arial,sans-serif;font-size:8px;letter-spacing:.28em;margin-top:5px}
.nav-links{display:flex;gap:22px;align-items:center;margin-left:auto;white-space:nowrap}
.nav-links a{color:#d7deeb;font-size:13px;font-weight:600;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold2)}
.nav-actions{display:flex;gap:10px}
.menu{display:none;background:none;border:0;color:white;font-size:27px;cursor:pointer}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:10px;
  font-family:Poppins,Arial,sans-serif;
  font-weight:900;
  border:1px solid transparent;
  transition:.25s;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--sky,var(--gold)),var(--violet,var(--gold2)));color:#071633}
.btn-burgundy{background:linear-gradient(135deg,var(--burgundy),var(--burgundy2));color:white}
.btn-outline{background:rgba(255,255,255,.06);border-color:rgba(56,189,248,.45);color:#bae6fd}
.hero{padding:64px 0 36px}
.hero-grid{display:grid;grid-template-columns:1fr .9fr;gap:30px;align-items:center}
.kicker{
  display:inline-flex;padding:8px 13px;border-radius:999px;
  background:rgba(56,189,248,.13);border:1px solid rgba(56,189,248,.35);
  color:#bae6fd;font-size:13px;font-weight:900;margin-bottom:18px;
}
.hero h1{font-family:"Playfair Display",serif;font-size:clamp(44px,6vw,76px);line-height:1.04;margin-bottom:18px}
.hero h1 span{display:block;color:var(--gold)}
.hero p{color:#dbeafe;font-size:18px;line-height:1.75;max-width:820px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.reward-card{
  background:
    radial-gradient(circle at top right,rgba(56,189,248,.22),transparent 36%),
    linear-gradient(145deg,rgba(13,25,56,.84),rgba(7,14,34,.70));
  border:1px solid var(--line);
  border-radius:32px;
  padding:26px;
  backdrop-filter:blur(16px);
  box-shadow:0 26px 80px rgba(0,0,0,.28);
}
.reward-card h2{font-family:"Playfair Display",serif;font-size:34px;margin-bottom:8px}
.level-badge{
  width:86px;height:86px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#071633;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:28px;margin-bottom:16px;
}
.big-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.big-stat{
  background:rgba(2,6,23,.38);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:14px;
  text-align:center;
}
.big-stat b{display:block;font-size:25px;color:white}
.big-stat span{color:#cbd5e1;font-size:12px}
.progress-wrap{margin-top:18px}
.progress-label{display:flex;justify-content:space-between;color:#dbeafe;font-size:13px;font-weight:800;margin-bottom:8px}
.progress{height:12px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:999px;width:64%}

.section{padding:48px 0}
.section.alt{
  background:linear-gradient(135deg,rgba(2,6,23,.30),rgba(124,58,237,.15));
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.section-head{max-width:880px;margin:0 auto 34px;text-align:center}
.section-head h2{font-family:"Playfair Display",serif;font-size:clamp(34px,4vw,54px);line-height:1.1}
.section-head p{color:var(--muted);font-size:16px;line-height:1.7;margin-top:14px}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(145deg,rgba(13,25,56,.78),rgba(7,14,34,.66));
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
  backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.20);
}
.card-icon{
  width:54px;height:54px;border-radius:16px;background:rgba(56,189,248,.16);
  color:#bae6fd;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:16px;
}
.card h3{font-size:20px;margin-bottom:8px}
.card p{color:var(--soft);line-height:1.65;font-size:14px}
.points{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:14px
}
.tag{
  display:inline-flex;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900
}
.tag.gold{background:rgba(56,189,248,.15);color:#bae6fd;border:1px solid rgba(56,189,248,.35)}
.tag.green{background:rgba(34,197,94,.16);color:#86efac;border:1px solid rgba(134,239,172,.35)}
.tag.blue{background:rgba(56,189,248,.16);color:#7dd3fc;border:1px solid rgba(125,211,252,.35)}
.tag.red{background:rgba(239,68,68,.16);color:#fca5a5;border:1px solid rgba(252,165,165,.35)}
.tag.purple{background:rgba(167,139,250,.16);color:#c4b5fd;border:1px solid rgba(196,181,253,.35)}

.dashboard{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.table-card{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{padding:15px;text-align:left;border-bottom:1px solid rgba(255,255,255,.10);font-size:13px}
th{color:#bae6fd;background:rgba(2,6,23,.38)}
td{color:#dbeafe}
.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reward-item{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:20px;
}
.reward-item.locked{opacity:.62}
.reward-price{
  display:inline-flex;margin:12px 0;padding:7px 11px;border-radius:999px;
  background:rgba(56,189,248,.16);color:#bae6fd;font-size:12px;font-weight:900
}
.badges{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.badge-card{
  text-align:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:18px 10px;
}
.badge-card.locked{opacity:.45;filter:grayscale(1)}
.badge-card div{font-size:34px;margin-bottom:8px}
.badge-card b{font-size:12px;display:block}
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.path-step{
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  text-align:center;
}
.path-step div{
  width:48px;height:48px;border-radius:50%;margin:0 auto 12px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#071633;display:flex;align-items:center;justify-content:center;font-weight:900
}
.path-step h3{font-size:15px;margin-bottom:8px}
.path-step p{color:#cbd5e1;font-size:12px;line-height:1.5}
.admin-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:18px
}
.admin-list{display:grid;gap:12px}
.admin-row{
  background:rgba(2,6,23,.36);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
}
.admin-row span{color:#cbd5e1;font-size:12px}
.simulator{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start
}
.sim-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.toast{
  position:fixed;right:22px;bottom:22px;
  background:rgba(7,14,34,.92);
  border:1px solid rgba(56,189,248,.40);
  color:#bae6fd;
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.32);
  opacity:0;
  transform:translateY(20px);
  transition:.25s;
  z-index:50;
}
.toast.show{opacity:1;transform:translateY(0)}
.footer{
  padding:34px 4vw;border-top:1px solid rgba(255,255,255,.10);
  background:rgba(2,6,23,.55);color:#cbd5e1;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px
}
@media(max-width:1100px){
  .navbar{height:auto;min-height:82px}
  .nav-inner{min-height:82px;flex-wrap:wrap;padding:10px 0}
  .nav-links{display:none;order:4;width:100%;margin:0;padding:8px 0 16px;flex-direction:column;align-items:flex-start;gap:0}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-actions{margin-left:auto}
  .menu{display:block}
  .hero-grid,.dashboard,.admin-panel,.simulator{grid-template-columns:1fr}
  .grid-3,.grid-4,.reward-grid,.badges,.path{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .container{width:min(100% - 28px,1220px)}
  .logo img{height:50px;width:50px}
  .brand-name{font-size:15px}
  .nav-actions .btn{display:none}
  .grid-2,.grid-3,.grid-4,.reward-grid,.badges,.path,.big-stats,.sim-actions{grid-template-columns:1fr}
}

/* Acceso oficial visible dentro del menú móvil */
.mobile-login-link{display:none!important}
@media (max-width:1100px){
  .nav-links .mobile-login-link{
    display:flex!important;align-items:center;justify-content:center;
    width:100%;margin-top:10px;padding:13px 18px;border-radius:12px;
    color:#020617!important;background:linear-gradient(135deg,#38bdf8,#818cf8);
    font-weight:800;text-decoration:none;box-shadow:0 12px 28px rgba(56,189,248,.20)
  }
}
.text-muted { color:#cbd5e1; }
.text-muted-relaxed { color:#cbd5e1; line-height:1.65; }
.sim-actions-spaced { margin-top:16px; }

.progress-0{width:0%}
.progress-1{width:1%}
.progress-2{width:2%}
.progress-3{width:3%}
.progress-4{width:4%}
.progress-5{width:5%}
.progress-6{width:6%}
.progress-7{width:7%}
.progress-8{width:8%}
.progress-9{width:9%}
.progress-10{width:10%}
.progress-11{width:11%}
.progress-12{width:12%}
.progress-13{width:13%}
.progress-14{width:14%}
.progress-15{width:15%}
.progress-16{width:16%}
.progress-17{width:17%}
.progress-18{width:18%}
.progress-19{width:19%}
.progress-20{width:20%}
.progress-21{width:21%}
.progress-22{width:22%}
.progress-23{width:23%}
.progress-24{width:24%}
.progress-25{width:25%}
.progress-26{width:26%}
.progress-27{width:27%}
.progress-28{width:28%}
.progress-29{width:29%}
.progress-30{width:30%}
.progress-31{width:31%}
.progress-32{width:32%}
.progress-33{width:33%}
.progress-34{width:34%}
.progress-35{width:35%}
.progress-36{width:36%}
.progress-37{width:37%}
.progress-38{width:38%}
.progress-39{width:39%}
.progress-40{width:40%}
.progress-41{width:41%}
.progress-42{width:42%}
.progress-43{width:43%}
.progress-44{width:44%}
.progress-45{width:45%}
.progress-46{width:46%}
.progress-47{width:47%}
.progress-48{width:48%}
.progress-49{width:49%}
.progress-50{width:50%}
.progress-51{width:51%}
.progress-52{width:52%}
.progress-53{width:53%}
.progress-54{width:54%}
.progress-55{width:55%}
.progress-56{width:56%}
.progress-57{width:57%}
.progress-58{width:58%}
.progress-59{width:59%}
.progress-60{width:60%}
.progress-61{width:61%}
.progress-62{width:62%}
.progress-63{width:63%}
.progress-64{width:64%}
.progress-65{width:65%}
.progress-66{width:66%}
.progress-67{width:67%}
.progress-68{width:68%}
.progress-69{width:69%}
.progress-70{width:70%}
.progress-71{width:71%}
.progress-72{width:72%}
.progress-73{width:73%}
.progress-74{width:74%}
.progress-75{width:75%}
.progress-76{width:76%}
.progress-77{width:77%}
.progress-78{width:78%}
.progress-79{width:79%}
.progress-80{width:80%}
.progress-81{width:81%}
.progress-82{width:82%}
.progress-83{width:83%}
.progress-84{width:84%}
.progress-85{width:85%}
.progress-86{width:86%}
.progress-87{width:87%}
.progress-88{width:88%}
.progress-89{width:89%}
.progress-90{width:90%}
.progress-91{width:91%}
.progress-92{width:92%}
.progress-93{width:93%}
.progress-94{width:94%}
.progress-95{width:95%}
.progress-96{width:96%}
.progress-97{width:97%}
.progress-98{width:98%}
.progress-99{width:99%}
.progress-100{width:100%}