/* ============================================================================
   DEMO · step-plan · estilos propios (steps mini, acento teal)
   R4 C16: el plan con numeros reales tomando forma. Documento con titulo
   revelado, meta mono de cliente, dos tiles teal cuyos valores cuentan;
   flip 3D unico a la ventana de software en vivo (Live + filas + sparkline
   que se dibuja) y sello "Yours to keep". Prefijo .demo--step-plan.
   ========================================================================== */

.demo--step-plan { min-height: 240px; }

.demo--step-plan .sp-stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 1.6rem 2.2rem 1.9rem;
}

.demo--step-plan .sp-cluster { position: relative; }

/* ---- tarjeta que se revela al entrar la escena ---------------------------- */
.demo--step-plan .sp-card {
  /* ancho FIJO: las caras del flip son absolutas (aporte intrinseco 0),
     un % dentro del grid shrink-to-fit colapsa la tarjeta a 0px (bug QA r3) */
  width: 264px;
  perspective: 900px;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-scene);
}
.demo--step-plan .sp-card.is-on { opacity: 1; transform: none; }

/* ---- la hoja que voltea, una sola vez ------------------------------------- */
.demo--step-plan .sp-flip {
  position: relative;
  width: 100%;
  height: 176px;
  transform-style: preserve-3d;
  transition: transform 0.65s var(--ease-scene);
}
.demo--step-plan .sp-flip.is-flipped { transform: rotateY(180deg); }

.demo--step-plan .sp-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  box-shadow: var(--shadow-card);
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.demo--step-plan .sp-face--back { transform: rotateY(180deg); }

/* ---- cara frontal: el plan ------------------------------------------------ */
.demo--step-plan .sp-doc__title {
  font-size: 0.82rem;
  font-weight: 640;
  color: var(--ink);
  min-height: 1.2em;
  letter-spacing: -0.01em;
}
.demo--step-plan .sp-doc__meta {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  font-weight: 560;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ease-out), transform 0.34s var(--ease-out);
}
.demo--step-plan .sp-doc__meta.is-on { opacity: 1; transform: none; }

.demo--step-plan .sp-stats { display: flex; gap: 0.55rem; margin-top: auto; }
.demo--step-plan .sp-stat {
  flex: 1;
  min-width: 0;
  background: var(--teal-light);
  border-radius: 10px;
  padding: 0.5rem 0.55rem 0.55rem;
  display: grid;
  gap: 0.24rem;
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  transition: opacity 0.32s var(--ease-out), transform 0.4s var(--ease-out);
}
.demo--step-plan .sp-stat.is-on { opacity: 1; transform: none; }
.demo--step-plan .sp-stat__label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 560;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* el valor cuenta de verdad (countUp): teal AA sobre teal-light */
.demo--step-plan .sp-stat__val {
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--teal);
  white-space: nowrap;
}

/* ---- cara trasera: el software corriendo en vivo -------------------------- */
.demo--step-plan .sp-winbar { display: flex; gap: 0.3rem; }
.demo--step-plan .sp-winbar i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}
.demo--step-plan .sp-screen {
  flex: 1;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  /* QA r4: gradiente mas limpio (el mist agrisaba la pantalla viva) */
  background: linear-gradient(135deg, var(--teal-light), color-mix(in srgb, var(--teal-light) 45%, var(--paper-raised)));
  padding: 0.55rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.demo--step-plan .sp-live {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--paper-raised);
  border-radius: 999px;
  padding: 0.22rem 0.5rem 0.22rem 0.4rem;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(6px) scale(0.94);
  transition: opacity 0.3s var(--ease-out), transform 0.36s var(--ease-out);
}
.demo--step-plan .sp-live.is-on { opacity: 1; transform: none; }
.demo--step-plan .sp-live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--go);
  /* glow sutil y ESTATICO: la referencia no anima esto, spec R8 */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--go) 20%, transparent);
}
.demo--step-plan .sp-live__label {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--go);
}

/* filas de UI que se arman con stagger (skeleton con intencion) */
.demo--step-plan .sp-ui-row {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--teal) 36%, #fff); /* QA r4: contraste sobre la pantalla */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s var(--ease-out), opacity 0.3s var(--ease-out);
  opacity: 0;
}
.demo--step-plan .sp-ui-row.is-on { transform: scaleX(1); opacity: 1; }
.demo--step-plan .sp-ui-row--a { width: 82%; }
.demo--step-plan .sp-ui-row--b { width: 58%; }

/* sparkline que se dibuja al final de la pantalla viva */
.demo--step-plan .sp-spark { margin-top: auto; width: 100%; }
.demo--step-plan .sp-spark svg { width: 100%; height: 30px; }

/* ---- sello de cierre (unico POP): teal solido, AA sobre blanco ------------
   r3 fix V-12 vigente: margen de seguridad dentro del stage */
.demo--step-plan .sp-chip {
  --dm-accent: var(--teal);
  position: absolute;
  right: -0.7rem;
  bottom: -0.6rem;
  z-index: 2;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--teal) 30%, transparent);
}

@media (max-width: 720px) {
  .demo--step-plan { min-height: 220px; }
  .demo--step-plan .sp-stage { padding: 1.4rem 1.2rem 1.7rem; }
  .demo--step-plan .sp-card { width: 236px; }
  .demo--step-plan .sp-chip { right: -0.3rem; bottom: -0.4rem; }
}