/* ═══════════════════════════════════════════════════════════════════════════
 * arke-flow.css — a camada da TRANSFORMAÇÃO. Só o que a /site/ecossistema/
 * archeflow inventa; todo o resto vem de arke-home / arke-arche / arke-fazemos.
 *
 * ⚠️ COR — duas fontes divergiam e a página concilia as duas:
 *   · o briefing do CET pede "roxo/violeta já associado ao FLOW";
 *   · o repo (lib/cores-arke.ts) tem archēFLOW em ÂMBAR #f59e0b, e o próprio
 *     arquivo marca essa cor como "PROVISÓRIA — confirmar com o CET".
 * Resolução: o VIOLETA é a identidade da camada (--accent, como pede o
 * briefing) e o ÂMBAR do repo vira a cor do PULSO — a energia do evento
 * atravessando a rede. Assim a onda brilha em âmbar sobre relações violeta, e
 * nenhuma das duas decisões foi jogada fora. Se o CET preferir uma só, é trocar
 * os tokens do bloco .tema-flow abaixo e a página inteira acompanha.
 *
 * O violeta escolhido (#A855F7) é deliberadamente mais magenta que o índigo do
 * archēON (#6366F1) para que ON e FLOW não se confundam na mesma barra de menu.
 *
 * ESTADOS DOS NÓS: usam os tokens semânticos que já existem em arke-tokens.css
 * (--success / --warning / --danger / --info). Nada de cor inventada.
 * ═══════════════════════════════════════════════════════════════════════════ */

.tema-flow {
  --accent:       #A855F7;      /* violeta — a camada da transformação */
  --accent-rgb:   168, 85, 247;
  --accent-hover: #C084FC;
  --accent-text:  #D8B4FE;

  --flw-pulso:     #F59E0B;     /* âmbar (cor do FLOW no repo) — o EVENTO viajando */
  --flw-pulso-rgb: 245, 158, 11;

  --flw-fundo:     #08050F;
  --flw-superficie:#0E0A18;
  --flw-tinta:     #EFE9F8;     /* texto claro levemente violáceo */
  --flw-tinta-2:   #A79CBD;
}

