/* ============================================================
   CLIENTES — o favo.

   A silhueta do cubo da marca é um hexágono de ponta para cima.
   Ladrilhá-lo é desenhar o grupo visto de frente: cada cliente é
   uma faceta, e a marca ocupa a célula do meio. A forma não é
   enfeite — ela diz de onde vem a luz.

   Estado de repouso: silhueta branca chapada. Um PNG de cliente
   vem em cor de marca e fundo transparente; sobre o preto do site,
   logo escuro sumiria e cor contra cor brigaria. `brightness(0)`
   pinta cada pixel opaco de preto preservando o alfa, e `invert(1)`
   o vira branco — sobra a silhueta, sempre visível, sempre uniforme.

   Estado aceso: a célula se enche de luz e o `filter` sai. O logo
   real aparece, com a cor da marca, sobre uma placa clara onde
   logo escuro também se lê. É o conceito da marca funcionando como
   mecanismo, não como decoração: a luz revela a cor verdadeira.
   ============================================================ */

/* ---------- O favo ------------------------------------------
   Uma lista de verdade: doze clientes são doze itens, e o leitor
   de tela anuncia a contagem antes de entrar neles.

   O encaixe é feito em grade, sem divs de fileira. As colunas são
   MEIAS células, e cada hexágono ocupa duas — assim a fileira do
   meio começa na coluna 1 e as de fora na coluna 2, que é
   exatamente a meia célula de deslocamento que o favo exige. Só
   as três primeiras células de cada fileira precisam ser
   posicionadas; as outras caem sozinhas por posicionamento
   automático.
   ------------------------------------------------------------- */

.favo{
  /* Largura da célula. A altura sai daqui: hexágono regular de
     ponta para cima tem altura = largura × 2/√3. */
  --hex-l: clamp(88px, 11.5vw, 150px);
  --hex-a: calc(var(--hex-l) * 1.1547);
  --vao: clamp(5px, .7vw, 10px);
  --meia: calc((var(--hex-l) + var(--vao)) / 2);

  display: grid;
  grid-template-columns: repeat(10, var(--meia));
  /* A fileira avança três quartos da altura da célula: é o quanto
     sobra depois que a ponta do hexágono de baixo entra por baixo
     do de cima. A célula transborda a própria linha de propósito. */
  grid-auto-rows: calc(var(--hex-a) * .75 + var(--vao) * .5);
  justify-content: center;

  margin: 0;
  padding: 0 0 calc(var(--hex-a) * .25 - var(--vao) * .5);
  list-style: none;
}

.celula-caixa{
  grid-column: span 2;
  justify-self: center;   /* deixa meio vão de cada lado */
  align-self: start;      /* transborda para baixo, não estica */
  width: var(--hex-l);
  height: var(--hex-a);
}

/* `--d` chega por atributo, não por `style` inline. Parece detalhe e
   não é: um único `style=""` no documento obriga a política de
   segurança a permitir `style-src 'unsafe-inline'`, e essa permissão
   vale para a página inteira. Trocando por atributo, a CSP pode
   negar estilo embutido por completo. */
.celula-caixa[data-d="1"]{ --d: 1; }
.celula-caixa[data-d="2"]{ --d: 2; }
.celula-caixa[data-d="3"]{ --d: 3; }
.celula-caixa[data-d="4"]{ --d: 4; }
.celula-caixa[data-d="5"]{ --d: 5; }
/* Vai até 5 porque o favo maior previsto (6/7/6, dezoito clientes)
   não passa de 3 passos do centro, e sobra folga. Um `data-d` fora
   desta lista não quebra nada: cai no `var(--d, 0)` e a célula chega
   junto com o cubo, sem a onda. É perda de efeito, não de função —
   mas é preciso acrescentar a linha aqui para recuperá-la. */

/* As três âncoras de fileira. O resto do favo se posiciona sozinho. */
.celula-caixa[data-fila="1"]{ grid-row: 1; grid-column: 2 / span 2; }
.celula-caixa[data-fila="2"]{ grid-row: 2; grid-column: 1 / span 2; }
.celula-caixa[data-fila="3"]{ grid-row: 3; grid-column: 2 / span 2; }

/* ---------- Porte: a disposição segue a quantidade -------------
   Um favo de doze células com onze vazias não lê "grupo novo", lê
   "grupo sem clientes". O tamanho e a disposição mudam com quantos
   clientes existem de fato, para a página estar sempre cheia do
   que ela tem — nunca vazia do que ainda não tem.

   PAR — a marca e um cliente, encaixados por uma face. Sem favo,
   porque com duas células não existe favo: existe um par, e ele
   precisa ter porte. Uma fileira só, então a linha da grade tem a
   altura inteira da célula (nada transborda para baixo).
   ------------------------------------------------------------- */

.favo[data-porte="par"]{
  --hex-l: clamp(150px, 25vw, 260px);
  grid-template-columns: repeat(4, var(--meia));
  grid-auto-rows: var(--hex-a);
  padding-bottom: 0;
}

