/* ============================================================
   ALTERMOTION · AlterLab — Sala de proyección infinita
   Una experiencia WebGL: vuelas por un vacío de pantallas vivas.
   Interfaz mínima, fílmica. La obra es la protagonista.
   ============================================================ */

:root{
  --bg:      #05040a;
  --ink:     #f4eefb;
  --muted:   #b3a9c6;
  --muted-2: #6c6480;
  --line:    rgba(255,255,255,.14);
  --line-2:  rgba(255,255,255,.07);

  --magenta: #ff2e88;
  --pink:    #ff7ab0;
  --violet:  #9b5cff;
  --cyan:    #2fe6ff;
  --gold:    #ffbe4d;

  --font-display: "Syne", system-ui, sans-serif;
  --font-sans:    "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --gut: clamp(16px, 3.4vw, 40px);
  --grad:      linear-gradient(100deg, var(--magenta), var(--violet) 48%, var(--cyan));
  --grad-warm: linear-gradient(100deg, var(--gold), var(--magenta) 60%, var(--violet));
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit }
canvas{ display:block }
::selection{ background:var(--magenta); color:#10040b }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.grad-warm{ background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent }
.serif-it{ font-style:italic }
.mono{ font-family:var(--font-mono) }

/* ============ Stage (WebGL fijo) ============ */
#stage{ position:fixed; inset:0; z-index:0; background:radial-gradient(120% 120% at 50% 40%, #0a0714 0%, var(--bg) 70%) }
#gl{ position:fixed; inset:0; z-index:0; width:100%; height:100% }
/* el documento es alto para generar scroll que controla el viaje */
#scroller{ position:relative; z-index:1; pointer-events:none }

/* viñeta + grano sobre el WebGL */
.vignette{ position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(5,4,10,.55) 88%, rgba(5,4,10,.9) 100%); }
.grain{ position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)} 40%{transform:translate(4%,-6%)} 60%{transform:translate(-3%,3%)} 80%{transform:translate(6%,2%)} 100%{transform:translate(0,0)} }
/* líneas de “letterbox” cinematográfico */
.bars{ position:fixed; left:0; right:0; z-index:4; height:0; background:var(--bg); pointer-events:none; transition:height .8s var(--ease) }
.bars.top{ top:0 } .bars.bot{ bottom:0 }

/* ============ Custom cursor ============ */
.cursor,.cursor__dot{ position:fixed; top:0; left:0; z-index:9000; pointer-events:none; border-radius:50%; will-change:transform }
.cursor{ width:38px; height:38px; border:1px solid rgba(255,255,255,.7); transform:translate(-50%,-50%); transition:width .35s var(--ease),height .35s var(--ease),background .35s,border-color .35s,opacity .3s; display:grid; place-items:center }
.cursor__dot{ width:5px; height:5px; background:#fff; transform:translate(-50%,-50%); mix-blend-mode:difference }
.cursor.is-hot{ width:84px; height:84px; background:rgba(255,46,136,.16); border-color:var(--magenta) }
.cursor__txt{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; opacity:0; transition:opacity .25s; white-space:nowrap }
.cursor.is-hot .cursor__txt{ opacity:1 }
body.has-cursor{ cursor:none }

/* ============ HUD ============ */
.hud{ position:fixed; inset:0; z-index:50; pointer-events:none; font-family:var(--font-mono) }
.hud a,.hud button{ pointer-events:auto }
.hud__row{ position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:var(--gut) }
.hud__row.top{ top:0 } .hud__row.bot{ bottom:0; align-items:flex-end }

.wordmark{ display:flex; align-items:center; gap:11px; pointer-events:auto }
.wordmark .dot{ width:11px; height:11px; border-radius:50%; background:var(--grad); box-shadow:0 0 16px var(--magenta); animation:pulse 2.6s var(--ease) infinite }
@keyframes pulse{ 0%,100%{ transform:scale(.78); opacity:.7 } 50%{ transform:scale(1.1); opacity:1 } }
.wordmark b{ font-family:var(--font-display); font-weight:800; font-size:1.04rem; letter-spacing:.02em }
.wordmark small{ font-size:.6rem; letter-spacing:.18em; color:var(--muted-2); text-transform:uppercase }

.menu{ display:flex; gap:8px; align-items:center }
.menu button,.menu a{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); padding:9px 15px; border:1px solid var(--line); border-radius:100px; background:rgba(8,6,16,.4); backdrop-filter:blur(10px); transition:.25s var(--ease) }
.menu button:hover,.menu a:hover{ background:var(--ink); color:#08040c; border-color:var(--ink) }
.menu button.alt:hover{ background:var(--magenta); border-color:var(--magenta); color:#10040b }

/* zona + contador (abajo izquierda) */
.zone{ display:flex; flex-direction:column; gap:6px }
.zone__k{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan) }
.zone__t{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,2vw,1.6rem); letter-spacing:-.01em; color:var(--ink); line-height:1; max-width:14ch }
.zone__n{ font-size:.66rem; letter-spacing:.1em; color:var(--muted-2); font-variant-numeric:tabular-nums }

