/* ==========================================================
   D_RABBIT — punk / grunge / 2000s / cyberglitch
   ========================================================== */
:root{
  /* COLOR PRINCIPAL — Pantone PMS 1797 (en pantalla #F5243C · impresión oficial #CB333B).
     Para cambiar el color de TODO el sitio, edita solo --pink-rgb (R,G,B). */
  --pink-rgb:245,36,60;
  --pink:rgb(var(--pink-rgb)); --pink-hot:#ff5a6e; --pink-dim:#8f0f22; --pink-dark:#b3122a;
  --black:#050507; --ink:#0c0a10; --ink2:#15101c;
  --cyan:#00f0ff; --yellow:#fcee0a; --white:#f4eaf6;
  --pad:clamp(18px,5vw,72px);
  /* FUENTES (se cargan desde Google Fonts en el <head> de index.html y categoria.html) */
  --f-graffiti:'Sedgwick Ave Display','Permanent Marker',cursive;  /* títulos graffiti, precios */
  --f-display:'Bangers','Impact',sans-serif;                         /* rotulación de cómic: botones, tarjetas */
  --f-marker:'Permanent Marker','Comic Sans MS',cursive;             /* notas a mano, links, etiquetas */
  --f-mono:'Special Elite','Courier New',monospace;                  /* máquina de escribir: datos, libreta */
  --f-body:'Patrick Hand','Comic Sans MS',cursive;                   /* texto general */
  --f-glitch:var(--f-graffiti);                                      /* alias antiguo */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--black)}
body{background:var(--black);color:var(--white);font-family:var(--f-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-booting{overflow:hidden}
body.has-cursor, body.has-cursor *{cursor:none!important}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
ul,ol{list-style:none}
::selection{background:var(--pink);color:var(--black)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--black)}::-webkit-scrollbar-thumb{background:var(--pink)}
.mono{font-family:var(--f-mono);letter-spacing:.05em}
.marker{font-family:var(--f-marker)}
[hidden]{display:none!important}
:focus-visible{outline:2px dashed var(--cyan);outline-offset:4px}

/* ---------- OVERLAYS ---------- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:90}
.fx-grain{opacity:.09;mix-blend-mode:overlay;animation:grain .6s steps(6) infinite;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{background-position:0 0}20%{background-position:-40px 30px}40%{background-position:30px -50px}60%{background-position:-60px -20px}80%{background-position:50px 40px}100%{background-position:0 0}}
.fx-scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;animation:flicker 5s infinite}
@keyframes flicker{0%,100%{opacity:.9}48%{opacity:.9}50%{opacity:.6}52%{opacity:.95}}
.fx-vignette{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65) 100%)}
.fx-slices{z-index:95;overflow:hidden}
.fx-slices i{position:absolute;left:0;width:100%;background:var(--pink);mix-blend-mode:screen;opacity:.0;animation:slice .22s steps(2) forwards}
.fx-slices i.c{background:var(--cyan)}
@keyframes slice{0%{opacity:.75;transform:translateX(var(--dx))}100%{opacity:0;transform:translateX(calc(var(--dx)*-1))}}
body.fx-low .fx-grain,body.fx-low .fx-scan{animation:none}
body.fx-low #trail,body.fx-low .fx-slices,body.fx-low .fx-scan,body.fx-low .fx-grain{display:none}
body.fx-low .glitch::before,body.fx-low .glitch::after{display:none}
body.fx-low .hero__rain{opacity:.14}
body.fx-low .hero__title{text-shadow:3px 3px 0 var(--pink-dim)}
body.fx-low .mascot__svg{filter:none}
body.fx-low .art:hover .art__ghost{opacity:0!important;animation:none!important}
body.fx-low .art__scan{display:none}

#trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10049}  /* por encima de visor y lector */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,40px);background:var(--black);border:2px solid var(--pink);color:var(--pink);font-family:var(--f-mono);padding:12px 20px;z-index:10001;opacity:0;transition:.3s;box-shadow:0 0 24px rgba(var(--pink-rgb),.5);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- CURSOR ---------- */
.cursor{position:fixed;left:0;top:0;z-index:10050;pointer-events:none;display:none}  /* siempre arriba de todo */
body.has-cursor .cursor{display:block}
.cursor__ring{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border:2px solid var(--pink);border-radius:50%;transition:width .25s,height .25s,margin .25s,background .25s,border-radius .25s,transform .25s;box-shadow:0 0 12px var(--pink),inset 0 0 8px rgba(var(--pink-rgb),.4)}
.cursor__ring::before,.cursor__ring::after{content:"";position:absolute;background:var(--pink)}
.cursor__ring::before{left:50%;top:-8px;width:2px;height:calc(100% + 16px);margin-left:-1px;opacity:.7}
.cursor__ring::after{top:50%;left:-8px;height:2px;width:calc(100% + 16px);margin-top:-1px;opacity:.7}
.cursor__dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--white);box-shadow:0 0 8px var(--cyan)}
.cursor__label{position:absolute;left:26px;top:22px;font:11px var(--f-mono);color:var(--black);background:var(--pink);padding:1px 6px;white-space:nowrap;opacity:0;transition:opacity .2s}
.cursor.is-hover .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(var(--pink-rgb),.15);transform:rotate(45deg)}
.cursor.is-hover .cursor__label{opacity:1}
.cursor.is-down .cursor__ring{transform:scale(.6) rotate(90deg)}

.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:9997;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--pink);box-shadow:0 0 12px var(--pink),4px 0 0 var(--cyan)}

/* ---------- BOOT ---------- */
.boot{position:fixed;inset:0;z-index:10002;background:var(--black);display:grid;place-items:center;padding:24px;transition:opacity .5s,filter .5s}
.boot.out{animation:bootOut .7s steps(8) forwards}
@keyframes bootOut{0%{transform:none}30%{transform:skewX(8deg) scale(1.02);filter:hue-rotate(90deg)}60%{clip-path:inset(40% 0 40% 0);opacity:1}100%{clip-path:inset(50% 0 50% 0);opacity:0;visibility:hidden}}
.boot__inner{width:min(640px,100%)}
.boot__log{font-family:var(--f-mono);color:var(--pink);font-size:clamp(12px,2.6vw,15px);min-height:230px;white-space:pre-wrap;text-shadow:0 0 8px rgba(var(--pink-rgb),.7)}
.boot__bar{height:14px;border:2px solid var(--pink);margin-top:14px;padding:2px}
.boot__bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--pink) 0 10px,transparent 10px 14px)}
.boot__pct{font-family:var(--f-mono);color:var(--pink);text-align:right;margin-top:6px}
.boot__enter{margin-top:22px;animation:pulse 1s infinite}
.boot__hint{margin-top:18px;font:12px var(--f-mono);color:#6d5a72}

/* ---------- GLITCH ---------- */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.glitch::before{color:var(--cyan);transform:translateX(-3px);animation:gA 2.8s infinite steps(1);mix-blend-mode:screen}
.glitch::after{color:var(--pink-hot);transform:translateX(3px);animation:gB 3.3s infinite steps(1);mix-blend-mode:screen}
@keyframes gA{0%{clip-path:inset(0 0 100% 0)}4%{clip-path:inset(12% 0 70% 0)}8%{clip-path:inset(62% 0 8% 0)}12%{clip-path:inset(0 0 100% 0)}55%{clip-path:inset(0 0 100% 0)}58%{clip-path:inset(40% 0 35% 0)}61%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes gB{0%{clip-path:inset(0 0 100% 0)}20%{clip-path:inset(0 0 100% 0)}23%{clip-path:inset(70% 0 5% 0)}27%{clip-path:inset(5% 0 80% 0)}30%{clip-path:inset(0 0 100% 0)}75%{clip-path:inset(0 0 100% 0)}78%{clip-path:inset(28% 0 50% 0)}82%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 100% 0)}}
.glitch:hover::before{animation-duration:.5s}.glitch:hover::after{animation-duration:.6s}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:16px var(--pad);transition:background .3s,padding .3s,backdrop-filter .3s;mix-blend-mode:normal}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(5,5,7,.82);backdrop-filter:blur(8px);border-bottom:1px solid rgba(var(--pink-rgb),.35);opacity:0;transition:opacity .3s}
.nav.scrolled{padding-top:10px;padding-bottom:10px}
.nav.scrolled::before{opacity:1}
.nav__logo{font-family:var(--f-glitch);font-size:26px;color:var(--pink);text-shadow:0 0 14px rgba(var(--pink-rgb),.7)}
.nav__links{display:flex;gap:clamp(12px,2.2vw,30px);align-items:center}
.nav__links a{font:13px var(--f-mono);text-transform:uppercase;letter-spacing:.12em;position:relative;padding:4px 2px}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--pink);box-shadow:0 0 8px var(--pink);transition:width .25s}
.nav__links a:hover::after,.nav__links a.active::after{width:100%}
.nav__links a.active{color:var(--pink)}
.nav__cta{border:2px solid var(--pink);padding:6px 14px!important;color:var(--pink)}
.nav__cta:hover{background:var(--pink);color:var(--black)}
.nav__lang{font:700 12px var(--f-mono);letter-spacing:.1em;border:2px solid var(--pink);color:var(--pink);padding:5px 10px;margin-left:16px;position:relative;z-index:102;transition:.2s}
.nav__lang:hover{background:var(--pink);color:var(--black)}
.nav__burger{display:none;width:44px;height:44px;position:relative;z-index:102}
.nav__burger span{position:absolute;left:8px;right:8px;height:3px;background:var(--pink);transition:.3s}
.nav__burger span:nth-child(1){top:14px}.nav__burger span:nth-child(2){top:21px}.nav__burger span:nth-child(3){top:28px}
.nav__burger[aria-expanded=true] span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded=true] span:nth-child(3){top:21px;transform:rotate(-45deg)}

.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:14px}
.dots li{width:10px;height:10px;border:2px solid var(--pink);transform:rotate(45deg);transition:.3s;position:relative;cursor:pointer}
.dots li.active{background:var(--pink);box-shadow:0 0 10px var(--pink)}
.dots li span{position:absolute;right:20px;top:-6px;font:11px var(--f-mono);transform:rotate(-45deg);white-space:nowrap;opacity:0;transition:.25s;color:var(--pink)}
.dots li:hover span{opacity:1}

