/* ============================================================
   NelyXora — sistema de diseño
   Paleta derivada de la imagen de cabecera: negro-azulado con
   anillos de luz neón azul y acentos dorados (rango/premium).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --void:#05070d;
  --panel:#0d1424;
  --panel-2:#121b30;
  --panel-border:#1d2740;
  --neon:#39b6ff;
  --neon-soft:rgba(57,182,255,.18);
  --neon-dim:#1b3a52;
  --gold:#d7ad4b;
  --gold-soft:rgba(215,173,75,.16);
  --text:#eef2fb;
  --muted:#8b93ab;
  --danger:#ff5d6c;
  --ok:#4fd18a;
  --radius:14px;
  --radius-lg:22px;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(57,182,255,.10), transparent 60%),
    radial-gradient(ellipse 50% 30% at 100% 10%, rgba(215,173,75,.06), transparent 60%),
    var(--void);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:'Rajdhani', 'Inter', sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 .5em;
}

.mono{font-family:'JetBrains Mono', monospace;}

a{color:var(--neon); text-decoration:none;}
p{color:var(--muted); margin:0 0 1em;}

img{max-width:100%; display:block;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* Fondo de estrellas ambientales, sutil */
.starfield{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,.2), transparent);
  background-size: 100% 100%;
  opacity:.6;
}

/* ================= HEADER / TOPBAR ================= */

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(5,7,13,.72);
  border-bottom:1px solid var(--panel-border);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.15rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text);
}
.brand .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--neon); box-shadow:0 0 12px 2px var(--neon);
}

.hamburger{
  width:42px; height:42px; border-radius:10px;
  background:var(--panel); border:1px solid var(--panel-border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
}
.hamburger span, .hamburger span::before, .hamburger span::after{
  content:''; display:block; width:18px; height:2px; background:var(--text);
  position:relative; transition:.2s;
}
.hamburger span::before{ position:absolute; top:-6px; }
.hamburger span::after{ position:absolute; top:6px; }

.menu-panel{
  position:absolute; top:56px; right:24px; width:230px;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius); padding:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  display:none; flex-direction:column; gap:2px;
}
.menu-panel.open{display:flex;}
.menu-panel button, .menu-panel a{
  all:unset; cursor:pointer;
  padding:12px 14px; border-radius:10px; color:var(--text);
  font-size:.92rem; display:flex; align-items:center; gap:10px;
}
.menu-panel button:hover, .menu-panel a:hover{background:var(--panel-2);}

/* ================= HERO ================= */

.hero{
  padding:56px 0 20px;
  text-align:center;
}
.hero-art{
  max-width:820px; margin:0 auto 28px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--panel-border);
  box-shadow:0 0 0 1px rgba(57,182,255,.06), 0 40px 100px -30px rgba(57,182,255,.25);
}
.hero-art img{width:100%; display:block;}

.hero h1{
  font-size:clamp(2rem, 5vw, 3.2rem);
  color:var(--text);
}
.hero .eyebrow{
  color:var(--gold); font-family:'JetBrains Mono',monospace;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:14px;
}
.hero .lede{
  max-width:640px; margin:0 auto 8px; font-size:1.02rem;
}
.hero .lede-extra{display:none;}
.hero .lede-extra.open{display:block;}

.btn-more{
  all:unset; cursor:pointer; color:var(--neon);
  font-family:'JetBrains Mono',monospace; font-size:.82rem;
  border-bottom:1px dashed var(--neon); padding-bottom:2px;
  margin-top:6px; display:inline-block;
}

.cta-row{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:28px;
}
.btn{
  all:unset; cursor:pointer;
  padding:13px 22px; border-radius:999px;
  font-family:'Rajdhani',sans-serif; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; font-size:.92rem;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{
  background:linear-gradient(135deg, var(--neon), #1c7fb8);
  color:#03121c;
  box-shadow:0 10px 30px -8px rgba(57,182,255,.6);
}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{
  border:1px solid var(--panel-border); color:var(--text);
  background:var(--panel);
}
.btn-ghost:hover{border-color:var(--neon);}

/* ================= ORBIT NAV ================= */

.orbit-section{padding:50px 0 10px; position:relative;}
.orbit-title{text-align:center; margin-bottom:36px;}
.orbit-title .eyebrow{
  color:var(--gold); font-family:'JetBrains Mono',monospace;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
}
.orbit-title h2{font-size:1.7rem; color:var(--text);}

.orbit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
  position:relative;
}

.orbit-btn{
  all:unset; cursor:pointer;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  padding:20px 18px;
  display:flex; flex-direction:column; gap:8px;
  position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.orbit-btn::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120px 80px at 20% 0%, var(--neon-soft), transparent 70%);
  opacity:0; transition:opacity .2s;
}
.orbit-btn:hover{
  transform:translateY(-4px);
  border-color:var(--neon);
  box-shadow:0 16px 40px -18px rgba(57,182,255,.5);
}
.orbit-btn:hover::before{opacity:1;}
.orbit-btn .icon{font-size:1.6rem;}
.orbit-btn .label{
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--text); text-transform:uppercase; letter-spacing:.03em;
  position:relative; z-index:1;
}
.orbit-btn .sub{color:var(--muted); font-size:.82rem; position:relative; z-index:1;}

.orbit-btn.admin{
  border-color:rgba(255,93,108,.35);
}
.orbit-btn.admin::before{
  background:radial-gradient(120px 80px at 20% 0%, rgba(255,93,108,.18), transparent 70%);
}
.orbit-btn.admin:hover{border-color:var(--danger); box-shadow:0 16px 40px -18px rgba(255,93,108,.5);}