/* progreso (abajo derecha / centro) */
.travel{ display:flex; align-items:center; gap:12px; flex-direction:column; align-items:flex-end }
.travel__bar{ width:min(34vw,320px); height:2px; background:var(--line); position:relative; overflow:hidden }
.travel__bar i{ position:absolute; inset:0; width:0; background:var(--grad) }
.travel__pct{ font-size:.64rem; letter-spacing:.12em; color:var(--muted); font-variant-numeric:tabular-nums }

/* caption flotante de la obra apuntada */
.peek{ position:fixed; left:50%; bottom:calc(var(--gut) + 64px); transform:translateX(-50%) translateY(10px); z-index:55;
  display:flex; align-items:center; gap:14px; padding:11px 18px; border:1px solid var(--line); border-radius:100px;
  background:rgba(8,6,16,.55); backdrop-filter:blur(12px); font-family:var(--font-mono); opacity:0; transition:.35s var(--ease); pointer-events:none }
.peek.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.peek b{ font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--ink) }
.peek span{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan) }
.peek .play{ display:inline-flex; align-items:center; gap:6px; color:var(--magenta); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase }
.peek .play::before{ content:""; border-style:solid; border-width:4px 0 4px 7px; border-color:transparent transparent transparent var(--magenta) }

/* ============ Anuncio del proyecto (chapter) ============ */
.chapter{ position:fixed; left:0; right:0; top:38%; z-index:45; pointer-events:none; text-align:center; opacity:0; transition:opacity .6s var(--ease) }
.chapter.show{ opacity:1 }
.chapter__k{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; transform:translateY(10px); transition:transform .7s var(--ease) }
.chapter__t{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,7.5vw,6.5rem); letter-spacing:-.03em; line-height:.95; transform:translateY(18px); transition:transform .8s var(--ease); text-shadow:0 4px 40px rgba(5,4,10,.8) }
.chapter.show .chapter__k,.chapter.show .chapter__t{ transform:translateY(0) }
@media (max-width:520px){ .chapter{ top:34% } }

/* ============ Intro overlay ============ */
#intro{ position:fixed; inset:0; z-index:200; background:var(--bg); display:grid; place-items:center; text-align:center; padding:var(--gut);
  transition:opacity 1s var(--ease),visibility 1s }
#intro.gone{ opacity:0; visibility:hidden }
.intro__eye{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--cyan); margin-bottom:24px }
.intro__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(3rem,15vw,12rem); line-height:.82; letter-spacing:-.03em }
.intro__title .ln{ display:block }
.intro__title .c{ display:inline-block; will-change:transform,opacity }
/* degradado por letra (el clip por línea no funciona con spans inline-block) */
.intro__title .ln.grad .c{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent }
.intro__sub{ margin-top:22px; font-family:var(--font-sans); font-weight:300; font-size:clamp(1rem,1.8vw,1.4rem); color:var(--muted); max-width:30ch; margin-inline:auto }
.intro__sub b{ color:var(--ink); font-weight:500 }
.intro__load{ margin-top:40px; display:flex; flex-direction:column; align-items:center; gap:12px }
.intro__bar{ width:min(72vw,280px); height:2px; background:var(--line); overflow:hidden }
.intro__bar i{ display:block; height:100%; width:0; background:var(--grad); transition:width .3s linear }
.intro__pct{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2) }
.intro__enter{ margin-top:8px; opacity:0; transition:opacity .6s var(--ease) }
.intro__enter.ready{ opacity:1 }
.intro__enter button{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:#10040b; background:var(--ink); padding:14px 30px; border-radius:100px; transition:.3s var(--ease) }
.intro__enter button:hover{ background:var(--magenta); box-shadow:0 0 40px rgba(255,46,136,.4) }
.intro__hint{ position:absolute; bottom:var(--gut); left:0; right:0; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2) }