/* ---------- A célula ------------------------------------------ */

.celula{
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  text-decoration: none;
  /* Sem `clip-path` aqui de propósito: ele recortaria o anel de
     foco junto com a caixa, e o teclado perderia o único sinal de
     onde está. O hexágono é desenhado em SVG, atrás do conteúdo. */
}

.moldura{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;          /* o traço nas bordas não pode ser cortado */
  pointer-events: none;
}
.moldura .borda{
  fill: rgb(255 255 255 / .022);
  stroke: rgb(255 255 255 / .38);   /* 3,45:1 — a célula precisa ter forma */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke .32s ease, fill .32s ease;
}
/* A placa de luz. Fica em 0 e sobe quando a célula acende. */
.moldura .placa{
  fill: var(--placa);
  opacity: 0;
  transition: opacity .32s ease;
}

/* ---------- Conteúdo da célula -------------------------------- */

/* A caixa útil dentro do hexágono. Larga o bastante para um logo
   de três linhas empilhadas continuar legível, estreita o bastante
   para não encostar nas faces inclinadas. */
.logo{
  position: relative;
  width: 72%; height: 62%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(.82);
  transition: filter .32s ease;
}

/* Quando não há arquivo de logo, o nome do cliente é a marca. Uma
   parede de tipos bem espaçados não é um estado de falha — é como
   metade das paredes de clientes do mundo se apresenta. */
.nome{
  position: relative;
  padding-inline: .5rem;
  font-family: var(--display);
  font-stretch: expanded;
  font-weight: 700;
  /* Amarrado ao tamanho da célula, não à largura da janela: num
     hexágono de 260px o nome precisa crescer junto, senão fica
     perdido no meio dele. */
  font-size: clamp(.62rem, calc(var(--hex-l) * .105), 1.05rem);
  letter-spacing: .12em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: var(--aceso);         /* 11,1:1 sobre o breu */
  transition: color .32s ease;
  overflow-wrap: anywhere;
}

/* Com logo, o nome sai da vista mas continua sendo o nome acessível
   do link. `:has` sem suporte degrada para logo + nome visíveis:
   feio por um instante, nunca quebrado. */
