/* ============================================================
   PURO VICIO — sistema
   ============================================================ */
:root{
  --ink:      #060A0E;
  --ground:   #0A1017;
  --panel:    #0E1620;
  --panel-2:  #121D28;
  --line:     #1F2E39;
  --line-hot: #2C4451;

  --cyan:     #35F0E0;
  --pink:     #FF1B8D;
  --yellow:   #F3F125;
  --chalk:    #E9F5F3;
  --mute:     #7E9AA0;

  --cyan-g:   53,240,224;
  --pink-g:   255,27,141;
  --yell-g:   243,241,37;

  --f-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --f-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  --f-script: "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;

  --t-mega: clamp(3.6rem, 15vw, 13rem);
  --t-xxl:  clamp(2.6rem, 8vw, 6.5rem);
  --t-xl:   clamp(2rem, 5vw, 3.6rem);
  --t-lg:   clamp(1.35rem, 2.6vw, 2rem);
  --t-md:   1.0625rem;
  --t-sm:   .8125rem;
  --t-xs:   .6875rem;

  --gut: clamp(1.15rem, 4vw, 3.5rem);
  --maxw: 1360px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ground); color:var(--chalk);
  font-family:var(--f-body); font-size:var(--t-md); line-height:1.6;
  overflow-x:hidden; cursor:none;
}
body.no-fine{ cursor:auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; }
::selection{ background:var(--pink); color:#fff; }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }

/* ============================================================
   ATMÓSFERA
   ============================================================ */
.grain,.scan,.beam,.vignette{ position:fixed; inset:0; pointer-events:none; }
.grain{
  z-index:90; opacity:.30; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain 700ms steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)}
}
.scan{ z-index:91; opacity:.45;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px); }
.vignette{ z-index:89;
  background:radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 40%, rgba(3,6,9,.85) 100%); }
.beam{ z-index:2; opacity:.5; mix-blend-mode:screen;
  background:radial-gradient(340px 340px at var(--mx,50%) var(--my,30%),
    rgba(var(--cyan-g),.10), rgba(var(--pink-g),.05) 45%, transparent 70%); }

