/* ═══ gabriel.nebular — styles.css ═══════════════════════════════
   Monospace · sin sombras ni glitch · tonos híbridos por sección.
   Regla de rendimiento: nada pesado vive en el canvas; la obra se ve en el visor. */
:root{--font:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--accent:#ff4b2e;--ease:cubic-bezier(.65,0,.25,1)}
[data-tone="ivory"]{--bg:#f3f0e6;--ink:#15140f;--dim:rgba(21,20,15,.56);--line:rgba(21,20,15,.2);--card:#f3f0e6}
[data-tone="gray"] {--bg:#dad9d3;--ink:#14140f;--dim:rgba(20,20,15,.6);--line:rgba(20,20,15,.26);--card:#e5e4de}
[data-tone="char"] {--bg:#1d1d19;--ink:#e8e4d8;--dim:rgba(232,228,216,.58);--line:rgba(232,228,216,.22);--card:#1d1d19}
[data-tone="ink"]  {--bg:#0e0e0b;--ink:#ece8dc;--dim:rgba(236,232,220,.56);--line:rgba(236,232,220,.22);--card:#0e0e0b}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:13px/1.6 var(--font);transition:background .8s var(--ease),color .8s var(--ease)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
h1,h2,h3{font-weight:500;letter-spacing:-.01em}
.idx,.label{font-size:10px;letter-spacing:.14em;text-transform:uppercase}.idx{color:var(--accent)}.label{color:var(--dim)}

/* ── PORTAL (imagen a pantalla completa, texto claro) ───── */
#portal{position:fixed;inset:0;z-index:70;background:#0e0e0b;color:#f6f3ea;cursor:pointer;transition:opacity .7s ease .5s}
#portal.open{opacity:0;pointer-events:none}
.pimg{position:absolute;inset:0;overflow:hidden;background:#0e0e0b;transition:transform 1.3s var(--ease)}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}
.pimg img.ready{opacity:1}
.pimg .lo{filter:blur(6px);transform:scale(1.04)}.pimg .lo.solo{filter:none;transform:none} /* miniatura borrosa hasta que llega la original */
.pimg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 52%,rgba(0,0,0,.55))} /* velo para legibilidad (no es sombra de texto) */
#portal.open .pimg{transform:scale(1.12)}
.pmeta{position:absolute;inset:0;padding:max(20px,env(safe-area-inset-top)) 22px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;font-size:11px;letter-spacing:.08em;pointer-events:none;transition:opacity .35s}
#portal.open .pmeta{opacity:0}
.pmeta>div{display:flex;justify-content:space-between;gap:12px}
.pmeta .mid{position:absolute;left:0;right:0;bottom:16vh;flex-direction:column;align-items:center;text-align:center}
.enter{margin-top:14px;padding:9px 18px;border:1px solid currentColor;text-transform:uppercase;letter-spacing:.14em;transition:background .25s,color .25s}
#portal:hover .enter{background:#f6f3ea;color:#0e0e0b}
.blink{animation:blink 1.1s steps(2) infinite}@keyframes blink{50%{opacity:0}}

/* fondo del canvas: la misma imagen del portal, muy desenfocada y tenue */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#bg img{width:100%;height:100%;object-fit:cover;filter:blur(48px);transform:scale(1.2);opacity:0;transition:opacity 1.6s ease .6s}
body.in #bg img.ready{opacity:.2}

/* ── CANVAS (solo texto + líneas: liviano) ──────────────── */
#viewport{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
#viewport.drag{cursor:grabbing}
#world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
#edges line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
#edges circle{fill:var(--ink)}
.node{will-change:transform;position:absolute;display:block;text-align:left;padding:16px 18px 14px;background:var(--card);border:1px solid var(--line);color:var(--ink);transition:background .2s,color .2s,border-color .2s}
button.node:hover,button.node:focus-visible{background:var(--ink);color:var(--bg);border-color:var(--ink);outline:none}
.node .g{display:block;width:100%;height:40px;margin:2px 0 10px;color:var(--dim);overflow:hidden}.node .g svg{display:block;width:100%;height:100%}
.node h2{font-size:20px;margin:4px 0 4px}
.node p{color:var(--dim);font-size:12px}
.node .go{display:block;margin-top:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
button.node:hover p,button.node:hover .g{color:inherit;opacity:.75}
.node.home{cursor:default}.node.home h1{font-size:28px;line-height:1.1;margin:8px 0 8px}

#dock{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;display:flex;background:var(--card);border:1px solid var(--line);padding:3px;max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none;opacity:0;pointer-events:none;transition:opacity .5s,background .8s,border-color .8s}
#dock::-webkit-scrollbar{display:none}
body.in #dock{opacity:1;pointer-events:auto}
#dock button{padding:8px 11px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--dim)}
#dock button:hover,#dock button.on{background:var(--ink);color:var(--bg)}
#hud{position:fixed;top:max(14px,env(safe-area-inset-top));z-index:20;font-size:10.5px;letter-spacing:.06em;opacity:0;transition:opacity .5s;pointer-events:none}
#hud{left:16px}#hud small{display:block;color:var(--dim)}
body.in #hud{opacity:1}

/* botón claro/oscuro */
.theme,.lang{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:5px 9px;border:1px solid var(--line);white-space:nowrap;flex:none}
.theme:hover,.lang:hover{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.lang b{font-weight:500;color:var(--ink)}.lang:hover b{color:var(--bg)} /* idioma activo en negrita: ES / EN */
.ctl{display:flex;gap:6px;flex:none}
#ctl{position:fixed;top:max(10px,env(safe-area-inset-top));right:14px;z-index:20;opacity:0;pointer-events:none;transition:opacity .5s}
body.in #ctl{opacity:1;pointer-events:auto}

/* ── VISOR (video · foto · loops · sonido) y HOJA (texto) ─ */
#view{position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--ink);display:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
#view.on{display:grid;animation:fade .25s ease}@keyframes fade{from{opacity:0}}
#view header{display:flex;align-items:center;gap:14px;padding:max(10px,env(safe-area-inset-top)) 14px 10px;border-bottom:1px solid var(--line)}
#v-sec{font-weight:500;flex:none}
#v-tabs{flex:1;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}#v-tabs::-webkit-scrollbar{display:none}
#v-tabs button{padding:5px 10px;font-size:11px;white-space:nowrap;color:var(--dim);border:1px solid transparent}
#v-tabs button:hover{color:var(--ink)}#v-tabs button.on{color:var(--ink);border-color:var(--ink)}
#v-close{flex:none;padding:5px 0 5px 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
#v-close:hover{color:var(--accent)}
.vbody{display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:0}
.main{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;min-width:0}
.stage{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:pan-y}
.art{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;background:transparent}
video.art{background:#000}
img.art.hi{opacity:0;transition:opacity .5s ease}img.art.hi.ready{opacity:1}
img.art{-webkit-user-drag:none;user-select:none}
img.art.lo{filter:blur(2px)}
img.art.lo.lp{filter:none} /* loops: la vista previa se ve nítida, solo más liviana */
img.art.rnd{cursor:pointer} /* click = otra imagen al azar (loops y fotografía) */
img.art.lp{inset:0;margin:auto;width:min(calc(100% - 32px),960px);height:min(calc(100% - 32px),540px);cursor:pointer} /* loops: nunca más de 960×540 px */
iframe.art{position:static;width:min(350px,100%);height:350px;border:0;background:#fff}
.ld,.ph0{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.ph0 svg{display:block;width:min(60%,300px);height:90px;margin:0 auto 16px;color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--line);font-size:12px}
.bar .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar .t small{color:var(--dim);margin-left:8px}
.bar .r{display:flex;align-items:center;gap:14px;flex:none}
.bar button,.bar a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 0}
.bar button:hover,.bar a:hover{color:var(--accent)}
.panel{border-left:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 0 max(10px,env(safe-area-inset-bottom))}
.ph{padding:10px 14px 4px;font-size:11px;color:var(--dim)}.ph b{display:block;font-weight:500;color:var(--ink);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.row{display:flex;gap:12px;width:100%;padding:9px 14px;text-align:left;color:var(--dim);border-bottom:1px solid var(--line);font-size:12px}
.row i{font-style:normal;color:var(--accent);flex:none;min-width:2.2ch}
.row:hover{color:var(--ink)}.row.on{background:var(--ink);color:var(--bg)}.row.on i{color:inherit}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 14px}
.th{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.th img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}.th img.loaded{opacity:1}
.th svg{position:absolute;inset:0;width:100%;height:100%;color:var(--dim)}
.th img.loaded~svg{display:none}
.th.on{outline:2px solid var(--ink);outline-offset:-3px}
.links a{display:flex;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);font-size:12px}.links a:hover{color:var(--accent)}.links span{color:var(--dim)}

/* hoja de texto */
#view .sheet{display:none;grid-column:1/-1;overflow-y:auto;padding:28px 16px max(40px,env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
#view.sheetmode .sheet{display:block;grid-row:1}#view.sheetmode .main,#view.sheetmode .panel{display:none}
#view.sheetmode .vbody{grid-template-rows:minmax(0,1fr)} /* una sola fila a pantalla completa, también en móvil */
.sheet .wrap{max-width:760px;margin:0 auto}
.sheet.wide .wrap{max-width:1120px}
.bio-cols{gap:56px}.bio-cols>div>h3{margin-top:0}
.sheet p{margin-bottom:14px;max-width:62ch}.sheet .wrap>h3:first-child{margin-top:0}
.sheet h3{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:30px 0 10px}
.sheet .q{margin:0 0 2px}.sheet .a{color:var(--dim)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.plist{list-style:none}.plist li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid var(--line);font-size:12px}.plist small{display:block;color:var(--dim);font-size:11px}.plist .y{color:var(--dim)}
.sheet .links a{padding:9px 0;border-top:1px solid var(--line);border-bottom:0}

/* ── MÓVIL ──────────────────────────────────────────────── */
@media(max-width:760px){
  .theme,.lang{padding:5px 7px;letter-spacing:.06em}.ctl{gap:4px}#view header{gap:8px}
  .cols{grid-template-columns:1fr;gap:0}
  .bio-cols>div+div>h3{margin-top:34px}
  .vbody{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,46%) minmax(0,1fr)}
  .panel{border-left:0;border-top:1px solid var(--line)}
  .art{inset:0;width:100%;height:100%}
  img.art.lp{width:min(100%,960px);height:min(100%,540px)}
  .thumbs{grid-template-columns:repeat(4,1fr)}
  #v-sec{display:none}
}
@media(max-height:520px) and (orientation:landscape){
  .vbody{grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:minmax(0,1fr)}
  .panel{border-left:1px solid var(--line);border-top:0}.thumbs{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01s!important;animation:none!important}}