/* Grupo Dls/ - /grupo
   Seis cenas, e um squircle que se subdivide ao longo delas: 1 no hero,
   3 nas unidades, 4 no metodo, dezenas nas pessoas. A forma nunca muda;
   so o numero, a proporcao e o que passa dentro.

   Esta folha nao importa `scenes.css`: a /grupo nao reusa nenhum
   componente de cena da home. E a diferenca para a /comunicacao, que
   traz a folha inteira por causa da faixa de cases. */

/* ---------- o chao ----------
   Preto do comeco ao fim, com uma excecao coreografada na cena 4.

   CONSOME OS TOKENS DE TEMA, e nao a paleta crua. Escrito como
   `color: var(--c-white)`, o preto do tema claro nunca chegava na cena 4:
   `[data-theme="light"]` redefine `--fg`, mas quem ja tinha resolvido
   para branco no corpo herda branco concreto para baixo. Consumindo
   `var(--fg)`, cada cena que declarar tema pega a cor certa sozinha - e a
   proxima cena que inverter nao repete o defeito. E' o mesmo padrao do
   `.convite` em `scenes.css`. */
.gr-page {
  background: var(--bg);
  color: var(--fg);
}

/* AS TRES FATIAS DO GRADIENTE-ASSINATURA, declaradas UMA VEZ.
   Os tokens ja definem o gradiente como a mistura aritmetica das tres
   unidades: azul Elleven + amarelo Dls/ = verde, e o lime Metrik mora
   entre os dois. Cada unidade recebe a sua fatia.

   Elas vivem aqui, e nao dentro de cada cena, porque DUAS cenas usam as
   mesmas tres cores: o squircle do hero pousa na cena 2 e tem de chegar
   exatamente na cor que o squircle da unidade ja tem. Duas copias dos
   mesmos tres valores divergem na primeira vez que alguem ajustar uma. */
.gr-page {
  --fatia-comunicacao: linear-gradient(150deg, var(--grad-4), var(--grad-5));
  --fatia-tecnologia:  linear-gradient(150deg, var(--grad-1), var(--grad-2));
  --fatia-performance: linear-gradient(150deg, var(--grad-3), var(--grad-4));
}

/* Cada cena declara o proprio fundo. Sem isso, a inversao da cena 4
   deixaria as vizinhas transparentes sobre o corpo e a fronteira do
   bloco claro sumiria no meio de uma transicao. */
.gr-hero,
.gr-unidades,
.gr-metodo,
.gr-reel,
.gr-pessoas {
  background: var(--bg);
}

/* AS SUPERFICIES CLARAS DA PAGINA - hoje uma, os pilares. Foram duas por
   uma rodada: missao/visao/valores chegou clara e saiu a pedido da CEO
   (25/08). O SELETOR FICA NOMEANDO A CONDICAO mesmo com uma cena so', e
   de proposito - foi trocar `.gr-pilares` por `[data-theme="light"]` que
   fez a segunda cena entrar sem uma linha nova, e vai fazer a proxima
   entrar do mesmo jeito.

   `#conteudo > section[data-theme="light"]` e nao `.gr-page
   [data-theme="light"]`, e o motivo e' o mesmo da regra de ritmo vertical
   logo abaixo: `partials/header.php` injeta tres `<section
   class="mega__panel">` dentro do `<div class="mega">`, que mora no body
   FORA do `<main>`. Descendente solto alcancaria os tres. O filho direto
   de `#conteudo` alcanca so' as secoes desta pagina.

   `data-theme` no elemento, e nao no corpo: o site tem um tema por vez, e
   cada um destes blocos e' uma transicao coreografada com fronteira nos
   dois lados - nao uma alternancia decorativa. Quem avisa o header e'
   `grupo/superficies.js`, que le a mesma condicao deste seletor.

   `color` tem de vir EXPLICITO aqui, e nao so `background`. Custom
   property e' herdada, mas `color` normal carrega o valor JA RESOLVIDO
   do ancestral - so' `body` referencia `var(--fg)` (base.css), e esse
   branco resolvido desce por heranca comum sem reconsultar o token em
   cada descendente. Sem esta linha o h3 do pilar mede branco sobre
   fundo claro: medido, `rgb(255, 255, 255)` em vez do `rgb(0, 0, 0)`
   esperado. Mesmo padrao de `.convite` em scenes.css. */
#conteudo > section[data-theme="light"] {
  /* `[data-theme="light"]` em `tokens.css` ja troca `--bg`, `--fg`,
     `--fg-muted` e `--line`. A cena so' precisa CONSUMIR os quatro: o
     `color` explicito e' obrigatorio porque a cor herdada do corpo ja
     esta resolvida em branco concreto e nao recomputa sozinha. */
  background: var(--bg);
  color: var(--fg);
}

/* ---------- ritmo vertical ----------
   VISUAL_DENSITY 3: a pagina respira. O aperto so acontece dentro das
   cenas presas, onde a altura e' orcada em telas.

   O ALVO E' `#conteudo > section`, e a escolha do seletor custou um
   defeito na revisao da tarefa 1. Duas armadilhas, nesta ordem:

   1. `.gr-page > section` NAO CASA COM NADA. `.gr-page` esta no `<body>`
      e as secoes sao netas - `<main id="conteudo">` fica no meio -, e o
      combinador `>` exige filho direto. Cinco das seis secoes ficavam
      com padding-block zero, coladas umas nas outras. Nenhum outro CSS
      do projeto define padding para `section`, entao nao havia recuo.

   2. `.gr-page section` (descendente) casa DEMAIS. O
      `partials/header.php` injeta tres `<section class="mega__panel">`
      dentro de `<div class="mega">`, que mora no body FORA do `<main>`.
      Com o descendente, os tres paineis do mega-menu ganhariam de 96 a
      192px de padding. */
#conteudo > section {
  padding-block: clamp(var(--sp-9), 14vh, var(--sp-11));
}

/* O hero e' a excecao: ele e' `100dvh` e o recuo mora dentro do palco.

   A EXCECAO TEM DE CARREGAR O ID TAMBEM. `#conteudo > section` tem
   especificidade (1,0,1) por causa do id, e um `.gr-hero` sozinho e'
   (0,1,0) - perde por ordem NENHUMA, perde por peso, entao trocar a
   ordem das duas regras nao resolve. Com o id na frente, a excecao vira
   (1,1,0) e ganha em qualquer ordem. Foi o defeito que a correcao do
   seletor acima introduziu: o hero ganhou 126px de recuo. */
#conteudo > .gr-hero {
  padding-block: 0;
}

/* ============================================================
   CENA 1 - HERO
   Toda a geometria da cena mora nestas custom properties. O
   JavaScript da tarefa 4 nao escreve px: ele escreve numeros
   aqui, e a folha pendura o resto.
   ============================================================ */