.tema-flow .ark-sec--surface { background: var(--flw-superficie); }
.tema-flow .ark-sec--deep, .tema-flow .ark-final { background: var(--flw-fundo); }
.tema-flow .faz-passo, .tema-flow .arq-qual > div, .tema-flow .ark-step { background: #0B0714; }

/* Vazamentos do tema dourado (mesma história das /archeme, /archeon) */
.tema-flow .tp-section-title-playfair span,
.tema-flow .st-hero-title i { color: var(--accent) !important; }
.tema-flow a:hover, .tema-flow .tp-line-white:hover, .tema-flow .tp-line-black:hover { color: var(--accent-hover) !important; }
.tema-flow .tp-btn-border-2.st { border-color: rgba(var(--accent-rgb),.55); color: #E4DAF6; }
.tema-flow .tp-btn-border-2.st:hover { background: var(--accent); border-color: var(--accent); color: #08050F; }
.tema-flow .st-hero-btn a { background-color: var(--accent); color: #08050F; }
.tema-flow .st-hero-btn a:hover { background-color: #F2ECFB; color: #0E0A18; }
.tema-flow .st-hero-btn a:hover .st-hero-btn-text { color: #0E0A18; }
.tema-flow .ark-lead { color: var(--flw-tinta-2); }
.tema-flow .ark-lead strong { color: var(--flw-tinta); }
.tema-flow .ark-center-claim, .tema-flow .ark-shout, .tema-flow .ark-final__q { color: var(--flw-tinta); }

/* ═══════════════════════════════════════════════════════════════════════════
   O FIO — a "onda única" que atravessa a página inteira.
   Não é decoração: o rótulo do trilho percorre a narrativa central do briefing
   (ESTADO → SINAL → OBSERVAÇÃO → … → NOVA OBSERVAÇÃO). Enquanto o visitante
   rola, ele está literalmente vendo UM fluxo sendo executado.
   ═══════════════════════════════════════════════════════════════════════════ */
.flw-fio {
  position: fixed; left: clamp(14px, 2vw, 30px); top: 18vh; height: 64vh; width: 22px;
  z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.flw-fio.is-on { opacity: 1; }
.flw-fio__trilho {
  position: absolute; left: 10px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(239,233,248,.13) 12%, rgba(239,233,248,.13) 88%, transparent);
}
.flw-fio__feito {
  position: absolute; left: 10px; top: 0; width: 1px; height: 0;
  background: linear-gradient(to bottom, rgba(var(--accent-rgb),.15), rgba(var(--accent-rgb),.75));
}
.flw-fio__ponto {
  position: absolute; left: 6.5px; top: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--flw-pulso);
  box-shadow: 0 0 0 4px rgba(var(--flw-pulso-rgb),.16), 0 0 18px 3px rgba(var(--flw-pulso-rgb),.55);
  transform: translateY(-50%);
}
.flw-fio__ponto::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(var(--flw-pulso-rgb),.5);
  animation: flwFioAnel 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes flwFioAnel { 0% { transform: scale(.7); opacity: .8; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
/* Sobre o manifesto (fundo claro) o fio se inverte: a onda continua a mesma,
   quem muda é o suporte. Sem isso ele vira um risco perdido no creme. */
.flw-fio--claro .flw-fio__trilho { background: linear-gradient(to bottom, transparent, rgba(20,16,28,.16) 12%, rgba(20,16,28,.16) 88%, transparent); }
.flw-fio--claro .flw-fio__feito { background: linear-gradient(to bottom, rgba(109,40,217,.25), rgba(109,40,217,.85)); }
.flw-fio--claro .flw-fio__ponto { background: #6D28D9; box-shadow: 0 0 0 4px rgba(109,40,217,.14); }
.flw-fio--claro .flw-fio__ponto::after { border-color: rgba(109,40,217,.45); }
.flw-fio--claro .flw-fio__k { color: #6B6478; }

.flw-fio__k {
  position: absolute; left: 22px; top: 0; transform: translateY(-50%);
  font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--accent-text); white-space: nowrap;
  writing-mode: vertical-rl; text-orientation: mixed;
  max-height: 46vh; overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   O NÓ — componente único, com os 9 estados do briefing. Toda a página usa
   este mesmo objeto: no grafo, no canvas, na cadeia mobile, na cascata.
   ═══════════════════════════════════════════════════════════════════════════ */
.flw-no {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 13px; border-radius: 6px;
  background: #100B1C; border: 1px solid rgba(239,233,248,.12);
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--flw-tinta-2);
  text-align: left; line-height: 1.25;
  transition: border-color .45s ease, color .45s ease, background .45s ease, transform .45s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
.flw-no__p {                                     /* o ponto de estado */
  position: relative; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(239,233,248,.26); transition: background .4s ease, box-shadow .4s ease;
}
.flw-no__anel {                                  /* 1 · PULSO DE NÓ */
  position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; border: 1.5px solid var(--flw-pulso);
  opacity: 0; pointer-events: none;
}
.flw-no.is-pulso .flw-no__anel { animation: flwAnel .85s cubic-bezier(.16,1,.3,1) 1; }
@keyframes flwAnel {
  0%   { transform: scale(.5); opacity: .95; }
  100% { transform: scale(6.5); opacity: 0; }
}
.flw-no__meta {
  display: block; margin-top: 3px; font-family: var(--font-mono, monospace);
  font-size: 9px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: #6E6486;
}
.flw-no__txt { min-width: 0; }

/* — os 9 ESTADOS. Nenhum depende só de cor: cada um muda ponto + borda + rótulo. */
.flw-no[data-estado="observed"]  { border-color: rgba(var(--accent-rgb),.42); color: var(--flw-tinta); }
.flw-no[data-estado="observed"]  .flw-no__p { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.16); }

.flw-no[data-estado="signal"]    { border-color: rgba(var(--flw-pulso-rgb),.55); color: var(--flw-tinta); }
.flw-no[data-estado="signal"]    .flw-no__p { background: var(--flw-pulso); box-shadow: 0 0 12px 2px rgba(var(--flw-pulso-rgb),.55); }

.flw-no[data-estado="waiting"]   { border-color: rgba(91,123,138,.42); }
.flw-no[data-estado="waiting"]   .flw-no__p { background: var(--info, #5B7B8A); animation: flwRespira 2.8s ease-in-out infinite; }

.flw-no[data-estado="running"]   { border-color: rgba(var(--accent-rgb),.6); color: var(--flw-tinta); background: rgba(var(--accent-rgb),.07); }
.flw-no[data-estado="running"]   .flw-no__p { background: var(--accent); animation: flwCorre 1.25s ease-in-out infinite; }

.flw-no[data-estado="human"]     { border-color: rgba(var(--flw-pulso-rgb),.6); color: var(--flw-tinta); }
.flw-no[data-estado="human"]     .flw-no__p { background: var(--flw-pulso); animation: flwPausa 2.2s steps(1, end) infinite; }

.flw-no[data-estado="completed"] { border-color: rgba(74,124,89,.5); color: var(--flw-tinta); }
.flw-no[data-estado="completed"] .flw-no__p { background: var(--success, #4A7C59); }

.flw-no[data-estado="failed"]    { border-color: rgba(139,58,58,.62); color: #E8CFCF; }
.flw-no[data-estado="failed"]    .flw-no__p { background: var(--danger, #8B3A3A); }

.flw-no[data-estado="skipped"]   { opacity: .34; }
.flw-no[data-estado="skipped"]   .flw-no__p { background: rgba(239,233,248,.2); }

@keyframes flwRespira { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes flwCorre   { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.5); } 50% { box-shadow: 0 0 0 5px rgba(var(--accent-rgb),0); } }
@keyframes flwPausa   { 0%,49% { opacity: 1; } 50%,100% { opacity: .2; } }

/* legenda dos estados — informação nunca só por cor */
.flw-legenda { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(30px, 3.4vw, 48px); }
.flw-legenda .flw-no { pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   A TEIA — grafo com propagação temporal (2 · PULSO DE ARESTA, 3 · ONDA DE REDE)
   O SVG é desenhado em pixels reais pelo JS, para o traço da onda não deformar.
   ═══════════════════════════════════════════════════════════════════════════ */
/* A altura do palco é dada por proporção, mas a proporção depende da LARGURA da
   coluna — num col-lg-6 a mesma razão vira um palco baixo demais e os nós se
   encavalam. Por isso três tamanhos: o padrão e o alto para largura cheia, e o
   denso para grafos que vivem em meia coluna. */
.flw-teia { position: relative; width: 100%; aspect-ratio: 16 / 6.2; min-height: 300px; }
.flw-teia--alta { aspect-ratio: 16 / 7.6; }
.flw-teia--densa { aspect-ratio: 16 / 11; }
.flw-teia::before {           /* campo: o grafo não flutua no vazio absoluto */
  content: ""; position: absolute; inset: -8% -3%; pointer-events: none;
  background: radial-gradient(54% 62% at 50% 50%, rgba(var(--accent-rgb),.055), transparent 72%);
}
.flw-teia__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flw-teia__l { stroke: rgba(239,233,248,.11); stroke-width: 1; fill: none; transition: stroke .5s ease; }
.flw-teia__l--fraca { stroke: rgba(239,233,248,.055); stroke-dasharray: 3 6; }
.flw-teia__l.is-viva { stroke: rgba(var(--accent-rgb),.38); }
.flw-teia__onda {                                 /* a faixa luminosa que percorre a relação */
  stroke: var(--flw-pulso); stroke-width: 1.7; fill: none; stroke-linecap: round;
  opacity: 0; filter: drop-shadow(0 0 5px rgba(var(--flw-pulso-rgb),.75));
}
.flw-teia__onda.is-indo { opacity: 1; }
.flw-teia .flw-no {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  z-index: 2; white-space: nowrap;
}
.flw-teia .flw-no.is-alvo { transform: translate(-50%, -50%) scale(1.045); }
.flw-teia__origem {                              /* rótulo "a gota" */
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  z-index: 1; width: 10px; height: 10px;
}

/* botão que dispara a onda */
.flw-gatilho {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 20px; border-radius: 999px; background: transparent;
  border: 1px solid rgba(var(--flw-pulso-rgb),.42); color: var(--flw-pulso);
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.flw-gatilho:hover { background: rgba(var(--flw-pulso-rgb),.1); border-color: var(--flw-pulso); }
.flw-gatilho i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.flw-gatilho[disabled] { opacity: .4; cursor: default; }
.flw-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: clamp(22px, 2.6vw, 34px); }
.flw-barra__k {
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: #6E6486;
}

/* cadeia mobile — a onda desce pelos cards, o conceito sobrevive sem grafo */
.flw-cadeia { display: none; }
.flw-cadeia__rail { position: relative; padding-left: 26px; display: grid; gap: 10px; }
.flw-cadeia__rail::before {
  content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(to bottom, rgba(var(--accent-rgb),.4), rgba(239,233,248,.08));
}
.flw-cadeia .flw-no { display: flex; width: 100%; }
.flw-cadeia .flw-no::before {
  content: ""; position: absolute; left: -23px; top: 50%; width: 15px; height: 1px;
  background: rgba(239,233,248,.14);
}

/* ═══ §1 · HERO — a gota cai e a teia nasce da INTERAÇÃO ═══════════════════ */
.flw-hero {
  position: relative; overflow: hidden; background: var(--flw-fundo);
  padding-block: clamp(120px, 14vh, 178px) clamp(60px, 7vh, 96px);
}
.flw-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(44% 52% at 18% 24%, rgba(168,85,247,.15), transparent 70%),
    radial-gradient(30% 38% at 84% 30%, rgba(245,158,11,.055), transparent 70%),
    radial-gradient(48% 56% at 54% 96%, rgba(124,58,237,.12), transparent 72%);
}
.flw-hero > .container { position: relative; z-index: 2; }
.flw-hero__mark {
  font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 500; letter-spacing: -.02em; color: var(--flw-tinta); margin: 0 0 clamp(16px, 2vw, 26px);
}
.flw-hero__t { margin: 0; font-size: clamp(31px, 5.4vw, 78px); font-weight: 800; line-height: .96; letter-spacing: -.035em; color: var(--flw-tinta); }
.flw-hero__t em {
  display: block; margin-top: .12em; font-style: italic; font-weight: 400;
  font-family: 'Playfair Display', Georgia, serif; color: var(--accent);
  font-size: .92em; line-height: 1.0;
}
.flw-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.4vw, 34px); margin-top: clamp(26px, 3vw, 42px); }

/* o palco da gênese: um nó só, e o convite */
.flw-genese { position: relative; width: 100%; aspect-ratio: 1 / .92; touch-action: manipulation; }
.flw-genese__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flw-genese .flw-no {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(.9);
  opacity: 0; z-index: 2; white-space: nowrap;
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.flw-genese .flw-no.is-vivo { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.flw-genese__obs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; display: grid; justify-items: center; gap: 12px; cursor: pointer;
}
.flw-genese__disco {
  position: relative; width: clamp(74px, 8vw, 104px); height: clamp(74px, 8vw, 104px); border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.04) 66%, transparent);
  border: 1px solid rgba(var(--accent-rgb),.44);
  transition: border-color .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.flw-genese__obs:hover .flw-genese__disco { border-color: var(--accent); transform: scale(1.05); }
.flw-genese__disco::before, .flw-genese__disco::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb),.36);
  animation: flwOnda 3.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.flw-genese__disco::after { animation-delay: 1.7s; }
@keyframes flwOnda { 0% { transform: scale(1); opacity: .8; } 80%,100% { transform: scale(2.5); opacity: 0; } }
.flw-genese__gota { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 20px 4px rgba(var(--accent-rgb),.5); }
.flw-genese__k {
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .19em;
  text-transform: uppercase; color: var(--accent-text); text-align: center;
}
.flw-genese__dica {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: #6E6486; white-space: nowrap;
  transition: opacity .5s ease;
}
.flw-genese.is-aceso .flw-genese__dica { opacity: 0; }

/* ═══ §2 · OBSERVAÇÃO ≠ EXECUÇÃO ══════════════════════════════════════════ */
.flw-obs { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px, 2.4vw, 34px); align-items: center; margin-top: clamp(38px, 4.4vw, 62px); }
.flw-obs__vs {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .2em;
  color: var(--flw-pulso); text-transform: uppercase; white-space: nowrap;
}
.flw-vibra { animation: flwVibra 3.2s ease-in-out infinite; }
@keyframes flwVibra {
  0%, 62%, 100% { transform: translateX(0); }
  66% { transform: translateX(-1.5px); }
  70% { transform: translateX(1.5px); }
  74% { transform: translateX(-1px); }
  78% { transform: translateX(1px); }
  82% { transform: translateX(0); }
}

/* ═══ §3 · AS ORIGENS — de onde uma diferença pode vir ════════════════════ */
.flw-origens { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: clamp(26px, 3vw, 42px) auto 0; max-width: 860px; }
.flw-origens span {
  padding: 8px 15px; border-radius: 999px; font-size: 12px; color: var(--flw-tinta-2);
  background: rgba(239,233,248,.03); border: 1px solid rgba(239,233,248,.1);
  transition: border-color .4s ease, color .4s ease, background .4s ease;
}
.flw-origens span:hover { border-color: rgba(var(--flw-pulso-rgb),.45); color: var(--flw-tinta); background: rgba(var(--flw-pulso-rgb),.06); }

/* ═══ §4 · O ESTADO — escadas de estado por tipo de entidade ══════════════ */
.flw-estados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(38px, 4.4vw, 62px); background: rgba(239,233,248,.08); border: 1px solid rgba(239,233,248,.08); }
.flw-estados > div { background: #0B0714; padding: clamp(20px, 2.2vw, 28px); }
.flw-estados b {
  display: block; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 15px;
}
.flw-estados ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: e; }
.flw-estados li {
  position: relative; padding: 9px 0 9px 22px; font-size: 13px; color: var(--flw-tinta-2);
  border-bottom: 1px dashed rgba(239,233,248,.07);
}
.flw-estados li:last-child { border-bottom: 0; color: var(--flw-tinta); }
.flw-estados li::before {
  content: ""; position: absolute; left: 3px; top: 15px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(239,233,248,.22);
}
.flw-estados li:last-child::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); }
.flw-estados li::after {
  content: ""; position: absolute; left: 5.5px; top: 21px; bottom: -3px; width: 1px; background: rgba(239,233,248,.1);
}
.flw-estados li:last-child::after { display: none; }

/* ═══ §5 · TRANSIÇÃO — A → evento → … → B, expansível ════════════════════ */
.flw-trans {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2.2vw, 30px);
  align-items: center; margin-top: clamp(38px, 4.4vw, 60px);
}
.flw-trans__meio { display: grid; justify-items: center; gap: 12px; }
.flw-trans__abrir {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; background: transparent;
  border: 1px solid rgba(var(--accent-rgb),.4); color: var(--accent-text);
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  transition: background .3s ease, border-color .3s ease;
}
.flw-trans__abrir:hover { background: rgba(var(--accent-rgb),.1); border-color: var(--accent); }
.flw-trans__abrir svg { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.flw-trans.is-aberta .flw-trans__abrir svg { transform: rotate(180deg); }
.flw-trans__dentro {
  grid-column: 1 / -1; display: grid; gap: 1px;
  background: rgba(239,233,248,.08); border: 1px solid rgba(239,233,248,.08);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .65s cubic-bezier(.16,1,.3,1), opacity .5s ease, margin .5s ease;
}
.flw-trans.is-aberta .flw-trans__dentro { max-height: 720px; opacity: 1; margin-top: clamp(18px, 2.2vw, 28px); }
.flw-trans__dentro > div {
  background: #0B0714; padding: clamp(15px, 1.7vw, 21px) clamp(18px, 2vw, 26px);
  display: grid; grid-template-columns: 108px 1fr; gap: 18px; align-items: baseline;
}
.flw-trans__dentro b {
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-text);
}
.flw-trans__dentro p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--flw-tinta-2); }
.flw-trans__dentro p strong { color: var(--flw-tinta); font-weight: 600; }

/* ═══ §8 · POR QUE ESTES TRÊS — motivos da propagação ════════════════════ */
.flw-porque { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(24px, 2.8vw, 36px); }
.flw-porque > div {
  padding: 17px 19px; border-radius: 6px; background: rgba(var(--flw-pulso-rgb),.05);
  border: 1px solid rgba(var(--flw-pulso-rgb),.24);
}
.flw-porque b { display: block; font-size: 13px; font-weight: 650; color: var(--flw-tinta); margin-bottom: 6px; }
.flw-porque span { font-size: 12.5px; line-height: 1.6; color: var(--flw-tinta-2); }
.flw-mudos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.flw-mudos span {
  padding: 6px 12px; border-radius: 999px; font-size: 11.5px; color: #6E6486;
  border: 1px dashed rgba(239,233,248,.14);
}

/* ═══ §12 · CONDIÇÕES — o vocabulário do "quando não se mover" ═══════════ */
.flw-cond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(38px, 4.4vw, 60px); background: rgba(239,233,248,.08); border: 1px solid rgba(239,233,248,.08); }
.flw-cond > div { background: #0B0714; padding: clamp(22px, 2.4vw, 32px); transition: background .4s ease; }
.flw-cond > div:hover { background: #120C1F; }
.flw-cond code {
  display: block; font-family: var(--font-mono, monospace); font-size: clamp(19px, 2vw, 26px);
  font-weight: 700; letter-spacing: .04em; color: var(--accent); margin-bottom: 11px; background: none; padding: 0;
}
.flw-cond b { display: block; font-size: 13.5px; font-weight: 650; color: var(--flw-tinta); margin-bottom: 7px; }
.flw-cond p { margin: 0; font-size: 12.5px; line-height: 1.62; color: var(--flw-tinta-2); }

/* ═══ §21 · TEMPO — quando a transformação acontece ══════════════════════ */
.flw-quando { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: clamp(38px, 4.4vw, 60px); }
.flw-quando > div {
  padding: 18px 19px; border-radius: 6px; background: #0B0714;
  border: 1px solid rgba(239,233,248,.1); border-left: 2px solid rgba(var(--accent-rgb),.5);
}
.flw-quando b { display: block; font-size: 13px; font-weight: 650; color: var(--flw-tinta); margin-bottom: 6px; }
.flw-quando span { font-size: 12px; line-height: 1.55; color: var(--flw-tinta-2); }

/* ═══ §25 · LOG DE EXECUÇÃO — a evidência que o fluxo deixa ═════════════ */
.flw-log { margin-top: clamp(34px, 4vw, 54px); border: 1px solid rgba(239,233,248,.1); background: #0B0714; }
.flw-log__cab {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid rgba(239,233,248,.1);
}
.flw-log__cab b { font-size: 13px; font-weight: 650; color: var(--flw-tinta); }
.flw-log__linha {
  display: grid; grid-template-columns: 76px 26px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 20px; border-bottom: 1px dashed rgba(239,233,248,.07);
}
.flw-log__linha:last-child { border-bottom: 0; }
.flw-log__h { font-family: var(--font-mono, monospace); font-size: 11px; color: #6E6486; letter-spacing: .04em; }
.flw-log__p { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin: 0 auto; }
.flw-log__linha--erro .flw-log__p { background: var(--danger, #8B3A3A); }
.flw-log__linha--humano .flw-log__p { background: var(--flw-pulso); }
.flw-log__t { font-size: 13px; color: var(--flw-tinta); }
.flw-log__q {
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: #6E6486; white-space: nowrap; min-width: 0;
}

/* §26 · os modos de falha. NÃO usar grid-template inline aqui: estilo inline
   ganha de media query e a grade travaria em 4 colunas no celular. */
.flw-erros { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.flw-erros > div { min-width: 0; }

/* ═══ §35 · O CANVAS DO FLOW — a tela do produto ════════════════════════ */
.flw-canvas {
  margin-top: clamp(38px, 4.4vw, 60px); border: 1px solid rgba(239,233,248,.12);
  background:
    linear-gradient(rgba(239,233,248,.022) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(239,233,248,.022) 1px, transparent 1px) 0 0 / 34px 100%,
    #0A0614;
}
.flw-canvas__cab {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid rgba(239,233,248,.1);
  background: rgba(14,10,24,.85);
}
.flw-canvas__nome { font-size: 13px; font-weight: 650; color: var(--flw-tinta); }
.flw-canvas__palco { position: relative; padding: clamp(26px, 3.4vw, 46px) clamp(18px, 2.6vw, 40px); }
.flw-canvas__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flw-canvas__trilhas { position: relative; z-index: 2; display: grid; gap: clamp(16px, 2vw, 26px); }
.flw-canvas__trilha { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.4vw, 18px); }
.flw-canvas__seta { flex: 0 0 auto; color: rgba(239,233,248,.2); }
.flw-canvas .flw-no { flex: 0 0 auto; }
.flw-canvas__ramo { display: grid; gap: 10px; }
.flw-tipo {
  font-family: var(--font-mono, monospace); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #6E6486; display: block; margin-bottom: 5px;
}

/* ═══ §36 · SIMULAÇÃO — marcada como possibilidade, não entrega ═════════ */
.flw-futuro {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--flw-pulso); background: rgba(var(--flw-pulso-rgb),.09); border: 1px dashed rgba(var(--flw-pulso-rgb),.45);
}
.flw-sim { margin-top: clamp(30px, 3.4vw, 46px); border: 1px dashed rgba(var(--flw-pulso-rgb),.3); background: rgba(var(--flw-pulso-rgb),.028); padding: clamp(24px, 3vw, 38px); }
.flw-sim__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 22px; }
.flw-sim__grid > div { padding: 15px 16px; border-radius: 6px; background: rgba(10,6,20,.6); border: 1px solid rgba(239,233,248,.1); }
.flw-sim__grid b { display: block; font-family: var(--font-mono, monospace); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #6E6486; margin-bottom: 8px; }
.flw-sim__grid span { font-size: 12.5px; line-height: 1.55; color: var(--flw-tinta-2); }

/* ═══ §31 · O EFEITO DA INTERAÇÃO — quase sem texto ════════════════════ */
.flw-toque { position: relative; overflow: hidden; background: var(--flw-fundo); padding-block: clamp(90px, 11vw, 156px); text-align: center; }
.flw-toque__conv {
  font-size: clamp(26px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.02; color: var(--flw-tinta); margin: 0 0 clamp(30px, 3.6vw, 50px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.flw-toque.is-feito .flw-toque__conv { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.flw-toque__depois {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, 14px);
  width: min(92vw, 760px); opacity: 0; pointer-events: none;
  transition: opacity .8s ease .25s, transform .8s cubic-bezier(.16,1,.3,1) .25s;
}
.flw-toque.is-feito .flw-toque__depois { opacity: 1; transform: translate(-50%, 0); }
.flw-toque__cabeca { position: relative; min-height: clamp(120px, 15vw, 190px); }
.flw-toque__grande {
  font-size: clamp(26px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.02; color: var(--flw-tinta); margin: 0;
}
.flw-toque__grande em { font-style: italic; font-weight: 400; font-family: 'Playfair Display', Georgia, serif; color: var(--accent); }
.flw-toque__peq { margin: 18px 0 0; font-size: 14px; color: var(--flw-tinta-2); }
.flw-toque__peq b { color: var(--flw-tinta); font-weight: 600; }

/* ═══ §32 · NOTA EDITORIAL — o que "vibrar" significa aqui ═════════════ */
.flw-nota {
  margin-top: clamp(40px, 4.6vw, 64px);
  border-left: 2px solid rgba(var(--accent-rgb),.5); padding: clamp(22px, 2.6vw, 34px) clamp(24px, 2.8vw, 40px);
  background: rgba(239,233,248,.022);
}
.flw-nota__k {
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 14px;
}
.flw-nota__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.6vw, 44px); }
.flw-nota h4 { font-size: 12.5px; font-weight: 650; color: var(--flw-tinta); margin: 0 0 10px; letter-spacing: .02em; }
.flw-nota ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.flw-nota li { position: relative; padding-left: 17px; font-size: 13px; line-height: 1.6; color: var(--flw-tinta-2); }
.flw-nota li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 1px; background: rgba(var(--accent-rgb),.6); }
.flw-nota--nao li::before { background: rgba(139,58,58,.7); }
.flw-nota p { margin: 16px 0 0; font-size: 13px; line-height: 1.7; color: var(--flw-tinta-2); }

/* ═══ §43 · MANIFESTO — quebra o escuro ═══════════════════════════════ */
.flw-manifesto {
  background: #F2EFE9; color: #14101C;
  padding-block: clamp(96px, 12vw, 170px); text-align: center;
}
.flw-manifesto p {
  margin: 0 auto; max-width: 15ch;
  font-size: clamp(34px, 6.2vw, 92px); font-weight: 800; line-height: .95; letter-spacing: -.04em;
  color: #14101C;
}
.flw-manifesto p + p { margin-top: clamp(34px, 4.4vw, 66px); }
.flw-manifesto p em { font-style: italic; font-weight: 400; font-family: 'Playfair Display', Georgia, serif; color: #6D28D9; }
.flw-manifesto__ass {
  margin-top: clamp(44px, 5.4vw, 78px); display: grid; gap: 8px; justify-items: center;
}
.flw-manifesto__ass b { font-size: clamp(17px, 1.8vw, 23px); font-weight: 700; letter-spacing: -.01em; color: #14101C; }
.flw-manifesto__ass span {
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #6B6478;
}

/* ═══ §44 · A GRANDE FRASE ═══════════════════════════════════════════ */
.flw-grande { background: var(--flw-fundo); padding-block: clamp(88px, 11vw, 158px); }
.flw-grande p {
  margin: 0 auto; max-width: 20ch; text-align: center;
  font-size: clamp(27px, 4.4vw, 62px); font-weight: 800; line-height: 1.0; letter-spacing: -.035em;
  color: var(--flw-tinta);
}
.flw-grande p + p { margin-top: clamp(70px, 9vw, 138px); }
.flw-grande p em { font-style: italic; font-weight: 400; font-family: 'Playfair Display', Georgia, serif; color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1399px) {
  .flw-fio { left: 10px; }
  .flw-fio__k { display: none; }
}
@media (max-width: 1199px) {
  .flw-estados { grid-template-columns: repeat(2, 1fr); }
  .flw-quando { grid-template-columns: repeat(2, 1fr); }
  .flw-sim__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .flw-fio { display: none; }
  .flw-teia, .flw-genese { display: none; }
  .flw-cadeia { display: block; }
  .flw-obs { grid-template-columns: 1fr; text-align: left; }
  .flw-obs__vs { justify-self: start; }
  .flw-trans { grid-template-columns: 1fr; }
  .flw-trans__dentro > div { grid-template-columns: 1fr; gap: 7px; }
  .flw-cond { grid-template-columns: 1fr 1fr; }
  .flw-porque { grid-template-columns: 1fr; }
  .flw-canvas__trilha { flex-direction: column; align-items: stretch; }
  .flw-canvas__seta { transform: rotate(90deg); align-self: center; }
  .flw-canvas .flw-no { width: 100%; }
  .flw-log__linha { grid-template-columns: 60px 18px minmax(0, 1fr); row-gap: 4px; }
  .flw-log__t, .flw-log__q { grid-column: 3; justify-self: start; }
  .flw-log__q { white-space: normal; }
  .flw-erros { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .flw-estados { grid-template-columns: 1fr; }
  .flw-quando { grid-template-columns: 1fr; }
  .flw-cond { grid-template-columns: 1fr; }
  .flw-sim__grid { grid-template-columns: 1fr; }
  .flw-nota__cols { grid-template-columns: 1fr; }
  .flw-erros { grid-template-columns: 1fr; }
  .flw-hero__t { font-size: clamp(29px, 8.4vw, 46px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACESSIBILIDADE — sem movimento, a compreensão continua inteira.
   A onda vira mudança discreta de estado; nada de informação se perde.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .flw-fio { display: none; }
  .flw-no, .flw-no__p, .flw-no__anel,
  .flw-genese .flw-no, .flw-genese__disco::before, .flw-genese__disco::after,
  .flw-fio__ponto::after, .flw-vibra {
    animation: none !important; transition: none !important;
  }
  .flw-genese .flw-no { opacity: 1; transform: translate(-50%, -50%); }
  .flw-teia__onda { display: none; }
  .flw-toque__conv, .flw-toque__depois { transition: none !important; }
  .flw-trans__dentro { transition: none !important; }
}