.sprocket{
  position:fixed; top:0; bottom:0; width:26px; z-index:70; pointer-events:none;
  background:
    linear-gradient(var(--ink),var(--ink)),
    repeating-linear-gradient(to bottom, transparent 0 14px, rgba(var(--cyan-g),.30) 14px 30px, transparent 30px 44px);
  background-size:100% 100%, 12px 100%;
  background-position:0 0, 7px var(--sp,0px);
  background-repeat:no-repeat, repeat-y;
  border-right:1px solid var(--line);
}
.sprocket.r{ right:0; border-right:0; border-left:1px solid var(--line); }
.sprocket.l{ left:0; }
@media (max-width:1180px){ .sprocket{ display:none; } }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor{
  position:fixed; z-index:120; top:0; left:0; pointer-events:none;
  width:26px; height:26px; margin:-13px 0 0 -13px; mix-blend-mode:difference;
  transition:width .22s, height .22s, margin .22s;
}
.cursor::before,.cursor::after{ content:""; position:absolute; background:#fff; }
.cursor::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.cursor::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-.5px); }
.cursor .ring{ position:absolute; inset:0; border:1px solid #fff; opacity:.55; }
body.hot .cursor{ width:56px; height:56px; margin:-28px 0 0 -28px; }
body.no-fine .cursor{ display:none; }

/* ============================================================
   ARRANQUE
   ============================================================ */
.boot{ position:fixed; inset:0; z-index:200; background:var(--ink); display:grid; place-items:center; }
.boot__mark{
  font-family:var(--f-display); font-size:clamp(2.6rem,11vw,8rem);
  letter-spacing:.02em; line-height:.85; text-align:center;
  color:transparent; -webkit-text-stroke:2px rgba(var(--cyan-g),.20);
}
.boot__mark span{ display:block; }
.boot__mark .on{ -webkit-text-stroke-color:var(--cyan);
  filter:drop-shadow(0 0 10px rgba(var(--cyan-g),.75)); animation:flick .5s steps(1) 1; }
.boot__mark .on.p{ -webkit-text-stroke-color:var(--pink); filter:drop-shadow(0 0 10px rgba(var(--pink-g),.75)); }
@keyframes flick{ 0%,18%,34%,52%{opacity:.15} 10%,26%,44%,100%{opacity:1} }
.boot__bar{ position:absolute; left:var(--gut); right:var(--gut); bottom:10vh; height:2px; background:var(--line); }
.boot__bar i{ display:block; height:100%; width:0; background:var(--yellow); }
.boot__lbl{
  position:absolute; left:var(--gut); bottom:calc(10vh + 14px);
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute);
}
.boot.done{ animation:bootOut .55s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes bootOut{ to{ transform:translateY(-101%); } }

/* ============================================================
   TRANSICIÓN
   ============================================================ */
.wipe{ position:fixed; inset:0; z-index:150; pointer-events:none; display:flex; }
.wipe i{ flex:1; background:var(--ink); transform:scaleY(0); transform-origin:top;
  border-right:1px solid rgba(var(--cyan-g),.12); }
.wipe.in i{ animation:wIn .34s cubic-bezier(.65,0,.35,1) forwards; }
.wipe.out i{ animation:wOut .34s cubic-bezier(.65,0,.35,1) forwards; transform:scaleY(1); transform-origin:bottom; }
@keyframes wIn{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes wOut{ from{transform:scaleY(1)} to{transform:scaleY(0)} }
.wipe__slate{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0;
  font-family:var(--f-display); font-size:clamp(2rem,7vw,4.5rem); letter-spacing:.06em;
  color:transparent; -webkit-text-stroke:2px var(--yellow);
}
.wipe.in .wipe__slate{ animation:slate .5s ease forwards; }
@keyframes slate{ 0%{opacity:0;transform:scale(.9) rotate(-3deg)} 45%{opacity:1} 100%{opacity:0} }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:80; display:flex; align-items:stretch;
  justify-content:space-between; gap:1rem; padding:0 var(--gut); height:70px;
  background:rgba(8,13,18,.82); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.nav__brand svg{ width:26px; height:26px; }
.nav__brand b{ font-family:var(--f-display); font-size:1.25rem; letter-spacing:.06em;
  color:transparent; -webkit-text-stroke:1px var(--cyan); }
.nav__brand small{ display:block; font-family:var(--f-mono); font-size:var(--t-xs);
  color:var(--mute); letter-spacing:.18em; text-transform:uppercase; }
.nav__links{ display:flex; align-items:stretch; }
.nav__links a{
  display:flex; align-items:center; padding:0 1.05rem; text-decoration:none;
  font-family:var(--f-mono); font-size:var(--t-sm); letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute); border-left:1px solid var(--line);
  position:relative; transition:color .2s, background .2s;
}
.nav__links a:last-child{ border-right:1px solid var(--line); }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--pink); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.65,0,.35,1);
}
.nav__links a:hover{ color:var(--chalk); background:var(--panel); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]{ color:var(--chalk); }
.nav__cta{
  align-self:center; display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border:2px solid var(--yellow); color:var(--yellow);
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  box-shadow:4px 4px 0 rgba(var(--yell-g),.25);
  transition:transform .18s, box-shadow .18s, background .18s, color .18s;
}
.nav__cta:hover{ background:var(--yellow); color:var(--ink); box-shadow:none; transform:translate(3px,3px); }
.nav__burger{ display:none; }
@media (max-width:1024px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; flex-direction:column; justify-content:center; gap:6px;
    align-self:center; padding:.6rem .1rem .6rem 1rem; cursor:none; }
  .nav__burger i{ display:block; width:32px; height:2px; background:var(--cyan); transition:transform .3s, opacity .2s; }
  body.menu .nav__burger i:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  body.menu .nav__burger i:nth-child(2){ opacity:0; }
  body.menu .nav__burger i:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}