.hud{position:fixed;left:14px;bottom:14px;z-index:99;display:flex;gap:8px}
.hud__btn{font:11px var(--f-mono);border:1px solid var(--pink);color:var(--pink);background:rgba(5,5,7,.8);padding:5px 9px;transition:.2s}
.hud__btn:hover{background:var(--pink);color:var(--black)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;font:700 14px var(--f-mono);text-transform:uppercase;letter-spacing:.12em;padding:14px 26px;position:relative;transition:transform .15s,box-shadow .2s,background .2s,color .2s;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.btn--solid{background:var(--pink);color:var(--black);box-shadow:0 0 0 0 var(--pink)}
.btn--solid:hover{background:var(--white);transform:translate(-2px,-2px)}
.btn--ghost{border:2px solid var(--pink);color:var(--pink);clip-path:none}
.btn--ghost:hover{background:var(--pink);color:var(--black);box-shadow:0 0 22px var(--pink)}
.btn--sq{padding:12px 16px}
@keyframes pulse{50%{box-shadow:0 0 28px var(--pink)}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:120px var(--pad) 80px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:20px;overflow:hidden;isolation:isolate}
.hero__rain{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:.55}
.hero__grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:55%;z-index:-2;transform:perspective(420px) rotateX(62deg);transform-origin:bottom;
  background:linear-gradient(var(--pink) 1px,transparent 1px) 0 0/60px 60px,linear-gradient(90deg,var(--pink) 1px,transparent 1px) 0 0/60px 60px;opacity:.28;animation:gridMove 2.4s linear infinite;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 85%);mask-image:linear-gradient(to top,#000,transparent 85%)}
@keyframes gridMove{to{background-position:0 60px,60px 0}}
.hero__sun{position:absolute;right:6%;top:14%;width:min(46vw,520px);aspect-ratio:1;border-radius:50%;z-index:-2;background:linear-gradient(180deg,var(--pink) 0%,#7b0a8c 70%);opacity:.32;filter:blur(2px);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);animation:sun 6s ease-in-out infinite alternate}
@keyframes sun{to{transform:translateY(24px) scale(1.04);opacity:.42}}
.hero__content{min-width:0}
.hero__pre{font-size:13px;color:var(--pink);margin-bottom:10px}
.dot-live{display:inline-block;width:9px;height:9px;background:var(--pink);border-radius:50%;margin-right:6px;animation:blink 1s steps(2) infinite;box-shadow:0 0 10px var(--pink)}
.hero__title{font-family:var(--f-glitch);font-size:clamp(56px,8vw,128px);line-height:.92;max-width:100%;color:var(--white);text-shadow:0 0 30px rgba(var(--pink-rgb),.55),4px 4px 0 var(--pink-dim);letter-spacing:.01em}
.hero__title::before,.hero__title::after{font-family:var(--f-glitch)}
.hero__alias{font-size:clamp(22px,3.5vw,38px);color:var(--pink);margin:8px 0 18px;transform:rotate(-2deg);display:inline-block}
.hero__alias span{background:var(--pink);color:var(--black);padding:0 10px;display:inline-block;transform:skew(-8deg)}
.hero__real{font-size:clamp(13px,1.6vw,17px);color:#d9cbdc;margin:-6px 0 16px}
.hero__real b{color:var(--white);background:rgba(var(--pink-rgb),.25);padding:0 6px}
.hero__roles{font-size:clamp(14px,2vw,20px);margin-bottom:28px;min-height:1.6em}
.caret{color:var(--pink)}.blink{animation:blink .9s steps(2) infinite;color:var(--pink);font-style:normal}
@keyframes blink{50%{opacity:0}}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}

.hero:has(.hero__mascot[hidden]){grid-template-columns:1fr}
.hero__mascot{position:relative;width:min(100%,430px);justify-self:center;animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-16px) rotate(1.5deg)}}
.mascot__svg{width:100%;filter:drop-shadow(0 0 18px rgba(var(--pink-rgb),.7))}
.mascot__halo{position:absolute;inset:8% 4%;border:2px dashed var(--pink);border-radius:50%;animation:spin 22s linear infinite;opacity:.45}
.mascot__halo::after{content:"";position:absolute;inset:-18px;border:1px solid var(--cyan);border-radius:50%;opacity:.5;animation:spin 14s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.mascot__tag{position:absolute;right:-6%;top:8%;background:var(--yellow);color:var(--black);padding:6px 12px;transform:rotate(8deg);font-size:14px;box-shadow:4px 4px 0 var(--pink);opacity:0;transition:.25s;pointer-events:none}
.hero__mascot:hover .mascot__tag{opacity:1;transform:rotate(-4deg) scale(1.05)}
.hero__mascot.glitching .mascot__svg{animation:mGlitch .35s steps(3) 2}
@keyframes mGlitch{0%{filter:drop-shadow(-8px 0 var(--cyan)) drop-shadow(8px 0 var(--pink));transform:skewX(6deg)}50%{transform:translateX(10px) skewX(-8deg);filter:hue-rotate(60deg) drop-shadow(0 0 20px var(--pink))}100%{transform:none}}
.ear--r{transform-origin:232px 175px;animation:twitch 4s infinite}
@keyframes twitch{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-9deg)}94%{transform:rotate(5deg)}}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:11px;color:var(--pink);display:flex;flex-direction:column;align-items:center;gap:6px}
.scroll-cue span{width:2px;height:40px;background:linear-gradient(var(--pink),transparent);animation:drip 1.6s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- PRESENTACIÓN ---------- */
.pitch{position:relative;padding:clamp(70px,9vw,120px) var(--pad) clamp(40px,6vw,80px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,70px);align-items:start}
.pitch__title{font:clamp(32px,4.6vw,60px) var(--f-display);line-height:1.05;text-transform:uppercase;margin:6px 0 18px}
.pitch__text{font-size:clamp(15px,1.5vw,17px);max-width:56ch;color:#d9cbdc}
.pitch__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.pitch__cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pitch__cards a{display:block;height:100%;border:1px solid rgba(var(--pink-rgb),.45);background:linear-gradient(160deg,rgba(var(--pink-rgb),.08),transparent);padding:20px 18px;transition:.25s}
.pitch__cards a:hover{border-color:var(--pink);transform:translateY(-6px);box-shadow:0 10px 30px rgba(var(--pink-rgb),.25)}
.pitch__cards b{font:12px var(--f-mono);color:var(--pink)}
.pitch__cards h3{font:24px var(--f-display);letter-spacing:.03em;margin:4px 0 6px;text-transform:uppercase}
.pitch__cards p{font-size:13px;color:#b7a3bd;line-height:1.5}
.process{grid-column:1/-1;display:flex;flex-wrap:wrap;counter-reset:p;border-top:1px solid rgba(var(--pink-rgb),.35);border-bottom:1px solid rgba(var(--pink-rgb),.35)}
.process li{flex:1 1 140px;counter-increment:p;padding:16px 10px 16px 0;font:13px var(--f-mono);text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;gap:10px}
.process li::before{content:counter(p,decimal-leading-zero);color:var(--pink);font-size:20px}
.process li:not(:last-child)::after{content:"→";margin-left:auto;color:var(--pink);opacity:.6;padding-right:10px}

/* ---------- CINTAS ---------- */
.tapes{position:relative;height:190px;margin:-30px 0 -40px;z-index:5;overflow:hidden}
.tape{position:absolute;left:-5%;width:110%;overflow:hidden;white-space:nowrap;padding:10px 0;font:700 clamp(15px,2.2vw,22px) var(--f-mono);letter-spacing:.08em}
.tape--a{top:48px;background:var(--pink);color:var(--black);transform:rotate(-2.4deg);box-shadow:0 0 30px rgba(var(--pink-rgb),.6)}
.tape--b{top:96px;background:var(--black);color:var(--pink);border-block:2px solid var(--pink);transform:rotate(1.8deg)}
.tape__track{display:inline-block;animation:marquee 26s linear infinite}
.tape--b .tape__track{animation-direction:reverse;animation-duration:32s}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
.section{position:relative;padding:clamp(80px,11vw,150px) var(--pad);overflow:hidden}
.section--alt{background:linear-gradient(180deg,var(--ink) 0%,var(--ink2) 100%)}
.section--alt::before{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;background:radial-gradient(var(--pink) 1.4px,transparent 1.6px) 0 0/14px 14px}
.sec-head{margin-bottom:clamp(30px,5vw,60px);position:relative}
.sec-num{color:var(--pink);font-size:14px;display:block;margin-bottom:6px}
.sec-title{font:clamp(44px,9vw,120px) var(--f-display);line-height:.95;text-transform:uppercase;letter-spacing:.01em;-webkit-text-stroke:0;text-shadow:5px 5px 0 var(--pink-dim)}
.sec-title::before,.sec-title::after{font-family:var(--f-display)}
.sec-sub{font-size:clamp(18px,2.4vw,26px);color:var(--pink);margin-top:10px;transform:rotate(-1.5deg);display:inline-block;position:relative}
.scribble{position:absolute;left:0;bottom:-10px;width:100%;height:12px;fill:none;stroke:var(--pink);stroke-width:3;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.2s .4s}
.in .scribble,.scribble.in{stroke-dashoffset:0}

[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].in .sec-title{animation:titleIn .9s steps(10) both}
@keyframes titleIn{0%{clip-path:inset(0 100% 0 0)}40%{clip-path:inset(0 30% 0 0);transform:translateX(-14px) skewX(10deg)}60%{clip-path:inset(0 0 0 0);transform:translateX(10px)}100%{clip-path:inset(0);transform:none}}

/* ---------- FILTROS + GALERÍA ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.chip-btn{font:13px var(--f-mono);text-transform:uppercase;letter-spacing:.1em;border:2px solid var(--pink);padding:8px 16px;color:var(--pink);transition:.2s;position:relative}
.chip-btn:hover{background:rgba(var(--pink-rgb),.18)}
.chip-btn.active{background:var(--pink);color:var(--black);box-shadow:0 0 18px var(--pink)}
.chip-btn sup{font-size:10px;margin-left:4px;opacity:.7}
.masonry{columns:3 280px;column-gap:24px}
.art{break-inside:avoid;margin-bottom:24px;perspective:900px;opacity:0;transform:translateY(40px) scale(.96);transition:opacity .6s,transform .6s}
.art.in{opacity:1;transform:none}
.art.hide{display:none}
.art.glitch-out{animation:artOut .35s steps(5) forwards}
@keyframes artOut{to{opacity:0;transform:translateX(30px) skewX(20deg);filter:hue-rotate(120deg)}}
.art__frame{position:relative;background:var(--ink);border:2px solid rgba(var(--pink-rgb),.45);overflow:hidden;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s,border-color .2s,box-shadow .3s;aspect-ratio:var(--ratio,.8);cursor:pointer}
.art:hover .art__frame{border-color:var(--pink);box-shadow:0 0 30px rgba(var(--pink-rgb),.55),8px 8px 0 var(--pink-dim)}
.art__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .3s}
.art:hover .art__frame img{transform:scale(1.06)}
.art__ghost{position:absolute;inset:0;background:var(--img) center/cover;mix-blend-mode:screen;opacity:0;pointer-events:none}
.art__ghost.r{filter:grayscale(1) sepia(1) hue-rotate(290deg) saturate(8)}
.art__ghost.c{filter:grayscale(1) sepia(1) hue-rotate(130deg) saturate(8)}
.art:hover .art__ghost.r{opacity:.65;animation:ghostR .45s steps(3) infinite}
.art:hover .art__ghost.c{opacity:.65;animation:ghostC .5s steps(3) infinite}
@keyframes ghostR{0%{transform:translate(-6px,0)}33%{transform:translate(5px,-3px)}66%{transform:translate(-3px,4px)}100%{transform:translate(0)}}
@keyframes ghostC{0%{transform:translate(6px,0)}33%{transform:translate(-5px,3px)}66%{transform:translate(3px,-4px)}100%{transform:translate(0)}}
.art__frame::before,.art__frame::after{content:"";position:absolute;width:22px;height:22px;z-index:3;border:3px solid var(--pink);transition:.3s;pointer-events:none}
.art__frame::before{left:8px;top:8px;border-right:0;border-bottom:0}
.art__frame::after{right:8px;bottom:8px;border-left:0;border-top:0}
.art:hover .art__frame::before{left:14px;top:14px}.art:hover .art__frame::after{right:14px;bottom:14px}
.art__scan{position:absolute;left:0;right:0;height:40%;top:-40%;background:linear-gradient(transparent,rgba(var(--pink-rgb),.35),transparent);z-index:2;pointer-events:none}
.art:hover .art__scan{animation:scanDown 1.1s linear infinite}
@keyframes scanDown{to{top:110%}}
.art__badge{position:absolute;left:10px;bottom:10px;z-index:4;font:11px var(--f-mono);background:var(--black);color:var(--pink);padding:2px 8px;border:1px solid var(--pink)}
.art__ph{position:absolute;right:10px;top:10px;z-index:4;font:10px var(--f-mono);background:var(--yellow);color:var(--black);padding:1px 6px;display:none}
.art.is-ph .art__ph{display:block}
.art__info{padding:10px 2px 0;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.art__info h3{font:22px var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.art__info span{font:12px var(--f-mono);color:var(--pink)}
.empty{color:var(--pink);font-size:18px;padding:40px 0}

/* ---------- CÓMICS ---------- */
.comics{position:relative}
.comics__track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 26px;scrollbar-width:none;user-select:none}
.comics__track::-webkit-scrollbar{display:none}
.comics__track.drag{scroll-snap-type:none}
.page{flex:0 0 clamp(240px,30vw,380px);scroll-snap-align:start;background:var(--white);padding:8px;border:3px solid var(--black);box-shadow:10px 10px 0 var(--pink);transform:rotate(var(--rot,0deg));transition:transform .3s;position:relative}
.page:hover{transform:rotate(0) translateY(-8px)}
.page img{width:100%;aspect-ratio:2/3;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.page figcaption{position:absolute;left:-8px;bottom:14px;background:var(--pink);color:var(--black);font:12px var(--f-mono);padding:2px 10px;transform:rotate(-3deg)}
.comics__ui{display:flex;align-items:center;gap:16px;margin-top:10px}
.comics__bar{flex:1;height:6px;background:rgba(var(--pink-rgb),.25)}
.comics__bar i{display:block;height:100%;width:20%;background:var(--pink);box-shadow:0 0 10px var(--pink)}

/* ---------- COMISIONES ---------- */
.status{display:inline-flex;align-items:center;gap:12px;font:14px var(--f-mono);border:2px solid var(--pink);padding:10px 18px;margin-bottom:38px}
.status i{width:12px;height:12px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink);animation:blink 1s steps(2) infinite}
.status.closed{border-color:#777;color:#999}.status.closed i{background:#777;box-shadow:none;animation:none}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.tier{position:relative;background:var(--ink);border:2px solid rgba(var(--pink-rgb),.5);padding:32px 26px;transition:transform .25s,box-shadow .3s,border-color .3s;overflow:hidden;transform-style:preserve-3d}
.tier::before{content:"";position:absolute;inset:-2px;background:conic-gradient(from 0deg,transparent,var(--pink),transparent 30%);opacity:0;transition:.3s;animation:spin 4s linear infinite;z-index:0}
.tier::after{content:"";position:absolute;inset:2px;background:var(--ink);z-index:0}
.tier>*{position:relative;z-index:1}
.tier:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:0 0 40px rgba(var(--pink-rgb),.4)}
.tier:hover::before{opacity:1}
.tier.hot{border-color:var(--pink)}
.tier__flag{position:absolute;right:-34px;top:16px;background:var(--yellow);color:var(--black);font:700 11px var(--f-mono);padding:3px 38px;transform:rotate(40deg);z-index:2}
.tier h3{font:34px var(--f-display);letter-spacing:.03em}
.tier__price{font:54px var(--f-glitch);color:var(--pink);line-height:1.1;margin:8px 0 2px;text-shadow:0 0 18px rgba(var(--pink-rgb),.6)}
.tier__note{font:12px var(--f-mono);color:#b7a3bd;text-transform:uppercase}
.tier ul{margin:18px 0 26px}
.tier li{padding:6px 0 6px 22px;position:relative;font-size:14px;border-bottom:1px dashed rgba(var(--pink-rgb),.25)}
.tier li::before{content:"✕";position:absolute;left:0;color:var(--pink)}
.howto{margin-top:60px;border:2px dashed var(--pink);padding:26px}
.howto h3{color:var(--pink);margin-bottom:12px;font-size:18px}
.howto ol{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.howto li{counter-increment:s;padding-left:46px;position:relative;font-size:14px}
.howto li::before{content:counter(s);position:absolute;left:0;top:-4px;font:34px var(--f-glitch);color:var(--pink)}

/* ---------- STICKERS ---------- */
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:30px}
.stk{position:relative;aspect-ratio:1;transform:rotate(var(--r,0deg));transition:transform .3s cubic-bezier(.3,1.6,.5,1);cursor:pointer}
.stk img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(6px 8px 10px rgba(0,0,0,.6))}
.stk:hover{transform:rotate(0) scale(1.14) translateY(-6px);z-index:3}
.stk::after{content:attr(data-title);position:absolute;left:50%;bottom:-22px;transform:translateX(-50%) scale(.6);font:11px var(--f-mono);background:var(--pink);color:var(--black);padding:1px 8px;opacity:0;transition:.25s;white-space:nowrap}
.stk:hover::after{opacity:1;transform:translateX(-50%) scale(1)}

/* ---------- TV ---------- */
.tv-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start}
.tv{background:#1a1420;border:4px solid #2c2236;border-radius:26px;padding:20px;box-shadow:0 0 0 3px var(--pink),0 0 50px rgba(var(--pink-rgb),.35);display:flex;gap:16px}
.tv__screen{position:relative;flex:1;aspect-ratio:4/3;background:#000;border-radius:16px/22px;overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,.9)}
.tv__screen video,.tv__screen canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tv__screen video{opacity:0}
.tv__screen.live video{opacity:1}.tv__screen.live canvas{opacity:.06}
.tv__screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px),radial-gradient(ellipse,transparent 55%,rgba(0,0,0,.6));pointer-events:none}
.tv__osd{position:absolute;left:14px;top:12px;z-index:3;color:var(--pink);font-size:15px;text-shadow:0 0 8px var(--pink)}
.tv__play{position:absolute;inset:0;margin:auto;width:76px;height:76px;z-index:3;border:3px solid var(--pink);border-radius:50%;background:rgba(5,5,7,.6);color:var(--pink);font-size:26px;transition:.2s}
.tv__play:hover{background:var(--pink);color:var(--black);transform:scale(1.12)}
.tv__panel{width:44px;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:10px}
.tv__knob{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#111);border:2px solid #333;position:relative}
.tv__knob::after{content:"";position:absolute;left:50%;top:3px;width:3px;height:10px;background:var(--pink);transform:translateX(-50%)}
.tv__led{width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink);animation:blink 1.2s steps(2) infinite;margin-top:auto}
.channels{display:flex;flex-direction:column;gap:10px}
.channels button{width:100%;text-align:left;font:14px var(--f-mono);border:2px solid rgba(var(--pink-rgb),.45);padding:14px 16px;display:flex;justify-content:space-between;transition:.2s}
.channels button:hover,.channels button.active{background:var(--pink);color:var(--black);border-color:var(--pink);transform:translateX(8px)}
.twitch{margin-top:60px;border:2px solid var(--pink);padding:28px;display:flex;flex-wrap:wrap;align-items:center;gap:26px;background:linear-gradient(90deg,rgba(var(--pink-rgb),.14),transparent)}
.twitch__title{font:clamp(26px,4vw,44px) var(--f-display)}
.twitch__title::before,.twitch__title::after{font-family:var(--f-display)}
.twitch__eq{display:flex;align-items:flex-end;gap:5px;height:60px}
.twitch__eq i{width:8px;background:var(--pink);animation:eq 1s infinite ease-in-out alternate;box-shadow:0 0 8px var(--pink)}
.twitch__eq i:nth-child(odd){animation-duration:.7s}.twitch__eq i:nth-child(3n){animation-duration:1.3s}
.twitch__eq i:nth-child(1){animation-delay:-.1s}.twitch__eq i:nth-child(2){animation-delay:-.4s}.twitch__eq i:nth-child(4){animation-delay:-.2s}.twitch__eq i:nth-child(5){animation-delay:-.6s}.twitch__eq i:nth-child(7){animation-delay:-.3s}
@keyframes eq{from{height:8px}to{height:60px}}
.twitch .btn{margin-left:auto}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,60px);align-items:start}
.term{background:#07050a;border:2px solid var(--pink);box-shadow:0 0 34px rgba(var(--pink-rgb),.3)}
.term__bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:2px solid var(--pink);background:rgba(var(--pink-rgb),.12)}
.term__bar i{width:11px;height:11px;border-radius:50%;background:var(--pink)}.term__bar i:nth-child(2){background:var(--yellow)}.term__bar i:nth-child(3){background:var(--cyan)}
.term__bar span{margin-left:auto;font-size:12px;color:var(--pink)}
.term__body{padding:22px;min-height:340px;white-space:pre-wrap;color:var(--white);font-size:clamp(13px,1.7vw,16px);line-height:1.8}
.term__body .p{color:var(--pink)}
.polaroid{position:relative;background:var(--white);padding:14px 14px 10px;color:var(--black);transform:rotate(3deg);box-shadow:10px 10px 0 var(--pink);width:min(100%,340px);margin:0 auto 30px;transition:transform .4s}
.polaroid:hover{transform:rotate(-2deg) scale(1.04)}
.polaroid__img{aspect-ratio:1;background:#000;overflow:hidden}
.polaroid__img img{width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(1.2)}
.polaroid figcaption{font-size:20px;text-align:center;padding-top:10px}
.tapepiece{position:absolute;left:50%;top:-16px;width:110px;height:32px;background:rgba(var(--pink-rgb),.75);transform:translateX(-50%) rotate(-4deg);mix-blend-mode:multiply}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chips li{font:12px var(--f-mono);border:1px solid var(--pink);padding:5px 12px;color:var(--pink);transition:.2s}
.chips li:hover{background:var(--pink);color:var(--black);transform:rotate(-3deg) scale(1.1)}

/* ---------- CONTACTO ---------- */
.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,70px)}
.form{display:flex;flex-direction:column;gap:20px}
.form label{font:12px var(--f-mono);color:var(--pink);letter-spacing:.14em;display:flex;flex-direction:column;gap:6px}
.form input,.form select,.form textarea{font:15px var(--f-body);background:var(--ink);color:var(--white);border:2px solid rgba(var(--pink-rgb),.5);padding:13px 14px;outline:0;transition:.2s;border-radius:0;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--pink);box-shadow:0 0 20px rgba(var(--pink-rgb),.4);background:#14091a}
.form .btn{align-self:flex-start}
.links{display:flex;flex-direction:column;gap:14px}
.link{display:flex;justify-content:space-between;align-items:center;gap:10px;border:2px solid rgba(var(--pink-rgb),.5);padding:20px 22px;position:relative;overflow:hidden;transition:.25s}
.link::before{content:"";position:absolute;inset:0;background:var(--pink);transform:translateX(-101%);transition:transform .3s;z-index:0}
.link>*{position:relative;z-index:1;transition:color .25s}
.link b{font:26px var(--f-display);letter-spacing:.05em}
.link span{font:12px var(--f-mono);color:var(--pink)}
.link:hover::before{transform:none}.link:hover>*{color:var(--black)}

