/* ============================================================================
   DEMO · flow-strategy · estilos propios (specialty Strategy, acento ambar)
   R4 C16. Escenario persistente ("fp-stage"): un plan de 12 meses con linea
   de tiempo, trimestres y chart de dos lineas. Nunca se desmonta y ACUMULA:
   hitos sellados (con check), curva y chips no se exitan jamas (hilo
   conductor visible). El capitulo 1 abre con el PROBLEMA: chips grises de
   actos sueltos, tirados en angulo, que se van con beatSwap cuando el plan
   se dibuja. Un caption oscuro en la esquina narra los capitulos. Solo
   tokens de la casa, prefijo .demo--flow-strategy.
   ========================================================================== */

.demo--flow-strategy .fp-cluster {
  width: min(28rem, 100%);
  padding: 2.2rem 1.5rem 2.6rem;
}

/* ---- escenario persistente ------------------------------------------------ */
.demo--flow-strategy .fp-stage {
  position: relative;
  width: 100%;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 1.4rem 1.3rem 1.5rem;
  display: grid;
  gap: 1.35rem;
  min-height: 21rem;
  align-content: start;
}

.demo--flow-strategy .fp-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 14.28%),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 25%);
  background-size: 100% 100%;
  transition: opacity 0.5s var(--ease-out);
}
.demo--flow-strategy .fp-grid.is-on { opacity: 0.35; }

.demo--flow-strategy .fp-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out), transform 0.55s var(--ease-scene);
}
.demo--flow-strategy .fp-head.is-on { opacity: 1; transform: none; }
.demo--flow-strategy .fp-head__title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.demo--flow-strategy .fp-head__tag {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- los actos sueltos: el problema, tirado en angulo --------------------- */
.demo--flow-strategy .fp-loose {
  position: absolute;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.65rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) scale(0.9) rotate(var(--fp-tilt, 0deg));
  transition: opacity 0.3s var(--ease-out), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--flow-strategy .fp-loose.is-on { opacity: 1; transform: rotate(var(--fp-tilt, 0deg)); }
.demo--flow-strategy .fp-loose--a { --fp-tilt: -3deg; top: 2.6rem; left: 2rem; }
.demo--flow-strategy .fp-loose--b { --fp-tilt: 2.4deg; top: 5.2rem; right: 3rem; }
.demo--flow-strategy .fp-loose--c { --fp-tilt: -1.6deg; top: 8.6rem; left: 3.4rem; }

/* ---- linea de tiempo persistente: el hilo conductor ------------------------ */
.demo--flow-strategy .fp-timeline { position: relative; z-index: 1; }
.demo--flow-strategy .fp-timeline__line {
  display: block;
  width: 100%;
  height: 4px;
}
.demo--flow-strategy .fp-timeline__line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.demo--flow-strategy .fp-timeline__line path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.9s var(--ease-out);
}
.demo--flow-strategy .fp-timeline__line.is-on path { stroke-dashoffset: 0; stroke: var(--amber); }

.demo--flow-strategy .fp-quarters {
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
}
.demo--flow-strategy .fp-quarter {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s var(--ease-out), transform 0.36s var(--ease-scene);
}
.demo--flow-strategy .fp-quarter.is-on { opacity: 1; transform: none; }

.demo--flow-strategy .fp-timeline__track {
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
}