.gr-hero__palco {
  --gr-sq-lado: clamp(260px, 40vw, 560px);
  --gr-sq-x: 50%;          /* centro horizontal, na viewport */

  position: relative;
  min-height: 100dvh;      /* dvh, nunca vh: a barra do Safari movel */
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* A ALTURA EXTRA E' DAQUI, e ela so existe com `is-cena`. Sem GSAP ou
   com movimento reduzido a pagina ganharia uma tela de rolagem vazia
   para uma animacao que nao vai acontecer. E' o mesmo padrao do
   `is-cinema` da /comunicacao.

   210dvh da' 110vh de rolagem depois que o palco gruda. A divisao tem
   3,3 tempos (respiro, separacao, entrega), entao ~33vh por tempo. */
.gr-hero.is-cena {
  height: 210dvh;
}

/* `position: sticky` nativo, e nao pin. Pin cria `.pin-spacer` de
   largura fixa em pixel e, sem remedicao no `resize`, ele guarda a
   largura da janela anterior: medido na home, 416px de rolagem
   horizontal a 1024 vindo de 1440. Sticky nao custa uma ScrollTrigger
   de pin e cai sozinho para documento comum sem JavaScript. */
.gr-hero.is-cena .gr-hero__palco {
  position: sticky;
  top: 0;
}

/* ---------- camada B: as tres janelas ---------- */
.gr-hero__janelas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gr-sq {
  position: absolute;
  top: 50%;
  left: var(--gr-sq-x);
  width: var(--gr-sq-lado);
  aspect-ratio: 1;
  /* O centro vem de `margin`, e nao de `translate`. Armadilha 12: o
     GSAP absorve `translate` ao assumir o elemento, e foi assim que o
     botao de hover dos cases perdeu a centralizacao. */
  margin-left: calc(var(--gr-sq-lado) / -2);
  margin-top: calc(var(--gr-sq-lado) / -2);
}

.gr-sq__interno {
  /* `relative` e' obrigatorio: o video e' absoluto, e sem um ancestral
     posicionado AQUI ele se posicionaria contra `.gr-sq` e escaparia do
     `overflow: hidden` - o squircle deixaria de recortar o video. */
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-squircle);
  overflow: hidden;
  background: var(--c-black);
  --gr-video-op: 1;
}

.gr-sq__poster,
.gr-sq__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gr-sq__video {
  position: absolute;
  inset: 0;
  opacity: var(--gr-video-op);
}

/* Sob o video, a fatia da unidade. Quando `--gr-video-op` chega a zero,
   e' ela que aparece - o squircle nao fica preto, ele fica amarelo.

   MESMOS tokens da cena 2, e nao uma copia dos valores: a divisao pousa
   os tres squircles em cima dos tres da cena 2, e qualquer divergencia
   de cor apareceria como um pisca no fim do escovado. */
.gr-sq[data-unidade="comunicacao"] .gr-sq__interno { background: var(--fatia-comunicacao); }
.gr-sq[data-unidade="tecnologia"]  .gr-sq__interno { background: var(--fatia-tecnologia); }
.gr-sq[data-unidade="performance"] .gr-sq__interno { background: var(--fatia-performance); }

/* O poster fica por baixo do video e tem de sumir junto com ele, senao
   o quadro parado continua na frente do gradiente. */
.gr-sq__poster {
  opacity: var(--gr-video-op);
}

/* O poster tem contraluz estourada e a manchete e branca. Medido sem
   scrim: luminancia maxima 0,797, contraste 1,24 - a manchete some
   dentro do flare, e isso reprova AA com folga (o minimo para texto
   grande e 3,0).

   COM o scrim a 0.42 (medido so contra o `hero-poster.jpg`), o
   contraste dava 3,63 - mas o poster e UM quadro do video, e a
   ressalva do proprio comentario avisava: quadros mais claros
   reprovariam sem isso aparecer naquela medicao.

   TAREFA 11 fechou essa lacuna: 29 amostras reais tiradas do video
   TOCANDO (nao do poster), cobrindo os 16,58s inteiros do arquivo
   (duas voltas por causa do `loop`). O pior quadro tem luminancia
   maxima 1,0 (destaque estourado por volta de t=3,7s) - a 0.42 isso
   da contraste 1,67, e os tres piores da amostra (1,67 / 1,68 / 1,96)
   ficam todos abaixo do minimo. Na verdade, NENHUMA das 29 amostras
   batia 3,0 com o alpha antigo - o poster era otimista demais.

   ALPHA SUBIU PARA 0.75 para cobrir ate o pior caso matematico
   (luminancia maxima possivel = 1,0): contraste = 3,5, 16,7% de folga
   sobre o minimo - mesma logica de folga do numero anterior, so que
   agora calibrada contra o video real, nao contra um quadro so.
   Manchete e cor continuam as mesmas: quem cede e o scrim, nunca o
   texto - branco sobre o video e a composicao do key visual. */
.gr-sq__interno::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

/* As duas de baixo nascem invisiveis e sem video: elas so existem para
   a divisao ter tres corpos para separar. */
.gr-sq[data-sq="2"] .gr-sq__interno,
.gr-sq[data-sq="3"] .gr-sq__interno {
  opacity: 0;
}

/* ---------- camada C: a manchete ----------
   CENTRADA E ESTREITA. O wordmark vazado ocupava a metade direita da
   tela e obrigava a manchete a viver na esquerda; sem ele, ela pode
   ocupar o eixo, que e' onde o squircle ja' esta.

   O teto e' em PIXEL e nao em `ch`: `ch` resolve contra a fonte do
   PROPRIO elemento, e este e' um container que guarda um titulo de
   ~76px e um paragrafo de ~20px - armadilha 9 do HANDOFF. */
.gr-hero__texto {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: clamp(var(--sp-4), 2.5vh, var(--sp-6));
}

.gr-hero__titulo {
  margin: 0;
  width: 100%;
}

/* O paragrafo e' centrado de verdade - ele nao e' `.t-justified`, e
   justificar duas linhas curtas abriria vaos de palavra grandes o
   bastante para virar grade. */
.gr-hero__sub {
  margin: 0;
  text-align: center;
  max-width: 54ch;
  color: var(--fg-muted);
}

@media (max-width: 767px) {
  .gr-hero__palco {
    --gr-sq-lado: 78vw;
    --gr-sq-x: 50%;
  }

  /* O TEXTO VOLTA A MORAR EM CIMA DO SQUIRCLE, como na home. A tarefa
     11 tinha empilhado os dois - squircle em cima, manchete embaixo -
     porque a `.t-justified` com seis palavras em 375px abria vaos de
     ~40px e o bloco virava grade. O que resolve isso e' o corpo do
     tipo, nao a separacao: uma escala abaixo, as seis palavras cabem em
     duas linhas e o justificado volta a ser frase.

     `place-items: center` do palco faz o resto: as duas camadas dividem
     a mesma celula e o texto, que e' `z-raised`, fica por cima. */
  .gr-hero__titulo {
    font-size: var(--fs-display-m);
  }

  .gr-hero__sub {
    font-size: var(--fs-body);
  }
}

