/* ==========================================================================
   XJ SCRIPTS — barra de promociones, cabecera flotante y menu movil
   ========================================================================== */

/* --- barra de promociones ------------------------------------------------ */

.xj-announce{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg, #04101f, #072441 48%, #04101f);
  border-bottom:1px solid var(--xj-line-soft);
  padding:9px 0;
  z-index:60;
}
.xj-announce::before,
.xj-announce::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2;
  pointer-events:none;
}
.xj-announce::before{ left:0;  background:linear-gradient(90deg, var(--xj-bg), transparent); }
.xj-announce::after { right:0; background:linear-gradient(270deg, var(--xj-bg), transparent); }

.xj-announce__track{
  display:flex; align-items:center; gap:18px;
  width:max-content;
  animation:xj-marquee 46s linear infinite;
}
.xj-announce:hover .xj-announce__track{ animation-play-state:paused; }

@keyframes xj-marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

.xj-announce__item{
  font-family:var(--xj-head);
  font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--xj-dim);
  white-space:nowrap;
}
.xj-announce__item b{ color:var(--xj-cyan); font-weight:700; }

.xj-announce__sep{
  width:5px; height:5px; border-radius:50%;
  background:var(--xj-blue);
  box-shadow:0 0 8px var(--xj-blue);
  flex:none;
}

/* --- cabecera ------------------------------------------------------------ */

