/* ==========================================================================
   XJ SCRIPTS — portada
   ========================================================================== */

.xj-hero{
  position:relative;
  max-width:var(--xj-max);
  margin:34px auto 0;
  padding:0 var(--xj-gutter);
}

.xj-hero__stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;
  gap:40px;
  min-height:520px;
  padding:58px 52px 92px;
  border-radius:var(--xj-radius);
  border:1px solid var(--xj-line);
  background:
    radial-gradient(760px 420px at 82% 24%, rgba(7,140,255,.20), transparent 68%),
    radial-gradient(520px 340px at 4% 90%,  rgba(0,201,255,.12), transparent 72%),
    linear-gradient(145deg, var(--xj-panel) 0%, #040d1a 100%);
  overflow:hidden;
  box-shadow:var(--xj-shadow);
}

/* lineas diagonales de fondo */
.xj-hero__stage::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    115deg,
    transparent 0 54px,
    rgba(7,140,255,.055) 54px 55px
  );
  pointer-events:none;
}

/* barrido de luz lento */
.xj-hero__stage::after{
  content:"";
  position:absolute; top:-60%; left:-30%;
  width:48%; height:220%;
  background:linear-gradient(90deg, transparent, rgba(0,201,255,.10), transparent);
  transform:rotate(16deg);
  animation:xj-sweep 9s var(--xj-ease) infinite;
  pointer-events:none;
}
@keyframes xj-sweep{
  0%   { transform:translateX(-30%) rotate(16deg); opacity:0; }
  18%  { opacity:1; }
  82%  { opacity:1; }
  100% { transform:translateX(320%) rotate(16deg); opacity:0; }
}

.xj-hero__copy{ position:relative; z-index:2; }

.xj-hero__badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px;
  margin-bottom:22px;
  border-radius:999px;
  border:1px solid rgba(7,140,255,.42);
  background:rgba(7,140,255,.10);
  font-family:var(--xj-head);
  font-size:12.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--xj-cyan);
}

.xj-hero__title{
  margin:0 0 20px;
  font-family:var(--xj-head);
  font-size:clamp(42px, 5.6vw, 76px);
  font-weight:700;
  line-height:.96;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.xj-hero__accent{
  display:block;
  background:linear-gradient(100deg, var(--xj-blue), var(--xj-cyan) 55%, #9fe6ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 28px rgba(7,140,255,.4));
}

.xj-hero__text{
  max-width:46ch;
  margin:0 0 30px;
  font-size:16.5px;
  line-height:1.68;
  color:var(--xj-dim);
}

.xj-hero__cta{ display:flex; flex-wrap:wrap; gap:13px; }

/* --- arte de la derecha: emblema sobre podio ----------------------------- */

.xj-hero__art{
  position:relative; z-index:2;
  display:grid; place-items:center;
  min-height:340px;
}

.xj-podium{
  position:relative;
  width:min(100%, 400px);
  aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%, rgba(7,140,255,.26) 0%, rgba(4,13,26,.2) 62%, transparent 74%);
}
.xj-podium img{
  width:70%; height:auto;
  filter:drop-shadow(0 0 40px rgba(7,140,255,.65));
  animation:xj-float 6.5s ease-in-out infinite;
}
@keyframes xj-float{
  0%,100%{ transform:translateY(-8px); }
  50%    { transform:translateY(8px); }
}

/* anillos */
.xj-podium__ring{
  position:absolute; inset:6%;
  border-radius:50%;
  border:1px solid rgba(7,140,255,.34);
  animation:xj-spin 26s linear infinite;
}
.xj-podium__ring:nth-of-type(2){
  inset:-5%;
  border-style:dashed;
  border-color:rgba(0,201,255,.22);
  animation-duration:40s;
  animation-direction:reverse;
}

@keyframes xj-spin{ to{ transform:rotate(360deg); } }

/* fichas flotantes */
.xj-chip{
  position:absolute;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px;
  border-radius:999px;
  background:rgba(5,16,31,.9);
  border:1px solid var(--xj-line);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:var(--xj-head);
  font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--xj-text);
  white-space:nowrap;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  animation:xj-float 7.5s ease-in-out infinite;
}
.xj-chip i{
  width:6px; height:6px; border-radius:50%;
  background:var(--xj-cyan);
  box-shadow:0 0 9px var(--xj-cyan);
}
.xj-chip--1{ top:4%;   left:-6%;  animation-delay:-.4s; }
.xj-chip--2{ top:26%;  right:-9%; animation-delay:-1.6s; }
.xj-chip--3{ bottom:21%; left:-11%; animation-delay:-2.8s; }
.xj-chip--4{ bottom:2%; right:-3%; animation-delay:-3.9s; }

