/* =========================================================================
   IKER SERRANO · PÀGINA D'INICI — CSS
   0 Tokens · 1 Base · 2 HUD e índice · 3 Escenas · 4 Microinteracciones
   5 Responsive · 6 Movimiento reducido · 7 Keyframes
   Todo cuelga de #ik: no afecta al resto de tu web.
   ========================================================================= */

/* ---------- 0. TOKENS: paleta extraída del vídeo + tu paleta Y2K ---------- */
#ik{
  --k:#000;           /* fondo (tu --y2k-ink) */
  --deep:#1f1f41;     /* paneles HUD (vídeo) */
  --violet:#302b75;   /* profundidad (vídeo) */
  --signal:#453bd2;   /* azul señal (vídeo) */
  --blue:#5b6bff;     /* tu --y2k-blue */
  --peri:#8b9dff;     /* tu --y2k-blue2 */
  --lav:#c9b6ff;      /* tu --y2k-lav */
  --paper:#f4f2ff;    /* tu --y2k-white */
  --pink:#ff8fe0;     /* trazos de circuito del vídeo: solo en el código */
  --line:rgba(139,157,255,.26);
  /* Tu sistema tipográfico (Encàrrec 8, Tasca 3): títulos / textos / menús */
  --f-display:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-text:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"Courier New",Courier,monospace;
  --out:cubic-bezier(.16,1,.3,1);
  --io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(1.25rem,4vw,4rem);
  --bar:var(--wp-admin--admin-bar--height,0px); /* barra de administración de WP */
}

/* ---------- 1. BASE ---------- */
html,body{background:#000}
#ik{position:relative;margin:0;max-width:none;background:var(--k);color:var(--paper);font:400 1.0625rem/1.6 var(--f-text);overflow-x:clip;-webkit-font-smoothing:antialiased}
#ik *,#ik *::before,#ik *::after{box-sizing:border-box}
#ik :where(h1,h2,h3,p,ol,ul,dl,dd,figure,pre){margin:0;padding:0}
#ik :where(ol,ul){list-style:none}
#ik a{color:inherit;text-decoration:none}
#ik img{display:block;max-width:100%;height:auto}
#ik button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;cursor:pointer}
#ik :focus-visible{outline:2px solid var(--lav);outline-offset:4px}
#ik [tabindex="-1"]:focus{outline:none}
#ik .ik-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#ik .ik-skip{position:fixed;left:1rem;top:calc(var(--bar) + 1rem);z-index:120;padding:.6rem 1rem;background:var(--paper);color:#000;font:700 .9rem var(--f-mono);transform:translateY(-300%)}
#ik .ik-skip:focus{transform:none}
#ik .ik-label{font:700 .875rem/1.4 var(--f-mono);color:var(--peri)}
#ik .ik-label::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.6em;background:var(--signal);vertical-align:.02em}
/* Placeholders [AÑADIR AQUÍ…]: solo visibles con tu sesión iniciada */
#ik .ik-ph{display:none}
body.logged-in #ik .ik-ph{display:block;margin-top:1rem;max-width:46ch;padding:.6rem .8rem;border:1px dashed var(--pink);color:var(--pink);font:700 .8rem/1.4 var(--f-mono)}
/* Máscara de revelado (línea que “se dibuja” como en un CRT) */
#ik .ik-mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
#ik .ik-mask>span{display:block}
#ik.ik-js .ik-mask>span{transform:translateY(110%)}
#ik .is-in .ik-mask>span{transform:none;transition:transform 1.1s var(--out)}
#ik .is-in .ik-mask:nth-child(2)>span{transition-delay:.08s}
#ik .is-in .ik-mask:nth-child(3)>span{transition-delay:.16s}
/* Escenas fijadas (sticky): solo con JS y sin movimiento reducido */
#ik .ik-sticky{position:relative;min-height:100vh;min-height:100svh}
#ik.ik-js:not(.ik-rm) [data-scene]>.ik-sticky{position:sticky;top:var(--bar);height:100vh;height:calc(100svh - var(--bar));min-height:0;overflow:hidden}

/* ---------- 2. HUD FIJO (bisel del monitor del vídeo) ---------- */
#ik .ik-hud{--c:rgba(139,157,255,.6);position:fixed;inset:calc(var(--bar) + 12px) 12px 12px;z-index:60;pointer-events:none;font:700 .8125rem/1 var(--f-mono);color:var(--peri);
  background:linear-gradient(var(--c),var(--c)) 0 0/18px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 18px,linear-gradient(var(--c),var(--c)) 100% 0/18px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 18px,linear-gradient(var(--c),var(--c)) 0 100%/18px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 18px,linear-gradient(var(--c),var(--c)) 100% 100%/18px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 18px;background-repeat:no-repeat}
#ik .ik-hud>*{position:absolute;margin:0;pointer-events:auto;background:rgba(0,0,0,.62);border-radius:999px}
#ik .ik-hud__brand{top:14px;left:14px;display:flex;align-items:center;gap:.6rem;padding:.3rem .75rem .3rem .3rem;color:var(--paper)}
#ik .ik-hud__brand .ik-logo{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid var(--peri);font-size:.6rem}
#ik .ik-hud__menu{top:14px;right:14px;padding:.55rem .8rem;color:var(--paper)}
#ik .ik-hud__where{bottom:14px;left:14px;display:flex;gap:.2rem;padding:.5rem .7rem;pointer-events:none}
#ik .ik-hud__where.flick{animation:ik-flick .45s steps(3)}
#ik .ik-hud__count{bottom:14px;right:14px;padding:.5rem .7rem;pointer-events:none;color:var(--paper);letter-spacing:.08em}
#ik .ik-logo--mono{display:grid;place-items:center;border-radius:50%;background:var(--signal);color:var(--paper);font-family:var(--f-display);font-weight:900;letter-spacing:-.04em}
/* Texto que “rueda” al pasar el ratón */
#ik .ik-roll{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2;vertical-align:bottom}
#ik .ik-roll>span{display:block;transition:transform .45s var(--out)}
#ik .ik-roll>span::after{content:attr(data-t);display:block;color:var(--lav)}
#ik :is(a,button):is(:hover,:focus-visible) .ik-roll>span{transform:translateY(-50%)}