.sheet{
  position:fixed; inset:70px 0 0 0; z-index:79; background:var(--ink);
  padding:var(--gut); display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .5s cubic-bezier(.65,0,.35,1); overflow-y:auto;
}
body.menu .sheet{ clip-path:inset(0 0 0 0); }
.sheet a{
  font-family:var(--f-display); font-size:clamp(2rem,11vw,4rem); line-height:1;
  text-decoration:none; letter-spacing:.02em; color:transparent;
  -webkit-text-stroke:1.5px var(--chalk); padding:.15em 0; border-bottom:1px solid var(--line);
}
.sheet a:nth-child(2n){ -webkit-text-stroke-color:var(--pink); }
.sheet a:nth-child(3n){ -webkit-text-stroke-color:var(--cyan); }
.sheet__foot{ margin-top:1.5rem; font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.2em; text-transform:uppercase; color:var(--mute); }

/* ============================================================
   VISTAS
   ============================================================ */
main{ position:relative; z-index:3; }
.view{ display:none; }
.view.is-on{ display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }

/* ============================================================
   HÉROE
   ============================================================ */
.hero{ padding:clamp(2.5rem,7vw,5rem) 0 0; overflow:hidden; }
.hero__stage{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(.5rem,3vw,2rem); max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
}
.hero__word{ text-align:center; }
.hero__word h1{
  margin:0; font-family:var(--f-display); font-size:var(--t-mega);
  line-height:.78; letter-spacing:.01em; color:transparent;
  -webkit-text-stroke:2px var(--pink); filter:drop-shadow(0 0 14px rgba(var(--pink-g),.45));
}
/* sólo las dos líneas del titular; los <span> que genera el
   partido por letras deben seguir siendo inline-block */
.hero__word h1 > span{ display:block; }
.hero__tag{ font-family:var(--f-script); font-size:clamp(1rem,2.6vw,1.7rem);
  color:var(--chalk); opacity:.9; margin-top:.6rem; filter:drop-shadow(0 0 8px rgba(255,255,255,.25)); }
.neon-c{ stroke:var(--cyan); filter:drop-shadow(0 0 8px rgba(var(--cyan-g),.8)); }
.neon-y{ stroke:var(--yellow); filter:drop-shadow(0 0 8px rgba(var(--yell-g),.7)); }
.hero__glyph{ width:clamp(70px,13vw,190px); height:auto; }
.hero__glyph.mic{ animation:hum 5s ease-in-out infinite; }
.hero__glyph.clap{ animation:hum 6.5s ease-in-out infinite reverse; }
@keyframes hum{ 0%,100%{opacity:1} 47%{opacity:.82} 49%{opacity:1} }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:1px; margin-top:clamp(2rem,6vw,4rem);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--line);
}
.hero__meta div{
  flex:1 1 170px; background:var(--ground); padding:1.1rem var(--gut);
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}
.hero__meta b{ display:block; font-size:1.6rem; letter-spacing:.02em; color:var(--chalk);
  margin-top:.35rem; font-variant-numeric:tabular-nums; }

/* ============================================================
   MARQUESINAS
   ============================================================ */