/* ============================================================
   CENA 2 - AS TRES UNIDADES
   Tres cartoes do MESMO tamanho, cada um na superficie da propria
   marca, com o conteudo inteiro dentro.

   ERA UMA ESCADA de tres quadradinhos de cor com o texto solto ao
   lado. A escada deslocava cada unidade um degrau para baixo, e num
   grupo que se vende como integrado isso lia como hierarquia. Agora
   `align-items: stretch` e um piso de altura fazem os tres medirem o
   mesmo.

   A COR E' A FATIA DA UNIDADE, o mesmo token do gradiente-assinatura
   que o hero usa - nao ha um segundo lugar onde a cor da Dls/ esteja
   escrita.

   O TEXTO E' PRETO NOS TRES, e o conteudo assenta no PE do cartao. As
   duas coisas sao a mesma decisao, e ela e' de contraste: as tres
   fatias vao do tom fechado no topo ao aberto embaixo (`150deg`), e o
   unico par que nao aguenta preto no topo e' o azul da Elleven -
   #0153ff da' 3,68:1, abaixo dos 4,5:1 de texto corrido. Na metade de
   baixo o mesmo gradiente ja' passa de 5:1, e no fim (#4fa3ff) da'
   8,0:1. Amarelo e lime nao tem esse problema em ponto nenhum (16:1 a
   18:1), mas o pe vale para os tres: cartao com conteudo ancorado em
   lugares diferentes deixa de ser um trio.

   OS TRES LOGOTIPOS SAO PRETOS, a pedido - e nao um preto, um branco e
   um sem filtro, como era. A regra agora e' uma so' e vale para os
   tres, o que tambem quer dizer que ela nao pode mais divergir por
   unidade sem alguem perceber.

   ISSO CONSERTOU UM LOGOTIPO QUE ESTAVA INVISIVEL. O comentario antigo
   daqui afirmava que `dls-2.svg` tinha "letras pretas" e por isso
   dispensava filtro. O arquivo e' `#fd0` - amarelo -, e o cartao da
   Dls/ e' lime no topo. Medido na tela, amarelo sobre esse lime da'
   **1,13:1**: o logotipo estava la' e nao dava para ver. Ninguem tinha
   medido porque a regra "nao leva filtro" vinha justificada pelo
   proprio comentario que estava errado.

   `brightness(0)` LEVA QUALQUER COR A PRETO PURO, e em arquivo de uma
   cor so' isso e' troca de tinta, nao tratamento: forma, contorno e
   espessura ficam intactos. Vale para os tres arquivos, que sao de uma
   cor cada (`#fd0`, `#0153ff`, `#d3ff35`).

   CONTRASTE MEDIDO NO PONTO ONDE O LOGOTIPO ESTA', e nao na cor
   inicial do gradiente: a 150deg, no topo do cartao, ele cai em
   t = 0,16 da linha, ja' um passo adiante do tom fechado.

     Dls/       preto sobre rgb(218,250,45)   17,69:1   (era 1,13 em amarelo)
     Metrik     preto sobre rgb( 79,204,71)   10,06:1
     Elleven    preto sobre rgb( 13, 95,255)    4,10:1   (era 5,12 em branco)

   Os 4,10:1 da Elleven ficam abaixo dos 4,5:1 de texto corrido e bem
   acima dos 3:1 de objeto grafico (WCAG 1.4.11) - e logotipo e' caso
   explicitamente dispensado pelos dois criterios. Era o argumento que
   sustentava a versao branca; ele nao vale mais que o pedido, e o
   numero continua dentro do limite que se aplica a esta peca.
   ============================================================ */