/* ÍNDEX en overlay (sustituye el menú del tema) */
#ik .ik-index{position:fixed;inset:0;z-index:90;overflow-y:auto;overscroll-behavior:contain;background:#000;padding:calc(var(--bar) + 4.5rem) var(--gut) 3rem;clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--io)}
#ik .ik-index[hidden]{display:none}
#ik .ik-index.is-open{clip-path:inset(0)}
#ik .ik-index__close{position:fixed;top:calc(var(--bar) + 18px);right:20px;padding:.5rem .7rem;font:700 .8125rem var(--f-mono);color:var(--lav)}
#ik .ik-index__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,6rem);max-width:1400px;margin:0 auto}
#ik .ik-index__main a{display:inline-block;padding:.06em 0;font:900 clamp(2.2rem,6vw,5.4rem)/1.02 var(--f-display);letter-spacing:-.045em;transition:color .25s,transform .45s var(--out)}
#ik .ik-index__main a:hover{color:var(--lav);transform:translateX(.18em)}
#ik .ik-index__main li{opacity:0}
#ik .ik-index.is-open .ik-index__main li{animation:ik-up .8s var(--out) both;animation-delay:calc(var(--i) * 55ms + .25s)}
#ik .ik-index__tree{align-self:start;padding-left:clamp(1rem,3vw,2.5rem);border-left:1px solid var(--line);font:700 .875rem var(--f-mono);color:var(--peri)}
#ik .ik-tree__h a{display:inline-block;margin:1.4rem 0 .6rem;font:900 1.6rem/1.1 var(--f-display);letter-spacing:-.03em;color:var(--paper)}
#ik .ik-tree__h:first-child a{margin-top:0}
#ik .ik-index__tree details{border-top:1px solid var(--line)}
#ik .ik-index__tree summary{display:flex;gap:1rem;padding:.6rem 0;cursor:pointer;list-style:none;color:var(--paper)}
#ik .ik-index__tree summary::-webkit-details-marker{display:none}
#ik .ik-index__tree summary b{margin-left:auto;color:var(--peri)}
#ik .ik-index__tree summary::after{content:"+";color:var(--lav)}
#ik .ik-index__tree details[open] summary::after{content:"\2212"}
#ik .ik-index__tree ul{padding:0 0 .9rem}
#ik .ik-index__tree li a{display:block;padding:.35rem 0;font:600 .95rem/1.35 var(--f-text);color:rgba(244,242,255,.86)}
#ik .ik-index__tree li a:hover{color:var(--lav)}