/* ============ Outro CTA ============ */
#outro{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; text-align:center; padding:var(--gut);
  opacity:0; visibility:hidden; transition:opacity .8s var(--ease),visibility .8s; pointer-events:none;
  background:radial-gradient(80% 80% at 50% 50%, rgba(5,4,10,.4), rgba(5,4,10,.9) 80%) }
#outro.show{ opacity:1; visibility:visible; pointer-events:auto }
.outro__eye{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--magenta); margin-bottom:20px }
.outro__big{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,6vw,5rem); line-height:1; letter-spacing:-.03em; max-width:16ch; margin-inline:auto }
.outro__sub{ margin:1.1em auto 0; max-width:48ch; color:var(--muted); font-weight:300; font-size:clamp(1rem,1.5vw,1.25rem) }
.outro__row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; padding:15px 26px; border-radius:100px; transition:.3s var(--ease) }
.btn--primary{ background:var(--magenta); color:#10040b; font-weight:600 } .btn--primary:hover{ box-shadow:0 0 40px rgba(255,46,136,.45); transform:translateY(-2px) }
.btn--ghost{ border:1px solid var(--line); color:var(--ink) } .btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan) }
.btn svg{ width:15px; height:15px }
.outro__social{ margin-top:34px; display:flex; gap:22px; justify-content:center; flex-wrap:wrap; font-family:var(--font-mono); font-size:.8rem }
.outro__social a{ color:var(--muted); display:inline-flex; gap:8px; align-items:center; transition:color .25s } .outro__social a:hover{ color:var(--magenta) }
.outro__social i{ color:var(--cyan) }

/* ============ Índice (grid overlay / fallback) ============ */
#index{ position:fixed; inset:0; z-index:300; background:rgba(5,4,10,.96); backdrop-filter:blur(4px); overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease),visibility .5s }
#index.open{ opacity:1; visibility:visible }
.index__head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:calc(var(--gut)) var(--gut); background:linear-gradient(180deg,var(--bg),rgba(5,4,10,.7) 70%,transparent); }
.index__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.6rem); letter-spacing:-.02em }
.index__title small{ font-family:var(--font-mono); font-weight:400; font-size:.66rem; letter-spacing:.2em; color:var(--muted-2); text-transform:uppercase; display:block; margin-top:4px }
.index__x{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); border:1px solid var(--line); padding:11px 18px; border-radius:100px; transition:.25s var(--ease) }
.index__x:hover{ background:var(--magenta); color:#10040b; border-color:var(--magenta) }
.filters{ display:flex; gap:8px; flex-wrap:wrap; padding:0 var(--gut) 8px }
.filter{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:9px 15px; border:1px solid var(--line); border-radius:100px; transition:.25s var(--ease) }
.filter:hover{ color:var(--ink); border-color:var(--muted) }
.filter.active{ color:#10040b; background:var(--ink); border-color:var(--ink) }
.filter b{ font-weight:500; opacity:.5; margin-left:6px }
/* rejilla de proyectos */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; padding:18px var(--gut) calc(var(--gut) * 2) }
.pcard{ position:relative; text-align:left; border-radius:16px; overflow:hidden; border:1px solid var(--line-2); background:#0a0714; aspect-ratio:4/3; display:block; isolation:isolate; transition:transform .5s var(--ease),border-color .4s }
.pcard.hide{ display:none }
.pcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 60%, transparent) }
.pcard__media{ position:absolute; inset:0; z-index:-1 }
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); filter:saturate(1.04) }
.pcard:hover .pcard__media img{ transform:scale(1.07) }
.pcard::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(5,4,10,.05) 0%,rgba(5,4,10,.35) 45%,rgba(5,4,10,.92) 100%) }
.pcard::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; z-index:2; background:var(--accent); box-shadow:0 0 18px var(--accent); transition:width .5s var(--ease) }
.pcard:hover::before{ width:100% }
.pcard__body{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(16px,1.6vw,24px) }
.pcard__k{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:flex; gap:9px; align-items:center; margin-bottom:8px }
.pcard__k span{ color:var(--ink); opacity:.5 }
.pcard__t{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,1.9vw,1.9rem); line-height:1; letter-spacing:-.02em }
.pcard__m{ font-family:var(--font-mono); font-size:.68rem; color:var(--muted); margin-top:9px }
.pcard__n{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; color:var(--ink); margin-top:14px; opacity:.7; transition:opacity .3s }
.pcard:hover .pcard__n{ opacity:1; color:var(--accent) }

