/* ══════════════════════════════════════════════════
   RESET + TOKENS
══════════════════════════════════════════════════ */
#gxn-root,#gxn-root *,#gxn-root *::before,#gxn-root *::after{
  box-sizing:border-box;margin:0;padding:0;
}
#gxn-root a{text-decoration:none;color:inherit}
#gxn-root img{display:block}

#gxn-root{
  --n9:  #050d22;
  --n8:  #080f28;
  --n7:  #0d1535;
  --n6:  #141e45;
  --nl:  #1e2d5a;
  --or:  #f37121;
  --orb: #ff8a3d;
  --cy:  #3fc5d6;
  --bl:  #1e6cf0;
  --ink: #e8ecf7;
  --i2:  #b6c0dd;
  --i3:  #6e7a9e;

  background:var(--n8);
  width:100%;overflow-x:hidden;
  font-family:'Inter','Rajdhani',sans-serif;
  color:var(--ink);
}

/* ── WRAPPER ── */
#gxn-root .gxn-w{
  max-width:860px;
  margin:0 auto;
  padding:0 clamp(16px,3vw,40px);
}

/* ══════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════ */
#gxn-root .gxn-header{
  padding:56px 0 40px;
  border-bottom:1px solid var(--nl);
  margin-bottom:64px;
}
#gxn-root .gxn-header-inner{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:28px;
}
.gxn-title{
  font-family:'Orbitron',sans-serif;font-weight:800;
  font-size:clamp(20px,3.5vw,34px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);display:flex;align-items:center;gap:14px;
}
.gxn-title::before{content:'';width:6px;height:32px;background:var(--or);flex-shrink:0}
.gxn-count{
  font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;
  color:var(--i3);letter-spacing:.08em;
}

/* Filtros */
.gxn-filters{
  display:flex;flex-wrap:wrap;gap:8px;
}
.gxn-filter{
  background:none;border:1px solid var(--nl);color:var(--i2);
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:5px 14px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
  transition:background .18s,color .18s,border-color .18s;
}
.gxn-filter:hover,.gxn-filter.active{background:var(--or);border-color:var(--or);color:#fff}

/* ══════════════════════════════════════════════════
   ARTÍCULO (una fila = un artículo completo)
══════════════════════════════════════════════════ */
.gxn-article{
  border-bottom:1px solid var(--nl);
  padding:80px 0 88px;
  scroll-margin-top:60px;
}

/* Meta superior */
#gxn-root .gxn-art-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:16px;
}
.gxn-art-cat{
  font-family:'Rajdhani',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--or);padding:3px 10px;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
}
.gxn-art-date{
  font-family:'Rajdhani',sans-serif;font-size:12px;color:var(--i3);letter-spacing:.08em;
}

/* Título */
#gxn-root .gxn-art-title{
  font-family:'Rajdhani',sans-serif;font-weight:800;
  font-size:clamp(22px,3.5vw,36px);line-height:1.1;
  text-transform:uppercase;color:#fff;
  margin-bottom:36px;
}

/* Imagen hero */
#gxn-root .gxn-art-img{
  position:relative;width:100%;
  aspect-ratio:16/8;overflow:hidden;
  background:var(--n6);margin-bottom:40px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.gxn-art-img::before{
  content:'';position:absolute;inset:0;
  background-image:var(--bg);background-size:cover;background-position:center;
  filter:blur(24px) brightness(.45) saturate(1.3);transform:scale(1.15);z-index:0;
}
.gxn-art-img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;z-index:1;
}
.gxn-art-img-ph{position:absolute;inset:0;background:linear-gradient(135deg,var(--n6),var(--n8) 60%,var(--bl))}

/* Contenido */
#gxn-root .gxn-art-content{
  font-size:15.5px;line-height:1.9;color:var(--i2);
  margin-bottom:48px;
}
#gxn-root .gxn-art-content p{margin-bottom:1.5em}
#gxn-root .gxn-art-content p:last-child{margin-bottom:0}
#gxn-root .gxn-art-content h2,
#gxn-root .gxn-art-content h3{
  font-family:'Rajdhani',sans-serif;font-weight:800;text-transform:uppercase;
  color:var(--ink);margin:2.4em 0 1em;font-size:1.2em;letter-spacing:.05em;
}
.gxn-art-content strong{color:var(--ink);font-weight:700}
.gxn-art-content a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.gxn-art-content a:hover{color:var(--orb)}
.gxn-art-content ul,.gxn-art-content ol{padding-left:1.4em;margin-bottom:1em}
.gxn-art-content li{margin-bottom:.4em}
.gxn-art-content img{max-width:100%;height:auto;margin:1.2em auto;border-radius:2px}
.gxn-art-content blockquote{
  border-left:3px solid var(--or);
  padding:.6em 1.2em;margin:1.2em 0;
  background:var(--n7);color:var(--i2);font-style:italic;
}

/* Footer del artículo */
#gxn-root .gxn-art-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--nl);
  margin-top:8px;
}
.gxn-art-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Rajdhani',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--or);
  padding:9px 20px;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:background .18s;
}
.gxn-art-link:hover{background:var(--orb);color:#fff}
.gxn-art-link svg{width:12px;height:12px}
.gxn-art-share{
  font-family:'Rajdhani',sans-serif;font-size:11px;color:var(--i3);
  letter-spacing:.1em;text-transform:uppercase;
}

/* ══════════════════════════════════════════════════
   SKELETON
══════════════════════════════════════════════════ */
.gxn-sk-article{
  padding:56px 0;border-bottom:1px solid var(--nl);
  display:flex;flex-direction:column;gap:16px;
}
.gxn-sk-line{
  background:var(--n7);border-radius:2px;position:relative;overflow:hidden;
}
.gxn-sk-line::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  background-size:300% 100%;animation:gxnshim 1.6s infinite;
}
@keyframes gxnshim{from{background-position:300% 0}to{background-position:-300% 0}}

/* ══════════════════════════════════════════════════
   LOADER / END
══════════════════════════════════════════════════ */
.gxn-loader{
  display:flex;align-items:center;justify-content:center;
  padding:48px 0;gap:12px;
  font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--i3);
}
.gxn-spinner{
  width:22px;height:22px;border:2px solid var(--nl);
  border-top-color:var(--or);border-radius:50%;
  animation:gxnspin .7s linear infinite;flex-shrink:0;
}
@keyframes gxnspin{to{transform:rotate(360deg)}}
.gxn-end{
  text-align:center;padding:56px 0;
  font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--nl);
}

/* ══════════════════════════════════════════════════
   URL INDICATOR (barra superior fija)
══════════════════════════════════════════════════ */
.gxn-progress-bar{
  position:fixed;top:0;left:0;height:2px;
  background:var(--or);width:0%;
  transition:width .1s linear;
  z-index:99999;pointer-events:none;
}

/* FADE IN */
.gxnfade{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
.gxnfade.vis{opacity:1;transform:none}

@media(max-width:600px){
  .gxn-article{padding:36px 0}
  .gxn-art-img{aspect-ratio:16/9}
  .gxn-art-content{font-size:14px}
}