/* ============================================================================
   DEMO · flow-growth · estilos propios (specialty Growth, acento violeta) · R4
   Escenario persistente ("fg-stage", browser card) con chrome minimo; 4
   capitulos absolutos rotan dentro de fg-stage__body con beatSwap. Nivel
   "escena grande": tarjeta de anuncio social real (avatar + foto + Live +
   reach), landing con form que se llena, reel con comentarios de caras
   reales, y payoff medible (barras). El hilo conductor (fg-thread) nace del
   form, flota fuera del marco y en el capitulo 4 viaja al centro y voltea
   (flip 3D) a "Booked". Solo tokens de la casa, prefijo .demo--flow-growth.
   ========================================================================== */

.demo--flow-growth .fg-cluster {
  width: min(27rem, 100%);
  padding: 2.2rem 1.6rem 2.6rem;
}

/* ---- escenario persistente --------------------------------------------- */
.demo--flow-growth .fg-stage {
  width: 100%;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.demo--flow-growth .fg-stage__chrome {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.demo--flow-growth .fg-stage__dots { display: flex; gap: 0.32rem; }
.demo--flow-growth .fg-stage__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--violet-bright); opacity: 0.55; }
.demo--flow-growth .fg-stage__dots i:nth-child(1) { opacity: 1; }
.demo--flow-growth .fg-stage__url {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
}

.demo--flow-growth .fg-stage__body {
  position: relative;
  min-height: 22rem;
  padding: 1.4rem 1.2rem;
}

/* cada capitulo ocupa el mismo hueco; el marco nunca se desmonta, solo el
   contenido interno rota con beatSwap (opacity, ENTER/EXIT) */
.demo--flow-growth .fg-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.4rem 1.2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.34s var(--ease-out);
}
.demo--flow-growth .fg-cap.is-on { opacity: 1; pointer-events: auto; }

/* ---- capitulo 1 · the ad runs: tarjeta de anuncio con vida --------------- */
.demo--flow-growth .fg-adcard {
  width: 100%;
  max-width: 16.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.7rem 0.75rem 0.8rem;
  display: grid;
  gap: 0.55rem;
  box-shadow: var(--shadow-lift);
}
.demo--flow-growth .fg-ad__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.36s var(--ease-out), transform 0.46s var(--ease-scene);
}
.demo--flow-growth .fg-ad__head.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-ad__avatar {
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 640;
  display: grid;
  place-items: center;
}
.demo--flow-growth .fg-ad__id { display: grid; line-height: 1.22; min-width: 0; }
.demo--flow-growth .fg-ad__id b { font-size: 0.72rem; font-weight: 640; color: var(--ink); }
.demo--flow-growth .fg-ad__id small {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.demo--flow-growth .fg-ad__head .dm-chip { margin-left: auto; }
.demo--flow-growth .fg-chip--spons { --dm-accent: var(--violet); }
.demo--flow-growth .fg-ad__photo {
  width: 100%;
  height: 6.4rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--violet) 16%, var(--lavender-light));
}
.demo--flow-growth .fg-ad__copy { width: 100%; display: grid; gap: 0.38rem; }
.demo--flow-growth .fg-bar {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--mist);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.36s var(--ease-out), transform 0.46s var(--ease-scene);
}
.demo--flow-growth .fg-bar.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-bar--a { width: 92%; }
.demo--flow-growth .fg-bar--b { width: 62%; }
.demo--flow-growth .fg-ad__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.demo--flow-growth .fg-ad__cta {
  background: var(--violet);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 620;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-pill);
  position: relative;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.34s var(--ease-out), transform 0.4s var(--ease-scene), background 0.2s var(--ease);
}
.demo--flow-growth .fg-ad__cta.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-ad__cta.is-pressed { transform: translateY(2px) scale(0.96); background: var(--violet-bright); }
.demo--flow-growth .fg-chip--live { --dm-accent: var(--go); }
.demo--flow-growth .fg-reach {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* nota flotante del capitulo 1: cabalga el borde izquierdo del marco */
.demo--flow-growth .fg-note--live {
  top: 3.4rem;
  left: -0.9rem;
}

/* ---- capitulo 2 · the lead lands: landing + form ------------------------- */
.demo--flow-growth .fg-land {
  width: 100%;
  max-width: 16rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.7rem;
  display: grid;
  gap: 0.6rem;
  box-shadow: var(--shadow-lift);
}
.demo--flow-growth .fg-block { opacity: 0; transform: translateY(10px); transition: opacity 0.38s var(--ease-out), transform 0.48s var(--ease-scene); }
.demo--flow-growth .fg-block.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-land__nav { display: flex; align-items: center; gap: 0.4rem; }
.demo--flow-growth .fg-land__dot { width: 9px; height: 9px; border-radius: 3px; background: var(--violet); flex: none; }
.demo--flow-growth .fg-land__brand-bar { display: block; width: 46%; height: 7px; border-radius: 3px; background: var(--ink); }
.demo--flow-growth .fg-land__hero { display: grid; gap: 0.4rem; }
.demo--flow-growth .fg-land__title-bar { display: block; width: 82%; height: 11px; border-radius: 4px; background: var(--ink); }
.demo--flow-growth .fg-land__sub-bar { display: block; width: 58%; height: 6px; border-radius: 3px; background: var(--mist); }
.demo--flow-growth .fg-land__cta {
  justify-self: start;
  position: relative;
  background: var(--violet);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 620;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
}
.demo--flow-growth .fg-land__cta.is-pressed { transform: translateY(2px) scale(0.97); }

/* el form: el visitante deja sus datos (typewriter con caret del motor) */
.demo--flow-growth .fg-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.3rem 0.5rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.55rem;
}
.demo--flow-growth .fg-form__label {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.demo--flow-growth .fg-form__field {
  min-height: 1.4rem;
  display: flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  font-size: 0.7rem;
  color: var(--ink);
}
.demo--flow-growth .fg-form__send {
  position: relative;
  background: var(--ink);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 620;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-pill);
  transition: transform 0.14s var(--ease);
}
.demo--flow-growth .fg-form__send.is-pressed { transform: translateY(2px) scale(0.96); }

