/* Grupo Dls/ - grid, seções e componentes de superfície */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.shell--wide {
  max-width: none;
  padding-inline: var(--margin);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

@media (max-width: 767px) {
  .grid12 {
    grid-template-columns: 1fr;
  }
}

.scene {
  position: relative;
  padding-block: clamp(var(--sp-9), 12vh, var(--sp-11));
}

.scene--flush {
  padding-block: 0;
}

/* Altura total sem o salto da barra de endereço no iOS. */
.scene--full {
  min-height: 100dvh;
}

/* ---------- botões ----------
   Pílula, e não squircle, para não competir com a primitiva do sistema.
   Um raio por função: pílula em interativo, squircle em superfície. */
.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.9em 1.6em;
  border: 1px solid var(--btn-bg);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur-micro) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.btn:hover {
  --btn-bg: var(--c-yellow);
  --btn-fg: var(--c-black);
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--line);
}

.btn--ghost:hover {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  border-color: var(--fg);
}

/* A seta vem do símbolo único do topo do documento, então a cor precisa
   ser dita aqui: `fill` como atributo morreu junto com o path repetido. */
.btn__arrow {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  fill: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* O X DE "LIMPAR": mesmo corpo, mesmo `fill` e mesma duracao da seta - o
   que muda e' para onde o gesto aponta. Seta anda para frente porque leva
   a algum lugar; o X gira porque desfaz, e um quarto de volta e' o giro
   que devolve o mesmo desenho (a figura tem simetria de 90 graus), entao
   o movimento se le como energia e nao como troca de icone.

   NAO E' UMA VARIANTE DE `.btn__arrow`. Herdar dela traria junto o
   `translateX` do hover do botao, e o X sairia andando de lado. */
.btn__x {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  fill: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__x {
  transform: rotate(90deg);
}

/* ============================================================
   O CONVITE DE FECHAMENTO
   ============================================================ */
/* Uma frase e um botão sobre preto - a última coisa escrita da página.
   Mora aqui pela mesma razão que a `.placa` logo abaixo: três páginas o
   usam e elas não dividem folha nenhuma além desta. A página de case e a
   matéria carregam `case.css`; o índice de /cases carrega `cases.css`.
   Segunda cópia divergiria na primeira vez que alguém mexesse no corpo
   ou na medida - e foi exatamente o que aconteceu enquanto ele morava só
   em `case.css`: o índice de /cases tinha um convite próprio, em corpo de
   texto e em cinza, 20px contra os 28px da assinatura do rodapé logo
   abaixo. O convite se anunciava mais baixo que o endereço.

   A frase é escala de h2, e não corpo de texto: ela é a única peça do
   bloco preto e não acompanha nada, ela É o bloco. Branca pelo mesmo
   motivo - sobre preto o cinza é para o que acompanha.

   A cor sai de `--fg`, então quem usar a classe precisa estar num escopo
   escuro (`.cs--escuro`, `.ci-fim`) que declare o token. É o mesmo
   contrato da `.placa` com `--unidade`. */
.cs__cta {
  display: grid;
  justify-items: start;
  gap: var(--sp-6);
}

.cs__cta-frase {
  font-weight: 300;
  font-size: var(--fs-display-m);
  line-height: 1.06;
  letter-spacing: var(--tr-display);
  max-width: 22ch;
  color: var(--fg);
}

/* ---------- a placa de fechamento ----------
   O convite do fim da página: um squircle na cor da unidade, com manchete,
   uma frase e um botão.

   MOROU EM `frente.css` ATÉ AQUI, com o prefixo `fr-`, porque só as três
   frentes a usavam. Subiu para cá quando o índice de /conteudo passou a
   fechar com a mesma peça: `conteudo.css` não carrega `frente.css` - e não
   deve, são 100 KB de página de frente para um componente de vinte linhas.
   As opções eram uma segunda cópia ou um dono só. A segunda cópia ia
   divergir na primeira vez que alguém mexesse no raio ou na inversão do
   botão, e o prefixo `fr-` já teria virado mentira do mesmo jeito.

   ELA NÃO CARREGA COR PRÓPRIA: lê `--unidade` e `--sobre-unidade`, que a
   página declara. Amarelo com preto na /comunicacao e no /conteudo, lime
   com preto na /performance, azul com branco na /tecnologia - a placa é a
   mesma nas quatro. Quem não declarar os dois tokens não deve usar a
   classe: sem eles o `background` cai em vazio. */
.placa {
  background: var(--unidade);
  /* Era `var(--c-black)` fixo, e era a suposição de que a cor da unidade é
     sempre clara. Ver a nota em `--sobre-unidade`, em `frente.css`. */
  color: var(--sobre-unidade);
  /* Squircle em superfície, como manda o sistema - mas com teto em pixel.
     Numa placa larga e baixa, 20,8% do lado menor devolveria um canto de
     ~120px, que em faixa vira estádio e deixa de ser o squircle da marca.
     O `min()` mantém a proporção enquanto ela couber e trava depois. */
  border-radius: min(20.8%, 44px);
  padding: clamp(var(--sp-8), 9vh, var(--sp-10)) clamp(var(--sp-6), 6vw, var(--sp-9));
  display: grid;
  gap: clamp(var(--sp-5), 4vh, var(--sp-7));
  justify-items: start;
}

.placa__sub {
  max-width: 52ch;
}

/* Pílula amarela sobre chão amarelo não existe. O botão inverte.
   Declarado no BOTÃO e não na placa: `.btn` redeclara `--btn-bg` e
   `--btn-fg` em si mesmo, então uma custom property herdada do pai nunca
   chega. Escrita na placa, esta regra parecia funcionar - e funcionava por
   coincidência, porque o padrão `var(--fg)`/`var(--bg)` do tema claro
   também dá pílula preta. Bastaria o tema mudar para o botão sumir. */
.placa .btn {
  --btn-bg: var(--c-black);
  --btn-fg: var(--c-white);
}

.placa .btn:hover {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-black);
}

/* ---------- link com sublinhado que cresce ---------- */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- entrada por rolagem ----------
   Aplicada só quando o JS assume. Sem JS o conteúdo já está visível. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---------- rodapé ----------
   Última cena da página, e não depósito de links: respiro largo, uma
   frase em escala de display, e a assinatura ocupando a largura toda. */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(var(--sp-8), 9vh, var(--sp-10)) var(--sp-6);
  overflow: hidden;
}