.marq{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:.75rem 0; background:var(--ink);
  transform:skewY(var(--sk,0deg)); transition:transform .35s ease-out;
}
.marq__in{ display:flex; width:max-content; animation:slide 32s linear infinite; }
.marq.rev .marq__in{ animation-direction:reverse; }
.marq.fast .marq__in{ animation-duration:19s; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marq span{
  font-family:var(--f-display); font-size:clamp(1.5rem,3.4vw,2.6rem);
  letter-spacing:.03em; padding:0 1.2rem; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px var(--cyan);
}
.marq span:nth-child(2n){ -webkit-text-stroke-color:var(--pink); }
.marq span:nth-child(3n){ -webkit-text-stroke:0; color:var(--yellow); }

/* — marquesina de plataformas — */
.pmarq{
  border-top:2px solid var(--line); border-bottom:2px solid var(--line);
  background:linear-gradient(180deg, var(--ink), #080D13); overflow:hidden; padding:1.15rem 0;
}
.pmarq__in{ display:flex; width:max-content; align-items:center; animation:slide 38s linear infinite; }
.pmarq:hover .pmarq__in{ animation-play-state:paused; }
.pmarq a{
  display:inline-flex; align-items:center; gap:.75rem; padding:.5rem 1.6rem;
  text-decoration:none; border-right:1px solid var(--line); color:var(--c,var(--cyan));
  transition:transform .25s, filter .25s;
}
/* el trazo se pinta con var(--c), no con currentColor: dentro del
   propio elemento currentColor vale «transparent» y el texto
   desaparecía. */
.pmarq a b{
  font-family:var(--f-display); font-size:clamp(1.1rem,2.4vw,1.7rem);
  letter-spacing:.03em; white-space:nowrap; color:transparent;
  -webkit-text-stroke:1px var(--c,var(--cyan));
}
.pmarq a svg{ width:30px; height:30px; flex:none; filter:drop-shadow(0 0 6px currentColor); }
.pmarq a:hover{ transform:translateY(-3px); }
.pmarq a:hover b{ -webkit-text-stroke:0; color:var(--c,var(--cyan));
  filter:drop-shadow(0 0 12px var(--c,var(--cyan))); }
.pmarq__lbl{
  display:block; text-align:center; font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.3em; text-transform:uppercase; color:var(--mute);
  padding:.9rem 0 0; background:var(--ink);
}

/* ============================================================
   ENCABEZADOS
   ============================================================ */
.head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding:clamp(3rem,8vw,6rem) 0 1.75rem; border-bottom:2px solid var(--line);
}
.kick{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.26em;
  text-transform:uppercase; color:var(--cyan); display:block; margin-bottom:.9rem; }
.head h2{
  margin:0; font-family:var(--f-display); font-size:var(--t-xxl); line-height:.85;
  letter-spacing:.01em; text-wrap:balance; color:transparent;
  -webkit-text-stroke:2px var(--chalk);
  background-image:linear-gradient(90deg, var(--pink) 0 var(--p,0%), transparent var(--p,0%));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.head p{ max-width:38ch; margin:0; color:var(--mute); font-size:var(--t-sm); }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.65rem; padding:.85rem 1.4rem; text-decoration:none;
  font-family:var(--f-mono); font-size:var(--t-sm); letter-spacing:.14em; text-transform:uppercase;
  border:2px solid var(--cyan); color:var(--cyan); box-shadow:6px 6px 0 rgba(var(--cyan-g),.22);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .18s, background .18s, color .18s;
}
.btn:hover{ background:var(--cyan); color:var(--ink); box-shadow:0 0 22px rgba(var(--cyan-g),.5); }
.btn.pink{ border-color:var(--pink); color:var(--pink); box-shadow:6px 6px 0 rgba(var(--pink-g),.22); }
.btn.pink:hover{ background:var(--pink); color:#fff; box-shadow:0 0 22px rgba(var(--pink-g),.5); }
.btn.ghost{ border-color:var(--line-hot); color:var(--chalk); box-shadow:none; }
.btn.ghost:hover{ background:var(--chalk); color:var(--ink); }

/* ============================================================
   PLATAFORMAS (rejilla)
   ============================================================ */
.plats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); text-align:left; }
.plat{ background:var(--panel); padding:1.4rem 1.2rem; text-decoration:none;
  display:flex; align-items:center; gap:.9rem; position:relative; overflow:hidden;
  transition:background .25s; }
.plat svg{ width:30px; height:30px; flex:none; }
.plat b{ display:block; font-family:var(--f-mono); font-size:var(--t-sm);
  letter-spacing:.1em; text-transform:uppercase; }
.plat i{ display:block; font-style:normal; font-family:var(--f-mono);
  font-size:var(--t-xs); color:var(--mute); letter-spacing:.08em; }
.plat::after{ content:"↗"; position:absolute; right:1.1rem; top:50%;
  transform:translateY(-50%) translateX(8px); opacity:0; transition:.25s; font-size:1.1rem; }
.plat:hover{ background:var(--panel-2); }
.plat:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }
.plat:hover svg{ filter:drop-shadow(0 0 10px currentColor); }

/* ============================================================
   REPRODUCTOR EN DIRECTO
   ============================================================ */
