/* ============================================================================
GRAVIDADE ZERO · ORGANOGRAMA — ESTILO DO APP
----------------------------------------------------------------------------
Tudo aqui é derivado da Diretriz Gzero (css/tokens.css). Esta peça vive
inteiramente no MODO B — NEON ESCURO ("o palco"): fundo escuro profundo,
Rosa Spray liderando, glow permitido só sobre o preto.
Acentos de setor: SÓ a família da marca (magenta → rosa → violeta → coral).
Sem verde e sem amarelo — eles brigavam com o magenta da identidade.
Contenção: o neon é destaque e interação, não ambiente. O brilho existe em
dose pontual (acento do setor, foco, hover) e nunca no texto de leitura.
========================================================================== */
/* ---------- FONTES LOCAIS (offline — sem chamada de rede) ----------------- */
@font-face{
font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;
font-display:swap;src:url("../fontes/AtkinsonHyperlegible-Regular.woff2") format("woff2");
}
@font-face{
font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;
font-display:swap;src:url("../fontes/AtkinsonHyperlegible-Bold.woff2") format("woff2");
}
@font-face{
font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;
font-display:swap;src:url("../fontes/AtkinsonHyperlegible-Italic.woff2") format("woff2");
}
@font-face{
font-family:"Tanker";font-style:normal;font-weight:400;
font-display:swap;src:url("../fontes/Tanker.woff2") format("woff2");
}
@font-face{
font-family:"Hepta Slab";font-style:normal;font-weight:200 900;
font-display:swap;src:url("../fontes/HeptaSlab.woff2") format("woff2");
}
/* A "Salted" ficou DECLARADA AQUI SEM NUNCA TER DESENHADO UM GLIFO — e o
diagnóstico está no próprio arquivo: fontes/Salted-Regular.ttf é um sfnt de
flavor Apple (0x74727565, "true") com 8 tabelas — OS/2, glyf, head, hhea,
hmtx, loca, maxp, name — e SEM cmap e SEM post. É um subset de exportação:
tem os contornos, não tem o índice. Sem cmap não existe mapeamento
caractere→glifo, então o navegador baixa os 49.871 bytes, não acha o que
desenhar e descarta a face. Medido no console: document.fonts reportava
"Salted:error" e a .assinatura "com amor & spray rosa" caía calada no
fallback Bradley Hand/cursive — a voz manuscrita da marca nunca apareceu.
O substituto oficial da Diretriz é a Shantell Sans. Ela é VARIÁVEL (o .woff2
traz fvar/gvar/STAT), por isso `font-weight:300 800` como FAIXA: cravar 400
travaria o eixo numa instância só e jogaria fora a razão de existir de uma
variável. O .ttf morto continua no disco de propósito — deletar arquivo é
outra conversa; parar de declará-lo já mata o bug. */
@font-face{
font-family:"Shantell Sans";font-style:normal;font-weight:300 800;
font-display:swap;src:url("../fontes/ShantellSans.woff2") format("woff2");
}
@font-face{
font-family:"Home Video";font-style:normal;font-weight:400;
font-display:swap;src:url("../fontes/VT323.woff2") format("woff2");
}
/* ---------- APP TOKENS (força Modo B + derivados locais) ------------------ */
:root{
/* Trava o app no palco neon, independente do tema do sistema. */
color-scheme: dark;
/* --- Acentos de setor — família da marca, Diretriz Gzero §2.1/§2.2 ------
magenta → rosa → violeta → coral. Nenhum verde, nenhum amarelo.
A regra "não encostar Rosa Spray em Roxo Realce" continua respeitada, mas
POR OUTRO MECANISMO — o antigo ("cada acento vive no seu bloco de coluna")
morreu com os grupos. Agora os setores estão intercalados no anel e a
vizinhança magenta↔violeta acontece de fato três vezes (índices 2→3, 5→6,
8→9 de GZ_DADOS.pessoas). Verificado antes de escrever isto:
· Os dois acentos NUNCA se tocam, porque nenhum dos dois é campo chapado.
Cada um é uma marca pequena — a barra de .pc-acento e o texto da
etiqueta .pc-setor — dentro de um card cujo fundo é rgba(6,5,9,.92),
quase opaco. O que encosta em roxo não é rosa: é preto.
· Entre as bordas de dois vizinhos sobram 14,6px de palco: a corda vale
2·440·sen(13,85°) = 210,6px entre centros, menos os 196px de card.
· O único elemento capaz de atravessar esses 14,6px é o glow de
.pc-behind, que tem blur de 38px. Ele NÃO atravessa porque quase nunca
está aceso: --card-opacity nasce 0 em css/profile-card.css e só sobe no
card frontal (.62, via .cc-front) ou sob o cursor/foco (1). Ou seja, no
máximo UM glow por vez — dois vizinhos jamais acendem juntos.
NÃO existe contorno branco entre eles, e não precisa existir: .pc-card não
tem border nenhuma. A separação aqui é por vazio escuro, não por filete.
Se um dia o raio do anel encolher, é este vão de 14,6px que some primeiro,
e aí sim os glows passam a poder se somar — reveja este bloco antes. */
--set-lideranca: #EC008C; /* Rosa Spray · magenta · assinatura, lidera */
--set-inovacao: #FCDFEB; /* Rosa Névoa · rosa · "tela de sistema" */
--set-design: #9643FC; /* Roxo Realce · violeta · secundário universal */
--set-financeiro: #E84838; /* Brasa · coral · pop pontual */
/* Rótulo derivado de cada setor — hex fixo, não color-mix (roda de file://
e a razão de contraste fica auditável no token). Medidos sobre o vidro
forte no pior fundo composto da página. */
/* Razões medidas no pior caso duro: o pixel MAIS CLARO do céu, com o
escurecimento no mínimo e SEM contar o borrão do backdrop-filter. */
--rot-lideranca: #F147AC; /* 5.06:1 */
--rot-inovacao: #FCDFEB; /* 10.97:1 */
--rot-design: #B378FD; /* 4.56:1 */
--rot-financeiro: #EE7B70; /* 5.00:1 — era #EB6254, que dava 4.16 e reprovava */
/* --- Superfície de vidro -----------------------------------------------
Opaca o bastante para o texto atingir AA sobre QUALQUER região do céu
noturno atrás — inclusive a mais clara.
ATENÇÃO, MUDOU O STATUS DESTES QUATRO: eles FICARAM SEM CONSUMIDOR nesta
fase. Quem os lia era a pílula .setor-node, que morreu com os grupos; o
card nunca os leu — .pc-card tem fundo próprio (rgba(6,5,9,.92)) e nem
border tem. A frase antiga dizia "o que muda entre níveis é a intensidade"
e era sobre card vs. pílula: não há mais nem níveis nem pílula.
Ficam declarados de propósito, e não por esquecimento: a razão de
contraste medida de --rot-* foi apurada SOBRE --vidro-bg-forte, e
css/profile-card.css cita esse valor por nome ao justificar as razões da
etiqueta. Apagar os tokens tornaria aquela medição impossível de auditar.
Se um dia forem removidos, remova a citação junto. */
--vidro-bg: rgba(10, 8, 13, 0.76);
--vidro-bg-forte: rgba(13, 10, 17, 0.84);
--vidro-borda: rgba(255,255,255,0.13);
--vidro-blur: 16px;
/* --- Texto: TODOS acima de 4.5:1 no estado de repouso -------------------
Pior caso medido: vidro sobre a região mais clara do fundo.
--tx-muted ≈ 12:1 · --tx-dim ≈ 9:1 — legível sem depender de hover. */
--tx: #FFFFFF;
--tx-muted: #DAD5DE;
--tx-dim: #C0B9C6;
--hairline: rgba(255,255,255,0.11);
/* --- Curvas de animação ------------------------------------------------ */
--ease-out: cubic-bezier(.16,.84,.28,1);
--ease-io: cubic-bezier(.65,0,.35,1);
--ease-mergulho: cubic-bezier(.7,0,.2,1); /* push-in: acelera e assenta */
/* --- Escala do grid (base-8 da Diretriz, §4.3) --------------------------
ESTE BLOCO FICOU VAZIO, e o registro do que saiu é o que importa. Foram
nove tokens, em três lotes:
1) --card-membro-w:160px / --card-lider-w:196px. Eram a hierarquia por
TAMANHO. Apagá-los NÃO MUDA UM PIXEL, e isso é medido: com a viewport
estreita o :root reportava --card-lider-w:160px enquanto o card
computava 196px, porque `.cc-slot > .card{width:100%}` (injetado por
js/carrossel.js, especificidade 0-2-0) sempre venceu
`.card--lider{width:var(…)}` (0-1-0). Quem dimensionava de verdade era
o preset do carrossel, nunca este token. A largura ÚNICA de 196px mora
agora em GZ_CILINDRO.larguraCard, em js/dados.js — aqui é limpeza
honesta, não a correção do tamanho único.
2) --pill-w / --pill-h. Só a pílula .setor-node os lia, e a pílula morreu
com os grupos: o setor virou cor de acento + etiqueta DENTRO do card.
3) --gap-membro, --gap-setor, --vao-hierarquia, --vao-colunas, --eixo-h.
Os três primeiros já estavam declarados e NUNCA referenciados (grep
zero) — o terceiro se chamava literalmente "vão-hierarquia". Os dois
últimos mediam o vão entre as duas colunas e a fileira do eixo
luminoso: duas coisas que deixaram de existir junto com os grupos. */
}
/* Sem backdrop-filter o borrão some e uma estrela crua do céu encosta no
glifo. O vidro quase opaco devolve o piso de contraste nesse ramo.
(Hoje isto só endurece os tokens acima, que ficaram sem consumidor junto com
a pílula — ver o bloco --vidro-*. Fica porque volta a valer no instante em
que qualquer superfície de vidro reaparecer, e porque custa zero.) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
:root{
--vidro-bg: rgba(10, 8, 13, 0.90);
--vidro-bg-forte: rgba(13, 10, 17, 0.94);
}
}
/* ---------- RESET LEVE ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family: var(--gz-font-corpo);
color: var(--tx);
background: var(--gz-preto-palco); /* fallback total se a imagem falhar */
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--gz-rosa-spray); outline-offset:3px; border-radius:4px; }
/* FORA DA TELA, DENTRO DA ÁRVORE DE ACESSIBILIDADE. É a região viva do produto
(js/anuncio.js) que mora aqui: o texto que ela recebe é anunciado por leitor
de tela e não pode aparecer para o olho nem empurrar um pixel do layout.
`display:none` e `visibility:hidden` NÃO servem — os dois tiram o nó da
árvore de acessibilidade, e a região passaria a receber texto que ninguém
ouve, com a tela idêntica. É a mesma técnica (e o mesmo motivo) do
`.cbx__input` do popover de área, em css/componentes.css.
SOBRE O `fixed`, COM HONESTIDADE: ele NÃO é o que impede a região de somar
altura ou largura — quem faz isso é sair do fluxo, e `absolute` sai igual.
A/B medido no produto, com a região carregando texto (inclusive um de 400
caracteres) e com a página rolada: `fixed` e `absolute` dão os MESMOS números
em 1280 e em 375 — `scrollWidth`/`scrollHeight` do documento inalterados,
caixa 1×1, topo em −1px nos dois. O `fixed` fica porque não depende de
ancestral posicionado: a região é filha do `` hoje, e se um dia for
parar dentro de um contêiner com `position`, o `absolute` passaria a ser
medido a partir dele. */
.oculto-visual{
position:fixed; top:0; left:0;
width:1px; height:1px;
margin:-1px; padding:0; border:0;
clip:rect(0 0 0 0); clip-path:inset(50%);
overflow:hidden; white-space:nowrap;
}
/* ============================================================================
PLANO DE FUNDO — camadas com parallax
Fallback em gradiente escuro sempre presente; a imagem entra por cima e
é ANCORADA (não esticada/borrada). Grão + vignette + realce magenta.
========================================================================== */
.fundo{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* Camada 0 — gradiente de segurança (fallback se a imagem não carregar).
Levantado do quase-preto para um violeta-noite: o pedido foi "menos escuro e
com mais vida". Continua Modo B (escuro o bastante para o neon dos cards
liderar), mas o palco deixa de ler como um vazio preto. */
.fundo__base{
position:absolute; inset:0;
background:
radial-gradient(130% 95% at 50% -8%,
#2b1a54 0%, #1a1140 34%, #0e0a26 66%, #080614 100%),
var(--gz-preto-palco);
}
/* Camada 1 — céu noturno NÍTIDO, ancorado ao topo, cobrindo por largura. */
.fundo__ceu{
position:absolute; inset:-4%;
background-image:var(--bg-ceu, none);
background-size:cover;
background-position:50% 12%;
background-repeat:no-repeat;
will-change:transform;
}
/* Camada 2 — poeira/névoa intermediária (parallax médio). Brilhos de cor mais
presentes (violeta, magenta e um respingo de teal) e uma deriva lenta de
matiz para o fundo respirar em vez de ficar parado. */
.fundo__nevoa{
position:absolute; inset:-8%;
background:
radial-gradient(42% 32% at 20% 26%, rgba(150,67,252,.20), transparent 70%),
radial-gradient(46% 36% at 82% 60%, rgba(236,0,140,.16), transparent 72%),
radial-gradient(40% 30% at 62% 90%, rgba(0,170,179,.10), transparent 74%);
will-change:transform;
animation:auroraDrift 26s var(--ease-io) infinite alternate;
}
/* só opacidade/matiz — não toca o transform, que é do parallax */
@keyframes auroraDrift{
from{ opacity:.82; filter:hue-rotate(-8deg); }
to{ opacity:1; filter:hue-rotate(10deg); }
}
/* Camada 3 — partículas frontais (geradas em JS: pontos flutuantes) */
.fundo__particulas{ position:absolute; inset:-10%; will-change:transform; }
.fundo__particulas i{
position:absolute; width:2px; height:2px; border-radius:50%;
background:var(--pc,#fff); opacity:var(--o,.6);
box-shadow:0 0 6px var(--pcg, rgba(255,255,255,.5));
animation: cintila var(--dur,6s) var(--ease-io) infinite alternate;
animation-delay:var(--delay,0s);
}
@keyframes cintila{ from{opacity:.14;} to{opacity:var(--o,.7);} }
/* Camada 4 — escurecimento p/ contraste + realce de cor nas altas-luzes.
O escurecimento de baixo foi aliviado (ia até .76, agora .56) para o palco
não afundar no preto, e ganhou um brilho violeta no piso + magenta mais forte
no topo — é o que traz "vida" sem tirar a legibilidade dos cards de vidro. */
.fundo__trato{
position:absolute; inset:0;
background:
radial-gradient(95% 58% at 50% 4%, rgba(236,0,140,.18), transparent 62%),
radial-gradient(72% 50% at 50% 104%, rgba(150,67,252,.14), transparent 72%),
linear-gradient(180deg, rgba(8,6,16,.14) 0%, rgba(8,6,16,.32) 48%, rgba(6,5,12,.56) 100%);
}
/* Camada 5 — vignette nas bordas */
.fundo__vignette{
position:absolute; inset:0;
background:radial-gradient(120% 100% at 50% 45%, transparent 56%, rgba(0,0,0,.58) 100%);
}
/* Camada 6 — grão sutil contra banding (SVG data-uri, sem rede) */
.fundo__grao{
position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8, (ver index.html). Estas quatro linhas de reset são o
que faz um botão parar de parecer botão: sem elas ele herda fundo, borda e
font-family do agente do usuário e a marca aparece numa caixinha cinza. */
.lockup{
font-family:var(--gz-font-display);
letter-spacing:.06em; font-size:1.22rem; line-height:1;
color:var(--tx);
background:none; border:none; padding:0; margin:0;
cursor:pointer;
transition:color .25s var(--ease-out), text-shadow .25s var(--ease-out);
}
.lockup b{
color:var(--gz-rosa-spray); text-shadow:0 0 10px rgba(236,0,140,.5);
transition:text-shadow .25s var(--ease-out);
}
/* AFFORDANCE: sem ela ninguém descobre que é clicável. O aceso é no G — o
glifo que já é o device de marca —, então o hover reforça a identidade em
vez de inventar um estado novo. */
.lockup:hover, .lockup:focus-visible{ color:#fff; }
.lockup:hover b, .lockup:focus-visible b{ text-shadow:0 0 18px rgba(236,0,140,.95); }
.lockup:focus-visible{ outline:2px solid var(--gz-rosa-spray); outline-offset:6px; border-radius:4px; }
.lockup:active{ transform:translateY(1px); }
.versao{
font-family:var(--gz-font-codigo);
font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--tx-dim);
}
/* ---------- BLOCO DE TÍTULO — compacto ----------------------------------- */
.titulo-bloco{
flex:0 0 auto;
text-align:center;
padding:14px var(--gz-space-lg) 8px;
}
/* A cor mudou JUNTO com o conserto da fonte, e por causa dele. Enquanto a
"Salted" caía em Bradley Hand ninguém olhava para o contraste; com a
Shantell Sans finalmente carregando, a assinatura vira texto de verdade — e
texto de verdade a .95rem, sobre a FOTO DO CÉU (sem vidro, sem véu, sem
backdrop-filter atrás), não pode ficar em #EC008C: o teto medido do Rosa
Spray é 4,72:1 sobre #080808, e sobre o pixel mais claro do céu cai abaixo
disso. A casa já tinha resolvido esse caso quando o magenta vira corpo
pequeno: ele vira #F147AC, o --rot-lideranca, medido em 5,06:1 no mesmo
pior caso. Reusar o token em vez de inventar um rosa novo mantém o matiz da
liderança e a razão auditável num lugar só. O glow rosa fica: ele é do
Modo B e não é o que se lê. */
.assinatura{
font-family:var(--gz-font-lettering);
color:var(--rot-lideranca);
font-size:1.15rem; line-height:1;
text-shadow:0 0 10px rgba(236,0,140,.38);
transform:rotate(-2.2deg);
}
.titulo{
font-family:var(--gz-font-display);
font-size:clamp(2rem, 3.9vw, 3.2rem);
letter-spacing:.05em; margin:.14em 0 .16em;
color:var(--tx); line-height:1;
text-shadow:0 0 1px rgba(255,255,255,.35);
}
.titulo .o{ color:var(--gz-rosa-spray); text-shadow:0 0 12px rgba(236,0,140,.6); }
.contagem{
font-family:var(--gz-font-slab);
font-weight:200; letter-spacing:.2em; text-transform:uppercase;
font-size:.8rem; color:var(--tx-muted);
}
.contagem b{ color:var(--tx); font-weight:700; }
/* A LEGENDA cor ↔ setor foi removida, e o argumento original ("cada coluna já
traz o nome do setor na pílula") morreu junto com as colunas e com a
pílula. O motivo NOVO é melhor: o nome do setor por extenso passou para
dentro do próprio card, como etiqueta acima do nome (.pc-setor, em
css/profile-card.css). Legenda é um índice que o olho tem que percorrer de
volta; etiqueta é a informação onde ela é lida. A faixa que a legenda
ocupava continua sendo altura que a árvore ganhou. */
/* ============================================================================
ORGANOGRAMA — árvore
========================================================================== */
.arvore{
position:relative;
flex:1 1 auto; min-height:0;
padding:0 var(--gz-space-2xl) var(--gz-space-md);
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
/* Conteúdo escalável (o pool inteiro, num bloco só) — o fit-scale (JS) reduz
este bloco INTEIRO para caber na LARGURA e na ALTURA, sem rolagem.
Não diz mais "liderança + setores" porque não há mais liderança separada de
setor: é um conjunto só de pessoas. */
.arvore-conteudo{
display:flex; flex-direction:column; align-items:center;
transform-origin:top center;
will-change:transform;
}
/* ============================================================================
O POOL — um conjunto só. Sem faixa, sem colunas, sem eixo.
----------------------------------------------------------------------------
Não existe grid aqui DE PROPÓSITO: o grid era exatamente onde a versão
anterior codificava "quem está acima de quem". Ele dizia, em três linhas de
CSS, tudo o que os chefes rejeitaram:
grid-template-areas: "topo topo" ← a liderança, largura inteira
"eixo eixo" ← a fileira do diagrama
"esq dir"; ← os subordinados, embaixo
Um pool não tem áreas: tem um palco, centrado. Quem estabelece relação entre
as pessoas agora é a adjacência no anel (js/dados.js define a ordem, e ela é
intercalada para que nenhum vizinho compartilhe setor — senão o cilindro
remontaria os três blocos que acabaram de morrer). O setor sobrevive como
cor de acento e como etiqueta dentro do card, não como endereço na tela.
TRÊS COISAS FORAM DELETADAS AQUI E VALE REGISTRAR O QUE ERAM, para ninguém
reinventá-las por saudade:
· .grupo--topo / --esq / --dir — os nomes já eram a hierarquia por extenso.
· .eixo — quatro camadas de background num elemento só: espinha vertical de
2px×60% descendo da liderança, barra horizontal de 66%×1px e duas hastes
de 1px×34% em 17% e 83% apontando para as colunas, tudo com drop-shadow
magenta. Era engenhoso (organograma tradicional sem DOM extra e sem nada
animado) e era, literalmente, um diagrama de subordinação desenhado em
CSS. Em gravidade zero não existe "em cima" — não há de onde a espinha
descer nem para quem as hastes apontarem.
· .setor-node — a pílula de setor, com barra de acento, nome em display e
subtítulo em slab 200 caixa alta. Ela morre inteira, mas a VOZ TIPOGRÁFICA
do seu subtítulo foi herdada pela .pc-setor (css/profile-card.css): a
pílula tinha aquele tratamento para ser rótulo e não título, e essa parte
continua valendo — mudou o suporte, não a hierarquia da informação.
========================================================================== */
.pool{
position:relative; z-index:2;
display:flex; flex-direction:column; align-items:center;
gap:var(--gz-space-md);
max-width:100%;
}
/* ---------- CONTROLES — modo de vista + filtro por área --------------------
Ficam ACIMA do palco por ordem de leitura (ver js/organograma.js), não por
importância. Já foram uma barra única; hoje são dois lugares, `.controles-
topo` e o trilho `.rail-modos`, e o que sobrou aqui são os pedaços comuns
(grupo, rótulo, chip). */
/* A REGRA `.controles` SAIU na limpeza da M1.4, e o registro fica porque o
nome continua vivo nos elementos filhos. Ela estilizava uma barra única que
foi desmembrada: hoje os grupos moram em `.controles-topo` (filha do .palco)
e os modos num `.rail-modos`. Medido antes de apagar, no produto rodando:
`document.querySelectorAll(".controles")` devolve **0** em 30 estados
diferentes, nas duas larguras — nenhum elemento jamais recebeu a classe
depois do desmembramento. As classes `.controles__grupo` e
`.controles__rotulo` abaixo continuam em uso e não foram tocadas. */
.controles__grupo{
display:flex; flex-wrap:wrap; align-items:center; gap:var(--gz-space-xs);
}
.controles__rotulo{
font-family:var(--gz-font-codigo);
font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
color:var(--tx-dim); margin-right:var(--gz-space-2xs);
}
/* `--c` e `--rot` eram declarados aqui e saíram junto com as regras
`.chip--setor`, que eram as únicas leitoras. Medido no produto com o popover
aberto: nenhum `.cbx` é descendente de um `.chip` (a caixa de seleção é IRMÃ
do gatilho, ver js/filtro.js), e o único chip com filhos é o `.chip--filtro`,
cujo ícone usa `currentColor`. Quem define as duas variáveis hoje é cada
`.cbx`, inline, em js/filtro.js. */
.chip{
position:relative;
display:inline-flex; align-items:center; gap:8px;
padding:8px 15px;
border:1px solid var(--vidro-borda);
border-radius:var(--gz-radius-pill);
background:var(--vidro-bg);
-webkit-backdrop-filter:blur(var(--vidro-blur)); backdrop-filter:blur(var(--vidro-blur));
font-family:var(--gz-font-slab); font-weight:200;
font-size:.8rem; letter-spacing:.11em; text-transform:uppercase;
color:var(--tx-muted); line-height:1;
cursor:pointer; white-space:nowrap;
transition:color .25s var(--ease-out), border-color .25s var(--ease-out),
background .25s var(--ease-out);
}
.chip:hover:not([disabled]){ color:var(--tx); border-color:rgba(255,255,255,.32); }
/* AS CINCO REGRAS `.chip--setor` SAÍRAM na limpeza da M1.4. Elas desenhavam o
ponto de 6px com a cor do setor num chip que deixou de existir: a fileira de
um chip por setor virou o popover com caixas de seleção (js/filtro.js), e o
gatilho que sobrou é `.chip--filtro`, sem ponto de cor. Nem o JS nem o
index.html nem os testes escrevem `chip--setor` — conferido por busca e por
medição no produto (0 elementos em 30 estados, nas duas larguras).
O que a regra dizia sobre CONTRASTE continua valendo e mora agora onde ele é
de fato aplicado: o texto usa `--rot` (a versão clareada, medida em
js/dados.js) porque o rosa cru #EC008C sobre #080808 dá 4,7:1, que reprova
em texto pequeno; a cor crua só aparecia no ponto, que é forma e não texto. */
/* modo ativo: no Modo B a Diretriz zera a sombra e acende glow no lugar */
.chip--modo.is-on{
color:var(--tx);
border-color:color-mix(in srgb, var(--gz-rosa-spray) 62%, transparent);
background:var(--vidro-bg-forte);
box-shadow:0 0 14px rgba(236,0,140,.30);
}
/* o último setor ligado fica inerte, não invisível: some o alvo de clique e
fica a informação de que aquele setor está ligado. */
.chip[disabled]{ cursor:default; }
/* ============================================================================
LAYOUT DOS CONTROLES — três âncoras em vez de uma barra só
----------------------------------------------------------------------------
A fileira única virou três peças distribuídas pela tela (js/organograma.js as
posiciona): AGENTES numa faixa acima do título, ÁREA numa barra abaixo dele e
MODO num trilho vertical à esquerda do palco. Tira peso do topo e dá ao olho
pontos de entrada em vez de um paredão de chips.
========================================================================== */
/* --- faixa de AGENTES, acima do título ----------------------------------- */
/* ÁREA na ponta esquerda, AGENTES na ponta direita, com o título entre elas
(o título é o próximo irmão, centralizado por conta própria). `space-between`
joga os dois grupos para as extremidades; `align-items:flex-start` mantém a
ÁREA e o interruptor no alto, alinhados ao cabeçalho da marca. */
/* O Z-INDEX AQUI TEM QUE VENCER O DO TRILHO DE MODOS (.rail-modos, 7), e não
vencia: era 6. Isso não é sobre a barra em si — ela e o trilho nem se
encostam. É sobre o POPOVER de área, que mora dentro desta barra. Um
`z-index` numerado cria contexto de empilhamento, então o `z-index:60` da
`.pop__caixa` (css/componentes.css) só valia DENTRO da barra: contra o
trilho, quem disputava era a barra inteira, com 6, e perdia. O resultado na
tela era o popover aberto com os botões ANEL/PILHA desenhados por cima dele.
O número novo é 8, um acima do trilho — o menor que resolve. */
.controles-topo{
position:relative; z-index:8;
flex:0 0 auto;
display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start;
gap:var(--gz-space-sm) var(--gz-space-lg);
padding:6px clamp(14px, 3vw, 40px) 2px;
}
/* cada grupo empilha o rótulo sobre os botões; os dois vão para a direita */
.controles-topo .controles__grupo{ justify-content:flex-end; }
/* --- trilho VERTICAL de MODOS, à esquerda do palco -----------------------
Ancorado pelo TOPO, não centralizado. Dois motivos: (1) o anel mora na faixa
SUPERIOR da .arvore (justify-content:flex-start), com o vazio embaixo — então
alinhar o trilho ao topo o mantém junto do anel em qualquer altura de tela,
enquanto centralizar o empurraria para o vazio de baixo em telas altas;
(2) NÃO dá para centralizar com `transform:translateY(-50%)` aqui, porque o
trilho tem `data-reveal` e a regra de entrada `.pronto [data-reveal]{
transform:none }` zeraria esse transform — foi o que fazia o trilho descer
demais e encostar no rodapé. O `top` resolve sem depender de transform. */
.rail-modos{
position:absolute; z-index:7;
left:clamp(6px, 2vw, 30px);
top:clamp(16px, 8vh, 84px);
}
.rail-modos .controles__grupo--modos{
flex-direction:column; align-items:stretch; gap:9px;
}
.rail-modos .controles__rotulo{ margin:0 0 6px 3px; }
.rail-modos .chip--modo{
justify-content:flex-start;
width:100%; min-width:122px;
}
/* na coluna, o modo ativo ganha um filete de acento à esquerda além do glow */
.rail-modos .chip--modo.is-on{ border-left:2px solid var(--gz-rosa-spray); }
/* No cilindro (>1200px) o trilho pede espaço à esquerda: reserva-se o padding e
o fit-to-viewport centra o anel na faixa restante, à direita do trilho. */
/* PADDING SIMÉTRICO, e é o que conserta o "não está centralizado" das vistas.
O trilho de MODOS é absoluto e vive na sangria esquerda; a versão anterior
dava sangria GRANDE só à esquerda (para o rail) e pequena à direita, então o
miolo — anel, pilha, leque, e sobretudo os blocos de tamanho fixo — nascia
empurrado para a direita, descentralizado na tela. Igualando os dois lados,
o `align-items:center` da .arvore volta a centralizar o conteúdo no meio da
tela. A direita não tem rail (AGENTES subiu para o topo), então essa sangria
é só respiro — de propósito, para o eixo de simetria ser o centro real. */
@media (min-width:1201px){
.arvore{
padding-left:clamp(150px, 14vw, 210px);
padding-right:clamp(150px, 14vw, 210px);
}
}
/* O palco recebe do js/carrossel.js a largura útil do cilindro (a min-width sai
do raio da montagem — ≈950px na calibragem de 13 cards de 196 e raio 440 em
que estes números foram medidos) e a altura da PROJEÇÃO — 452px medidos
no DOM, não os ≈387px que a primeira estimativa previa. A estimativa errou o
dominante: no eixo vertical quem manda é a inclinação de −7°, não a lente.
Varrendo o anel inteiro, medirAltura() devolve {cima −163,4; baixo 228,2} —
assimétrico, porque o termo z1·sin(t) estica a aresta de cima no hemisfério
de trás. A conta está registrada em js/carrossel.js (medirAltura); é de lá
que o número sai, e é por isso que ele não podia ser cravado aqui.
Sem a min-width o pai mediria só a caixa do cilindro — que tem a largura de
UM card — e as lascas do anel vazariam para fora. */
.pool__palco{ max-width:100%; }
/* ---------- realce do card FRONTAL do anel -------------------------------
`.cc-front` é posta pelo carrossel no slot cujo ângulo efetivo está de
frente para a câmera — hoje uma janela de ±13,85° (metade do passo de
360/13), e não mais a ponta de um arco. Em vez de inventar um brilho novo, reaproveita o
mecanismo que o ProfileCard já tem: --card-opacity alimenta a opacidade do
glow de trás (.pc-behind), então o card da frente acende sem hover. */
.cc-front .pc-card-wrapper{ --card-opacity:.62; }
.cc-front .pc-acento{
box-shadow:0 0 14px color-mix(in srgb, var(--c,#EC008C) 70%, transparent);
}
/* ============================================================================
CARDS — agora ProfileCard (css/profile-card.css + js/profile-card.js)
----------------------------------------------------------------------------
O .card continua sendo o que a árvore mede, que flutua em gravidade
zero e que a sequência de entrada elege. Todo o material — vidro, brilho
holográfico, tilt, retrato, tipografia — mora no ProfileCard.
O avatar circular saiu. Ele avançava metade da altura para fora do card e
era o que cobria os conectores — que, por sua vez, já não existem: nem os
conectores SVG, nem o eixo luminoso que os substituiu. O registro fica
porque explica por que o retrato hoje é sangrado dentro do card e não um
círculo por cima dele.
========================================================================== */
.card{
--c:var(--gz-rosa-spray);
position:relative;
padding:0; border:0; background:none;
cursor:pointer;
display:block;
transition:transform .5s var(--ease-out), opacity .4s var(--ease-out),
filter .4s var(--ease-out);
/* Flutuação em gravidade zero (fase/amplitude por card via vars no JS) */
animation: flutua var(--fdur,7s) var(--ease-io) var(--fdelay,0s) infinite alternate;
}
@keyframes flutua{
from{ transform:translate3d(0,var(--fy0,0),0); }
to{ transform:translate3d(0,var(--fy1,-5px),0); }
}
/* enquanto o cursor mira o card, a deriva pausa — quem se move é o tilt */
.card.is-tilt{ animation-play-state:paused; }
/* NÃO EXISTE MAIS "DIMENSÃO POR NÍVEL". Aqui moravam .card--membro (160px) e
.card--lider (196px) — 22,5% de diferença que dizia, sem escrever, quem
importava mais. Os dois seletores foram deletados e nenhum card ficou sem
largura: o ProfileCard deriva TODA a sua escala de --pc-w, e --pc-w chega
pelo JS, de GZ_CILINDRO.larguraCard (196px para todo mundo). Era assim na
prática desde sempre, aliás — `.cc-slot > .card{width:100%}` já vencia estas
duas regras por especificidade. O que muda de verdade é que agora só existe
um número. */
/* ============================================================================
CENA DO HOLOGRAMA — sem arestas, sem painel
A coreografia de entrada/saída (eleição → push-in → warp → materialização →
assentamento) vive no bloco no FIM deste arquivo, junto de js/transicao.js.
========================================================================== */
/* Escurecimento da cena — máscara RADIAL (dissolve nas bordas, nunca corte
reto). Fechado o bastante para NENHUMA cor do organograma vazar pelo blur. */
/* O FUNDO DA CENA, e por que ele voltou a existir.
Este bloco dizia "A CENA NÃO TEM FUNDO PRÓPRIO" e cravava `background:none`,
no argumento de que o fundo do holograma é o próprio organograma desfocado e
que qualquer véu apagaria a home. O argumento continua bom; a IMPLEMENTAÇÃO
era frágil, e o modo como ela falha é grave.
Sem fundo próprio, a cena inteira depende de terceiros para ter cor: o
.palco com `filter: blur() + dois drop-shadow()` e o canvas WebGL, ambos
camadas de composição pesadas. Quando uma delas não compõe — GPU sem
aceleração, driver que desiste de um filtro daquele tamanho, contexto WebGL
perdido — não sobra NADA pintado atrás do texto, e a cena aparece em branco
com o holograma invisível. Foi exatamente o que se viu: nome, cargo e
atividades legíveis por cima de uma tela branca.
A correção não desfaz a decisão de desenho, ela põe um PISO embaixo dela.
O véu abaixo é radial e escuro no miolo, dissolvendo nas bordas: onde o
holograma vive ele quase não pesa, e o organograma desfocado continua
aparecendo por trás — que era o ponto do texto original. O que ele garante é
que a cena NUNCA fica mais clara que o palco, aconteça o que acontecer com
as camadas de cima. `background-color` sólido no fim da pilha é a rede: ele
não depende de composição nenhuma.
O elemento continua sendo quem recebe o clique-fora. */
.cena__fundo{
position:absolute; inset:0;
background:
radial-gradient(78% 78% at 50% 45%, rgba(3,5,12,.62) 0%,
rgba(3,5,12,.80) 58%,
rgba(3,5,12,.94) 100%),
var(--gz-preto-palco);
}
/* Canvas do Three.js ocupa a viewport inteira */
.cena__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Scanlines na viewport inteira, com máscara radial dissolvendo nas bordas */
.cena__scan{
position:absolute; inset:0; pointer-events:none; opacity:.24; mix-blend-mode:overlay;
background:repeating-linear-gradient(180deg, rgba(120,200,255,.09) 0 1px, transparent 1px 3px);
-webkit-mask:radial-gradient(70% 70% at 50% 45%, #000 55%, transparent 100%);
mask:radial-gradient(70% 70% at 50% 45%, #000 55%, transparent 100%);
animation:scanmove 8s linear infinite;
}
@keyframes scanmove{ from{background-position-y:0;} to{background-position-y:120px;} }
/* Bloco de informações — COLUNA À ESQUERDA da figura, na vertical.
Saiu do rodapé: o texto agora acompanha o holograma pela lateral, e a
figura ganha a altura inteira da tela. A largura desta coluna é medida em
JS e vira a margem esquerda do enquadramento 3D, então texto e figura
nunca se cruzam. */
.cena__info{
position:absolute;
left:clamp(24px, 5vw, 84px);
top:0; bottom:0;
width:clamp(280px, 28vw, 460px);
/* Centrado por FLEX e não por translateY(-50%): a regra de coreografia no
fim deste arquivo zera o transform de .cena__info, e isso apagava o
alinhamento vertical. */
display:flex; flex-direction:column; justify-content:center;
/* RESPIRO NAS DUAS PONTAS. A coluna ocupa a altura inteira da tela; sem esta
folga o texto encosta na borda no momento em que a lista cresce até o
limite, e "colado na borda" lê como "cortado" mesmo quando não está. */
padding:clamp(14px, 4vh, 38px) 0;
z-index:2; text-align:left; pointer-events:none;
isolation:isolate;
}
/* Véu do bloco: DESFOCA o que está atrás em vez de tapar. Assim o organograma
continua aparecendo por baixo do texto — só que fora de foco, que é o que
garante o contraste sem virar uma caixa opaca sobre a cena. */
.cena__info::before{
content:""; position:absolute; inset:auto -26px auto -28px; z-index:-1;
top:calc(50% - 50%); height:100%; align-self:center;
pointer-events:none;
border-radius:22px;
-webkit-backdrop-filter:blur(14px) brightness(.52) saturate(.9);
backdrop-filter:blur(14px) brightness(.52) saturate(.9);
background:linear-gradient(100deg, rgba(3,5,14,.62) 0%, rgba(3,5,14,.34) 62%, transparent 100%);
-webkit-mask:radial-gradient(120% 96% at 22% 50%, #000 52%, transparent 100%);
mask:radial-gradient(120% 96% at 22% 50%, #000 52%, transparent 100%);
}
/* ============================================================================
COLUNA DE AGENTES — a segunda margem da cena, à DIREITA da figura
----------------------------------------------------------------------------
"À direita do holograma, poderíamos adicionar os agentes ligados ao
integrante com pequenas informações."
ELA É O ESPELHO DE .cena__info, e de propósito: mesma largura em `clamp`,
mesmo respiro vertical, mesmo véu desfocado — só que ancorada à direita e
com a máscara virada. Duas colunas de peso visual igual ladeando a figura
dão simetria; uma coluna gorda de um lado e uma tira do outro dariam um
layout torto justamente na tela em que a pessoa é o centro.
`pointer-events` VOLTA A EXISTIR NOS FILHOS. A coluna herda `none` (como a
de texto, para o clique fora continuar fechando a cena), mas cada chip de
agente é um alvo de verdade — ele abre o holograma daquele agente. Sem o
`auto` no chip, ele seria decoração.
========================================================================== */
.cena__agentes{
position:absolute;
right:clamp(24px, 5vw, 84px);
top:0; bottom:0;
width:clamp(230px, 22vw, 330px);
display:flex; flex-direction:column; justify-content:center; gap:10px;
padding:clamp(14px, 4vh, 38px) 0;
z-index:2; text-align:left; pointer-events:none;
isolation:isolate;
}
.cena__agentes:empty{ display:none; }
/* A COLUNA COMEÇA ABAIXO DO ✕, e isto é consequência direta do alvo de toque de
44px (FIX-M0.4-c). O botão é `position:absolute` no canto superior direito com
`z-index:3`; a lista de agentes ocupa 919→1201px com `z-index:2` e ROLA. Com a
lista rolada, um chip sobe para debaixo da caixa invisível do botão — e como o
botão ganha o `elementFromPoint`, aquele pedaço do chip passa a FECHAR a cena
em vez de abrir o agente. É o clique que faz o oposto do que foi pedido, numa
tela usada ao vivo no telão.
Medido, varrendo todas as posições de rolagem e contando os pontos em que
existe um chip VISÍVEL por baixo do botão (não basta comparar retângulos: o
`getBoundingClientRect` de um chip rolado para fora ainda devolve caixa acima
da lista, mesmo clipado e invisível — essa foi a primeira medição, e ela
estava errada):
alvo de 18px (antes) · 19 pontos ← o defeito já existia, pequeno
alvo de 44px (depois) · 110 pontos ← 5,8× pior
com este padding · 0 pontos
POR QUE 64px: a borda de baixo do botão fica em `top + 31` no pior caso
(`top:clamp(16px,3vh,28px)` no teto de 28, menos a margem de −13, mais os 44
de altura) = 59px. 64 limpa com 5px de folga em qualquer altura de janela.
Só em tela larga: abaixo de 1101px a coluna desce para o rodapé e não há
sobreposição nenhuma — medido, 0 pontos em 375px. */
@media (min-width:1101px){
.cena__agentes{ padding-top:max(64px, clamp(14px, 4vh, 38px)); }
}
/* ★ QUEM ROLA É A LISTA DE DENTRO, NÃO A COLUNA — e esta separação é a mesma
que a coluna da esquerda já tinha (.cena__info decora, .cena__atividades
rola). Aqui ela nasceu de um efeito colateral medido: o véu desta coluna é um
`::before` absoluto que SANGRA 26–28px para fora da caixa, de propósito,
para a borda desfocada não terminar num corte reto. Pondo `overflow` na
própria coluna, esse sangramento passava a contar como conteúdo — o
`scrollWidth` dava 304 contra 276 de `clientWidth`, e com `overflow-x:hidden`
o navegador simplesmente decepava o lado direito do véu.
Com a lista por dentro, a coluna volta a ser `visible` (o véu sangra à
vontade) e a rolagem fica onde o conteúdo está.
`min-height:0` pela mesma razão de sempre num filho flex: sem ele o item se
recusa a encolher abaixo do próprio conteúdo, e sem encolher não há o que
rolar — a lista vazaria a coluna em silêncio. */
.cena__ag-lista{
display:flex; flex-direction:column; gap:10px;
min-height:0; max-height:100%;
overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
/* fura o `pointer-events:none` da coluna, senão a roda do mouse atravessa
para a cena e a lista nunca rola */
pointer-events:auto;
}
.cena__agentes::before{
content:""; position:absolute; inset:auto -28px auto -26px; z-index:-1;
height:100%; align-self:center;
pointer-events:none; border-radius:22px;
-webkit-backdrop-filter:blur(14px) brightness(.52) saturate(.9);
backdrop-filter:blur(14px) brightness(.52) saturate(.9);
background:linear-gradient(260deg, rgba(3,5,14,.62) 0%, rgba(3,5,14,.34) 62%, transparent 100%);
-webkit-mask:radial-gradient(120% 96% at 78% 50%, #000 52%, transparent 100%);
mask:radial-gradient(120% 96% at 78% 50%, #000 52%, transparent 100%);
}
.cena__ag-rubrica{
font-family:var(--gz-font-codigo);
font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
color:rgba(220,238,255,.62);
margin:0 0 2px;
}
.cena__ag-rubrica + .cena__ag-rubrica{ margin-top:6px; }
/* espaço entre um bloco e o próximo, sem margem colapsando */
.cena__ag-chip + .cena__ag-rubrica{ margin-top:12px; }
.cena__ag-chip{
display:block; width:100%; text-align:left;
pointer-events:auto; cursor:pointer;
padding:9px 12px 10px;
border:1px solid rgba(255,255,255,.30);
border-radius:12px;
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(8,10,18,.44));
color:#EAF4FF;
transition:border-color .22s var(--ease-out), background .22s var(--ease-out),
transform .22s var(--ease-out);
}
.cena__ag-chip:hover, .cena__ag-chip:focus-visible{
border-color:rgba(255,255,255,.72);
background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(8,10,18,.5));
transform:translateX(-3px);
}
/* TRÊS PESOS PARA TRÊS ESPÉCIES, e a escala é de POSSE, não de importância:
contorno cheio = é dela; tracejado = é do time dela; tracejado apagado = é de
outra pessoa e ela também usa. O olho lê a hierarquia antes do texto, e o
texto (a rubrica) confirma. Mesma convenção da camada de foco. */
.cena__ag-chip--equipe{ border-style:dashed; }
.cena__ag-chip--equipe:hover, .cena__ag-chip--equipe:focus-visible{ border-style:solid; }
.cena__ag-chip--terceiro{
border-style:dashed; border-color:rgba(255,255,255,.18);
background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(8,10,18,.34));
}
.cena__ag-chip--terceiro .cena__ag-nome{ font-size:.92rem; }
.cena__ag-chip--terceiro:hover, .cena__ag-chip--terceiro:focus-visible{
border-style:solid; border-color:rgba(255,255,255,.55);
}
.cena__ag-nome{
display:block;
font-family:var(--gz-font-display); letter-spacing:.03em;
font-size:1.02rem; line-height:1.1;
}
.cena__ag-funcao{
display:block;
font-family:var(--gz-font-codigo);
font-size:.6rem; letter-spacing:.06em; line-height:1.35;
color:rgba(220,238,255,.66);
margin-top:2px;
}
.cena__ag-faz{
display:block; font-size:.72rem; line-height:1.4;
color:rgba(234,244,255,.9); margin-top:6px;
}
/* PULSO DE TROCA. Quando um chip troca o habitante da cena sem fechá-la, o
conteúdo muda "no lugar" e a mudança pode passar despercebida. Um clarão
curto na coluna de texto e na figura marca o corte sem refazer a abertura. */
.cena.is-trocando .cena__info,
.cena.is-trocando .cena__video{ animation:cenaTroca .42s var(--ease-out); }
@keyframes cenaTroca{
0%{ opacity:.15; transform:translateY(6px); }
100%{ opacity:1; transform:none; }
}
/* Em tela estreita as duas colunas não cabem ladeando a figura. A de agentes é
a que cede: ela desce para o rodapé, em fileira rolável na horizontal. */
@media (max-width:1100px){
.cena__agentes{
right:auto; left:0; top:auto; bottom:0; width:100%;
justify-content:flex-end; padding:0 16px 16px;
}
.cena__agentes::before{ display:none; }
.cena__ag-lista{
flex-direction:row; align-items:flex-end;
gap:8px; overflow-x:auto; overflow-y:hidden;
}
.cena__ag-rubrica{ display:none; }
.cena__ag-chip{ flex:0 0 auto; width:190px; }
.cena__ag-faz{ display:none; }
}
/* o fade escalonado dos filhos está no bloco de coreografia, no fim do arquivo */
.cena__setor{
font-family:var(--gz-font-slab); font-weight:200; letter-spacing:.2em;
text-transform:uppercase; font-size:.82rem; line-height:1.35;
color:var(--c,#9FD8FF); /* clareado em JS até passar AA */
}
.cena__nome{
font-family:var(--gz-font-display); letter-spacing:.03em;
font-size:clamp(2.1rem,4.1vw,3.2rem); line-height:1; margin:.16em 0 .12em; color:#fff;
text-shadow:0 0 18px rgba(120,190,255,.38);
}
.cena__cargo{ font-size:1.08rem; color:#DCEEFF; line-height:1.3; }
/* ============================================================================
O HOLOGRAMA COMO FICHA DE CAPACIDADE
----------------------------------------------------------------------------
A diretoria pediu que a cena parasse de dizer cargo e passasse a dizer
capacidade: "a pessoa não é só Financeiro, ela é várias áreas, ela é skill
based". Então o bloco de texto virou três camadas — ÁREAS (etiquetas no
topo), SKILLS (o que sabe fazer) e PROCESSOS (o que faz, com frequência).
Ver js/transicao.js: preencherInfo().
O container continua sendo `#cena-atividades` para não quebrar o
escalonamento de entrada que já existe no fim deste arquivo.
========================================================================== */
/* --- áreas: etiquetas na linha do topo, no lugar do nome único de setor --- */
/* O PESO MORA AQUI, na regra que fixa os 11,52px — e não lá embaixo no chip,
que foi onde a primeira versão desta correção o pôs. O motivo é que ESTA linha
do topo tem DOIS conteúdos possíveis: para uma pessoa ela recebe os chips
`.cena__area`; para um agente ela recebe um nó de TEXTO SOLTO
("Agente · de Hugo", ver js/transicao.js:219). Consertar só o chip deixava o
agente com o defeito idêntico — e a revisão pegou isso.
O DEFEITO. Estas duas regras `.cena__setor` são a mesma seletividade, então a
de baixo vence: hoje NADA renderiza em `.82rem`, tudo cai nos `.72rem` = 11,52px.
Só que o `font-weight:200` continuava vindo da regra de cima, escolhida quando
isto era um rótulo ÚNICO em 13,1px. Hepta Slab é fonte variável (200–900),
então em 11,52px o 200 desenha traço mais fino que um pixel e a cor declarada
não é atingida em pixel nenhum. Medido no screenshot, sobre a rampa magenta do
próprio chip (que não se confunde com nada mais na cena): o pixel mais forte
alcança 56% da cor e NENHUM passa de 90% — os 5,36:1 do cálculo chegam à tela
como ~2,5:1.
QUE A CAUSA É O PESO E NÃO O TAMANHO se prova no rasterizador, com o tamanho
FIXO em 11,52px, variando só o peso. Nos dois conteúdos, medidos separados
porque o letter-spacing difere (.14em no chip, .2em no texto do agente):
chip 200 → 75% e zero pixels acima de 90% · 300 → 89%, ainda zero ·
400 → 98% com 96 · 500 → 100%
agente 200 → 68% e zero · 300 → 85%, ainda zero · 400 → 98% com 52
O 400 é, nos dois, o PRIMEIRO peso em que o traço pousa no pixel — parar no
300 deixaria a linha prometendo uma cor que continua não aparecendo.
Ver FIX-M0.4-e. */
.cena__setor{
display:flex; flex-wrap:wrap; gap:6px;
font-size:.72rem;
font-weight:var(--gz-weight-regular);
}
/* ★ OS TRÊS BLOCOS DE TEXTO RECEBEM O PONTEIRO (FIX-M0.4-i), e sem isto a
guarda que existe em js/transicao.js para eles é CÓDIGO MORTO.
O handler de "clique fora" faz `e.target.closest(".cena__info, .cena__fechar")`
justamente para não fechar a cena quando o toque cai no texto. Só que
`.cena__info` é `pointer-events:none` (para o clique atravessar o vão da
coluna e fechar, que é uma das três saídas), e `none` é HERDADO pelos filhos:
nenhum deles chega a ser `e.target`, então a guarda nunca casa. Medido:
`elementFromPoint` no centro de `#cena-nome` devolvia `cena-canvas`, e um
clique ali levava o estado de `aberto` para `fechando`.
`.cena__atividades` já tinha o `auto` (ela precisa dele para rolar por
dentro); faltavam os três de cima. Devolver o ponteiro SÓ a eles é o que
preserva as duas coisas ao mesmo tempo: o texto para de fechar a cena, e o
vão em volta dele continua fechando.
Por que agora: até o `FIX-M0.4-g` esse bloco ficava em y≈−714 no celular,
fora da tela, e o defeito era inócuo lá. Agora ele ocupa y 73→162 na largura
inteira — o lugar mais natural do polegar. Em 1280px o defeito já valia. */
.cena__setor, .cena__nome, .cena__cargo{ pointer-events:auto; }
/* ★ O ANEL DE FOCO DO DOSSIÊ É DESENHADO POR DENTRO — e sem isto ele não é
desenhado de jeito nenhum (FIX-M0.4-j, achado pela revisão de UX).
`.cena__atividades` usa `mask-image` para desvanecer as pontas, e máscara traz
`mask-clip:border-box` por padrão (confirmado no computado): tudo que o
elemento pinta FORA da caixa de borda é descartado. O `:focus-visible` global
(linha ~184) desenha com `outline-offset:3px`, ou seja inteiramente lá fora.
Resultado: dar Tab levava o foco ao dossiê e NADA aparecia na tela — foco sem
indicador, contra o item 2 do checklist e a WCAG 2.4.7.
Medido contando pixels da cor de foco na região do dossiê (decodificando o
PNG, não amostrando um pixel a olho): 0 como estava, em 1280 e em 375; 3162
num controle com `mask-image:none`, o que isola a máscara como culpada; e
3037/2937 com o offset negativo abaixo.
É o mesmo remédio que o `FIX-M0.4-c` já tinha aplicado ao ✕ por outro motivo
(lá o anel saía da tela) — ver D037. Ressalva medida e aceita: o traço de
BAIXO cai dentro da faixa de `--f-fim` e some quando o dossiê está rolado no
meio; os outros três lados ficam sólidos e já leem como anel. */
.cena__atividades:focus-visible{ outline-offset:-3px; }
.cena__area{
display:inline-block;
padding:3px 9px;
border:1px solid color-mix(in srgb, var(--ca, #9FD8FF) 44%, transparent);
border-radius:var(--gz-radius-pill);
background:color-mix(in srgb, var(--ca, #9FD8FF) 12%, transparent);
color:var(--ca, #9FD8FF);
letter-spacing:.14em; line-height:1.3;
}
/* --- o corpo: blocos com rubrica ---------------------------------------- */
/* ---------------------------------------------------------------------------
SÓ O CONTEÚDO ROLA. As áreas, o nome e o cargo ficam parados; quem rola é
esta lista. É a diferença entre "a página do holograma tem barra de rolagem"
e "o dossiê da pessoa tem mais adiante" — a segunda leitura é a certa,
porque nome e cargo são a identificação e some-la para ler uma skill seria
perder o referencial de quem se está lendo.
`min-height:0` NÃO É DECORAÇÃO: um filho flex tem `min-height:auto` por
padrão, ou seja, ele se recusa a encolher abaixo do próprio conteúdo — e
sem encolher, `overflow-y:auto` nunca chega a ter o que rolar. Sem esta
linha a lista simplesmente vaza a tela outra vez, e o bug volta calado.
`pointer-events:auto` fura o `pointer-events:none` da coluna, senão a roda
do mouse atravessa direto para a cena. O clique aqui dentro já é isento de
fechar o holograma (js/transicao.js trata `.cena__info` como área de texto),
então liberar o ponteiro não abre porta para fechar sem querer.
Medido em 1280×720 com 16 pessoas: Miguel pedia 1089px de altura numa caixa
de 720 (369px cortados), Artur 993 (273) e Gustavo 812 (92). Os outros 13
cabiam — e é justamente por isso que o corte passou despercebido até o
formulário mais completo chegar. --------------------------------------- */
/* ★ `overflow-x:hidden` É OBRIGATÓRIO AQUI, e a razão é uma regra do CSS que
morde calado: quando um dos eixos de `overflow` deixa de ser `visible`, o
OUTRO deixa de poder ser `visible` e computa para `auto` sozinho. Ou seja,
pedir só `overflow-y:auto` dá DOIS eixos roláveis — e o horizontal aparece ao
primeiro sub-pixel de sobra, virando uma barra que não rola nada porque não
há nada a rolar para o lado. Era o que a diretoria estava vendo: "duas barras
de scrollar mas não faz nada". Esta lista é vertical por natureza; o eixo
horizontal não é "opcional", é errado. */
.cena__atividades{
list-style:none; margin:var(--gz-space-md) 0 0; padding:0;
display:flex; flex-direction:column; gap:var(--gz-space-md);
overflow-y:auto; overflow-x:hidden;
min-height:0;
pointer-events:auto;
/* a rolagem morre aqui em vez de contaminar a página atrás */
overscroll-behavior:contain;
/* espaço para a barra não sentar em cima do texto */
padding-right:10px;
scrollbar-width:thin;
scrollbar-color:rgba(160,200,240,.34) transparent;
/* DESVANECIMENTO NAS PONTAS, e só onde há corte de verdade. Os dois valores
nascem em 0 e só ganham altura quando o JS marca que existe rolagem e que
ela não está na respectiva ponta — texto inteiro nunca é apagado à toa. */
--f-topo:0px; --f-fim:0px;
-webkit-mask-image:linear-gradient(to bottom,
transparent 0, #000 var(--f-topo),
#000 calc(100% - var(--f-fim)), transparent 100%);
mask-image:linear-gradient(to bottom,
transparent 0, #000 var(--f-topo),
#000 calc(100% - var(--f-fim)), transparent 100%);
transition:--f-topo .18s linear, --f-fim .18s linear;
}
.cena__atividades::-webkit-scrollbar,
.cena__ag-lista::-webkit-scrollbar{ width:6px; }
.cena__atividades::-webkit-scrollbar-track,
.cena__ag-lista::-webkit-scrollbar-track{ background:transparent; }
.cena__atividades::-webkit-scrollbar-thumb,
.cena__ag-lista::-webkit-scrollbar-thumb{
background:rgba(160,200,240,.30); border-radius:3px;
}
.cena__atividades::-webkit-scrollbar-thumb:hover,
.cena__ag-lista::-webkit-scrollbar-thumb:hover{ background:rgba(160,200,240,.55); }
/* as duas marcas que o JS liga: `tem-rolagem` só existe quando o conteúdo
realmente não cabe; `no-topo`/`no-fim` dizem em que ponta ele está */
.cena__atividades.tem-rolagem:not(.no-topo){ --f-topo:26px; }
.cena__atividades.tem-rolagem:not(.no-fim){ --f-fim:26px; }
.cena__bloco{ display:flex; flex-direction:column; gap:7px; }
.cena__rubrica{
font-family:var(--gz-font-codigo);
font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
color:rgba(160,200,240,.62);
}
/* "A MAPEAR" — a lacuna que a marca manda MOSTRAR, e por isso ela precisa ser
legível. O alpha era .5, que compõe (104,117,132) sobre o palco = 4,23:1, em
12,8px itálico: reprovava o item 1 do PADROES (4,5:1) justamente no texto que
a decisão travada D009 escreve DE PROPÓSITO, porque esconder a lacuna seria
mentir sobre a pessoa. Com .6 dá 5,70:1 — folga de 1,2 sobre o piso, e ainda
MUITO abaixo do #DCEEFF das skills, então a hierarquia "isto é ausência de
dado, não conteúdo" continua de pé. O itálico faz esse trabalho, não o alpha.
Ver FIX-M0.4-b e testes/unidade/contraste.test.js. */
.cena__amapear{
margin:0; font-size:.8rem; line-height:1.45; font-style:italic;
color:rgba(200,225,255,.6);
}
/* SKILLS como etiquetas: capacidade é um conjunto, e conjunto se lê melhor
espalhado do que empilhado — a lista vertical faria seis skills parecerem
seis tarefas em ordem, que é justamente a outra coisa (processos). */
.cena__skills{
list-style:none; margin:0; padding:0;
display:flex; flex-wrap:wrap; gap:6px;
}
.cena__skills li{
font-size:.82rem; line-height:1.35;
padding:4px 11px;
border:1px solid rgba(140,200,255,.34);
border-radius:var(--gz-radius-pill);
background:rgba(140,200,255,.10);
color:#DCEEFF;
}
/* PROCESSOS empilhados, um por linha, com o traço herdado das atividades */
.cena__processos{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column; gap:var(--gz-space-sm);
}
.cena__processos li{
font-size:.94rem; color:#CFE7FF; line-height:1.45;
position:relative; padding-left:20px;
}
.cena__processos li::before{
content:""; position:absolute; top:.62em; left:0;
width:10px; height:2px; border-radius:2px;
background:#8CC8FF; box-shadow:0 0 6px rgba(140,200,255,.7);
}
/* aproximação vinda de `atividades`: itálico e rebaixado. Discreto de
propósito — informa quem edita sem virar um alerta na frente da plateia. */
.cena__processos li.is-aproximado{ font-style:italic; opacity:.74; }
.cena__proc-freq{
font-family:var(--gz-font-codigo); font-size:.62rem;
letter-spacing:.12em; text-transform:uppercase;
color:rgba(160,200,240,.6); margin-left:9px; white-space:nowrap;
}
/* processo já entregue a um agente: a leitura de "o que eu automatizei", que é
o placar que a diretoria quer ver crescer. Branco, porque agente virou
branco (antes era lima). */
.cena__proc-bot{
font-family:var(--gz-font-codigo); font-size:.62rem;
letter-spacing:.1em; color:#fff;
margin-left:9px; white-space:nowrap;
}
.cena__info--agente .cena__skills li{
border-color:rgba(255,255,255,.4);
background:rgba(255,255,255,.10); color:#EEF2F8;
}
.cena__info--agente .cena__processos li::before{
background:#fff;
box-shadow:0 0 6px rgba(255,255,255,.7);
}
/* Fechar — discreto, sem círculo nem caixa, e com ALVO DE TOQUE de verdade.
Ele media 93,5 × 18px, e os 18px não eram escolha de ninguém: vinham do
`padding:1px 6px` que o NAVEGADOR põe em todo , porque esta regra não
declarava padding nenhum. Depender do default do agente de usuário para
dimensionar o único alvo de toque de uma tela é a definição de acidente.
As três saídas da cena são Esc, clique fora e este ✕ — no celular não existe
Esc, e "clique fora" numa tela em que a figura ocupa quase tudo é um alvo que
ninguém acha. Com a decisão travada D024 (celular vale igual a desktop), 18px
contra os 44px do item 6 do PADROES é reprovação direta.
O PADDING CRESCE A ÁREA E A MARGEM NEGATIVA DEVOLVE O LUGAR: a caixa vai de
93,5×18 para 111,5×44 e o ✕ continua no MESMO pixel — deslocamento medido no
navegador (0, 0), num A/B na própria página. O visual travado (D019) não muda.
POR QUE A MARGEM HORIZONTAL É −9 E NÃO −15, que seria o espelho do padding: os
6px que faltam são o `padding-right` do default do , contra o qual a
posição do ✕ estava calibrada desde sempre. Com −15 o glifo andava 6px para a
direita (medido); com −9 ele fica parado. Verticalmente a margem espelha o
padding porque o piso de 44px com `align-items:center` recentra o conteúdo.
`min-width`/`min-height` ficam declarados porque são o piso AUDITÁVEL — o
número 44 aparece no CSS em vez de ser resultado de uma soma que só o
navegador faz. Note o que eles NÃO fazem: apagar o padding daqui não derruba o
alvo (os `min-*` sozinhos ainda dão 44×44) — derruba a POSIÇÃO, porque some a
margem que segura a caixa. Quem cobre isso é o teste "o alvo do ✕ cresce para
FORA", e ele só cobre porque pergunta "a caixa ficou maior que o texto?" em
vez de "tem padding?" — a primeira versão perguntava a segunda e essa
sabotagem passava. Ver FIX-M0.4-c. */
.cena__fechar{
position:absolute; top:clamp(16px,3vh,28px); right:clamp(18px,3vw,34px); z-index:3;
background:none; border:none; cursor:pointer; pointer-events:auto;
font-family:var(--gz-font-codigo); font-size:.8rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--tx-muted);
display:inline-flex; align-items:center; gap:8px;
min-width:44px; min-height:44px;
padding:13px 15px; margin:-13px -9px;
transition:color .3s var(--ease-out);
}
.cena__fechar:hover, .cena__fechar:focus-visible{ color:#fff; }
/* O ANEL DE FOCO É DESENHADO POR DENTRO, e isto é consequência direta do alvo de
44px acima. O `:focus-visible` global (linha ~184) usa `outline-offset:3px`,
que desenha o anel PARA FORA da caixa; como a caixa agora começa a 0,6px do
topo da janela, o anel caía em −3,4px e a borda de cima ficava fora da tela —
medido com foco de teclado de verdade, não com `.focus()` programático (que
nem casa `:focus-visible`). Isso enfraqueceria o item 2 do checklist de
acessibilidade ("foco visível navegando por Tab") em troca do item 6, o que
não é troca: o offset negativo devolve os dois. De brinde, o anel passa a
contornar o alvo REAL de toque em vez de só o texto. */
.cena__fechar:focus-visible{ outline-offset:-3px; }
.cena__fechar span[aria-hidden]{ font-size:1rem; line-height:1; }
/* ============================================================================
VÍDEO HOLOGRÁFICO — agora com CANAL ALFA de verdade
----------------------------------------------------------------------------
O QUE SAIU DAQUI, E POR QUÊ. Duas linhas:
mix-blend-mode:screen fingia transparência somando o clipe ao fundo
mask:radial-gradient tentava esconder as bordas do que sobrava
As duas existiam porque os clipes vinham em VP9 `yuv420p`, SEM alfa. `screen`
só some com o preto PURO, e o fundo desses clipes não era preto puro: medido,
luminância 6–10 no canto e 27–34 no arco de brilho atrás da figura. Sobre o
palco escuro isso lia como um QUADRO em volta do holograma — a reclamação da
diretoria ("o vídeo possui umas bordas que ficam bastante visuais").
E a máscara radial não resolvia porque o quadro estava DENTRO da elipse
opaca dela, não nas bordas: ela apagava justamente o que não incomodava.
Agora os clipes são `yuva420p`, com alfa keyado no próprio arquivo (ver
tools/alfa-hologramas.sh). Com transparência real o `screen` deixou de ser
necessário E deixou de ser desejável: ele clareava a figura contra o fundo e
lavava a cor. O que se vê agora é o clipe como ele é, recortado.
========================================================================== */
.cena__video{
position:absolute; left:var(--fig-cx,50%); top:var(--fig-cy,44%); transform:translate(-50%,-50%);
height:var(--fig-h,72vh); width:auto; max-width:92vw; z-index:1;
pointer-events:none;
}
/* ============================================================================
ENTRADA ESCALONADA (revela ao carregar)
========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(14px); }
.pronto [data-reveal]{
opacity:1; transform:none;
transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
transition-delay:var(--rd,0s);
}
/* ============================================================================
RESPONSIVO
========================================================================== */
/* AGORA É UM BREAKPOINT SÓ, e o motivo antigo morreu com as colunas.
O motivo velho era "duas colunas de arco não cabem lado a lado: cada arco
pede ~590px úteis e 2×590 + o vão estoura". Com um carrossel só, o intervalo
900–1200px ficou sem função — e ficou PERIGOSO: o palco pede min-width de
~950px, então numa viewport de 900–950px o cilindro 3D empurraria a página
inteira para a rolagem horizontal (min-width vence max-width:100%).
O corte é 1200/1201 e os três limiares do projeto concordam no mesmo ponto:
este @media (max-width:1200px), o `innerWidth <= 1200` de js/app.js:75 e o
`ruptura: 1201` de GZ_CILINDRO. Em 1200px é tira plana em todos os três; em
1201px é cilindro em todos os três. Mudou um, mude os três. */
@media (max-width:1200px){
.palco{ height:auto; overflow:visible; }
.arvore-conteudo{ transform:none !important; }
/* modo plano (.cc-plano): a tira com scroll-snap ocupa a largura toda, e a
min-width do cilindro não vale mais — quem rola é a tira, não a página.
----------------------------------------------------------------------
O `width:100%` de .arvore-conteudo NÃO É REDUNDANTE e não é enfeite: ele é
o HERDEIRO DIRETO do `grid-template-columns:minmax(0,1fr)` que morreu junto
com .grupos. Era aquele minmax que dava uma faixa de largura DEFINIDA para
o `width:100%` dos filhos resolver contra. Sem ele, .arvore-conteudo é item
flex de cross-axis com align-items:center, se dimensiona pela própria
tira e ESTICA até o max-content dela — medido: 13×196 + 12×16 de vão =
2744px numa viewport de 375px. Consequência dupla, as duas medidas no
navegador: (a) o .cc-cylinder passa a ter clientWidth == scrollWidth, então
o overflow-x:auto nunca engata, o scroll-snap fica inerte e a tira não rola
por dentro; (b) o body{overflow-x:hidden} clipa o resto e 10 das 13 pessoas
ficam inalcançáveis por qualquer gesto — dedo, roda, teclado ou barra.
Com estas três linhas: #arvore-conteudo cai de 2744 para 327px, o cilindro
volta a 327 de clientWidth contra 2744 de scrollWidth (a rolagem volta para
DENTRO da tira, que é onde o modo plano a quer) e o documento para de rolar
na horizontal (scrollWidth == clientWidth == 375).
O `min-width:0` acompanha porque o mínimo automático do item flex
reintroduz o max-content pelas costas. NÃO DELETE NENHUMA DAS DUAS. */
.arvore-conteudo{ width:100%; min-width:0; }
.pool, .pool__palco{ width:100%; min-width:0; }
.cabecalho{ padding:10px var(--gz-space-lg); }
.arvore{ padding:0 var(--gz-space-lg) var(--gz-space-xl); }
/* sem palco 3D o trilho não tem lateral onde morar: volta a ser uma fileira
horizontal comum no topo do palco, e a faixa de agentes quebra em linha. */
.rail-modos{
position:static; transform:none;
display:flex; justify-content:center;
margin:0 0 var(--gz-space-md);
}
.rail-modos .controles__grupo--modos{
flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;
}
.rail-modos .chip--modo{ width:auto; min-width:0; }
.rail-modos .chip--modo.is-on{ border-left:1px solid var(--gz-rosa-spray); }
.controles-topo{ padding-left:var(--gz-space-lg); padding-right:var(--gz-space-lg); }
}
/* Nada de card encolhendo aqui, e isso NÃO é esquecimento: os tokens
--card-*-w que este bloco redefinia nunca venciam `.cc-slot > .card
{width:100%}`, então na prática os cards do modo plano já rodavam no tamanho
que vem do JS. Redefini-los era placebo; agora nem existem. */
@media (max-width:560px){
/* ★ O `top` NÃO É ENFEITE E NÃO PODE VOLTAR A SER `auto` (FIX-M0.4-g).
Aqui era `top:auto` com só `bottom` definido, e a consequência era perda de
conteúdo, não aperto: sem as duas âncoras a coluna não tem altura resolvida,
cresce PARA CIMA a partir do rodapé, e o `overflow-y:auto` de
`.cena__atividades` — que existe exatamente para este caso — nunca engata,
porque um rolador precisa de ancestral com altura definida para ter o que
rolar. O excedente atravessava o topo da janela, e como a `.cena` é
`position:fixed` não havia gesto nenhum que o trouxesse de volta: nem roda,
nem dedo, nem teclado.
Medido em 375×812 (`.cena__info` rect.top, com o holograma aberto): Miguel
em −714,4 e o NOME dele em −686 — a tela abria no meio de uma frase, sem
setor, sem nome, sem cargo; Artur em −460,1; Gustavo em −196,6. Rolador
interno em 0 nos três. Com o `top` abaixo: os três em y=73,1, altura
resolvida em 706,5px, rolador com 788/533/270 de excesso e zero corte.
O piso de 64px é geometria, não gosto: a caixa de 44px do ✕ (FIX-M0.4-c)
termina em y≈55,4 no canto superior direito, então abaixo de 64 a primeira
linha da coluna passaria por baixo do botão. O teto de 88px impede que em
telas muito altas a coluna comece longe demais do topo. */
.cena__info{
left:0; right:0; width:auto;
top:clamp(64px, 9vh, 88px); bottom:clamp(20px,4vh,40px);
transform:none; padding:0 var(--gz-space-lg);
}
.cena__atividades li{ font-size:.78rem; }
}
/* ============================================================================
prefers-reduced-motion — desliga flutuação, parallax, tilt, scan, pulsos.
A sequência inteira de entrada vira um fade curto.
========================================================================== */
@media (prefers-reduced-motion:reduce){
.card{ animation:none !important; }
.card.is-tilt{ transform:scale(1.02) !important; }
.cena__scan, .fundo__particulas i, .fundo__nevoa{ animation:none !important; }
.cena{ transition-duration:.2s !important; }
.cena__setor, .cena__nome, .cena__cargo, .cena__atividades{
transition-duration:.2s !important; transition-delay:0s !important;
transform:none !important;
}
/* SAÍRAM DAQUI TRÊS ESTADOS QUE NINGUÉM ESCREVE. `.is-portal` era da capa,
removida do produto em 2026-07-31 (D027, que já a mandava para esta
limpeza). `.palco.is-recuado` não é aplicada por linha nenhuma de JS — o
recuo do palco é feito por `.is-preparado` e `.is-mergulhando`. E
`.arvore.is-mergulhando` nunca ocorre: a `.arvore` só recebe
`is-cedendo` (js/transicao.js), e quem recebe `is-mergulhando` são o
`.palco` e o `.fundo`. O equivalente vivo desse último — e que continua
valendo aqui embaixo — é `.arvore.is-cedendo .card:not(.is-eleito)`. */
[data-reveal]{ transition-duration:.25s !important; }
*{ scroll-behavior:auto !important; }
}
/* ===== BLOCO 1/2 · CSS — cole no FIM de css/estilo.css =====================
Vem por último de propósito: precisa vencer .cena e .cena__info do arquivo
original pela ordem de cascata (sem !important). (A frase citava também
`.palco.is-recuado`, seletor que ninguém aplicava e que saiu na limpeza
da M1.4.)
Coreografia (1,25 s). Só transform/opacity/filter — zero reflow.
t=0 ELEIÇÃO card clicado sobe e acende; os demais recuam em Z
t=160 PUSH-IN o palco mergulha a partir do CENTRO DO CARD
t=260 WARP varredura + aberração cromática cruzam a cena
t=520 TRAVESSIA pulso de luz nascendo do card + materialização
t=720 ASSENTAMENTO luz da base acende; texto entra em cascata
Saída = caminho inverso comprimido em 760 ms.
Tempos espelhados em js/transicao.js: mudou um, mude o par.
========================================================================== */
:root{
--seq-eleicao:.16s; --seq-mergulho:.56s; --seq-volta:.44s; --seq-cena:.42s;
--seq-warp:.52s; --seq-pulso:.26s; --seq-base:.42s; --seq-info:.38s;
--ease-mergulho:cubic-bezier(.62,.02,.34,1); /* acelera e trava */
--ease-saida:cubic-bezier(.16,.84,.28,1);
--ease-warp:cubic-bezier(.30,0,.20,1);
--org-x:50%; --org-y:45%; /* origem do push-in (JS grava do rect do card) */
--warp-x:50%; --warp-y:45%; /* epicentro do pulso, em % da viewport */
--persp:1200px;
--ab-forca:1; /* 0 desliga a aberração cromática (knob de fps) */
}
/* will-change só durante a timeline; pausas enquanto a cena existe */
:root.gz-seq .palco, :root.gz-seq .fundo, :root.gz-seq .cena__fundo,
:root.gz-seq .cena__canvas, :root.gz-seq .cena__base,
:root.gz-seq .warp__linha, :root.gz-seq .warp__pulso{
will-change:transform,opacity,filter;
}
/* backdrop-filter é o item mais caro do palco: fora durante a cena.
A pílula .setor-node estava neste seletor e saiu com os grupos — ela era,
aliás, a única das duas que de fato declarava backdrop-filter. Registrando o
que se viu ao mexer aqui: `.card` é o (background:none, border:0) e
NÃO declara backdrop-filter; quem declara é `.pc-cta` (blur 14px), um
descendente — e `!important` num ancestral não desliga filtro de filho. Ou
seja, esta regra já vinha sendo um no-op desde o refactor do ProfileCard.
Fica como está: apontá-la para .pc-cta é mudança de comportamento em arquivo
de outro dono, e o ganho de fps é para medir, não para supor. */
:root.gz-cena .card:not(.is-eleito){
-webkit-backdrop-filter:none!important; backdrop-filter:none!important;
}
:root.gz-cena .card, :root.gz-cena .fundo__particulas i{ animation-play-state:paused; }
/* --- 1 · ELEIÇÃO (0→160 ms) ------------------------------------------------
O eleito é o único ponto de luz; os vizinhos cedem o palco recuando em Z. */
.card.is-eleito{
z-index:5; animation-play-state:paused;
transform:perspective(var(--persp)) translate3d(0,-6px,44px) scale(1.055);
border-color:color-mix(in srgb, var(--c) 90%, #fff);
filter:brightness(1.18);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--c) 85%, transparent),
0 0 22px color-mix(in srgb, var(--c) 70%, transparent),
0 0 68px color-mix(in srgb, var(--c) 42%, transparent),
0 30px 70px rgba(0,0,0,.6);
transition:transform var(--seq-eleicao) var(--ease-saida),
box-shadow var(--seq-eleicao) linear,
border-color var(--seq-eleicao) linear,
filter var(--seq-eleicao) linear;
}
.card.is-eleito::after{ opacity:1; }
/* Quem cede o palco agora são só os cards: a pílula .setor-node estava neste
seletor e não existe mais. Note que os cards que cedem são TODOS os do anel,
inclusive os do hemisfério de trás — que já estão em visibility:hidden pelo
carrossel, então a regra é inofensiva para eles. */
.arvore.is-cedendo .card:not(.is-eleito){
animation-play-state:paused;
transform:perspective(var(--persp)) translate3d(0,0,-58px) scale(.972);
opacity:.16; filter:blur(2.5px) saturate(.5);
transition:transform var(--seq-eleicao) var(--ease-saida),
opacity var(--seq-eleicao) linear,
filter var(--seq-eleicao) linear;
}
/* `.arvore.is-cedendo .conectores{opacity:.08}` saiu daqui: o não existe no index.html desde que os cards passaram a
girar em 3D. Era regra apontando para o vazio. */
/* --- 2 · PUSH-IN (160→720 ms) -----------------------------------------------
.is-preparado instala o estado "de" (transform/filter neutros) para a
transição ter de onde partir; só existe durante a sequência, custo zero em
repouso. perspective() + transform-origin no card = o ponto de fuga É o card,
então a interface se abre radialmente a partir dele: mergulho, não zoom. */
.palco.is-preparado{
transform-origin:var(--org-x) var(--org-y);
transform:perspective(var(--persp)) translate3d(0,0,0) scale(1);
/* o "de" da transição tem que ter a MESMA lista de funções do "para", senão
o navegador não interpola e o filtro salta. Os dois drop-shadow() saíram
dos dois lados juntos — ver o comentário em .palco.is-mergulhando. */
filter:blur(0px) brightness(1) saturate(1);
transition:transform var(--seq-mergulho) var(--ease-mergulho),
filter var(--seq-mergulho) var(--ease-mergulho),
opacity calc(var(--seq-mergulho)*.72) linear calc(var(--seq-mergulho)*.28);
}
/* a volta é mais rápida que a ida e com curva de saída */
.palco.is-preparado:not(.is-mergulhando){
transition:transform var(--seq-volta) var(--ease-saida),
filter var(--seq-volta) var(--ease-saida),
opacity calc(var(--seq-volta)*.7) linear;
}
/* O organograma NÃO sai de cena: ele continua atrás do holograma, desfocado.
Por isso não há `opacity:0` aqui — o mergulho é de foco e de profundidade,
não uma troca de tela. O que separa as duas camadas é o desfoque (DOF), o
escurecimento e a escala em Z. */
/* O Z do mergulho é MODERADO de propósito. Com perspective(1200px), um
translateZ(600px) amplia a home em 1200/(1200-600) = 2x — somado ao
desfoque, o que sobra na tela é um pedaço gigante e liso do centro, que lê
como preto. Em 200px a ampliação cai para 1.2x e o organograma continua
RECONHECÍVEL atrás do holograma, que é o ponto. */
/* A FRANJA CROMÁTICA SAIU DAQUI, e o motivo é de robustez, não de gosto.
Eram dois `drop-shadow()` no fim da cadeia de filtros de um elemento de tela
cheia que já carrega blur — e drop-shadow é o único filtro da lista que
precisa RASTERIZAR a silhueta alfa da camada inteira antes de desenhar. Numa
máquina sem aceleração (ou com o driver desistindo de um buffer daquele
tamanho) essa é a etapa que falha, e o que sobra no lugar do palco é um
retângulo branco — foi o que se viu ao abrir um card: a cena inteira em
branco, com o texto legível por cima e o botão "fechar" reduzido ao anel
rosa de foco, porque o texto cinza dele sumia no branco.
O efeito não morreu: a aberração cromática continua no WARP (.warp__linha,
logo abaixo), que é um elemento de 24vh e não a tela toda. Lá ela é barata e
é onde ela realmente se lê. Aqui ficam blur + brilho, que é o DOF — a parte
que de fato separa o organograma do holograma. */
.palco.is-mergulhando{
transform:perspective(var(--persp)) translate3d(0,0,200px) scale(1.02);
filter:blur(10px) brightness(.92) saturate(.95);
pointer-events:none;
}
/* ★ A CONTENÇÃO DO TRANSBORDO DO MERGULHO (FIX-M0.4-f) — e ela precisa dos DOIS
níveis, o que é contraintuitivo o bastante para merecer o parágrafo inteiro.
O transform acima amplia a caixa do palco em 1200/(1200−200) × 1,02 = 1,224×.
Numa janela de 1280 isso é uma caixa de 1566,7px, e a caixa transformada de um
filho ENTRA na região de transbordo rolável do documento — contra o
`PADROES.md § Mobile`, que proíbe rolagem horizontal em qualquer largura.
O EXCESSO NÃO É UM NÚMERO FIXO, e saber disso evita uma caçada inútil: como o
`transform-origin` é o centro do CARD clicado (`--org-x`, gravado por
js/transicao.js), a sobra à direita vale `(k−1) × (largura − --org-x)`. Em
1280 com k=1,224 isso vai de ~0 (card colado na direita) a ~287 (card colado
na esquerda) — 224 para um card em x=280, 187 em x=445, 85 em x=900. É por
isso que o ROADMAP registrou "85–187px conforme a execução" e a medição desta
correção registrou 224: mesma fórmula, cards diferentes. Fechado, o excesso é 0.
O `body{overflow-x:hidden}` do reset NÃO protegia disso, e é aí que mora a
armadilha: quando o elemento RAIZ é `visible` nos dois eixos, o CSS manda
propagar o overflow do body para o VIEWPORT — e o body fica, ele próprio, com
overflow `visible`, sem clipar nada. Provado por A/B na própria página: só com
`body{overflow-x:clip}` o excesso continuava 224; só com o `html` declarando
também é que foi a 0. Por isso a regra tem os dois seletores. Não apague um.
`clip` E NÃO `hidden`, por medida: `overflow-x:hidden` obriga o outro eixo a
computar `auto`, e o body viraria contêiner de rolagem — abaixo de 1201px a
rolagem vertical da página passaria a ser interna a ele. Com `clip` o body
computa `clip/visible`: contém sem criar rolagem nenhuma.
NO CELULAR O SINTOMA ERA OUTRO E PIOR. Com emulação móvel em 375×812, o Chrome
encolhe a página inteira para caber o transbordo: `window.innerWidth` ia a 465
contra os 375 do layout, ou seja a peça toda era desenhada a 80,6% — e a
`.cena`, que é `position:fixed; inset:0`, media 465×1005 numa janela de
375×812. Não era barra de rolagem: era o holograma inteiro menor.
PRESA NAS CLASSES DE ESTADO, e não global, de propósito. Fora da cena, o palco
transborda 27px em 375px (1100px com os agentes ligados) e isso é assunto do
Marco 2 — clipar ali ESCONDERIA conteúdo que hoje ainda é alcançável, que é
exatamente a armadilha registrada no @media (max-width:1200px) mais abaixo.
`gz-cena` cobre o regime aberto; `gz-seq` cobre as duas pontas da timeline. As
duas juntas cobrem t=0 a t=760 do fechamento, e o transform ampliador vive de
t=160 (abertura) até t=290+440 ms (a volta ainda interpolando) — sobra
folga nas duas bordas. Os tempos estão em js/transicao.js: mudou um, confira. */
:root.gz-seq, :root.gz-cena,
:root.gz-seq > body, :root.gz-cena > body{ overflow-x:clip; }
/* O eixo VERTICAL só acima do corte, e o motivo é preservar a posição de
rolagem: acima de 1201px o palco é `height:100vh; overflow:hidden` e a página
não tem rolagem legítima nenhuma — a barra de rolagem que o mergulho fazia
nascer ao abrir um card (mesma fórmula do eixo X: 0,224 × (800 − --org-y),
~102px para um card em y=345) não tinha nada legítimo por baixo. Abaixo de
1201px a página rola de verdade, e clipar o eixo Y zeraria a posição de quem
abriu um card no meio da tira: ao fechar, a pessoa voltaria para o topo.
Travar a rolagem do fundo PRESERVANDO a posição é trabalho de modal, e está
registrado como critério de aceite da M2.2 no ROADMAP. */
@media (min-width:1201px){
:root.gz-seq, :root.gz-cena,
:root.gz-seq > body, :root.gz-cena > body{ overflow-y:clip; }
}
/* parallax INTERNO do palco: camadas em Z distintos durante o mergulho.
(perspective por camada, porque um filter no pai achataria preserve-3d) */
.palco.is-preparado > *{
transition:transform var(--seq-mergulho) var(--ease-mergulho),
opacity var(--seq-mergulho) linear;
}
.palco.is-mergulhando .cabecalho,
.palco.is-mergulhando .titulo-bloco{
transform:perspective(var(--persp)) translate3d(0,0,-150px); opacity:.28;
}
/* A camada intermediária do parallax era a .legenda, em Z -70px, entre o
cabeçalho (-150px) e a árvore (+95px). A legenda foi removida da página, e
com ela some um degrau da profundidade — o mergulho passa a ter dois planos
em vez de três. Não há o que pôr no lugar: inventar uma camada só para
preencher o degrau seria movimento sem conteúdo. */
.palco.is-mergulhando .arvore{
transform:perspective(var(--persp)) translate3d(0,0,95px);
}
/* depois da travessia o palco só precisa existir barato: sem drop-shadow e
fora do compositor (a opacity já é 0, então o corte é imperceptível) */
/* Depois da travessia o palco fica barato: sai a franja cromática (drop-shadow
é o filtro caro), fica só o desfoque. Continua VISÍVEL — é o fundo da cena. */
.palco.is-repousando{
filter:blur(10px) brightness(.92) saturate(.95);
transition:filter .2s linear;
}
/* o fundo mergulha mais devagar — parallax de profundidade entre as camadas */
.fundo{
transition:transform var(--seq-volta) var(--ease-saida),
filter var(--seq-volta) var(--ease-saida),
opacity var(--seq-volta) linear;
}
.fundo.is-mergulhando{
transform-origin:var(--org-x) var(--org-y);
transform:perspective(var(--persp)) translate3d(0,0,60px) scale(1.01);
/* o céu recua junto, mas continua lá: some o foco, não a imagem */
filter:blur(7px) brightness(.88); opacity:1;
transition:transform var(--seq-mergulho) var(--ease-mergulho),
filter var(--seq-mergulho) var(--ease-mergulho),
opacity var(--seq-mergulho) linear;
}
/* --- 3 · A CENA (230→650 ms) ------------------------------------------------
Cada camada chega de uma profundidade diferente e desblurra ao chegar:
parallax + DOF reais em Z, não um crossfade. Sem .is-aberta = longe; com
.is-aberta = assentada. Fechar só remove a classe: o inverso sai de graça. */
.cena{
position:fixed; inset:0; z-index:50; display:none; opacity:0;
contain:paint; outline:none;
/* A cena só intercepta o ponteiro quando é modal DE FATO. Em `is-montando`
ela já é display:block com z-index 50 (contra 1 do .palco) e opacity 0 —
um véu invisível de tela cheia por cima do organograma. Isso vale no 1º
frame da abertura e, sobretudo, nos ~280 ms entre o fim do fade de saída
e a limpeza: ali um clique num card batia no .cena__canvas transparente e
morria em silêncio. Medido: elementFromPoint no centro de um card devolvia
`cena__canvas`, não o card. */
pointer-events:none;
transition:opacity var(--seq-cena) var(--ease-saida);
}
.cena.is-montando{ display:block; } /* existe e já é focável, ainda invisível */
.cena.is-aberta{ display:block; opacity:1; pointer-events:auto; }
/* `.cena__dica` aparecia nas quatro regras desta seção e no bloco de
reduced-motion lá embaixo. O elemento nunca existiu no index.html nem foi
criado por JS — era a legenda "Esc para voltar" de um esboço que não entrou.
Saiu na limpeza da M1.4; as três saídas da cena (Esc, ✕ e clique fora)
continuam as mesmas, e quem as anuncia é o próprio botão ✕. */
.cena__fundo, .cena__canvas, .cena__video, .cena__scan, .cena__fechar{
transition:transform var(--seq-cena) var(--ease-saida),
opacity var(--seq-cena) var(--ease-saida),
filter var(--seq-cena) var(--ease-saida);
}
.cena__fundo { transform:perspective(var(--persp)) translate3d(0,0,-340px); opacity:0; }
.cena__canvas{ transform:perspective(var(--persp)) translate3d(0,0,-190px); opacity:0; filter:blur(10px); }
.cena__video { transform:translate(-50%,-50%) perspective(var(--persp)) translate3d(0,0,-190px); opacity:0; filter:blur(10px); }
.cena__scan { opacity:0; }
.cena__fechar{ opacity:0; transform:translate3d(0,-8px,0); }
.cena.is-aberta .cena__fundo,
.cena.is-aberta .cena__canvas{ transform:perspective(var(--persp)) translate3d(0,0,0); opacity:1; filter:none; }
.cena.is-aberta .cena__video { transform:translate(-50%,-50%); opacity:1; filter:none; }
.cena.is-aberta .cena__scan { opacity:.24; }
.cena.is-aberta .cena__fechar{ opacity:1; transform:none; }
/* --- 4 · WARP: varredura + aberração + pulso (260→780 ms) -------------------
Camadas criadas pelo JS (garantirCamadas), não precisam ir no index.html. */
.cena__warp{
position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
}
.cena.is-varrendo .cena__warp, .cena.is-varrendo-inv .cena__warp,
.cena.is-atravessando .cena__warp{ opacity:1; }
/* a linha carrega 4 faixas: R deslocada, verde central, B deslocada e o núcleo
branco — é a aberração cromática da própria varredura */
.warp__linha{
position:absolute; left:-6%; right:-6%; top:0; height:24vh;
mix-blend-mode:screen; opacity:0; filter:blur(1.2px);
background:
linear-gradient(180deg,transparent 26%,rgba(255,60,140,calc(.22*var(--ab-forca))) 33%,transparent 40%),
linear-gradient(180deg,transparent 40%,rgba(120,255,220,.16) 47%,transparent 54%),
linear-gradient(180deg,transparent 54%,rgba(60,170,255,calc(.34*var(--ab-forca))) 62%,transparent 70%),
linear-gradient(180deg,transparent 44%,rgba(190,240,255,.85) 50%,transparent 56%);
}
.cena.is-varrendo .warp__linha{ animation:warp-desce var(--seq-warp) var(--ease-warp) forwards; }
.cena.is-varrendo-inv .warp__linha{ animation:warp-sobe calc(var(--seq-warp)*.74) var(--ease-warp) forwards; }
@keyframes warp-desce{
0%{transform:translate3d(0,-34vh,0) scaleY(.55); opacity:0}
14%{opacity:1} 50%{transform:translate3d(0,42vh,0) scaleY(1.25)} 86%{opacity:1}
100%{transform:translate3d(0,118vh,0) scaleY(1.7); opacity:0}
}
@keyframes warp-sobe{
0%{transform:translate3d(0,110vh,0) scaleY(1.5); opacity:0}
18%{opacity:.9}
100%{transform:translate3d(0,-34vh,0) scaleY(.5); opacity:0}
}
/* pulso da travessia: nasce EXATAMENTE no centro do card e engole a tela */
.warp__pulso{
position:absolute; inset:0; mix-blend-mode:screen; opacity:0;
transform-origin:var(--warp-x) var(--warp-y);
background:radial-gradient(30% 30% at var(--warp-x) var(--warp-y),
rgba(255,255,255,.95) 0%, rgba(150,225,255,.6) 24%,
rgba(60,140,255,.2) 50%, transparent 74%);
}
.cena.is-atravessando .warp__pulso{ animation:warp-pulso var(--seq-pulso) var(--ease-saida) forwards; }
@keyframes warp-pulso{
0%{opacity:0; transform:scale(.16)} 22%{opacity:1; transform:scale(.72)}
100%{opacity:0; transform:scale(2.6)}
}
/* franja cromática no próprio holograma no instante da travessia */
.cena.is-atravessando .cena__canvas{ animation:warp-ab var(--seq-pulso) var(--ease-saida); }
@keyframes warp-ab{
0%{filter:none; transform:scale(1.03)}
30%{filter:drop-shadow(calc(-9px*var(--ab-forca)) 0 0 rgba(255,50,130,.55))
drop-shadow(calc(9px*var(--ab-forca)) 0 0 rgba(0,200,255,.55)) blur(.6px)}
100%{filter:none; transform:scale(1)}
}
/* --- 5 · ASSENTAMENTO: luz da base (720 ms) + texto (760 ms) ---------------- */
/* A luz da base NÃO é uma camada CSS: ela vive no canvas (js/base-holo.js),
com elipses concêntricas e feixe volumétrico reais. O .cena__base criado
pelo JS fica sem estilo de propósito — quem acende é GZ_Holograma. */
/* neutraliza a regra antiga de .cena__info (o escalonamento agora é por filho) */
.cena__info{ opacity:1; transform:none; transition:none; }
.cena__info > *{
opacity:0; filter:blur(4px);
transform:perspective(var(--persp)) translate3d(0,16px,-70px);
transition:opacity var(--seq-info) var(--ease-saida) var(--d,0ms),
transform calc(var(--seq-info)*1.15) var(--ease-saida) var(--d,0ms),
filter var(--seq-info) linear var(--d,0ms);
}
.cena__setor{--d:0ms} .cena__nome{--d:50ms} .cena__cargo{--d:100ms} .cena__atividades{--d:150ms}
.cena.is-assentada .cena__info > *{ opacity:1; transform:none; filter:none; }
.cena__atividades li{
opacity:0; transform:translate3d(0,10px,0);
transition:opacity .32s var(--ease-saida) var(--dl,0ms),
transform .38s var(--ease-saida) var(--dl,0ms);
}
.cena.is-assentada .cena__atividades li{ opacity:1; transform:none; }
.cena__atividades li:nth-child(1){--dl:170ms} .cena__atividades li:nth-child(2){--dl:205ms}
.cena__atividades li:nth-child(3){--dl:240ms} .cena__atividades li:nth-child(4){--dl:275ms}
.cena__atividades li:nth-child(5){--dl:310ms} .cena__atividades li:nth-child(6){--dl:345ms}
/* --- prefers-reduced-motion: a MESMA sequência, só que fade curto ----------
Nenhum caminho de código paralelo: o JS só comprime os tempos (te()) e o CSS
zera transforms/filtros/keyframes. Total <= 250 ms. */
@media (prefers-reduced-motion:reduce){
:root{
--seq-eleicao:.1s; --seq-mergulho:.14s; --seq-volta:.14s; --seq-cena:.14s;
--seq-warp:.01s; --seq-pulso:.01s; --seq-base:.14s; --seq-info:.14s;
--ab-forca:0;
}
.card.is-eleito, .arvore.is-cedendo .card:not(.is-eleito),
.palco.is-preparado, .palco.is-mergulhando,
.palco.is-mergulhando .cabecalho, .palco.is-mergulhando .titulo-bloco,
.palco.is-mergulhando .arvore,
.fundo.is-mergulhando, .cena__fundo, .cena__canvas, .cena__base,
.cena__info > *, .cena__atividades li, .cena__fechar{
transform:none!important;
}
/* o desfoque NÃO é movimento: é o que separa o holograma do organograma
atrás dele. Some o transform, fica o DOF. */
.palco.is-mergulhando, .palco.is-repousando{
filter:blur(10px) brightness(.92) saturate(.95)!important;
}
.cena__canvas, .cena__info > *,
.arvore.is-cedendo .card:not(.is-eleito){ filter:none!important; }
.card.is-eleito{ filter:brightness(1.2)!important; }
.cena__warp{ display:none!important; }
.cena.is-atravessando .cena__canvas{ animation:none!important; }
.cena__info > *, .cena__atividades li, .cena__fundo, .cena__canvas, .cena__base{
transition-delay:0s!important;
}
}
/* ===== FIM DO CSS ========================================================= */