/* ============================================================================
   ProfileCard — porte do componente do React Bits para CSS puro
   ----------------------------------------------------------------------------
   Este projeto não tem build nem React (roda de file:// por duplo clique), então
   o componente foi portado: a estrutura pc-* e a mecânica de variáveis do
   ponteiro são as mesmas do original; o JSX virou DOM em js/profile-card.js.

   DUAS ADAPTAÇÕES DELIBERADAS:

   1. TAMANHO. O original é um card-herói de 80svh. Aqui são 13 cards num anel
      que precisa caber na tela sem rolagem (requisito de apresentação ao vivo),
      então a escala inteira sai de --pc-w e a proporção 0.718 do original é
      preservada: 196 / 0.718 = 272,98 → os 273px de altura do slot.

      Duas correções que este parágrafo devia há tempo:

      · O "13" era mentira. Eram 14 pessoas em js/dados.js, e este arquivo
        dizia 13 desde o primeiro commit. Virou verdade agora, quando o AIAgent
        deixou de ser integrante e virou agente do Artur.

      · O tamanho agora é UM SÓ. Existiam dois — 196px para os três cards de
        liderança e 160px para os outros — e isso era hierarquia medida em
        pixels. Unificou-se no MAIOR dos dois, não no menor: encolher três
        pessoas para 160 não removeria a hierarquia, inverteria. Como toda a
        tipografia daqui é calc(--pc-w × k), crescer 22,5% pagou duas dívidas
        de legibilidade de graça: o cargo (k=.072) sobe de 11,5px para 14,1px,
        e o glifo ◱ do CTA (k=.053) sobe de 8,5px para 10,4px — ele era o menor
        #EC008C da peça inteira, a ~3,9:1 sobre o vidro do CTA.

   2. PALETA DO BRILHO HOLOGRÁFICO. Os --sunpillar-* do original são um
      arco-íris que inclui verde e amarelo — as duas cores que a Diretriz Gzero
      manda ficar fora desta peça. Foram trocados pela família da marca
      (magenta → rosa → violeta → coral). O efeito é o mesmo; a cor é da casa.
      Para voltar ao arco-íris original, veja o bloco .pc-arcoiris no fim.
   ========================================================================== */

.pc-card-wrapper{
  --pointer-x:50%; --pointer-y:50%;
  --pointer-from-center:0; --pointer-from-top:.5; --pointer-from-left:.5;
  --card-opacity:0;
  --rotate-x:0deg; --rotate-y:0deg;
  --background-x:50%; --background-y:50%;
  --icon:none; --grain:none;

  /* Brilho holográfico na família da marca — sem verde, sem amarelo */
  --sunpillar-1:#EC008C;   /* Rosa Spray   */
  --sunpillar-2:#EF5BA1;   /* Rosa Blush   */
  --sunpillar-3:#FCDFEB;   /* Rosa Névoa   */
  --sunpillar-4:#C9A6F5;   /* Roxo grifo   */
  --sunpillar-5:#9643FC;   /* Roxo Realce  */
  --sunpillar-6:#E84838;   /* Brasa        */

  --behind-glow-color:rgba(236,0,140,.34);
  --behind-glow-size:52%;
  --inner-gradient:linear-gradient(145deg, rgba(96,73,110,.55) 0%, rgba(236,0,140,.26) 100%);

  --pc-w:152px;                          /* fonte única da escala do card */
  --card-radius:calc(var(--pc-w) * .13);

  perspective:520px;
  transform:translate3d(0,0,.1px);
  position:relative;
  touch-action:none;
}

/* brilho radial que segue o cursor, ATRÁS do card */
.pc-behind{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),
             var(--behind-glow-color) 0%, transparent var(--behind-glow-size));
  filter:blur(38px) saturate(1);
  opacity:calc(.55 * var(--card-opacity));
  transition:opacity 200ms ease;
}
.pc-card-wrapper:hover, .pc-card-wrapper.active,
.pc-card-wrapper:focus-visible{ --card-opacity:1; }