/* masonry de piezas dentro de un proyecto */
.pmedia{ columns:3; column-gap:12px; padding:8px var(--gut) calc(var(--gut) * 2) }
.cell{ position:relative; margin:0 0 12px; break-inside:avoid; border-radius:12px; overflow:hidden; cursor:pointer; border:1px solid var(--line-2); background:#0a0714 }
.cell.hide{ display:none }
.cell img{ width:100%; transition:transform .9s var(--ease) }
.cell:hover img{ transform:scale(1.06) }
.cell::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,4,10,.78),transparent 55%); opacity:.2; transition:opacity .35s }
.cell:hover::after{ opacity:1 }
.cell__tag{ position:absolute; left:12px; right:12px; bottom:11px; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; opacity:0; transform:translateY(8px); transition:.35s var(--ease) }
.cell:hover .cell__tag{ opacity:1; transform:translateY(0) }
.cell__tag b{ font-family:var(--font-display); font-weight:700; font-size:.92rem }
.cell__tag span{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan) }
.cell__play{ position:absolute; top:12px; left:12px; z-index:2; width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(5,4,10,.4); backdrop-filter:blur(4px); display:grid; place-items:center }
.cell__play::after{ content:""; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff; margin-left:2px }

/* ============ Lightbox ============ */
#lightbox{ position:fixed; inset:0; z-index:400; background:rgba(3,2,6,.95); display:grid; place-items:center; padding:4vw;
  opacity:0; visibility:hidden; transition:.4s var(--ease) }
#lightbox.open{ opacity:1; visibility:visible }
.lb__media{ position:relative; transform:scale(.96); transition:transform .4s var(--ease); max-width:92vw }
#lightbox.open .lb__media{ transform:scale(1) }
.lb__media img,.lb__media video{ max-width:92vw; max-height:84vh; border-radius:10px; display:block }
.lb__cap{ margin-top:12px; text-align:center; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; color:var(--muted) }
.lb__cap b{ color:var(--ink); font-family:var(--font-display) }
.lb__x{ position:absolute; top:22px; right:26px; font-size:1.4rem; color:var(--muted); width:46px; height:46px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:.3s }
.lb__x:hover{ color:var(--ink); border-color:var(--ink); transform:rotate(90deg) }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; border:1px solid var(--line); color:var(--ink); display:grid; place-items:center; font-size:1.3rem; background:rgba(5,4,10,.4); transition:.3s }
.lb__nav:hover{ background:var(--magenta); color:#10040b; border-color:var(--magenta) }
.lb__nav.prev{ left:3vw } .lb__nav.next{ right:3vw }

/* ============ Detalle de proyecto ============ */
#project{ position:fixed; inset:0; z-index:350; background:var(--bg); overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(2%); transition:opacity .5s var(--ease),visibility .5s,transform .5s var(--ease) }
#project.open{ opacity:1; visibility:visible; transform:none }
.project__head{ position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:var(--gut); background:linear-gradient(180deg,var(--bg),rgba(5,4,10,.6) 70%,transparent) }
.project__back,.project__home{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border:1px solid var(--line); padding:11px 18px; border-radius:100px; transition:.25s var(--ease) }
.project__back:hover{ background:var(--magenta); color:#10040b; border-color:var(--magenta) }
.project__home:hover{ border-color:var(--cyan); color:var(--cyan) }
.project__hint{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2) }
@media (max-width:520px){ .project__hint{ display:none } }
.project__hero{ padding:clamp(10px,3vw,40px) var(--gut) clamp(24px,3vw,40px); max-width:1000px; --accent:var(--cyan) }
.project__meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px }
.project__meta span{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); background:color-mix(in srgb,var(--accent) 10%,transparent); padding:7px 13px; border-radius:100px }
.project__meta span:first-child{ color:var(--accent) }
.project__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,6vw,5.5rem); line-height:.95; letter-spacing:-.03em }
.project__desc{ margin-top:1em; max-width:60ch; color:var(--muted); font-weight:300; font-size:clamp(1.05rem,1.5vw,1.3rem) }