/* ---------- o rodapé volta ao escuro nas páginas de chão claro ----------
   O rodapé é preto no site inteiro. Nas páginas de tema escuro isso sai
   de graça: o corpo já é preto e os tokens já são os claros. Nas de chão
   claro ele precisa DECLARAR o tema de volta - e declarar `background` e
   `color` não basta, porque quem pinta o texto das colunas são os TOKENS:
   `.footer__list` lê `--fg-muted` e `.footer__list .t-label` lê `--fg`.

   ERA UMA REGRA POR FOLHA, e duas das quatro estavam incompletas. Medido
   em 25/08: em `/cases` e `/conteudo` o rótulo de cada coluna saía em
   `--fg` do tema claro, ou seja PRETO SOBRE PRETO - contraste 1:1, texto
   que existe no DOM e não existe na tela -, e os links em #3a3a3a, 1,8:1.
   Nas outras nove páginas: 21:1 e 6,1:1. As duas folhas que erraram
   (`cases.css`, `conteudo.css`) declaravam só `background` e `color`; as
   duas que acertaram (`case.css`, `frente.css`) declaravam os três tokens
   junto. Quatro cópias da mesma decisão, duas divergiram - a mesma
   história da `.placa` e do convite de fechamento.

   Uma regra só, aqui, porque `layout.css` é a única folha que as quatro
   carregam. `border-top: 0` porque nas quatro o rodapé emenda com uma
   seção preta e um filete ali é costura à vista - as páginas de tema
   escuro mantêm o filete do `.footer` acima, onde ele separa de verdade.

   O par desta regra é o `--bg` do `.mega` em `header.css`: mesmo erro,
   mesmo mês, mesma causa - escopo escuro que troca `color` e esquece os
   tokens. */
.case-page .footer,
.cases-page .footer,
.conteudo-page .footer,
.doc-page .footer,
.frente-page .footer {
  background: var(--c-black);
  color: var(--c-white);
  --fg: var(--c-white);
  --fg-muted: var(--c-gray-on-dark);
  --line: var(--c-line-dark);
  border-top: 0;
}

/* A frase cede largura para as colunas: eram três listas, agora são
   quatro, e a proporção antiga espremia cada uma até "Dls/ Comunicação"
   quebrar em duas linhas. A frase tem quebras escritas à mão e não
   sofre com menos espaço; a lista de links sofre. */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(var(--sp-7), 6vw, var(--sp-9));
  align-items: start;
}

/* Corpo de título, e não de display: em escala de display a frase
   ocupava a largura de uma manchete e competia com a assinatura logo
   abaixo - duas peças grandes disputando o mesmo fim de página. Aqui ela
   volta a ser o que é: uma frase, em quatro linhas, com o termo próprio
   sublinhado. */