.xj-header{
  position:sticky; top:0; z-index:50;
  padding:16px 0;
  transition:padding .25s var(--xj-ease), background .25s var(--xj-ease),
             box-shadow .25s var(--xj-ease);
}
.xj-header.is-stuck{
  padding:9px 0;
  background:rgba(3,9,20,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  border-bottom:1px solid var(--xj-line-soft);
}

.xj-header__inner{
  max-width:var(--xj-max);
  margin:0 auto;
  padding:0 var(--xj-gutter);
  display:flex; align-items:center; gap:18px;
}

/* marca: emblema + texto, como en el diseno de Xin */
.xj-brand{
  display:inline-flex; align-items:center; gap:12px;
  flex:none;
}
.xj-brand__img{
  height:46px; width:auto;
  filter:drop-shadow(0 0 14px rgba(7,140,255,.55));
  transition:transform .3s var(--xj-ease);
}
.xj-brand:hover .xj-brand__img{ transform:rotate(-6deg) scale(1.05); }

.xj-brand__txt{
  display:flex; flex-direction:column; line-height:.94;
  font-family:var(--xj-head);
}
.xj-brand__txt strong{
  font-size:26px; font-weight:700; letter-spacing:.04em;
  background:linear-gradient(135deg, var(--xj-text), var(--xj-cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.xj-brand__txt small{
  font-size:11px; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--xj-dim);
}

/* navegacion flotante */
.xj-nav{
  display:flex; align-items:center; gap:4px;
  margin:0 auto;
  padding:6px;
  border-radius:999px;
  background:rgba(8,20,38,.62);
  border:1px solid var(--xj-line-soft);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 26px rgba(0,0,0,.4);
}

.xj-nav__link{
  position:relative;
  padding:10px 16px;
  border-radius:999px;
  font-family:var(--xj-head);
  font-size:14px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--xj-dim);
  white-space:nowrap;
  transition:color .2s var(--xj-ease), background .2s var(--xj-ease);
}
.xj-nav__link:hover{ color:var(--xj-text); background:rgba(7,140,255,.12); }

.xj-nav__link.is-active{
  color:#021022;
  background:linear-gradient(135deg, var(--xj-blue), var(--xj-cyan));
  box-shadow:var(--xj-glow-soft);
}

/* acciones de la derecha */
.xj-actions{ display:flex; align-items:center; gap:9px; flex:none; }

.xj-pill{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 16px;
  border-radius:999px;
  border:1px solid var(--xj-line);
  background:rgba(8,20,38,.72);
  color:var(--xj-text);
  font-family:var(--xj-head);
  font-size:14px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; white-space:nowrap;
  cursor:pointer;
  transition:border-color .2s var(--xj-ease), box-shadow .2s var(--xj-ease),
             background .2s var(--xj-ease), color .2s var(--xj-ease);
}
.xj-pill:hover{ border-color:var(--xj-blue); box-shadow:var(--xj-glow-soft); color:var(--xj-text); }

.xj-pill--login{
  background:linear-gradient(135deg, rgba(7,140,255,.18), rgba(0,201,255,.12));
  border-color:rgba(7,140,255,.5);
}

.xj-pill--cart{ position:relative; padding:0 14px; }
.xj-cart-ico{
  width:18px; height:18px; flex:none;
  border:2px solid currentColor;
  border-radius:0 0 5px 5px;
  position:relative;
}
.xj-cart-ico::before{
  content:""; position:absolute; left:50%; top:-8px;
  width:10px; height:10px; margin-left:-5px;
  border:2px solid currentColor; border-bottom:0;
  border-radius:6px 6px 0 0;
}
.xj-cart-num{
  min-width:21px; height:21px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg, var(--xj-blue), var(--xj-cyan));
  color:#021022; font-size:12px; font-weight:700;
}
.xj-pill--cart[data-empty="1"] .xj-cart-num{
  background:rgba(26,52,85,.9); color:var(--xj-dim);
}

/* selector de moneda */
.xj-currency{ position:relative; }
.xj-caret{
  width:0; height:0; flex:none;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .2s var(--xj-ease);
}
.xj-currency.is-open .xj-caret{ transform:rotate(180deg); }

.xj-currency__menu{
  position:absolute; top:calc(100% + 9px); right:0;
  min-width:116px; max-height:280px; overflow-y:auto;
  margin:0; padding:6px; list-style:none;
  border-radius:var(--xj-radius-sm);
  background:rgba(5,16,31,.97);
  border:1px solid var(--xj-line);
  box-shadow:var(--xj-shadow);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s var(--xj-ease), transform .18s var(--xj-ease),
             visibility .18s var(--xj-ease);
  z-index:70;
}
.xj-currency.is-open .xj-currency__menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.xj-currency__menu a{
  display:block; padding:9px 12px;
  border-radius:7px;
  font-family:var(--xj-head);
  font-size:14px; font-weight:600; letter-spacing:.08em;
  color:var(--xj-dim);
}
.xj-currency__menu a:hover{ background:rgba(7,140,255,.14); color:var(--xj-text); }
.xj-currency__menu li.is-active a{ color:var(--xj-cyan); background:rgba(0,201,255,.10); }

/* boton hamburguesa */
.xj-burger{
  display:none;
  width:42px; height:42px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:var(--xj-radius-sm);
  border:1px solid var(--xj-line);
  background:rgba(8,20,38,.72);
  cursor:pointer;
}
.xj-burger span{
  display:block; width:19px; height:2px; border-radius:2px;
  background:var(--xj-text);
  transition:transform .22s var(--xj-ease), opacity .22s var(--xj-ease);
}
body.xj-menu-open .xj-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.xj-menu-open .xj-burger span:nth-child(2){ opacity:0; }
body.xj-menu-open .xj-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --- menu movil ---------------------------------------------------------- */

.xj-drawer{
  position:fixed; inset:0;
  z-index:90;
  visibility:hidden;
}
body.xj-menu-open .xj-drawer{ visibility:visible; }

.xj-drawer__backdrop{
  position:absolute; inset:0;
  background:rgba(2,6,14,.74);
  backdrop-filter:blur(5px);
  opacity:0;
  transition:opacity .28s var(--xj-ease);
}
body.xj-menu-open .xj-drawer__backdrop{ opacity:1; }

.xj-drawer__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(86vw, 330px);
  display:flex; flex-direction:column; gap:22px;
  padding:26px 22px;
  background:linear-gradient(180deg, var(--xj-panel-2), var(--xj-bg));
  border-left:1px solid var(--xj-line);
  box-shadow:-20px 0 60px rgba(0,0,0,.6);
  transform:translateX(100%);
  transition:transform .32s var(--xj-ease);
  overflow-y:auto;
}
body.xj-menu-open .xj-drawer__panel{ transform:translateX(0); }

