/* [CÓPIA] fonte: docs/rodada_faixa_fundador_2026-10-23/DO_JEAN_v3/faixa_fundador_v3.css (inteiro, §0–§7).
   Porte 23/10/2026 (sessão de porte): casca da prancha fora — o :root vira escopo .ff2/.ff2-viaja (não vaza pro tema claro do app, como o .pf-tela do Painel);
   §8 (.pf-topo/.ffp) é a prancha do Painel e não entra: o Painel real (css/painel_fundador.css) entra como está. */
/* ═══════════════════════════════════════════════════════════════════════
   faixa_fundador_v3.css — A FAIXA DO FUNDADOR · v3 · a escolha de Raphael (23/10): «6 · 12h grande» · Jean · 23/10/2026
   Peça nova, prefixo .ff2-. Só na conta do fundador. Carregar DEPOIS dos tokens do app; não depende da janela v2.
   O mostrador do dia: o brasão de 19/10 (geometria 160) com a EMENDA do RN às 12h grande; o anel de ponteiros é a escala do dia (6h→21h), o setor ouro é o que
   já passou até o agora, cada novidade é uma marca na hora em que aconteceu. Três números alinhados com tendência; a hora do dado no cabeçalho, em ouro.
   Sem fios: a novidade liga à palavra pelo ponto «mudou» no rótulo e pela FICHA embaixo (mini-relógio com a mesma marca · hora · o que foi).
   Chique pela LINHA: sem filtro, sem sombra, sem brilho, sem loop — nenhuma animação sem fim, inclusive no carregando.
   Um ouro só: o setor do agora + a hora do cabeçalho (o mesmo dado). O resto: champanhe gravado ou --text2.
   Movimento: chegada 380 (marca) + ficha 380@120 + conta 320 · passo do ponteiro 380 ease-out sem overshoot · viagem 440 cubic-bezier(.4,0,.2,1). prefers-reduced-motion = posição final.
   CASCA (não portar): o bloco :root — o app já declara os tokens.
   ═══════════════════════════════════════════════════════════════════════ */
.ff2,.ff2-viaja,.ff2-viaja-n{
  --fs-micro:11.5px;--fs-xs:13px;--fs-sm:14.5px;--fs-md:16px;--fs-lg:18px;--fs-xl:22px;
  --text:#F0EBE0;--text2:#C8BFB0;--text3:#b1a99a;
  --line:rgba(255,255,255,.08);--card-line-1:rgba(255,255,255,.18);--card-line-2:rgba(255,255,255,.28);
  --gold:#c9a227;--gold-hi:#e2c25e;--red:#f0616b;--purple:#9d5cff;
  --champ:236,214,170;
  --font-display:'Playfair Display',Georgia,serif;--font-ui:'Jost','Avenir Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);--ease-viagem:cubic-bezier(.4,0,.2,1);
  --topo-seguro:calc(env(safe-area-inset-top,0px) + 32px);
  --ff2-fs-num:24px;--ff2-fs-num-mac:30px;
}


