/* Scroll story: el Capzi hace zoom, se quita la gorra y se revela el Workspace (ver workspace-reveal.jsx) */
.wsr{position:relative;background:#fff}
.wsr-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#fff 0%,#fff 55%,#F5F5F7 100%)}
.wsr-cam{position:absolute;left:0;top:0;width:1024px;height:1536px;transform-origin:0 0;will-change:transform}
.wsr-fig{position:absolute;left:0;top:0;width:1024px;height:1536px;display:block;user-select:none;-webkit-user-drag:none;z-index:2;will-change:opacity}
.wsr-sphere{position:absolute;border-radius:50%;z-index:1;
  background:
    radial-gradient(ellipse 34% 22% at 36% 26%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 60% 18% at 55% 94%,rgba(210,222,255,.55) 0%,rgba(210,222,255,0) 100%),
    linear-gradient(172deg,#f7f8fb 0%,#d9dce3 30%,#aeb3bd 52%,#8b919d 62%,#c6cad3 82%,#e9ebf0 100%);
  box-shadow:inset -16px -22px 40px rgba(40,46,60,.38),inset 10px 12px 30px rgba(255,255,255,.55)}
.wsr-cap{position:absolute;z-index:3;display:block;transform-origin:50% 80%;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 26px 34px rgba(20,24,40,.28));will-change:transform,opacity}
.wsr-clip{position:absolute;inset:0;z-index:4;pointer-events:none}
.wsr-win{position:absolute;left:0;top:0;width:1200px;height:720px;transform-origin:0 0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(29,29,31,.08),0 40px 100px rgba(20,24,40,.22),0 8px 24px rgba(20,24,40,.08);will-change:transform;pointer-events:auto}
.wsr-copy{position:absolute;z-index:5;left:max(5vw,24px);top:calc(50% + 28px);width:min(34vw,460px);transform:translateY(-50%);opacity:0;pointer-events:none;will-change:transform,opacity}
.wsr-copy .cz-h2{margin:10px 0 16px}
.wsr-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.wsr-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4;color:var(--cz-ink-2)}
.wsr-list i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:8px;background:var(--cz-blue)}
.wsr-list b{color:var(--cz-ink);font-weight:600}
.wsr-hint{position:absolute;z-index:5;left:max(5vw,24px);bottom:12vh;max-width:min(26vw,320px);text-align:left;font-size:14px;color:var(--cz-ink-2);will-change:opacity;pointer-events:none}
.wsr-hint b{display:block;font-size:clamp(20px,2.2vw,30px);font-weight:600;letter-spacing:-.03em;color:var(--cz-ink);margin-bottom:6px}
.wsr-hint svg{display:block;margin:10px 0 0;animation:wsr-bob 1.6s ease-in-out infinite}
@keyframes wsr-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.wsr-say{position:absolute;z-index:5;left:50%;top:7vh;transform:translateX(-50%);font-size:clamp(22px,2.8vw,40px);font-weight:600;letter-spacing:-.035em;color:var(--cz-ink);text-align:center;opacity:0;pointer-events:none;will-change:opacity,transform}

