/* /cajita/: la caja sola. Idea: su pantalla ilumina el escritorio. El color de la escena sale de lo que
   muestra la pantalla (--amb, lo pone cajita.js) y los títulos se escriben con los puntos de su reloj. */
.cj { --amb: 61 123 255; --m: clamp(20px, 3.4vw, 48px); background: #08090b; }
html:has(body.cj) { scroll-padding-top:0; }
.cj-top { position:fixed; inset:16px var(--m) auto; z-index:20; transition:translate .5s var(--ease),opacity .5s var(--ease); }
.cj-top-inner { display:flex; align-items:center; gap:24px; max-width:1360px; min-height:66px; margin:auto; padding:8px 12px 8px 20px; border:1px solid #ffffff16; border-radius:18px; background:linear-gradient(115deg,#181c21ed,#0f1217e8); backdrop-filter:blur(20px); box-shadow:inset 0 1px #ffffff05,0 12px 40px #0003; }
.cj-top .brand { align-items: center; min-height: 44px; flex-shrink: 0; }
.cj-top .cj-brand-word { width:82px; transition:filter .45s var(--ease); }
.cj-top .brand:hover .cj-brand-word { filter: drop-shadow(0 0 8px rgb(var(--amb) / .75)); }
.cj-top.tucked { translate:0 calc(-100% - 24px); opacity:0; pointer-events:none; }
.cj-top-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.cj-top-link { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:10px; color:#aeb8c6; font:500 13px var(--font-sans); text-decoration:none; white-space:nowrap; transition:color .2s,background .2s; }
.cj-top-link:hover { color:#fff; background:#ffffff08; }
.cj-nav-short { display:none; }
.cj-header-cta { display:flex; align-items:center; justify-content:center; gap:14px; min-height:44px; margin-left:8px; padding:0 18px; border-radius:11px; background:#eaf1f7; color:#11161d; font:600 13px var(--font-sans); text-decoration:none; white-space:nowrap; box-shadow:0 1px 0 #fff inset; transition:background .2s,box-shadow .2s; }
.cj-header-cta svg { width:15px; height:15px; transition:translate .2s; }
.cj-header-cta:hover { background:#fff; box-shadow:0 0 24px #b6daff22; }
.cj-header-cta:hover svg { translate:2px 0; }
.cj-top a:focus-visible { outline:2px solid #bcd9ef; outline-offset:3px; }

/* botones: planos, pastilla; al pasar «se encienden» con la luz de la pantalla */
.cj-btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; min-height: var(--h); padding: 0 24px; border-radius: 999px; background: #fff; color: #08090b; font: 600 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s, color .3s; }
.cj-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgb(var(--amb) / .35), 0 12px 40px -6px rgb(var(--amb) / .9); }
.cj-btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
/* el principal: la flecha entra al pasar */
.cj-btn--go { gap: 8px; }
.cj-btn--go span, .cj-btn--go .icon { transition: translate .45s var(--ease), opacity .3s; }
.cj-btn--go span { translate: calc(.55em + 4px) 0; }
.cj-btn--go .icon { opacity: 0; translate: -8px 0; }
.cj-btn--go:hover span, .cj-btn--go:focus-visible span { translate: 0 0; }
.cj-btn--go:hover .icon, .cj-btn--go:focus-visible .icon { opacity: 1; translate: 0 0; }
.cj-btn--ghost { background: #ffffff14; color: #fff; box-shadow: inset 0 0 0 1px #ffffff2e; }
.cj-btn--ghost:hover { background: #fff; color: #08090b; box-shadow: 0 10px 34px -8px rgb(var(--amb) / .75); }

.cj-scroll { position: relative; height: 1100svh; }
.cj-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: radial-gradient(58% 52% at 50% 56%, rgb(var(--amb) / .2) 0%, rgb(var(--amb) / .06) 45%, transparent 75%), #08090b; }
.cj-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.cj-sticky::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 26svh; background: linear-gradient(#08090b00, #08090b); opacity: var(--seam, 0); pointer-events: none; }
.cj-hud, .cj-cta { z-index: 2; }

/* primera pantalla */
.cj-intro { position: absolute; z-index: 1; inset: 0 0 auto; display: grid; justify-items: center; gap: clamp(14px, 2svh, 28px); padding: clamp(96px, 15svh, 150px) var(--m) 0; text-align: center; pointer-events: none; }
.cj-h1 { margin: 0; width: min(82%, 760px); line-height: 0; }
.cj-dots-word { display: block; width: 100%; height: auto; overflow: visible; }
.cj-dots-word circle { fill: #fff; transition: opacity .25s linear; }
.cj-dots-word .off { fill: #ffffff12; }

.cj-flat { position: absolute; left: 50%; top: 58%; --cube-w: min(64vw, 340px); transform: translate(-50%, -50%); filter: drop-shadow(0 40px 60px #000a); }
.cj-flat canvas { display: block; width: 100%; height: 100%; }
.cj-loader { position: absolute; inset: auto 0 clamp(28px, 6svh, 56px); display: grid; place-items: center; font: 600 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: #ffffffa0; transition: opacity .6s var(--ease); }
.cj-loader.done { opacity: 0; pointer-events: none; }

/* capítulo actual y navegación: abajo a la izquierda, sobre el margen */
.cj-hud { position: absolute; left: var(--m); right: var(--m); bottom: 32px; display: grid; gap: 12px; justify-items: center; text-align: center; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.cj-hud.hide { opacity: 0; translate: 0 8px; pointer-events: none; }
.cj-scroll-hint { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff24; border-radius: 50%; background: #ffffff05; color: #ffffffc9; cursor: pointer; transition: background .3s, translate .3s var(--ease); }
.cj-scroll-hint:hover { background: #ffffff14; translate: 0 3px; }
.cj-chapter { margin: 0; font: 650 clamp(24px, 2.4vw, 34px)/1 var(--font-display); letter-spacing: -.03em; color: #fff; transition: opacity .2s; }
.cj-chapter.swap, .cj-sub.swap { opacity: 0; }
.cj-sub { margin: 8px auto 0; max-width: 48ch; text-wrap: pretty; font: 450 15px/1.45 var(--font-sans); color: #ffffffb8; transition: opacity .2s; }
.cj-sub:empty { display: none; }
.cj-nav { display: flex; gap: 0; margin-left: -9px; }
.cj-nav button { position: relative; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cj-nav button::after { content: attr(data-name); position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% -4px; font: 600 12px/1 var(--font-sans); color: #fff; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s, translate .35s var(--ease); }
.cj-nav button:hover::after, .cj-nav button:focus-visible::after { opacity: 1; translate: -50% 0; }
.cj-nav button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ffffff5c; transition: background .3s, scale .35s var(--ease); }
.cj-nav button:hover::before { background: #ffffffb0; scale: 1.25; }
.cj-nav button[aria-current="step"]::before { background: rgb(var(--amb)); scale: 1.45; box-shadow: 0 0 10px rgb(var(--amb) / .8); }

/* cierre: a la izquierda; la caja queda a la derecha */
.cj-cta { position: absolute; left: var(--m); bottom: clamp(28px, 7svh, 72px); display: grid; gap: 22px; justify-items: start; transition: opacity .6s var(--ease), translate .7s var(--ease); }
.cj-cta.off { opacity: 0; translate: 0 12px; pointer-events: none; }
.cj-cta-title { margin: 0; font: 700 clamp(44px, 6vw, 96px)/.95 var(--font-display); letter-spacing: -.045em; color: #fff; max-width: none; }
.cj-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.cj-colors button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px #ffffff30, inset 0 -3px 6px #0004; cursor: pointer; transition: scale .3s var(--ease); }
.cj-colors button:hover { scale: 1.12; }
.cj-colors button:active { scale: .94; }
.cj-colors button[aria-pressed="true"] { box-shadow: 0 0 0 2px #08090b, 0 0 0 4px #fff; }
.cj-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cj-spec { margin: -6px 0 0; max-width: 40ch; font: 450 16px/1.5 var(--font-sans); color: #ffffffb8; text-wrap: pretty; }

/* El mismo cartel del hero vuelve a encenderse al cerrar el recorrido. */
.cj-foot { position:relative; isolation:isolate; overflow:clip; display:grid; gap:clamp(44px,6vw,80px); padding:clamp(72px,12svh,140px) var(--m) 32px; border-top:1px solid #ffffff0b; background:#08090b; color:#8e9aa9; font-size:12px; }
.cj-foot::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 40%,#9ecfff0e,transparent 65%); }
.cj-foot-word { width:min(100%,1100px); margin:0 auto; line-height:0; }
.cj-foot-credit { margin:0; color:var(--text-3); text-align:center; font:500 clamp(14px,1.2vw,16px)/1.5 var(--font-display); letter-spacing:.01em; }

@media (max-width: 640px) {
  .cj-top { inset:10px 12px auto; }
  .cj-top-inner { min-height:58px; gap:8px; padding:6px 8px 6px 12px; border-radius:14px; }
  .cj-top .cj-brand-word { width:62px; }
  .cj-top-nav { gap:2px; }
  .cj-nav-full { display:none; }
  .cj-nav-short { display:inline; }
  .cj-top-link { padding:0 10px; font-size:12px; }
  .cj-header-cta { gap:0; min-height:44px; padding:0 14px; margin-left:4px; font-size:12px; }
  .cj-header-cta svg { display:none; }
  .cj-foot { gap:40px; padding-top:72px; }
  .cj-intro { padding-top: 92px; }
  .cj-hud { bottom: 28px; }
  .cj-cta { right: var(--m); bottom: 28px; }
  .cj-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .cj-actions .cj-btn { padding: 0 12px; }
}
@media(max-width:420px) {
 .cj-top .cj-brand-word { width:56px; }
 .cj-top-link { padding:0 8px; }
 .cj-header-cta { padding:0 11px; margin-left:2px; }
}
@media(max-width:350px) { .cj-top .cj-brand-word { width:50px; }.cj-top-link,.cj-header-cta { font-size:11px; } }

/* Movimiento reducido o sin WebGL: la caja quieta, el título encendido y cada pantalla en una grilla. */
.cj-static .cj-scroll { height: auto; }
.cj-static .cj-sticky { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100svh; min-height: 620px; }
.cj-static .cj-intro { position: relative; }
.cj-static .cj-flat { position: relative; left: auto; top: auto; transform: none; place-self: center; --cube-w: min(64vw, 340px, 46svh); }
.cj-static .cj-hud { display: none; }
.cj-static .cj-top { position: absolute; }
.cj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 44px 28px; padding: 80px var(--m); }
.cj-list figure { display: grid; gap: 14px; margin: 0; }
.cj-list canvas { width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--bg-screen); box-shadow: 0 0 0 12px #17191d; }
.cj-list figcaption { font: 600 20px/1.1 var(--font-display); letter-spacing: -.02em; color: #fff; }

/* el hub: el panel real y las conexiones, después de la caja */
.cj-hub { display: grid; gap: clamp(28px, 4vw, 48px); padding: clamp(80px, 14svh, 160px) var(--m) 0; }
.cj-hub-head { display: grid; gap: 14px; max-width: 760px; }
.cj-hub-title { margin: 0; font: 700 clamp(40px, 5.4vw, 84px)/.98 var(--font-display); letter-spacing: -.045em; color: #fff; }
.cj-hub-line { margin: 0; max-width: 46ch; font: 450 18px/1.5 var(--font-sans); color: #ffffffb8; text-wrap: pretty; }
.cj-hub .hub-window { box-shadow: 0 1px 0 #ffffff14 inset, 0 50px 140px -50px rgb(var(--amb) / .45), 0 30px 80px -30px #000c; }
.cj-hub-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cj-icons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; max-width: 860px; }
.cj-icons li { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #ffffff0a; box-shadow: inset 0 0 0 1px #ffffff17; color: #ffffff8c; transition: color .3s, box-shadow .4s var(--ease), translate .4s var(--ease); }
.cj-icons svg { width: 19px; height: 19px; }
/* cada ícono se enciende con su color, como en la pantalla */
.cj-icons li:hover { color: var(--c); translate: 0 -2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 22px -4px color-mix(in srgb, var(--c) 70%, transparent); }
@media (max-width: 640px) { .cj-icons li { width: 34px; height: 34px; } .cj-icons svg { width: 16px; height: 16px; } .cj-hub-line { font-size: 16px; } }