.gr-unidades__lista {
  list-style: none;
  margin: clamp(var(--sp-8), 10vh, var(--sp-10)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: stretch;
}

.gr-unidade {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: clamp(340px, 42vh, 460px);
  padding: clamp(var(--sp-5), 2.4vw, var(--sp-7));
  /* Mesmo idioma de `.fr-servico`: 20,8% do lado menor, com teto em
     pixel. Sem o teto, um cartao largo e baixo devolve canto de
     estadio. */
  border-radius: min(20.8%, 40px);
  background: var(--gr-un-fatia);
  color: var(--c-black);
}

/* As fatias vem de `.gr-page`. NAO as reescreva aqui: o squircle do
   hero pousa em cima deste cartao e tem de chegar exatamente nesta
   cor. */
.gr-unidade[data-unidade="comunicacao"] { --gr-un-fatia: var(--fatia-comunicacao); }
.gr-unidade[data-unidade="tecnologia"]  { --gr-un-fatia: var(--fatia-tecnologia); }
.gr-unidade[data-unidade="performance"] { --gr-un-fatia: var(--fatia-performance); }

.gr-unidade__logo {
  align-self: start;
  height: 24px;
  width: auto;
  /* Preto nos tres. O porque, o numero e o que isto consertou estao no
     cabecalho da cena. */
  filter: brightness(0);
}

/* O vazio inteiro entre o logotipo e o texto: um `auto` so', para o
   grupo de baixo assentar no pe e o de cima ficar no topo. Com dois, o
   espaco se dividiria e o conteudo flutuaria no meio. */
.gr-unidade__texto {
  margin: auto 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 28ch;
}

.gr-unidade__cta {
  align-self: start;
  --btn-bg: var(--c-black);
  --btn-fg: var(--c-white);
}

@media (max-width: 767px) {
  .gr-unidades__lista {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  /* Empilhados, os cartoes nao precisam mais reservar altura para
     medir igual: quem manda passa a ser o conteudo. */
  .gr-unidade {
    min-height: 0;
  }

  .gr-unidade__texto {
    margin-top: var(--sp-6);
  }
}

/* ============================================================
   CENA 3 - MARCA INTEIRA(R)
   A palavra fica INTEIRA enquanto revela do que e' feita.
   Quebrar "inteira" em quatro contradiria o proprio metodo, que
   e' sobre a marca que NAO se divide.

   Disposicao ORBITAL, e nao fileira nem grade 2x2: as duas ja
   estao gastas na cena 4 e no rodape. Sao seis cenas e seis
   familias de layout - nenhuma se repete.
   ============================================================ */
.gr-metodo__palco {
  /* A elipse e' mais larga que alta para nao empurrar a manchete: o
     texto mora no centro dela, e uma orbita circular a 34vw fecharia
     em cima do paragrafo em qualquer tela abaixo de 16:9. */
  /* O RAIO VERTICAL TEM PISO EM PIXEL, e o piso e' o que impede os dois
     cartoes do mesmo lado de se sobreporem. Os quatro estao em 210, 330,
     30 e 150 graus, ou seja, dois a esquerda e dois a direita: a
     separacao vertical entre o par e' exatamente `ry`, e ela precisa ser
     maior que a altura de um cartao.

     Medido, com a copy centrada:

       1280x800   cartao 346 de largura, 214 e 241 de altura -> ry >= 252
       1440x900   cartao 380,             219 nos dois       -> ry >= 243
       1280x720   `27vh` dava 194 -> 47px de SOBREPOSICAO

     `max(270px, 34vh)` cobre os tres. E ele so' e' escrivel aqui porque
     `medir()` em `metodo.js` deixou de fazer `parseFloat` no token cru -
     ver o comentario de la'. */
  --gr-orb-rx: 37vw;
  --gr-orb-ry: max(270px, 34vh);
  /* ANGULO PARAMETRICO, e nao geometrico. Num ponto colocado em
     `(rx*cos t, ry*sin t)`, `t` so' coincide com o angulo visto do centro
     quando `rx == ry`. Aqui a elipse e' deliberadamente achatada, entao
     os quatro assentam 15 graus mais perto da horizontal do que o numero
     diz. Medido a 951px de contentor (rx 328, ry 157): 195, 345, 15 e
     165 graus geometricos, batendo com `atan2(ry*sin t, rx*cos t)` na
     casa do grau.

     ISSO E' DE PROPOSITO, e nao vale "corrigir" para geometrico. O
     parametrico joga os quatro mais para as pontas, que e' o que abre
     espaco entre eles e o bloco de texto no centro. Convertendo para
     geometrico, cada um se aproximaria ~110px na horizontal e se
     afastaria ~60px na vertical - ou seja, andaria na direcao da
     manchete, que e' exatamente o que a elipse achatada existe para
     evitar. */
  --gr-orb-1-ang: 210deg;
  --gr-orb-2-ang: 330deg;
  --gr-orb-3-ang: 30deg;
  --gr-orb-4-ang: 150deg;

  position: relative;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  /* A COPY MORA NO CENTRO, e a orbita passa a girar em volta DELA. Era
     `start`, e nesse arranjo a manchete ficava encostada na margem
     esquerda enquanto os quatro cartoes orbitavam o centro geometrico do
     palco: dois deles (210 e 150 graus) caiam em cima do texto, e o que a
     tela mostrava era colisao, nao orbita. Centrar o texto e' o que da'
     aos quatro lados iguais para ocupar. */
  justify-items: center;
  gap: var(--sp-5);
}

/* UMA ESCALA ABAIXO do que era (`--fs-display-xxl`, 11rem). A palavra
   ocupava a tela inteira e empurrava a orbita e o paragrafo para fora do
   campo em qualquer janela abaixo de 900px de altura. Ela continua sendo
   a maior tipografia da pagina; deixou de ser a unica. */
.gr-metodo__rotulo,
.gr-metodo__titulo,
.gr-metodo__intro {
  text-align: center;
}

.gr-metodo__titulo {
  margin: 0;
  font-size: var(--fs-display-l);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: var(--tr-display);
  max-width: 8ch;   /* `ch` no elemento que CARREGA a fonte - armadilha 9 */
}

/* O simbolo de marca registrada nao e' parte da palavra: a 11rem ele
   viraria um bloco do tamanho de uma letra. */
.gr-metodo__titulo sup {
  font-size: 0.24em;
  vertical-align: super;
  letter-spacing: 0;
}

/* O TETO E' O QUE MANTEM A ORBITA POSSIVEL. Sem ele o paragrafo ocupava a
   largura do palco inteiro e nao sobrava lado nenhum para os cartoes; com
   ele, a copy e' uma coluna estreita no meio e os quatro tem margem de
   verdade para ocupar. `ch` porque este elemento carrega a fonte do proprio
   texto - armadilha 9. */
.gr-metodo__intro {
  margin: 0;
  max-width: 38ch;
  color: var(--fg-muted);
}

.gr-metodo__elementos {
  list-style: none;
  margin: clamp(var(--sp-7), 8vh, var(--sp-9)) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-7);
}

/* O CARTAO ENVOLVE O TEXTO. Antes o elemento era um squircle de cor com
   o titulo e o paragrafo soltos ao lado, sobre o preto da pagina: quatro
   blocos de texto flutuando em volta de uma orbita, sem nada dizendo
   onde um acaba e o outro comeca. Agora cada um mora numa caixa, e a
   orbita organiza CAIXAS em vez de organizar tipografia solta.

   `gap` de duas medidas, e ai' esta o pedido: a coluna do squircle
   continua com o vao largo (`--sp-5`), mas o titulo e o paragrafo
   passam a ter o vao curto (`--sp-3`) - eles sao um bloco so', e o
   respiro de antes os lia como dois. */
.gr-elemento {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3) var(--sp-5);
  max-width: 560px;   /* pixel, e nao `ch`: o container nao carrega a
                         fonte do paragrafo que ele guarda - armadilha 9 */
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: min(20.8%, 28px);
  background: rgba(255, 255, 255, 0.02);

  --gr-el-lado: clamp(88px, 10vw, 132px);
}

/* O icone fica DENTRO de um squircle, e e' isso que separa esta cena da
   home: la os quatro sao icones nus de 30px numa fileira sob o gradiente,
   com uma linha de texto cada. Mesmos quatro nomes, forma diferente e
   profundidade diferente. A home vende o metodo; esta pagina ensina. */