/* ---------- 3.1 HERO · vídeo 0:00–0:02 ---------- */
#ik.ik-js:not(.ik-rm) .ik-hero{height:240vh}
#ik .ik-hero .ik-sticky{display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--bar) + 5rem) var(--gut) clamp(2.4rem,7vh,4.8rem)}
#ik .ik-grid{position:absolute;inset:-12%;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent);mask-image:radial-gradient(closest-side,#000 35%,transparent);will-change:transform}
#ik .ik-grid i{position:absolute;inset:0}
#ik .ik-grid__h{background:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 72px);transform-origin:0 50%}
#ik .ik-grid__v{background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 72px);transform-origin:50% 0}
#ik.ik-js .ik-grid__h{transform:scaleX(0);transition:transform 1.3s var(--out)}
#ik.ik-js .ik-grid__v{transform:scaleY(0);transition:transform 1.3s var(--out) .12s}
#ik.ik-booted .ik-grid__h,#ik.ik-booted .ik-grid__v{transform:none}
/* Ensamblaje geométrico (triángulo con barrido de luz, chevron, esfera, tarjeta, cinta, destellos) */
#ik .ik-asm{position:absolute;top:calc(var(--bar) + 3.5vh);right:calc(var(--gut) * -.2);width:min(56vmin,620px);aspect-ratio:1;pointer-events:none}
#ik .ik-asm>*{position:absolute;display:block;will-change:transform}
#ik.ik-js .ik-asm>*{opacity:0;scale:.55}
#ik.ik-booted .ik-asm>*{opacity:1;scale:1;transition:opacity .5s ease calc(var(--i) * 90ms + .25s),scale 1s var(--out) calc(var(--i) * 90ms + .25s)}
#ik .ik-asm__tri{left:2%;top:30%;width:64%;height:66%;overflow:hidden;clip-path:polygon(0 0,100% 100%,0 100%);background:linear-gradient(165deg,var(--paper) 0%,var(--lav) 22%,var(--peri) 42%,var(--signal) 70%,var(--violet) 100%)}
#ik .ik-asm__sweep{position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);transform:translateX(-120%) skewX(-18deg)}
#ik .ik-asm__chev{left:30%;top:6%;width:44%;fill:none;stroke:var(--signal);stroke-width:16}
#ik .ik-asm__chev polyline:nth-child(2){stroke:var(--peri)}
#ik .ik-asm__chev polyline:nth-child(3){stroke:var(--lav)}
#ik .ik-asm__sphere{left:60%;top:20%;width:21%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 7%,var(--lav) 20%,var(--blue) 48%,var(--violet) 80%,#0d1118 100%)}
#ik .ik-asm__card{left:57%;top:43%;width:30%;height:25%;border-radius:12px;background:linear-gradient(var(--signal),var(--signal)) 14% 62%/46% 7% no-repeat,linear-gradient(var(--signal),var(--signal)) 14% 78%/30% 7% no-repeat,linear-gradient(var(--peri),var(--peri)) 86% 22%/14% 14% no-repeat,var(--paper)}
#ik .ik-asm__ribbon{left:18%;top:62%;width:76%;fill:none;stroke:var(--paper);stroke-width:5;stroke-linecap:round}
#ik.ik-js .ik-asm svg :is(polyline,path){stroke-dasharray:1;stroke-dashoffset:1}
#ik.ik-booted .ik-asm svg :is(polyline,path){stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--out) .55s}
#ik .ik-asm__star{width:9%;aspect-ratio:1}
#ik .ik-asm__star--s{width:5%}
#ik .ik-asm__star::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 0 18%,var(--lav) 42%,transparent 70%);clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);animation:ik-twinkle 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
/* Nombre: letras que suben desde una máscara */
#ik .ik-hero__name{position:relative;z-index:2;font:900 clamp(3.4rem,13.6vw,13.4rem)/1 var(--f-display);letter-spacing:-.05em;color:var(--paper);text-shadow:0 .02em .3em rgba(0,0,0,.35)}
#ik .ik-hero__lines{display:block}
#ik .ik-line{display:block;overflow:hidden;padding:0 .05em .06em 0;margin-bottom:-.17em;line-height:1.04;will-change:transform}
#ik .ik-line:nth-child(2){padding-left:.82em}
#ik .ik-line:nth-child(3){padding-left:.34em}
#ik .ik-ch{display:inline-block}
#ik.ik-js .ik-ch{transform:translateY(110%)}
#ik.ik-booted .ik-ch{transform:none;transition:transform 1s var(--out) calc(var(--i) * 32ms + .3s)}
#ik .ik-hero__tag{position:relative;z-index:2;max-width:34ch;min-height:1.5em;margin-top:clamp(1.6rem,4vh,2.4rem);font:700 clamp(.95rem,1.3vw,1.125rem)/1.5 var(--f-mono);color:var(--lav)}
#ik .ik-hero__tag.is-typing::after{content:"";display:inline-block;width:.6em;height:1.05em;margin-left:.15em;background:var(--lav);vertical-align:-.15em;animation:ik-blink .8s steps(1) infinite}
#ik .ik-hero__cue{position:absolute;right:var(--gut);bottom:clamp(2.4rem,7vh,4.8rem);display:flex;align-items:center;gap:.8rem;font:700 .8125rem var(--f-mono);color:var(--peri)}
#ik .ik-hero__cue i{width:1px;height:44px;background:var(--peri);animation:ik-cue 1.8s var(--io) infinite}
#ik .ik-flash{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;background:radial-gradient(circle at 35% 62%,#fff 0%,var(--lav) 32%,rgba(91,107,255,.55) 58%,rgba(0,0,0,0) 85%)}

/* ---------- 3.2 PERFIL · vídeo 0:02–0:05 (monitor HUD + radar) ---------- */
#ik.ik-js:not(.ik-rm) .ik-perfil{height:175vh}
#ik .ik-perfil .ik-sticky{display:grid;place-items:center;padding:calc(var(--bar) + 4.2rem) var(--gut) 4.2rem}
#ik .ik-monitor{position:relative;width:min(1180px,100%);overflow:hidden;border:1px solid var(--peri);border-radius:18px;background:linear-gradient(180deg,rgba(48,43,117,.6),rgba(31,31,65,.35) 45%,rgba(0,0,0,.55));box-shadow:0 0 0 5px rgba(139,157,255,.08),inset 0 0 90px rgba(69,59,210,.35);transform-origin:50% 55%;will-change:transform}
#ik .ik-monitor::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
#ik .ik-glitch{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background:linear-gradient(transparent 0 22%,rgba(255,143,224,.4) 22% 23.5%,transparent 23.5% 51%,rgba(139,157,255,.55) 51% 54%,transparent 54% 77%,rgba(244,242,255,.4) 77% 78%,transparent 78%)}
#ik .ik-monitor.is-in .ik-glitch{animation:ik-glitch .7s steps(2) .15s 1}
#ik .ik-monitor__bar{display:flex;justify-content:space-between;align-items:center;padding:.65rem 1rem;border-bottom:1px solid var(--line);font:700 .8125rem var(--f-mono);color:var(--peri)}
#ik .ik-dots{display:flex;gap:.35rem}
#ik .ik-dots i{width:.6rem;height:.6rem;border:1px solid var(--peri)}
#ik .ik-dots i:first-child{background:var(--lav)}
#ik .ik-monitor__body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.2rem,3.5vw,3.5rem);align-items:center;padding:clamp(1.2rem,3vw,2.6rem)}
#ik .ik-radar{position:relative;width:100%;max-width:min(100%,54vh);aspect-ratio:1;margin:0 auto}
#ik .ik-radar svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--peri);stroke-width:.6}
#ik .ik-radar .d{stroke-dasharray:2 3}
#ik .ik-radar .blip{fill:var(--lav);stroke:none;animation:ik-blip 2.4s ease-in-out infinite}
#ik .ik-radar .blip:nth-of-type(6){animation-delay:-.8s}
#ik .ik-radar .blip:nth-of-type(7){animation-delay:-1.6s}
#ik .ik-radar__sweep{position:absolute;inset:2%;border-radius:50%;background:conic-gradient(from 0deg,rgba(139,157,255,.5),rgba(139,157,255,0) 24%);animation:ik-spin 4.8s linear infinite}
#ik .ik-radar__logo{position:absolute;inset:31%;overflow:hidden;border:1px solid var(--lav);border-radius:50%;background:var(--deep);box-shadow:0 0 34px rgba(201,182,255,.35)}
#ik .ik-radar__logo .ik-logo{width:100%;height:100%;object-fit:cover;font-size:clamp(1.4rem,3.4vw,2.8rem)}
#ik .ik-readout{display:grid;gap:clamp(1rem,2.4vh,1.6rem)}
#ik .ik-readout__main{display:grid;gap:clamp(.8rem,2vh,1.3rem)}
#ik .ik-readout dt{font:700 .8125rem/1.3 var(--f-mono);color:var(--peri)}
#ik .ik-readout dd{font:800 clamp(1.1rem,2vw,1.8rem)/1.15 var(--f-display);letter-spacing:-.02em}
#ik .ik-readout .ik-readout__name dd{font-size:clamp(2rem,4.4vw,4.2rem);font-weight:900;line-height:.95;letter-spacing:-.045em}
#ik .ik-nums{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
#ik .ik-readout .ik-nums dd{font:700 clamp(1.3rem,2.3vw,2.1rem)/1.1 var(--f-mono);letter-spacing:0}
#ik .ik-wave{display:block;width:100%;height:26px;padding:4px 0;border-top:1px solid var(--line);fill:none;stroke:var(--peri);stroke-width:1.2}