/* O ANEL DE FOCO DO CARD É MAIS GROSSO QUE O DO RESTO DO PRODUTO (FIX-M0.3-m),
   e o que ele TIRA do recuo é o que ele PÕE no traço — de propósito.

   O anel global (css/estilo.css, `:focus-visible`) declara 2px sólidos com
   4,6:1, e não ENTREGA isso aqui: medido no pixel pintado, com tiro de controle
   na mesma execução, o traço de 2px perde tinta na rasterização e o pico não
   alcança a cor declarada em lado nenhum. Os lados DIREITO e BASE ficavam
   abaixo do piso de 3:1 que a WCAG 1.4.11 pede de um indicador de foco. Com 3px
   os quatro passam. A tabela dos quatro lados, nas três larguras do modo plano,
   está no ROADMAP, no fecho do FIX-M0.3-m — e só lá.

   NÃO É A ESCALA DO MOVIMENTO REDUZIDO, e isso foi medido: removendo o
   `scale(1.02)` que o card focado ganha em `prefers-reduced-motion`, os dois
   lados continuam reprovando. Também não é o `border-radius` nem algo pintando
   por cima — as três hipóteses foram refutadas com A/B de uma variável.

   POR QUE 3px + 2px DE RECUO, E NÃO 3px + 3px: o ALCANCE do anel (recuo +
   traço) é o que a tira do celular precisa reservar no padding para não
   recortá-lo (FIX-M0.3-k). Em 5px o orçamento de hoje serve; em 6px não serve —
   com a escala do movimento reduzido a exigência lateral passaria de 8px, que é
   o padding que existe. Mantendo o alcance, o conserto não toca em geometria
   nenhuma. Preso por testes/unidade/anel-foco-espessura.test.js (o piso do
   traço) e por testes/unidade/anel-tira.test.js (o alcance contra o padding).

   E O CANTO DELE É O CANTO DO CARD (FIX-M0.3-u). O `:focus-visible` global de
   css/estilo.css dá `border-radius:4px` a todo elemento focado, e o `.card` é um
   <button> sem raio próprio — então o anel cortava um canto quase reto em volta
   de um card de 25,74px de raio. Medido no pixel, com a borda do card tomada da
   caixa e do --card-radius e o anel tomado de máscara A/B: no meio do lado a
   folga é 1–2px (o próprio recuo) e ela cresce até 17,7px na última linha, nos
   QUATRO cantos. Com o raio do card, o perfil achata em 2,7px embaixo e 4,2px em
   cima. Os números estão no ROADMAP, no fecho do FIX-M0.3-u — e só lá.

   O VALOR NÃO PODE SER CRAVADO, e isso é medida: --pc-w vale 198px sem agentes
   e 96px com eles, na MESMA largura de janela, então o raio do card vale 25,74px
   numa hora e 12,48px na outra. Um número escrito à mão acerta um caso e erra o
   outro por 13px. Por isso o anel consome a MESMA variável que desenha o card.
   Preso por testes/unidade/anel-foco-canto.test.js. */
.pc-card-wrapper:focus-visible{
  outline-width:3px; outline-offset:2px;
  border-radius:var(--card-radius);
}

.pc-card-shell{ position:relative; z-index:1; }

.pc-card{
  width:var(--pc-w);
  aspect-ratio:.718;
  display:grid;
  border-radius:var(--card-radius);
  position:relative;
  background:rgba(6,5,9,.92);
  background-blend-mode:color-dodge, normal, normal, normal;
  box-shadow:rgba(0,0,0,.8) calc((var(--pointer-from-left) * 8px) - 3px)
             calc((var(--pointer-from-top) * 14px) - 5px) 18px -6px;
  transition:transform 1s ease;
  transform:translateZ(0) rotateX(0deg) rotateY(0deg);
  backface-visibility:hidden;
  overflow:hidden;
}
.pc-card-wrapper:hover .pc-card,
.pc-card-shell.active .pc-card{
  transition:none;
  transform:translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
}
.pc-card-shell.entering .pc-card{ transition:transform 180ms ease-out; }

.pc-card *{
  display:grid; grid-area:1/-1;
  border-radius:var(--card-radius);
  pointer-events:none;
}
/* ★ O RAIO NÃO PODE CHEGAR NO TEXTO — e chegava, com efeito visível.
   A regra acima é uma vassoura: ela existe para o empilhamento de camadas de
   vidro do card e acerta TODO descendente de .pc-card, inclusive o <h3> do
   nome. Em texto comum isso seria inócuo. Aqui não é, porque o nome não tem
   cor própria — ele é pintado por `background-clip:text`, ou seja, o GRADIENTE
   é que vira letra. E o `border-radius` recorta a área de pintura ANTES de ela
   virar glifo, então o que fica fora da caixa arredondada simplesmente não
   recebe tinta.
   MEDIDO no card do Dante: a caixa do <h3> tem 9,75px de altura e carregava
   12,48px de raio — 1,28× a própria altura. O navegador clampa isso até a
   caixa virar uma pílula, e as pontas das letras somem. O "D" perdia o pé da
   haste e "DANTE" lia "OANTE" na tela.
   O zero vai AQUI e não na vassoura: as camadas de vidro dependem dela. */