.demo--flow-strategy .fp-milestone {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: var(--amber-light);
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  opacity: 0;
  transform: translateY(6px) scale(0.7);
  transition: opacity 0.28s var(--ease-out), transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--flow-strategy .fp-milestone.is-on { opacity: 1; transform: none; }
.demo--flow-strategy .fp-milestone::before {
  content: "";
  position: absolute;
  top: -0.62rem;
  left: 50%;
  width: 2px;
  height: 0.52rem;
  background: var(--amber);
  opacity: 0.55;
}
.demo--flow-strategy .fp-milestone__check {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  color: var(--amber-text);
  display: grid;
  place-items: center;
  flex: none;
}
.demo--flow-strategy .fp-milestone__check svg {
  width: 7px; height: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- organic vs paid: chart de dos lineas con eje -------------------------- */
.demo--flow-strategy .fp-chart {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.demo--flow-strategy .fp-chart__lines {
  position: relative;
  width: 9.8rem;
  height: 3.4rem;
  flex: none;
}
.demo--flow-strategy .fp-chart__lines .dm-spark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.demo--flow-strategy .fp-line--paid path { stroke-width: 2; opacity: 0.6; }
.demo--flow-strategy .fp-chart__axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.demo--flow-strategy .fp-chart__axis.is-on { transform: scaleX(1); }
.demo--flow-strategy .fp-chart__tags {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
}
.demo--flow-strategy .fp-tag {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.32s var(--ease-out), transform 0.4s var(--ease-scene);
}
.demo--flow-strategy .fp-tag.is-on { opacity: 1; transform: none; }
.demo--flow-strategy .fp-tag--paid { color: var(--ink-faint); }
.demo--flow-strategy .fp-tag--paid.is-faded { opacity: 0.35; transition: opacity 0.6s var(--ease); }
.demo--flow-strategy .fp-tag--organic { color: var(--amber-text); }

/* ---- cierre: revenue vivo + la flor que sella ------------------------------- */
.demo--flow-strategy .fp-close {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.demo--flow-strategy .fp-close__copy {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
}
.demo--flow-strategy .fp-flower {
  display: inline-block;
  /* r10: caja intercambiada, la flor ya no es apaisada */
  width: 2.3rem;
  height: 2.6rem;
  color: var(--amber);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.demo--flow-strategy .fp-flower.is-on { opacity: 1; transform: scale(1); }
.demo--flow-strategy .fp-flower svg { display: block; width: 100%; height: 100%; }
.demo--flow-strategy .fp-flower-ring { position: relative; display: inline-block; }
.demo--flow-strategy .fp-flower-ring::after {
  content: "";
  position: absolute;
  inset: -0.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
  opacity: 0;
  transform: scale(0.6);
}
.demo--flow-strategy .fp-flower-ring.is-on::after {
  animation: fp-seal 0.7s var(--ease-out) forwards;
}
@keyframes fp-seal {
  0% { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---- caption: el narrador (unico que beatSwapea, cabalga la esquina) ------- */
.demo--flow-strategy .fp-caption {
  position: absolute;
  right: 0.4rem;
  bottom: 1.6rem;
  z-index: 5;
  min-width: 9.5rem;
  background: var(--slate);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  padding: 0.42rem 0.7rem;
  box-shadow: var(--shadow-lift);
  /* la caja del narrador solo existe cuando tiene una linea viva: en los
     huecos del beatSwap se apaga en vez de quedar como rectangulo vacio */
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.demo--flow-strategy .fp-caption:has(.fp-caption__line.is-on) { opacity: 1; }
.demo--flow-strategy .fp-caption__line {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.demo--flow-strategy .fp-caption__line.is-on { opacity: 1; }

/* ---- movil ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .demo--flow-strategy .fp-cluster { padding: 1.6rem 0.6rem 2.4rem; }
  .demo--flow-strategy .fp-stage { padding: 1.2rem 0.9rem 1.4rem; gap: 1.15rem; min-height: 20rem; }
  .demo--flow-strategy .fp-head { flex-wrap: wrap; }
  .demo--flow-strategy .fp-timeline__track { gap: 0.22rem; }
  .demo--flow-strategy .fp-milestone { font-size: 0.46rem; padding: 0.26rem 0.38rem; }
  .demo--flow-strategy .fp-milestone__check { display: none; } /* en 375 no caben los 4 sellos con check */
  /* el chart apila: lineas arriba, tags en fila abajo (nada se recorta) */
  .demo--flow-strategy .fp-chart { flex-wrap: wrap; gap: 0.55rem; }
  .demo--flow-strategy .fp-chart__lines { width: min(9.8rem, 100%); height: 2.9rem; }
  .demo--flow-strategy .fp-chart__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }
  .demo--flow-strategy .fp-loose--a { left: 1.2rem; }
  .demo--flow-strategy .fp-loose--b { right: 1.2rem; }
  .demo--flow-strategy .fp-loose--c { left: 1.8rem; }
  .demo--flow-strategy .fp-caption { right: 0.1rem; bottom: 1.2rem; min-width: 8rem; padding: 0.34rem 0.55rem; }
  .demo--flow-strategy .fp-caption__line { font-size: 0.5rem; }
}