/* ═══════════════════════════════════════════════════════════════
   HERO REDESIGN — Full-width 3D + bloques negros + texto overlay
   ═══════════════════════════════════════════════════════════════ */

/* — Hero ocupa todo el viewport —
   Fondo TRANSPARENTE: la zona transparente del PNG fondoindex.png muestra
   el body (mismo color que la siguiente sección), creando una transición
   seamless sin "borde" ni fondo artificial. */
.hero-h{
  position:relative;
  width:100%;
  height:calc(100vh - 60px);
  min-height:560px;
  background:transparent;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}

/* — Capa 1: imagen de fondo (la revelación) —
   object-position:top mantiene el cielo/paisaje arriba y recorta la zona
   transparente inferior del PNG fuera del viewport del hero. */
.hero-h-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  z-index:0;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  /* Bordes difuminados al color del fondo */
  mask-image:radial-gradient(ellipse 95% 100% at 50% 50%, #000 55%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 95% 100% at 50% 50%, #000 55%, transparent 100%);
}

/* — Capa 2: máscara oscura (se carva al minar) — */
.hero-h-mask{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}
/* — Capa 2b: partículas de rotura — */
.hero-h-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
}

/* — Capa 3: canvas del player (transparent, solo player) — */
.skin3d-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
}
#skin3d-canvas{
  display:block;
  width:100%;
  height:100%;
}
.skin3d-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.5);
  font-family:'Syne',sans-serif;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  z-index:1;
  pointer-events:none;
}
.skin3d-stage.loaded .skin3d-loading{ display:none; }

/* — Vignette para legibilidad del texto a la izquierda — */
.hero-h-vignette{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(0,0,0,.6), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 18%, transparent 78%, rgba(0,0,0,.6) 100%);
}

/* — Cursor spotlight — */
#hero-spotlight{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(168,85,247,.16), transparent 60%);
  mix-blend-mode:plus-lighter;
}

/* — Overlay: contenido sobreimpuesto — */
.hero-h-overlay{
  position:relative;
  z-index:6;
  width:100%;
  height:100%;
  max-width:1480px;
  margin:0 auto;
  padding:2rem 3rem 4rem;
  display:grid;
  grid-template-rows:auto 1fr;
}

/* Top bar (badge IP) */
.hero-h-top{
  align-self:start;
  justify-self:start;
}
.hero-h-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem 1rem;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.12);
  border-radius:99px;
  font-family:'Syne',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.hero-h-eyebrow:hover{
  border-color:rgba(168,85,247,.5);
  background:rgba(168,85,247,.15);
  box-shadow:0 0 22px rgba(168,85,247,.25);
}
.hero-h-eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:hhPulse 2s infinite;
}
@keyframes hhPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* — Texto a la IZQUIERDA (sobre la zona de bloques negros) — */
.hero-h-right-text{
  align-self:center;
  justify-self:start;
  max-width:520px;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  text-align:left;
  padding:1rem 0;
  opacity:0;
  transform:translateX(-20px);
}
.hero-h-right-text.in{
  opacity:1; transform:none;
  transition:opacity .9s .15s cubic-bezier(.2,.8,.2,1), transform .9s .15s cubic-bezier(.2,.8,.2,1);
}

/* Título con highlight blocks (estilo referencia mineshoku) */
.hero-h-title{
  font-family:'MacMinecraft',monospace;
  font-weight:700;
  font-size:clamp(2.2rem, 4.6vw, 4.2rem);
  line-height:1.05;
  letter-spacing:-.005em;
  margin:0;
  text-transform:uppercase;
  color:#fff;
}
.hero-h-title .hl{
  display:inline-block;
  padding:.05em .35em;
  background:linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color:#fff;
  border-radius:8px;
  margin-right:.15em;
  box-shadow:0 12px 36px -8px rgba(168,85,247,.7), inset 0 1px 0 rgba(255,255,255,.2);
}
.hero-h-title em{
  font-style:normal;
  color:#c084fc;
  text-shadow:0 0 24px rgba(168,85,247,.5);
}

