:root {
  --bg: #05060a; --ink: #ece9e2; --muted: #9b988f; --line: rgba(255,255,255,.12); --accent: #D9A441; /* oro de marca CORE, manual de marca 17 oct 2026 */
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); overflow: hidden; }
button { font: inherit; cursor: pointer; }

#gl, #css3d { position: fixed; inset: 0; }
#gl canvas { display: block; }
#css3d { pointer-events: none; z-index: 2; transition: opacity .16s ease; }
body.flying #css3d { opacity: 0; }
/* Renders fotorrealistas del FOH (Blender) sobre el video del concierto */
#plates { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#plates img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Giovani pidió (27 oct 2026) acortar el paso del concierto al computador, dos veces:
   2600ms → 1300ms → 700ms ("aún más rápido"). Estas duraciones están escaladas al mismo
   factor que FLY_MS en main.js (700/2600 ≈ .27): si FLY_MS vuelve a cambiar, hay que
   re-escalar también estos tiempos. */
#plate-wide { transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .24s ease; }
#plate-zoom { opacity: 0; transform: scale(1.12); transition: opacity .24s ease .07s, transform .38s cubic-bezier(.2,.7,.2,1); }
body.plate-zoom #plate-wide { transform: scale(3); opacity: 0; transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .32s ease .32s; }
body.plate-zoom #plate-zoom { opacity: 1; transform: none; transition: opacity .3s ease .4s, transform .38s cubic-bezier(.2,.7,.2,1) .38s; }
#css3d.live { pointer-events: auto; }
body.zoomed #gl { pointer-events: none; }

.screen { width: 1280px; height: 800px; background: #000; position: relative; overflow: hidden; }
.screen iframe { width: 1280px; height: 800px; border: 0; display: block; background: #07080b;
  transition: filter .8s ease; filter: brightness(.8) saturate(.95); }
body.zoomed .screen iframe { filter: none; }
.screen .glare { position: absolute; inset: 0; pointer-events: none; transition: opacity .8s;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.03) 100%); }
body.zoomed .screen .glare { opacity: 0; }

/* CORE OS a pantalla completa: Giovani pidió que al entrar a la computadora, toda la
   ventana del navegador se convierta en CORE OS, en vez de quedar enmarcada dentro del
   monitor 3D (que depende de que la foto fija de Blender calce exacto con la cámara —
   cualquier intento de agrandar ese encuadre sin un render nuevo rompía la alineación).
   OJO: no basta con "position:fixed" sobre el propio .screen — ese div vive dentro del
   árbol que maneja CSS3DRenderer, y cualquier ancestro con transform (la cámara, el
   objeto 3D) rompe el "containing block" de fixed y lo deja posicionado relativo a esa
   transformada, no al viewport. Por eso el iframe se saca físicamente del árbol 3D (ver
   main.js, fullscreenHost) y entra aquí, en #os-full, que SÍ es hijo directo de <body>. */
#os-full { position: fixed; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
body.zoomed #os-full { opacity: 1; pointer-events: auto; }
#os-full iframe { width: 100%; height: 100%; border: 0; display: block; background: #07080b; }

/* Terminal de arranque */
#boot { position: fixed; inset: 0; z-index: 20; background: #000; padding: 22px 26px; display: flex; flex-direction: column;
  transition: opacity .9s ease; font: 13px/1.42 var(--mono); color: #bfc3bb; }
#boot.out { opacity: 0; pointer-events: none; }
#term { margin: 0; flex: 1; overflow: hidden; white-space: pre-wrap; word-break: break-all; display: flex; flex-direction: column; justify-content: flex-end; }
#term .ok { color: #3ad46a; } #term .warn { color: #e8c23a; } #term .dim { color: #6e736b; } #term .hi { color: var(--accent); }
#term .ps { color: #6ab0ff; } #term .usr { color: #3ad46a; }
#term .cur { display: inline-block; width: .6em; height: 1.1em; background: #bfc3bb; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#boot-cta { display: flex; align-items: center; gap: 22px; padding-top: 18px; }
#enter { background: var(--accent); color: #0b0d08; border: 0; padding: 12px 22px; font: 700 13px var(--mono); letter-spacing: .12em; border-radius: 3px; }
#enter kbd { font: inherit; opacity: .6; margin-left: 6px; }
#skip { color: var(--muted); font: 13px var(--mono); }

/* HUD */
#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; pointer-events: none; transition: opacity .5s; }
#hud > * { pointer-events: auto; }
body.zoomed #hud .hud-brand { opacity: 0; }
.hud-brand { font-weight: 700; letter-spacing: .3em; font-size: 15px; transition: opacity .5s; }
.hud-actions { display: flex; gap: 8px; }
.hud-actions button { background: rgba(10,11,14,.7); border: 1px solid var(--line); color: var(--ink); padding: 7px 12px; border-radius: 4px;
  font: 12px var(--mono); letter-spacing: .06em; backdrop-filter: blur(6px); }
body.zoomed #hud { top: auto; bottom: 0; justify-content: flex-end; padding: 10px 14px; }
body.zoomed #btn-back { display: none; }
body.zoomed .hud-actions button { padding: 4px 9px; font-size: 11px; opacity: .75; }

#hint { position: fixed; left: 50%; bottom: 7vh; transform: translateX(-50%); z-index: 10; text-align: center; transition: opacity .5s; }
body.zoomed #hint { opacity: 0; pointer-events: none; }
#btn-pc { background: rgba(8,9,12,.72); color: var(--ink); border: 1px solid rgba(217,164,65,.45); padding: 14px 22px; border-radius: 999px; font-size: 15px; backdrop-filter: blur(8px); }
#btn-pc:hover { border-color: var(--accent); }
#btn-pc .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; box-shadow: 0 0 10px var(--accent); animation: pulse 1.6s infinite; }
#hint small { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; text-shadow: 0 1px 4px #000; }
@keyframes pulse { 50% { opacity: .35; } }
/* Pantallas animadas de la consola (encima del render) */
.con-scr { pointer-events: none !important; display: block; filter: brightness(.82) saturate(.92) contrast(.96); border-radius: 2px; }
#gl canvas { width: 100vw !important; height: 100vh !important; }