/* ─────────────────────────────────────────────
   METANOIA · Fondo Y2K para /recursos
   Capa fija detrás del contenido. Solo transform/opacity
   (sin blur, sin canvas) para que sea ligera en celular.
───────────────────────────────────────────── */
body{isolation:isolate}
.y2k{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}

/* Retícula de puntos + scanlines + resplandores (todo con gradientes, sin blur) */
.y2k-grid{position:absolute;inset:-40px;
  background-image:radial-gradient(circle,rgba(240,237,232,.085) 1px,transparent 1.2px);
  background-size:44px 44px;will-change:transform}
.y2k-scan{position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(138,143,150,.035) 0 1px,transparent 1px 12px)}
.y2k-glow{position:absolute;border-radius:50%;opacity:.9}
.y2k-glow.g1{width:70vmax;height:70vmax;top:-30vmax;right:-25vmax;
  background:radial-gradient(closest-side,rgba(60,9,108,.30),rgba(60,9,108,0) 70%)}
.y2k-glow.g2{width:60vmax;height:60vmax;bottom:-30vmax;left:-25vmax;
  background:radial-gradient(closest-side,rgba(26,58,255,.16),rgba(26,58,255,0) 70%)}

/* Esquinas tipo visor */
.y2k-corner{position:absolute;width:22px;height:22px;border-color:rgba(138,143,150,.4);border-style:solid;border-width:0}
.y2k-corner.tl{top:64px;left:14px;border-top-width:1px;border-left-width:1px}
.y2k-corner.tr{top:64px;right:14px;border-top-width:1px;border-right-width:1px}
.y2k-corner.bl{bottom:14px;left:14px;border-bottom-width:1px;border-left-width:1px}
.y2k-corner.br{bottom:14px;right:14px;border-bottom-width:1px;border-right-width:1px}

/* Texto mono flotante (metadata, binario, >>|>) */
.y2k-t{position:absolute;font-family:'Space Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.18em;color:#8A8F96;white-space:nowrap}
.y2k-t.b{color:#1A3AFF}
.y2k-t.p{color:#B07FE0}

/* Íconos SVG (mira, estrella, rombo, ventana) */
.y2k-i{position:absolute;display:block}
.y2k-i svg{display:block;width:100%;height:100%;overflow:visible}

/* Partículas */
.y2k-p{position:absolute;bottom:-10px;border-radius:50%;opacity:0;animation:y2kRise linear infinite}
@keyframes y2kRise{
  0%{transform:translate3d(0,0,0);opacity:0}
  6%{opacity:1}
  92%{opacity:.5}
  100%{transform:translate3d(var(--dx),-105vh,0);opacity:0}}

/* Flotación suave */
.y2k-bob1{animation:y2kBob 7s ease-in-out infinite}
.y2k-bob2{animation:y2kBob 9s ease-in-out infinite reverse;animation-delay:-3s}
.y2k-bob3{animation:y2kBob 11s ease-in-out infinite;animation-delay:-5s}
.y2k-spin{animation:y2kSpin 40s linear infinite}
@keyframes y2kBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes y2kSpin{to{transform:rotate(360deg)}}

/* Letras fantasma en el hero de /recursos */
.y2k-ghost{position:absolute;right:-2vw;top:50%;transform:translateY(-50%);
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:900;
  font-size:clamp(120px,24vw,360px);line-height:.82;letter-spacing:-.04em;
  color:rgba(94,26,156,.07);pointer-events:none;user-select:none;white-space:nowrap;z-index:0}
.y2k-ghost span{display:block;color:transparent;-webkit-text-stroke:1px rgba(26,58,255,.11)}

/* Celular: menos elementos, sin parallax */
@media (max-width:700px){
  .y2k [data-d="1"]{display:none}
  .y2k-grid{background-size:36px 36px}
  .y2k-corner.tl,.y2k-corner.tr{top:60px}
  .y2k-ghost{top:auto;bottom:-10px;transform:none;right:-6vw;font-size:34vw}
}
/* Página de recurso (lite): aún más discreto */
body[data-y2k="lite"] .y2k [data-l="0"]{display:none}
body[data-y2k="lite"] .y2k-glow{opacity:.55}

@media (prefers-reduced-motion:reduce){
  .y2k-p{display:none}
  .y2k-bob1,.y2k-bob2,.y2k-bob3,.y2k-spin{animation:none}
}
@media print{.y2k,.y2k-ghost{display:none!important}}

/* ── Variantes por sección ── */
.y2k-taller .y2k-grid{background-image:linear-gradient(rgba(26,58,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(26,58,255,.075) 1px,transparent 1px);background-size:48px 48px}
.y2k-taller .y2k-scan{background:repeating-linear-gradient(90deg,rgba(138,143,150,.03) 0 1px,transparent 1px 12px)}
.y2k-ideas .y2k-grid{background-image:radial-gradient(circle,rgba(176,127,224,.13) 1px,transparent 1.3px);background-size:40px 40px}
.y2k-aprende .y2k-grid{background-image:radial-gradient(circle,rgba(240,237,232,.07) .8px,transparent 1px);background-size:22px 22px}
.y2k-aprende .y2k-scan{background:repeating-linear-gradient(0deg,rgba(26,58,255,.04) 0 2px,transparent 2px 6px)}
.y2k-p.sq{border-radius:0}
body[data-y2k-theme="taller"] .y2k-ghost{color:rgba(26,58,255,.07)}
body[data-y2k-theme="taller"] .y2k-ghost span{-webkit-text-stroke-color:rgba(240,237,232,.08)}
body[data-y2k-theme="ideas"] .y2k-ghost{color:rgba(176,127,224,.07)}
body[data-y2k-theme="aprende"] .y2k-ghost span{-webkit-text-stroke-color:rgba(176,127,224,.12)}