/* CeBe Studio — capa cinematográfica (hero "web en capas" + vitrina de demos).
   Las variables --* las actualiza assets/js/cine.js según el scroll.
   Sin JavaScript o con movimiento reducido, todo se ve estático y completo. */

/* ---------- Hero fijado: la web se arma y se despiece en capas ---------- */
.cine-hero{display:block;min-height:0;height:340vh;padding:0;overflow:visible;
  --copy:1;--dx:0;--ds:1;--rx:0;--rz:0;--e:0;--fin:0;--word:0}
.cine-hero::after{display:none}
.cine-sticky{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;display:grid;align-items:center}
.cine-sticky::after{content:"";position:absolute;inset:auto 0 0 0;height:140px;background:linear-gradient(to bottom,transparent,var(--bg));z-index:3;pointer-events:none}
.cine-sticky #hero-canvas{z-index:0}

.cine-word{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;z-index:1;pointer-events:none;
  font:800 clamp(6rem,22vw,22rem)/.82 var(--f-title);letter-spacing:-.04em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(56,189,248,.16);
  transform:translate3d(calc(var(--word) * -24vw),0,0)}
.cine-word span:last-child{align-self:flex-end;transform:translate3d(calc(var(--word) * 48vw),0,0);-webkit-text-stroke-color:rgba(37,99,235,.22)}

.cine-copy{position:relative;z-index:4;padding-top:var(--header-h);
  opacity:var(--copy);transform:translate3d(0,calc((1 - var(--copy)) * -60px),0)}
.cine-copy>*{max-width:min(600px,52vw)}
.cine-copy h1{font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.02;margin-bottom:1.3rem;text-wrap:balance}
.cine-copy .lead{margin-bottom:2rem}
.cine-copy .hero-stats{margin-top:2.4rem}

.cine-device{position:absolute;z-index:2;opacity:var(--dop,1);left:50%;top:54%;width:min(860px,64vw);aspect-ratio:16/10;perspective:2400px;
  transform:translate3d(calc(-50% + var(--dx) * 1vw),-50%,0) scale(var(--ds))}
.cine-screen{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx) * 1deg)) rotateZ(calc(var(--rz) * 1deg))}
.cine-layer{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translate3d(0,0,calc((2 - var(--i)) * var(--e) * 105px))}
.cine-slice{position:absolute;left:0;right:0;top:calc(var(--tp) * 100%);height:calc(var(--h) * 100%);overflow:hidden;border-radius:8px;background:#0b1224;
  border:1px solid rgba(56,189,248,calc(.12 + var(--e) * .55));
  box-shadow:0 calc(var(--e) * 30px) calc(var(--e) * 60px) -20px rgba(37,99,235,.65)}
.cine-slice img{position:absolute;left:0;width:100%;height:calc(100% / var(--h));top:calc(var(--tp) / var(--h) * -100%);max-width:none}
.cine-layer:first-child .cine-slice{border-radius:12px 12px 6px 6px}
.cine-layer:last-child .cine-slice{border-radius:6px 6px 12px 12px}
.cine-lbl{position:absolute;right:-1rem;top:calc((var(--tp) + var(--h) / 2) * 100%);translate:100% -50%;
  display:flex;align-items:center;gap:.55rem;white-space:nowrap;padding:.5rem .85rem;border-radius:999px;
  background:var(--glass-2);border:1px solid var(--line-strong);backdrop-filter:blur(8px);
  font:700 .78rem/1 var(--f-body);color:#fff;box-shadow:var(--glow);
  opacity:var(--e);transform:translate3d(calc((1 - var(--e)) * -30px),0,0) rotateZ(calc(var(--rz) * -1deg)) rotateX(calc(var(--rx) * -1deg))}
.cine-lbl i{font:400 .7rem/1 var(--f-mono);color:var(--cyan);font-style:normal}
.cine-shadow{position:absolute;left:8%;right:8%;bottom:-14%;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(37,99,235,.45),transparent);filter:blur(18px);opacity:calc(.5 + var(--e) * .5)}