/* ================= PAGES (rutas por hash) ================= */

.page{
  display:none;
  padding:50px 0 80px;
  animation:fadein .25s ease;
}
.page.active{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.page-head{margin-bottom:30px;}
.page-head .eyebrow{
  color:var(--gold); font-family:'JetBrains Mono',monospace;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
}
.page-head h2{font-size:2rem; color:var(--text);}
.page-head p{max-width:680px; font-size:1.02rem;}

.back-home{
  all:unset; cursor:pointer; color:var(--muted);
  font-family:'JetBrains Mono',monospace; font-size:.82rem;
  display:inline-flex; align-items:center; gap:6px; margin-bottom:20px;
}
.back-home:hover{color:var(--neon);}

.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px; margin-top:10px;
}
.card{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius); padding:20px;
}
.card h3{font-size:1.05rem; color:var(--text); margin-bottom:8px;}
.card p{margin:0; font-size:.92rem;}
.card .tag{
  display:inline-block; font-family:'JetBrains Mono',monospace;
  font-size:.72rem; color:var(--gold); background:var(--gold-soft);
  padding:3px 8px; border-radius:6px; margin-bottom:10px; letter-spacing:.04em;
}

table.data{width:100%; border-collapse:collapse; margin-top:16px;}
table.data th, table.data td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--panel-border);
  font-size:.88rem;
}
table.data th{color:var(--muted); font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.06em;}
table.data td{color:var(--text);}
table.data code{
  font-family:'JetBrains Mono',monospace; color:var(--neon); font-size:.85rem;
}

.rank-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-family:'JetBrains Mono',monospace; font-size:.75rem;
  border:1px solid var(--panel-border); color:var(--text);
}

/* ================= FAQ ================= */

.faq-item{
  border-bottom:1px solid var(--panel-border);
}
.faq-q{
  all:unset; cursor:pointer; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 4px; color:var(--text); font-family:'Rajdhani',sans-serif;
  font-weight:600; font-size:1.05rem;
}
.faq-q .chev{transition:transform .2s; color:var(--muted);}
.faq-item.open .chev{transform:rotate(45deg);}
.faq-a{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  padding:0 4px;
}
.faq-item.open .faq-a{padding-bottom:16px;}
.faq-a p{margin:0; font-size:.92rem;}

/* ================= RESEÑAS ================= */

.reviews-summary{
  display:flex; align-items:center; gap:16px; cursor:pointer;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius); padding:18px 20px; margin-top:16px;
}
.stars{color:var(--gold); font-size:1.2rem; letter-spacing:2px;}
.reviews-summary .avg{font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.4rem; color:var(--text);}
.reviews-list{display:none; margin-top:16px; flex-direction:column; gap:10px;}
.reviews-list.open{display:flex;}
.review-item{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius); padding:14px 16px;
}
.review-item .stars{font-size:.95rem;}
.review-item .txt{color:var(--text); font-size:.9rem; margin-top:6px;}
.review-item .meta{color:var(--muted); font-size:.75rem; margin-top:6px; font-family:'JetBrains Mono',monospace;}

/* ================= MODAL RESEÑA ================= */

.modal-backdrop{
  position:fixed; inset:0; background:rgba(3,5,10,.72);
  backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:200;
  padding:20px;
}
.modal-backdrop.open{display:flex;}
.modal{
  width:100%; max-width:420px;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius-lg); padding:26px;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.modal h3{color:var(--text); font-size:1.2rem;}
.modal p.hint{font-size:.85rem; margin-bottom:16px;}
.star-picker{display:flex; gap:6px; font-size:1.8rem; margin-bottom:16px; cursor:pointer;}
.star-picker span{color:#33394a; transition:color .15s;}
.star-picker span.active{color:var(--gold);}
.modal textarea{
  width:100%; min-height:90px; resize:vertical;
  background:var(--void); border:1px solid var(--panel-border);
  border-radius:10px; color:var(--text); padding:12px; font-family:inherit;
  font-size:.9rem; margin-bottom:16px;
}
.modal .row{display:flex; gap:10px; justify-content:flex-end;}
.modal .msg{font-size:.82rem; margin-top:10px;}
.modal .msg.ok{color:var(--ok);}
.modal .msg.err{color:var(--danger);}

/* ================= ADMIN LOGIN ================= */

.admin-box{
  max-width:380px; margin:0 auto;
  background:var(--panel); border:1px solid rgba(255,93,108,.3);
  border-radius:var(--radius-lg); padding:28px;
}
.admin-box label{
  display:block; font-size:.78rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin:14px 0 6px;
}
.admin-box input{
  width:100%; background:var(--void); border:1px solid var(--panel-border);
  border-radius:10px; color:var(--text); padding:11px 12px; font-family:inherit;
}
.admin-box input:focus{outline:none; border-color:var(--danger);}
.admin-panel{display:none;}
.admin-panel.open{display:block;}
.admin-login{display:block;}
.admin-login.hidden{display:none;}

/* ================= FOOTER ================= */

footer{
  border-top:1px solid var(--panel-border);
  padding:34px 0; margin-top:40px;
  color:var(--muted); font-size:.82rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
footer a{color:var(--muted);}
footer a:hover{color:var(--neon);}

@media (max-width:640px){
  footer{flex-direction:column; text-align:center;}
}