/* ============================================================================
   DEMO · step-goal · estilos propios (steps mini, acento violeta)
   R4 C16: la llamada de 15 minutos donde el dueno habla. Tarjeta de llamada
   con foto real, timer mono que corre, waveform vivo mientras habla (micro
   idle, como los typing dots), notas con caret humano y cierre de anillo
   de target + sello. Prefijo .demo--step-goal.
   ========================================================================== */

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

.demo--step-goal .sg-stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 1.5rem 2.2rem 1.7rem;
}

/* cluster: ancla los badges a la tarjeta (no al stage), a cualquier ancho */
.demo--step-goal .sg-cluster { position: relative; }

.demo--step-goal .sg-card {
  width: min(300px, 100%);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0.9rem 0.95rem 1rem;
  display: grid;
  gap: 0.7rem;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-scene);
}
.demo--step-goal .sg-card.is-on { opacity: 1; transform: none; }

/* ---- cabecera: foto del dueno + identidad + timer ------------------------- */
.demo--step-goal .sg-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.demo--step-goal .sg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
/* anillo que respira SOLO mientras el dueno habla (micro-idle, se apaga) */
.demo--step-goal .sg-card.is-talking .sg-avatar {
  animation: sg-ring 1.1s var(--ease) infinite;
}
@keyframes sg-ring {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--violet) 30%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--violet) 14%, transparent); }
}

.demo--step-goal .sg-id {
  display: grid;
  line-height: 1.3;
  min-width: 0;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.32s var(--ease-out), transform 0.38s var(--ease-out);
}
.demo--step-goal .sg-id.is-on { opacity: 1; transform: none; }
.demo--step-goal .sg-id b {
  font-size: 0.76rem;
  font-weight: 620;
  color: var(--ink);
  white-space: nowrap; /* el titulo no se parte en movil (QA r4) */
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo--step-goal .sg-id small {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo--step-goal .sg-timer {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.demo--step-goal .sg-timer svg {
  width: 10px; height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* flash de un solo disparo en cada tick, no es loop narrativo */
.demo--step-goal .sg-timer.is-tick { animation: sg-tick 0.24s var(--ease-out); }
@keyframes sg-tick {
  0% { transform: scale(1); }
  45% { transform: scale(1.09); color: var(--violet-deep); }
  100% { transform: scale(1); }
}

/* ---- el dueno habla: waveform vivo + cita --------------------------------- */
.demo--step-goal .sg-quote {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--lavender-light);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.32s var(--ease-out), transform 0.45s var(--ease-out);
}
.demo--step-goal .sg-quote.is-on { opacity: 1; transform: none; }
.demo--step-goal .sg-quote__text {
  font-size: 0.72rem;
  font-weight: 540;
  line-height: 1.35;
  color: var(--ink);
}

/* waveform: 4 barras; el idle SOLO corre mientras .is-talking (como los
   typing dots del motor: micro-idle permitido, se apaga cuando termina) */
.demo--step-goal .sg-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  flex: none;
}
.demo--step-goal .sg-wave i {
  width: 3px;
  border-radius: 2px;
  background: var(--violet);
  transform-origin: 50% 50%;
}
.demo--step-goal .sg-wave i:nth-child(1) { height: 6px; }
.demo--step-goal .sg-wave i:nth-child(2) { height: 12px; }
.demo--step-goal .sg-wave i:nth-child(3) { height: 8px; }
.demo--step-goal .sg-wave i:nth-child(4) { height: 11px; }
.demo--step-goal .sg-card.is-talking .sg-wave i { animation: sg-eq 0.7s var(--ease) infinite; }
.demo--step-goal .sg-card.is-talking .sg-wave i:nth-child(2) { animation-delay: 0.12s; }
.demo--step-goal .sg-card.is-talking .sg-wave i:nth-child(3) { animation-delay: 0.24s; }
.demo--step-goal .sg-card.is-talking .sg-wave i:nth-child(4) { animation-delay: 0.36s; }
@keyframes sg-eq { 50% { transform: scaleY(0.45); } }

/* ---- nuestras notas: caret humano ----------------------------------------- */
.demo--step-goal .sg-notes { display: grid; gap: 0.42rem; }
.demo--step-goal .sg-notes__label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  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-goal .sg-notes__label.is-on { opacity: 1; transform: none; }

.demo--step-goal .sg-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 15px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s var(--ease-out), transform 0.38s var(--ease-out);
}
.demo--step-goal .sg-note.is-on { opacity: 1; transform: none; }
.demo--step-goal .sg-note__dot {
  width: 5px; height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--violet);
}
.demo--step-goal .sg-note__text {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---- badge flotante: anillo de target + punto que cae ---------------------
   r3 fix V-04 vigente: la sombra vive como filter CSS del contenedor. */
.demo--step-goal .sg-target {
  position: absolute;
  right: -0.9rem;
  bottom: -0.9rem;
  width: 58px;
  height: 58px;
  z-index: 2;
  filter: drop-shadow(0 8px 18px rgba(17, 17, 16, 0.14));
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.demo--step-goal .sg-target.is-on { opacity: 1; }
.demo--step-goal .sg-target__ring {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.demo--step-goal .sg-target__ring circle {
  fill: var(--paper-raised);
  stroke: var(--violet);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  transition: stroke-dashoffset 0.75s var(--ease-out);
}
.demo--step-goal .sg-target.is-on .sg-target__ring circle { stroke-dashoffset: 0; }

.demo--step-goal .sg-target__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--violet) 45%, transparent);
  opacity: 0;
  transform: translate(-50%, -90%) scale(0.5);
  transition: opacity 0.3s var(--ease-out), transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--step-goal .sg-target__dot.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- sello de cierre (unico POP de la escena) ----------------------------- */
.demo--step-goal .sg-lock {
  position: absolute;
  left: -0.7rem;
  bottom: -0.6rem;
  z-index: 2;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--violet) 30%, transparent);
}

@media (max-width: 720px) {
  .demo--step-goal { min-height: 220px; }
  .demo--step-goal .sg-stage { padding: 1.3rem 1.2rem 1.5rem; }
  .demo--step-goal .sg-card { width: min(280px, 100%); }
  .demo--step-goal .sg-target { right: -0.4rem; bottom: -0.5rem; width: 50px; height: 50px; }
  .demo--step-goal .sg-target__dot { width: 9px; height: 9px; }
  .demo--step-goal .sg-lock { left: -0.3rem; }
}