/* — Logo Nothion (sustituye al título) —
   El logo es una imagen rasterizada de alta resolución, NO pixel-art,
   así que dejamos el sampling por defecto (smooth) para que se vea
   nítido sin "bordes" raros. */
.hero-h-logo{
  display:block;
  width:100%;
  max-width:340px;
  height:auto;
  margin:0 0 .2rem;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  image-rendering:auto;
  filter:drop-shadow(0 14px 28px rgba(168,85,247,.4)) drop-shadow(0 4px 10px rgba(0,0,0,.5));
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES ESTILO MINECRAFT.CSS — pixel borders, sharp corners
   Mismos colores morados, solo aplicado a CTAs del hero.
   ═══════════════════════════════════════════════════════════════ */
.hero-h-cta--mc{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  margin-top:.2rem;
}
.hero-h-cta--mc .mc-btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.6rem;
  font-family:'MacMinecraft', 'Minecraft', monospace;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
  cursor:pointer;
  border:3px solid #0a0612;
  border-radius:0;                       /* esquinas pixel */
  image-rendering:pixelated;
  -webkit-font-smoothing:none;
  font-smooth:never;
  position:relative;
  transition:transform .08s ease, filter .15s ease, background-color .15s ease;
  outline:none;
}
.hero-h-cta--mc .mc-btn:focus-visible{
  outline:2px solid #c084fc;
  outline-offset:2px;
}

/* Primario morado vivo (Discord) */
.hero-h-cta--mc .mc-btn--primary{
  background:#7c3aed;
  box-shadow:
    inset  3px  3px 0 rgba(255,255,255,.30),
    inset -3px -3px 0 rgba(0,0,0,.40),
    0 5px 0 #3b1e6c,
    0 5px 18px rgba(168,85,247,.45);
}
.hero-h-cta--mc .mc-btn--primary:hover{
  background:#8b46ff;
  transform:translateY(-1px);
  filter:brightness(1.05);
}
.hero-h-cta--mc .mc-btn--primary:active{
  transform:translateY(4px);
  box-shadow:
    inset  3px  3px 0 rgba(255,255,255,.30),
    inset -3px -3px 0 rgba(0,0,0,.40),
    0 1px 0 #3b1e6c,
    0 1px 6px rgba(168,85,247,.4);
}

/* Secundario morado oscuro (tienda) */
.hero-h-cta--mc .mc-btn--secondary{
  background:#2a1a3e;
  box-shadow:
    inset  3px  3px 0 rgba(168,85,247,.25),
    inset -3px -3px 0 rgba(0,0,0,.55),
    0 5px 0 #0f0820,
    0 5px 14px rgba(0,0,0,.4);
}
.hero-h-cta--mc .mc-btn--secondary:hover{
  background:#3a2456;
  transform:translateY(-1px);
  filter:brightness(1.1);
}
.hero-h-cta--mc .mc-btn--secondary:active{
  transform:translateY(4px);
  box-shadow:
    inset  3px  3px 0 rgba(168,85,247,.25),
    inset -3px -3px 0 rgba(0,0,0,.55),
    0 1px 0 #0f0820;
}

/* Iconos SVG dentro de los botones MC */
.hero-h-cta--mc .mc-btn svg{
  width:18px; height:18px;
  flex-shrink:0;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.5));
}

.hero-h-sub{
  font-size:clamp(.95rem, 1.05vw, 1.05rem);
  line-height:1.65;
  color:rgba(255,255,255,.75);
  max-width:480px;
  margin:0;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.hero-h-sub strong{ color:#fff; font-weight:600; }

.hero-h-cta{
  display:flex; flex-wrap:wrap; gap:.85rem; align-items:center;
  margin-top:.2rem;
}
.hero-h-cta .btn-primary{
  padding:.95rem 2rem;
  font-size:.95rem;
  border-radius:12px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  box-shadow:0 12px 32px -8px rgba(168,85,247,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.hero-h-cta .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -8px rgba(168,85,247,.7); }
.hero-h-cta .btn-secondary{
  padding:.95rem 1.6rem;
  font-size:.95rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.4);
  color:#fff;
  backdrop-filter:blur(10px);
}
.hero-h-cta .btn-secondary:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); }