.xj-drawer__links{ display:flex; flex-direction:column; gap:4px; }
.xj-drawer__links a{
  padding:13px 14px;
  border-radius:var(--xj-radius-sm);
  border:1px solid transparent;
  font-family:var(--xj-head);
  font-size:16px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--xj-dim);
}
.xj-drawer__links a:hover,
.xj-drawer__links a.is-active{
  color:var(--xj-text);
  background:rgba(7,140,255,.12);
  border-color:var(--xj-line-soft);
}

.xj-drawer__label{
  font-family:var(--xj-head);
  font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--xj-dim-2);
}
.xj-drawer__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.xj-drawer__chips a{
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--xj-line);
  font-size:13px; font-weight:600;
  color:var(--xj-dim);
}
.xj-drawer__chips a.is-active{
  color:#021022;
  background:linear-gradient(135deg, var(--xj-blue), var(--xj-cyan));
  border-color:transparent;
}

/* --- adaptacion ---------------------------------------------------------- */

@media (max-width:1180px){
  .xj-nav__link{ padding:9px 12px; font-size:13px; }
  .xj-brand__txt strong{ font-size:23px; }
}

@media (max-width:960px){
  .xj-nav{ display:none; }
  .xj-burger{ display:flex; }
  .xj-pill--login span{ display:none; }
  .xj-header__inner{ gap:12px; }
  .xj-brand{ margin-right:auto; }
}

@media (max-width:520px){
  .xj-brand__img{ height:38px; }
  .xj-brand__txt strong{ font-size:20px; }
  .xj-brand__txt small{ letter-spacing:.3em; font-size:10px; }
  .xj-currency{ display:none; }
}

/* ==========================================================================
   Cabecera en movimiento
   Al bajar se encoge y se convierte en una pastilla flotante; si sigues
   bajando se esconde, y en cuanto subes vuelve a aparecer.
   Las clases las pone xj-ui.js.
   ========================================================================== */

.xj-header{
  will-change:transform;
  transition:transform .38s var(--xj-ease),
             padding .28s var(--xj-ease),
             background .28s var(--xj-ease),
             box-shadow .28s var(--xj-ease);
}

/* escondida */
.xj-header.is-hidden{ transform:translateY(-130%); }

/* pastilla flotante: anulamos la barra solida del estado anterior */
.xj-header.is-stuck{
  padding:10px 0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

.xj-header.is-stuck .xj-header__inner{
  max-width:min(var(--xj-max), calc(100% - 36px));
  padding:8px 12px 8px 18px;
  border-radius:999px;
  background:rgba(4,12,24,.84);
  border:1px solid var(--xj-line-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transition:padding .28s var(--xj-ease), background .28s var(--xj-ease);
}

/* dentro de la pastilla el menu ya no necesita su propia pastilla */
.xj-header.is-stuck .xj-nav{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* la marca encoge para ganar altura */
.xj-header.is-stuck .xj-brand__img{ height:36px; }
.xj-header.is-stuck .xj-brand__txt strong{ font-size:21px; }
.xj-header.is-stuck .xj-brand__txt small{ font-size:9.5px; letter-spacing:.34em; }
.xj-header.is-stuck .xj-pill{ height:38px; }
.xj-header.is-stuck .xj-nav__link{ padding:9px 14px; }

/* con el menu movil abierto no se esconde nunca */
body.xj-menu-open .xj-header{ transform:none !important; }


/* icono dentro del boton del buscador */
.xj-search__btn .xj-search__ico{ position:relative; }

/* iconos de los botones de la ficha (video, documentacion, discord) */
.xj-pdp__actions > a .xj-action__ico{
  width:34px; height:34px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid var(--xj-line);
  background:rgba(7,140,255,.14);
  color:var(--xj-cyan);
}
.xj-pdp__actions > a:hover .xj-action__ico{
  background:rgba(7,140,255,.26);
  color:var(--xj-text);
}