.pc-details, .pc-details h3, .pc-setor{ border-radius:0; }

.pc-inside{
  inset:0; position:absolute;
  background-image:var(--inner-gradient);
  background-color:rgba(6,5,9,.92);
  transform:none;
}

/* ---------- brilho holográfico ------------------------------------------- */
.pc-shine{
  mask-image:var(--icon); mask-mode:luminance; mask-repeat:repeat; mask-size:150%;
  mask-position:top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));
  transition:filter .8s ease;
  filter:brightness(.62) contrast(1.2) saturate(.42) opacity(.26);
  animation:pc-holo-bg 18s linear infinite;
  mix-blend-mode:color-dodge;
}
.pc-shine, .pc-shine::after{
  --space:5%; --angle:-45deg;
  transform:translate3d(0,0,1px);
  overflow:hidden; z-index:3;
  background:transparent; background-size:cover; background-position:center;
  background-image:
    repeating-linear-gradient(0deg,
      var(--sunpillar-1) calc(var(--space) * 1), var(--sunpillar-2) calc(var(--space) * 2),
      var(--sunpillar-3) calc(var(--space) * 3), var(--sunpillar-4) calc(var(--space) * 4),
      var(--sunpillar-5) calc(var(--space) * 5), var(--sunpillar-6) calc(var(--space) * 6),
      var(--sunpillar-1) calc(var(--space) * 7)),
    repeating-linear-gradient(var(--angle),
      #0e152e 0%, hsl(320,10%,60%) 3.8%, hsl(320,29%,66%) 4.5%,
      hsl(320,10%,60%) 5.2%, #0e152e 10%, #0e152e 12%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0,0%,0%,.1) 12%, hsla(0,0%,0%,.15) 20%, hsla(0,0%,0%,.25) 120%);
  background-position:0 var(--background-y), var(--background-x) var(--background-y), center;
  background-blend-mode:color, hard-light;
  background-size:500% 500%, 300% 300%, 200% 200%;
  background-repeat:repeat;
}
.pc-shine::before, .pc-shine::after{
  content:''; background-position:center; background-size:cover;
  grid-area:1/1; opacity:0; transition:opacity .8s ease;
}
/* O hover NÃO pode reescrever o filter sem repetir o opacity(): era esse o
   motivo do brilho saltar no hover — some o multiplicador e a camada vinha
   2.4x mais forte. Aqui o opacity fica, e o ganho é pequeno de propósito. */
.pc-card-wrapper:hover .pc-shine, .pc-card-shell.active .pc-shine{
  filter:brightness(.7) contrast(1.28) saturate(.46) opacity(.34);
  animation-play-state:paused;
}
/* eram opacity:1 — a soma das três camadas lavava o card inteiro */
.pc-card-wrapper:hover .pc-shine::before, .pc-card-shell.active .pc-shine::before{ opacity:.28; }
.pc-card-wrapper:hover .pc-shine::after,  .pc-card-shell.active .pc-shine::after{ opacity:.22; }

.pc-shine::before{
  background-image:
    linear-gradient(45deg, var(--sunpillar-4), var(--sunpillar-5), var(--sunpillar-6),
                    var(--sunpillar-1), var(--sunpillar-2), var(--sunpillar-3)),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),
                    hsl(0,0%,70%) 0%, hsla(0,0%,30%,.2) 90%),
    var(--grain);
  background-size:250% 250%, 100% 100%, 220px 220px;
  background-position:var(--pointer-x) var(--pointer-y), center,
                      calc(var(--pointer-x) * .01) calc(var(--pointer-y) * .01);
  background-blend-mode:color-dodge;
  filter:brightness(calc(2 - var(--pointer-from-center)))
         contrast(calc(var(--pointer-from-center) + 2))
         saturate(calc(.5 + var(--pointer-from-center)));
  mix-blend-mode:luminosity;
}
.pc-shine::after{
  background-position:0 var(--background-y),
                      calc(var(--background-x) * .4) calc(var(--background-y) * .5), center;
  background-size:200% 300%, 700% 700%, 100% 100%;
  mix-blend-mode:difference;
  filter:brightness(.8) contrast(1.5);
}