/* ---------- 3.3 PRESENTACIÓ · vídeo 0:05–0:07 (decodificación + anillos) ---------- */
#ik.ik-js:not(.ik-rm) .ik-pres{height:230vh}
#ik .ik-pres .ik-sticky{display:flex;flex-direction:column;justify-content:center;gap:clamp(1.2rem,3vh,2rem);padding:calc(var(--bar) + 5rem) var(--gut) 5rem}
#ik .ik-pres__text{position:relative;z-index:2;max-width:31ch;font:600 clamp(1.5rem,3.5vw,3.25rem)/1.16 var(--f-text);letter-spacing:-.02em}
#ik .ik-pres__text p+p{margin-top:.7em}
#ik .ik-w{display:inline-block}
#ik.ik-js:not(.ik-rm) .ik-w{opacity:.16;transition:opacity .4s ease,color .4s ease}
#ik.ik-js:not(.ik-rm) .ik-w.on{opacity:1}
#ik .ik-w.dec{overflow:hidden;white-space:nowrap;vertical-align:bottom;font-family:var(--f-mono);color:var(--lav)}
#ik .ik-pres__rings{position:absolute;top:50%;right:-24vmin;width:88vmin;height:88vmin;margin-top:-44vmin;fill:none;stroke:var(--peri);stroke-width:.5;opacity:.55;pointer-events:none;will-change:transform}
#ik .ik-pres__rings .d{stroke-dasharray:1.5 2.5}
#ik .ik-pres__rings .t{stroke:var(--signal);stroke-width:7;opacity:.5}
#ik .ik-pres__bar{position:absolute;left:var(--gut);top:calc(var(--bar) + 4.4rem);width:min(46vw,520px);height:46px;opacity:.2;background:repeating-linear-gradient(90deg,var(--paper) 0 3px,transparent 3px 7px,var(--paper) 7px 8px,transparent 8px 14px,var(--paper) 14px 19px,transparent 19px 23px);will-change:transform}

/* ---------- 3.4 CATEGORIES · vídeo 0:07–0:09 (cruz + código tecleado) ---------- */
#ik .ik-cats{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,7rem);align-items:center;min-height:100vh;padding:clamp(6rem,15vh,10rem) var(--gut)}
#ik .ik-cross{position:absolute;inset:0;pointer-events:none}
#ik .ik-cross i{position:absolute;background:var(--line)}
#ik .ik-cross i:first-child{top:0;bottom:0;left:38%;width:1px;transform-origin:50% 0}
#ik .ik-cross i:last-child{left:0;right:0;top:24%;height:1px;transform-origin:0 50%}
#ik.ik-js .ik-cross i:first-child{transform:scaleY(0)}
#ik.ik-js .ik-cross i:last-child{transform:scaleX(0)}
#ik .ik-cross.is-in i{transform:none;transition:transform 1.4s var(--io)}
#ik .ik-cats__code{position:relative;display:grid;gap:1.2rem}
#ik .ik-code{overflow-x:auto;padding:1.3rem 1.5rem;border:1px solid var(--line);border-radius:12px;background:rgba(31,31,65,.35);font:700 clamp(.9rem,1.25vw,1.1rem)/1.75 var(--f-mono);color:var(--peri);white-space:pre}
#ik .ik-code .ln{display:block;width:max-content}
#ik.ik-js:not(.ik-rm) .ik-code .ln{clip-path:inset(0 100% 0 0)}
#ik.ik-js:not(.ik-rm) .ik-code.is-in .ln{clip-path:inset(0);transition:clip-path calc(var(--n) * 24ms) steps(var(--n)) calc(var(--d) * 1ms)}
#ik .ik-code .s{color:var(--pink)}
#ik .ik-code .n{color:var(--paper)}
#ik .ik-code .k{color:var(--lav)}
#ik .ik-cats__list{position:relative;display:grid}
#ik .ik-catrow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1rem;padding:clamp(1rem,2.6vh,1.6rem) .3rem;border-top:1px solid var(--line);isolation:isolate}
#ik .ik-catrow::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--signal);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--out)}
#ik .ik-catrow:is(:hover,:focus-visible)::before{transform:none}
#ik .ik-catrow__name{font:900 clamp(2.4rem,6.2vw,5.6rem)/.95 var(--f-display);letter-spacing:-.045em}
#ik .ik-catrow__meta{font:700 .875rem var(--f-mono);color:var(--peri);text-align:right}
#ik .ik-catrow:hover .ik-catrow__meta{color:var(--paper)}
#ik.ik-js .ik-catrow{opacity:0;transform:translateY(30px)}
#ik .ik-catrow.is-in{opacity:1;transform:none;transition:opacity .8s,transform 1s var(--out)}
#ik .ik-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:1.4rem;border-top:1px solid var(--line)}
#ik .ik-chips a{padding:.45rem .7rem;border:1px solid var(--line);border-radius:999px;font:700 .8125rem var(--f-mono);color:var(--peri);transition:border-color .25s,color .25s,background-color .25s}
#ik .ik-chips a:hover{border-color:var(--lav);background:var(--lav);color:#000}