.live{
  margin-top:2.5rem; border:2px solid var(--cyan); background:var(--panel);
  box-shadow:0 0 40px rgba(var(--cyan-g),.14), inset 0 0 60px rgba(var(--cyan-g),.05);
  position:relative;
}
.live__bar{
  display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem;
  border-bottom:2px solid var(--cyan); font-family:var(--f-mono);
  font-size:var(--t-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
}
.live__dot{ width:9px; height:9px; background:var(--pink); box-shadow:0 0 10px var(--pink);
  animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.live__frame{ position:relative; min-height:352px; background:var(--ink); }
.live__frame iframe{ display:block; width:100%; height:352px; border:0; position:relative; z-index:2; }
.live__fallback{
  position:absolute; inset:0; z-index:1; display:grid; place-content:center; gap:1rem;
  text-align:center; padding:2rem; color:var(--mute); font-family:var(--f-mono); font-size:var(--t-sm);
}
.live__foot{ padding:.85rem 1rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); }
.live__foot a{ color:var(--cyan); text-decoration:none; }
.live__foot a:hover{ text-decoration:underline; }

/* ============================================================
   EPISODIOS
   ============================================================ */
.eps{ border-top:2px solid var(--line); }
.ep{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(1rem,3vw,2.5rem); padding:clamp(1.3rem,3vw,2.1rem) 0;
  border-bottom:1px solid var(--line); position:relative; cursor:none;
  text-align:left; width:100%; transition:background .3s, padding-left .3s;
}
.ep::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--pink); transform:scaleY(0); transform-origin:bottom; transition:transform .3s; }
.ep:hover{ background:linear-gradient(90deg, rgba(var(--pink-g),.07), transparent 55%); padding-left:1.25rem; }
.ep:hover::before{ transform:scaleY(1); transform-origin:top; }
.ep__n{
  font-family:var(--f-display); font-size:clamp(1.1rem,2.6vw,1.9rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--line-hot); min-width:5ch;
  font-variant-numeric:tabular-nums; transition:.3s; letter-spacing:.02em;
}
.ep:hover .ep__n{ -webkit-text-stroke-color:var(--yellow); filter:drop-shadow(0 0 10px rgba(var(--yell-g),.5)); }
.ep__t{ display:block; margin:0 0 .35rem; font-size:clamp(1rem,2vw,1.3rem);
  font-weight:600; line-height:1.28; text-wrap:balance; }
.ep__d{ display:flex; gap:.9rem; flex-wrap:wrap; font-family:var(--f-mono);
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.ep__d em{ font-style:normal; color:var(--cyan); }
.ep__wave{ display:flex; align-items:center; gap:2px; height:34px; }
.ep__wave i{ width:3px; background:var(--line-hot); display:block; transition:background .3s; }
.ep:hover .ep__wave i{ background:var(--cyan); }
.ep__play{ width:52px; height:52px; flex:none; border:2px solid var(--line-hot);
  display:grid; place-items:center; transition:.25s; color:var(--chalk); }
.ep:hover .ep__play{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 18px rgba(var(--cyan-g),.35); }
@media (max-width:820px){
  .ep{ grid-template-columns:auto 1fr auto; }
  .ep__wave{ display:none; }
}

/* ============================================================
   TARJETAS (críticas)
   ============================================================ */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:2.5rem; }
.card{
  background:var(--panel); padding:clamp(1.25rem,2.5vw,2rem);
  display:flex; flex-direction:column; gap:.8rem; text-align:left;
  position:relative; overflow:hidden; cursor:none;
  transition:background .3s; grid-column:span 4;
}
.card.wide{ grid-column:span 8; }
.card.full{ grid-column:span 12; }
.card.tall{ grid-column:span 6; }
.card::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--c,var(--cyan)); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.65,0,.35,1); }
.card:hover{ background:var(--panel-2); }
.card:hover::after{ transform:scaleX(1); }
.card__cat{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--c,var(--cyan)); display:flex; align-items:center; gap:.6rem; }
.card__cat::before{ content:""; width:9px; height:9px; background:currentColor; box-shadow:0 0 10px currentColor; }
.card h3{ margin:0; font-size:clamp(1.05rem,2.2vw,1.5rem); line-height:1.18; font-weight:650; text-wrap:balance; }
.card.full h3, .card.wide h3{ font-family:var(--f-display); font-weight:400; letter-spacing:.01em;
  font-size:clamp(1.8rem,4.4vw,3rem); line-height:.95; }
