/* El cierre es un estudio de producto, con el objeto como único protagonista. */
.cj-outro-snapshot { position:absolute; z-index:7; pointer-events:none; transform-origin:center; }
.cj-outro-pending .cj-showcase-visual { opacity:0; pointer-events:none; }
.cj-sticky[data-phase=outro] .cj-showcase { inset:84px var(--m) 20px; width:calc(100% - 2 * var(--m)); max-width:1200px; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr; gap:0; }
.cj-sticky[data-phase=outro] .cj-showcase-copy,.cj-sticky[data-phase=outro] .cj-hud { display:none; }
.cj-sticky[data-phase=outro] .cj-showcase-visual { grid-column:1; grid-row:1; width:100%; gap:0; justify-self:center; align-self:center; }
.cj-viewer { position:relative; width:100%; min-width:0; }
.cj-viewer-stage { position:relative; width:100%; height:min(calc(100svh - 252px),760px); min-height:280px; isolation:isolate; }
.cj-viewer-stage::before { content:''; position:absolute; inset:0 0 -8%; z-index:-1; background:radial-gradient(ellipse at 50% 58%,#bed2eb12,transparent 60%); }
.cj-viewer-stage::after { content:''; position:absolute; bottom:3%; left:20%; right:20%; height:15%; z-index:-1; border-radius:50%; background:radial-gradient(ellipse,#d5e2f407,transparent 70%); }
.cj-viewer-stage::before,.cj-viewer-stage::after { pointer-events:none; }
.cj-viewer-stage canvas { display:block; width:100%; height:100%; outline-offset:-4px; cursor:grab; touch-action:pan-y pinch-zoom; }
.cj-viewer-stage canvas.dragging { cursor:grabbing; }
.cj-viewer-stage canvas:focus-visible { outline:1px solid #c6daef; border-radius:20px; }
.cj-viewer-dock { position:static; display:grid; justify-items:center; gap:16px; margin:0 auto; }
.cj-viewer-dock .cj-colors { justify-content:center; gap:12px; padding:5px; }
.cj-viewer-dock .cj-colors button { width:24px; height:24px; }
.cj-viewer-dock .cj-colors button[aria-pressed=true] { box-shadow:0 0 0 3px #08090b,0 0 0 4px #cbd8e8; }
.cj-viewer-controls { display:flex; align-items:center; justify-content:center; padding:4px; border:1px solid #ffffff20; border-radius:999px; background:#15181bd9; box-shadow:0 6px 25px #0003; }
.cj-viewer-controls>div { display:flex; align-items:center; }
.cj-viewer-controls>div+div { padding-left:6px; margin-left:6px; border-left:1px solid #ffffff1a; }
.cj-viewer-controls button { display:grid; place-items:center; min-width:40px; height:38px; padding:0 15px; border:0; border-radius:999px; background:transparent; color:#b9c0c9; font:500 11px var(--font-sans); cursor:pointer; transition:color .2s,background .2s; }
.cj-viewer-controls button[data-view=closer],.cj-viewer-controls button[data-view=farther] { font-size:20px; padding:0 10px; }
.cj-viewer-controls button:hover,.cj-viewer-controls button[aria-pressed=true] { color:#fff; background:#ffffff10; }
.cj-viewer-controls button:disabled { opacity:.3; cursor:default; }
.cj-viewer-controls svg { width:15px; height:15px; }
.cj-viewer-hint { min-height:16px; margin:14px 0 0; text-align:center; color:#ffffff70; font:10px/1.5 var(--font-mono); }
.cj-viewer-hint:empty { display:none; }
.cj-customizer { position:static; }.cj-customizer summary { display:none; }
.cj-customizer-body { position:absolute; z-index:5; left:0; top:45%; transform:translateY(-50%); width:260px; padding:20px; border:1px solid #d6e4f223; border-radius:22px; background:linear-gradient(145deg,#1b222af5,#10151bee); box-shadow:inset 0 1px #ffffff07,0 20px 60px #0005; }
.cj-customizer-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px; }
.cj-customizer-heading h3 { color:#eef3fa; font:600 21px/1.15 var(--font-display); letter-spacing:-.025em; }
.cj-customizer-close { display:none; }
.cj-material-process { padding:4px 7px; border:1px solid #ffffff1a; border-radius:6px; color:#b8c5d6; font:500 10px/1.2 var(--font-mono); }
.cj-material-label { display:block; margin:0 0 9px; color:#c0cad8; font:500 12px/1.4 var(--font-sans); }
#cj-material { appearance:none; width:100%; min-height:48px; padding:12px 38px 12px 14px; border:1px solid #ffffff26; border-radius:12px; color:#f2f6fb; background:#222a33 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2395a3b4' stroke-width='1.5'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 14px center; font:500 14px var(--font-sans); color-scheme:dark; box-shadow:inset 0 1px #ffffff05; cursor:pointer; transition:border-color .18s,background-color .18s; }
#cj-material:hover { border-color:#ffffff40; background-color:#222831; }
#cj-material:focus-visible { outline:2px solid #a9cce4; outline-offset:3px; }
#cj-material option { color:#e9edf4; background:#171c23; }
@supports(appearance:base-select) {
 #cj-material,#cj-material::picker(select) { appearance:base-select; }
 #cj-material { background-image:none; padding:12px 14px; }
 #cj-material::picker-icon { color:#98a8ba; transition:rotate .18s; }
 #cj-material:open { border-color:#a9cce480; background-color:#222831; }
 #cj-material:open::picker-icon { rotate:180deg; }
 #cj-material::picker(select) { min-width:min(280px,calc(100vw - 40px)); max-width:calc(100vw - 40px); max-height:min(410px,60svh); overflow:auto; margin-block:8px; padding:6px; border:1px solid #ffffff26; border-radius:14px; background:#15191f; color:#dde5ef; box-shadow:0 16px 48px #0009,0 2px 8px #0006; scrollbar-width:thin; scrollbar-color:#424e5e transparent; }
 #cj-material optgroup { padding:5px 0; color:#8290a3; font:10px var(--font-mono); }
 #cj-material option { display:flex; align-items:center; gap:14px; min-height:42px; padding:10px 12px; border-radius:8px; background:transparent; font:500 12px var(--font-sans); cursor:pointer; }
 #cj-material option:hover,#cj-material option:focus { outline:none; background:#ffffff0c; }
 #cj-material option:checked { color:#f2f7fc; background:#a9cce416; }
 #cj-material option::checkmark { order:1; margin-left:auto; color:#bcd9ec; }
}
.cj-material-detail { min-height:36px; margin:12px 0 24px; color:#a9b6c8; font:400 12px/1.5 var(--font-sans); }
.cj-color-heading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.cj-color-heading>span { color:#a9b6c8; font:400 11px/1.4 var(--font-sans); }
.cj-customizer .cj-colors { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; justify-items:center; padding:3px 0 20px; }
.cj-customizer .cj-colors button { display:grid; place-items:center; width:40px; height:40px; padding:4px; border:0; border-radius:50%; background:transparent; box-shadow:none; }
.cj-customizer .cj-colors button::before { content:''; width:28px; height:28px; border:1px solid #ffffff25; border-radius:50%; background:var(--c); box-shadow:inset 0 -2px 5px #0003,inset 0 1px 2px #ffffff40; transition:transform .18s; }
.cj-customizer .cj-colors button:hover::before { transform:scale(1.1); }
.cj-customizer .cj-colors button[aria-pressed=true] { box-shadow:none; }
.cj-customizer .cj-colors button[aria-pressed=true]::before { outline:2px solid #e6f2ff; outline-offset:4px; }
.cj-material-caveat { margin:0; padding-top:14px; border-top:1px solid #ffffff12; color:#9cabbf; font:400 11px/1.5 var(--font-sans); }
.cj-sticky[data-phase=outro]:not(.viewer-ready) .cj-product-bezel { background:var(--front-color,#0b0c0f); }
.cj-viewer:not([data-state=ready]) .cj-viewer-stage,.cj-viewer:not([data-state=ready]) .cj-viewer-controls { display:none; }
.cj-viewer[data-state=loading] .cj-viewer-dock { display:none; }
.cj-sticky[data-phase=outro]:not(.viewer-ready) #cj-showcase-product { order:-1; width:min(86vw,calc(100svh - 330px),440px); }
.cj-sticky[data-phase=outro].viewer-ready #cj-showcase-product,
.cj-sticky[data-phase=outro].viewer-ready #cj-tour-source,
.cj-sticky[data-phase=outro].viewer-ready #cj-tour-feedback:empty { display:none; }
@media(max-width:1099px) {
 .cj-customizer summary { display:flex; align-items:center; justify-content:space-between; gap:26px; min-height:44px; padding:0 20px; border:1px solid #d6e4f22e; border-radius:999px; color:#e0e7f0; background:linear-gradient(135deg,#202832,#151b22); font:500 12px var(--font-sans); cursor:pointer; list-style:none; box-shadow:inset 0 1px #ffffff07; }
 .cj-customizer summary::-webkit-details-marker { display:none; }.cj-customizer[open] summary>span { rotate:180deg; }
 .cj-customizer-body { left:50%; top:0; bottom:auto; transform:translateX(-50%); width:min(360px,100%); max-height:min(calc(100svh - 160px),460px); padding:18px; overflow:auto; background:linear-gradient(145deg,#1b222afa,#10151bfa); }
 .cj-customizer-heading { gap:8px; margin-bottom:18px; }
 .cj-customizer-heading h3 { flex:1; min-width:0; font-size:20px; }
 .cj-customizer-close { display:grid; place-items:center; flex:none; width:44px; height:44px; margin-right:-10px; border:0; border-radius:10px; color:#dce6f2; background:transparent; cursor:pointer; }
 .cj-customizer-close:hover { background:#ffffff0d; }
 .cj-customizer-close svg { width:18px; height:18px; }
 .cj-customizer .cj-colors { grid-template-columns:repeat(5,1fr); gap:6px; }
 .cj-customizer .cj-colors button { width:44px; height:44px; }
 .cj-material-detail { min-height:0; margin-bottom:16px; }
}
@media(max-width:899px) {
 .cj-sticky[data-phase=outro] .cj-showcase { inset:78px 20px 20px; width:calc(100% - 40px); grid-template-rows:1fr; }
 .cj-viewer-stage { height:calc(100svh - 252px); min-height:260px; }
 .cj-viewer-dock { gap:14px; }
 .cj-viewer-dock .cj-colors { gap:11px; }
 .cj-viewer-controls button { height:38px; min-width:38px; padding:0 12px; }
 .cj-viewer-hint { font-size:9px; margin-top:12px; }
}
@media(max-width:899px) and (max-height:740px) {
 .cj-sticky[data-phase=outro] .cj-showcase { inset:74px 20px 20px; }
 .cj-viewer-stage { height:calc(100svh - 252px); min-height:235px; }
 .cj-viewer-dock { gap:10px; }
 .cj-viewer-hint { margin-top:9px; }
}