.hero-h-mini{
  display:flex; gap:2.2rem;
  margin-top:1.2rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.1);
}
.hero-h-mini > div{ display:flex; flex-direction:column; gap:.2rem; }
.hero-h-mini .v{
  font-family:'Space Mono',monospace;
  font-size:1.5rem; font-weight:700; color:#fff; line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.hero-h-mini .l{
  font-family:'Syne',sans-serif;
  font-size:.65rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}

/* Scroll cue */
.hero-h-cue{
  position:absolute;
  bottom:1.2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-family:'Syne',sans-serif;
  font-size:.62rem; font-weight:700; letter-spacing:.3em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  pointer-events:none;
}
.hero-h-cue .line{
  width:1px; height:32px;
  background:linear-gradient(180deg, transparent, rgba(168,85,247,.9));
  animation:hhLine 1.8s ease-in-out infinite;
}
@keyframes hhLine{ 0%,100%{transform:scaleY(.6); opacity:.5} 50%{transform:scaleY(1); opacity:1} }

/* ═══════════════════════════════════════════════════════════════
   BANNER ANUNCIO FOUNDER (glass card)
   ═══════════════════════════════════════════════════════════════ */
.hero-ad-x{
  position:relative;
  max-width:1280px;
  margin:0 auto 3rem;
  padding:0 2rem;
  background:#000;
  z-index:5;
}
.hero-ad-x:empty{ display:none; }
.hero-ad-x #home-ad-block,
.hero-ad-x #home-ad-video-block{ max-width:none; margin:0; padding:0; }
.hero-ad-x .had-inner{
  padding:1.5rem 2rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.hero-ad-x .had-title{ font-size:1.15rem !important; }

/* ═══════════════════════════════════════════════════════════════
   STATS GLASS CARDS
   ═══════════════════════════════════════════════════════════════ */
.stats-x{
  position:relative; background:#000; padding:0 0 5rem;
}
.stats-x-wrap{
  max-width:1280px; margin:0 auto; padding:0 2rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
.stats-x .si{
  position:relative;
  padding:1.5rem 1.3rem;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  overflow:hidden;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s;
}
.stats-x .si::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(168,85,247,.18), transparent 60%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.stats-x .si:hover{ border-color:rgba(168,85,247,.3); background:rgba(168,85,247,.04); }
.stats-x .si:hover::after{ opacity:1; }
.stats-x .si .n{
  font-family:'Space Mono',monospace;
  font-size:clamp(1.8rem,2.6vw,2.4rem); font-weight:700; color:#fff;
  line-height:1; display:block; margin-bottom:.5rem;
  text-shadow:0 0 20px rgba(168,85,247,.4);
}
.stats-x .si .l{
  font-family:'Syne',sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}

/* ═══════════════════════════════════════════════════════════════
   SECCIÓN "EXPLORA NOTHION"
   ═══════════════════════════════════════════════════════════════ */
.explora-x{
  position:relative; background:#000; padding:6rem 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.explora-x-wrap{ max-width:1280px; margin:0 auto; padding:0 2rem; }
.explora-x-eyebrow{
  font-family:'Syne',sans-serif;
  font-size:.7rem; font-weight:700; letter-spacing:.25em;
  text-transform:uppercase; color:#a855f7; margin-bottom:.6rem;
}
.explora-x-title{
  font-family:'MacMinecraft',monospace;
  font-size:clamp(2rem,4.5vw,3.6rem); font-weight:700;
  text-transform:uppercase; line-height:1.05; margin:0 0 3rem;
  color:#fff; max-width:680px;
}
.explora-x-title .hl{
  display:inline-block; padding:.05em .3em;
  background:linear-gradient(135deg, #a855f7, #7c3aed);
  border-radius:6px;
  box-shadow:0 8px 32px -8px rgba(168,85,247,.5);
}
.explora-x-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.2rem;
}
.explora-card{
  position:relative; display:block;
  padding:2rem 1.8rem;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  text-decoration:none; color:#fff;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s;
  transform-style:preserve-3d; cursor:pointer; min-height:240px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.explora-card::before{
  content:""; position:absolute; inset:-1px;
  background:radial-gradient(300px circle at var(--cx,50%) var(--cy,50%), rgba(168,85,247,.22), transparent 60%);
  opacity:0; transition:opacity .3s; pointer-events:none; border-radius:20px;
}
.explora-card:hover{ border-color:rgba(168,85,247,.4); background:rgba(168,85,247,.04); }
.explora-card:hover::before{ opacity:1; }
.explora-card .ec-icon{
  font-size:2rem; margin-bottom:1rem;
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.25);
  border-radius:14px; filter:drop-shadow(0 0 8px rgba(168,85,247,.4));
}
.explora-card .ec-title{
  font-family:'Syne',sans-serif;
  font-size:1.2rem; font-weight:800; margin:0 0 .4rem;
  letter-spacing:-.01em; color:#fff;
}
.explora-card .ec-desc{ font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.55; margin:0; }
.explora-card .ec-cta{
  position:absolute; bottom:1.5rem; right:1.6rem;
  font-family:'Syne',sans-serif;
  font-size:.7rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#a855f7;
  transition:transform .25s;
}
.explora-card:hover .ec-cta{ transform:translateX(4px); }

/* — Reveals on scroll — */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }

#page-home > .container{ background:#000; padding-top:2rem; padding-bottom:5rem; }

/* — Modo claro — */
html.light .hero-h{ background:#0a0612; }
html.light .stats-x, html.light .explora-x{ background:#0a0612; }
html.light #page-home > .container{ background:#0a0612; }

/* — Alto contraste — */
html.high-contrast .hero-h{ background:#000; }
html.high-contrast .hero-h-vignette, html.high-contrast #hero-spotlight{ display:none; }
html.high-contrast .hero-h-title .hl{ background:#fff; color:#000; box-shadow:none; }
html.high-contrast .explora-card, html.high-contrast .stats-x .si{ background:#0a0a0a; border-color:#fff; backdrop-filter:none; }
html.high-contrast .stats-x .si .n{ color:#fff; text-shadow:none; }
html.readable-font .hero-h-title, html.readable-font .explora-x-title{ font-family:-apple-system,'Segoe UI','Inter',Arial,sans-serif !important; }

/* — Reduced motion — */
@media (prefers-reduced-motion:reduce){
  .hero-h-cue{ display:none; }
  .hero-h-right-text{ opacity:1 !important; transform:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* — Responsive — */
@media (max-width:900px){
  .hero-h{ min-height:520px; }
  .hero-h-overlay{ padding:1.5rem 1.25rem 4rem; grid-template-rows:auto 1fr; }
  .hero-h-right-text{ justify-self:center; text-align:left; max-width:none; padding:0; }
  .hero-h-title{ font-size:clamp(1.8rem,9vw,3rem); }
  .stats-x-wrap{ grid-template-columns:repeat(2,1fr); padding:0 1.5rem; }
  .explora-x{ padding:4rem 0; }
  .explora-x-wrap{ padding:0 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   REDISEÑO V2 — Estilo igloo.inc con tema Minecraft
   Sobreescribe las clases v1 con cards más grandes, dramáticas,
   más whitespace y detalles pixel-art (esquinas, sombras).
   ═══════════════════════════════════════════════════════════════ */

/* ── STATS V2: cards grandes con eyebrow de sección ───────── */
.stats-x{
  padding:5rem 0 6rem;
  position:relative;
}
.stats-x::before{
  content:"— EN VIVO";
  display:block;
  max-width:1280px; margin:0 auto 1.5rem;
  padding:0 2rem;
  font-family:'Syne',sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.28em;
  color:#a855f7;
  text-transform:uppercase;
}
.stats-x-wrap{
  max-width:1280px;
  gap:1.4rem;
}
.stats-x .si{
  padding:2.2rem 1.8rem 1.8rem;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  isolation:isolate;
}
/* Esquina pixel-art decorativa (top-right) */
.stats-x .si::before{
  content:"";
  position:absolute;
  top:14px; right:14px;
  width:14px; height:14px;
  background:
    linear-gradient(135deg, rgba(168,85,247,.6) 50%, transparent 50%);
  border:1px solid rgba(168,85,247,.4);
  border-radius:2px;
  opacity:.7;
  transition:opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.stats-x .si:hover{
  transform:translateY(-4px);
  border-color:rgba(168,85,247,.45);
  background:linear-gradient(180deg, rgba(168,85,247,.08) 0%, rgba(168,85,247,.02) 100%);
  box-shadow:0 24px 48px -16px rgba(168,85,247,.35), 0 0 0 1px rgba(168,85,247,.2);
}
.stats-x .si:hover::before{
  opacity:1;
  transform:rotate(90deg);
}
.stats-x .si .n{
  font-family:'MacMinecraft',monospace;
  font-size:clamp(2.4rem, 3.4vw, 3.2rem);
  font-weight:700;
  background:linear-gradient(180deg, #fff 0%, #c084fc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  margin-bottom:.7rem;
  letter-spacing:.02em;
}
.stats-x .si .l{
  font-size:.7rem;
  letter-spacing:.22em;
  color:rgba(255,255,255,.55);
}

/* ── EXPLORA V2: cards grandes con illustración + accent ──── */
.explora-x{
  padding:7rem 0;
  border-top:1px solid rgba(168,85,247,.08);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(168,85,247,.06), transparent 70%),
    #000;
}
/* Como el HTML no envuelve los hijos en .explora-x-wrap, constraino
   directamente los hijos directos para mantener el max-width y padding. */
.explora-x > .explora-x-eyebrow,
.explora-x > .explora-x-title,
.explora-x > .explora-x-grid,
.explora-x > .explora-x-wrap{
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  padding-left:2rem;
  padding-right:2rem;
  box-sizing:border-box;
  width:100%;
}
.explora-x-wrap{ max-width:1280px; }
.explora-x-eyebrow{
  font-size:.72rem;
  letter-spacing:.28em;
  margin-bottom:1rem;
  display:flex; align-items:center; gap:.6rem;
}
.explora-x-eyebrow::after{
  content:"";
  flex:1; max-width:280px;
  height:1px;
  background:linear-gradient(90deg, rgba(168,85,247,.6), transparent);
}
.explora-x-title{
  font-size:clamp(2.2rem, 5vw, 4rem);
  margin-bottom:4rem;
  max-width:760px;
}
.explora-x-grid{
  gap:1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
/* — Explora cards estilo Minecraft real: pixel border, sharp corners,
     sombra "stand" abajo, push-down active como botón inventory MC. — */
.explora-card{
  padding:2.4rem 2rem 5rem;
  min-height:320px;
  border-radius:0;                         /* esquinas pixel sharp */
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(168,85,247,.10), transparent 80%),
    #1a0f2a;
  border:3px solid #0a0612;
  display:flex; flex-direction:column;
  position:relative;
  isolation:isolate;
  text-decoration:none;
  color:#fff;
  image-rendering:pixelated;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.06),
    inset -3px -3px 0 rgba(0,0,0,.45),
    0 6px 0 #0a0612,
    0 10px 24px rgba(0,0,0,.4);
  transition:transform .12s ease, filter .2s ease, background-color .25s;
}
/* Pixel marca abajo-izquierda (estilo bloque MC) */
.explora-card::after{
  content:"";
  position:absolute;
  bottom:1.4rem; left:2rem;
  width:6px; height:6px;
  background:#a855f7;
  box-shadow:
    10px 0 0 0 rgba(168,85,247,.6),
    20px 0 0 0 rgba(168,85,247,.3);
  pointer-events:none;
}
.explora-card:hover{
  transform:translateY(-3px);
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(168,85,247,.20), transparent 80%),
    #251440;
  filter:brightness(1.08);
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.10),
    inset -3px -3px 0 rgba(0,0,0,.5),
    0 9px 0 #0a0612,
    0 14px 32px rgba(168,85,247,.35);
}
.explora-card:active{
  transform:translateY(4px);
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.10),
    inset -3px -3px 0 rgba(0,0,0,.5),
    0 1px 0 #0a0612;
}
.explora-card .ec-icon{
  width:68px; height:68px;
  margin-bottom:1.4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0a0612;
  border:3px solid #2a1a3e;
  border-radius:0;
  box-shadow:
    inset 2px 2px 0 rgba(168,85,247,.18),
    inset -2px -2px 0 rgba(0,0,0,.6);
  filter:drop-shadow(0 0 14px rgba(168,85,247,.45));
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s;
}
.explora-card .ec-icon .mc{
  width:40px; height:40px;
  image-rendering:pixelated;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.6));
}
.explora-card:hover .ec-icon{
  transform:rotate(-6deg) scale(1.06);
  border-color:#7c3aed;
}
.explora-card .ec-title{
  font-family:'MacMinecraft',monospace;
  font-size:1.55rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:.6rem;
  text-shadow:2px 2px 0 rgba(0,0,0,.6);
}
.explora-card .ec-desc{
  font-size:.92rem;
  line-height:1.6;
  color:rgba(255,255,255,.65);
}
.explora-card .ec-cta{
  position:absolute;
  bottom:1.4rem;
  right:1.8rem;
  font-family:'MacMinecraft', monospace;
  font-size:.78rem;
  letter-spacing:.18em;
  color:#c084fc;
  font-weight:700;
  text-transform:uppercase;
  text-shadow:1px 1px 0 rgba(0,0,0,.55);
  transition:transform .25s;
}
.explora-card:hover .ec-cta{ transform:translateX(6px); color:#fff; }

/* ── CONTAINER (online/news/posts): header polish ─────────── */
#page-home > .container{
  padding-top:5rem; padding-bottom:6rem;
  background:#000;
  position:relative;
}
#page-home > .container > [data-reveal]{
  margin-bottom:3rem;
}
/* Sub-section header (online, news, posts) — unifico estilo */
#page-home > .container > [data-reveal] > div:first-child[style*="space-between"]{
  margin-bottom:1.25rem !important;
  padding-bottom:.85rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
#page-home .online-strip h3{
  font-family:'MacMinecraft', monospace;
  font-size:.95rem; letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  margin:0 0 1.25rem;
  padding-bottom:.85rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:.6rem;
}
#page-home .online-strip h3::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:hhPulse 2s infinite;
}

/* ── Responsive v2 ─────────────────────────────────────────── */
@media (max-width:900px){
  .stats-x{ padding:3.5rem 0 4rem; }
  .stats-x .si{ padding:1.8rem 1.4rem 1.4rem; }
  .explora-x{ padding:4.5rem 0; }
  .explora-card{ padding:2rem 1.6rem 4.5rem; min-height:280px; }
  .explora-x-title{ margin-bottom:2.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO SCROLL-JACKED — Big text revealable letra por letra.
   Aparece sobre el hero durante el scroll-pin.
   ═══════════════════════════════════════════════════════════════ */
.hero-h-big{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  z-index:7;                       /* sobre overlay (z:6) */
  font-family:'MacMinecraft', monospace;
  font-weight:700;
  font-size:clamp(2.2rem, 5.5vw, 5rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:
    4px 4px 0 rgba(0,0,0,.7),
    0 0 48px rgba(168,85,247,.5);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  text-align:center;
  filter:drop-shadow(0 18px 36px rgba(168,85,247,.35));
}
.hero-h-big .hh-word{
  display:inline-block;
}
.hero-h-big .hh-ch{
  display:inline-block;
  transform-origin:50% 100%;
  transform-style:preserve-3d;
}
.hero-h-big .hh-sep{ display:inline-block; }

/* Wrapper para asegurar que el pin de GSAP funcione sin conflictos */
.hero-h{ will-change:transform; }
.hero-h-bg{ will-change:transform; }
.skin3d-stage{ will-change:transform; }

@media (max-width:900px){
  .hero-h-big{
    font-size:clamp(1.6rem, 8vw, 3rem);
    white-space:normal;
    line-height:1.1;
    max-width:90vw;
  }
}