/* ---------- FOOTER ---------- */
.footer{position:relative;text-align:center;padding:60px var(--pad) 50px;border-top:2px solid var(--pink);overflow:hidden}
.footer__big{font:clamp(70px,20vw,300px) var(--f-glitch);line-height:1;color:transparent;-webkit-text-stroke:2px var(--pink);opacity:.8}
.footer__big::before,.footer__big::after{font-family:var(--f-glitch);-webkit-text-stroke:0}
.footer p{font-size:13px;color:#b7a3bd;margin-top:14px}
.up{position:absolute;right:var(--pad);bottom:40px;font:700 16px var(--f-mono);border:2px solid var(--pink);padding:10px 14px;color:var(--pink);transition:.2s}
.up:hover{background:var(--pink);color:var(--black);transform:translateY(-8px)}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:10003;background:rgba(5,5,7,.94);backdrop-filter:blur(6px);display:grid;place-items:center;padding:60px 70px}
.lb[hidden]{display:none}
.lb__fig{max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px;align-items:center}
.lb__fig img{max-height:76vh;max-width:100%;object-fit:contain;border:2px solid var(--pink);box-shadow:0 0 50px rgba(var(--pink-rgb),.5);cursor:zoom-in;transition:transform .3s}
.lb__fig img.zoom{transform:scale(1.7);cursor:zoom-out}
.lb__fig img.glitch-in{animation:lbIn .5s steps(8)}
@keyframes lbIn{0%{clip-path:inset(0 0 100% 0);transform:translateX(-30px)}25%{clip-path:inset(30% 0 30% 0);transform:translateX(20px) skewX(10deg);filter:hue-rotate(120deg)}50%{clip-path:inset(0 0 40% 0);transform:translateX(-10px)}100%{clip-path:inset(0);transform:none;filter:none}}
.lb__cap{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;justify-content:center}
.lb__cap b{font:28px var(--f-display);text-transform:uppercase}
.lb__cap span{color:var(--pink);font-size:13px}
.lb__close,.lb__nav{position:absolute;color:var(--pink);font-size:28px;border:2px solid var(--pink);width:52px;height:52px;display:grid;place-items:center;background:var(--black);transition:.2s;z-index:2}
.lb__close{right:20px;top:20px}.lb__nav--prev{left:16px;top:50%;margin-top:-26px}.lb__nav--next{right:16px;top:50%;margin-top:-26px}
.lb__close:hover,.lb__nav:hover{background:var(--pink);color:var(--black);box-shadow:0 0 20px var(--pink)}

/* ---------- código Konami → la cueva: fundido a negro con glitch ---------- */
body.to-cave #main,body.to-cave .footer,body.to-cave .nav{animation:toCave .85s steps(6) forwards}
@keyframes toCave{0%{filter:none}40%{filter:hue-rotate(60deg) contrast(1.4);transform:skewX(4deg)}100%{filter:brightness(0);transform:scale(1.04)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:110px}
  .hero__title{font-size:clamp(56px,15vw,150px)}
  .hero__mascot{width:min(70%,340px);order:-1;margin-bottom:-10px}
  .tv-wrap,.about,.contact,.pitch{grid-template-columns:1fr}
  .dots{display:none}
  .nav__burger{display:block;margin-left:8px}
  .nav__lang{margin-left:auto}
  .nav__links{position:fixed;inset:0;background:rgba(5,5,7,.97);flex-direction:column;justify-content:center;gap:26px;transform:translateY(-100%);transition:transform .45s cubic-bezier(.8,0,.2,1);z-index:101}
  .nav__links.open{transform:none}
  .nav__links a{font-size:26px}
  .twitch .btn{margin-left:0}
  .lb{padding:70px 12px}
  .lb__nav{top:auto;bottom:14px;margin:0}
}
@media (max-width:560px){
  .masonry{columns:1}
  .pitch__cards{grid-template-columns:1fr}
  .tv{padding:12px}.tv__panel{display:none}
  .up{position:static;margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}

/* ==========================================================
   v2 — ARCHIVO REAL (media/ + categorías)
   ========================================================== */
:root{
  --tx-paper:url('../media/textures/indieground-gluedpaper-textures-02.webp');
  --tx-old:url('../media/textures/wildtextures-old-paper-texture-3.webp');
  --tx-dots:url('../media/textures/vintage-comic-style-dots-texture.webp');
  --tx-grunge:url('../media/textures/grunge-background-with-scratches-stains.webp');
  --tx-scratch:url('../media/textures/grunge-texture.webp');
}

/* nav con ícono real */
.nav__logo{display:flex;align-items:center;gap:10px}
.nav__icon{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(var(--pink-rgb),.6));transition:transform .3s}
.nav__logo:hover .nav__icon{transform:rotate(-12deg) scale(1.1)}

/* fondo grunge sutil en secciones oscuras */
.section:not(.section--paper):not(.section--wall)::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--tx-grunge) center/cover;opacity:.07;mix-blend-mode:screen;pointer-events:none}
.section{isolation:isolate}

