/* Un eje para toda la historia: la caja nunca vuelve a una columna lateral. */
.cj-showcase { --stage-size:min(42vw,calc(100svh - 310px),570px); grid-template-columns:minmax(0,1fr) var(--stage-size) minmax(0,1fr); gap:clamp(24px,2.6vw,40px); }
.cj-showcase-copy,.cj-showcase .cj-cta { grid-column:1; min-width:0; max-width:100%; padding-left:0; }
.cj-showcase-visual { grid-column:2; grid-row:1; gap:14px; }
.cj-product { width:100%; }
#cj-showcase-title { font-size:clamp(30px,3.3vw,54px); }
.cj-showcase-description { font-size:clamp(13px,1.15vw,16px); }
.cj-showcase .cj-cta-title { font-size:clamp(36px,3.8vw,64px); }
.cj-showcase .cj-spec { font-size:14px; }
.cj-showcase-visual .cj-tour-tools { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 16px; width:100%; }
.cj-showcase-visual .cj-tour-actions { justify-content:center; gap:14px; }
.cj-showcase-visual #cj-tour-feedback { flex-basis:100%; max-width:100%; min-height:20px; margin:0; text-align:center; font-size:11px; line-height:1.5; }
.cj-showcase-visual .cj-presentation-note { max-width:none; font-size:9px; }
.home-guided .cj-showcase-copy { visibility:hidden; pointer-events:none; }
.cj-showcase-visual .cj-interaction-feedback { width:100%; max-width:48ch; min-height:36px; margin:0; text-align:center; color:#ced8e7; font-size:11px; line-height:1.5; }
.cj-product canvas[role=button] { cursor:pointer; }
.cj-product canvas:focus-visible,.cj-mouse-device canvas:focus-visible,.cj-monitor-screen:focus-visible { outline:2px solid #b7d5fc; outline-offset:3px; }
.cj-home-callouts { position:absolute; z-index:5; inset:0; pointer-events:none; }
#cj-home-arrows { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; color:#d8e5f6; }
.cj-callout-path { fill:none; stroke:currentColor; stroke-width:1; opacity:.22; transition:opacity .3s; stroke-dasharray:1; animation:cj-arrow-draw .7s ease both; }
.cj-callout-path.active { opacity:.85; }
.cj-callout-highlight { fill:#c4dafa08; stroke:#c4dafa60; stroke-width:1; transition:x .35s,y .35s,width .35s,height .35s; }
.cj-callout { position:absolute; display:flex; align-items:flex-start; gap:14px; min-height:44px; padding:10px 0; border:0; background:none; color:#fff; text-align:left; cursor:pointer; pointer-events:auto; opacity:.7; transition:opacity .25s; }
.cj-callout:hover,.cj-callout:focus-visible,.cj-callout[aria-pressed=true] { opacity:1; }
.cj-callout-number { color:#a9c4e7; font:10px/23px var(--font-mono); }
.cj-callout-copy { display:block; min-width:0; }
.cj-callout strong { display:block; font:600 18px/1.3 var(--font-display); letter-spacing:-.02em; }
.cj-callout-description { display:block; margin-top:8px; max-width:29ch; color:#bbc2cc; font:12px/1.6 var(--font-sans); }
.cj-home-caption { display:none; }
.cj-home-callouts[data-count="1"] .cj-callout { opacity:1; }
.cj-home-callouts[data-count="1"] .cj-callout-number { display:none; }
.cj-home-callouts[data-count="1"] .cj-callout strong { font-size:22px; }
.cj-home-callouts[data-count="1"] .cj-callout-description { font-size:14px; line-height:1.65; }
@keyframes cj-arrow-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@media(min-width:900px) and (max-height:730px) {
 #cj-showcase-title { font-size:30px; margin-bottom:14px; }
 .cj-showcase-eyebrow { margin-bottom:14px; }
 .cj-showcase-description { font-size:13px; margin-bottom:16px; }
 .cj-showcase .cj-cta { gap:14px; }
 .cj-tour-actions button { min-height:34px; font-size:11px; }
 .cj-callout strong { font-size:16px; }
 .cj-callout-description { font-size:11px; }
}
@media(max-width:899px) {
 .cj-showcase { inset:78px 22px 54px; width:calc(100% - 44px); grid-template-columns:1fr; grid-template-rows:240px minmax(0,1fr); gap:14px; align-content:center; }
 .mouse-active .cj-showcase { grid-template-rows:190px minmax(0,1fr); }
 .cj-showcase-visual { grid-column:1; grid-row:2; align-self:start; gap:10px; }
 .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,7vw,40px); margin-bottom:12px; }
 .cj-showcase-description { font-size:13px; line-height:1.5; margin-bottom:14px; max-width:48ch; }
 .cj-product { width:min(88%,40svh,340px); }
 .cj-showcase .cj-cta { padding:0; gap:14px; }
 .cj-showcase .cj-cta-title { font-size:40px; }
 .cj-showcase .cj-spec { font-size:13px; }
 .cj-showcase-visual .cj-tour-tools { gap:5px 12px; }
 .cj-showcase-visual .cj-tour-actions { gap:12px; }
 .cj-showcase-visual .cj-tour-actions button { min-height:34px; font-size:11px; padding:0 12px; }
 .cj-showcase-visual #cj-screen-open { padding:0; }
 .cj-showcase-visual .cj-sound { font-size:9px; }
 .cj-showcase-visual .cj-presentation-note { font-size:8px; max-width:48ch; }
 .cj-showcase-visual #cj-tour-feedback { font-size:12px; min-height:16px; }
 .cj-showcase-visual .cj-interaction-feedback { min-height:32px; }
 .presentation-active .cj-nav button { width:clamp(24px,7vw,28px); height:44px; }
 .cj-home-callouts { padding:96px 22px 0; display:grid; grid-template-columns:repeat(3,44px) minmax(44px,1fr); grid-template-rows:44px auto; align-content:start; gap:14px 8px; }
 .cj-callout { position:relative; grid-row:1; width:44px; min-height:44px; padding:0; justify-content:center; align-items:center; border:1px solid #c4dafa35; border-radius:50%; opacity:.8; }
 .cj-callout[aria-pressed=true] { border-color:#c4dafa; background:#c4dafa18; }
 .cj-callout-number,.cj-home-callouts[data-count="1"] .cj-callout-number { display:block; font-size:12px; line-height:1; }
 .cj-callout-copy { display:none; }
 .cj-home-caption { display:grid; gap:8px; grid-column:1/-1; grid-row:2; justify-self:start; width:100%; max-width:48ch; margin:0; padding-bottom:10px; border-bottom:1px solid #c4dafa35; color:#c5cfdd; font:400 14px/1.55 var(--font-sans); overflow-wrap:anywhere; }
 .cj-home-caption strong { font:600 18px/1.25 var(--font-display); letter-spacing:-.02em; color:#fff; }
 .cj-sticky.home-guided .cj-showcase { top:var(--callout-visual-top,316px); bottom:86px; grid-template-rows:minmax(0,1fr); gap:0; }
 .home-guided .cj-showcase-copy { display:none; }
 .home-guided .cj-showcase-visual { grid-row:1; align-self:start; }
 .home-guided #cj-tour-feedback:empty { display:none; }
 .home-guided.mouse-active #cj-tour-feedback { display:none; }
 .home-guided .cj-product { width:min(88%,var(--callout-visual-room,28svh),340px); }
 .home-guided .cj-monitor { width:min(90%,330px,var(--callout-mouse-width,28svh)); }
 .home-guided .cj-mouse-device { width:min(65%,225px,calc(var(--callout-mouse-width,28svh) * .65)); }
}
@media(max-width:899px) and (max-height:740px) {
 .cj-showcase { inset:74px 22px 45px; grid-template-rows:190px minmax(0,1fr); gap:8px; }
 .mouse-active .cj-showcase { grid-template-rows:140px minmax(0,1fr); }
 .cj-sticky[data-phase=outro] .cj-showcase { grid-template-rows:230px minmax(0,1fr); }
 .cj-sticky[data-phase=outro] .cj-product { width:min(78%,26svh); }
 .cj-showcase-copy { align-self:start; }
 #cj-showcase-title { font-size:28px; }
 .cj-showcase-description { font-size:12px; margin-bottom:8px; }
 .cj-product { width:min(88%,38svh,340px); }
 .cj-showcase .cj-cta { align-self:start; gap:10px; }
 .cj-showcase .cj-cta-title { font-size:32px; }
 .cj-showcase .cj-spec { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .cj-callout-path { animation:none; } .cj-callout-highlight { transition:none; } }
.cj-no-motion .cj-callout-path { animation:none; }
.cj-no-motion .cj-callout-highlight { transition:none; }