/* ── 0 · a faixa é UM botão: toque em qualquer ponto abre o Painel (a faixa é a PORTA do Painel) ── */
.ff2{position:relative;z-index:1;display:block;width:100%;margin:0;padding:14px 16px;appearance:none;-webkit-appearance:none;border:1px solid transparent;border-radius:18px;
  background:linear-gradient(160deg,#141009,#0c0a07) padding-box,linear-gradient(150deg,rgba(var(--champ),.42),rgba(255,255,255,.2) 42%,rgba(255,255,255,.13)) border-box;
  color:var(--text);font:400 var(--fs-sm)/1.4 var(--font-ui);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;transition:background 160ms var(--ease)}
.ff2 *{box-sizing:border-box}
.ff2:active{background:linear-gradient(160deg,#171209,#0e0b07) padding-box,linear-gradient(150deg,rgba(var(--champ),.6),rgba(255,255,255,.28) 42%,rgba(255,255,255,.18)) border-box}
.ff2:focus-visible{outline:2px solid rgba(226,194,94,.75);outline-offset:3px}
.ff2 .i{display:block;flex:none;width:16px;height:16px}
.ff2-in{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto 108px;grid-auto-rows:auto;column-gap:16px;row-gap:14px;align-items:center}   /* a 3ª linha (fichas) só existe quando há novidade */
/* o cabeçalho: a voz pela hora (celular) ou o título (Mac) à esquerda · a hora do dado à direita, em ouro — é «agora», a hora de todos os números */
.ff2-hd{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:16px;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--text3);line-height:1.4;white-space:nowrap}
.ff2-voz{display:inline-flex;align-items:center;gap:6px;color:var(--text3)}
.ff2-hora{display:inline-flex;align-items:center;gap:6px;color:var(--text2);letter-spacing:.14em;padding-right:22px}
.ff2-hora b{font-weight:500;color:var(--gold);text-transform:none;letter-spacing:.06em}
.ff2-voz .i,.ff2-hora .i{width:13px;height:13px}
.ff2-chev{position:absolute;right:10px;top:11px;width:16px;height:16px;color:var(--text3)}
.ff2-chev svg{display:block;width:100%;height:100%}

/* ── 1 · o brasão: A·anel 160 de 19/10 (RN às 12h, emenda 23/10), gravado; o que acende é a mesma linha revelada ── */
.ff2-dial{position:relative;width:104px;height:104px;color:var(--gold)}
.ff2-dial svg{display:block;width:100%;height:100%;overflow:visible}
.ff2-dial .grav{opacity:.42}                                   /* gravado: traço e letra em --gold a .42 */
.ff2-dial .grav-champ{stroke:rgb(var(--champ));opacity:.3}     /* a escala em repouso: o que ainda vem do dia */
.ff2-dial .lit-ouro{color:var(--gold);opacity:1}               /* o setor do agora: ouro — o mesmo dado da hora no cabeçalho */
.ff2-dial .lit-champ{stroke:rgb(var(--champ));opacity:1}       /* setor em champanhe quando o dado é velho / sem rede: não é «agora» */
.ff2-dial .sinal{stroke:rgb(var(--champ));opacity:1}           /* marca de novidade na hora em que aconteceu — a mesma tinta do ponto «mudou» e do mini-relógio */
.ff2-dial .sinal.is-off{opacity:0}
.ff2-dial .sinal.is-novo{animation:ff2Sinal 380ms var(--ease) both}
@keyframes ff2Sinal{from{opacity:0}}

/* ── 2 · os números: coluna alinhada — nº serif tabular à direita · rótulo (ponto «mudou» quando há novidade) · tendência pequena ── */
.ff2-rows{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;min-width:0}
.ff2-row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;column-gap:8px;min-height:33px}
.ff2-row__t{display:flex;flex-direction:column;gap:1px;min-width:0;padding-top:4px}
.ff2-num{font:500 var(--ff2-fs-num)/1.1 var(--font-display);color:var(--text);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ff2-lb{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);line-height:1.25;color:var(--text2);white-space:nowrap}
.ff2-lb.is-mudou{color:var(--text);font-weight:500}             /* «mudou» = --text 500 + ponto champanhe 5 px (regra do janela_contexto_v2) */
.ff2-dot{display:inline-block;flex:none;width:5px;height:5px;border-radius:50%;background:rgb(var(--champ))}
.ff2-tr{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-xs);line-height:1.25;color:var(--text3);white-space:nowrap;font-variant-numeric:tabular-nums}
.ff2-tr .i{width:12px;height:12px}
.ff2-alerta{display:inline-flex;align-items:center;gap:7px;color:var(--red);font-size:var(--fs-md);font-weight:500;line-height:1.3;white-space:nowrap}
.ff2-alerta .i{width:18px;height:18px}
.ff2-row--alerta{grid-template-columns:minmax(0,1fr)}
.ff2-row--txt{grid-template-columns:auto minmax(0,1fr)}
.ff2-row--txt .ff2-num{font-size:var(--fs-lg)}   /* «R$ 2,4 mil» (prancha → Raphael) não cabe em 36 px: a coluna cede */
.ff2 [data-conta]{display:inline-block;min-width:1ch}