/* El círculo azul con el logo (el de siempre): a la derecha al inicio, se aleja al hacer scroll */
.cine-orb{position:absolute;z-index:3;right:max(1.5rem,calc((100vw - var(--wrap)) / 2));top:calc(50% + var(--header-h) / 2);
  translate:0 -50%;width:min(440px,34vw);opacity:var(--orb,1);
  transform:translate3d(calc((1 - var(--orb,1)) * 18vw),0,0) scale(calc(.6 + var(--orb,1) * .4)) rotate(calc((1 - var(--orb,1)) * 40deg))}
.cine-orb .orb{width:100%}
.cine-orb[data-hidden]{visibility:hidden}

.cine-final{position:absolute;z-index:4;left:0;right:0;bottom:10svh;text-align:center;padding:0 1rem;
  font:700 clamp(1.6rem,3.6vw,3rem)/1.1 var(--f-title);text-wrap:balance;
  opacity:var(--fin);transform:translate3d(0,calc((1 - var(--fin)) * 40px),0)}
.cine-hero .scroll-cue{z-index:4;opacity:calc(var(--copy) * .8)}

/* ---------- Vitrina: cada demo gira como un producto, el fondo cambia de color ---------- */
.vitrina{position:relative;height:calc((var(--n) + 1) * 100vh);--k:0}
.vit-sticky{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.vit-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 50% 60%,var(--bgc,#2563EB) 0%,color-mix(in srgb,var(--bgc,#2563EB) 35%,#05080f) 45%,#05080f 100%);transition:background .6s ease}
.vit-sticky::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--bg),transparent 18%,transparent 82%,var(--bg))}
.vit-head{position:absolute;left:0;right:0;top:calc(var(--header-h) + 1.2rem);z-index:3}
.vit-head h2{font-size:clamp(1.5rem,2.8vw,2.4rem);max-width:640px}
.vit-items{position:absolute;inset:0}
.vit-item{position:absolute;inset:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:3rem;padding:calc(var(--header-h) + 5rem) max(1.5rem,calc((100vw - var(--wrap)) / 2)) 3rem;
  --t:0;opacity:var(--op,0);pointer-events:none}
.vit-item.on{pointer-events:auto}
.vit-name{position:absolute;left:50%;top:56%;translate:-50% -50%;z-index:0;white-space:nowrap;pointer-events:none;
  font:800 clamp(4rem,13vw,13rem)/1 var(--f-title);letter-spacing:-.04em;color:rgba(255,255,255,.07);
  transform:translate3d(calc(var(--t) * -40vw),0,0)}
.vit-phone{grid-column:2;position:relative;z-index:1;width:min(300px,26vw);aspect-ratio:585/1266;perspective:1200px}
.vit-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:34px;border:6px solid #0b1224;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 90px -30px rgba(0,0,0,.85),0 0 80px -10px var(--c);
  transform:translate3d(0,calc(var(--t) * 30vh),0) rotateY(calc(var(--t) * -80deg)) rotateZ(calc(var(--t) * 12deg));animation:vit-float 5s ease-in-out infinite}
@keyframes vit-float{50%{translate:0 -10px}}
.vit-info{grid-column:3;position:relative;z-index:2;max-width:380px;transform:translate3d(calc(var(--t) * 120px),0,0)}
.vit-code{display:block;font:400 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:1rem}
.vit-info .cat{display:block;font:400 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c);filter:brightness(1.5);margin-bottom:.6rem}
.vit-info h3{font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.05;margin-bottom:.8rem}
.vit-info p{color:rgba(255,255,255,.8);margin-bottom:1.4rem}
.vit-acts{display:flex;flex-wrap:wrap;gap:.6rem}
.vit-dots{position:absolute;right:max(1rem,calc((100vw - var(--wrap)) / 2 - 2rem));top:50%;translate:0 -50%;display:grid;gap:.7rem;z-index:3}
.vit-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);transition:transform .3s,background .3s}
.vit-dots span.on{background:var(--c);transform:scale(1.6);box-shadow:0 0 12px var(--c)}
.vit-all{position:absolute;left:50%;bottom:2rem;translate:-50% 0;z-index:3}

