/* La carcasa permanece fija; solo sube al entrar y cambia su contenido. */
.cj-showcase-copy,.cj-cta { grid-column:1; grid-row:1; }
.cj-showcase-visual { grid-column:2; grid-row:1; transform:translateY(calc(var(--rise,1) * 85svh)); }
.cj-sticky { overflow:clip; transition:background-color .5s; }
.cj-sticky[data-phase=intro] .cj-presentation-note { opacity:0; }
.cj-showcase-copy { transition:opacity .35s; }
.cj-showcase-copy.copy-hidden { opacity:0; pointer-events:none; }
.cj-showcase .cj-cta { position:relative; inset:auto; padding-left:clamp(0px,2vw,28px); max-width:480px; z-index:4; }
.cj-showcase .cj-cta-title { font-size:clamp(44px,5vw,76px); }
.cj-product { background:linear-gradient(140deg,color-mix(in srgb,var(--case-color,#4a4d50),white 14%),var(--case-color,#4a4d50) 8%,color-mix(in srgb,var(--case-color,#4a4d50),black 22%) 98%); }
.cj-product::after { border-color:color-mix(in srgb,var(--case-color,#4a4d50),black 38%); }
#cj-screen-previous { position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); z-index:1; opacity:0; pointer-events:none; }
.presentation-active .cj-hud { display:flex; align-items:center; gap:18px; right:var(--m); justify-content:start; }
.cj-counter { color:#ffffff70; font:11px var(--font-mono); }
#cj-next-section { order:3; margin-left:auto; min-height:36px; padding:0; border:0; color:#ffffff9c; background:none; font:11px var(--font-mono); cursor:pointer; }
#cj-next-section:hover { color:#fff; }
.cj-sticky[data-phase=intro] .cj-hud { justify-content:center; }
.cj-sticky[data-phase=intro] .cj-scroll-hint { display:grid; }
.cj-sticky[data-phase=outro] .cj-nav { opacity:.4; }
.cj-plugins,.cj-create { max-width:1360px; margin:auto; width:calc(100% - 2 * var(--m)); padding:110px 0; border-bottom:1px solid #ffffff1a; scroll-margin-top:76px; }
.cj-section-heading { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:44px; }
.cj-section-heading h2 { font:600 clamp(38px,4.5vw,70px)/1.03 var(--font-display); letter-spacing:-.045em; margin-top:20px; }
.cj-section-heading>p { max-width:44ch; color:#ffffffa8; font-size:17px; line-height:1.7; }
.cj-plugins-heading { max-width:none; margin:0 0 44px; text-align:center; color:#fff; font:600 clamp(34px,4vw,62px)/1.05 var(--font-display); letter-spacing:-.045em; }
.cj-plugin-filters { display:flex; gap:16px; align-items:end; margin-bottom:22px; }
.cj-plugin-filters label { display:grid; gap:9px; color:#b6c0ce; font:500 12px var(--font-sans); }
.cj-plugin-filters label:first-child { flex:1; }
.cj-plugin-filters input,.cj-plugin-filters select { width:100%; min-height:46px; padding:10px 14px; border:1px solid #ffffff2a; border-radius:10px; background:#12151a; color:#fff; font:14px var(--font-sans); }
#cj-plugin-count { margin-bottom:20px; color:#a5b0bf; font:400 12px/1.6 var(--font-sans); }
.cj-plugin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px; align-items:start; }
.cj-plugin { border-top:1px solid #ffffff23; }
.cj-plugin summary { display:flex; align-items:center; gap:12px; padding:22px 0; cursor:pointer; list-style:none; }
.cj-plugin summary::-webkit-details-marker { display:none; }
.cj-plugin summary::after { content:'+'; color:#ffffff85; font:20px var(--font-mono); }
.cj-plugin[open] summary::after { content:'−'; }
.cj-plugin-icon { flex:none; display:grid; place-items:center; width:26px; height:26px; }
.cj-plugin-icon svg { width:100%; height:100%; }
.cj-plugin summary>span:nth-child(2) { font-size:15px; font-weight:600; }
.cj-plugin small { margin-left:auto; color:#aeb9c8; font:500 11px var(--font-sans); white-space:nowrap; }
.cj-plugin small.testing { color:#dfc18a; }
.cj-plugin>p { margin:0 0 18px; color:#ffffffa8; font-size:13px; line-height:1.65; }
.cj-plugin button { min-height:38px; padding:0 0 16px; background:none; border:0; color:#c1d6ef; font-size:12px; cursor:pointer; text-align:left; }
.cj-section-note { margin-top:26px; color:#ffffff70; font-size:12px; line-height:1.7; max-width:90ch; }
.cj-create-paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; }
.cj-create-paths article { border-top:1px solid #ffffff2a; padding-top:22px; min-width:0; }
.cj-path-number { font:11px var(--font-mono); color:#a5b8d0; }
.cj-create h3 { margin:20px 0 18px; font:600 27px/1.15 var(--font-display); letter-spacing:-.025em; }
.cj-create article>p { color:#ffffffa8; font-size:15px; line-height:1.7; }
.cj-create details { margin-top:22px; font-size:12px; line-height:1.8; color:#a8b9cf; }
.cj-create summary { cursor:pointer; padding:10px 0; color:#d4deec; }
.cj-create ul,.cj-create ol { padding-left:18px; }
.cj-create li { margin-bottom:12px; }
.cj-create code { font:11px/1.8 var(--font-mono); overflow-wrap:anywhere; color:#d3e1f5; }
.cj-create pre { overflow:auto; padding:14px; background:#ffffff05; border:1px solid #ffffff15; border-radius:10px; }
@media(max-width:1000px) { .cj-plugin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cj-create-paths { gap:24px; } }
@media(max-width:760px) {
 .cj-showcase { grid-template-rows:300px minmax(0,1fr); align-content:center; align-items:center; }
 .cj-showcase-visual { grid-column:1; grid-row:2; align-self:start; }
 .cj-monitor { width:min(76%,250px); }
 .cj-mouse-device { width:min(60%,23svh); }
 .cj-showcase .cj-cta { padding:0; gap:14px; }
 .cj-showcase .cj-cta-title { font-size:44px; }
 .cj-showcase .cj-spec { font-size:13px; }
 .cj-showcase .cj-actions { display:flex; gap:7px; }
 .cj-showcase .cj-btn { min-height:36px; font-size:12px; padding:0 13px; }
 #cj-screen-previous { inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); }
 .presentation-active .cj-hud { gap:10px; right:16px; }
 #cj-next-section { font-size:9px; }
 .cj-counter { font-size:9px; }
 .cj-plugins,.cj-create { padding:74px 0; scroll-margin-top:64px; }
 .cj-section-heading { grid-template-columns:1fr; gap:22px; margin-bottom:32px; }
 .cj-section-heading>p { font-size:15px; }
 .cj-plugins-heading { margin-bottom:32px; }
 .cj-plugin-filters { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
 .cj-plugin-filters label:first-child { grid-column:1/-1; }
 .cj-plugin-grid,.cj-create-paths { grid-template-columns:1fr; }
 .cj-create-paths { gap:36px; }
 .cj-top .cluster { gap:6px; }
 .cj-top .cj-btn { padding:0 8px; font-size:11px; }
}
@media(max-height:740px) and (max-width:760px) {
 .cj-showcase { grid-template-rows:280px minmax(0,1fr); }
 .cj-showcase-copy { align-self:start; }
 .cj-showcase-description { max-width:none; }
 .cj-showcase .cj-cta { align-self:start; }
 .cj-showcase .cj-cta-title { font-size:36px; }
 .mouse-active .cj-showcase { grid-template-rows:240px minmax(0,1fr); }
 .cj-monitor { width:min(66%,180px); }
 .cj-mouse-device { width:min(44%,16svh); }
}
@media(prefers-reduced-motion:reduce) {
 .cj-showcase-copy,.cj-cta,.cj-top { transition:none; }
}