/* ── 3 · as FICHAS: uma por novidade — mini-relógio (a mesma marca, em miniatura) · hora · o que foi. Filete em cima. ── */
.ff2-fichas{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:-2px;padding-top:11px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--text2)}
.ff2-ficha{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:20px}
.ff2-ficha b{font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.ff2-mini{display:block;flex:none;width:14px;height:14px;color:var(--text3)}
.ff2-mini .d{fill:rgb(var(--champ))}
.ff2-ficha--ruim{color:var(--red)}
.ff2-ficha--ruim b{color:var(--red)}
.ff2-ficha--ruim .i{width:14px;height:14px}
.ff2-ficha.is-off{opacity:0}
.ff2-ficha.is-novo{animation:ff2Entra 380ms var(--ease) 120ms both}
@keyframes ff2Entra{from{opacity:0;transform:translateY(6px)}}

/* ── 4 · estados da leitura ── */
.ff2.is-carregando .ff2-num,.ff2.is-carregando .ff2-lb,.ff2.is-carregando .ff2-tr{color:var(--text3);opacity:.75}   /* carregando: estrutura no lugar, tinta a .75 (≥4,5:1 no chão), sem varredura */
.ff2.is-semrede,.ff2.is-velho{border:1px dashed rgba(255,255,255,.22);background:linear-gradient(160deg,#121009,#0c0a07)}
.ff2.is-semrede .ff2-hora b,.ff2.is-velho .ff2-hora b{color:var(--text2)}   /* dado velho: a hora não é «agora» — perde o ouro */

/* ── 5 · Mac (.ff2--mac): brasão 96 · os 3 números em células · fichas numa linha embaixo das células ── */
.ff2--mac{padding:16px 56px 16px 20px}
.ff2--mac .ff2-in{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 96px;column-gap:28px;row-gap:12px}
.ff2--mac .ff2-dial{width:96px;height:96px;align-self:start}
.ff2--mac .ff2-rows{flex-direction:row;justify-content:flex-start;align-items:center;gap:0}
.ff2--mac .ff2-row{display:flex;flex-direction:row;align-items:flex-start;gap:10px;min-width:220px;padding:0 28px;border-left:1px solid var(--line)}
.ff2--mac .ff2-row:first-child{border-left:0;padding-left:0}
.ff2--mac .ff2-row__t{padding-top:6px;gap:3px}
.ff2--mac .ff2-num{font-size:var(--ff2-fs-num-mac);min-width:40px}
.ff2--mac .ff2-lb{font-size:var(--fs-sm)}
.ff2--mac .ff2-hora{padding-right:0}
.ff2--mac .ff2-fichas{grid-column:2;margin-top:0;padding-top:10px;gap:6px 22px}
.ff2--mac .ff2-chev{top:50%;margin-top:-10px;right:-38px;width:20px;height:20px}

/* ── 6 · movimento reduzido: tudo já na posição final ── */
@media (prefers-reduced-motion:reduce){.ff2 .sinal.is-novo,.ff2 .ff2-ficha.is-novo{animation:none!important}.ff2-viaja,.ff2-viaja-n{transition:none!important}}
.ff2.reduz .sinal.is-novo,.ff2.reduz .ff2-ficha.is-novo{animation:none!important}
.reduz .ff2-viaja,.reduz .ff2-viaja-n{transition:none!important}

/* ── 7 · a viagem: brasão (FLIP 440) e número principal (24 → 56, vira o herói ouro do Painel) ── */
.ff2-viaja{position:absolute;z-index:40;width:32px;height:32px;color:var(--gold);pointer-events:none;transform-origin:0 0;transition:transform 440ms var(--ease-viagem)}
.ff2-viaja svg{display:block;width:100%;height:100%;overflow:visible}
.ff2-viaja .grav,.ff2-viaja .grav-champ,.ff2-viaja .lit-ouro,.ff2-viaja .lit-champ,.ff2-viaja .sinal{transition:opacity 440ms var(--ease-viagem),stroke 440ms var(--ease-viagem)}
.ff2-viaja.is-chegando .grav{opacity:1}
.ff2-viaja.is-chegando .grav-champ,.ff2-viaja.is-chegando .lit-ouro,.ff2-viaja.is-chegando .lit-champ,.ff2-viaja.is-chegando .sinal{opacity:0}   /* ao pousar, vira a marca ouro do Painel */
.ff2-viaja-n{position:absolute;z-index:41;pointer-events:none;transform-origin:0 0;font:500 var(--ff2-fs-num)/1 var(--font-display);color:var(--text);font-variant-numeric:tabular-nums;transition:transform 440ms var(--ease-viagem),color 440ms var(--ease-viagem)}
.ff2-viaja-n.is-chegando{color:var(--gold)}
.ff2.is-viajando .ff2-dial,.ff2.is-viajando .ff2-row--p .ff2-num{visibility:hidden}

/* ── casca do app (porte 23/10): a Home do Mac isola tudo com #rnp-hd * {box-sizing:content-box} e #rnp-hd button {font:inherit;color:inherit};
   o id ganharia do .ff2 do molde — aqui só se devolve o que o molde já declara ── */
#rnp-hd .ff2,#rnp-hd .ff2 *{box-sizing:border-box}
#rnp-hd .ff2{color:var(--text);font:400 var(--fs-sm)/1.4 var(--font-ui);cursor:pointer}