.card p{ margin:0; color:var(--mute); font-size:var(--t-sm); line-height:1.6; max-width:62ch; }
.card__yr{ font-family:var(--f-display); font-size:2rem; color:transparent;
  -webkit-text-stroke:1px var(--line-hot); line-height:1; }
.card__foot{ margin-top:auto; padding-top:.7rem; display:flex; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--line-hot); align-items:center; }
.card__by{ color:var(--chalk); }
.card__foot span{ color:var(--mute); }
@media (max-width:900px){ .card, .card.wide, .card.tall, .card.full{ grid-column:span 12; } }

/* — filtros por autor — */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.chip{
  padding:.5rem .95rem; border:1px solid var(--line-hot); color:var(--mute); cursor:none;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  transition:.2s;
}
.chip:hover{ color:var(--chalk); border-color:var(--chalk); }
.chip.on{ background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:0 0 18px rgba(var(--pink-g),.45); }

/* ============================================================
   DETALLE
   ============================================================ */
.detail{ padding-bottom:5rem; }
.detail__back{
  display:inline-flex; align-items:center; gap:.6rem; margin:2.5rem 0 0; cursor:none;
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute); transition:color .2s, gap .2s;
}
.detail__back:hover{ color:var(--cyan); gap:1rem; }
.detail h1{
  font-family:var(--f-display); font-size:clamp(2.2rem,6vw,4.6rem); line-height:.92;
  margin:1.25rem 0 1rem; letter-spacing:.01em; color:transparent;
  -webkit-text-stroke:2px var(--chalk); text-wrap:balance;
}
.detail__meta{
  display:flex; flex-wrap:wrap; gap:1.25rem; padding:1rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}
.detail__meta em{ font-style:normal; color:var(--yellow); }
.detail__body{ max-width:64ch; margin-top:2.5rem; }
.detail__body p{ margin:0 0 1.3rem; }
.excerpt{
  margin:2.5rem 0; padding:1.6rem 0 1.6rem 1.6rem; border-left:3px solid var(--pink);
  font-size:clamp(1.05rem,2.2vw,1.3rem); line-height:1.5; color:var(--chalk); max-width:62ch;
}
.byline{
  display:flex; align-items:center; gap:1rem; margin-top:2.5rem;
  padding:1.2rem; border:1px solid var(--line); background:var(--panel);
}
.byline .sig{
  width:54px; height:54px; flex:none; display:grid; place-items:center;
  border:2px solid var(--c,var(--cyan)); font-family:var(--f-display); font-size:1.3rem;
  color:transparent; -webkit-text-stroke:1px var(--c,var(--cyan));
}
.byline b{ display:block; font-size:1rem; }
.byline span{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); }
.topics{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.topic{ padding:.45rem .9rem; border:1px solid var(--line-hot); color:var(--chalk);
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.08em; }

/* ============================================================
   SOBRE
   ============================================================ */
/* bloque de dos columnas. Se llama .duo y no .split porque .split
   es el gancho del partido por letras: compartir nombre le metía
   fondo y display:grid a todos los titulares. */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:2.5rem; }
.duo > div{ background:var(--panel); padding:clamp(1.4rem,3vw,2.4rem); }
.duo h3{ margin:0 0 .8rem; font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.22em; text-transform:uppercase; color:var(--yellow); }
.duo p{ margin:0 0 1rem; }
.duo p:last-child{ margin:0; }
@media (max-width:820px){ .duo{ grid-template-columns:1fr; } }