.gr-elemento::before {
  content: "";
  grid-row: 1 / span 2;
  width: var(--gr-el-lado);
  aspect-ratio: 1;
  border-radius: var(--r-squircle);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

/* O `+ var(--sp-5)` dos dois e' o padding do cartao: o icone e' absoluto
   contra `.gr-elemento`, e a caixa que ele centraliza (o `::before`)
   agora comeca depois do recuo, nao na borda. */
.gr-elemento__icone {
  position: absolute;
  top: calc(var(--sp-5) + var(--gr-el-lado) / 2);
  left: calc(var(--sp-5) + var(--gr-el-lado) / 2);
  width: clamp(36px, 4.2vw, 60px);
  height: auto;
  /* Centralizado no squircle desenhado pelo `::before`. Posicao e' do
     CSS, e o GSAP da tarefa 6 nunca toca NESTE elemento - ele move o
     `.gr-elemento` de fora. Duas caixas por objeto animado: armadilha 12. */
  translate: -50% -50%;
}

.gr-elemento h3,
.gr-elemento p {
  margin: 0;
}

.gr-elemento p {
  color: var(--fg-muted);
}

/* 240dvh da' 140vh de rolagem depois que o palco gruda. A sequencia tem
   quatro tempos (palavra, paragrafo, orbita, textos) e o ultimo se
   sobrepoe ao terceiro: ~46vh por tempo util. */
.gr-metodo.is-cena {
  height: 240dvh;
}

.gr-metodo.is-cena .gr-metodo__palco {
  position: sticky;
  top: 0;
}

@media (max-width: 1199px) {
  /* Mais conteudo por tela: os quatro em coluna ocupam mais do que a
     orbita ocupava, e a 240dvh o ultimo entra colado no fim. O limite e' o
     mesmo da orbita - onde ela deixa de existir, a coluna comeca. */
  .gr-metodo.is-cena {
    height: 320dvh;
  }
}

/* A ORBITA so' existe com `is-cena`, posta pelo modulo - e so' ACIMA DE
   1200px, que e' a largura em que ela cabe.

   O NUMERO SAIU DE MEDICAO, e o que ele protege e' a LEITURA. A orbita
   pede tres coisas na mesma linha: cartao, vao e copy, dos dois lados. A
   1024 isso deixava o cartao com 276px e a coluna de texto dele com
   **161px** - dezenove caracteres por linha, que e' largura de legenda,
   nao de paragrafo; e os quatro subiam para 264px de altura, o que ainda
   punha os dois do mesmo lado 57px um dentro do outro.

   Abaixo de 1200 os quatro voltam a ser a coluna do repouso: cartao
   inteiro, texto na largura da pagina, um debaixo do outro. E' a mesma
   decisao do celular, tomada onde a medida diz que ela comeca. */
@media (min-width: 1200px) {
.gr-metodo.is-cena .gr-metodo__elementos {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
  pointer-events: none;
}

/* MENOR NA ORBITA DO QUE EM COLUNA, e a diferenca e' o pedido: os quatro
   precisam caber ao lado da copy centrada, na mesma tela, sem encostar
   nela nem sangrar pela borda.

   `min(27vw, 380px)` E NAO `min(38vw, 460px)`. A conta que manda e' a
   folga lateral: com a copy no meio ocupando ~380px, sobra
   `(janela - 380) / 2` de cada lado, e o cartao tem de caber nisso menos
   a margem. A 1280 isso da' 450px de lado util para um cartao de 345 -
   105px de folga. A 1024, 322 de lado util para um cartao de 276.

   A LEITURA NAO PAGA A CONTA. O corpo do texto continua o do sistema; o
   que encolheu foi o SQUIRCLE do icone (de ate' 132px para ate' 96) e o
   recuo do cartao. Num cartao de 345px isso deixa ~200px de coluna de
   texto, que e' ~24 caracteres por linha - estreito, mas e' um paragrafo
   de quatro linhas dentro de um cartao, nao uma coluna de leitura longa. */
.gr-metodo.is-cena .gr-elemento {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(27vw, 380px);
  max-width: none;
  padding: clamp(var(--sp-4), 1.4vw, var(--sp-5));
  gap: var(--sp-2) var(--sp-4);
  pointer-events: auto;

  /* O SQUIRCLE DO ICONE E O UNICO LUGAR DE ONDE DA' PARA TIRAR LARGURA.
     Num cartao de 324px (o mais estreito da orbita, a 1200), o recuo, o
     vao e o icone comem 127px e sobram 197 para o texto - 23 caracteres
     por linha. Descendo o icone de 96 para 84 no teto e de 6,4vw para
     5,2vw, sobram 211 a 1200 e 255 a 1440, sem tocar no corpo do tipo:
     quem encolhe e' o ornamento, nao a leitura. */
  --gr-el-lado: clamp(56px, 5.2vw, 84px);
}

/* O icone e' absoluto contra o cartao, e o `+ padding` do posicionamento
   dele tem de acompanhar o recuo menor. Em vez de repetir o `clamp`, o
   recuo vira variavel e as duas regras leem a mesma. */
.gr-metodo.is-cena .gr-elemento__icone {
  top: calc(clamp(var(--sp-4), 1.4vw, var(--sp-5)) + var(--gr-el-lado) / 2);
  left: calc(clamp(var(--sp-4), 1.4vw, var(--sp-5)) + var(--gr-el-lado) / 2);
  width: clamp(30px, 3.2vw, 46px);
}
}


/* Sem o media query acima nao ha nada a desfazer: a coluna e' o repouso do
   documento e a orbita e' que e' a excecao. O que sobra aqui e' corpo de
   icone no celular. */
@media (max-width: 767px) {
  .gr-elemento {
    --gr-el-lado: clamp(84px, 22vw, 120px);
  }
}

/* ============================================================
   CENA 4 - PILARES DA CULTURA
   Quatro cartoes altos, lado a lado, cada um sobre a propria foto -
   a forma dos `ethos-cards` da referencia.

   A FILEIRA E' FLEX E O QUE ANIMA E' `flex-grow`. Nao ha largura
   escrita em lugar nenhum: os quatro nascem com `flex: 1`, e sob o
   ponteiro o de baixo do cursor vai a 1,7 enquanto os irmaos cedem
   para 0,85. Como as quatro frações somam sempre o mesmo, a fileira
   nunca muda de largura - so' a divisao interna muda.

   A CAIXA DE TEXTO E' MAIS LARGA QUE O CARTAO FECHADO, como na
   referencia e como pedido: o texto nao se reajusta ao tamanho do
   cartao. Ele e' escrito uma vez, na largura do cartao ABERTO, e o
   cartao fechado o recorta. Nada reflui.

   A CONTRAPARTIDA E' O FOCO. Conteudo que so' aparece no hover nao
   existe para quem chega de teclado, entao o cartao virou focavel
   (`tabindex="0"` na marcacao, `:focus-within` na fileira): tab abre o
   mesmo cartao que o ponteiro abriria. E o texto continua inteiro no
   DOM, entao leitor de tela le' os quatro independentemente de
   abertura. No celular nao ha fileira: os quatro empilham e aparecem
   completos.

   AS FOTOS ALTERNAM COR E P&B, uma sim uma nao. A do cartao 01 ja'
   nasce em preto e branco no arquivo - ali o filtro nao faz nada, e e'
   o certo: o tratamento e' o mesmo nos dois, e a diferenca vem da foto.

   O DEGRADE SOBRE A FOTO NAO E' ENFEITE. As seis fotos da pasta tem
   luminancia media alta em partes do quadro, e texto branco sobre foto
   sem escurecimento e' aposta, nao decisao. O degrade vai de
   transparente no topo a 88% de preto no pe, que e' onde o texto mora.
   ============================================================ */
/* A FILEIRA E' CONTAINER DE CONSULTA, e e' dai que a caixa de texto tira
   a largura dela. Ver `.gr-ethos__corpo` para o porque.

   Os dois numeros que a conta usa moram aqui, ao lado do que os produz:
   `--gr-ethos-vaos` e' o total de vao da fileira (tres vaos entre quatro
   cartoes) e `--gr-ethos-min` e' a fatia do cartao MAIS ESTREITO - os
   quatro somam sempre 4,25 de `flex-grow` (1,7 + 3 x 0,85), entao o
   cedido vale 0,85/4,25 = 0,2. Mexer no numero de cartoes ou no
   `flex-grow` e nao mexer aqui e' o que faria o texto voltar a ser
   cortado; os tres valores estao na mesma tela de propósito. */
.gr-ethos {
  --gr-ethos-vaos: calc(3 * var(--sp-2));
  --gr-ethos-min: 0.2;
  list-style: none;
  margin: clamp(var(--sp-8), 10vh, var(--sp-10)) 0 0;
  padding: 0;
  display: flex;
  gap: var(--sp-2);
  container-type: inline-size;
}

.gr-ethos__item {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow var(--dur-scene, 900ms) var(--ease-expand) 100ms;
}

/* OS IRMAOS CEDEM - E O `:not()` E' O QUE FAZ ISSO FUNCIONAR.

   AS DUAS REGRAS DISPUTAVAM A MESMA PROPRIEDADE NO MESMO ELEMENTO, e a
   errada vencia. `.gr-ethos:hover .gr-ethos__item` pesa (0,3,0) - duas
   classes mais uma pseudo-classe - contra os (0,2,0) de
   `.gr-ethos__item:hover`. Especificidade decide antes da ordem, entao o
   cartao sob o ponteiro recebia os 0,85 dos IRMAOS e a fileira inteira
   ficava parada: os quatro em 0,85, ninguem abrindo. Medido numa sonda
   com a mesma forma de seletor - quatro celulas de 100px, `flex-grow`
   computado em 0.85 nas quatro, inclusive na que estava "sob o cursor".

   Nao esteve no ar nem por um quadro. So' apareceu agora porque ate' a
   rodada passada o texto era legivel parado: o cartao que nao abria
   nao custava nada. Com a caixa de texto na largura do cartao ABERTO, o
   hover quebrado virou "o texto esta cortado".

   COM `:not()` NAO HA MAIS DISPUTA. As duas regras deixam de se aplicar
   ao mesmo elemento: o de baixo do ponteiro casa uma, os outros tres
   casam a outra. Nao ha peso a comparar, e mexer numa nao pode mais
   desligar a outra em silencio.

   `:focus-within` entra junto porque o cartao e' focavel: quem chega de
   teclado abre o mesmo cartao que o ponteiro abre. */
.gr-ethos:hover .gr-ethos__item:not(:hover),
.gr-ethos:focus-within .gr-ethos__item:not(:focus-within) {
  flex-grow: 0.85;
}

.gr-ethos__item:hover,
.gr-ethos__item:focus-within {
  flex-grow: 1.7;
}

.gr-ethos__cartao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(420px, 60vh, 620px);
  display: flex;
  align-items: end;
  border-radius: 20px;
  background: var(--c-black);
}