.footer__claim {
  font-size: var(--fs-title);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: var(--tr-display);
}

.footer__claim-mark {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.footer__list {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

/* DUAS LINHAS DE ALTURA MESMO QUANDO SÓ USA UMA. "Tecnologias
   proprietárias" não cabe em uma linha na coluna de 158px, e sem piso
   de altura só aquela coluna empurrava o primeiro link 11px para baixo
   - as quatro listas deixavam de começar na mesma linha. O piso resolve
   para qualquer rótulo longo que venha depois, e não só para este.

   `line-height` acima de 1 junto: em caixa alta a 11px, duas linhas
   coladas na entrelinha 1 do `.t-label` fecham o vão entre as letras
   altas de uma e as da outra. */
.footer__list .t-label {
  color: var(--fg);
  margin-bottom: var(--sp-2);
  line-height: 1.2;
  min-height: 2.4em;
}

.footer__list a {
  width: fit-content;
  transition: color var(--dur-base) var(--ease-out);
}

.footer__list a:hover {
  color: var(--fg);
}

/* Idêntico ao do header: mesmo preenchimento branco, mesmo texto preto,
   mesmo amarelo no hover. `width: fit-content` porque a coluna do rodapé
   é uma grade e sem isso o botão esticaria até a largura dela. */
.footer__cta {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-black);
  width: fit-content;
  margin-top: var(--sp-3);
}

.footer__cta:hover {
  --btn-bg: var(--c-yellow);
  --btn-fg: var(--c-black);
}

/* ---------- selos de certificação ----------
   Alturas diferentes de propósito. Cenp e Sinapro são assinaturas
   deitadas (4,6:1 e 2,6:1); o GPTW é um escudo em pé (0,7:1). Igualados
   pela altura, o escudo viraria um selo de 20px de largura, ilegível;
   igualados pela largura, ele sozinho ficaria com a altura de três
   linhas de texto. O que se iguala aqui é a presença, não o número. */
/* Os selos são o último item de `.footer__cols` e atravessam a grade
   inteira. É daí que o filete tira a largura: `1 / -1` faz a linha ter
   exatamente a medida das colunas, em qualquer quantidade delas - quatro
   no desktop, duas no celular - sem ninguém repetir o número. Escrever
   a largura à mão seria criar um segundo lugar para ela desalinhar. */
.footer__selos {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}

.footer__selos-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-6);
}

/* Os três arquivos já são arte para fundo escuro: Cenp é 98% branco
   com um ponto verde, Sinapro é 70% branco e 27% laranja. Nenhum filtro
   aqui - eles foram entregues prontos para o preto. */
.footer__selo {
  height: var(--alt-selo, 36px);
  width: auto;
  opacity: 0.85;
}

/* O escudo do GPTW fica como é, colorido. Recolorir um selo de
   certificação é alterar a peça que certifica - e nenhum filtro nosso
   vale isso. O que dá para fazer é dar a ele altura de escudo, para
   que não vire miniatura ao lado de duas assinaturas deitadas. */
.footer__selo--gptw {
  --alt-selo: 94px;
  opacity: 1;
}

/* A assinatura sangra até a margem da página. `block` no img e
   `height: auto` evitam a folga fantasma da linha de base, que numa
   peça desta escala apareceria como um degrau.

   A caixa de fora é o corte; a de dentro é o que anda. Duas caixas
   porque a máscara precisa ficar parada enquanto o conteúdo sobe -
   com uma só, mover o elemento moveria o próprio corte junto. */
.footer__mark {
  margin-top: clamp(var(--sp-9), 12vh, var(--sp-11));
  overflow: hidden;
}

.footer__mark-inner {
  will-change: transform;
}

/* Cinza quase preto. É assinatura de página, não chamada: em branco
   pleno o logotipo desta escala rouba o olho do último CTA, que está
   logo acima dele.

   `brightness(0)` achata tudo em preto (inclusive o ponto amarelo, que
   nesta escala viraria um bloco de cor do tamanho de um cartão),
   `invert(1)` devolve branco, e o terceiro passo derruba para 17% -
   #2b2b2b sobre preto puro. */
.footer__mark img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1) brightness(0.17);
  transition: filter var(--dur-scene) var(--ease-out);
}

/* Assentou: a assinatura ganha um passo de luz e para. Sem pulso, sem
   laço - é o ponto final da página. */
.footer__mark.is-revelado img {
  filter: brightness(0) invert(1) brightness(0.26);
}

.footer__legal {
  margin-top: clamp(var(--sp-7), 6vh, var(--sp-8));
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.footer__topo {
  color: var(--fg);
}

@media (max-width: 900px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

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