/* ==========================================================================
   scenes.css · Escenas envolventes ligadas al scroll
   - Checador: la tableta se levanta, se vuelve kiosco, checan con QR y PIN.
   - Riel de comandas: los módulos cuelgan de un riel que avanza de lado.
   JS sólo escribe variables (--rise, --phone, --board, --shift, --x, --sw)
   y clases de estado; todo se anima con transform y opacity.
   ========================================================================== */

/* ==========================================================================
   CHECADOR
   ========================================================================== */
.kiosk { --rise: 0; --phone: 0; --board: 0; --shift: 0; position: relative; height: 600vh; border-top: 1px dashed var(--acero-3); }
.kiosk__sticky {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-7); align-items: center;
  padding-block: var(--s-6);
}
.kiosk__copy { display: grid; gap: var(--s-5); align-content: center; }
.kiosk__stamp { justify-self: start; font-size: var(--fs-sm); }
.kiosk__copy h2 { font-size: var(--fs-h2); max-width: 11ch; }
.ksteps { display: grid; min-height: 12.5rem; }
.kstep { grid-area: 1 / 1; display: flex; gap: var(--s-4); align-items: start; opacity: 0; transform: translateY(14px); transition: opacity var(--t-med), transform var(--t-med) var(--ease); }
.kstep.is-active { opacity: 1; transform: none; }
.kstep__n { font-size: 4.2rem; color: var(--sello); flex: none; width: 1.1ch; }
.kstep h3 { font-size: var(--fs-xl); font-family: var(--cond); text-transform: uppercase; font-weight: 700; line-height: 1; }
.kstep p { margin-top: var(--s-2); color: var(--niebla); max-width: 40ch; }
.kiosk__bars { display: flex; gap: 6px; }
.kiosk__bars i { width: 40px; height: 4px; background: var(--acero-3); transition: background-color var(--t-med); }
.kiosk__bars i.is-on { background: var(--luz); }

/* Escenario con perspectiva */
.kstage { position: relative; height: min(74vh, 640px); display: grid; place-items: center; perspective: 1600px; }

/* --- Tableta --- */
.tablet {
  width: min(620px, 100%); aspect-ratio: 4 / 3; max-width: 100%;
  padding: 16px; border-radius: 30px; background: #0d0e0f;
  box-shadow: inset 0 0 0 1px #3a3f40, 0 50px 90px -30px rgb(0 0 0 / 0.8);
  transform-origin: 50% 100%;
  transform:
    translate3d(calc(var(--shift) * -16%), calc((1 - var(--rise)) * 120px), 0)
    rotateX(calc((1 - var(--rise)) * 64deg))
    rotateZ(calc((1 - var(--rise)) * -9deg))
    scale(calc(0.84 + 0.16 * var(--rise) - 0.1 * var(--shift)));
  will-change: transform;
}
.tablet__screen { position: relative; height: 100%; border-radius: 14px; overflow: hidden; background: var(--papel); color: var(--tinta); container-type: inline-size; color-scheme: light; }
.kscreen { position: absolute; inset: 0; padding: 5cqi; transition: opacity 360ms var(--ease); }
.kscreen--kiosk { opacity: 0; }
.kstage.is-kiosk .kscreen--setup { opacity: 0; }
.kstage.is-kiosk .kscreen--kiosk { opacity: 1; }