.pc-glare{
  transform:translate3d(0,0,1.1px);
  overflow:hidden;
  background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
                   hsla(310,25%,80%,.42) 12%, hsla(300,40%,26%,.5) 90%);
  mix-blend-mode:overlay;
  filter:brightness(.62) contrast(1.02);
  z-index:4;
}

/* ---------- retrato ------------------------------------------------------- */
.pc-avatar-content{
  mix-blend-mode:luminosity;
  overflow:hidden;
  backface-visibility:hidden;
}
/* A foto ocupa a faixa do card ABAIXO do bloco de título.
   Full-bleed até o topo colocava o rosto exatamente onde ficam o nome e o
   cargo — e nenhum object-position resolve isso, porque numa foto quadrada
   dentro de um card 0.718 não sobra altura para deslocar. Reservando os 20%
   de cima, o rosto cai no miolo do card e o texto fica sobre fundo limpo.

   --pc-foco é o object-position da pessoa (medido foto a foto). */
.pc-avatar-content .avatar{
  position:absolute; left:50%;
  top:var(--pc-foto-topo, 20%);
  height:calc(100% - var(--pc-foto-topo, 20%));
  width:100%;
  object-fit:cover;
  object-position:var(--pc-foco, 50% 30%);
  transform-origin:50% 100%;
  transform:translateX(calc(-50% + (var(--pointer-from-left) - .5) * 6px)) translateZ(0)
            scaleY(calc(1 + (var(--pointer-from-top) - .5) * .02))
            scaleX(calc(1 + (var(--pointer-from-left) - .5) * .01));
  backface-visibility:hidden; will-change:transform;
  transition:transform 120ms ease-out;
}

/* Fallback SEM foto — a inicial estilizada.
   O <span class="pc-inicial"> é criado em js/profile-card.js desde o começo,
   mas não existia NENHUMA regra para ele: herdava só o `display:grid` do
   seletor `.pc-card *`, sem tamanho nem posição. Resultado: quem não tinha
   retrato (Hugo, Laura, Giovanna) ficava com o card visualmente VAZIO, e não
   com o fallback que o README promete.

   Fica na camada do retrato de propósito: o `mix-blend-mode:luminosity` do pai
   tinge o glifo com a cor do próprio card, então a inicial nasce na cor do
   setor sem precisar receber a variável. O padding-top a empurra para o miolo,
   abaixo do bloco de nome e cargo. */
.pc-inicial{
  display:flex; align-items:center; justify-content:center;
  padding-top:calc(var(--pc-w) * .22);
  font-family:var(--gz-font-display, sans-serif);
  font-size:calc(var(--pc-w) * .56);
  line-height:1; letter-spacing:.02em;
  color:rgba(255,255,255,.34);
  text-shadow:0 0 calc(var(--pc-w) * .10) rgba(255,255,255,.20);
  -webkit-user-select:none; user-select:none;
}

/* ---------- texto --------------------------------------------------------- */
.pc-content:not(.pc-avatar-content){
  max-height:100%; overflow:hidden; text-align:center; position:relative;
  transform:translate3d(calc(var(--pointer-from-left) * -5px + 2.5px),
                        calc(var(--pointer-from-top) * -5px + 2.5px), .1px);
  z-index:5;
  /* SEM mix-blend-mode aqui. Com `luminosity`, o nome tomava a cor do que
     estivesse atrás — sobre uma foto de fundo claro ele simplesmente sumia. */
}
/* Véu no topo: garante o nome legível sobre QUALQUER foto, inclusive as que
   vêm com fundo claro. Sem ele o card depende do retrato ser escuro. */