.celula:has(.logo) .nome{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Imagem que não carregou. O CSS sozinho não sabe disso — `:has`
   enxerga a tag, não o download —, então quem marca a célula é o
   clientes.js. Sem isto, um caminho de arquivo errado deixava o
   ícone de imagem quebrada no lugar e sumia com o nome da empresa,
   exatamente o oposto do que o LEIA-ME promete. Depois da regra
   acima porque as duas têm a mesma especificidade. */
.celula.logo-falhou .logo{ display: none; }
.celula.logo-falhou .nome{
  position: static; width: auto; height: auto;
  margin: 0; padding-inline: .5rem;
  clip-path: none; overflow: visible; white-space: normal;
}

/* A seta de saída. Aparece só na célula acesa; quem não vê a seta
   ainda ouve "abre o site em nova aba" no nome do link. */
.saida{
  position: absolute;
  right: 18%; top: 20%;
  font-size: .68rem;
  line-height: 1;
  color: var(--breu);
  opacity: 0;
  transition: opacity .32s ease;
}

/* ---------- Acesa --------------------------------------------- */

.celula:hover .placa,
.celula:focus-visible .placa{ opacity: .95; }

.celula:hover .borda,
.celula:focus-visible .borda{ stroke: var(--lux-cor); fill: transparent; }

.celula:hover .logo,
.celula:focus-visible .logo{ filter: none; }

.celula:hover .nome,
.celula:focus-visible .nome{ color: var(--breu); }   /* 16,2:1 sobre a placa */

.celula:hover .saida,
.celula:focus-visible .saida{ opacity: .72; }

/* ---------- Logo claro: a célula acende ao contrário -----------
   Nem todo cliente tem logo escuro. Um logo feito para fundo
   escuro — branco, ou branco com uma cor de destaque — sumiria
   por completo sobre a placa clara. Aqui a luz vem por dentro em
   vez de por trás: o chão da célula sobe um tom, a borda vai a
   branco cheio, e o que reaparece é a cor de destaque do logo,
   que o `brightness(0) invert(1)` tinha achatado no repouso.

   O gesto continua o mesmo — a luz revela a cor verdadeira. Só a
   direção muda, porque o material é outro.
   ------------------------------------------------------------- */

.celula[data-logo="claro"] .placa{ fill: #171a1f; }

.celula[data-logo="claro"]:hover .placa,
.celula[data-logo="claro"]:focus-visible .placa{ opacity: 1; }

.celula[data-logo="claro"]:hover .nome,
.celula[data-logo="claro"]:focus-visible .nome{ color: var(--lux-cor); }

.celula[data-logo="claro"]:hover .saida,
.celula[data-logo="claro"]:focus-visible .saida{ color: var(--aceso); }

/* ---------- O cubo no meio do favo ---------------------------- */

.celula-marca{ cursor: default; }
.celula-marca .cubo{ width: 78%; margin: 0; }
.celula-marca .moldura .borda{
  fill: none;
  stroke: rgb(255 255 255 / .16);   /* a marca não é alvo: recua */
}

/* ---------- Cabeçalho da página ------------------------------- */

.palco-clientes{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vh, 2.4rem);
  padding-top: clamp(1rem, 3vh, 2rem);
}

.titulo{
  margin: 0;
  font-family: var(--display);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1;
  letter-spacing: .22em;
  text-indent: .22em;          /* compensa o tracking na última letra */
  text-transform: uppercase;
  text-align: center;
  color: var(--aceso);
}

.chamada{
  margin: .8rem 0 0;
  max-width: 42ch;
  text-align: center;
  font-size: clamp(.82rem, 1.05vw, .95rem);
  line-height: 1.65;
  color: var(--aco);           /* 6,4:1 sobre o breu */
  text-wrap: balance;
}

/* ---------- A chegada -----------------------------------------
   Um momento só, do centro para fora, e depois a parede fica
   parada. `--d` é a distância da célula até a marca, escrita à mão
   no HTML: é ela que faz a luz parecer nascer no cubo.

   Depois de ~2,6s nada mais se move além do cubo, que já tem o
   controle de pausa da base. Uma parede de doze logos pulsando
   para sempre seria ruído, e exigiria que o usuário pausasse a
   página para conseguir lê-la.
   ------------------------------------------------------------- */

.celula{
  animation: surgir .58s cubic-bezier(.16,.9,.3,1) both;
  animation-delay: calc(.5s + var(--d, 0) * .16s);
}
@keyframes surgir{
  from{ opacity: 0; scale: .82; }
  to  { opacity: 1; scale: 1; }
}

/* A varredura: o traço de cada célula clareia uma vez, na mesma
   ordem de dentro para fora, e volta ao repouso. */
.celula .borda{
  animation: varrer 1.1s ease-out both;
  animation-delay: calc(.62s + var(--d, 0) * .16s);
}
@keyframes varrer{
  0%  { stroke: rgb(255 255 255 / .38); }
  26% { stroke: rgb(255 255 255 / .92); }
  100%{ stroke: rgb(255 255 255 / .38); }
}
/* A marca não chega nem é varrida: ela já estava aqui, e é dela que
   a luz sai. Declarado nesta seção, e não junto do resto de
   `.celula-marca`, porque as duas regras têm a mesma especificidade
   e quem vem depois é que ganha. */
.celula-marca,
.celula-marca .borda{ animation: none; }

/* ---------- Telas estreitas -----------------------------------
   Um favo de treze células não cabe em 360px sem virar ilegível.
   Abaixo de 760px o encaixe é abandonado e as células viram uma
   grade comum, que rola. As âncoras de fileira são desfeitas para
   o posicionamento automático voltar a valer.
   ------------------------------------------------------------- */

@media (max-width: 760px){
  .favo{
    /* Maior que no favo: sem o encaixe das fileiras não há motivo
       para espremer, e um logo de 88px não se lê no celular. */
    --hex-l: clamp(116px, 30vw, 150px);
    /* `width: 100%` não é enfeite. `.favo` é item de um flex com
       `align-items: center`, então sua largura seria indefinida — e
       com espaço indefinido a especificação manda `auto-fit`
       resolver para UMA repetição. Sem esta linha, os treze
       hexágonos viram uma coluna só. */
    width: 100%;
    grid-template-columns: repeat(auto-fit, var(--hex-l));
    grid-auto-rows: auto;
    gap: var(--vao);
    padding-bottom: 0;
  }
  .celula-caixa,
  .celula-caixa[data-fila]{ grid-column: auto; grid-row: auto; }

  /* O par continua sendo um par no celular — duas células lado a
     lado é o que cabe e é o que significa. Só o tamanho cede: com
     o valor de tela larga, as quatro meias-colunas estouravam a
     largura útil a 320px.

     E ele precisa recuperar o `span 2` que o reset acima desfaz.
     O reset existe para o favo comum, cujas colunas são células
     inteiras; no par elas são MEIAS, e sem o span cada hexágono
     de 137px cai numa coluna de 71px — os dois se sobrepõem em
     61px. O `gap` também volta a zero: aqui o espaçamento vem da
     centralização dentro do vão de duas colunas, como na tela
     larga, e somar os dois afastaria as células demais. */
  .favo[data-porte="par"]{ --hex-l: clamp(112px, 38vw, 200px); gap: 0; }
  .favo[data-porte="par"] .celula-caixa{ grid-column: span 2; }

  .palco-clientes{ justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce){
  /* A chegada inteira vira estado final. Sem `opacity: 1` explícito
     o `both` deixaria a célula presa no quadro inicial quando a
     duração cai para .001ms antes do delay vencer. */
  .celula{ animation: none; opacity: 1; scale: 1; }
  .celula .borda{ animation: none; }
}