/* Pantalla de configuración */
.kscreen--setup { display: grid; align-content: start; gap: 2.6cqi; font-size: 2.3cqi; }
.ks-head { display: flex; justify-content: space-between; color: var(--tinta-2); }
.ks-head b { color: var(--tinta); }
.ks-big { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 5.4cqi; line-height: 0.95; }
.ks-field { display: flex; justify-content: space-between; gap: 2cqi; padding-bottom: 1.4cqi; border-bottom: 1.5px dashed var(--tinta); }
.ks-field span { color: var(--tinta-2); }
.ks-pinrow { display: flex; gap: 1cqi; }
.ks-pinrow i { width: 1.8cqi; height: 1.8cqi; background: var(--tinta); }
.ks-btn { margin-top: 1.6cqi; padding: 2.4cqi; text-align: center; background: var(--tinta); color: var(--papel); font-weight: 600; transition: background-color 200ms, transform 200ms var(--ease); }
.ks-btn.is-pressed { background: var(--sello); color: #fff; transform: scale(0.97); }

/* Pantalla del kiosco */
.kscreen--kiosk { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqi; align-items: center; font-size: 2.2cqi; }
.ks-qr { display: grid; justify-items: center; gap: 1.6cqi; text-align: center; padding-right: 5cqi; border-right: 1.5px dashed var(--tinta); }
.ks-qr .ks-big, .ks-pad .ks-big { font-size: 4.2cqi; }
.ks-label { color: var(--tinta-2); }
.ks-code { width: 78%; height: auto; shape-rendering: crispEdges; transition: opacity 120ms; }
.ks-code.is-swap { opacity: 0.15; }
.ks-timer { display: flex; align-items: center; gap: 1.2cqi; color: var(--tinta-2); }
.ks-ring { width: 2.8cqi; height: 2.8cqi; border-radius: 50%; background: conic-gradient(var(--tinta) calc(var(--sec, 1) * 1turn), #d6d6d0 0); }
.ks-pad { display: grid; justify-items: center; gap: 2.4cqi; }
.ks-dots { display: flex; gap: 1.6cqi; }
.ks-dots i { width: 2.6cqi; height: 2.6cqi; box-shadow: inset 0 0 0 1.5px var(--tinta); transition: background-color 120ms; }
.ks-dots i.is-on { background: var(--tinta); }
.ks-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqi; width: 82%; }
.ks-keys i { aspect-ratio: 1.6; display: grid; place-items: center; font-style: normal; font-size: 3.2cqi; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.ks-keys i:empty { box-shadow: none; }
.ks-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.ks-flash.is-on { animation: flash 520ms ease-out; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.ks-toast {
  position: absolute; left: 50%; bottom: 4cqi; padding: 1.6cqi 3cqi; white-space: nowrap;
  background: var(--tinta); color: var(--papel); font-weight: 600; font-size: 2.3cqi;
  transform: translate(-50%, 2cqi); opacity: 0; transition: opacity 260ms, transform 260ms var(--ease);
}
.ks-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ks-toast.is-late { background: var(--sello); color: #fff; }

/* --- Celular que escanea --- */
.phone {
  position: absolute; right: 2%; bottom: 4%;
  width: min(190px, 30%); aspect-ratio: 9 / 18.5;
  padding: 8px; border-radius: 28px; background: #0d0e0f;
  box-shadow: inset 0 0 0 1px #3a3f40, 0 40px 70px -20px rgb(0 0 0 / 0.8);
  transform: translateX(calc((1 - var(--phone)) * 170%)) rotate(calc(-14deg + var(--phone) * 8deg));
  opacity: clamp(0, calc(var(--phone) * 3), 1);
  will-change: transform;
}
.phone__screen { position: relative; height: 100%; border-radius: 21px; overflow: hidden; background: #2a2e2f; container-type: inline-size; }
.phone__frame { position: absolute; inset: 22% 14%; box-shadow: 0 0 0 2px var(--luz); }
.phone__scan { position: absolute; left: 14%; right: 14%; top: 22%; height: 2px; background: var(--sello); animation: scan 1.4s ease-in-out infinite alternate; }
@keyframes scan { to { transform: translateY(calc(56cqi * 1.9)); } }
.phone__ok { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 3cqi; padding: 8cqi; text-align: center; background: var(--papel); color: var(--tinta); font-size: 8cqi; opacity: 0; transition: opacity 260ms; }
.phone__ok b { font-size: 9cqi; }
.phone__ok .total { font-size: 28cqi; }
.phone.is-ok .phone__ok { opacity: 1; }

/* --- Ticket de asistencia del día --- */
.kboard {
  position: absolute; right: 0; top: 4%;
  width: min(360px, 58%);
  padding: var(--s-5) var(--s-5) calc(8px + var(--s-5));
  font-size: 0.78rem; line-height: 1.55; text-transform: uppercase;
  box-shadow: 0 40px 70px -24px rgb(0 0 0 / 0.7);
  transform: translateX(calc((1 - var(--board)) * 140%)) rotate(2.2deg);
  opacity: clamp(0, calc(var(--board) * 2), 1);
}
.kboard__head { display: grid; gap: 2px; margin-bottom: var(--s-2); }
.kboard .rule { margin-block: var(--s-2); }
.kboard__stamp { display: block; width: max-content; margin: var(--s-3) 0 0 auto; font-size: 0.8rem; opacity: 0; transform: rotate(-9deg) scale(1.8); transition: opacity 240ms, transform 400ms var(--ease); }
.kboard__stamp.is-hit { opacity: 1; transform: rotate(-9deg) scale(1); }

@media (max-width: 900px) {
  .kiosk { height: 640vh; }
  .kiosk__sticky { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4) var(--s-3); align-items: stretch; }
  .kiosk__copy { gap: var(--s-3); }
  .kiosk__copy h2 { font-size: clamp(2.2rem, 1.4rem + 4vw, 3rem); }
  .ksteps { min-height: 7.4rem; }
  .kstep__n { font-size: 3rem; }
  .kstep h3 { font-size: var(--fs-lg); }
  .kstep p { font-size: var(--fs-sm); line-height: 1.5; margin-top: var(--s-1); }
  .kstage { height: 100%; min-height: 0; }
  .tablet { width: 100%; padding: 10px; border-radius: 20px; }
  .tablet__screen { border-radius: 10px; }
  .kboard { width: 74%; top: 0; font-size: 0.7rem; padding: var(--s-4) var(--s-4) calc(8px + var(--s-4)); }
}
@media (max-width: 760px) {
  .kiosk__sticky { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   RIEL DE COMANDAS
   ========================================================================== */
.rail { position: relative; height: 460vh; border-top: 1px dashed var(--acero-3); }
.rail__sticky {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  padding-block: var(--s-6) var(--s-5);
  overflow: hidden;
}
.rail__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-7); }
.rail__head h2 { font-size: var(--fs-h2); max-width: 13ch; }
.rail__head p { color: var(--niebla); max-width: 44ch; }
/* El riel de acero inoxidable de la cocina */
.rail__bar { position: relative; z-index: 2; height: 16px; margin-top: var(--s-6); background: linear-gradient(#e2e5e4, #a9afae 45%, #6d7372 55%, #8f9594); box-shadow: 0 10px 18px -8px rgb(0 0 0 / 0.7); }
.rail__track {
  --x: 0px;
  display: flex; align-items: flex-start; gap: clamp(18px, 2.6vw, 36px);
  margin-top: -6px;
  padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  transform: translate3d(var(--x), 0, 0);
  will-change: transform;
}
.order {
  --sw: 0deg;
  position: relative; flex: none; width: min(290px, 70vw);
  display: grid; gap: var(--s-3); align-content: start;
  padding: var(--s-6) var(--s-5) calc(8px + var(--s-5));
  font-size: var(--fs-sm);
  transform-origin: 50% -6px; transform: rotate(var(--sw));
  box-shadow: 0 30px 50px -26px rgb(0 0 0 / 0.75);
}
.order::before { /* pinza del riel */
  content: ''; position: absolute; top: -2px; left: 50%; width: 54px; height: 16px; translate: -50% 0;
  background: linear-gradient(#cdd1d0, #7f8584); box-shadow: 0 2px 4px rgb(0 0 0 / 0.4);
}
.order__head { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 600; padding-bottom: var(--s-2); border-bottom: 1.5px dashed var(--tinta); }
.order h3 { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: 2.1rem; line-height: 0.95; }
.order p { color: var(--tinta-2); line-height: 1.55; }
.order.is-lead { width: min(330px, 76vw); }
.order__stamp { justify-self: end; font-size: var(--fs-xs); margin-top: var(--s-2); }
.rail__progress { padding-top: var(--s-4); }
.rail__bar-fill { display: block; height: 1px; background: var(--acero-3); position: relative; }
.rail__bar-fill b { position: absolute; inset: -1px 0; background: var(--luz); transform-origin: left; transform: scaleX(var(--p, 0)); }

@media (max-width: 760px) {
  .rail { height: 560vh; }
  .rail__sticky { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .rail__head p { font-size: var(--fs-sm); }
  .order h3 { font-size: 1.8rem; }
}

/* Sin movimiento: escenas en su estado final, sin fijar */
@media (prefers-reduced-motion: reduce) {
  .kiosk { height: auto; --rise: 1; --board: 1; }
  .kiosk__sticky { position: relative; top: 0; height: auto; padding-block: var(--s-8); }
  .kstep { grid-area: auto; opacity: 1; transform: none; }
  .ksteps { gap: var(--s-5); min-height: 0; }
  .kiosk__bars, .phone { display: none; }
  .kstage .kscreen--setup { opacity: 0; }
  .kstage .kscreen--kiosk { opacity: 1; }
  .rail { height: auto; }
  .rail__sticky { position: relative; top: 0; height: auto; overflow: visible; padding-block: var(--s-8); }
  .rail__track { flex-wrap: wrap; transform: none; padding-right: var(--gutter); row-gap: var(--s-7); }
  .rail__progress { display: none; }
}