/* --- tira de ventajas, montada sobre el hero ----------------------------- */

.xj-strip{
  position:relative; z-index:3;
  max-width:calc(var(--xj-max) - 90px);
  margin:-54px auto 0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px;
  border-radius:var(--xj-radius);
  border:1px solid var(--xj-line);
  background:var(--xj-line-soft);
  overflow:hidden;
  box-shadow:var(--xj-shadow);
}

.xj-strip__item{
  display:flex; flex-direction:column; gap:5px;
  padding:22px 24px;
  background:rgba(6,15,28,.96);
  transition:background .22s var(--xj-ease);
}
.xj-strip__item:hover{ background:rgba(9,25,46,.98); }

.xj-strip__k{
  font-family:var(--xj-head);
  font-size:21px; font-weight:700;
  letter-spacing:.04em;
  color:var(--xj-cyan);
}
.xj-strip__v{
  font-size:13.5px;
  line-height:1.5;
  color:var(--xj-dim);
}

/* --- secciones ----------------------------------------------------------- */

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

.xj-section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
  margin-bottom:30px;
}
.xj-section__title{
  margin:8px 0 0;
  font-size:clamp(28px, 3.4vw, 42px);
  font-weight:700;
  line-height:1.04;
  text-transform:uppercase;
}
.xj-section__sub{
  max-width:52ch;
  margin:9px 0 0;
  font-size:15px; line-height:1.65;
  color:var(--xj-dim);
}

/* mosaico de categorias */
.xj-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:16px;
}

.xj-cat{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:168px;
  padding:22px;
  border-radius:var(--xj-radius);
  border:1px solid var(--xj-line);
  background:linear-gradient(160deg, var(--xj-panel), #040d1a);
  overflow:hidden;
  transition:transform .24s var(--xj-ease), border-color .24s var(--xj-ease),
             box-shadow .24s var(--xj-ease);
}
.xj-cat::before{
  content:"";
  position:absolute; top:-40%; right:-25%;
  width:70%; height:180%;
  background:radial-gradient(circle, rgba(7,140,255,.26), transparent 66%);
  transition:opacity .24s var(--xj-ease);
  opacity:.65;
}
.xj-cat:hover{
  transform:translateY(-5px);
  border-color:rgba(7,140,255,.6);
  box-shadow:var(--xj-glow);
}
.xj-cat:hover::before{ opacity:1; }

.xj-cat__name{
  position:relative;
  font-family:var(--xj-head);
  font-size:21px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--xj-text);
}
.xj-cat__go{
  position:relative;
  margin-top:7px;
  font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--xj-cyan);
}

/* bloque de contenido libre (lo que escribes en la Homepage de Tebex) */
.xj-free{
  max-width:var(--xj-max);
  margin:0 auto;
  padding:40px var(--xj-gutter) 0;
}
.xj-free h1,.xj-free h2,.xj-free h3{ text-transform:uppercase; }
.xj-free p{ color:var(--xj-dim); line-height:1.7; }

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

@media (max-width:1040px){
  .xj-hero__stage{
    grid-template-columns:1fr;
    padding:44px 30px 86px;
    text-align:center;
  }
  .xj-hero__text{ margin-left:auto; margin-right:auto; }
  .xj-hero__cta{ justify-content:center; }
  .xj-hero__art{ order:-1; min-height:260px; }
  .xj-podium{ width:min(74%, 280px); }
  .xj-chip--1,.xj-chip--3{ left:-2%; }
  .xj-chip--2,.xj-chip--4{ right:-2%; }
  .xj-strip{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px){
  .xj-hero{ margin-top:20px; }
  .xj-hero__stage{ padding:34px 20px 74px; min-height:0; }
  .xj-chip{ display:none; }
  .xj-strip{
    grid-template-columns:1fr;
    margin:-40px var(--xj-gutter) 0;
    max-width:none;
  }
  .xj-section{ padding-top:54px; }
}