/* FX */
.fx{position:fixed; inset:0; pointer-events:none; z-index:-1}
.fx__grid{
  position:absolute; inset:0;
  opacity:.12;
  background:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at 50% 10%, black 0%, transparent 65%);
}
.fx__orb{
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(55px);
  opacity:.22;
}
.fx__orb--1{
  top:-220px; left:-220px;
  background: radial-gradient(circle, rgba(255,60,172,.95), transparent 60%);
}
.fx__orb--2{
  bottom:-260px; right:-260px;
  background: radial-gradient(circle, rgba(43,134,197,.95), transparent 60%);
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  height:var(--navh);
  display:flex; align-items:center;
  background: rgba(7, 10, 20, .80);
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__row{display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:170px}
.brand__logo{
  width:34px;height:34px;border-radius:12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  padding:6px;
}
.brand__name{
  font-family:Orbitron, sans-serif;
  font-weight:800;
  background: linear-gradient(90deg, var(--p), var(--a));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav__links{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* <-- esto los manda a la derecha */
  gap:14px;                 /* un poco más “tight” para PC */
  flex:1;
  margin-left:auto;         /* asegura que empujen hacia la derecha */
}

.nav__link{
  text-decoration:none;
  font-weight:700;
  color: rgba(243,245,255,.82);
  padding:10px 14px;
  border-radius:999px;
  transition:.18s;
}
.nav__link:hover{background: rgba(255,255,255,.06); color:#fff}
.nav__link.is-active{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}

.nav__cta{min-width:170px; display:flex; justify-content:flex-end}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  font-weight:800;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  transition: transform .18s ease, background .18s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn--primary{
  background: linear-gradient(90deg, rgba(255,60,172,.95), rgba(43,134,197,.92));
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.btn--ghost{background: rgba(255,255,255,.06)}

/* burger */
.nav__burger{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.nav__burger span{display:block;width:18px;height:2px;background:#fff;margin:4px auto;opacity:.9}

/* Grid / Card */
.grid{display:grid; gap:16px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r-md);
  padding:18px;
  box-shadow: var(--shadow);
}
.card p{color:var(--muted); line-height:1.6; margin:.4rem 0 0}
.card h3{margin:12px 0 6px}

.card--row{display:flex; gap:14px; align-items:flex-start}

.icon{
  width:44px;height:44px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  font-family:Orbitron, sans-serif;
  font-weight:900;
}

/* pills / tags */
.pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-weight:800;
  font-size:.86rem;
}
.tag{
  font-size:.85rem;
  font-weight:900;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(243,245,255,.86);
}
.tag--best{
  background: rgba(255,60,172,.18);
  border-color: rgba(255,60,172,.28);
}