/* — Mock del Workspace (interfaz clara, igual que workspace.html) — */
.wsm{position:relative;display:grid;grid-template-columns:264px 1fr;width:1200px;height:720px;background:#fff;color:var(--cz-ink);font-family:inherit;text-align:left}
.wsm-side{display:flex;flex-direction:column;gap:14px;padding:20px 14px 14px;background:var(--cz-bg-soft);border-right:1px solid var(--cz-line);min-height:0}
.wsm-brand{font-weight:800;letter-spacing:.14em;font-size:15px;padding:2px 8px 6px}
.wsm-new{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--cz-line);font-size:14px;font-weight:600;box-shadow:var(--cz-shadow-sm)}
.wsm-nav{display:flex;flex-direction:column;gap:2px}
.wsm-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font-size:14px}
.wsm-item.on{background:#fff;box-shadow:var(--cz-shadow-sm),inset 3px 0 0 #6E6E73}
.wsm-item img{width:32px;height:32px;border-radius:10px;object-fit:cover;object-position:top;flex:none}
.wsm-item i{width:32px;text-align:center;font-style:normal;color:var(--cz-ink-2);flex:none}
.wsm-item span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.wsm-item b{font-weight:600}
.wsm-item small{font-size:12px;font-weight:600}
.wsm-label{margin:8px 10px 2px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cz-ink-3)}
.wsm-prof{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:#fff;border:1px solid var(--cz-line)}
.wsm-av{width:34px;height:34px;border-radius:50%;background:var(--cz-chrome-gradient);box-shadow:0 0 0 2px var(--cz-blue);flex:none}
.wsm-prof span{display:flex;flex-direction:column;line-height:1.25;font-size:13px}.wsm-prof small{color:var(--cz-ink-3);font-size:12px}
.wsm-main{display:flex;flex-direction:column;min-width:0;padding:26px 30px;gap:20px;background:#fff}
.wsm-head h4{margin:0;font-size:24px;font-weight:700;letter-spacing:-.025em}.wsm-head small{font-size:13px;color:var(--cz-blue);font-weight:600}
.wsm-usage{padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--cz-line);box-shadow:var(--cz-shadow-md)}
.wsm-usage .r{display:flex;justify-content:space-between;align-items:center}
.wsm-usage h5{margin:0;font-size:16px;font-weight:600}.wsm-usage .r span{font-size:13px;color:var(--cz-ink-3)}
.wsm-usage p{margin:14px 0 10px;font-size:26px;font-weight:700;letter-spacing:-.02em}.wsm-usage p small{font-size:13px;font-weight:400;color:var(--cz-ink-3)}
.wsm-bar{height:10px;border-radius:999px;background:rgba(128,128,128,.18);overflow:hidden}.wsm-bar i{display:block;height:100%;width:62%;background:var(--cz-blue);border-radius:inherit}
.wsm-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;flex:1;min-height:0}
.wsm-card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--cz-line);box-shadow:var(--cz-shadow-sm);min-height:0}
.wsm-card .im{flex:1;min-height:0;overflow:hidden;background:color-mix(in srgb,var(--c) 14%,#fff)}.wsm-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.wsm-card .tx{padding:10px 12px 12px;display:flex;flex-direction:column;line-height:1.25}.wsm-card b{font-size:15px;font-weight:700}.wsm-card small{font-size:12px;font-weight:600;color:var(--c)}
.wsm-card em{position:absolute;top:10px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}

@media (max-width:820px){
  .wsr-hint{left:0;right:0;max-width:none;text-align:center;bottom:3vh}.wsr-hint b{font-size:18px;margin-bottom:2px}.wsr-hint svg{margin:10px auto 0}
  .wsr-copy{left:6vw;right:6vw;width:auto;top:9vh;transform:none}
  .wsr-copy .cz-h2{font-size:clamp(26px,7.4vw,34px)}
  .wsr-list{display:none}
}
@media (prefers-reduced-motion:reduce){.wsr-hint svg{animation:none}}

/* ---- Variante portátil (prueba): el scroll hace zoom a la pantalla del portátil ---- */
.wsr-cam.wsr-lap{width:1200px;height:780px}
.wsr-lid{position:absolute;left:90px;top:30px;width:1020px;height:640px;box-sizing:border-box;padding:20px 10px;border-radius:34px 34px 14px 14px;background:linear-gradient(180deg,#E9EAED 0%,#C9CCD1 45%,#8E9196 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 30px 60px rgba(20,24,40,.2)}
.wsr-scr{position:relative;width:1000px;height:600px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 6px #1D1D1F}
.wsr-scr>.wsr-mock{position:absolute;left:0;top:0;width:1200px;height:720px;transform:scale(.83333);transform-origin:0 0}
.wsr-base{position:absolute;left:20px;top:668px;width:1160px;height:28px;border-radius:0 0 40px 40px;background:linear-gradient(180deg,#F4F5F7 0%,#C9CCD1 60%,#8E9196 100%);box-shadow:0 24px 40px rgba(20,24,40,.22)}
.wsr-base::before{content:"";position:absolute;left:50%;top:0;width:180px;height:10px;margin-left:-90px;border-radius:0 0 14px 14px;background:rgba(29,29,31,.14)}
.wsr--fuse{background:none}.wsr--fuse .wsr-stage{background:none;pointer-events:none}
.wsr-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,#fff 0%,#fff 55%,#F5F5F7 100%)}

.wsr-f{position:absolute;left:0;top:0;z-index:3;object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:50% 50%;will-change:transform,opacity;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(20,24,40,.18))}

.wsr-intro{position:absolute;z-index:6;left:0;right:0;top:92px;width:100%;box-sizing:border-box;padding:0 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;will-change:transform,opacity}
.wsr-intro .cz-display{font-size:clamp(30px,4.4vw,64px);margin:0;max-width:1080px;text-wrap:balance}
.wsr-intro-tag{margin:6px 0 0;font-size:clamp(16px,1.6vw,22px);font-weight:600;letter-spacing:-.02em;color:var(--cz-ink)}
.wsr-intro-desc{margin:0;max-width:620px}
.wsr-intro-btns{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.wsr-intro.is-live .wsr-intro-btns{pointer-events:auto}
@media (max-width:640px){.wsr-intro{top:88px;gap:8px}.wsr-intro-desc{display:none}}

.wsr-copy .cz-h2{font-size:36px}.wsr-copy .cz-lead{font-size:17px}.wsr-list{gap:10px;margin-top:20px}.wsr-list li{font-size:15px}
@media (max-width:820px){.wsr-copy .cz-h2{font-size:clamp(26px,7.4vw,34px)}.wsr-copy .cz-lead{font-size:16px}}
.wsr-logo{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 40%,#fff 0%,#F5F5F7 100%);will-change:opacity}
.wsr-logo span{font-weight:800;font-size:128px;letter-spacing:-.03em;background:linear-gradient(180deg,#8E9196 0%,#3A3B3E 55%,#1D1D1F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}