.pc-content:not(.pc-avatar-content)::before{
  content:""; position:absolute; inset:0 0 auto 0; height:52%;
  z-index:-1; pointer-events:none;
  border-radius:var(--card-radius) var(--card-radius) 0 0;
  background:linear-gradient(180deg,
    rgba(4,3,8,.88) 0%, rgba(4,3,8,.66) 42%, rgba(4,3,8,.28) 74%, transparent 100%);
}
/* O topo saiu de .085 para .062 porque a etiqueta de setor entrou ACIMA do
   <h3>: sem subir o bloco, o nome descia inteiro. As contas, com --pc-w:196px:
   a etiqueta custa 9,4px (font-size .048 × 196, line-height 1) + 5,5px de
   margem = 14,9px; o topo cai de 16,7px para 12,2px, então o <h3> começa em
   27,1px em vez de 16,7px — desce ~10px, e não os 15 da etiqueta inteira.
   Continua cabendo com folga, e isto foi MEDIDO no navegador, não estimado:
   o card tem 273px, o véu de .pc-content::before cobre 52% dessa altura
   (141,9px) e o bloco etiqueta+nome+cargo media 66,8px, terminando a 79px do
   topo do card. (Com a saída do cargo o bloco encolheu para etiqueta+nome e a
   folga só aumentou — o `top` não precisou mexer, e por isso não mexeu: subir
   o nome agora seria mudar a composição de todo mundo por causa de uma
   remoção que já tinha o efeito desejado.) O retrato começa em
   --pc-foto-topo:20% (54,6px) e por isso passa POR TRÁS do fim do bloco — já
   era assim antes da etiqueta, e é exatamente para isso que o véu existe. */
.pc-details{
  width:100%; position:absolute; top:calc(var(--pc-w) * .062);
  display:flex; flex-direction:column; align-items:center;
  padding:0 calc(var(--pc-w) * .06);
}

