/* ==========================================================================
   ckd-scrolly.css — "Una impresora, tres servicios"
   Neutro tipo Apple: gris #f5f5f7, tinta #1d1d1f, gris #6e6e73, placas
   blancas. Sin acento de color en esta escena.

   Dos modos:
   - Base (sin clase): versión estática y completa. La ven móvil, movimiento
     reducido y sin JS. Las mini-visualizaciones están en su estado final.
   - .is-scrolly (escritorio, lo pone ckd-scrolly.js): escena fija; todo se
     posiciona en absoluto y GSAP mueve solo transform/opacity.
   ========================================================================== */
.sx{
  --sx-bg:#f5f5f7; --sx-ink:#1d1d1f; --sx-dim:#6e6e73; --sx-line:rgba(0,0,0,.08);
  --sx-plate-w:440px;
  background:var(--sx-bg); color:var(--sx-ink);
  padding:clamp(4rem,9vw,7rem) 0;
}
.sx .sx-title{
  font-family:var(--f-display); font-weight:600; font-variation-settings:'wdth' 125;
  letter-spacing:-.035em; line-height:1.04; color:var(--sx-ink);
  font-size:clamp(2.1rem,5vw,4.4rem); text-align:center; max-width:16ch; margin:0 auto;
}
.sx-printer{ margin:2.5rem auto 0; width:min(300px,62vw); }
.sx-printer img{ width:100%; height:auto; }

.sx-items{ display:grid; gap:3.5rem; margin-top:4rem; }
.sx-item{ display:grid; gap:1.5rem; align-items:center; }
@media (min-width:768px){ .sx-item{ grid-template-columns:5fr 7fr; gap:3rem; } }

.sx-copy h3{
  font-family:var(--f-display); font-weight:600; font-variation-settings:'wdth' 125;
  font-size:clamp(1.6rem,2.6vw,2.2rem); letter-spacing:-.02em; margin:0 0 .5rem; color:var(--sx-ink);
}
.sx-copy p{ color:var(--sx-dim); font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.45; max-width:34ch; margin:0; }

/* ---------- Placa ---------- */
.sx-plate{
  width:100%; max-width:var(--sx-plate-w); background:#fff; color:var(--sx-ink);
  border-radius:22px; padding:1.4rem 1.5rem 1.25rem; border:1px solid var(--sx-line);
  box-shadow:0 1px 1px rgba(0,0,0,.03), 0 30px 60px -34px rgba(0,0,0,.3);
}
.sx-plate-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1.25rem; }
.sx-plate-name{ font-family:var(--f-display); font-weight:600; font-variation-settings:'wdth' 125; font-size:1.2rem; letter-spacing:-.01em; }
.sx-plate-tag{ font-size:.8rem; color:var(--sx-dim); }
.sx-link{
  display:inline-block; margin-top:1.1rem; font-size:.9rem; font-weight:600; color:var(--sx-ink);
  text-decoration:underline; text-underline-offset:.25em; text-decoration-color:rgba(0,0,0,.25);
  transition:text-decoration-color 160ms ease;
}
.sx-link:hover{ color:var(--sx-ink); text-decoration-color:var(--sx-ink); }

/* COPIX: medidor de tóner */
.sx-meter-row{ display:flex; justify-content:space-between; font-size:.9rem; color:var(--sx-dim); margin-bottom:.5rem; }
.sx-val{ color:var(--sx-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.sx-meter{ height:8px; border-radius:99px; background:#e8e8ed; overflow:hidden; }
.sx-meter i{ display:block; height:100%; width:100%; background:var(--sx-ink); transform-origin:0 50%; transform:scaleX(.18); }
.sx-order{ display:flex; align-items:center; gap:.5rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--sx-line); font-size:.92rem; }
.sx-order i{ color:var(--sx-ink); }

/* AUDIX: registro de impresiones */
.sx-log{ font-size:.86rem; }
.sx-row{ display:grid; grid-template-columns:1.7fr 1fr .6fr 1.2rem; gap:.75rem; padding:.6rem 0; border-top:1px solid var(--sx-line); align-items:center; }
.sx-row span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-row span:nth-child(3){ font-variant-numeric:tabular-nums; }
.sx-row-head{ border-top:0; color:var(--sx-dim); font-size:.78rem; padding-top:0; }
.sx-row i{ color:var(--sx-dim); }

/* SCANIX: hoja que viaja de la impresora a la carpeta */
.sx-scan{ display:flex; align-items:center; gap:.75rem; height:84px; }
.sx-scan > i{ font-size:2rem; color:var(--sx-ink); flex:0 0 auto; }
.sx-track{ position:relative; flex:1 1 auto; height:44px; }
.sx-track::before{ content:""; position:absolute; left:0; right:0; top:50%; border-top:1px dashed rgba(0,0,0,.2); }
.sx-sheet{
  position:absolute; top:50%; width:28px; height:36px; margin-top:-18px;
  left:calc(100% - 28px);
  background:#fff; border:1px solid rgba(0,0,0,.22); border-radius:3px;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.4);
}
.sx-file{ display:flex; align-items:center; gap:.5rem; margin-top:.75rem; padding-top:1rem; border-top:1px solid var(--sx-line); font-size:.9rem; color:var(--sx-dim); }
.sx-file strong{ color:var(--sx-ink); font-weight:600; }

.sx-end{
  margin:4rem auto 0; text-align:center; max-width:24ch;
  font-family:var(--f-display); font-weight:600; font-variation-settings:'wdth' 125;
  font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.03em; line-height:1.1; color:var(--sx-ink);
}
.sx-end span{ color:var(--sx-dim); }

/* ==========================================================================
   Modo escena (escritorio con movimiento permitido)
   ========================================================================== */
.sx.is-scrolly{ padding:0; }
.sx.is-scrolly .sx-stage{ height:calc(100vh - var(--sx-hdr, 66px)); overflow:hidden; }
.sx.is-scrolly .sx-inner{ position:relative; height:100%; perspective:1600px; perspective-origin:70% 45%; }
.sx.is-scrolly .sx-items, .sx.is-scrolly .sx-item{ display:contents; }
.sx.is-scrolly .sx-title{ position:absolute; left:50%; top:30%; width:100%; }
.sx.is-scrolly .sx-printer{ position:absolute; left:50%; top:68%; margin:0; width:auto; height:44%; }
.sx.is-scrolly .sx-printer img{ height:100%; width:auto; }
.sx.is-scrolly .sx-copy{ position:absolute; left:0; top:50%; width:38%; }
.sx.is-scrolly .sx-plate{ position:absolute; left:70%; top:50%; width:var(--sx-plate-w); will-change:transform, opacity; }
.sx.is-scrolly .sx-end{ position:absolute; left:50%; top:24%; width:100%; margin:0; max-width:none; }
.sx.is-scrolly .sx-sheet{ left:0; }
.sx.is-scrolly .sx-plate{ display:flex; flex-direction:column; }
.sx.is-scrolly .sx-link{ margin-top:auto; padding-top:1.1rem; align-self:flex-start; }