/* Agent B: pixel sprites, «cómo funciona» flow */

/* ---------- sprites ---------- */
.sprite { display: inline-block; line-height: 0; width: var(--sprite-w, auto); max-width: 100%; }
.sprite svg { width: 100%; height: auto; image-rendering: pixelated; overflow: visible; }
.sprite__eyes { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 70ms steps(2); }
.sprite.is-blink .sprite__eyes { transform: scaleY(0.2); }

/* ---------- «Cómo funciona»: the flow ---------- */
.preguntas { padding-block: var(--space-9); }
.preguntas__lead { color: var(--tone-3); font-size: 18px; }

.flow { --gap: 48px; --line: var(--tone-6); --lit: var(--ok-bright); margin-top: var(--space-8); }

/* row A: visit -> q.01 -> q.02 -> score */
.flow__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: stretch;
}
.flow__step {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px; background: var(--tone-8); border: 1px solid var(--tone-7);
}
.flow__k {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-code); font-size: 12px; line-height: 16px; color: var(--tone-4);
}
.flow__k span { color: var(--lit); }
.flow__h { font-size: 22px; line-height: 1.25; color: var(--bg); }
.flow__p { font-size: 15px; line-height: 1.5; color: var(--tone-3); }
.flow__visit { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin: 4px 0 4px; }
.flow__visit .sprite { width: 52px; }
.flow__code {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--tone-7);
  font-family: var(--font-code); font-size: 12px; line-height: 16px; min-height: 29px; color: var(--tone-2); white-space: pre;
}
.flow__code.is-typing::after { content: "▍"; color: var(--lit); }

/* signal list */
.sig { margin: 4px 0 0; display: flex; flex-direction: column; }
.sig div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px dashed var(--tone-7); }
.sig dt { font-family: var(--font-code); font-size: 12px; line-height: 21px; color: var(--bg); white-space: nowrap; }
.sig dt::before { content: "› "; color: var(--lit); }
.sig dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tone-3); }
.sig .mono { color: var(--tone-1); font-size: 0.86em; }

/* score card */
.flow__step--score { border-color: var(--tone-6); }
.score { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.score__num { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); font-weight: 500; color: var(--bg); }
.score__num span { font-size: 72px; line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.score__num small { font-family: var(--font-code); font-weight: 400; font-size: 13px; color: var(--tone-4); }
.meter { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; height: 18px; }
.meter i { background: var(--tone-7); }
.meter i.on { background: var(--lit); }
.meter__scale { display: flex; justify-content: space-between; font-family: var(--font-code); font-size: 11px; color: var(--tone-5); }
.score__check {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--tone-7);
  display: flex; align-items: center; gap: 10px; font-family: var(--font-code); font-size: 12px; line-height: 1.4; color: var(--lit);
}
.score__tick {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px;
  background: var(--lit); color: var(--tone-9); font-size: 12px; font-weight: 500; line-height: 1;
}

/* connectors: pixel-dashed line + pixel chevron */
.flow__link {
  position: absolute; z-index: 1; top: 50%; left: 100%; width: var(--gap); height: 2px; margin-top: -1px;
  background: repeating-linear-gradient(to right, var(--line) 0 4px, transparent 4px 8px);
  transform-origin: left center;
}
.flow__link i {
  position: absolute; right: 2px; top: -1px; width: 2px; height: 2px; background: var(--lit);
  box-shadow: -2px -2px 0 var(--lit), -2px 2px 0 var(--lit), -4px -4px 0 var(--lit), -4px 4px 0 var(--lit);
}

/* the bus from the score down to the four outcomes */
.flow__bus { position: relative; height: 56px; }
.flow__drop, .flow__rail { position: absolute; background: var(--line); }
.flow__drop { /* down from the centre of the score card */
  right: calc((100% - 3 * var(--gap)) / 8 - 1px); top: 0; width: 2px; height: 100%;
  background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px);
  transform-origin: top center;
}
.flow__rail { /* across the four outcome centres */
  left: calc((100% - 3 * var(--gap)) / 8); right: calc((100% - 3 * var(--gap)) / 8);
  bottom: 0; height: 2px;
  background: repeating-linear-gradient(to left, var(--line) 0 4px, transparent 4px 8px);
  transform-origin: right center;
}

.flow__decide { position: relative; }
.flow__q {
  position: absolute; z-index: 2; left: 50%; top: 0; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 12px; padding: 10px 18px; white-space: nowrap;
  background: var(--tone-9); border: 1px solid var(--tone-6);
  font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; color: var(--bg);
}
.flow__q span { font-family: var(--font-code); font-size: 12px; letter-spacing: 0; color: var(--lit); }

