/* =========================================================
   AuraSync — Cierre
   El diagrama de portada. Fragmentos reales de mostrador que
   pasan de dispersos a fila cerrada. Sin raíl, sin nodos, sin curva.
   ========================================================= */

.cierre{position:relative;padding:26px 22px 22px}

/* marcas de registro — el sello de Cierre */
.cierre::before,.cierre::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
  border-color:var(--line-strong);border-style:solid;
}
.cierre::before{top:0;left:0;border-width:1px 0 0 1px}
.cierre::after{bottom:0;right:0;border-width:0 1px 1px 0}

.cierre-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin:0 0 18px;
}
.cierre-head b{color:var(--ink);font-weight:600;letter-spacing:.1em}

.cierre-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}

/* ---------- fragmento ---------- */
.frag{
  position:relative;background:#fff;border:1px solid var(--line);
  padding:11px 14px;display:grid;grid-template-columns:1fr auto;
  align-items:baseline;gap:6px 14px;
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--r,0deg));
  opacity:var(--o,1);
  transition:transform .82s cubic-bezier(.22,.68,.24,1),
             opacity .5s ease,border-color .4s ease,background .4s ease;
}
.frag-label{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);
  grid-column:1;grid-row:1;
}
.frag-data{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;letter-spacing:.02em;color:var(--ink);font-weight:600;
  grid-column:2;grid-row:1;white-space:nowrap;
}
.frag-note{
  grid-column:1/-1;grid-row:2;font-size:13.5px;color:var(--ink-2);line-height:1.45;
}

/* fragmentos que el sistema mueve solo */
.frag--auto{border-left:2px solid var(--cyan)}
.frag--auto .frag-data{color:var(--cyan-dark)}

/* ---------- fotogramas ---------- */
/* 01 disperso — cada fragmento con su desvío propio */
.cierre[data-frame="1"] .frag{--o:.55}

/* 02 encuentra relación — se enderezan, siguen separados */
.cierre[data-frame="2"] .frag{--r:0deg;--o:.8}

/* 03 cae en fila */
.cierre[data-frame="3"] .frag,
.cierre[data-frame="4"] .frag,
.cierre[data-frame="5"] .frag,
.cierre[data-frame="6"] .frag{--dx:0;--dy:0;--r:0deg;--o:1}

/* 04 cambia prioridad — el pago se adelanta */
.cierre[data-frame="4"] .frag[data-priority]{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(10,118,131,.08);
}

/* 05 reposo, fila cerrada */
.cierre[data-frame="5"] .cierre-seal,
.cierre[data-frame="6"] .cierre-seal{opacity:1;transform:none}

/* 06 se abre de nuevo — el último se separa */
.cierre[data-frame="6"] .frag[data-reopen]{
  --dy:10px;border-color:var(--cyan);background:rgba(10,118,131,.04);
}

/* ---------- sello de cierre ---------- */
.cierre-seal{
  margin-top:14px;display:flex;align-items:center;gap:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  opacity:0;transform:translateY(6px);
  transition:opacity .6s ease .1s,transform .6s ease .1s;
}
.cierre-seal i{flex:1;height:1px;background:var(--line-strong);display:block}

.cierre-lead{
  margin:0 0 14px;font-size:14.5px;color:var(--ink-2);max-width:46ch;
}

/* ---------- sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .frag{transition:none;--dx:0;--dy:0;--r:0deg;--o:1}
  .cierre-seal{transition:none;opacity:1;transform:none}
}

/* ---------- móvil ---------- */
@media (max-width:760px){
  .cierre{padding:20px 0 18px}
  .cierre::before,.cierre::after{display:none}
  .frag{padding:10px 12px}
  .frag-note{font-size:13px}
  .frag-data{font-size:12.5px}
}