/* O CARTAO E' FOCAVEL, e isto e' a contrapartida obrigatoria do recorte.
   Com o texto passando a depender da abertura, quem chega de teclado
   precisa de uma forma de abrir - `:focus-within` ja' estava na folha,
   mas nao havia nada focavel dentro para dispara-lo. O `tabindex` no
   cartao resolve isso sem inventar um botao que nao leva a lugar nenhum:
   o conteudo continua no DOM (leitor de tela le' os quatro inteiros,
   abertos ou nao) e o teclado passa a ver o mesmo que o ponteiro.

   O anel de foco e' desenhado por fora do recorte da foto, com a cor da
   pagina - `outline` nao e' recortado por `overflow`. */
.gr-ethos__cartao:focus-visible {
  /* O anel e o recuo vem de `base.css`, que os declara para tudo. O que
     esta regra existe para desfazer e o `border-radius: 2px` que aquele
     bloco global impoe junto: ele nao e o anel, e sim o RAIO DO PROPRIO
     elemento, e num cartao de 20px de canto ele quadraria a foto no
     instante do foco. */
  border-radius: 20px;
}

.gr-ethos__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gr-ethos__item[data-trato="pb"] .gr-ethos__foto {
  filter: grayscale(1);
}

/* O escurecimento e' `::after` da caixa e nao `filter` na foto: filtro
   escureceria a imagem inteira por igual, e o que se quer e' o pe escuro
   com o topo intacto.

   TRES PARADAS, E ELAS SAO MEDIDAS. A primeira versao era uma rampa
   linear de 30% a 100% com 0,88 no fim, e ela REPROVOU: amostrando os
   pixels de cada foto sob a caixa de texto, o pior branco deu 3,36:1 no
   cartao 01 e 2,96:1 no cartao 04 - abaixo dos 4,5:1 de texto corrido.
   A causa e' a rampa linear: onde o texto COMECA (58% a 69% da altura)
   ela ainda estava em ~0,35 de alfa, e as luzes quentes da copa e os
   monitores acesos vivem exatamente ali.

   Empurrar a rampa para comecar em 0% resolvia o contraste (4,85) e
   matava a foto - o quadro inteiro escurecia. A parada do meio resolve
   as duas coisas: acima de 28% a foto fica intacta, e do meio para
   baixo o escurecimento sobe rapido. Medido nas quatro fotos, ponto a
   ponto sob a caixa de texto: o pior branco passou de 2,96 para
   **7,22:1**. */
.gr-ethos__cartao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 28%,
    rgba(0, 0, 0, 0.58) 52%,
    rgba(0, 0, 0, 0.93) 100%
  );
  pointer-events: none;
}

/* A CAIXA DE TEXTO MEDE O CARTAO MAIS ESTREITO, e e' isso que faz o
   texto nunca ser cortado - em nenhum dos tres estados.

   ERA A LARGURA DO CARTAO ABERTO. A ideia vinha da referencia e do pedido
   de que o texto NAO se reajustasse ao tamanho do cartao: fechado, o
   cartao recortava a caixa; aberto, ela cabia. O problema e' que "fechado"
   e' o estado NORMAL da fileira - em repouso os quatro valem 1 de
   `flex-grow` e medem 25% cada, contra uma caixa dimensionada para os 40%
   do aberto. Quem chega na pagina e nao passa o mouse ve' os quatro
   cortados, e quem passa ve' tres cortados ainda pior (os cedidos caem
   para 20%). So' um cartao dos quatro, e so' enquanto o ponteiro esta
   nele, mostrava o paragrafo inteiro.

   AS DUAS EXIGENCIAS CONTINUAM DE PE', E ELAS SO' FECHAM NUM VALOR.
   O texto nao pode refluir com o cartao (pedido explicito) e nao pode ser
   cortado (pedido explicito). Largura fixa que cabe no MENOR estado e' o
   unico numero que satisfaz os dois: em repouso sobra folga, no cedido
   encosta, no aberto sobra muito - e a linha e' sempre a mesma linha. O
   que a abertura passa a revelar e' FOTO, que e' o que a referencia
   revela.

   `cqw` E NAO `vw`, E ISSO E' O CONSERTO DE VERDADE. A versao anterior
   escrevia `min(34vw, 500px)`, e esse numero so' e' correto se a margem da
   `.shell`, o teto de 1440px dela e o vao da fileira continuarem os que
   eram - tres coisas que moram em outros arquivos. Foi assim que a caixa
   saiu com 653px contra um cartao aberto de 515 a 1920: o `vw` crescia e a
   `.shell` tinha parado. Com `100cqw` a conta le' a LARGURA REAL da
   fileira, medida pelo navegador depois de a `.shell` fazer o que faz.
   Mudar a margem da pagina nao pode mais desalinhar isto.

   E' o uso certo da unidade, e o avesso da armadilha registrada em
   `tokens.css`: la' o erro era um elemento tentar ser container DE SI
   MESMO (`container-type` no proprio elemento faz `cqw` cair para a
   viewport). Aqui o container e' a fileira, um ancestral, e quem le' e' o
   descendente.

   Medido, com a caixa em (100cqw - 24px) x 0,2:

     1920   fileira 1312   caixa 257,6   cedido 257,6   repouso 322,0
     1440   fileira 1325   caixa 260,2   cedido 260,2   repouso 325,2
     1280   fileira 1178   caixa 230,7   cedido 230,7   repouso 288,4
     1024   fileira  942   caixa 183,6   cedido 183,6   repouso 229,5

   Abaixo de 901 a fileira empilha e a regra sai de cena (ver o bloco
   `max-width: 900px`), onde a caixa volta a `100%` e o texto aparece
   inteiro e parado - no celular nao ha ponteiro para abrir coisa nenhuma.

   `flex: none` CONTINUA SENDO O QUE FAZ ISSO EXISTIR. O cartao e'
   `display: flex`, e item de flex encolhe por padrao: sem isto o `width`
   viraria sugestao e o texto voltaria a refluir. */