/* ---------- 3.5 REPTE · TÚNEL · vídeo 0:09–0:11 (momento firma) ---------- */
#ik.ik-js:not(.ik-rm) .ik-dive{height:340vh}
#ik .ik-dive .ik-sticky{background:#000}
#ik .ik-dive__svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
#ik .ik-dive__svg rect{fill:none;stroke:var(--peri);stroke-width:1.5;vector-effect:non-scaling-stroke}
#ik .ik-dive__svg rect.portal{fill:#000;stroke:var(--lav)}
#ik .ik-dive__svg pattern rect{fill:var(--lav);stroke:none}
#ik .ik-dive__svg .st{opacity:.75}
#ik .ik-dive__labels{position:absolute;inset:0;pointer-events:none}
#ik .ik-dive__label{position:absolute;left:0;top:0;opacity:0;transform-origin:0 0;white-space:nowrap;font:700 .875rem var(--f-mono);color:var(--lav);will-change:transform,opacity}
#ik .ik-dive__label b{margin-left:.5em;color:var(--paper)}
#ik .ik-dive__title{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;will-change:transform,opacity}
#ik .ik-dive__title h2{font:900 clamp(3.4rem,13vw,12.5rem)/.85 var(--f-display);letter-spacing:-.05em;text-shadow:0 0 40px #000}
#ik .ik-dive__title p{margin-top:1rem;font:700 clamp(.9rem,1.2vw,1.05rem) var(--f-mono);color:var(--peri)}

