/* ==========================================================================
   XJ SCRIPTS — tokens, base y limpieza del tema
   Todo el diseno de la tienda vive en los archivos xj-*.css.
   No metas reglas nuevas en generic.css: se pisan entre ellas.
   ========================================================================== */

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

:root{
  /* marca */
  --xj-bg:        #030914;
  --xj-bg-2:      #05101f;
  --xj-panel:     #081426;
  --xj-panel-2:   #0b1b30;
  --xj-line:      #1a3455;
  --xj-line-soft: rgba(26,52,85,.55);
  --xj-blue:      #078cff;
  --xj-cyan:      #00c9ff;
  --xj-text:      #f5f9ff;
  --xj-dim:       #96abc6;
  --xj-dim-2:     #6b82a0;

  /* efectos */
  --xj-glow:      0 0 26px rgba(7,140,255,.45);
  --xj-glow-soft: 0 0 18px rgba(0,201,255,.22);
  --xj-shadow:    0 18px 48px rgba(0,0,0,.55);

  /* medidas */
  --xj-radius:    14px;
  --xj-radius-sm: 10px;
  --xj-max:       1280px;
  --xj-gutter:    22px;

  /* tipografia */
  --xj-head: 'Rajdhani', 'Inter', system-ui, sans-serif;
  --xj-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* curvas */
  --xj-ease: cubic-bezier(.22,.61,.36,1);
}

/* --- base ---------------------------------------------------------------- */

html{ scroll-behavior:smooth; }

body{
  background:var(--xj-bg) !important;
  color:var(--xj-text) !important;
  font-family:var(--xj-body) !important;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;       /* clip y no hidden: hidden rompe el sticky de la cabecera */
}

/* El tema base pinta una imagen de fondo con body::before. La apagamos y
   ponemos nuestro propio ambiente: rejilla tenue + dos focos azules. */
body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(7,140,255,.16), transparent 70%),
    radial-gradient(760px 480px at 8% 4%,  rgba(0,201,255,.10), transparent 72%),
    linear-gradient(180deg, var(--xj-bg-2) 0%, var(--xj-bg) 60%) !important;
  mask-image:none !important;
  z-index:-2 !important;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(26,52,85,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,52,85,.20) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1100px 700px at 50% 0%, #000 0%, transparent 78%);
  z-index:-1;
  pointer-events:none;
}

.site{ position:relative; z-index:1; }

/* El contenedor del tema no debe limitar nuestras secciones a pantalla
   completa; cada bloque XJ se centra solo con --xj-max. */
.site-content{
  max-width:var(--xj-max) !important;
  margin:0 auto !important;
  padding:0 var(--xj-gutter) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Barra lateral de modulos del tema: fuera de la portada y de categorias.
   Si algun dia quieres los modulos de Tebex, quita esta regla. */
.store-sidebar{ display:none !important; }
.site-content-widgets{ display:block !important; }

h1,h2,h3,h4,.xj-head{
  font-family:var(--xj-head);
  letter-spacing:.01em;
  color:var(--xj-text);
}

a{ color:var(--xj-cyan); text-decoration:none; }
a:hover{ color:var(--xj-text); }

::selection{ background:rgba(7,140,255,.35); color:#fff; }

/* --- utilidades ---------------------------------------------------------- */

.xj-wrap{
  max-width:var(--xj-max);
  margin:0 auto;
  padding:0 var(--xj-gutter);
}

.xj-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--xj-head);
  font-size:13px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--xj-cyan);
}
.xj-eyebrow::before{
  content:""; width:26px; height:2px;
  background:linear-gradient(90deg, var(--xj-blue), transparent);
}

.xj-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--xj-cyan);
  box-shadow:0 0 10px var(--xj-cyan);
  animation:xj-pulse 2.2s var(--xj-ease) infinite;
}
@keyframes xj-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.45; transform:scale(.78); }
}

/* --- botones ------------------------------------------------------------- */

.xj-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px;
  font-family:var(--xj-head);
  font-size:15px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  border-radius:var(--xj-radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s var(--xj-ease), box-shadow .18s var(--xj-ease),
             background .18s var(--xj-ease), border-color .18s var(--xj-ease);
}
.xj-btn:hover{ transform:translateY(-2px); }

.xj-btn--primary{
  background:linear-gradient(135deg, var(--xj-blue), var(--xj-cyan));
  color:#021022;
  box-shadow:var(--xj-glow);
}
.xj-btn--primary:hover{ color:#021022; box-shadow:0 0 34px rgba(0,201,255,.6); }

.xj-btn--ghost{
  background:rgba(8,20,38,.72);
  border-color:var(--xj-line);
  color:var(--xj-text);
}
.xj-btn--ghost:hover{
  border-color:var(--xj-blue);
  box-shadow:var(--xj-glow-soft);
  color:var(--xj-text);
}

/* Botones heredados del tema (checkout, popups) con la piel XJ ------------- */

.btn-primary{
  background:linear-gradient(135deg, var(--xj-blue), var(--xj-cyan)) !important;
  color:#021022 !important;
  border:0 !important;
  border-radius:var(--xj-radius-sm) !important;
  font-weight:700 !important;
}
.btn-secondary,
.btn-tertiary{
  background:rgba(8,20,38,.8) !important;
  color:var(--xj-text) !important;
  border:1px solid var(--xj-line) !important;
  border-radius:var(--xj-radius-sm) !important;
}

/* --- accesibilidad ------------------------------------------------------- */

:focus-visible{
  outline:2px solid var(--xj-cyan);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* El tema monta .site como rejilla con los hijos centrados y encogidos.
   Nuestras secciones se centran solas con --xj-max, asi que las dejamos
   ocupar el ancho completo. */
.site{
  display:block !important;
  justify-items:stretch !important;
}
.site > *{ width:100% !important; }