/* ETIQUETA DE SETOR — herdeira direta da pílula que sumiu com os grupos.
   É de propósito a MESMA voz tipográfica do antigo .setor-node__sub — caixa
   alta, .11em de espacejamento —, porque a pílula tinha esse tratamento para
   ser rótulo e não título, e essa parte continua valendo: o que mudou foi o
   suporte, não a hierarquia da informação. **O PESO 200 do original NÃO
   sobreviveu** ao corpo de 9,5px, e o porquê está medido no fim deste bloco
   (FIX-M0.6-c) — quem ler só este parágrafo não deve concluir que 200 é
   decisão viva.
   .048 × 196 = 9,4px, praticamente o mesmo corpo do .58rem (9,28px) que já
   rodava na pílula. Cor: o `rotulo` do setor, que é a versão clareada da cor
   de acento e já vem com razão de contraste medida. Aqui ela MELHORA: as
   razões da casa foram medidas sobre o vidro (--vidro-bg-forte no pixel mais
   claro do céu) e a etiqueta vive sobre o véu do card, mais escuro —
   composto ≈ #0A080F. Medido sobre esse fundo:
     Liderança  #F147AC  5,92:1
     Inovação   #FCDFEB 16,04:1
     Design     #B378FD  6,62:1
     Financeiro #EE7B70  7,31:1

   ⚠️ A TABELA ACIMA É HISTÓRICA — hoje NENHUMA área usa as outras três cores.
   Medido no produto rodando: os 5 setores de js/dados.js declaram `rotulo`
   #F147AC e as 16 etiquetas do palco renderizam rgb(241,71,172), uma só cor.
   A tabela fica porque registra o que cada área receberia se a cor por área
   voltasse (o histórico está em js/dados.js); ela NÃO descreve a tela de hoje.
   Divergência anterior a este bloco e registrada nas Descobertas do ROADMAP.

   `display:block` é explícito, não decorativo: `.pc-card *` (bem acima neste
   arquivo) força `display:grid; grid-area:1/-1` em TODO descendente de
   .pc-card. Dentro do .pc-details, que é flex column, o grid-area é ignorado,
   mas o `display` não seria — e um grid item de uma linha ganharia altura
   automática diferente. As duas regras têm a mesma especificidade (0-1-0), e
   esta vence só por vir depois na ordem do arquivo: NÃO mova este bloco para
   cima de `.pc-card *`.

   `white-space:nowrap` é obrigatório, e a folga é MENOR do que parece — os
   números abaixo foram medidos no navegador, com a Hepta Slab realmente
   carregada, porque a estimativa de papel errou em 15%:

     texto mais longo    "INOVAÇÃO & ACELERAÇÃO" (21 caracteres)
     largura útil        196 − 2×11,8 = 172,48px  (.pc-details com padding .06)
     medido a .048       165,7px  →  folga de 6,8px (3,9%)

   Ou seja: cabe, mas por pouco. Quem for editar o NOME de um setor em
   dados.js tem 6,8px de margem, não mais — "INOVAÇÃO & ACELERAÇÃO" já é o
   pior caso e está a 96% do limite.

   Detalhe contra-intuitivo que vale registrar: a cadeia de fallback é mais
   ESTREITA que a fonte real, não mais larga — medido, Rockwell dá 147px e o
   serif genérico 145,4px contra os 165,7px da Hepta Slab. Então uma falha de
   carregamento da fonte AFROUXA o encaixe; o caso apertado é o normal, com a
   fonte funcionando. Não existe cenário de fallback que estoure.

   Se ainda assim precisar de ar (um setor novo com nome mais longo), o ajuste
   é .048 → .044, que mede 151,9px e devolve a folga para 20,6px. NUNCA
   white-space:normal: duas linhas em um card e uma em outro desalinham os 13
   nomes entre si, que é a hierarquia voltando pela porta dos fundos.

   O PESO É `--gz-weight-bold` E ISSO CUSTOU UMA MEDIÇÃO — FIX-M0.6-c. Aqui
   havia `font-weight:200`, e o contraste que este CSS PROMETE (medido no
   produto: 5,83 a 5,90:1 do #F147AC sobre o fundo composto do véu) NUNCA
   CHEGAVA À TELA — o que chegava era 1,44 a 1,51:1. Em 9,504px a Hepta Slab
   (variável, 200–900) desenha no peso 200 um traço mais fino que um pixel, e a
   cor declarada não é atingida em pixel nenhum. É o mesmo defeito que o
   `FIX-M0.4-e` corrigiu no chip do holograma — lá em 11,52px, aqui 18% menor.

   Medido varrendo a REGIÃO do screenshot pela rampa de cor (tools/rampa.js).
   SÓ O CARD FRONTAL SERVE DE REFERÊNCIA, e isso não é detalhe: o anel apaga e
   borra por profundidade (`opacity:1 / filter:none` apenas no `.cc-front`; o
   vizinho imediato já vem a ~0,66 com blur). Medir "os cards da frente" no
   plural mistura o card aceso com cards que o produto ESCOLHEU apagar, e
   devolve uma faixa que não é de peso, é de profundidade. Os números abaixo são
   de 8 rótulos distintos, cada um trazido ao `.cc-front`, em 1280×800:

     peso   cobertura do pico   contraste RENDERIZADO   (declarado 5,83–5,90:1)
      200      0,276 – 0,303         1,44 – 1,51:1
      300      0,355 – 0,411         1,67 – 1,88:1
      400      0,543 – 0,603         2,46 – 2,77:1
      500      0,653 – 0,696         3,07 – 3,34:1
      700      0,874 – 0,926         4,69 – 5,13:1

   O CRITÉRIO QUE DECIDE É A RÉGUA DA PRÓPRIA TELA, e não um limiar abstrato: o
   controle — os botões do trilho, mesma fonte, peso 200 em 12,8px — rende
   0,633 a 0,752. O 400 (0,54–0,60) NÃO alcança essa régua; o 700 (0,87–0,93)
   alcança com folga. É por isso que o remédio aqui é mais pesado que o do
   `FIX-M0.4-e`.

   HONESTIDADE SOBRE O 4,5:1, para ninguém reabrir um FIX que não existe: o
   contraste RENDERIZADO no 700 fica em torno da linha de 4,5 — 4,69–5,13:1 na
   varredura dos 8 rótulos, e uma segunda campanha independente, repetindo a
   mesma captura, achou 4,27–5,15:1. A dispersão é real e tem causa: o card
   flutua, e 3 capturas IDÊNTICAS do mesmo rótulo variam 0,024 de cobertura. Ou
   seja, o 700 leva o renderizado de ~1,5:1 para ~4,3–5,2:1 contra 5,86:1
   declarado — não o crava acima de 4,5. Quem re-medir e achar 4,3 não achou
   regressão nenhuma; achou o mesmo ruído.

   O 400 era a previsão feita em `<canvas>`, e o canvas ERROU: a rasterização de
   `fillText` não é a do DOM. Quem for re-medir, meça no PNG do produto.

   E A FOLGA DA LINHA SOBREVIVE, que era a maior preocupação do FIX. Medido em
   px de LAYOUT (a caixa dentro do anel vem escalada por uma cadeia matrix3d com
   rotação e perspectiva — dali não sai fator de escala nenhum, então a medida é
   feita por sonda fora da subárvore transformada), com `--pc-w:198`, largura
   útil de 174,24px:

     peso 200 → 167,34px (folga 6,90)      peso 500 → 165,70px (folga 8,54)
     peso 300 → 166,88px (folga 7,36)      peso 700 → 168,19px (folga 6,05)
     peso 400 → 166,19px (folga 8,05)      peso 900 → 173,05px (folga 1,19)

   Contra-intuitivo e por isso registrado: a largura CAI de 200 até 500 e só
   volta a subir depois. **É esta tabela que tira o 900 da mesa** — 1,19px de
   folga significa que um caractere a mais em qualquer nome de área estoura a
   linha. O `nowrap` continua obrigatório.

   E CUIDADO COM O INSTRUMENTO: `scrollWidth > clientWidth` NÃO detecta
   transbordo aqui. `.pc-setor` é caixa shrink-to-fit dentro do `.pc-details`
   (flex column centralizado), então a caixa dela nasce do tamanho do texto e
   aquela comparação nunca dispara. O transbordo, se houver, é da caixa dela
   contra a caixa de CONTEÚDO do pai — que é o que a tabela acima mede. */
