/* obe.css — opción E: la misma pantalla dividida, sin cajas: las dos mitades viven sobre líneas, separadas por una línea
 * vertical por la que baja la luz de los botones (como el riel de «Lo que Gu hizo hoy»). El paso 2 (las propiedades) se queda como antes. */
.demo { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pane { background: none; border: 0; border-radius: 0; overflow: visible; position: relative; }
.pane + .pane { border-left: 1px solid var(--line); }
.pane + .pane::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 90px; pointer-events: none;
  background: linear-gradient(transparent, var(--b3), var(--b1), var(--b2), var(--b1), transparent); box-shadow: 0 0 8px rgb(var(--t1) / .8); animation: bajaLuz 5s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes bajaLuz { 0% { transform: translateY(-90px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(370px); opacity: 0; } }
.pane-h { padding: 16px 20px 14px 0; border-bottom-color: var(--line); }
.pane + .pane .pane-h { padding-left: 24px; padding-right: 0; }
.pane-h > .mono:not(.dim) { font-family: var(--disp); font-size: 16px; font-weight: 800; letter-spacing: -.015em; color: var(--fg); }
.chat-demo { padding: 16px 20px 16px 0; }
.feed { padding: 4px 0 14px 24px; }
.prop-chip { border: 0; background: none; padding: 0; }
.chat-live { border-top: 1px solid var(--line); padding-top: 16px; }
@media (max-width: 680px) {
  .pane + .pane { border-left: 0; border-top: 1px solid var(--line); } .pane + .pane::before { display: none; }
  .pane + .pane .pane-h, .feed { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pane + .pane::before { display: none; } }

/* ---------- intro: Gu de la landing frente al anillo de luz; se deshace en humo (onboarding.js) ---------- */
.intro { background: var(--k0a0b0d); }
.intro canvas { z-index: 1; }
.intro-anillo { position: absolute; left: 50%; top: 50%; width: calc(var(--gu, 380px) * 1.75); aspect-ratio: 1; transform: translate(-50%, -52%) scale(.94); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, transparent 57%, rgb(var(--t1) / .5) 60.5%, var(--kf7f8f8-8) 61.2%, rgb(var(--t1) / .35) 62.5%, transparent 68%); filter: blur(1.5px);
  -webkit-mask: linear-gradient(#000 40%, transparent 78%); mask: linear-gradient(#000 40%, transparent 78%);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.intro.on .intro-anillo { opacity: .85; transform: translate(-50%, -52%) scale(1); }
.intro.humo .intro-anillo { opacity: 0; transform: translate(-50%, -52%) scale(1.08); transition-duration: 1.4s; }
.intro.fuera { animation-duration: .7s; }
/* «Hola, soy Gu» con la letra del h1 del hero: entra con Gu (sube y se enfoca) y se deshace con él cuando llega el humo */
.intro-hola { position: absolute; left: 50%; top: calc(50% + var(--gu, 380px) * .5 + 12px); z-index: 1; margin: 0; white-space: nowrap;
  font: 900 clamp(32px, min(5.4vw, 7svh), 60px)/.95 var(--disp); letter-spacing: -.045em; color: var(--fg);
  opacity: 0; filter: blur(14px); transform: translate(-50%, 24px); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); }
.intro.on .intro-hola { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }
/* el frente del humo baja de la cabeza a los hombros: el texto, debajo, se suelta al final y sube con él */
.intro.humo .intro-hola { opacity: 0; filter: blur(12px); transform: translate(-50%, -32px) scale(1.04); transition-duration: 1.1s; transition-delay: .45s; }
/* humo del hero (ChromaFlow, intro-gpu.js) encima de Gu: solo en la fase de humo, con la misma mezcla que en la landing */
.intro .intro-gpu { z-index: 2; mix-blend-mode: screen; opacity: 0; transition: opacity .5s; }
.intro.gpu.humo .intro-gpu { opacity: 1; }