/* ---------- 3.6 ENCÀRRECS (cada uno es una escena) ---------- */
#ik .ik-enc{position:relative;padding:clamp(5rem,14vh,9rem) var(--gut) clamp(3rem,8vh,5rem)}
#ik .ik-enc__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,5rem);align-items:end}
#ik .ik-enc--alt .ik-enc__num{order:2;text-align:right}
#ik .ik-enc__num{position:relative;user-select:none;font:900 clamp(7rem,29vw,26rem)/.78 var(--f-display);letter-spacing:-.065em;color:transparent;-webkit-text-stroke:1px var(--peri)}
#ik .ik-enc__num::after{content:attr(data-n);position:absolute;inset:0;-webkit-text-stroke:0;background:linear-gradient(180deg,var(--lav),var(--signal) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
#ik.ik-js .ik-enc__num::after{clip-path:inset(100% 0 0 0)}
#ik .ik-enc__head.is-in .ik-enc__num::after{clip-path:inset(0);transition:clip-path 1.3s var(--io) .15s}
#ik .ik-enc__info{display:grid;gap:1.1rem;padding-bottom:.6rem}
#ik .ik-enc__title{font:900 clamp(2.6rem,6.8vw,6.2rem)/.92 var(--f-display);letter-spacing:-.045em}
#ik .ik-fields{display:flex;flex-wrap:wrap;gap:.8rem 2.4rem}
#ik .ik-fields dt{font:700 .8125rem var(--f-mono);color:var(--peri)}
#ik .ik-fields dd{font:700 1rem var(--f-mono)}
#ik .ik-enc__desc{max-width:52ch;color:rgba(244,242,255,.84)}
#ik.ik-js .ik-fields,#ik.ik-js .ik-enc__desc{opacity:0;transform:translateY(16px)}
#ik .is-in .ik-fields,#ik .is-in .ik-enc__desc{opacity:1;transform:none;transition:opacity .7s .35s,transform .9s var(--out) .35s}
/* Ventanas (capturas reales de tus entradas) */
#ik .ik-win__bar{display:flex;justify-content:space-between;gap:.6rem;overflow:hidden;padding:.42rem .7rem;border-bottom:1px solid var(--line);white-space:nowrap;font:700 .75rem/1.2 var(--f-mono);color:var(--peri)}
#ik .ik-win__bar>span{overflow:hidden;text-overflow:ellipsis}
#ik .ik-win__img{display:block;aspect-ratio:16/10;background:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 18px),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 18px),#0b0b22}
#ik .ik-win__img img{width:100%;height:100%;object-fit:cover;object-position:top left}
#ik .ik-stack{position:relative;max-width:640px;aspect-ratio:2/1;margin-top:.8rem}
#ik .ik-stack:empty{display:none}
#ik .ik-stack figure{position:absolute;top:0;left:0;width:58%;overflow:hidden;border:1px solid var(--peri);border-radius:10px;background:#0b0b22;transform:translate(var(--x),var(--y)) rotate(var(--r))}
#ik .ik-stack figure:nth-child(1){--x:0%;--y:20%;--r:-3deg}
#ik .ik-stack figure:nth-child(2){--x:34%;--y:6%;--r:2deg}
#ik .ik-stack figure:nth-child(3){--x:66%;--y:22%;--r:-1deg}
#ik .ik-stack img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
#ik.ik-js:not(.ik-rm) .ik-stack figure{opacity:0}
#ik.ik-js:not(.ik-rm) .is-in .ik-stack figure{animation:ik-slide 1s var(--out) both;animation-delay:calc(var(--i) * .12s + .45s)}
/* Lista de tasques: aparecen una a una */
#ik .ik-tasks{margin-top:clamp(2.5rem,7vh,4.5rem)}
#ik .ik-task{position:relative;display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:.5rem 1.6rem;align-items:baseline;padding:1.3rem .3rem;isolation:isolate}
#ik .ik-task::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
#ik .ik-task::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(69,59,210,.38),rgba(69,59,210,0) 75%);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--out)}
#ik .ik-task:is(:hover,:focus-visible)::after{transform:none}
#ik .ik-task__n,#ik .ik-task__d{font:700 .875rem var(--f-mono);color:var(--peri)}
#ik .ik-task__t{font:700 clamp(1.15rem,2.2vw,1.9rem)/1.2 var(--f-text);letter-spacing:-.015em}
#ik.ik-js .ik-task::before{transform:scaleX(0)}
#ik.ik-js .ik-task>span{opacity:0;transform:translateY(60%)}
#ik .ik-task.is-in::before{transform:none;transition:transform 1s var(--out)}
#ik .ik-task.is-in>span{opacity:1;transform:none;transition:opacity .6s,transform .8s var(--out),color .3s}
#ik .ik-task.is-in>span:nth-child(2){transition-delay:.07s,.07s,0s}
#ik .ik-task.is-in>span:nth-child(3){transition-delay:.14s,.14s,0s}
#ik .ik-task:is(:hover,:focus-visible) .ik-task__t{color:var(--lav);transform:translateX(.3rem)}
/* Corte glitch entre encàrrecs (vídeo 0:11, pixel-sort) */
#ik .ik-band{position:relative;height:clamp(56px,12vh,120px);overflow:hidden}
#ik .ik-band i{position:absolute;left:-40%;right:-40%;will-change:transform}
#ik .ik-band i:nth-child(1){top:0;height:55%;opacity:.8;background:repeating-linear-gradient(90deg,var(--lav) 0 12px,transparent 12px 20px,var(--paper) 20px 23px,transparent 23px 58px,var(--signal) 58px 96px,transparent 96px 104px,var(--peri) 104px 107px,transparent 107px 170px)}
#ik .ik-band i:nth-child(2){top:48%;height:22%;opacity:.7;background:repeating-linear-gradient(90deg,transparent 0 30px,var(--paper) 30px 33px,transparent 33px 41px,var(--blue) 41px 77px,transparent 77px 140px)}
#ik .ik-band i:nth-child(3){bottom:0;height:30%;opacity:.9;background:repeating-linear-gradient(90deg,var(--violet) 0 50px,transparent 50px 64px,var(--lav) 64px 66px,transparent 66px 120px)}

/* ---------- 3.7 TOTES LES ENTRADES · vídeo 0:12 (collage de ventanas) ---------- */
#ik .ik-arxiu .ik-sticky{display:flex;flex-direction:column;justify-content:center;gap:clamp(1.2rem,3vh,2rem);padding:calc(var(--bar) + 4.5rem) 0 3.6rem}
#ik .ik-arxiu__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 2rem;padding:0 var(--gut)}
#ik .ik-arxiu__head h2{font:900 clamp(2.4rem,6vw,5.6rem)/.9 var(--f-display);letter-spacing:-.045em}
#ik .ik-arxiu__meta{font:700 .875rem var(--f-mono);color:var(--peri)}
#ik .ik-arxiu__meta b{margin-right:.6rem;font-size:1.6rem;color:var(--paper);vertical-align:-.12em}
#ik .ik-track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:clamp(196px,15vw,290px);gap:1rem;width:max-content;padding:0 var(--gut);will-change:transform}
#ik .ik-win{display:block;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:rgba(31,31,65,.35);transition:border-color .3s,translate .45s var(--out)}
#ik .ik-win:is(:hover,:focus-visible){border-color:var(--lav);translate:0 -4px}
#ik .ik-win__cap{display:block;padding:.55rem .7rem .7rem}
#ik .ik-win__cap b{display:block;font:700 .75rem var(--f-mono);color:var(--peri)}
#ik .ik-win__cap span{display:-webkit-box;min-height:2.56em;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font:700 .92rem/1.28 var(--f-text)}
#ik.ik-js .ik-win{opacity:0;scale:.9}
#ik .ik-win.is-in{opacity:1;scale:1;transition:opacity .5s,scale .7s var(--out),border-color .3s,translate .45s var(--out)}
#ik .ik-arxiu__progress{position:absolute;left:var(--gut);right:var(--gut);bottom:2.2rem;height:1px;background:var(--line)}
#ik .ik-arxiu__progress i{position:absolute;inset:0;background:var(--lav);transform:scaleX(0);transform-origin:0 50%}