/* ---- capitulo 3 · content compounds: reel + feed que reacciona ----------- */
.demo--flow-growth .fg-video {
  position: relative;
  width: 7rem;
  height: 12.2rem; /* 9:16 */
  margin-right: 6.4rem; /* deja aire a los comentarios de la derecha */
  border-radius: 14px;
  background: linear-gradient(160deg, var(--slate), var(--slate-soft));
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-scene);
}
.demo--flow-growth .fg-video.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-video__handle {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.14rem 0.4rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.32s var(--ease-out), transform 0.4s var(--ease-scene);
}
.demo--flow-growth .fg-video__handle.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s var(--ease-out), transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--flow-growth .fg-video__play.is-on { opacity: 1; transform: scale(1); }
.demo--flow-growth .fg-video__play svg { width: 0.9rem; height: 0.9rem; fill: #fff; }
.demo--flow-growth .fg-ring {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.demo--flow-growth .fg-ring svg { width: 100%; height: 100%; }
.demo--flow-growth .fg-ring circle {
  fill: none;
  stroke: var(--violet-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.9s var(--ease-out);
}
.demo--flow-growth .fg-ring.is-on circle { stroke-dashoffset: 0; }
.demo--flow-growth .fg-video__captions {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.6rem;
  display: grid;
  gap: 0.3rem;
}
.demo--flow-growth .fg-caption {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.32s var(--ease-out), transform 0.4s var(--ease-scene);
}
.demo--flow-growth .fg-caption.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-caption--a { width: 78%; }
.demo--flow-growth .fg-caption--b { width: 52%; }
.demo--flow-growth .fg-views {
  margin-right: 6.4rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.36s var(--ease-scene);
}
.demo--flow-growth .fg-views.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-views__num {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* comentarios: cara real + micro burbuja, POP chico (celebran) */
.demo--flow-growth .fg-cmt {
  position: absolute;
  right: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity 0.3s var(--ease-out), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--flow-growth .fg-cmt.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-cmt--a { top: 34%; }
.demo--flow-growth .fg-cmt--b { top: 52%; }
.demo--flow-growth .fg-cmt__bubble {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-lift);
  padding: 0.32rem 0.5rem;
  font-size: 0.62rem;
  color: var(--ink);
  white-space: nowrap;
}

/* ---- capitulo 4 · the sale closes: recompensa medible --------------------- */
.demo--flow-growth .fg-cap--settle { gap: 1rem; padding-top: 3rem; }
.demo--flow-growth .fg-payoff {
  margin-top: 3.4rem; /* la tarjeta del hilo aterriza arriba */
  display: flex;
  align-items: center;
  gap: 0.8rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.38s var(--ease-out), transform 0.48s var(--ease-scene);
}
.demo--flow-growth .fg-payoff.is-on { opacity: 1; transform: none; }
.demo--flow-growth .fg-paybars {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  height: 2.6rem;
}
.demo--flow-growth .fg-paybars i {
  display: block;
  width: 10px;
  height: var(--fg-bar-h, 100%);
  border-radius: 3px 3px 1px 1px;
  background: var(--violet);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.55s var(--ease-out);
}
.demo--flow-growth .fg-paybars i:last-child { background: var(--violet-bright); }
.demo--flow-growth .fg-paybars.is-on i { transform: scaleY(1); }
.demo--flow-growth .fg-payoff__copy { display: grid; line-height: 1.3; }
.demo--flow-growth .fg-payoff__copy b { font-size: 0.78rem; font-weight: 640; color: var(--ink); }
.demo--flow-growth .fg-payoff__copy small {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- hilo conductor: la misma tarjeta de lead ---------------------------- */
.demo--flow-growth .fg-thread-pos {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9.6rem;
  height: 3.1rem;
  z-index: 5;
  perspective: 800px;
  opacity: 0;
  pointer-events: none;
  transform: translate(6.9rem, 6.4rem) scale(0.9);
  transition: opacity 0.32s var(--ease-out), transform 0.5s var(--ease-scene);
}
.demo--flow-growth .fg-thread-pos.is-on {
  opacity: 1;
  transform: translate(6.9rem, 6.4rem) scale(1);
}
.demo--flow-growth .fg-thread-pos.is-on.is-center {
  transform: translate(0, -2.6rem) scale(1.08);
  transition: opacity 0.32s var(--ease-out), transform 0.7s var(--ease);
}

.demo--flow-growth .fg-thread-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease);
}
.demo--flow-growth .fg-thread-flip.is-flipped { transform: rotateY(180deg); }

.demo--flow-growth .fg-thread__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--violet);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  padding: 0.55rem 0.7rem;
  display: grid;
  align-content: center;
  line-height: 1.3;
}
.demo--flow-growth .fg-thread__face b { font-size: 0.78rem; font-weight: 640; color: var(--ink); white-space: nowrap; }
.demo--flow-growth .fg-thread__face small { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.demo--flow-growth .fg-thread__face--back {
  transform: rotateY(180deg);
  border-left-color: var(--go);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.demo--flow-growth .fg-thread__face--back b,
.demo--flow-growth .fg-thread__face--back small { display: block; }
.demo--flow-growth .fg-thread__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--go) 16%, transparent);
  color: var(--go);
  display: grid;
  place-items: center;
  flex: none;
}
.demo--flow-growth .fg-thread__check svg {
  width: 12px; height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- movil -------------------------------------------------------------- */
@media (max-width: 720px) {
  .demo--flow-growth .fg-cluster { padding: 1.6rem 0.6rem 2rem; }
  .demo--flow-growth .fg-stage__body { min-height: 21rem; padding: 1.1rem 0.8rem; }
  .demo--flow-growth .fg-adcard, .demo--flow-growth .fg-land { max-width: 100%; }
  .demo--flow-growth .fg-note--live { left: -0.3rem; top: 1rem; }
  .demo--flow-growth .fg-video { margin-right: 5.2rem; width: 6.2rem; height: 10.8rem; }
  .demo--flow-growth .fg-views { margin-right: 5.2rem; }
  .demo--flow-growth .fg-cmt { right: 0.2rem; }
  .demo--flow-growth .fg-cmt__bubble { font-size: 0.56rem; padding: 0.28rem 0.42rem; }
  .demo--flow-growth .fg-thread-pos {
    width: 8.6rem;
    height: 2.9rem;
    transform: translate(4.6rem, 5.6rem) scale(0.9);
  }
  .demo--flow-growth .fg-thread-pos.is-on { transform: translate(4.6rem, 5.6rem) scale(1); }
  .demo--flow-growth .fg-thread-pos.is-on.is-center { transform: translate(0, -1.9rem) scale(1.02); }
  .demo--flow-growth .fg-payoff { margin-top: 4rem; }
}