/* SHAREPAWS · navbar compartida (index, pawswap, trades, burn)
   Fuente única de estilos del navbar: cualquier cambio de tamaño/color se hace aquí.
   Los tokens se fijan sobre .nav para que se vea igual aunque la página defina otros valores. */
.nav, .nav *{ box-sizing:border-box; }
.nav{
  --text:#fff; --soft:#c9c9dc; --dim:#8a8aa6; --cream:#fff1dc; --teal:#2fcdb4; --violet:#8a50f5;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.14);
  --grad:linear-gradient(135deg,#8a50f5,#52a0d4 55%,#2fcdb4);
  --display:'Fredoka','Inter',sans-serif; --sans:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --nav-h:36px;   /* alto común de todos los controles */
  position:sticky; top:0; z-index:30;
  background:rgba(11,11,20,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  font-family:var(--sans); line-height:1.2; color:var(--text);
  transition:background .2s ease, box-shadow .2s ease;
}
.nav a{ color:inherit; text-decoration:none; }
.nav button{ font-family:inherit; cursor:pointer; }
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(138,80,245,.65) 30%, rgba(47,205,180,.65) 70%, transparent);
  opacity:.55; transition:opacity .2s ease;
}
.nav.scrolled{ background:rgba(11,11,20,.94); box-shadow:0 14px 34px -20px rgba(0,0,0,.9); }
.nav.scrolled::after{ opacity:1; }
.nav-in{ max-width:none; margin:0; min-height:60px; padding:0 var(--gut,clamp(14px,2.2vw,44px)); display:flex; align-items:center; gap:18px; }