/* ---------- 3.8 CONTINGUT RELACIONAT (Apunts): ventana que se enciende ---------- */
#ik .ik-rel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(6rem,16vh,10rem) var(--gut)}
#ik .ik-rel__intro{display:grid;align-content:start;gap:1.2rem}
#ik .ik-rel__title{font:900 clamp(3rem,9vw,8.4rem)/.88 var(--f-display);letter-spacing:-.05em}
#ik .ik-rel__desc{max-width:46ch;color:rgba(244,242,255,.84)}
#ik .ik-rel__list{display:grid;gap:1.6rem}
#ik .ik-doc{display:block;overflow:hidden;border:1px solid var(--peri);border-radius:12px;background:rgba(31,31,65,.4)}
#ik .ik-doc__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;padding:1rem 1.2rem 1.2rem}
#ik .ik-doc__t{max-width:24ch;font:800 clamp(1.25rem,2.3vw,2rem)/1.15 var(--f-text);letter-spacing:-.015em}
#ik .ik-doc__go{padding-bottom:.15rem;border-bottom:1px solid currentColor;font:700 .875rem var(--f-mono);color:var(--lav)}
#ik.ik-js:not(.ik-rm) .ik-doc{opacity:0}
#ik.ik-js:not(.ik-rm) .ik-doc.is-in{opacity:1;animation:ik-crt 1.1s var(--out) both}

/* ---------- 3.9 CONTACTE · vídeo 0:13 (cortina de bloques) ---------- */
#ik.ik-js:not(.ik-rm) .ik-contacte{height:190vh}
#ik .ik-contacte .ik-sticky{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 5rem) var(--gut) 5rem}
#ik .ik-curtain{position:absolute;inset:0;z-index:4;pointer-events:none}
#ik .ik-curtain i{position:absolute;left:0;transform:translateX(110vw);will-change:transform}
#ik .ik-curtain i:nth-child(1){top:0;height:36%;width:72vw;background:var(--paper)}
#ik .ik-curtain i:nth-child(2){top:28%;height:30%;width:58vw;background:var(--lav)}
#ik .ik-curtain i:nth-child(3){top:50%;height:50%;width:86vw;background:var(--paper)}
#ik .ik-curtain i:nth-child(4){top:12%;height:20%;width:30vw;background:var(--signal)}
#ik .ik-curtain i:nth-child(5){top:72%;height:12%;width:44vw;background:var(--peri)}
#ik .ik-contacte__in{position:relative;z-index:2;display:grid;gap:clamp(1.4rem,3vh,2.2rem)}
#ik .ik-contacte__in:focus-within{opacity:1 !important}
#ik .ik-contacte__links{display:grid;gap:clamp(.8rem,2.4vh,1.6rem)}
#ik .ik-contacte__links a{display:inline-grid;gap:.3rem}
#ik .ik-contacte__links small{font:700 .8125rem var(--f-mono);color:var(--peri)}
#ik .ik-contacte__links span{padding-bottom:.08em;background:linear-gradient(var(--lav),var(--lav)) 0 100%/0 2px no-repeat;font:900 clamp(1.3rem,5.2vw,5.2rem)/1.02 var(--f-display);letter-spacing:-.04em;transition:background-size .5s var(--out),color .3s}
#ik .ik-contacte__links a:is(:hover,:focus-visible) span{background-size:100% 2px;color:var(--lav)}

/* ---------- 3.10 SIGNATURA / MARCA D'AIGUA · vídeo 0:13–0:15 ---------- */
#ik .ik-sign{position:relative;display:grid;align-content:end;gap:clamp(1.2rem,3vh,2rem);min-height:100vh;min-height:100svh;overflow:hidden;padding:calc(var(--bar) + 5.5rem) var(--gut) 0}
#ik .ik-sign__mark{display:flex;align-items:center;gap:1.2rem}
#ik.ik-js .ik-sign__mark{opacity:0;transform:translateY(20px)}
#ik .ik-sign__mark.is-in{opacity:1;transform:none;transition:opacity .8s,transform 1s var(--out)}
#ik .ik-sign__logo{position:relative;flex:none;width:clamp(76px,8vw,112px);aspect-ratio:1}
#ik .ik-sign__logo .ik-logo{width:100%;height:100%;border-radius:50%;object-fit:cover;font-size:1.8rem}
#ik .ik-sign__logo svg{position:absolute;inset:-16%;width:132%;height:132%;fill:none;stroke:var(--lav);stroke-width:1;stroke-dasharray:3 5;animation:ik-spin 20s linear infinite}
#ik .ik-sign__by{font:700 .9rem/1.5 var(--f-mono);color:var(--peri)}
#ik .ik-sign__phrase{font:900 clamp(3rem,8.6vw,9rem)/.88 var(--f-display);letter-spacing:-.05em}
#ik .ik-sign__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.2rem;border-top:1px solid var(--line);font:700 .8125rem var(--f-mono);color:var(--peri)}
#ik .ik-sign__top{color:var(--paper)}
#ik .ik-sign__water{margin:clamp(.5rem,3vh,2rem) calc(var(--gut) * -1) 0;overflow:hidden;text-align:center;white-space:nowrap;user-select:none;font:900 16vw/.9 var(--f-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(139,157,255,.4)}
#ik .ik-sign__water span{display:inline-block}