.outs {
  list-style: none; margin: 0; padding: 48px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
}
.out {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 20px 24px 24px; border: 1px solid var(--tone-7); border-top: 2px solid var(--lit);
}
.out::before { /* tick down from the rail */
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 48px; margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px);
}
.out--stop { border-top-color: var(--stop-bright); }
.out--ask { border-top-color: var(--tone-3); }
.out__fig { display: flex; align-items: flex-end; gap: 4px; height: 60px; margin-bottom: 8px; }
.out__fig .sprite { width: 60px; }
.out__fig .sprite + .sprite { width: 52px; }
.out__who { font-family: var(--font-display); font-size: 20px; line-height: 1.25; color: var(--bg); }
.out__res { font-family: var(--font-code); font-size: 12px; color: var(--tone-2); }
.out__res::before { content: "→ "; }
.out__res--ok { color: var(--lit); }
.out__res--stop { color: var(--stop-bright); }
.out__p { font-size: 14px; line-height: 1.5; color: var(--tone-3); }
.out .mono { color: var(--tone-1); font-size: 0.86em; }
.out--buy::after { /* purchases drop into the expediente */
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 41px; margin-left: -1px;
  background: repeating-linear-gradient(to bottom, var(--lit) 0 4px, transparent 4px 8px);
}

.flow__file {
  margin-top: 40px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: 20px 24px; border: 1px solid var(--ok-bright); background: var(--tone-8);
  color: var(--tone-3); text-decoration: none; font-size: 15px; line-height: 1.5;
  transition: background .15s;
}
.flow__file:hover { background: var(--tone-7); }
.flow__file .sprite { width: 54px; }
.flow__file strong { font-weight: 500; color: var(--bg); }
.flow__file-go { font-family: var(--font-code); font-size: 12px; color: var(--lit); white-space: nowrap; }

/* scroll-in reveal: armed by JS only when motion is allowed */
.flow.is-armed .flow__step, .flow.is-armed .out, .flow.is-armed .flow__file, .flow.is-armed .flow__q {
  opacity: 0; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 160ms);
}
.flow.is-armed .flow__step, .flow.is-armed .out, .flow.is-armed .flow__file { transform: translateY(12px); }
.flow.is-armed .flow__q { transition-delay: 720ms; }
.flow.is-armed .flow__link { transform: scaleX(0); transition: transform .35s steps(6); transition-delay: calc(var(--i, 0) * 160ms + 260ms); }
.flow.is-armed .flow__drop { transform: scaleY(0); transition: transform .3s steps(5) 680ms; }
.flow.is-armed .flow__rail { transform: scaleX(0); transition: transform .45s steps(10) 820ms; }
.flow.is-armed .meter i.on { background: var(--tone-7); transition: background 0s; transition-delay: calc(560ms + var(--s) * 35ms); }
.flow.is-armed.is-in .flow__step, .flow.is-armed.is-in .out, .flow.is-armed.is-in .flow__file { opacity: 1; transform: none; }
.flow.is-armed.is-in .flow__q { opacity: 1; }
.flow.is-armed.is-in .flow__link, .flow.is-armed.is-in .flow__rail { transform: scaleX(1); }
.flow.is-armed.is-in .flow__drop { transform: scaleY(1); }
.flow.is-armed.is-in .meter i.on { background: var(--lit); }

/* ---------- responsive: vertical flow ---------- */
@media (max-width: 1080px) {
  .flow { --gap: 40px; }
  .flow__row { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .flow__link { top: 100%; left: 50%; width: 2px; height: var(--gap); margin: 0 0 0 -1px;
    background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px); transform-origin: top center; }
  .flow__link i { right: auto; left: 0; top: auto; bottom: 2px;
    box-shadow: -2px -2px 0 var(--lit), 2px -2px 0 var(--lit), -4px -4px 0 var(--lit), 4px -4px 0 var(--lit); }
  .flow.is-armed .flow__link { transform: scaleY(0); }
  .flow.is-armed.is-in .flow__link { transform: scaleY(1); }
  .flow__bus { height: 40px; }
  .flow__drop { right: auto; left: 50%; margin-left: -1px; }
  .flow__rail { display: none; }
  .flow__decide { max-width: 560px; margin-inline: auto; }
  .flow__q { position: relative; left: auto; top: auto; transform: none; justify-content: center; white-space: normal; }
  .outs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 16px; }
  .out::before, .out--buy::after { display: none; }
  .flow__file { max-width: 560px; margin: 16px auto 0; }
}
@media (max-width: 600px) {
  .flow { margin-top: var(--space-7); }
  .flow__step { padding: 20px; }
  .score__num span { font-size: 64px; }
  .outs { grid-template-columns: minmax(0, 1fr); }
  .out { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 16px; }
  .out__fig { grid-row: 1 / span 3; flex-direction: column; align-items: center; height: auto; margin: 0; }
  .out__fig .sprite, .out__fig .sprite + .sprite { width: 48px; }
  .flow__q { font-size: 20px; }
  .flow__file { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 16px; }
  .flow__file-go { grid-column: 2; }
  .flow__file .sprite { width: 42px; }
}