.pc-setor{
  display:block; text-align:center;
  font-family:var(--gz-font-slab); font-weight:var(--gz-weight-bold);
  font-size:calc(var(--pc-w) * .048);
  letter-spacing:.11em; text-transform:uppercase;
  line-height:1;
  margin-bottom:calc(var(--pc-w) * .028);
  white-space:nowrap;
  color:var(--rot, var(--c, #EC008C));
}

.pc-details h3{
  font-family:var(--gz-font-display, sans-serif);
  font-weight:600; margin:0;
  font-size:calc(var(--pc-w) * .155); line-height:1.05;
  letter-spacing:.01em;
  background-image:linear-gradient(to bottom, #fff, #d9a8ce);
  -webkit-text-fill-color:transparent;
  background-clip:text; -webkit-background-clip:text;
}
/* O BLOCO `.pc-details p` (o cargo) FOI REMOVIDO junto com o elemento — ver a
   nota em js/profile-card.js. Ficaria como CSS morto esperando alguém achar que
   o cargo ainda é renderizado e ir procurar por que não aparece. */

/* ---------- chamada para o holograma -------------------------------------- */
.pc-cta{
  position:absolute; left:50%; bottom:calc(var(--pc-w) * .055);
  transform:translateX(-50%);
  z-index:6; display:inline-flex; align-items:center; gap:.4em;
  padding:calc(var(--pc-w) * .035) calc(var(--pc-w) * .075);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-family:var(--gz-font-codigo, monospace);
  font-size:calc(var(--pc-w) * .053);
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.94);
  white-space:nowrap;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.pc-cta::before{ content:"◱"; color:var(--c,#EC008C); }
.pc-card-wrapper:hover .pc-cta, .pc-card-wrapper:focus-visible .pc-cta{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.16);
  transform:translateX(-50%) translateY(-1px);
}

/* barra de acento do setor no topo — mantém o código de cor da árvore */
.pc-acento{
  position:absolute; top:0; left:18%; right:18%; height:2px;
  border-radius:0 0 2px 2px; z-index:7;
  background:linear-gradient(90deg, transparent, var(--c,#EC008C), transparent);
  box-shadow:0 0 7px color-mix(in srgb, var(--c,#EC008C) 50%, transparent);
}

@keyframes pc-holo-bg{
  0%  { background-position:0 var(--background-y), 0 0, center; }
  100%{ background-position:0 var(--background-y), 90% 90%, center; }
}

/* Arco-íris original do React Bits — inclui verde e amarelo, que a Diretriz
   Gzero mantém fora desta peça. Adicione a classe .pc-arcoiris no wrapper se
   quiser o efeito original. */
.pc-card-wrapper.pc-arcoiris{
  --sunpillar-1:hsl(2,100%,73%);   --sunpillar-2:hsl(53,100%,69%);
  --sunpillar-3:hsl(93,100%,69%);  --sunpillar-4:hsl(176,100%,76%);
  --sunpillar-5:hsl(228,100%,74%); --sunpillar-6:hsl(283,100%,73%);
}

@media (prefers-reduced-motion:reduce){
  .pc-shine{ animation:none !important; }
  .pc-card{ transition:none !important; transform:none !important; }
  .pc-avatar-content .avatar{ transition:none !important; }
}