/* Brand */
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-logo{ width:34px; height:34px; border-radius:11px; object-fit:cover; background:#0f0d1a; box-shadow:0 0 0 1.5px rgba(138,80,245,.55), 0 0 18px -4px rgba(138,80,245,.55); }
.brand-name{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.01em; color:var(--cream); line-height:1; }
.brand-name small{ display:block; margin-top:3px; font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:0; color:var(--dim); }

/* Links principales */
.nav-main{ display:flex; align-items:center; gap:4px; margin-left:18px; }
/* Base común de TODOS los items de la barra: Home, Products, Solada, X (mismo alto, padding, radio y hover) */
.nav-main > a, .nav-main .dd-btn, .nav-right > a:not(.nav-cta){
  display:inline-flex; align-items:center; gap:7px; height:var(--nav-h); padding:0 14px; margin:0;
  border:0; border-radius:12px; background:transparent; box-shadow:none;
  font-family:var(--sans); font-size:13px; font-weight:600; line-height:1; letter-spacing:.01em; white-space:nowrap;
  color:var(--dim); transition:color .08s, background .08s, box-shadow .08s;
}
@media(hover:hover){
  .nav-main > a:hover, .nav-main .dd-btn:hover, .nav-right > a:not(.nav-cta):hover{ color:var(--text); background:rgba(255,255,255,.07); }
}
.nav-main > a[aria-current], .nav-main .dd-btn.on, .nav-main .dd-btn[aria-expanded="true"], .nav-right > a[aria-current]{ color:var(--text); background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.nav-main > a:focus-visible, .nav-main .dd-btn:focus-visible, .nav-right > a:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.nav-main .nav-pw{ color:var(--text); font-weight:800; letter-spacing:.03em; background:linear-gradient(135deg,rgba(138,80,245,.22),rgba(47,205,180,.14)); box-shadow:inset 0 0 0 1px rgba(138,80,245,.35); }
@media(hover:hover){ .nav-main .nav-pw:hover{ background:linear-gradient(135deg,rgba(138,80,245,.34),rgba(47,205,180,.22)); } }

/* Un solo item resaltado a la vez: al pasar el mouse por otro, el item "marcado" (página actual) se atenúa */
@media(hover:hover){
  .nav-main:hover > a[aria-current]:not(:hover),
  .nav-main:hover .dd-btn.on:not(:hover):not([aria-expanded="true"]),
  .nav-right:hover > a[aria-current]:not(:hover){ color:var(--dim); background:transparent; box-shadow:none; }
}

/* Dropdown "Products" */
.nav-dd{ position:relative; }
.dd-btn{ cursor:pointer; -webkit-appearance:none; appearance:none; }
.dd-btn svg{ flex:none; opacity:.8; width:10px; height:6px; transition:transform .2s ease; } .dd-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.dd-menu{ position:absolute; top:calc(100% + 12px); left:0; z-index:40; width:min(330px,calc(100vw - 24px)); padding:8px; border-radius:18px; background:rgba(14,12,26,.97); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px -18px rgba(0,0,0,.85); opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top left; transition:opacity .16s ease, transform .16s ease, visibility 0s .16s; }
/* Puente invisible entre el botón y el menú: el puntero no "sale" del dropdown al cruzar el espacio */
.dd-menu::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav-dd.open .dd-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.nav-main .dd-menu a{ display:flex; align-items:center; gap:12px; height:auto; padding:10px 12px; border-radius:12px; color:var(--text); font-size:inherit; font-weight:inherit; }
.nav-main .dd-menu a:focus-visible{ background:rgba(255,255,255,.07); color:var(--text); }
@media(hover:hover){
  .nav-main .dd-menu a:hover{ background:rgba(255,255,255,.07); color:var(--text); }
  .nav-main .dd-menu a.nav-pw:hover{ background:linear-gradient(135deg,rgba(138,80,245,.34),rgba(47,205,180,.22)); }
}
.dd-menu b{ display:block; font-size:14px; font-weight:700; line-height:1.25; letter-spacing:0; }
.dd-menu small{ display:block; margin-top:1px; font-size:12px; font-weight:500; color:var(--dim); line-height:1.35; letter-spacing:0; }
.nav-main .dd-menu a.dd-home{ display:none; }
/* Orden visual del menú: Home (solo móvil), Trenches, PAWSBURN y PAWSWAP al final.
   Se hace con "order" para no tocar el HTML de cada página. */
.dd-menu{ display:flex; flex-direction:column; }
.nav-main .dd-menu a.nav-pw{ order:1; }

/* Lado derecho */
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav .pill.ca{ position:relative; display:inline-flex; align-items:center; gap:8px; height:var(--nav-h); padding:0 12px; margin:0 4px 0 6px; border-radius:12px; border:1px dashed var(--line-strong); background:rgba(255,255,255,.03); color:var(--soft); font-family:inherit; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; transition:border-color .15s, color .15s, background .15s; }
@media(hover:hover){ .nav .pill.ca:hover{ border-color:var(--teal); color:var(--text); background:rgba(47,205,180,.06); } }
.nav .pill.ca .lbl{ color:var(--dim); font-weight:600; } .nav .pill.ca b{ font-weight:700; color:var(--text); }
.nav .pill.ca .ca-ok{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; border-radius:inherit; background:rgba(47,205,180,.14); color:var(--teal); font-weight:800; }
.nav .pill.ca.ok{ border-color:var(--teal); } .nav .pill.ca.ok .ca-ok{ display:flex; } .nav .pill.ca.ok > :not(.ca-ok){ visibility:hidden; }
.nav .nw-btn{ height:var(--nav-h); padding-top:0; padding-bottom:0; }   /* botón de wallet.js al mismo alto */
.nav-cta{ position:relative; overflow:hidden; display:inline-flex; align-items:center; height:var(--nav-h); margin-left:6px; padding:0 18px; border-radius:100px; font-family:var(--display); font-weight:700; font-size:15px; line-height:1; white-space:nowrap; color:#07130f; background:var(--grad); box-shadow:0 8px 22px rgba(82,160,212,.28); transition:transform .15s ease, filter .15s ease; }
@media(hover:hover){ .nav-cta:hover{ transform:translateY(-1px); filter:brightness(1.08); } }
.nav-cta::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform:translateX(-130%); animation:ctaShine 4s ease-in-out infinite; }
@keyframes ctaShine{ 0%,60%{ transform:translateX(-130%); } 100%{ transform:translateX(130%); } }

/* Responsive (mismos cortes en todas las páginas) */
@media(max-width:900px){
  .nav-in{ gap:12px; }
  .nav-right > a:not(.nav-cta){ display:none; }
  .nav .pill.ca .lbl{ display:none; }
}
@media(max-width:720px){ .nav .pill.ca{ display:none; } }
@media(max-width:640px){
  .nav-main{ position:static; margin-left:4px; } .nav-dd{ position:static; } .nav-main .nav-home{ display:none; }
  .dd-menu{ left:12px; right:12px; top:calc(100% + 8px); width:auto; }
  .nav-main .dd-menu a.dd-home{ display:flex; }
}
@media(max-width:480px){ .brand-name{ display:none; } }
@media(prefers-reduced-motion:reduce){ .dd-menu, .dd-btn svg{ transition:none; } .nav-cta::after{ animation:none; display:none; } }