/* ============ Carriles del proyecto (Reels | Imágenes) → sistema alter-reels ============ */
.lanes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.8vw,22px); padding:8px var(--gut) calc(var(--gut) * 2); max-width:1200px; --accent:var(--cyan) }
.lanes.one{ grid-template-columns:1fr; max-width:760px }
.lane{ position:relative; display:block; width:100%; text-align:left; border-radius:18px; overflow:hidden; border:1px solid var(--line-2); background:#0a0714; min-height:min(54vh,520px); isolation:isolate; transition:transform .5s var(--ease),border-color .4s }
.lane:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 60%,transparent) }
.lane__bg{ position:absolute; inset:0; z-index:-1 }
.lane__bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.04); transition:transform 1s var(--ease) }
.lane:hover .lane__bg img{ transform:scale(1.06) }
.lane::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(5,4,10,.15) 0%,rgba(5,4,10,.42) 45%,rgba(5,4,10,.92) 100%) }
.lane::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; z-index:2; background:var(--accent); box-shadow:0 0 18px var(--accent); transition:width .5s var(--ease) }
.lane:hover::before{ width:100% }
.lane__body{ position:relative; z-index:1; height:100%; min-height:inherit; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(18px,2.2vw,30px) }
.lane__icon{ position:absolute; top:clamp(18px,2.2vw,30px); left:clamp(18px,2.2vw,30px); width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(5,4,10,.4); backdrop-filter:blur(6px); display:grid; place-items:center; color:#fff }
.lane__icon svg{ width:20px; height:20px }
.lane__k{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:8px }
.lane__t{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,3vw,2.7rem); line-height:1; letter-spacing:-.02em }
.lane__n{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:var(--ink); margin-top:12px; opacity:.85; display:inline-flex; align-items:center; gap:8px; transition:color .3s }
.lane:hover .lane__n{ color:var(--accent) }
@media (max-width:680px){
  .lanes,.lanes.one{ grid-template-columns:1fr; max-width:560px; margin-inline:auto }
  .lane{ min-height:min(42vh,360px) }
}

/* ============ Modo plano (sin WebGL / reduce) ============ */
body.flat #gl,body.flat #stage,body.flat .vignette,body.flat .bars,body.flat .peek{ display:none }
body.flat #intro{ position:relative; min-height:100svh }
body.flat #index{ position:relative; opacity:1; visibility:visible; background:var(--bg) }
body.flat .index__x{ display:none }
body.flat .hud .travel,body.flat .hud .zone{ display:none }
body.flat #scroller{ display:none }

/* ============ Responsive ============ */
@media (max-width:820px){
  .pmedia{ columns:2 }
  .travel__bar{ width:40vw }
  .zone__t{ font-size:1.1rem }
}
@media (max-width:520px){
  .pmedia{ columns:1 }
  .pgrid{ grid-template-columns:1fr }
  body.has-cursor{ cursor:auto } .cursor,.cursor__dot{ display:none }
  .menu button.idx-hide{ display:none }
  .hud__row.bot{ flex-direction:column; align-items:flex-start; gap:14px }
  .travel{ align-items:flex-start } .travel__bar{ width:60vw }
  .peek{ display:none }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important }
  .grain{ animation:none }
}