.gr-ethos__corpo {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--sp-3);
  padding: clamp(var(--sp-4), 1.8vw, var(--sp-6));
  color: var(--c-white);
  flex: none;
  width: calc((100cqw - var(--gr-ethos-vaos)) * var(--gr-ethos-min));
}

.gr-ethos__conta {
  margin: 0;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}

.gr-ethos__nome,
.gr-ethos__texto {
  margin: 0;
}

.gr-ethos__texto {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .gr-ethos__item {
    transition: none;
  }
}

@media (max-width: 900px) {
  /* Empilhados. A fileira de quatro so' funciona enquanto cada cartao
     tem largura de coluna de texto; abaixo disso ela vira quatro tiras
     de ~150px, e tira nao guarda paragrafo. */
  .gr-ethos {
    flex-direction: column;
    gap: var(--sp-4);
  }

  /* A lista repete os seletores da fileira porque ela precisa VENCER os
     dois - `flex: none` num seletor de peso menor perderia para o
     `.gr-ethos:hover .gr-ethos__item:not(:hover)` la' de cima, que pesa
     (0,4,0). Aqui eles empatam em peso e este bloco vem depois. */
  .gr-ethos__item,
  .gr-ethos:hover .gr-ethos__item:not(:hover),
  .gr-ethos:focus-within .gr-ethos__item:not(:focus-within),
  .gr-ethos__item:hover,
  .gr-ethos__item:focus-within {
    flex: none;
  }

  .gr-ethos__cartao {
    height: clamp(320px, 52vh, 420px);
  }

  /* Um abaixo do outro, e cada um inteiro: sem fileira nao ha cartao
     aberto nem cartao fechado, entao nao ha o que recortar. A caixa volta
     a medir o cartao e o texto aparece todo, parado.

     `100%` E NAO `auto`, E ISTO FOI MEDIDO. O `flex: none` da regra de
     cima continua valendo aqui - e item de flex que nao encolhe, com
     largura `auto`, mede o PROPRIO conteudo: a 375 a caixa saia com
     779px (o paragrafo inteiro numa linha so) dentro de um cartao de
     335, e o texto ficava cortado justamente onde ele nao pode ficar. */
  .gr-ethos__corpo {
    width: 100%;
  }
}

/* ============================================================
   O REEL E AS MARCAS
   O filme institucional em 16:9 e, logo abaixo, a faixa de logotipos
   da home. A faixa e' o componente `.marquee` de `scenes.css`, sem
   uma linha nova - e' por causa dela (e do contato e do FAQ) que esta
   pagina passou a carregar aquela folha.
   ============================================================ */
/* O CANTO FECHOU, a pedido. Era `--r-squircle-16x9` (11,7% / 20,8%), que
   numa moldura de 1325x745 resolve em 155px de raio - o squircle da marca,
   correto num objeto de marca e grande demais numa janela de video: ele
   comia o canto do quadro. 8px e' moldura, nao forma; e' o mesmo idioma da
   caixa branca do gatilho (10px) e do cartao de pessoa (14px). A
   referencia usa 4px, medido.

   A ESCALA E' DO GSAP, e por isso NAO ha `transform` declarado aqui -
   armadilha 12: ao assumir o elemento, o GSAP puxa a transformacao da
   folha para dentro da propria matriz e a zera no inline. Sem JavaScript
   a moldura nasce em escala 1, que e' o repouso certo do documento. */
.gr-reel__moldura {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-black);
}

.gr-reel__moldura iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* A faixa encosta no filme, mas com respiro: ela sangra de borda a
   borda e o filme para na `.shell`, entao sem o vao os dois liam como
   um bloco so'. */
.gr-reel .marquee {
  margin-top: clamp(var(--sp-7), 8vh, var(--sp-9));
}

/* ============================================================
   CENA 5 - AS PESSOAS
   Grade de SEIS por linha, que e' a do site atual da Dls/: dezoito
   pessoas em tres fileiras exatas, sem celula sobrando.

   CARTAO, E NAO FOTO SOLTA. O retrato ocupa o topo de uma caixa
   escura e a identificacao mora na propria caixa, embaixo - a forma
   da referencia. A caixa e' o que faz dezoito retratos de
   enquadramentos diferentes lerem como um conjunto.

   `object-position: top` E ISSO E' LOAD-BEARING: em 2:3 recortado
   por `cover`, o corte vem de baixo ou de cima conforme a ancora.
   De cima ele come a testa; ancorado no topo, ele come o sapato.

   RAIO MAIS FECHADO QUE O SQUIRCLE DO SISTEMA. Os 20,8% em caixa de
   2:3 chegam perto do ombro e comem o canto da foto. 14px devolvem o
   enquadramento sem virar retangulo duro - e a caixa que arredonda e'
   o CARTAO, nao a foto, entao o canto de baixo continua reto por
   dentro da moldura.

   SEM EFEITO POR CIMA. A banda de luz que percorria a parede e
   escurecia quem estava fora dela saiu a pedido, e com ela o modulo
   `grupo/pessoas.js`: os dezoito ficam em opacidade 1 o tempo todo.
   ============================================================ */
/* A GRADE SAI DA `.shell` E VAI QUASE A' BORDA, a pedido. A `.shell` tem
   teto de 1440px, entao num monitor de 1920 ela deixava 480px de margem
   morta e os retratos ficavam com 205px de largura.

   O RECUO E' DE 16px FIXOS, a pedido, e nao mais um `clamp` que crescia
   com a janela.

   E ELE PRECISOU DE UM SELETOR MAIS PESADO PARA EXISTIR. `base.css` zera o
   recuo de todo `<ul>` que tenha classe (`ul[class] { padding: 0 }`, linha
   84), e esse seletor pesa (0,1,1) contra os (0,1,0) de `.gr-equipe`.
   Especificidade decide antes da ordem, entao o `padding-inline` desta
   regra NUNCA valeu: nem os 16px de agora, nem o `clamp(12px, 1.6vw,
   32px)` que estava aqui antes. Medido a 1440: a grade saia com 1425px,
   que e' a janela inteira menos a barra de rolagem - os retratos encostados
   nos dois lados, sem margem nenhuma, e o comentario antigo desta regra
   afirmando 1394px como se o recuo estivesse la'.

   `.gr-pessoas .gr-equipe` pesa (0,2,0) e ganha da regra global sem
   depender da ordem dos arquivos. Podia ser `ul.gr-equipe`, que empata em
   (0,1,1) e venceria so' porque `grupo.css` carrega depois de `base.css` -
   e empate resolvido por ordem de `<link>` e' exatamente o tipo de vitoria
   que some quando alguem reordena o `<head>`.

   Com o recuo finalmente aplicado, os seis retratos por fileira medem
   (janela util = janela menos a barra de rolagem):

     1440   grade 1393   retrato 218,8   (encostado na borda: 224,2)
     1920   grade 1873   retrato 298,8
     2560   grade 2513   retrato 405,5

   O RECUO NAO E' ZERO de proposito: foto encostada na borda da janela
   perde a moldura e passa a ler como sangria acidental. E nao e' token de
   espaco (`--sp-4` tambem vale 16px) porque isto nao e' ritmo vertical do
   sistema - e' a distancia entre a fotografia e a borda fisica da janela,
   decidida olhando a tela. */