.seasons{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.5rem; flex-wrap:wrap; }
.season{ flex:1 1 120px; background:var(--panel); padding:1.4rem 1.2rem; }
.season b{ display:block; font-family:var(--f-display); font-size:2.4rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--cyan); }
.season.now b{ -webkit-text-stroke-color:var(--pink); filter:drop-shadow(0 0 12px rgba(var(--pink-g),.5)); }
.season span{ display:block; margin-top:.5rem; font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }

.team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:2.5rem; }
.member{ background:var(--panel); padding:clamp(1.4rem,3vw,2rem); }
.member__av{
  width:100%; aspect-ratio:1/1; display:grid; place-items:center; margin-bottom:1.2rem;
  border:2px solid var(--c,var(--cyan)); position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%, rgba(var(--cyan-g),.10), transparent 60%);
}
.member__av b{ font-family:var(--f-display); font-size:clamp(2.4rem,6vw,3.6rem); line-height:1;
  color:transparent; -webkit-text-stroke:2px var(--c,var(--cyan));
  filter:drop-shadow(0 0 12px var(--c,var(--cyan))); }
.member__av::after{ content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.3) 3px 4px); opacity:.6; }
.member h4{ margin:0 0 .2rem; font-size:1.1rem; }
.member .role{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--c,var(--cyan)); }
.member p{ margin:.9rem 0 0; color:var(--mute); font-size:var(--t-sm); }

/* ============================================================
   BANDA CTA + PIE
   ============================================================ */
.cta-band{
  margin-top:clamp(3rem,8vw,6rem); padding:clamp(3rem,8vw,6rem) 0;
  border-top:2px solid var(--pink); border-bottom:2px solid var(--pink);
  background:radial-gradient(70% 120% at 50% 0%, rgba(var(--pink-g),.12), transparent 65%), var(--ink);
  text-align:center;
}
.cta-band h2{
  margin:0 0 1.5rem; font-family:var(--f-display); font-size:var(--t-xxl); line-height:.85;
  color:transparent; -webkit-text-stroke:2px var(--pink);
  filter:drop-shadow(0 0 16px rgba(var(--pink-g),.5)); text-wrap:balance;
}
footer{ position:relative; z-index:3; border-top:1px solid var(--line);
  background:var(--ink); padding:clamp(2.5rem,6vw,4rem) 0 3rem; }
.foot{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-end; }
.foot__mark{ font-family:var(--f-display); font-size:clamp(2.5rem,9vw,6rem); line-height:.85;
  color:transparent; -webkit-text-stroke:1.5px var(--line-hot); }
.foot__nav{ display:flex; flex-direction:column; gap:.5rem; }
.foot__nav a, .foot small{ font-family:var(--f-mono); font-size:var(--t-xs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute); text-decoration:none; }
.foot__nav a:hover{ color:var(--cyan); }

/* ============================================================
   REVELADOS
   ============================================================ */
.rv{ opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0ms); }
.rv.is-in{ opacity:1; transform:none; }
.ch{ display:inline-block; opacity:0; transform:translateY(.5em) rotate(4deg); }
.is-in .ch{ animation:chIn .5s cubic-bezier(.2,.9,.3,1) forwards; animation-delay:calc(var(--ci) * 26ms); }
@keyframes chIn{
  0%{ opacity:0; transform:translateY(.5em) rotate(4deg) }
  40%{ opacity:.25 } 55%{ opacity:1 } 62%{ opacity:.3 }
  100%{ opacity:1; transform:none }
}
.wd{ display:inline-block; white-space:nowrap; }
/* el mismo glitch del titular del home, en todos los títulos */
.gl:hover,
.head h2:hover,
.cta-band h2:hover,
.detail h1:hover{ animation:glitch .28s steps(2) 2; }
.head h2, .cta-band h2, .detail h1{ cursor:none; }
@keyframes glitch{
  0%{ text-shadow:2px 0 var(--pink), -2px 0 var(--cyan); transform:translateX(0) }
  50%{ text-shadow:-3px 0 var(--pink), 3px 0 var(--cyan); transform:translateX(1px) }
  100%{ text-shadow:none; transform:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .rv,.ch{ opacity:1 !important; transform:none !important; }
  .grain,.beam{ display:none; }
  body{ cursor:auto; }
  .cursor{ display:none; }
}