/* ---------- 4. MICROINTERACCIONES (solo ratón) ---------- */
#ik .ik-peek{position:fixed;left:0;top:0;z-index:70;width:clamp(240px,23vw,360px);overflow:hidden;pointer-events:none;border:1px solid var(--peri);border-radius:10px;background:#0b0b22;opacity:0;transition:opacity .25s;will-change:transform}
#ik .ik-peek.on{opacity:1}
#ik .ik-peek img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
#ik .ik-lock{position:fixed;left:0;top:0;z-index:65;width:0;height:0;opacity:0;pointer-events:none;transition:opacity .2s,transform .4s var(--out)}
#ik .ik-lock.on{opacity:1}
#ik .ik-lock i{position:absolute;left:0;top:0;width:10px;height:10px;border:0 solid var(--lav);transition:transform .4s var(--out)}
#ik .ik-lock i:nth-child(1){border-width:1px 0 0 1px}
#ik .ik-lock i:nth-child(2){border-width:1px 1px 0 0;transform:translateX(calc(var(--w) - 10px))}
#ik .ik-lock i:nth-child(3){border-width:0 0 1px 1px;transform:translateY(calc(var(--h) - 10px))}
#ik .ik-lock i:nth-child(4){border-width:0 1px 1px 0;transform:translate(calc(var(--w) - 10px),calc(var(--h) - 10px))}
#ik .ik-noscript{padding:4rem var(--gut);font-family:var(--f-mono)}
#ik .ik-noscript a{color:var(--lav);text-decoration:underline}

/* ---------- 5. RESPONSIVE: composición propia para móvil ---------- */
@media (max-width:1024px){
  #ik .ik-monitor__body{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
@media (max-width:760px){
  #ik .ik-hud{inset:calc(var(--bar) + 8px) 8px 8px}
  #ik.ik-js:not(.ik-rm) .ik-hero{height:190vh}
  #ik .ik-asm{top:calc(var(--bar) + 9vh);right:-16vw;width:88vw}
  #ik .ik-hero__name{font-size:clamp(3rem,17vw,6rem)}
  #ik .ik-hero__cue{display:none}
  #ik.ik-js:not(.ik-rm) .ik-perfil{height:auto}
  #ik.ik-js:not(.ik-rm) .ik-perfil>.ik-sticky{position:relative;height:auto;min-height:0;overflow:visible;padding-top:5rem;padding-bottom:3rem}
  #ik .ik-monitor__body{grid-template-columns:1fr}
  #ik .ik-radar{max-width:60vw}
  #ik.ik-js:not(.ik-rm) .ik-pres{height:200vh}
  #ik .ik-pres__rings{right:-40vmin;width:110vmin;height:110vmin;margin-top:-55vmin}
  #ik .ik-cats,#ik .ik-rel{grid-template-columns:1fr}
  #ik .ik-catrow{grid-template-columns:1fr;gap:.3rem}
  #ik .ik-catrow__meta{text-align:left}
  #ik .ik-cross{display:none}
  #ik.ik-js:not(.ik-rm) .ik-dive{height:260vh}
  #ik .ik-enc__head{grid-template-columns:1fr;align-items:start}
  #ik .ik-enc--alt .ik-enc__num{order:0;text-align:left}
  #ik .ik-enc__num{font-size:38vw}
  #ik .ik-task{grid-template-columns:minmax(0,1fr) auto;padding:1.1rem .1rem}
  #ik .ik-task__n{grid-column:1/-1}
  #ik.ik-js .ik-arxiu{height:auto !important}
  #ik.ik-js .ik-arxiu>.ik-sticky{position:relative;height:auto;min-height:0;overflow:visible}
  #ik .ik-arxiu__progress{display:none}
  #ik .ik-index__in{grid-template-columns:1fr}
  #ik .ik-index__tree{padding:1.2rem 0 0;border-left:0;border-top:1px solid var(--line)}
}
/* Pista de entradas como “swipe” nativo (móvil y movimiento reducido) */
@media (max-width:760px){
  #ik .ik-track{grid-template-rows:auto;grid-auto-columns:74vw;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-bottom:1rem;transform:none !important}
  #ik .ik-track>*{scroll-snap-align:start}
}
#ik.ik-rm .ik-track{grid-template-rows:auto;grid-auto-columns:clamp(220px,24vw,300px);width:auto;overflow-x:auto;padding-bottom:1rem}

/* ---------- 6. MOVIMIENTO REDUCIDO ---------- */
#ik.ik-rm *,#ik.ik-rm *::before,#ik.ik-rm *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
#ik.ik-rm .ik-curtain,#ik.ik-rm .ik-flash,#ik.ik-rm .ik-hero__cue{display:none}
@media (prefers-reduced-motion:reduce){
  #ik .ik-radar__sweep,#ik .ik-asm__star::before,#ik .ik-sign__logo svg,#ik .ik-hero__cue i{animation:none}
}

/* ---------- 7. KEYFRAMES ---------- */
@keyframes ik-spin{to{transform:rotate(360deg)}}
@keyframes ik-up{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes ik-blink{50%{opacity:0}}
@keyframes ik-blip{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ik-flick{0%{opacity:0}30%{opacity:1}45%{opacity:.2}60%,100%{opacity:1}}
@keyframes ik-twinkle{0%,100%{opacity:.35;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes ik-cue{0%{transform:scaleY(0);transform-origin:50% 0}45%{transform:scaleY(1);transform-origin:50% 0}55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}
@keyframes ik-glitch{0%{opacity:1;transform:translateX(-4%)}35%{opacity:1;transform:translateX(3%)}70%{opacity:.8;transform:translateX(-1%)}100%{opacity:0;transform:none}}
@keyframes ik-slide{from{opacity:0;transform:translate(calc(var(--x) + 40%),var(--y)) rotate(calc(var(--r) * 3))}to{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@keyframes ik-crt{0%{transform:scale(.7,.004);filter:brightness(3)}45%{transform:scale(1,.004);filter:brightness(2.4)}100%{transform:none;filter:none}}