.gr-pessoas .gr-equipe {
  list-style: none;
  margin: clamp(var(--sp-8), 10vh, var(--sp-10)) 0 clamp(var(--sp-7), 6vh, var(--sp-9));
  padding-inline: 16px;
  padding-block: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* O TITULO DA SECAO E' CENTRADO E DE UMA LINHA SO', a pedido.

   Duas coisas o quebravam em duas linhas, e as duas sao do `.t-h2`: o
   `max-width: 22ch` (a frase tem 36 caracteres) e o alinhamento a'
   esquerda herdado. O `none` desfaz a amarra e o `center` poe a frase no
   eixo da grade de retratos, que e' o unico bloco da pagina que sangra
   ate' quase a borda - titulo a' esquerda em cima de um conjunto centrado
   lia como desalinho.

   UMA LINHA EM QUALQUER LARGURA, E QUEM GARANTE ISSO E' O `min()`.
   `--fs-display-m` tem piso em 28px, e abaixo de ~525px a coluna deixa de
   comportar a frase nesse corpo. O `vw` entra por baixo do piso.

   O COEFICIENTE FOI MEDIDO, NAO ESTIMADO, E E' DA FRASE - RECALIBRE-O
   QUANDO ELA MUDAR. Numa sonda em `white-space: nowrap` carregando a
   fonte E o `letter-spacing` computados do proprio titulo (o `em` do
   `--tr-display` faz o espacejamento acompanhar o corpo, entao a razao
   nao depende do tamanho), "Quem faz tudo acontecer" mede **10,4528
   vezes o corpo do tipo** em largura. Dai sai, para cada janela, o maior
   corpo que ainda cabe numa linha - a coluna e' a janela menos os 40px
   de recuo da `.shell`:

     320   coluna 280   cabe ate' 26,79px   = 8,372% da janela
     375   coluna 335   cabe ate' 32,05px   = 8,546%
     430   coluna 390   cabe ate' 37,31px   = 8,677%
     480   coluna 440   cabe ate' 42,09px   = 8,769%

   A exigencia e' MENOR nas telas menores, entao um unico `vw` cobre a
   faixa inteira, e a folga mais apertada e' em 320. `8.2vw` da' 26,24px
   la', 5,7px abaixo do limite.

   O `vw` SO' MORDE ABAIXO DE ~333px. `--fs-display-m` tem piso em 28px, e
   28px desta frase pedem 292,7px de coluna: acima de 332,7px de janela a
   coluna ja' comporta o piso e o `min()` devolve `--fs-display-m` puro.
   Isto e' bem diferente do que valia para a frase anterior, "As pessoas
   por trás da marca inteira." - 37 caracteres, coeficiente 14,363, o `vw`
   mordia ate' ~525px e a 375 o titulo saia com 22,5px em vez de 28px.
   Encurtar o titulo devolveu esse tamanho: a 375 ele agora sai com os
   28px do sistema, sem desvio.

   Fica registrado o erro de origem porque ele volta: a primeira sonda,
   feita para a frase antiga, nao carregava o `letter-spacing` e deu
   `6.3vw`. A 375 aquilo dava 23,625px, a frase pedia 339px de uma coluna
   de 335, e o titulo quebrava em duas linhas do mesmo jeito. Sonda sem
   `letter-spacing` mede outra coisa. */
.gr-pessoas .t-h2 {
  max-width: none;
  font-size: min(var(--fs-display-m), 8.2vw);
}

/* O CENTRO E' DO BLOCO, e nao mais do titulo sozinho. Enquanto havia so'
   a manchete, `text-align: center` nela bastava; agora o paragrafo veio
   junto e os dois sao um conjunto - centrar cada um por conta abriria a
   chance de um sair do eixo do outro numa mudanca futura. O CTA logo
   abaixo tem a propria regra pelo mesmo motivo, e nao esta aqui porque
   entre ele e este bloco existe a grade de retratos, que sangra para
   fora da `.shell` e nao herda nada daqui. */
.gr-pessoas__intro {
  text-align: center;
}

/* `margin-inline: auto` E NAO SO' O `text-align` HERDADO. O que o pai
   centra e' a LINHA dentro da caixa; a caixa em si, com teto de 54ch,
   continuaria encostada a esquerda da `.shell` num bloco - e o texto
   centrado dentro dela ficaria centrado em relacao a coluna errada.

   O teto sobrescreve os 56ch de `.t-body-l` e vale a mesma medida do
   `.gr-hero__sub`: os dois sao paragrafo unico centrado sob uma
   manchete, e nao ha razao para lerem em larguras diferentes. Depende
   de `grupo.css` vir depois de `type.css` no `<head>` - os dois
   seletores pesam (0,1,0) e quem decide e' a ordem. */
.gr-pessoas__sub {
  margin: clamp(var(--sp-4), 2.5vh, var(--sp-5)) auto 0;
  max-width: 54ch;
  color: var(--fg-muted);
}

/* `flex` e nao `text-align: center`: o `.btn` e' `inline-flex`, e alinhar
   por texto o centraria pela caixa de linha - o que funciona, mas deixa a
   `.shell` com um contexto inline so' para isto. Como item de flex ele e'
   dimensionado pelo proprio conteudo e centrado pelo eixo, que e' o que
   se quer dizer. */
.gr-pessoas__acao {
  display: flex;
  justify-content: center;
}

.gr-pessoa {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.gr-pessoa__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: top;
  display: block;
}

.gr-pessoa__id {
  display: grid;
  gap: 2px;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
}

/* Peso 500 num paragrafo, e nao `.t-title`: o nome de uma pessoa numa
   grade de dezoito nao e' um titulo de secao, e marcar como titulo
   colocaria dezoito degraus de hierarquia no sumario da pagina. */
.gr-pessoa__nome {
  margin: 0;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25;
}

/* 14px, que e' `--fs-small` - o mesmo corpo que o nome tinha antes de
   subir para 16. O par continua com um degrau de dois pixels entre
   nome e cargo; o que mudou foi o piso dos dois. */
.gr-pessoa__cargo {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--fg-muted);
}

/* O SELETOR REPETE O DA REGRA BASE, e isso nao e' preciosismo. Media query
   nao acrescenta peso nenhum: se a base subiu para `.gr-pessoas .gr-equipe`
   (0,2,0) para vencer o `ul[class]` de `base.css`, um `.gr-equipe` solto
   aqui pesa (0,1,0) e PERDE - estar dentro de `@media` e vir depois no
   arquivo nao muda nada. Medido no momento em que isto aconteceu: a 375 a
   grade continuava com seis colunas e o retrato media 43,8px. */
@media (max-width: 1100px) {
  .gr-pessoas .gr-equipe {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .gr-pessoas .gr-equipe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MISSAO, VISAO E VALORES SAIU (25/08, pedido da CEO), e com ela as
   regras `.gr-mvv__grade`, `.gr-mvv__bloco`, `.gr-mvv__nome`,
   `.gr-mvv__texto`, `.gr-valores` e o `@media` que virava a grade de
   tres colunas em uma. Ficam nomeadas aqui para quem reencontrar as
   classes num rascunho: elas nao existem mais nesta folha. */