/* ---------- HERO con arte real ---------- */
.hero-art{position:relative;justify-self:center;width:min(100%,460px);margin:0;transition:translate .4s ease-out}
.hero-art__frame{position:relative;aspect-ratio:var(--ratio,.8);border:3px solid var(--pink);overflow:hidden;background:var(--ink);box-shadow:0 0 50px rgba(var(--pink-rgb),.45),14px 14px 0 var(--pink-dim);transform:rotate(2deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s;cursor:pointer}
.hero-art__frame img{width:100%;height:100%;object-fit:cover}
.hero-art__frame:hover .art__ghost,.hero-art__frame.glitching .art__ghost{opacity:.6}
.hero-art__frame:hover .art__ghost.r,.hero-art__frame.glitching .art__ghost.r{animation:ghostR .45s steps(3) infinite}
.hero-art__frame:hover .art__ghost.c,.hero-art__frame.glitching .art__ghost.c{animation:ghostC .5s steps(3) infinite}
.hero-art__frame.glitching{animation:mGlitch .4s steps(3)}
.hero-art__tag{position:absolute;left:12px;top:12px;z-index:3;background:var(--black);color:var(--pink);border:1px solid var(--pink);font-size:11px;padding:2px 8px}
.hero-art__corner{position:absolute;width:30px;height:30px;border:3px solid var(--white);z-index:3;pointer-events:none}
.hero-art__corner--a{right:10px;top:10px;border-left:0;border-bottom:0}
.hero-art__corner--b{left:10px;bottom:10px;border-right:0;border-top:0}
.hero-art__badge{position:absolute;right:-34px;bottom:-30px;width:120px;z-index:4;filter:drop-shadow(0 0 14px rgba(var(--pink-rgb),.8));animation:spin 18s linear infinite;pointer-events:none}
body.fx-low .hero-art__frame:hover .art__ghost{opacity:0;animation:none}

/* ---------- CTA de sección ---------- */
.sec-cta{display:flex;justify-content:center;margin-top:44px}
.sec-cta .btn span{opacity:.75}

/* ---------- arte: info + transparencias ---------- */
.art__info h3{font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art--alpha .art__frame{background:var(--tx-paper) center/cover,#e9e4ea}
.art--alpha .art__frame img{object-fit:contain;padding:6%}
.art .art__frame img{background:var(--ink)}
.art--alpha .art__frame img{background:transparent}

/* ---------- ARCHIVO: tarjetas de categoría ---------- */
.archive{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.cat-card{position:relative;display:flex;flex-direction:column;border:2px solid rgba(var(--pink-rgb),.45);background:var(--ink);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .3s;min-height:360px}
.cat-card:hover{transform:translateY(-8px) rotate(-.6deg);border-color:var(--pink);box-shadow:0 0 34px rgba(var(--pink-rgb),.4),8px 8px 0 var(--pink-dim)}
.cat-card__img{position:relative;flex:1;min-height:220px;overflow:hidden}
.cat-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s,filter .3s;filter:saturate(.9) contrast(1.05)}
.cat-card:hover .cat-card__img img{transform:scale(1.08);filter:saturate(1.2)}
.cat-card__img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(5,5,7,.92));pointer-events:none}
.cat-card--alpha .cat-card__img{background:var(--tx-paper) center/cover,#e9e4ea}
.cat-card--alpha .cat-card__img img{object-fit:contain;padding:10%}
.cat-card__num{position:absolute;left:12px;top:10px;z-index:2;font-size:12px;background:var(--pink);color:var(--black);padding:1px 8px}
.cat-card__body{position:relative;padding:0 18px 18px;margin-top:-58px;z-index:2}
.cat-card__body h3{font:clamp(26px,2.6vw,34px) var(--f-display);text-transform:uppercase;line-height:1;text-shadow:3px 3px 0 var(--black)}
.cat-card__body p{font-size:13px;color:#d9cbdc;margin:8px 0 12px;line-height:1.45}
.cat-card__count{display:flex;justify-content:space-between;font-size:12px;color:var(--pink);border-top:1px dashed rgba(var(--pink-rgb),.4);padding-top:10px}
.cat-card__count b{color:var(--white);transition:.2s}
.cat-card:hover .cat-card__count b{color:var(--pink);letter-spacing:.1em}
.archive--mini{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.cat-card--mini{min-height:230px}
.cat-card--mini .cat-card__img{min-height:140px}
.cat-card--mini .cat-card__body p{display:none}
.cat-card--mini .cat-card__body h3{font-size:22px}

/* ---------- CÓMICS: sección papel + estante ---------- */
.section--paper{background:linear-gradient(rgba(244,234,246,.86),rgba(244,234,246,.86)),var(--tx-old) center/cover;color:var(--black)}
.section--paper .sec-title{color:var(--black);text-shadow:5px 5px 0 var(--pink)}
.section--paper .sec-title::before,.section--paper .sec-title::after{mix-blend-mode:multiply}
.section--paper .sec-num,.section--paper .sec-sub{color:var(--pink-dark)}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:40px 30px;perspective:1200px}
.book{display:flex;flex-direction:column;gap:14px;text-align:left;color:inherit}
.book__cover{position:relative;aspect-ratio:.71;transform:rotateY(-14deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;box-shadow:16px 18px 0 rgba(5,5,7,.9);border:3px solid var(--black);background:var(--black)}
.book__cover img{width:100%;height:100%;object-fit:cover}
.book__spine{position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.15),transparent)}
.book:hover .book__cover{transform:rotateY(0) rotateX(0) translateY(-10px) scale(1.03);box-shadow:10px 24px 0 var(--pink)}
.book__info h3{font:22px var(--f-display);text-transform:uppercase;line-height:1.05}
.book__info span{font-size:12px;color:var(--pink-dark)}
.book__info b{color:inherit}
.page-cat .book__info span{color:var(--pink)}
.shelf--page{margin-top:10px}

/* ---------- COMISIONES: muestras ---------- */
.samples{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:40px}
.sample{aspect-ratio:1;overflow:hidden;border:2px solid rgba(var(--pink-rgb),.4);transition:.25s;background:var(--ink)}
.sample img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.sample:hover{border-color:var(--pink);transform:translateY(-6px) rotate(-2deg);box-shadow:0 0 24px rgba(var(--pink-rgb),.45)}
.sample:hover img{transform:scale(1.1)}

/* ---------- STICKERS: muro de papel ---------- */
.section--wall{background:linear-gradient(rgba(240,236,242,.55),rgba(240,236,242,.55)),var(--tx-paper) center/cover,#ddd;color:var(--black)}
.section--wall .sec-title{color:var(--black);text-shadow:5px 5px 0 var(--pink)}
.section--wall .sec-num,.section--wall .sec-sub{color:var(--pink-dark)}
.lair{display:flex;align-items:center;gap:clamp(18px,4vw,40px);margin-bottom:40px;flex-wrap:wrap}
.lair__logo{width:clamp(120px,16vw,190px);filter:drop-shadow(4px 6px 0 rgba(5,5,7,.85));transform:rotate(-6deg)}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px 22px}
.wall .stk img{filter:drop-shadow(0 0 0 #fff) drop-shadow(5px 7px 6px rgba(0,0,0,.45))}
.wall__ui{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px}
.section--wall .btn--ghost{color:var(--black);border-color:var(--black);background:rgba(255,255,255,.6)}
.section--wall .btn--ghost:hover{background:var(--black);color:var(--pink)}
.stk{background:none;border:0;padding:0;opacity:0;transform:rotate(var(--r,0deg)) scale(.7);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.stk.in{opacity:1;transform:rotate(var(--r,0deg))}
.stk.in:hover{transform:rotate(0) scale(1.15) translateY(-6px)}
.stickers--page{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:34px 26px}

/* ---------- TV con arte ---------- */
.tv__screen{cursor:pointer}
.tv__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:0;transition:opacity .15s}
.tv__screen.live img{opacity:1}
.tv__screen.live canvas{opacity:.08}
button.tv__knob{cursor:pointer;transition:transform .3s}
button.tv__knob:hover{transform:rotate(60deg)}
.tv__hint{font-size:12px;color:#b7a3bd;margin-bottom:12px}
.channels{max-height:440px;overflow:auto;padding-right:6px}
.channels button{padding:11px 14px}

/* ---------- about + footer ---------- */
.about__more{text-align:center;margin-top:26px}
.footer__logo{width:min(300px,60vw);margin:0 auto 10px;filter:drop-shadow(0 0 18px rgba(var(--pink-rgb),.5))}
.footer--slim{padding:34px var(--pad)}
.footer--slim .up{bottom:24px}

/* ---------- PÁGINA DE CATEGORÍA ---------- */
.page-cat main{padding-top:0}
.cat-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;padding:140px var(--pad) 60px;overflow:hidden;isolation:isolate;border-bottom:2px solid var(--pink)}
.cat-hero::before{content:"";position:absolute;inset:-30px;z-index:-2;background:var(--cover) center/cover;filter:blur(14px) saturate(1.35) brightness(.7);transform:scale(1.1)}
.cat-hero__tex{position:absolute;inset:0;z-index:-1;background:var(--tex) center/cover;mix-blend-mode:overlay;opacity:.55;pointer-events:none}
.cat-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,5,7,.25) 0%,rgba(5,5,7,.55) 55%,rgba(5,5,7,.95) 100%);pointer-events:none}
.cat-hero__inner{width:100%}
.crumbs{font-size:13px;color:#d9cbdc;margin-bottom:18px}
.crumbs a{color:var(--pink)}.crumbs a:hover{text-decoration:underline}
.cat-hero__num{display:block;color:var(--pink);font-size:14px}
.cat-hero__title{font:clamp(48px,10vw,140px) var(--f-display);line-height:.92;text-transform:uppercase;text-shadow:6px 6px 0 var(--pink-dim);word-break:break-word}
.cat-hero__title::before,.cat-hero__title::after{font-family:var(--f-display)}
.cat-hero__desc{font-size:clamp(18px,2.4vw,26px);color:var(--pink);margin-top:12px;transform:rotate(-1deg);max-width:44ch}
.cat-hero__count{margin-top:16px;display:inline-block;background:var(--pink);color:var(--black);padding:3px 12px;font-size:13px}
.cat-body{padding-top:50px}
.filters .bg-pick{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;color:var(--pink)}
.bg-pick button{width:30px;height:30px;border:2px solid rgba(var(--pink-rgb),.4);padding:3px}
.bg-pick button.active{border-color:var(--pink);box-shadow:0 0 10px var(--pink)}
.sw{display:block;width:100%;height:100%}
.sw--dark{background:var(--black)}.sw--paper{background:var(--tx-paper) center/cover,#e9e4ea}.sw--light{background:#fff}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.logo-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;aspect-ratio:1;padding:24px;border:2px solid rgba(var(--pink-rgb),.45);transition:.25s}
.logo-tile img{max-width:100%;max-height:80%;object-fit:contain;transition:transform .35s}
.logo-tile span{font-size:12px;color:var(--pink)}
.logo-tile:hover{border-color:var(--pink);box-shadow:0 0 26px rgba(var(--pink-rgb),.4)}
.logo-tile:hover img{transform:scale(1.06) rotate(-2deg)}
.logos.bg-dark .logo-tile{background:var(--ink)}
.logos.bg-paper .logo-tile{background:var(--tx-paper) center/cover,#e9e4ea}
.logos.bg-light .logo-tile{background:#fff}
.logos.bg-paper .logo-tile span,.logos.bg-light .logo-tile span{color:var(--pink-dark)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:60px}
.pager__link{display:flex;flex-direction:column;gap:4px;border:2px solid var(--pink);padding:20px 24px;transition:.25s}
.pager__link span{font-size:12px;color:var(--pink)}
.pager__link b{font:clamp(24px,3vw,38px) var(--f-display);text-transform:uppercase}
.pager__link--next{text-align:right}
.pager__link:hover{background:var(--pink);color:var(--black)}
.pager__link:hover span{color:var(--black)}
.sec-title--sm{font-size:clamp(34px,5vw,64px);margin-bottom:26px}
.page-cat .masonry{columns:4 240px}

/* ---------- VISOR / LECTOR ---------- */
.lb__fig{position:relative}
.lb__fig.loading::after{content:"";position:absolute;left:50%;top:40%;width:40px;height:40px;margin:-20px;border:3px solid var(--pink);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.lb__fig img{background:transparent}
.lb.light{background:rgba(236,232,238,.97)}
.lb.light .lb__cap b{color:var(--black)}
.lb__tool{border:1px solid var(--pink);color:var(--pink);width:30px;height:30px;display:inline-grid;place-items:center;font-size:15px;transition:.2s}
.lb__tool:hover{background:var(--pink);color:var(--black)}
.lb__range{width:min(520px,80vw);accent-color:var(--pink)}
.lb.reader .lb__fig img{max-height:80vh;border-color:var(--white);box-shadow:0 0 0 6px var(--black),0 0 60px rgba(var(--pink-rgb),.4)}
.lb__fig img.page-in{animation:pageIn .28s ease-out}
@keyframes pageIn{from{opacity:.2;transform:translateX(18px)}to{opacity:1;transform:none}}

/* ---------- responsive v2 ---------- */
@media (max-width:980px){
  .hero-art{width:min(78%,380px);order:-1;margin:0 auto 10px}
  .hero-art__badge{width:86px;right:-18px;bottom:-20px}
  .samples{grid-template-columns:repeat(3,1fr)}
  .cat-hero{min-height:52vh;padding-top:120px}
}
@media (max-width:560px){
  .archive{grid-template-columns:1fr 1fr;gap:12px}
  .cat-card{min-height:250px}
  .cat-card__img{min-height:150px}
  .cat-card__body{padding:0 12px 12px;margin-top:-44px}
  .cat-card__body h3{font-size:20px}
  .cat-card__body p{display:none}
  .cat-card__count{flex-direction:column;gap:2px}
  .shelf{grid-template-columns:1fr 1fr;gap:28px 18px}
  .book__info h3{font-size:17px}
  .wall{grid-template-columns:repeat(3,1fr);gap:12px}
  .stickers--page{grid-template-columns:repeat(3,1fr);gap:18px 12px}
  .page-cat .masonry{columns:2;column-gap:12px}
  .page-cat .art{margin-bottom:12px}
  .page-cat .art__info h3{font-size:15px}
  .pager{grid-template-columns:1fr}
  .pager__link--next{text-align:left}
  .filters .bg-pick{margin-left:0}
}
.sec-cta .btn{text-align:center}
@media (max-width:560px){.sec-cta .btn,.wall__ui .btn{font-size:12px;padding:12px 16px;letter-spacing:.08em}}

/* ==========================================================
   v3 — GRAFFITI / DOODLE / ZINE
   Menos ciber, más spray, marcador, cinta y papel.
   ========================================================== */
:root{
  --cyan:#8ff0bd;          /* menta del logo D-Rabbit */
  --mint:#8ff0bd;
  --yellow:#ffe14d;
  --paper:#f4eee6;
  --wobble:255px 15px 225px 15px/15px 225px 15px 255px;
  --wobble2:15px 255px 15px 225px/225px 15px 255px 15px;
}
body{font-size:18px;line-height:1.55;background:var(--black) url('doodles.svg') 0 0/420px 420px}
.mono{letter-spacing:.02em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--mint);color:var(--black)}

/* fuera la capa ciber */
.fx-scan,.hero__rain,.hero__grid,.hero__sun{display:none!important}
.fx-grain{opacity:.12;mix-blend-mode:soft-light}
.fx-slices i{background:var(--pink);opacity:.5}
.fx-slices i.c{background:var(--mint)}
.glitch::before,.glitch::after{display:none}

/* garabatos que "hierven" (animación cuadro a cuadro) */
@keyframes boil{0%{transform:translate(0,0) rotate(var(--rot,0deg))}33%{transform:translate(1px,-1px) rotate(calc(var(--rot,0deg) + 1.5deg))}66%{transform:translate(-1px,1px) rotate(calc(var(--rot,0deg) - 1deg))}100%{transform:translate(0,0) rotate(var(--rot,0deg))}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.doodle{fill:none;stroke:var(--pink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;animation:boil .45s steps(1) infinite}
body.fx-low .doodle{animation:none}

/* ---------- cursor de spray ---------- */
.cursor__ring{border:0;border-radius:0;box-shadow:none;background:url('scribble-circle.svg') center/contain no-repeat;animation:boil .4s steps(1) infinite}
.cursor__ring::before,.cursor__ring::after{display:none}
.cursor__dot{border-radius:50%;background:var(--pink);box-shadow:0 0 6px var(--pink)}
.cursor.is-hover .cursor__ring{background-color:transparent;transform:rotate(-8deg) scale(1.05)}
.cursor__label{font:15px var(--f-marker);background:var(--yellow);color:var(--black);padding:0 8px;transform:rotate(-4deg);border:2px solid var(--black)}
.progress i{background:var(--pink);box-shadow:none;height:5px;border-radius:0 4px 4px 0}

/* ---------- BOTONES tipo sticker ---------- */
.btn{font:22px var(--f-display);letter-spacing:.06em;clip-path:none;padding:10px 24px 8px;border-radius:var(--wobble);border:3px solid var(--black);transform:rotate(-1deg);transition:transform .15s,box-shadow .15s,background .2s,color .2s}
.btn--solid{background:var(--pink);color:var(--black);box-shadow:5px 5px 0 var(--white)}
.btn--solid:hover{background:var(--mint);transform:rotate(1deg) translate(-2px,-2px);box-shadow:8px 8px 0 var(--white)}
.btn--solid:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--white)}
.btn--ghost{border:3px solid var(--pink);color:var(--pink);border-radius:var(--wobble2);box-shadow:4px 4px 0 rgba(var(--pink-rgb),.35);background:transparent}
.btn--ghost:hover{background:var(--pink);color:var(--black);box-shadow:6px 6px 0 var(--white);transform:rotate(1deg)}
.btn--sq{padding:8px 14px}
.boot__enter{font-size:22px}

/* ---------- NAV ---------- */
.nav__name{font:30px var(--f-graffiti);color:var(--white);text-shadow:3px 3px 0 var(--pink)}
.nav__links a{font:19px var(--f-marker);text-transform:none;letter-spacing:0}
.nav__links a::after{height:8px;bottom:-6px;background:url('drips.svg') left top/100% 100% no-repeat;box-shadow:none}
.nav__cta{border-radius:var(--wobble);padding:4px 14px!important;border-width:3px!important}
.nav__cta::after{display:none}
.nav__links a:hover{animation:wiggle .3s steps(2)}
.nav__lang,.hud__btn{font-family:var(--f-mono);border-radius:var(--wobble);border-width:2px}
.nav::before{background:rgba(5,5,7,.9);border-bottom:3px solid var(--pink)}
.dots li{border-radius:50%;transform:none;width:12px;height:12px}
.dots li span{transform:none;font:14px var(--f-marker);right:22px;top:-5px}

/* ---------- HERO ---------- */
.hero{background:radial-gradient(ellipse at 70% 40%,rgba(var(--pink-rgb),.18),transparent 60%)}
.hero__doodles{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__doodles .doodle{position:absolute;opacity:.85}
.d1{width:64px;left:5%;top:16%;--rot:-12deg}
.d2{width:46px;left:46%;top:12%;stroke:var(--mint)!important}
.d3{width:48px;right:4%;top:20%;stroke:var(--yellow)!important}
.d4{width:60px;left:40%;bottom:16%}
.d5{width:70px;right:9%;bottom:10%;stroke:var(--white)!important;opacity:.5!important}
.d6{width:120px;left:4%;bottom:9%;stroke:var(--mint)!important}
.d7{width:38px;left:56%;top:36%;stroke:var(--yellow)!important}
.d8{width:60px;left:30%;top:6%}
.hero__pre{font-size:15px;color:var(--mint);margin-bottom:6px}
.hero__title{position:relative;display:block;max-width:min(640px,100%);margin:6px 0 4px;text-shadow:none}
.hero__logo{width:100%;filter:drop-shadow(5px 5px 0 var(--black));clip-path:inset(0 100% 0 0);transform:rotate(-3deg)}
.hero__title.sprayed .hero__logo{animation:sprayIn 1s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes sprayIn{0%{clip-path:inset(0 100% 0 0);filter:blur(6px) drop-shadow(6px 6px 0 var(--pink))}70%{filter:blur(0) drop-shadow(6px 6px 0 var(--pink))}100%{clip-path:inset(0 0 0 0);filter:drop-shadow(5px 5px 0 var(--black))}}
.hero__crown{position:absolute;left:4%;top:-34px;width:88px;--rot:-14deg;stroke:var(--yellow);opacity:0;transition:opacity .3s 1s}
.hero__title.sprayed .hero__crown{opacity:1}
.hero__alias{margin:4px 0 12px}
.hero__alias span{border-radius:var(--wobble)}
.hero__real{font-size:15px}
.hero__real b{background:none;border-bottom:3px solid var(--pink);padding:0 2px;color:var(--white)}
.hero__roles{display:flex;align-items:center;gap:10px;font:clamp(24px,3vw,34px) var(--f-display);letter-spacing:.04em;color:var(--white);min-height:1.3em;margin-bottom:26px}
.hero__arrow{width:52px;flex:none;fill:none;stroke:var(--pink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;animation:boil .5s steps(1) infinite}
.pop{animation:popIn .35s cubic-bezier(.3,1.7,.5,1)}
@keyframes popIn{0%{transform:scale(.6) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
/* foto del hero: pegada con cinta */
.hero-art{margin-top:30px}
.hero-art__frame{border:8px solid var(--paper);border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.6),12px 12px 0 var(--pink);transform:rotate(3deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hero-art__frame .art__ghost,.hero-art__tag,.hero-art__corner{display:none}
.hero-art::before,.hero-art::after{content:"";position:absolute;z-index:5;width:110px;height:32px;background:rgba(143,240,189,.75);top:-12px;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.hero-art::before{left:-18px;transform:rotate(-28deg)}
.hero-art::after{right:-14px;transform:rotate(24deg);background:rgba(var(--pink-rgb),.7)}
.hero-art__badge{animation:boil .5s steps(1) infinite;--rot:8deg;width:130px;right:-40px;bottom:-34px}
.hero-art__note{position:absolute;left:-118px;bottom:22%;display:flex;flex-direction:column;align-items:flex-end;font-size:22px;color:var(--yellow);transform:rotate(-8deg);z-index:6}
.hero-art__note svg{width:70px;fill:none;stroke:var(--yellow);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1) rotate(-30deg);margin-right:-30px;animation:boil .5s steps(1) infinite}
.scroll-cue{font-family:var(--f-marker);font-size:15px}

/* ---------- CINTAS (cinta de construcción / papel) ---------- */
.tape{font:clamp(20px,2.6vw,28px) var(--f-display);letter-spacing:.06em;padding:8px 0 6px}
.tape--a{box-shadow:0 6px 0 rgba(0,0,0,.4)}
.tape--b{font-family:var(--f-marker);letter-spacing:.02em;background:var(--paper);color:var(--black);border:0;box-shadow:0 6px 0 rgba(0,0,0,.4)}

/* ---------- TÍTULOS: graffiti + chorreado ---------- */
.sec-num{font-size:15px;color:var(--mint)}
.sec-title{font-family:var(--f-graffiti);font-size:clamp(50px,9vw,118px);line-height:1;text-transform:none;letter-spacing:0;color:var(--white);text-shadow:4px 4px 0 var(--pink),0 0 28px rgba(var(--pink-rgb),.35)}
.sec-title::after{content:"";display:block;position:static;width:min(100%,460px);height:30px;margin:-4px 0 0 6px;background:url('drips.svg') left top/100% 100% no-repeat;transform-origin:left top;animation:none;clip-path:none}
.sec-title::before{display:none}
[data-reveal].in .sec-title{animation:sprayTitle .8s cubic-bezier(.3,.7,.2,1) both}
[data-reveal].in .sec-title::after{animation:drip 1.2s .5s cubic-bezier(.3,.7,.2,1) both}
@keyframes sprayTitle{0%{clip-path:inset(-20% 100% -20% 0);filter:blur(5px)}100%{clip-path:inset(-20% -5% -20% 0);filter:none}}
@keyframes drip{0%{transform:scaleY(.15);opacity:0}100%{transform:none;opacity:1}}
.sec-sub{font-size:clamp(20px,2.4vw,28px)}
.sec-title--sm{font-size:clamp(40px,6vw,72px)}

/* papel rasgado en secciones claras */
.section--paper,.section--wall{clip-path:polygon(0 14px,4% 4px,9% 12px,14% 2px,19% 11px,24% 3px,30% 13px,35% 4px,41% 10px,46% 1px,52% 12px,57% 3px,63% 11px,68% 2px,74% 12px,79% 4px,85% 13px,90% 3px,95% 11px,100% 4px,100% calc(100% - 10px),95% calc(100% - 2px),89% calc(100% - 12px),83% calc(100% - 3px),77% calc(100% - 11px),71% calc(100% - 1px),65% calc(100% - 12px),58% calc(100% - 4px),52% calc(100% - 13px),46% calc(100% - 3px),40% calc(100% - 11px),33% calc(100% - 2px),27% calc(100% - 12px),20% calc(100% - 4px),14% calc(100% - 12px),8% calc(100% - 2px),3% calc(100% - 10px),0 calc(100% - 3px));margin:-8px 0}
.section--paper .sec-title,.section--wall .sec-title{color:var(--black);text-shadow:4px 4px 0 var(--pink)}
.section--paper .sec-num,.section--wall .sec-num{color:#0d7a4a}
.section--alt::before{background:url('doodles.svg') 0 0/420px 420px;opacity:.9}

/* ---------- PIEZAS: impresas y pegadas con cinta ---------- */
.art{position:relative}
.art::before{content:"";position:absolute;z-index:6;left:50%;top:-10px;width:78px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(var(--pink-rgb),.55);box-shadow:0 1px 3px rgba(0,0,0,.35);pointer-events:none}
.art:nth-child(3n+1)::before{background:rgba(143,240,189,.6);transform:translateX(-50%) rotate(4deg)}
.art:nth-child(3n+2)::before{background:rgba(255,225,77,.6);transform:translateX(-40%) rotate(-6deg)}
.art__frame{border:6px solid var(--paper);border-radius:3px;box-shadow:0 10px 22px rgba(0,0,0,.55);rotate:-1deg}
.art:nth-child(2n) .art__frame{rotate:1.2deg}
.art:nth-child(3n) .art__frame{rotate:-.4deg}
.art:hover .art__frame{border-color:var(--paper);box-shadow:8px 8px 0 var(--pink),0 14px 30px rgba(0,0,0,.6);rotate:0deg}
.art__frame::before,.art__frame::after,.art__ghost,.art__scan{display:none!important}
.art__badge{left:auto;right:8px;bottom:8px;font:16px var(--f-marker);background:var(--yellow);color:var(--black);border:2px solid var(--black);border-radius:50%;width:42px;height:42px;display:grid;place-items:center;padding:0;transform:rotate(-10deg)}
.art__info{padding-top:12px}
.art__info h3{font:22px var(--f-display);letter-spacing:.04em}
.art__info span{font-family:var(--f-marker);color:var(--mint)}
.art--alpha .art__frame{background:var(--tx-paper) center/cover,#e9e4ea}

/* ---------- ARCHIVO: carpetas pegadas ---------- */
.cat-card{border:5px solid var(--paper);border-radius:4px;rotate:-.8deg;box-shadow:0 12px 26px rgba(0,0,0,.55)}
.cat-card:nth-child(2n){rotate:1deg}
.cat-card:nth-child(3n){rotate:-.3deg}
.cat-card:hover{rotate:0deg;border-color:var(--paper);box-shadow:10px 10px 0 var(--pink),0 18px 30px rgba(0,0,0,.6);transform:translateY(-8px)}
.cat-card::before{content:"";position:absolute;z-index:4;right:-14px;top:14px;width:84px;height:24px;background:rgba(143,240,189,.7);transform:rotate(38deg);pointer-events:none}
.cat-card:nth-child(2n)::before{background:rgba(var(--pink-rgb),.6);left:-16px;right:auto;transform:rotate(-36deg)}
.cat-card__num{font:18px var(--f-marker);background:var(--yellow);border:2px solid var(--black);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;padding:0;transform:rotate(-8deg)}
.cat-card__body h3{font:clamp(32px,3vw,42px) var(--f-display);letter-spacing:.03em;text-shadow:3px 3px 0 var(--black),-1px -1px 0 var(--black)}
.cat-card__body p{font-size:16px}
.cat-card__count{font-family:var(--f-mono);font-size:13px;border-top:2px dashed rgba(var(--pink-rgb),.5)}
.cat-card__count b{font:18px var(--f-marker)}

/* ---------- CÓMICS ---------- */
.book__info h3{font:26px var(--f-display);letter-spacing:.03em}
.book__info span{font-family:var(--f-marker);font-size:15px}
.book__cover{border-radius:2px 6px 6px 2px}

/* ---------- PRESENTACIÓN ---------- */
.pitch__title{font:clamp(38px,5vw,64px) var(--f-display);letter-spacing:.03em;text-transform:none}
.pitch__text{font-size:clamp(18px,1.6vw,21px)}
.pitch__cards a{border:3px solid var(--pink);border-radius:var(--wobble);background:rgba(var(--pink-rgb),.06)}
.pitch__cards li:nth-child(2n) a{border-radius:var(--wobble2);border-color:var(--mint)}
.pitch__cards li:nth-child(2n) b{color:var(--mint)}
.pitch__cards a:hover{transform:rotate(-1.5deg) translateY(-6px);box-shadow:6px 6px 0 var(--pink)}
.pitch__cards b{font:16px var(--f-marker)}
.pitch__cards h3{font:28px var(--f-display);letter-spacing:.04em}
.pitch__cards p{font-size:16px}
.process{border-style:dashed;border-width:2px 0}
.process li{font:20px var(--f-marker);text-transform:none;letter-spacing:0}
.process li::before{font:24px var(--f-display);color:var(--pink)}

/* ---------- COMISIONES: etiquetas de precio ---------- */
.tier{border:3px dashed var(--pink);border-radius:var(--wobble2);background:var(--ink)}
.tier::before,.tier::after{display:none}
.tier:hover{box-shadow:8px 8px 0 var(--pink)}
.tier.hot{border-style:solid;background:linear-gradient(160deg,rgba(var(--pink-rgb),.14),var(--ink))}
.tier h3{font:38px var(--f-display);letter-spacing:.04em}
.tier__price{font:60px var(--f-graffiti);text-shadow:3px 3px 0 var(--black),0 0 18px rgba(var(--pink-rgb),.4)}
.tier__note{font:16px var(--f-marker);text-transform:none}
.tier li{font-size:17px}
.tier li::before{content:"★";color:var(--yellow)}
.tier__flag{font:18px var(--f-display);letter-spacing:.06em;right:-6px;top:-8px;padding:4px 14px;transform:rotate(8deg);border:2px solid var(--black);border-radius:var(--wobble);clip-path:none}
.tier{overflow:visible}
.status{font:16px var(--f-mono);border-radius:var(--wobble);border-width:3px}
.status i{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.howto{border-radius:var(--wobble);border-width:3px}
.howto h3{font:26px var(--f-display);letter-spacing:.04em}
.howto li{font-size:17px}
.howto li::before{font:40px var(--f-graffiti)}
.sample{border:5px solid var(--paper);border-radius:3px}
.sample:nth-child(2n){rotate:2deg}.sample:nth-child(2n+1){rotate:-2deg}

/* ---------- STICKERS / TV / TWITCH ---------- */
.stk::after{font:15px var(--f-marker);border-radius:var(--wobble);background:var(--yellow);color:var(--black)}
.wall__ui .btn--ghost{box-shadow:4px 4px 0 var(--black)}
.tv{border-radius:30px;box-shadow:0 0 0 4px var(--pink),12px 12px 0 var(--black),0 0 40px rgba(var(--pink-rgb),.25);rotate:-.6deg}
.tv__osd{font-size:16px}
.channels button{font:17px var(--f-marker);border-radius:var(--wobble);border-width:2px}
.channels button span:first-child{font-family:var(--f-mono);font-size:13px}
.twitch{border:3px solid var(--pink);border-radius:var(--wobble);background:linear-gradient(90deg,rgba(var(--pink-rgb),.12),transparent)}
.twitch__title{font:clamp(30px,4vw,48px) var(--f-display);letter-spacing:.04em}

/* ---------- SOBRE MÍ: hoja de libreta ---------- */
.term{background:repeating-linear-gradient(var(--paper) 0 30px,#b7cfe8 30px 31.5px);border:0;box-shadow:10px 10px 0 var(--pink),0 18px 30px rgba(0,0,0,.5);border-radius:3px;rotate:-1deg;position:relative}
.term::before{content:"";position:absolute;left:44px;top:0;bottom:0;width:2px;background:#ff6b8a;opacity:.8}
.term__bar{background:var(--pink);border:0;padding:8px 14px}
.term__bar i{background:var(--black)!important;width:14px;height:14px}
.term__bar span{color:var(--black);font-size:14px}
.term__body{color:#1b1520;font-family:var(--f-mono);font-size:clamp(14px,1.6vw,17px);line-height:31.5px;padding:0 22px 22px 60px;margin-top:-1px}
.term__body .p{color:var(--pink-dark)}
.term__body .blink{color:var(--black)}
.chips li{font:16px var(--f-marker);border-radius:var(--wobble);border-width:2px;padding:4px 14px}
.chips li:nth-child(2n){border-color:var(--mint);color:var(--mint);border-radius:var(--wobble2)}

/* ---------- CONTACTO ---------- */
.form label{font:15px var(--f-marker);letter-spacing:.02em;color:var(--mint)}
.form input,.form select,.form textarea{font:19px var(--f-body);border:3px solid rgba(var(--pink-rgb),.6);border-radius:var(--wobble2)}
.link{border:3px solid var(--pink);border-radius:var(--wobble)}
.link:nth-child(2n){border-radius:var(--wobble2)}
.link b{font:30px var(--f-display);letter-spacing:.05em}
.link span{font-family:var(--f-marker)}
.link::before{background:var(--pink)}

/* ---------- FOOTER ---------- */
.footer{background:var(--black) url('doodles.svg') 0 0/420px 420px;border-top:4px solid var(--pink)}
.footer__logo{width:min(380px,70vw);filter:drop-shadow(5px 5px 0 var(--pink));transform:rotate(-3deg)}
.footer p{font-family:var(--f-mono)}
.up{font:20px var(--f-display);border-radius:var(--wobble);border-width:3px}

/* ---------- CATEGORÍA ---------- */
.cat-hero__title{font-family:var(--f-graffiti);text-transform:none;font-size:clamp(56px,11vw,150px);text-shadow:5px 5px 0 var(--pink),0 0 30px rgba(var(--pink-rgb),.4);line-height:1.05}
.cat-hero__title.sprayed{animation:sprayTitle .9s cubic-bezier(.3,.7,.2,1) both}
.cat-hero__title::after{content:"";display:block;width:min(100%,520px);height:32px;background:url('drips.svg') left top/100% 100% no-repeat;margin-top:-6px}
.cat-hero__count{font-family:var(--f-marker);font-size:16px;border-radius:var(--wobble);transform:rotate(-2deg)}
.crumbs{font-family:var(--f-mono)}
.chip-btn{font:17px var(--f-marker);text-transform:none;letter-spacing:0;border-radius:var(--wobble);border-width:3px;padding:6px 16px}
.chip-btn:nth-child(2n){border-radius:var(--wobble2)}
.chip-btn.active{box-shadow:4px 4px 0 var(--white);transform:rotate(-1.5deg)}
.logo-tile{border:5px solid var(--paper);border-radius:3px}
.logo-tile span{font-family:var(--f-marker);font-size:15px}
.pager__link{border-width:3px;border-radius:var(--wobble)}
.pager__link b{font:clamp(28px,3.4vw,44px) var(--f-display);letter-spacing:.04em}
.pager__link span{font-family:var(--f-marker);font-size:15px}

/* ---------- VISOR ---------- */
.lb__fig img{border:8px solid var(--paper);border-radius:3px;box-shadow:12px 12px 0 var(--pink),0 20px 50px rgba(0,0,0,.6)}
.lb__fig img.glitch-in{animation:lbPop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes lbPop{from{transform:scale(.92) rotate(-2deg);opacity:0}to{transform:none;opacity:1}}
.lb__cap b{font:32px var(--f-display);letter-spacing:.04em;text-transform:none}
.lb__cap span{font-family:var(--f-marker);font-size:16px}
.lb__close,.lb__nav{border-radius:50%;border-width:3px;font-family:var(--f-display)}
.lb__tool{border-radius:50%}
.lb.reader .lb__fig img{border-color:var(--paper);box-shadow:0 0 0 3px var(--black),12px 12px 0 var(--pink)}

/* ---------- BOOT: cuaderno de bitácora ---------- */
.boot__log{font-family:var(--f-mono);text-shadow:none}
.boot__bar{border-radius:var(--wobble);border-width:3px}
.boot__bar i{background:repeating-linear-gradient(-45deg,var(--pink) 0 10px,var(--mint) 10px 20px);border-radius:inherit}
.boot__hint{font-family:var(--f-marker)}

/* ---------- responsive v3 ---------- */
@media (max-width:980px){
  .hero-art__note{left:auto;right:-6px;bottom:auto;top:-30px;font-size:18px}
  .hero-art__note svg{display:none}
  .hero__title{margin:20px auto 4px}
  .hero__content{text-align:left}
  .d2,.d7,.d8{display:none}
}
@media (max-width:560px){
  body{font-size:17px}
  .btn{font-size:19px;padding:9px 18px 7px}
  .sec-title{font-size:clamp(44px,13vw,64px)}
  .sec-title::after{height:22px}
  .hero__crown{width:60px;top:-24px}
  .art::before{width:58px;height:18px}
}

/* ==========================================================
   LECTOR DE CÓMICS (1 página · 2 páginas · scroll)
   ========================================================== */
.rd{position:fixed;inset:0;z-index:10003;display:grid;grid-template-rows:auto 1fr auto;background:rgba(10,8,10,.97) url('doodles.svg') 0 0/420px 420px}
.rd[hidden]{display:none}
.rd__bar{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:3px solid var(--pink);background:var(--black)}
.rd__title{font:clamp(20px,2.4vw,28px) var(--f-display);letter-spacing:.04em;flex:1 1 220px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd__modes{display:flex;gap:6px}
.rd__modes button{display:flex;align-items:center;gap:6px;font:16px var(--f-marker);color:var(--white);border:2px solid rgba(var(--pink-rgb),.5);border-radius:var(--wobble);padding:4px 12px;transition:.2s}
.rd__modes svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.rd__modes button:hover{border-color:var(--pink)}
.rd__modes button.active{background:var(--pink);color:var(--black);border-color:var(--pink);transform:rotate(-2deg)}
.rd__count{font-size:15px;color:var(--mint);white-space:nowrap}
.rd__pdf{font:16px var(--f-marker);color:var(--black);background:var(--mint);border:2px solid var(--black);border-radius:var(--wobble2);padding:4px 12px;box-shadow:3px 3px 0 var(--pink);white-space:nowrap}
.rd__pdf:hover{transform:rotate(-2deg)}
.rd__close{width:42px;height:42px;border:3px solid var(--pink);border-radius:50%;color:var(--pink);font:20px var(--f-display);flex:none}
.rd__close:hover{background:var(--pink);color:var(--black)}

.rd__stage{position:relative;overflow:auto;display:flex;align-items:center;justify-content:center;padding:18px 70px;min-height:0}
.rd__spread{position:relative;display:flex;align-items:center;justify-content:center;height:100%;max-width:100%;cursor:pointer;animation:pageIn .28s ease-out}
.rd__img{display:block;max-height:100%;max-width:100%;object-fit:contain;background:var(--paper);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.rd__spread:not(.two) .rd__img{border:6px solid var(--paper);box-shadow:12px 12px 0 var(--pink),0 20px 50px rgba(0,0,0,.6)}
.rd__spread.two{box-shadow:14px 14px 0 var(--pink),0 24px 60px rgba(0,0,0,.65)}
.rd__spread.two .rd__img{max-width:50%}
/* lomo del cómic abierto */
.rd__spread.two::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:60px;margin-left:-30px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,0,0,.28) 45%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.28) 55%,transparent)}
.rd__scroll{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(900px,100%);margin:0 auto;align-self:flex-start}
.rd[data-mode="scroll"] .rd__stage{display:block;padding:24px 16px 60px}
.rd__page{width:100%;height:auto;border:5px solid var(--paper);box-shadow:8px 8px 0 var(--pink);background:var(--paper)}
.rd__nav{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border:3px solid var(--pink);border-radius:50%;background:var(--black);color:var(--pink);font:22px var(--f-display);z-index:2}
.rd__nav:hover{background:var(--pink);color:var(--black)}
.rd__nav--prev{left:10px}.rd__nav--next{right:10px}
.rd__nav[hidden]{display:none}
.rd__foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;background:var(--black);border-top:2px dashed rgba(var(--pink-rgb),.4)}
.rd__foot input{width:min(640px,90vw);accent-color:var(--pink)}

/* tarjeta de libro: leer + PDF */
.book__cover{display:block;padding:0;cursor:pointer;width:100%}
.book__acts{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px}
.book__read{font:18px var(--f-display);letter-spacing:.05em;background:var(--pink);color:var(--black);border:2px solid var(--black);border-radius:var(--wobble);padding:3px 14px;box-shadow:3px 3px 0 var(--black)}
.book__read:hover{transform:rotate(-2deg)}
.book__pdf{font:16px var(--f-marker);border-bottom:3px solid var(--pink);color:inherit}
.book__pdf small{font:12px var(--f-mono);opacity:.7}
.book__pdf:hover{color:var(--pink)}

@media (max-width:700px){
  .rd__stage{padding:10px 8px}
  .rd__nav{top:auto;bottom:70px;margin:0;width:44px;height:44px}
  .rd__modes span{display:none}
  .rd__title{flex-basis:100%;order:-1}
  .rd__modes button[data-mode="spread"]{display:none}
}

/* ==========================================================
   BOGO — easter egg parado sobre la raya roja del footer
   ========================================================== */
.bogo{position:relative;height:0;z-index:20;--bx:clamp(16px,9vw,140px)}
.bogo__clip{position:absolute;right:var(--bx);bottom:-6px;width:118px;height:140px;overflow:visible;clip-path:inset(-400px -300px 0 -300px)}  /* solo esconde lo que baja de la raya */
.bogo__btn{display:block;width:118px;padding:0;background:none;border:0;cursor:pointer;transform-origin:50% 100%;transform:translateY(0);transition:transform .45s cubic-bezier(.5,-.4,.5,1.4)}
.bogo__btn img{display:block;width:118px;height:auto;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.35));animation:bogoIdle 3.2s steps(1) infinite}
.bogo__btn:hover{transform:translateY(-6px) rotate(-3deg)}
.bogo__btn:focus-visible{outline:3px dashed var(--mint);outline-offset:-3px}
.bogo.gone .bogo__btn{transform:translateY(105%)}
.bogo__btn.jolt img{animation:bogoJolt .35s steps(3)}
.bogo__btn.rage img{animation:bogoRage .12s steps(2) 10}
@keyframes bogoIdle{0%,90%,100%{transform:none}92%{transform:rotate(-4deg)}95%{transform:rotate(3deg)}}
@keyframes bogoJolt{0%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(-6deg)}100%{transform:none}}
@keyframes bogoRage{0%{transform:translateX(-4px) rotate(-3deg)}100%{transform:translateX(4px) rotate(3deg)}}

/* globo de cómic */
.bogo__bubble{position:absolute;right:calc(var(--bx) + 92px);bottom:118px;margin:0;max-width:min(260px,62vw);width:max-content;padding:10px 18px 8px;background:#fff;color:#111;border:3px solid #111;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;font:22px/1.1 var(--f-display);letter-spacing:.04em;text-align:center;box-shadow:4px 4px 0 #111;opacity:0;transform:scale(.4) rotate(-6deg);transform-origin:100% 100%;pointer-events:none;transition:opacity .15s,transform .15s}
.bogo__bubble.show{opacity:1;transform:none;animation:popIn .35s cubic-bezier(.3,1.7,.5,1)}
.bogo__bubble.shout{background:var(--yellow);color:var(--pink);font-size:28px;border-radius:12px;transform-origin:100% 100%}
.bogo__bubble.shout.show{animation:popIn .3s cubic-bezier(.3,1.7,.5,1),bogoRage .1s steps(2) 6 .3s}
@media (max-width:560px){.bogo{--bx:16px}.bogo__clip,.bogo__btn,.bogo__btn img{width:92px}.bogo__clip{height:110px}.bogo__bubble{right:calc(var(--bx) + 70px);bottom:92px;font-size:19px}.bogo__bubble.shout{font-size:23px}}
@media (prefers-reduced-motion:reduce){.bogo__btn img{animation:none!important}}
/* espacio para que Bogo no tape el contenido de la última sección */
main > section:last-of-type{padding-bottom:calc(clamp(80px,11vw,150px) + 110px)}

/* Bogo: explosión final */
.bogo__boom{position:absolute;right:calc(var(--bx) - 46px);bottom:-10px;width:210px;height:170px;display:grid;place-items:center;pointer-events:none;opacity:0;transform:scale(0) rotate(-20deg);z-index:3}
.bogo__boom svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--yellow);stroke:#111;stroke-width:5;stroke-linejoin:round;filter:drop-shadow(5px 5px 0 var(--pink))}
.bogo__boom b{position:relative;font:34px var(--f-display);letter-spacing:.04em;color:var(--pink);-webkit-text-stroke:1.5px #111;transform:rotate(-8deg)}
.bogo.boom .bogo__boom{animation:boomPop 1.1s cubic-bezier(.2,1.6,.4,1) forwards}
.bogo.boom .bogo__btn img{animation:boomOut .25s ease-in forwards}
.bogo.gone-for-good{display:none}
@keyframes boomPop{0%{opacity:1;transform:scale(0) rotate(-20deg)}25%{opacity:1;transform:scale(1.25) rotate(6deg)}45%{transform:scale(1) rotate(-4deg)}80%{opacity:1;transform:scale(1.05) rotate(-4deg)}100%{opacity:0;transform:scale(1.4) rotate(-4deg)}}
@keyframes boomOut{0%{transform:scale(1);filter:brightness(1)}60%{transform:scale(1.35);filter:brightness(4)}100%{transform:scale(1.6);opacity:0;filter:brightness(6)}}
.bogo__chunk{position:fixed;z-index:10048;width:16px;height:12px;margin:-6px 0 0 -8px;background:#a3f78b;border:2.5px solid #111;border-radius:40% 60% 50% 45%;pointer-events:none;animation:chunk 1.2s cubic-bezier(.2,.6,.4,1) forwards}
.bogo__chunk.potato{background:#9a7b55;border-radius:50%;width:14px;height:16px}
@keyframes chunk{0%{transform:translate(0,0) rotate(0) scale(var(--s))}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 180px)) rotate(var(--rot)) scale(var(--s));opacity:0}}
@media (max-width:560px){.bogo__boom{width:160px;height:130px;right:calc(var(--bx) - 34px)}.bogo__boom b{font-size:26px}}
@media (prefers-reduced-motion:reduce){.bogo__chunk{display:none}}


/* ==========================================================
   CURSOR — MS Bunny Cursor Set, por PchanNess
   https://www.rw-designer.com/cursor-set/ms-bunny  (Creative Commons No Comercial)
   PNG convertidos tal cual desde assets/cursor/ms-bunny/ con tools/cursors_to_png.py.
   Los números después del url() son la punta exacta del cursor (hotspot).
   ========================================================== */
/* el cursor dibujado ya no se usa; de ese elemento solo queda la etiqueta amarilla que sigue a la mano */
body:not(.touch) .cursor{display:block}
.cursor__ring,.cursor__dot{display:none!important}
.cursor__label{left:22px;top:30px}
html{cursor:url('../media/extras/cursor-normal.png') 1 6,auto}
body,body *{cursor:inherit!important}   /* !important: ninguna regla vieja (pointer, zoom-in…) puede poner el cursor del sistema */
/* el dedo que señala aparece solo MIENTRAS se hace clic (js/core.js añade .pressing a <html>) */
html.pressing,html.pressing body *{cursor:url('../media/extras/cursor-link.png') 6 13,pointer!important}
html body :is(input[type=text],input[type=email],input:not([type]),textarea){cursor:text!important}

/* globo de Bogo: imagen de globo de cómic entintado (freesvg.org "Retro comic speech bubble", dominio público CC0),
   interior rellenado y volteado para que la colita apunte a Bogo. Original en assets/bubble/.
   Su tamaño (--bw) lo calcula js/core.js según el largo de la frase; todo escala desde ahí. */
.bogo__bubble,.bogo__bubble.shout{--bw:250px;--fs:22px;width:var(--bw);height:calc(var(--bw) * .8185);max-width:none;
  padding:calc(var(--bw) * .07) calc(var(--bw) * .065) calc(var(--bw) * .26) calc(var(--bw) * .135);
  display:flex;align-items:center;justify-content:center;
  background:url('../media/extras/bubble.webp') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;
  font-size:var(--fs);color:#111;-webkit-text-stroke:0;
  /* la punta de la colita (78 % / 92 % de la imagen) queda fija sobre la cabeza de Bogo */
  right:calc(var(--bx) + 85px - var(--bw) * .22);bottom:calc(116px - var(--bw) * .8185 * .08);transform-origin:78% 92%}
.bogo__bubble.shout{color:var(--pink);text-shadow:2px 2px 0 #111}
.bogo__text{display:block;max-width:100%;text-align:center;line-height:1.05}
@media (max-width:560px){.bogo__bubble,.bogo__bubble.shout{right:calc(var(--bx) + 64px - var(--bw) * .22);bottom:calc(88px - var(--bw) * .8185 * .08)}}

/* ==========================================================
   TEXTOS DE DANIEL (oct 2026): nombre bajo el logo, créditos, eventos
   ========================================================== */
.hero__name{font-size:clamp(26px,3.2vw,40px);color:var(--white);margin:6px 0 26px;transform:rotate(-2deg);display:inline-block;text-shadow:3px 3px 0 var(--pink)}
.pitch__text{white-space:pre-line}
.pitch__cards li:last-child:nth-child(odd){grid-column:1/-1}
.cat-hero__credits{margin-top:10px;font-size:15px;color:#d9cbdc}
.cat-hero__credits:empty{display:none}
.cat-hero__credits a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.cat-hero__credits i{font-style:normal;color:var(--pink)}

/* próximos eventos */
.events{display:flex;flex-direction:column;gap:28px;max-width:1100px}
.event{display:grid;grid-template-columns:minmax(200px,340px) 1fr;gap:28px;align-items:start;background:var(--ink);border:5px solid var(--paper);border-radius:4px;padding:18px;box-shadow:10px 10px 0 var(--pink);rotate:-.4deg}
.event:nth-child(2n){rotate:.5deg}
.event__flyer{display:block;padding:0;background:none;border:0}
.event__flyer img{width:100%;border:4px solid var(--paper);box-shadow:0 10px 24px rgba(0,0,0,.5)}
.event__info h3{font:clamp(30px,3.4vw,46px)/1.05 var(--f-display);letter-spacing:.03em;margin-bottom:14px}
.event__info dl{display:grid;gap:10px}
.event__info dl div{display:grid;grid-template-columns:90px 1fr;gap:12px;border-bottom:2px dashed rgba(var(--pink-rgb),.35);padding-bottom:8px}
.event__info dt{font:14px var(--f-mono);color:var(--mint);padding-top:3px}
.event__info dd{font-size:19px;white-space:pre-line}
.event__today{display:inline-block;font:20px var(--f-display);letter-spacing:.05em;background:var(--yellow);color:var(--black);padding:2px 12px;border:2px solid var(--black);border-radius:var(--wobble);transform:rotate(-3deg);margin-bottom:10px}
.event.is-past{opacity:.55;filter:grayscale(.6);box-shadow:6px 6px 0 rgba(var(--pink-rgb),.4)}
.events__past{font:clamp(28px,3vw,38px) var(--f-graffiti);color:var(--white);text-shadow:3px 3px 0 var(--pink);margin-top:20px}
@media (max-width:700px){.event{grid-template-columns:1fr}.event__info dl div{grid-template-columns:76px 1fr}}

/* menú hamburguesa también en pantallas medianas (antes los links se montaban sobre el logo) */
@media (max-width:1180px){
  .nav__burger{display:block;margin-left:8px}
  .nav__lang{margin-left:auto}
  .nav__links{position:fixed;inset:0;background:rgba(5,5,7,.97);flex-direction:column;justify-content:center;gap:26px;transform:translateY(-100%);transition:transform .45s cubic-bezier(.8,0,.2,1);z-index:101}
  .nav__links.open{transform:none}
  .nav__links a{font-size:28px}
  .dots{display:none}
}

/* Bogo: después de explotar queda su lápida (dibujo de Daniel) */
.bogo__graveclip{position:absolute;right:calc(var(--bx) + 27px);bottom:-4px;width:140px;height:240px;clip-path:inset(-200px -200px 4px -200px);pointer-events:none;z-index:1}  /* solo esconde lo que está bajo la raya */
.bogo__grave{position:absolute;left:0;bottom:0;width:100%;height:auto;opacity:0;transform:translateY(105%);transform-origin:60% 100%;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.45))}
.bogo.dead .bogo__clip{display:none}
.bogo.dead .bogo__graveclip{pointer-events:auto}
.bogo.dead .bogo__grave{animation:graveRise 2.6s cubic-bezier(.25,.6,.3,1) .5s forwards}
.bogo.dead .bogo__graveclip{animation:groundShake .12s steps(2) .5s 18}
/* sube despacio tambaleándose, se pasa un poco y cae con un golpe */
@keyframes graveRise{
  0%{opacity:1;transform:translateY(105%) rotate(0)}
  10%{transform:translateY(98%) rotate(-2deg)}
  22%{transform:translateY(86%) rotate(2deg)}
  36%{transform:translateY(68%) rotate(-2.5deg)}
  50%{transform:translateY(48%) rotate(2deg)}
  64%{transform:translateY(28%) rotate(-1.5deg)}
  76%{transform:translateY(10%) rotate(1deg)}
  86%{transform:translateY(-9%) rotate(-3deg)}
  91%{transform:translateY(2%) rotate(1.5deg) scaleY(.94)}
  95%{transform:translateY(-1%) rotate(-.5deg) scaleY(1.02)}
  100%{opacity:1;transform:none}}
@keyframes groundShake{0%{translate:-2px 0}100%{translate:2px 0}}
.bogo.dead .bogo__grave:hover{filter:drop-shadow(3px 4px 0 var(--pink))}
@keyframes graveUp{0%{opacity:0;transform:translateY(46px) scaleY(.4)}60%{opacity:1;transform:translateY(-6px) scaleY(1.06)}100%{opacity:1;transform:none}}
@media (max-width:560px){.bogo__graveclip{width:110px;height:200px;right:calc(var(--bx) + 21px)}}

/* ==========================================================
   CRÉDITOS (al final del footer)
   ========================================================== */
.credits{display:grid;grid-template-columns:150px minmax(0,1fr) 190px;align-items:center;gap:30px;max-width:900px;margin:46px auto 0;padding-top:34px;border-top:2px dashed rgba(var(--pink-rgb),.4);text-align:center}
.credits__jean{position:relative;justify-self:center;rotate:-5deg;transition:rotate .25s,transform .25s}
.credits__jean img{width:130px;height:auto;border:5px solid var(--paper);border-radius:4px;box-shadow:6px 6px 0 var(--pink)}
.credits__jean::before{content:"";position:absolute;left:50%;top:-12px;width:66px;height:20px;transform:translateX(-50%) rotate(-4deg);background:rgba(143,240,189,.75);z-index:2}
.credits__montevo{justify-self:center;rotate:4deg;transition:rotate .25s,transform .25s}
.credits__montevo img{width:170px;height:auto;background:#f7f3ef;border:5px solid var(--paper);border-radius:4px;box-shadow:6px 6px 0 #a3632f}
.credits__jean:hover,.credits__montevo:hover{rotate:0deg;transform:translateY(-4px)}
.credits__made{font:17px var(--f-mono);color:#d9cbdc}
.credits__who{display:flex;flex-direction:column;align-items:center;gap:2px;margin:8px 0 12px}
.credits__who a{font:clamp(26px,3vw,36px) var(--f-display);letter-spacing:.04em;color:var(--white);text-shadow:3px 3px 0 var(--pink);transition:color .2s}
.credits__who a:hover{color:var(--mint)}
.credits__cta{font:21px var(--f-marker);color:var(--yellow);transform:rotate(-2deg)}
@media (max-width:700px){
  .credits{grid-template-columns:1fr 1fr;gap:22px}
  .credits__text{grid-column:1/-1;grid-row:1}
  .credits__jean img{width:110px}.credits__montevo img{width:140px}
}
.footer .up{top:40px;bottom:auto}  /* arriba a la derecha, lejos de los créditos */

/* tierra y polvo que saltan al salir la lápida */
.bogo__chunk.dirt{width:9px;height:7px;background:#6f5a4c;border-width:2px}
.bogo__chunk.dust{width:14px;height:14px;background:rgba(190,180,170,.55);border:0;border-radius:50%;filter:blur(1px)}
.bogo__chunk.dust{animation-name:dustPuff;animation-timing-function:ease-out}
@keyframes dustPuff{0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(2.6)}}

/* ==========================================================
   EVENTOS VACÍOS: Daniel dormido en la silla (póster de papel)
   ========================================================== */
.ev-empty{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding:10px 0 20px}
.ev-empty__art{position:relative;width:min(620px,100%);margin:0;padding:clamp(16px,3vw,30px);background:var(--tx-paper) center/cover,#efe9e1;border:6px solid var(--paper);border-radius:4px;box-shadow:14px 14px 0 var(--pink),0 24px 50px rgba(0,0,0,.55);rotate:-1.2deg}
.ev-empty__art::before,.ev-empty__art::after{content:"";position:absolute;z-index:3;width:120px;height:34px;top:-16px}
.ev-empty__art::before{left:-20px;background:rgba(143,240,189,.8);transform:rotate(-22deg)}
.ev-empty__art::after{right:-18px;background:rgba(var(--pink-rgb),.75);transform:rotate(18deg)}
.ev-empty__art img{display:block;width:100%;height:auto;transform-origin:62% 92%;animation:nap 3.6s ease-in-out infinite}
@keyframes nap{0%,100%{transform:none}50%{transform:scaleY(1.012) translateY(-2px) rotate(-.4deg)}}
/* Z que salen flotando del globo */
.zz{position:absolute;left:66%;top:9%;font:28px var(--f-marker);color:#3a1f28;opacity:0;pointer-events:none;animation:zzz 3.6s ease-out infinite}
.zz.z2{animation-delay:1.2s;font-size:34px}
.zz.z3{animation-delay:2.4s;font-size:44px}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) rotate(-10deg) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(70px,-120px) rotate(14deg) scale(1.15)}}
.ev-empty__msg{font-size:clamp(22px,2.6vw,30px);color:var(--white);transform:rotate(-1.5deg);max-width:24ch}
body.fx-low .ev-empty__art img,body.fx-low .zz{animation:none}
@media (prefers-reduced-motion:reduce){.zz{display:none}}
@media (max-width:560px){.ev-empty__art::before,.ev-empty__art::after{width:80px;height:24px}.zz{font-size:22px}.zz.z3{font-size:32px}}

/* ---------- MERCH: ficha de producto ---------- */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px 24px}
.prod{display:flex;flex-direction:column;gap:10px;text-align:left;background:#120d10;border:2px solid rgba(var(--pink-rgb),.35);border-radius:var(--wobble,14px);padding:14px;color:inherit;font:inherit;transition:transform .3s cubic-bezier(.3,1.6,.5,1),border-color .2s}
.prod:hover{transform:rotate(-1deg) translateY(-6px);border-color:var(--pink)}
.prod__img{display:grid;place-items:center;aspect-ratio:1;background:#1c1418;border-radius:10px;overflow:hidden}
.prod__img img{width:100%;height:100%;object-fit:contain;padding:8px}
.prod__img.alpha img{filter:drop-shadow(5px 7px 8px rgba(0,0,0,.6))}
.prod h3{font:22px/1.1 var(--f-marker);color:#fff}
.prod__info{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.prod__price{font:26px var(--f-display, 'Bangers');color:var(--black);background:var(--yellow);padding:2px 12px;transform:rotate(-2deg);border-radius:4px;box-shadow:3px 3px 0 var(--pink)}
.prod__stock{font:13px var(--f-mono);padding:3px 9px;border-radius:99px;border:1.5px solid currentColor}
.prod__stock--yes{color:#8ff0bd}.prod__stock--no{color:#9a8d93;text-decoration:line-through}.prod__stock--order{color:var(--yellow)}
.prod__info dl{flex-basis:100%;display:grid;gap:4px;margin:0}
.prod__info dl div{display:flex;gap:8px;font:15px var(--f-hand,'Patrick Hand');color:#d9cbdc}
.prod__info dt{color:rgb(var(--pink-rgb));min-width:72px}
.prod__info dd{margin:0;white-space:pre-line}
.prod__ask{align-self:flex-start}
@media (max-width:760px){.prods{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px 14px}.prod h3{font-size:18px}}

/* ---------- PANEL DE INFO del visor: el dibujo se corre a la izquierda y el panel entra desde la derecha ---------- */
.lb__fig{transition:margin .55s cubic-bezier(.2,.9,.25,1),transform .55s cubic-bezier(.2,.9,.25,1)}
.lb__panel{position:fixed;z-index:3;top:50%;right:84px;width:min(360px,30vw);max-height:min(78vh,640px);overflow:auto;overscroll-behavior:contain;
  background:#120c0f;border:3px solid var(--pink);border-radius:var(--wobble,14px);box-shadow:10px 10px 0 rgba(var(--pink-rgb),.35),0 20px 50px rgba(0,0,0,.6);
  padding:26px 22px 22px;display:flex;flex-direction:column;gap:14px;
  opacity:0;pointer-events:none;transform:translate(60px,-50%) rotate(2deg);transition:transform .55s cubic-bezier(.2,.9,.25,1),opacity .35s ease}
.lb.has-info .lb__panel{opacity:1;pointer-events:auto;transform:translate(0,-50%) rotate(-.6deg)}
.lb.has-info .lb__fig{margin-right:calc(min(360px,30vw) + 44px)}
.lb__paneltape{position:absolute;top:-12px;left:50%;width:96px;height:24px;margin-left:-48px;background:rgba(143,240,189,.75);transform:rotate(-4deg);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.lb__panelx{position:absolute;top:8px;right:10px;width:30px;height:30px;border-radius:50%;color:var(--pink);font-size:16px;border:2px solid transparent;transition:.2s}
.lb__panelx:hover{border-color:var(--pink);transform:rotate(90deg)}
.lb__panel h3{font:clamp(24px,2.2vw,32px)/1.05 var(--f-marker);color:#fff;padding-right:26px}
.lb__panelmeta{font-size:12px;letter-spacing:.08em;color:rgb(var(--pink-rgb));text-transform:uppercase;margin-top:-6px}
.lb__desc{font:18px/1.45 var(--f-hand,'Patrick Hand',cursive);color:#e6d9e0;white-space:pre-line}
.lb__panel .prod__info dl div{font-size:16px}
.lb__panel.swap>*{animation:panelIn .5s cubic-bezier(.2,.9,.25,1) both}
.lb__panel.swap>*:nth-child(3){animation-delay:.06s}.lb__panel.swap>*:nth-child(4){animation-delay:.12s}.lb__panel.swap>*:nth-child(5){animation-delay:.18s}.lb__panel.swap>*:nth-child(6){animation-delay:.24s}
.lb__panel.swap>.lb__paneltape{animation:none}
@keyframes panelIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.lb__infobtn{font-size:12px!important;letter-spacing:.06em;width:auto!important;padding:0 10px!important}
@media (max-width:899px){
  .lb__panel{top:auto;bottom:76px;left:12px;right:12px;width:auto;max-height:42vh;padding:22px 16px 16px;transform:translateY(40px);border-radius:14px}
  .lb.has-info .lb__panel{transform:none}
  .lb.has-info .lb__fig{margin-right:0;transform:translateY(-17vh)}
  .lb.has-info .lb__fig img{max-height:38vh}
  .lb__panel h3{font-size:22px}
  .lb__desc{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.lb__fig,.lb__panel{transition:none}.lb__panel.swap>*{animation:none}}

/* muestras de comisiones: tantas columnas como piezas (máx. 6) */
.samples{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}
.samples:has(.sample:only-child){max-width:260px;margin-inline:auto}
@media (max-width:900px){.samples{grid-template-columns:repeat(min(var(--n,3),3),minmax(0,1fr))}}

/* botón ▶ PLAY del menú */
.nav__play{font:15px var(--f-display,'Bangers');letter-spacing:.1em;color:#000;background:var(--yellow,#ffd92e);border:2px solid #000;border-radius:8px;padding:5px 12px;box-shadow:3px 3px 0 var(--pink,#F5243C);margin-left:16px;position:relative;z-index:102;transition:transform .15s;white-space:nowrap}
.nav__play:hover{transform:translate(-1px,-1px) rotate(-2deg);box-shadow:4px 4px 0 var(--pink,#F5243C)}
@media (max-width:1180px){.nav__play{margin-left:auto;margin-right:0;font-size:14px;padding:4px 10px}.nav__play+.nav__lang{margin-left:12px!important}}
@media (max-width:420px){.nav__name{display:none}}
.lb__infobtn{border-radius:99px!important}