/* ---------- Tablet y celular ---------- */
@media (max-width:900px){
  .cine-hero{height:280vh}
  .cine-copy{align-self:start;padding-top:calc(var(--header-h) + 1.5rem)}
  .cine-copy>*{max-width:100%}
  .cine-copy .hero-stats{display:none}
  .cine-device{top:72%;width:86vw}
  .cine-orb{right:50%;translate:50% 0;top:auto;bottom:2svh;width:min(210px,52vw);z-index:1}
  .cine-orb .chip{display:none}
  .cine-lbl{right:auto;left:50%;translate:-50% -50%;font-size:.7rem;padding:.4rem .7rem}
  .vit-item{grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;align-content:center;gap:1.4rem;padding:calc(var(--header-h) + 6rem) 1.25rem 4.5rem;text-align:center}
  .vit-phone{grid-column:1;width:min(210px,46vw)}
  .vit-info{grid-column:1;transform:none}
  .vit-info p{display:none}
  .vit-acts{justify-content:center}
  .vit-dots{right:.8rem}
}

/* ---------- Sin animación: versión estática completa ---------- */
.cine-static .cine-hero{height:auto}
.cine-static .cine-sticky{position:relative;height:auto;min-height:100svh;padding-bottom:4rem}
.cine-static .cine-device,.cine-static .cine-final,.cine-static .cine-word{display:none}
.cine-static .cine-orb{position:relative;right:auto;top:auto;translate:none;transform:none;margin:2rem auto 0}
.cine-static .cine-copy>*{max-width:760px}
.cine-static .vitrina{height:auto}
.cine-static .vit-sticky{position:relative;height:auto;padding:calc(var(--header-h) + 1rem) 0 3rem}
.cine-static .vit-head{position:relative;top:0;margin-bottom:2rem}
.cine-static .vit-items{position:relative;display:grid;gap:3rem}
.cine-static .vit-item{position:relative;opacity:1;pointer-events:auto;padding-top:1rem;padding-bottom:1rem}
.cine-static .vit-phone img{transform:none;animation:none}
.cine-static .vit-name,.cine-static .vit-dots{display:none}
.cine-static .vit-all{position:relative;left:auto;bottom:auto;translate:none;display:flex;width:max-content;margin:2rem auto 0}

/* ---------- Celular: versión limpia ---------- */
@media (max-width:900px){
  .cine-static .cine-sticky{min-height:0;padding-bottom:2.5rem}
  .cine-static .cine-copy{padding-top:calc(var(--header-h) + 1.75rem)}
  .cine-static .cine-orb{display:none}
  .cine-static .cine-hero .scroll-cue{display:none}
  .cine-static .vit-sticky{padding:3.5rem 0 2.5rem;--bgc:#2563EB}
  .cine-static .vit-head{text-align:left;margin-bottom:1.5rem}
  /* La vitrina pasa a un carrusel horizontal que se desliza con el dedo */
  .cine-static .vit-items{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1.25rem 1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cine-static .vit-items::-webkit-scrollbar{display:none}
  .cine-static .vit-item{flex:0 0 min(78vw,320px);scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem;
    padding:1.4rem 1rem 1.3rem;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 34%,#0b1224),#0b1224 70%);border:1px solid rgba(255,255,255,.1)}
  .cine-static .vit-phone{width:min(170px,44vw)}
  .cine-static .vit-phone img{border-radius:24px;border-width:5px;box-shadow:0 20px 40px -18px rgba(0,0,0,.8),0 0 40px -12px var(--c)}
  .cine-static .vit-info{text-align:center}
  .cine-static .vit-info h3{font-size:1.35rem}
  .cine-static .vit-acts{justify-content:center}
  .cine-static .vit-acts .btn{flex:0 0 auto}
  .cine-static .vit-all{margin-top:1.4rem}
}