/* Composición editorial: una función, una pantalla y una acción. */
.cj-scroll { height:900svh; }
.cj-showcase { --feature-accent:#b7c6dc; position:absolute; z-index:3; inset:84px var(--m) 72px; width:calc(100% - 2 * var(--m)); max-width:1360px; margin:auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,6vw,100px); align-items:center; }
.cj-showcase-copy { padding-left:clamp(0px,2vw,28px); max-width:480px; }
.cj-showcase-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:24px; color:var(--feature-accent); }
#cj-showcase-brand { width:30px; height:30px; display:grid; place-items:center; }
#cj-showcase-brand svg { width:100%; height:100%; }
#cj-showcase-brand>span { font:600 28px var(--font-display); }
#cj-showcase-kicker { font:500 13px var(--font-mono); }
#cj-showcase-title { max-width:none; margin:0 0 24px; white-space:pre-line; font:650 clamp(38px,4.6vw,68px)/1.02 var(--font-display); letter-spacing:-.055em; text-wrap:balance; }
.cj-showcase-description { max-width:34ch; margin:0 0 28px; color:#ffffffa8; font:400 clamp(15px,1.35vw,18px)/1.65 var(--font-sans); text-wrap:pretty; }
.cj-showcase-visual { display:grid; justify-items:center; align-content:center; gap:24px; min-width:0; }
.cj-product { position:relative; width:min(100%,calc(100svh - 208px),610px); aspect-ratio:1; padding:14px; border:1px solid #5c6068; border-radius:30px; background:linear-gradient(140deg,#565a61 0,#24272d 5%,#35383f 52%,#1b1d22 98%); box-shadow:0 0 0 3px #0b0c0e,0 2px 2px #ffffff35 inset,0 -2px 2px #ffffff18 inset,0 30px 70px -25px #000c; }
.cj-product::after { content:''; position:absolute; left:11%; right:11%; height:9px; bottom:-9px; border-inline:36px solid #25282d; border-radius:0 0 12px 12px; }
.cj-product-bezel { position:relative; width:100%; height:100%; padding:8px; border-radius:19px; background:#0b0c0f; box-shadow:0 0 0 1px #101216,0 1px 0 #ffffff20 inset; overflow:hidden; }
.cj-product canvas { width:100%; height:100%; display:block; border-radius:12px; image-rendering:auto; touch-action:pan-y pinch-zoom; }
.cj-presentation-note { max-width:48ch; text-align:center; color:#ffffff66; font:400 10px/1.5 var(--font-mono); }
.cj-tour-tools { display:grid; justify-items:start; gap:14px; }
.cj-tour-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.cj-tour-actions button,.cj-mouse-actions button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 16px; border:0; border-radius:10px; background:#fff; color:#0d0f12; font:600 13px var(--font-sans); cursor:pointer; transition:background .2s,transform .2s; }
.cj-tour-actions button:active,.cj-mouse-actions button:active { transform:scale(.98); }
.cj-tour-actions button:hover,.cj-mouse-actions button:hover { background:var(--feature-accent); }
#cj-screen-open { background:none; padding:0; color:#ffffffa8; font-weight:500; }
#cj-screen-open:hover { color:#fff; }
.cj-tour-actions .icon { width:16px; height:16px; }
.cj-sound { min-height:28px; padding:4px 0; border:0; background:none; color:#ffffff6e; font:400 11px var(--font-mono); cursor:pointer; }
.cj-sound:hover { color:#fff; }
#cj-tour-feedback { min-height:38px; max-width:42ch; color:#ced8e7; font-size:12px; line-height:1.55; }
#cj-tour-feedback:empty { visibility:hidden; }
.presentation-active .cj-gl { opacity:0; pointer-events:none; }
.presentation-active .cj-hud { left:var(--m); right:auto; bottom:24px; display:block; }
.presentation-active .cj-hud>div[aria-live],.presentation-active .cj-scroll-hint { display:none; }
.presentation-active .cj-nav { margin:0; }
.presentation-active .cj-nav button::after { top:auto; bottom:calc(100% + 6px); font:500 10px var(--font-mono); }
.presentation-active .cj-nav button::before { width:5px; height:5px; }
.presentation-active .cj-nav button[aria-current=step]::before { box-shadow:none; }
.cj-mouse-demo { position:relative; width:100%; display:grid; justify-items:center; gap:0; }
.cj-monitor { width:min(100%,400px,calc(100svh * .50)); }
.cj-monitor-screen { position:relative; aspect-ratio:1.85; padding:5px; border:1px solid #5d6269; border-radius:13px; background:#1a1d22; box-shadow:0 0 0 3px #0a0c0e,0 18px 32px -15px #000b; overflow:hidden; cursor:none; }
.cj-monitor-chrome { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; height:23px; padding:0 10px; border-radius:7px 7px 0 0; background:#24282e; color:#8e99a9; font:9px var(--font-sans); }
.cj-monitor-desktop { position:absolute; inset:29px 5px 5px; border-radius:0 0 7px 7px; overflow:hidden; background:radial-gradient(ellipse at 75% 110%,#344253 0,transparent 60%),linear-gradient(130deg,#111820,#1d2732); }
.cj-desktop-note { display:flex; align-items:center; gap:7px; margin:14px 14px 0; color:#bdcad9; font:10px var(--font-mono); }
.cj-desktop-dot { width:5px; height:5px; border-radius:50%; background:#94cba7; }
.cj-desktop-apps { display:flex; gap:24px; margin:20px 18px; }
.cj-desktop-apps>span { display:grid; gap:7px; justify-items:center; color:#c7cdd5; font-size:9px; }
.cj-desktop-apps i { display:grid; place-items:center; width:30px; height:30px; color:#a9b6ce; }
.cj-desktop-apps svg { width:24px; height:24px; }
.cj-monitor-taskbar { position:absolute; bottom:0; left:0; right:0; height:20px; display:flex; justify-content:center; align-items:center; gap:9px; background:#121820c9; }
.cj-monitor-taskbar span { width:9px; height:9px; background:#8290a4; border-radius:2px; }
.cj-monitor-edge { position:absolute; bottom:4px; left:36%; right:36%; height:2px; background:#d6e7ff; box-shadow:0 0 10px #9ebbe4; }
.cj-monitor-stand { width:22%; height:10px; margin:auto; background:linear-gradient(#30353c,#22262c); border-radius:0 0 10px 10px; }
.cj-mouse-bridge { position:relative; width:2px; height:22px; margin:3px 0; background:linear-gradient(#647d9d44,#c6dcfc99); }
.cj-mouse-bridge span { position:absolute; width:5px; height:5px; left:-1.5px; bottom:0; border-right:1px solid #bcd5f7; border-bottom:1px solid #bcd5f7; transform:rotate(45deg); }
.cj-mouse-device { width:min(54%,245px,calc(100svh * .30)); padding:9px; border:1px solid #5c6067; border-radius:18px; background:linear-gradient(135deg,#42474f,#252930); box-shadow:0 1px 0 #ffffff26 inset,0 25px 40px -20px #000d; }
.cj-mouse-device canvas { display:block; width:100%; height:auto; border-radius:9px; image-rendering:auto; cursor:none; touch-action:pan-y pinch-zoom; }
.cj-mouse-cursor { position:absolute; left:0; top:0; z-index:4; pointer-events:none; filter:drop-shadow(0 2px 3px #0009); }
.cj-mouse-demo[data-surface=hubi] .cj-mouse-device { border-color:#93b0d5; }
.cj-mouse-demo[data-surface=monitor] .cj-monitor-screen { border-color:#93b0d5; }
.cj-mouse-actions { display:none; flex-wrap:wrap; gap:8px; }
.cj-mouse-actions button { min-height:38px; padding:0 12px; font-size:12px; }
.cj-mouse-actions button+button { border:1px solid #ffffff28; background:transparent; color:#cbd5e3; }
.mouse-active .cj-mouse-actions { display:flex; }
.mouse-active .cj-tour-tools { grid-template-columns:1fr auto; column-gap:20px; row-gap:8px; }
.mouse-active .cj-mouse-actions { grid-column:1/-1; }
.mouse-active .cj-tour-actions { order:1; }
.mouse-active .cj-sound { order:2; }
.mouse-active #cj-tour-feedback { order:3; grid-column:1/-1; }
.mouse-active #cj-showcase-product,.mouse-active #cj-tour-action { display:none; }
.cj-screen-view { width:min(94vw,680px); max-height:94svh; padding:24px; border:1px solid #ffffff2b; border-radius:20px; background:#111419; color:#fff; overflow:auto; }
.cj-screen-view::backdrop { background:#030405ed; }
.cj-screen-view header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.cj-screen-view h2 { font-size:28px; margin-top:6px; }
.cj-screen-view .label { font-size:9px; }
.cj-screen-view canvas { display:block; width:100%; height:auto; border-radius:10px; image-rendering:auto; touch-action:pan-y pinch-zoom; }
.cj-screen-view button { min-height:38px; padding:0 15px; background:#ffffff0a; color:#eee; border:1px solid #ffffff24; border-radius:8px; cursor:pointer; font-size:12px; }
.cj-screen-view button:hover { background:#fff; color:#101216; }
.cj-view-actions { display:flex; justify-content:center; gap:10px; margin-top:20px; }
#cj-view-feedback { color:#b9c9e2; font-size:13px; line-height:1.5; margin-top:16px; }
#cj-view-feedback:empty { display:none; }
.cj-hub-note { display:grid; grid-template-columns:1fr 1fr; gap:80px; max-width:1360px; width:calc(100% - 2 * var(--m)); margin:auto; padding:100px 0 120px; border-bottom:1px solid #ffffff1a; }
.cj-hub-note h2 { margin-top:20px; font:600 clamp(36px,4vw,64px)/1.02 var(--font-display); letter-spacing:-.045em; }
.cj-hub-note>div:last-child { padding-top:25px; }
.cj-hub-note p:not(.label) { max-width:42ch; color:#ffffff9d; line-height:1.7; }
.cj-hub-note a { display:inline-flex; align-items:center; gap:10px; margin-top:25px; font-weight:600; text-decoration:none; }
.cj-hub-note a:hover { color:#bad0ed; }
.cj-hub-note .icon { width:18px; height:18px; }
.cj-marketplace { display:grid; grid-template-columns:1.1fr 1fr; gap:48px 80px; padding:clamp(100px,16svh,180px) var(--m) 70px; max-width:1456px; margin:auto; }
.cj-marketplace h2 { margin:22px 0; font:600 clamp(36px,4.5vw,70px)/1.02 var(--font-display); letter-spacing:-.045em; }
.cj-marketplace-lead { max-width:44ch; font-size:18px; line-height:1.6; color:#ffffffa8; }
.cj-marketplace ol { list-style:none; margin:0; padding:0; }
.cj-marketplace li { display:grid; grid-template-columns:32px 1fr; gap:16px; padding:26px 0; border-bottom:1px solid #ffffff20; }
.cj-marketplace li:first-child { padding-top:0; }
.cj-marketplace li>span { font:12px var(--font-mono); color:#a2b8d2; padding-top:6px; }
.cj-marketplace h3 { font-size:25px; margin-bottom:10px; }
.cj-marketplace li p { font-size:15px; line-height:1.6; color:#ffffffa8; max-width:46ch; }
.cj-marketplace-note { grid-column:1/-1; color:#ffffff70; font-size:13px; }
.cj-static-mouse-block { padding:70px var(--m); text-align:center; }
.cj-static-mouse-block h2 { margin:auto auto 16px; }
.cj-static-mouse-block>p { max-width:50ch; margin:16px auto; color:#ffffffa8; }
.cj-static .cj-mouse-demo { max-width:520px; margin:40px auto 25px; }
.cj-static .cj-mouse-actions { display:flex; justify-content:center; }
.cj-flat canvas,.cj-list canvas { image-rendering:auto; }
.cj-list button { min-height:40px; border:1px solid #ffffff30; border-radius:8px; color:#fff; background:#ffffff0a; cursor:pointer; }
@media(max-width:760px) {
  .cj-showcase { inset:78px 22px 54px; width:calc(100% - 44px); grid-template-columns:1fr; align-content:center; gap:14px; }
  .cj-showcase-copy { padding:0; max-width:none; }
  .cj-showcase-eyebrow { gap:8px; margin-bottom:10px; }
  #cj-showcase-brand { width:20px; height:20px; }
  #cj-showcase-kicker { font-size:10px; }
  #cj-showcase-title { font-size:clamp(30px,8.5vw,42px); max-width:none; margin-bottom:12px; }
  .cj-showcase-description { margin-bottom:14px; max-width:36ch; font-size:13px; line-height:1.5; }
  .cj-tour-tools { gap:7px; }
  .cj-tour-actions { gap:15px; }
  .cj-tour-actions button { min-height:34px; padding:0 12px; font-size:11px; border-radius:8px; }
  #cj-screen-open { padding:0; }
  .cj-sound { font-size:9px; }
  #cj-tour-feedback { font-size:11px; min-height:16px; max-width:48ch; }
  .cj-showcase-visual { gap:13px; }
  .cj-product { width:min(88%,40svh,340px); padding:9px; border-radius:21px; }
  .cj-product-bezel { padding:4px; border-radius:12px; }
  .cj-product canvas { border-radius:9px; }
  .cj-presentation-note { font-size:8px; }
  .presentation-active .cj-hud { left:16px; bottom:16px; }
  .presentation-active .cj-nav button { width:22px; }
  .cj-monitor { width:min(82%,280px); }
  .cj-monitor-chrome { height:18px; font-size:8px; }
  .cj-monitor-desktop { inset:24px 5px 5px; }
  .cj-desktop-note { margin:10px 12px 0; font-size:8px; }
  .cj-desktop-apps { gap:20px; margin:12px 15px; }
  .cj-desktop-apps>span { font-size:8px; gap:4px; }
  .cj-desktop-apps i { width:23px; height:23px; }
  .cj-desktop-apps svg { width:20px; height:20px; }
  .cj-monitor-taskbar { height:16px; }
  .cj-mouse-device { width:min(64%,225px,28svh); padding:7px; border-radius:14px; }
  .cj-mouse-bridge { height:15px; margin:2px 0; }
  .cj-mouse-actions { gap:5px; }
  .cj-mouse-actions button { min-height:32px; font-size:10px; padding:0 9px; }
  .cj-screen-view { padding:16px; }
  .cj-hub-note { grid-template-columns:1fr; gap:22px; padding:70px 0 80px; }
  .cj-hub-note>div:last-child { padding:0; }
  .cj-marketplace { grid-template-columns:1fr; gap:36px; }
  .cj-marketplace-lead { font-size:16px; }
}
@media(max-height:730px) and (min-width:761px) {
  .cj-showcase { inset:78px var(--m) 55px; }
  #cj-showcase-title { font-size:clamp(36px,4vw,58px); }
  .cj-showcase-eyebrow { margin-bottom:16px; }
  .cj-showcase-description { font-size:15px; margin-bottom:20px; }
  .cj-product { width:min(100%,calc(100svh - 190px)); }
  .cj-monitor { width:min(90%,340px); }
  .cj-mouse-device { width:min(60%,245px,36svh); }
}
@media(max-height:740px) and (max-width:760px) {
  .cj-showcase { inset:74px 22px 45px; gap:8px; }
  #cj-showcase-title { font-size:28px; }
  .cj-showcase-description { font-size:12px; margin-bottom:8px; }
  .cj-showcase-eyebrow { margin-bottom:7px; }
  .cj-product { width:min(78%,30svh); }
  .cj-monitor { width:min(76%,230px); }
  .cj-mouse-device { width:min(48%,18svh); }
}