/* ==========================================================================
   GRAB DIVISION — landing 1.0

   Réplica visual da v3 com o herói A consolidado, reescrita em HTML/CSS/JS puro.
   A v3 dependia do runtime do Claude Design para interpretar <sc-for> e {{ }}, o que
   tornava a página não-editável à mão; aqui cada valor sai de uma custom property, e a
   mesa de controle só reescreve essas propriedades — por isso a mudança é instantânea e
   não exige recarregar nem recompilar nada.
   ========================================================================== */

/* --- fontes, auto-hospedadas --------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("fontes/archivo-variavel.woff2") format("woff2-variations"), url("fontes/archivo-variavel.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("fontes/archivo-black-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Libre Bodoni";
  src: url("fontes/libre-bodoni-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Libre Bodoni";
  src: url("fontes/libre-bodoni-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fontes/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fontes/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* --- os tokens do site (bake 1.0) -----------------------------------------

   Estes valores eram escritos por pagina.js em runtime, a partir de config.js.
   O bake congelou aqui o que o runtime escrevia de fato — a folha agora é a única
   fonte da verdade visual. Editar cor, tipo ou espaçamento é editar este bloco.

   Um toggle de paleta ou de tema claro/escuro futuro entra por cima disto:
   [data-tema="..."] { --gd-fundo: ...; } redefine só o que muda. */

:root {
  --gd-fundo: #f2f0ea;
  --gd-tinta: #050505;
  --gd-sinal: #e64c00;
  /* O mesmo laranja, um degrau mais profundo, para Sinal em CORPO MIÚDO sobre fundo
     claro. #e64c00 mede 3.41:1 contra o osso — reprova AA para texto normal. Este
     mede 4.63:1 e passa. Não substitui o Sinal: filete, botão e destaque de manchete
     continuam no laranja cheio, porque ali a régua é 3:1 (texto grande) ou nem é
     texto. Usar só onde a medição reprovou. */
  --gd-sinal-leitura: #c23e00;
  --gd-branco: #ffffff;
  --gd-grafite-claro: #6e6b63;
  --gd-grafite-escuro: #777777;
  --gd-linha-clara: #d9d6cc;
  --gd-linha-escura: #1e1e1e;

  /* Archivo (variável) e Libre Bodoni seguem auto-hospedadas acima como vozes
     alternativas — um @font-face sem uso não baixa nada. Para trocar a voz
     editorial para Libre Bodoni, basta movê-la para o início da pilha. */
  --gd-display: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gd-editorial: "Times New Roman", Georgia, serif;
  --gd-sistema: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --gd-escala-display: 0.97;
  --gd-entreletra-display: -0.065em;
  --gd-peso-display: 500;
  --gd-escala-sistema: 1.2;

  --gd-foto: grayscale(100%) contrast(140%) brightness(95%) saturate(100%);
  --gd-fantasma-opacidade: 0.2;
  --gd-duo-escuro: #0a0a12;
  --gd-duo-claro: #f2f0ea;
  --gd-mosaico-zoom: 1.29;
  --gd-sombra-ladrilho: 0 22px 60px rgba(5, 5, 5, 0.22);
  --gd-granulado: 0.09;
  --gd-vinheta: 0;
  --gd-fieira: 1px;

  /* a grade global de 12 colunas sobre a página inteira */
  --gd-grade-img: linear-gradient(to right, #d9d6cc 0 1px, transparent 1px);
  --gd-grade-tam: calc(100% / 12) 100%;
  --gd-grade-pos: 0px 0px;
  --gd-grade-opacidade: 0.32;
  --gd-grade-mistura: multiply;
  --gd-grade-z: 3;

  --gd-marquee-seg: 40s;

  /*
    O baralho do manifesto: geometria e tempo da pilha de fotos. Tudo o que o desenho
    do leque decide mora aqui — o JS só escreve --p, a posição de cada carta.

    A carta mede em cqw, e não em %, por dois motivos. O primeiro é que a MESMA
    expressão precisa servir de largura da carta e de altura do palco: uma porcentagem
    muda de referência entre as duas (largura contra altura do pai) e a segunda leitura
    não resolve. O segundo é que --gd-baralho-palco é múltiplo da CARTA, e não
    proporção da coluna: com aspect-ratio, uma coluna larga (1716px de janela dá 565px
    de coluna) esticava o palco para 484px enquanto a carta parava no teto de 250px —
    122px de laranja morto acima das fotos. Agora o palco é sempre 1,53 carta: os 4/3
    da própria carta mais a folga que o leque precisa para girar sem furar a caixa.
  */
  --gd-baralho-carta: clamp(150px, 56cqw, 250px);
  --gd-baralho-palco: 1.53;
  --gd-baralho-centro: calc(var(--gd-baralho-carta) * -0.17);
  --gd-baralho-leque: 7deg;
  --gd-baralho-sobe: calc(var(--gd-baralho-carta) * -0.041);
  --gd-baralho-recuo: 0.055;
  --gd-baralho-fundo: -26px;
  --gd-baralho-ms: 560ms;
  --gd-baralho-sombra: 0 26px 54px -22px rgba(1, 1, 4, 0.55);

  /* --gd-goteira é derivada da base AQUI, na folha; a adaptação móvel no fim do
     arquivo reescreve a derivada. As seções com goteira própria reescrevem a base. */
  --gd-goteira-base: 198px;
  --gd-goteira: var(--gd-goteira-base);
  --gd-faixa-y: 28px;
  --gd-hero-cols: 6;
  --gd-hero-rows: 3;
  --gd-mosaico-cols: 4;
  --gd-arquivo-largura: 522px;
  --gd-arquivo-manchete: clamp(28px, 5.2vw, 62px);
  --gd-heroi-altura: 100;

  --gd-cabecalho-h: 54px;
  --gd-curva: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- escopo por seção (bake do que era PADRAO.secoes) ----------------------

   O manifesto é a única faixa de cor plena: laranja cheio, tinta branca, e o
   Sinal invertido para quase-preto — sobre laranja, o laranja de Sinal deixaria
   de ler como intervenção. Decisão de marca, não capricho técnico. */
#manifesto {
  --sec-fundo: #ff5900;
  --sec-tinta: #ffffff;
  --gd-fundo: #ff5900;
  --gd-tinta: #ffffff;
  --gd-sinal: #010104;
  --gd-linha-clara: #ffffff;
  --gd-linha-escura: #ffffff;
  --gd-goteira-base: 250px;
  --sec-grade: linear-gradient(to right, rgba(217, 214, 204, 0.32) 0 1px, transparent 1px);
  --sec-grade-tam: calc(100% / 12) 100%;
  --sec-grade-pos: 0px 0px;
  --sec-grade-mistura: normal;
}

/* Serviços perde o respiro vertical de propósito: as linhas encostam e a lista lê
   como índice. O granulado alto impede o preto chapado de parecer digital. */
.gd-servicos {
  --gd-granulado: 0.31;
  --gd-goteira-base: 300px;
  --gd-faixa-y: 0px;
}

/* o rodapé volta ao preto; só a fieira segue laranja, fechando a página no Sinal */
.gd-rodape {
  --gd-linha-clara: #da4800;
  --gd-linha-escura: #da4800;
}

/* título de crença sempre preto — sobre o laranja do manifesto, tinta branca herdada
   apagaria o contraste do bloco */
.gd-crenca__en {
  --el-crencaTitulo-cor: #000000;
}

/*
  Os dois corpos de texto do manifesto em tinta escura.

  Sobre #ff5900 o branco mede 3.14:1 — e não há saída pelo lado claro: branco já é a
  cor mais luminosa que existe, então nenhuma variação clara passaria os 4.5:1 de AA
  para texto normal. Só duas portas: escurecer a faixa (o laranja viraria um queimado
  amarronzado, perdendo a única declaração de cor plena da página) ou escurecer o
  texto. Escolhida a segunda: mesma tinta que a seção já usa como Sinal invertido,
  6.64:1, e a hierarquia ganha — manchete branca sobre laranja, corpo em tinta,
  exatamente a leitura que a faixa pede.

  A manchete segue branca de propósito: 57px passam pela régua de texto grande (3:1).
*/
#manifesto .gd-corpo-editorial {
  --el-corpoEditorial-cor: #010104;
}
#manifesto .gd-corpo-sistema {
  --el-corpoMono-cor: #010104;
}

/*
  Cada faixa refaz a derivação com a própria base. Quando a seção não escreve base
  nenhuma, --gd-goteira-base chega herdada de :root e o resultado é o global — que é
  exatamente o comportamento de antes.
*/
.gd-heroi,
.gd-marquee,
.gd-secao,
.gd-servicos,
.gd-arquivo,
.gd-contato,
.gd-rodape {
  --gd-goteira: var(--gd-goteira-base);
}

/* --- base ---------------------------------------------------------------- */

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--gd-fundo);
  color: var(--gd-tinta);
  font-family: var(--gd-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a {
  color: var(--gd-tinta);
  text-decoration: none;
}
@media (hover: hover) {
  a:hover {
    color: var(--gd-sinal);
  }
}
a:active {
  color: var(--gd-sinal);
}
button {
  font: inherit;
}
::selection {
  background: var(--gd-sinal);
  color: var(--gd-fundo);
}
:focus-visible {
  outline: 2px solid var(--gd-sinal);
  outline-offset: 3px;
}

@keyframes gd-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- grade de 12 colunas -------------------------------------------------- */

.gd-grade {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: var(--gd-grade-opacidade);
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(to right, var(--gd-linha-clara) 0 1px, transparent 1px var(--gd-grade-passo, 8.3333%));
}

/* --- granulado opcional sobre a página inteira ---------------------------- */

.gd-granulado {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: var(--gd-granulado);
  background-repeat: repeat;
  mix-blend-mode: multiply;
}

/* --- cabeçalho ----------------------------------------------------------- */

.gd-cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--gd-fundo) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gd-linha-clara);
}
.gd-cabecalho__barra {
  display: flex;
  align-items: stretch;
  height: var(--gd-cabecalho-h);
}
.gd-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border-right: 1px solid var(--gd-linha-clara);
  flex-shrink: 0;
}
.gd-marca__selo {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--gd-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gd-sistema);
  font-size: calc(9px * var(--gd-escala-sistema));
  font-weight: 500;
  letter-spacing: 0.02em;
}
.gd-marca__nome {
  font-family: var(--gd-sistema);
  font-size: calc(10px * var(--gd-escala-sistema));
  letter-spacing: 0.2em;
  font-weight: 500;
  white-space: nowrap;
}
.gd-marca__reg {
  font-size: 6px;
  vertical-align: super;
}
.gd-nav {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.gd-nav a {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid var(--gd-linha-clara);
  font-family: var(--gd-sistema);
  font-size: calc(9px * var(--gd-escala-sistema));
  letter-spacing: 0.18em;
  white-space: nowrap;
}
/* tinta preta sobre o Sinal: branco mede 3,8:1 e reprova AA */
.gd-agendar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--gd-sinal);
  color: var(--gd-tinta);
  font-family: var(--gd-sistema);
  font-size: calc(9px * var(--gd-escala-sistema));
  font-weight: 500;
  letter-spacing: 0.18em;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 220ms var(--gd-curva), color 220ms var(--gd-curva);
}
.gd-agendar:active {
  background: var(--gd-tinta);
  color: var(--gd-fundo);
}
@media (hover: hover) {
  .gd-agendar:hover {
    background: var(--gd-tinta);
    color: var(--gd-fundo);
  }
}
/* só existe abaixo de 900px — no desktop o menu já vai inline na barra */
.gd-menu-alternar {
  display: none;
}
.gd-espacador {
  height: var(--gd-cabecalho-h);
}
/* o cabeçalho é fixo: sem isto a âncora encosta o topo da seção atrás dele */
#topo,
.gd-secao,
.gd-servicos,
.gd-arquivo,
.gd-contato {
  scroll-margin-top: var(--gd-cabecalho-h);
}

/* abaixo de 900px a navegação sai da barra e vira um menu suspenso: mais limpo que os
   três alvos espremidos, e a barra continua com uma faixa só, igual ao desktop. */
@media (max-width: 900px) {
  .gd-cabecalho__barra {
    position: relative;
  }
  /* Agendar e menu viram um bloco só — mesmo laranja, sem costura visível como
     separação de fundo. Uma linha preta fina entre os dois marca que são botões
     diferentes sem quebrar a leitura de bloco único, igual à divisória que já existe
     entre marca e nav aqui do lado. Agendar estica (flex-grow) pra preencher o que
     sobra entre a marca e o menu — largura fixa deixava vão em branco na borda em
     telas mais largas (iPhone Pro Max e afins); assim ele encosta nos dois lados
     em qualquer largura de tela mobile, sem vão em lugar nenhum. */
  .gd-agendar {
    flex: 1 1 auto;
    justify-content: center;
    border-right: 1px solid color-mix(in srgb, var(--gd-tinta) 25%, transparent);
  }
  .gd-menu-alternar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gd-cabecalho-h);
    flex-shrink: 0;
    background: var(--gd-sinal);
    border: 0;
    color: var(--gd-tinta);
    cursor: pointer;
  }
  .gd-menu-alternar__traco {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    transform-origin: 11px 11px;
    transition: transform 220ms var(--gd-curva), opacity 220ms var(--gd-curva);
  }
  /* três traços viram X quando o menu abre — sutil, sem trocar de ícone */
  .gd-menu-alternar[aria-expanded="true"] .gd-menu-alternar__traco--1 {
    transform: translateY(5px) rotate(45deg);
  }
  .gd-menu-alternar[aria-expanded="true"] .gd-menu-alternar__traco--2 {
    opacity: 0;
  }
  .gd-menu-alternar[aria-expanded="true"] .gd-menu-alternar__traco--3 {
    transform: translateY(-5px) rotate(-45deg);
  }

  .gd-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    flex-direction: column;
    min-width: 240px;
    background: var(--gd-fundo);
    border: 1px solid var(--gd-linha-clara);
    border-top: 0;
    box-shadow: 0 16px 32px rgba(5, 5, 5, 0.12);
  }
  .gd-nav--aberto {
    display: flex;
  }
  .gd-nav a {
    padding: 15px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--gd-linha-clara);
    font-family: var(--gd-sistema);
    font-size: calc(9px * var(--gd-escala-sistema));
    letter-spacing: 0.18em;
  }
  .gd-nav a:last-child {
    border-bottom: 0;
  }
}

/* --- herói: holofote ----------------------------------------------------- */

.gd-heroi {
  position: relative;
  height: calc(var(--gd-heroi-altura, 100) * 1vh - var(--gd-cabecalho-h));
  min-height: 620px;
  overflow: hidden;
  background-color: var(--sec-fundo, var(--gd-fundo));
  border-bottom: 1px solid var(--gd-tinta);
  cursor: crosshair;
}
.gd-heroi__grade {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--gd-hero-cols), 1fr);
  grid-template-rows: repeat(var(--gd-hero-rows), 1fr);
}
.gd-heroi__celula {
  position: relative;
  overflow: hidden;
}
.gd-heroi__grade--fantasma .gd-heroi__celula {
  border-right: 1px solid var(--gd-linha-clara);
  border-bottom: 1px solid var(--gd-linha-clara);
}
.gd-heroi__grade--acesa .gd-heroi__celula {
  background: var(--gd-tinta);
}
.gd-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: var(--gd-foto);
}
.gd-heroi__grade--fantasma .gd-foto {
  filter: grayscale(100%) contrast(112%) brightness(112%);
  opacity: var(--gd-fantasma-opacidade);
}

.gd-heroi__tipo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gd-goteira);
  container-type: inline-size; /* a caixa de consulta da manchete: a coluna já sem goteira */
  pointer-events: none; /* sem isto o holofote congela onde o texto começa */
  /* sombra bem sutil só aqui: o herói é a seção com mais textura por baixo do texto
     (foto, grade, holofote) — herda pra manchete, sobrancelha e ledes de uma vez. */
  text-shadow: 0 1px 8px color-mix(in srgb, var(--gd-tinta) 30%, transparent);
}
.gd-sobrancelha {
  font-family: var(--gd-sistema);
  font-size: calc(9px * var(--gd-escala-sistema));
  letter-spacing: 0.24em;
  color: var(--gd-grafite-claro);
  margin-bottom: 18px;
}
/*
  A manchete mede a partir da COLUNA em que precisa caber, não da janela.

  Ela é escrita em duas linhas — "GRAB" e "THE VISION" — e a segunda ocupa 5,9× o corpo.
  Com 12,5vw o corpo ignorava a goteira: em 1440 "THE VISION" pedia 1031px numa coluna de
  1029. Faltavam dois pixels, e a linha caía para três. Entre 900 e 1150px, onde a goteira
  fixa come 396px da largura, faltava muito mais. text-wrap: balance escondia a causa
  atrás de um sintoma que mudava com a largura — três linhas em 1440, duas em 1900.

  16cqw resolve na origem: a linha longa passa a ocupar 92% da coluna em QUALQUER largura,
  de 320px até o teto de 220px, e as duas linhas deixam de depender da janela.
*/
/*
  A quebra da manchete é CSS, e não <br>.

  Era `GRAB<br />THE VISION`, com a quebra assada no HTML — e uma quebra assada só
  serve a UMA largura. Agora as três palavras são span e quem decide onde a linha
  termina é a folha: GRAB sozinho em qualquer tela, THE e VISION juntos no desktop e
  cada um na sua linha no telefone.
*/
.gd-manchete__palavra:first-child {
  display: block;
}

.gd-manchete {
  margin: 0;
  font-family: var(--gd-display);
  font-size: calc(clamp(44px, 16cqw, 220px) * var(--gd-escala-display));
  font-weight: var(--gd-peso-display);
  line-height: 0.82;
  letter-spacing: var(--gd-entreletra-display);
  text-transform: uppercase;
}
.gd-sinal {
  color: var(--gd-sinal);
}
.gd-heroi__linha {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(16px, 3vw, 46px);
  max-width: 780px;
}
.gd-lede-editorial {
  margin: 0;
  font-family: var(--gd-editorial);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 36px);
  line-height: 1.12;
}
.gd-lede-sistema {
  margin: 0;
  font-family: var(--gd-sistema);
  font-size: calc(11px * var(--gd-escala-sistema));
  line-height: 1.75;
  letter-spacing: 0.04em;
  max-width: 380px;
}
.gd-heroi__regua {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px var(--gd-goteira);
  font-family: var(--gd-sistema);
  font-size: calc(8px * var(--gd-escala-sistema));
  letter-spacing: 0.18em;
  color: var(--gd-grafite-claro);
  background: linear-gradient(to top, color-mix(in srgb, var(--gd-fundo) 95%, transparent), transparent);
  pointer-events: none;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--gd-tinta) 30%, transparent);
}

/* --- marquee ------------------------------------------------------------- */

.gd-marquee {
  position: relative;
  /* sobe por cima da base do herói para já entrar visível, inteira, na primeira
     dobra, sem esperar rolagem — a faixa preta funciona como divisória de seção
     mesmo antes de o usuário se mexer. -41px é a altura cheia da própria faixa
     (padding 11px + linha de texto + borda), não um valor arbitrário: sobe o
     suficiente pro texto caber sem cortar nenhuma letra, e nem um pixel a mais —
     a próxima seção nasce exatamente onde a faixa termina, sem vazar por cima
     dela. Se a altura da faixa mudar (fonte, padding), este valor precisa
     acompanhar. */
  margin-top: -41px;
  overflow: hidden;
  border-bottom: 1px solid var(--gd-tinta);
  background-color: var(--sec-fundo, var(--gd-tinta));
  padding: 11px 0;
}
.gd-marquee__trilho {
  display: flex;
  width: max-content;
  animation: gd-marquee var(--gd-marquee-seg) linear infinite;
}
.gd-marquee__copia {
  font-family: var(--gd-sistema);
  font-size: calc(11px * var(--gd-escala-sistema));
  letter-spacing: 0.26em;
  color: var(--gd-fundo);
  white-space: nowrap;
  padding-right: 34px;
}

/* --- seções -------------------------------------------------------------- */

.gd-secao {
  position: relative;
  border-bottom: 1px solid var(--gd-tinta);
  padding: var(--gd-faixa-y) var(--gd-goteira);
  background-color: var(--sec-fundo, var(--gd-fundo));
  color: var(--sec-tinta, var(--gd-tinta));
}
.gd-regua-secao {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--gd-sistema);
  font-size: calc(9px * var(--gd-escala-sistema));
  letter-spacing: 0.2em;
  color: var(--gd-grafite-claro);
  padding-bottom: clamp(30px, 4vw, 56px);
  border-bottom: 1px solid var(--gd-linha-clara);
}

/* --- manifesto ----------------------------------------------------------- */

.gd-manifesto__grade {
  display: grid;
  /* min(100%, …) e não 300px seco: com o container abaixo do mínimo, minmax fixo passa a
     medir mais que a faixa e a coluna sai pela direita */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(30px, 5vw, 72px);
  padding-top: clamp(38px, 5vw, 72px);
  align-items: start;
}
.gd-titulo {
  margin: 0 0 clamp(20px, 3vw, 34px);
  font-family: var(--gd-display);
  font-size: calc(clamp(30px, 4.6vw, 74px) * var(--gd-escala-display));
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.gd-corpo-editorial {
  margin: 0 0 20px;
  font-family: var(--gd-sistema);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.38;
}
.gd-corpo-sistema {
  margin: 0;
  font-family: var(--gd-sistema);
  font-size: calc(11px * var(--gd-escala-sistema));
  line-height: 1.85;
  letter-spacing: 0.03em;
  max-width: 440px;
}
/* --- manifesto: o baralho de arquivo -------------------------------------- */

/*
  A grade 2×2 mostrava as quatro fotos ao mesmo tempo, pequenas e paradas, e cobrava
  por isso a altura de duas fotos empilhadas. O baralho troca simultaneidade por
  profundidade: as quatro continuam ali, sobrepostas como cópias impressas, e a da
  frente fica MAIOR do que qualquer uma era na grade, num bloco MAIS BAIXO.

  A pilha não é enfeite: é a leitura de "Memory over impressions" — arquivo que se
  folheia, não feed que se rola. E o gesto é sempre da mão (arraste, clique, seta),
  nunca automático: "Human over automated" também vale para o movimento.

  TODA a pose de uma carta é função de --p, a posição na pilha (0 = frente). O JS
  escreve --p e nada mais; a folha decide o que --p significa. Abrir o leque no hover
  é mexer em UM token, não em quatro transforms.
*/
.gd-manifesto__baralho {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  /* a caixa de consulta da carta: a coluna do baralho, já sem goteira nem goteira de
     grade — mesma técnica da manchete do herói */
  container-type: inline-size;
  /*
    Contra o texto, e não contra o topo da linha. Enquanto as fotos eram uma grade 2×2
    a coluna da direita quase alcançava a da esquerda e alinhar pelo topo bastava. O
    baralho é mais baixo que o manifesto de propósito, e alinhado no topo ele deixava
    todo o vazio embaixo, num canto só. Centrado, a sobra se divide.
  */
  align-self: center;
}

.gd-baralho__palco {
  position: relative;
  width: 100%;
  height: calc(var(--gd-baralho-carta) * var(--gd-baralho-palco));
  perspective: 1200px;
  perspective-origin: 50% 42%;
  /* pan-y devolve a rolagem vertical ao dedo; o eixo X pertence ao baralho */
  touch-action: pan-y;
  /* arrastar não pode virar seleção de texto no meio do gesto */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.gd-baralho__palco.esta-arrastando {
  cursor: grabbing;
}

/* A mesa carrega duas coisas: a inclinação sob o ponteiro e o recentramento.

   O leque abre só para a direita — a carta da frente é a mais à esquerda de todas.
   Sem correção, o conjunto encosta na borda direita da coluna e deixa 77px de vazio
   à esquerda. --gd-baralho-centro empurra a mesa de volta metade do que o leque
   avança, e o bloco volta a ler como centrado.

   A inclinação mora aqui, e não na carta, de propósito: se ela entrasse no transform
   de cada carta, brigaria com a animação de virada, que também escreve transform. */
.gd-baralho__mesa {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    translateX(var(--gd-baralho-centro))
    rotateX(var(--gd-baralho-inclina-x, 0deg))
    rotateY(var(--gd-baralho-inclina-y, 0deg));
  transition: transform 280ms var(--gd-curva);
}

.gd-baralho__carta {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: var(--gd-baralho-carta);
  margin-left: calc(var(--gd-baralho-carta) / -2);
  aspect-ratio: 3 / 4;
  background: var(--gd-tinta);
  overflow: hidden;
  /*
    O pivô fica ABAIXO da carta. Girar em torno de um ponto fora do corpo espalha os
    topos e mantém as bases quase alinhadas — é o que faz a pilha ler como leque na
    mão, e não como quatro retângulos tortos.

    --gd-baralho-sobe existe por causa desse pivô: girar um retângulo joga a quina de
    baixo para FORA, e sem essa correção a última carta furava o palco por baixo e
    encostava na régua. Cada passo do leque sobe 4,1% da largura da carta e devolve a
    base ao lugar — fração, e não pixel, porque a quina desce proporcional ao tamanho:
    com 8px fixos a carta grande de tela larga voltava a furar.
  */
  transform-origin: 50% 126%;
  transform:
    translate3d(var(--arrasto, 0px), calc(var(--p) * var(--gd-baralho-sobe)), calc(var(--p) * var(--gd-baralho-fundo)))
    rotate(calc(var(--p) * var(--gd-baralho-leque) + var(--giro, 0deg)))
    scale(calc(1 - var(--p) * var(--gd-baralho-recuo)));
  z-index: calc(10 - var(--p));
  box-shadow: var(--gd-baralho-sombra);
  /* Fio branco de separação: as fotos são p&b e se sobrepõem; sem a aresta, duas
     cartas vizinhas viram uma mancha só. É o mesmo 1px que a grade 2×2 usava como
     goteira, agora contornando cada cópia. outline e não border: não entra na caixa. */
  outline: 1px solid var(--gd-tinta);
  outline-offset: -1px;
  transition:
    transform var(--gd-baralho-ms) var(--gd-curva),
    opacity var(--gd-baralho-ms) var(--gd-curva);
}
/* enquanto o dedo arrasta, a carta é o dedo: transição nenhuma entre os dois */
.gd-baralho__palco.esta-arrastando .gd-baralho__carta {
  transition: none;
}

/*
  O leque abre debaixo do ponteiro e no foco de teclado — quem chega pelo teclado vê o
  mesmo convite que quem chega pelo mouse.

  São dois blocos iguais e não um seletor com duas partes porque só a metade do hover
  precisa da media query: no telefone :hover gruda depois do toque e o baralho ficaria
  aberto para sempre. Uma lista de seletores herdaria a condição inteira e mataria
  também o foco de teclado, que nada tem a ver com ponteiro.
*/
@media (hover: hover) {
  .gd-baralho__palco:hover {
    --gd-baralho-leque: 9.5deg;
    --gd-baralho-recuo: 0.042;
    --gd-baralho-fundo: -32px;
    --gd-baralho-sobe: calc(var(--gd-baralho-carta) * -0.056);
    --gd-baralho-centro: calc(var(--gd-baralho-carta) * -0.23);
  }
}
.gd-manifesto__baralho:focus-within .gd-baralho__palco {
  --gd-baralho-leque: 9.5deg;
  --gd-baralho-recuo: 0.042;
  --gd-baralho-fundo: -32px;
  --gd-baralho-sobe: calc(var(--gd-baralho-carta) * -0.056);
  --gd-baralho-centro: calc(var(--gd-baralho-carta) * -0.23);
}

/*
  A virada. A carta da frente não pode simplesmente ir para --p: 3: ela atravessaria as
  outras por dentro. Então sai pela esquerda, some no meio do caminho e reaparece no
  fundo — o gesto de quem tira a foto de cima e enfia embaixo do bolo.
*/
@keyframes gd-baralho-passa {
  0% {
    z-index: 12;
    opacity: 1;
    transform: translate3d(0, 0, 60px) rotate(0deg) scale(1);
  }
  42% {
    z-index: 12;
    opacity: 1;
    transform: translate3d(-72%, 3%, 90px) rotate(-16deg) scale(0.98);
  }
  58% {
    z-index: 0;
    opacity: 0;
    transform: translate3d(-46%, 1%, 20px) rotate(-9deg) scale(0.95);
  }
  100% {
    z-index: 0;
    opacity: 1;
  }
}
@keyframes gd-baralho-volta {
  0% {
    z-index: 0;
    opacity: 1;
    transform:
      translate3d(0, calc(3 * var(--gd-baralho-sobe)), calc(3 * var(--gd-baralho-fundo)))
      rotate(calc(3 * var(--gd-baralho-leque)))
      scale(calc(1 - 3 * var(--gd-baralho-recuo)));
  }
  22% {
    z-index: 12;
    opacity: 0;
    transform: translate3d(-46%, 1%, 20px) rotate(-9deg) scale(0.95);
  }
  46% {
    z-index: 12;
    opacity: 1;
    transform: translate3d(-72%, 3%, 90px) rotate(-16deg) scale(0.98);
  }
  100% {
    z-index: 12;
    opacity: 1;
  }
}
/* mais específico que a regra da distribuição acima, para a virada vencer caso alguém
   clique antes de a entrada terminar */
.gd-js .gd-manifesto__baralho .gd-baralho__carta.esta-passando {
  animation: gd-baralho-passa var(--gd-baralho-ms) var(--gd-curva) both;
}
.gd-js .gd-manifesto__baralho .gd-baralho__carta.esta-voltando {
  animation: gd-baralho-volta var(--gd-baralho-ms) var(--gd-curva) both;
}

/* --- régua do baralho ----------------------------------------------------- */

/* Mesma voz Sistema das outras réguas da página; tinta escura porque sobre o laranja o
   branco reprova em AA, pelo mesmo motivo dos dois corpos de texto acima. */
.gd-baralho__regua {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: clamp(10px, 1.2vw, 14px);
  border-top: 1px solid var(--gd-linha-clara);
  font-family: var(--gd-sistema);
  font-size: calc(9px * var(--gd-escala-sistema));
  letter-spacing: 0.2em;
  color: var(--gd-sinal);
}
.gd-baralho__campo {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* As setas só existem se o script existe: botão que não faz nada é pior que botão
   nenhum. .gd-js é escrita por pagina.js no <html>. */
.gd-baralho__controles {
  display: none;
  align-items: center;
  gap: 8px;
}
.gd-js .gd-baralho__controles {
  display: flex;
}
.gd-baralho__seta {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--gd-sinal);
  color: var(--gd-sinal);
  font-family: var(--gd-sistema);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 180ms var(--gd-curva), color 180ms var(--gd-curva);
}
@media (hover: hover) {
  .gd-baralho__seta:hover {
    background: var(--gd-sinal);
    color: var(--gd-fundo);
  }
}
.gd-baralho__seta:active {
  background: var(--gd-sinal);
  color: var(--gd-fundo);
}

.gd-crencas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: var(--gd-linha-clara);
  border: 1px solid var(--gd-linha-clara);
  /* o respiro encolheu junto com o baralho: a grade 2×2 empurrava as crenças para
     baixo e elas precisavam de 88px para não colar. Com a coluna da direita mais
     curta, 60px já separam. */
  margin-top: clamp(34px, 4vw, 60px);
}
.gd-crenca {
  background: var(--gd-fundo);
  padding: clamp(20px, 2.6vw, 32px);
}
.gd-crenca__n {
  font-family: var(--gd-sistema);
  font-size: calc(9px * var(--gd-escala-sistema));
  letter-spacing: 0.2em;
  color: var(--gd-sinal);
  margin-bottom: 14px;
}
.gd-crenca__en {
  font-family: var(--gd-display);
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.gd-crenca__pt {
  font-family: var(--gd-editorial);
  font-style: italic;
  font-size: 14px;
  line-height: 1.42;
  /* acompanha o título EN do mesmo cartão, que já era tinta escura: sobre o laranja
     do manifesto o branco media 3.14:1 e reprovava. Assim o cartão fica numa tinta só. */
  color: #010104;
}

/* --- serviços ------------------------------------------------------------ */

.gd-servicos {
  position: relative;
  border-bottom: 1px solid var(--gd-tinta);
  background-color: var(--sec-fundo, var(--gd-tinta));
  color: var(--sec-tinta, var(--gd-fundo));
}
.gd-servicos .gd-regua-secao {
  color: var(--gd-grafite-escuro);
  border-bottom: 0;
  padding: clamp(40px, 5vw, 72px) var(--gd-goteira) clamp(28px, 3.5vw, 48px);
}
.gd-servico {
  position: relative;
  border-top: 1px solid var(--gd-linha-escura);
  padding: clamp(22px, 3.2vw, 44px) var(--gd-goteira);
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
  overflow: hidden;
  cursor: default;
  /* a saída mora aqui e a entrada em .esta-sobre: chegar é gesto, sair é só desfazer */
  transition: background 260ms var(--gd-curva), color 260ms var(--gd-curva);
}
.gd-servico.esta-sobre {
  background: var(--gd-fundo);
  color: var(--gd-tinta);
}
.gd-servico__n {
  font-family: var(--gd-sistema);
  font-size: calc(10px * var(--gd-escala-sistema));
  letter-spacing: 0.16em;
  flex-shrink: 0;
  width: 34px;
}
.gd-servico__corpo {
  flex: 1;
  min-width: 0;
}
.gd-servico__titulo {
  font-family: var(--gd-display);
  font-size: calc(clamp(26px, 4.4vw, 68px) * var(--gd-escala-display));
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.gd-servico__desc {
  margin-top: 10px;
  font-family: var(--gd-sistema);
  font-size: calc(10px * var(--gd-escala-sistema));
  letter-spacing: 0.1em;
  line-height: 1.7;
  max-width: 520px;
  opacity: 0.72;
}
.gd-servico__foto {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(120px, 17vw, 260px);
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transition: opacity 260ms var(--gd-curva), clip-path 260ms var(--gd-curva);
  pointer-events: none;
}
.gd-servico.esta-sobre .gd-servico__foto {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-duration: 520ms;
}
.gd-servicos__fecho {
  border-top: 1px solid var(--gd-linha-escura);
  padding: clamp(26px, 3.5vw, 46px) var(--gd-goteira);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.5vw, 34px);
  align-items: center;
  justify-content: space-between;
}
.gd-servicos__fecho p {
  margin: 0;
  font-family: var(--gd-editorial);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 30px);
  color: var(--gd-fundo);
}
.gd-servicos__link {
  font-family: var(--gd-sistema);
  font-size: calc(10px * var(--gd-escala-sistema));
  letter-spacing: 0.2em;
  color: var(--gd-fundo);
  border-bottom: 1px solid var(--gd-sinal);
  padding-bottom: 4px;
}

/* --- arquivo (03) --------------------------------------------------------- */

/*
  Era uma faixa sem nome entre Serviços e FAQ: 24 quadrados de 105px sangrando de
  ponta a ponta, 211px de altura contra 1045 do manifesto e 1224 de serviços. Sem
  número, sem manchete, fora do menu e até fora da lista de `scroll-margin-top` —
  nunca tinha sido tratada como seção, e lia como transição.

  Agora é a seção 03, e o desenho carrega três decisões:

  1. A GRADE CENTRALIZA. Acima de --gd-arquivo-largura ela vira coluna, não faixa.
     Isso resolve duas coisas de uma vez: dá a leitura de feed que o telefone já tinha
     e separa esta seção da faixa preta de serviços logo acima — as duas massas
     escuras se fundiam quando ambas sangravam. Sem inventar cor: o ARCHITECTURE
     reserva a única faixa de cor plena para o manifesto.

  2. QUATRO COLUNAS EM QUALQUER TELA. Eram três composições — doze colunas no
     desktop, seis no tablet, quatro no telefone — e viram uma só: 24 vagas em 4×6,
     sempre. O telefone já lia como feed nessa forma; o desktop passa a ler igual, só
     que centrado e com o ladrilho maior. Uma regra a menos, e a seção vira um objeto
     único que só muda de escala.

  3. A LARGURA É O QUE CONTROLA A ALTURA. Em 4 colunas a grade mede sempre 1,5 vez a
     largura — seis fileiras de ladrilho quadrado. --gd-arquivo-largura é, na
     prática, o botão de altura da seção: 580px dão ladrilho de 144px (contra 105px
     da faixa antiga) e põem a seção na mesma altura do manifesto. Mais largo que
     isso e ela passa a ser a seção mais alta da página.
*/
.gd-arquivo {
  /*
    Goteira própria, bem menor que a global de 198px. A régua desta seção emoldura uma
    coluna centrada, e não um bloco de texto: quanto mais perto das bordas ela passa,
    mais o feed no meio lê como objeto pousado na página. E é essa folga que abre a
    faixa lateral onde a manchete vai morar.
  */
  --gd-goteira-base: clamp(24px, 3.4vw, 58px);
  position: relative;
  border-bottom: 1px solid var(--gd-tinta);
  padding-bottom: clamp(28px, 3.2vw, 44px);
  background-color: var(--sec-fundo, var(--gd-fundo));
  color: var(--sec-tinta, var(--gd-tinta));
}
.gd-arquivo .gd-regua-secao {
  border-bottom: 0;
  padding: clamp(30px, 3.4vw, 48px) var(--gd-goteira) clamp(10px, 1.2vw, 16px);
}
/* o campo do meio da régua: quantas vagas já são projeto público. Número em vez de
   adjetivo — é o que transforma um arquivo pela metade em declaração, e ele sobe
   sozinho conforme os projetos entram */
.gd-arquivo__contagem {
  color: var(--gd-sinal);
}
.gd-arquivo__titulo {
  margin: 0 0 clamp(18px, 2vw, 28px);
  padding-inline: var(--gd-goteira);
  font-family: var(--gd-display);
  font-size: calc(var(--gd-arquivo-manchete) * var(--gd-escala-display));
  font-weight: var(--gd-peso-display);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/*
  A manchete ao LADO do feed, e não em cima dele.

  Empilhada, ela cobrava sua altura inteira da seção. Deitada na faixa vazia que o
  feed centrado deixa à esquerda, ela custa zero: a grade sobe e encosta na régua.

  As duas colunas laterais são 1fr idênticas, e é isso que mantém a grade no centro
  da SEÇÃO, e não no centro do espaço que sobrou. A da direita fica vazia de propósito
  — é o contrapeso que o olho precisa para ler o feed como centrado.

  O corte é 1200px, e sai de conta, não de gosto: a faixa lateral mede
  (janela − goteiras − grade − vãos) / 2, e "NÃO É FEED." pede cerca de 6,8 vezes o
  corpo da fonte para caber numa linha. Abaixo de 1200 a conta não fecha e a manchete
  quebraria em três linhas espremidas; aí vale mais empilhar, que é o que o telefone
  já fazia bem.
*/
@media (min-width: 1200px) {
  .gd-arquivo__corpo {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--gd-arquivo-largura)) 1fr;
    align-items: start;
    gap: clamp(24px, 3vw, 56px);
    padding-inline: var(--gd-goteira);
  }
  .gd-arquivo__titulo {
    --gd-arquivo-manchete: clamp(28px, 3vw, 52px);
    margin: 0;
    padding-inline: 0;
  }
}

.gd-mosaico {
  display: grid;
  grid-template-columns: repeat(var(--gd-mosaico-cols), 1fr);
  gap: 1px;
  /* a goteira de 1px e a moldura são a mesma linha: o fundo aparece pelos vãos */
  background-color: var(--gd-linha-clara);
  border: 1px solid var(--gd-linha-clara);
  width: min(100%, var(--gd-arquivo-largura));
  margin-inline: auto;
}
.gd-mosaico__celula {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--gd-tinta);
  color: var(--gd-fundo);
  transition: opacity 260ms var(--gd-curva);
}
.gd-mosaico__celula .gd-foto {
  transition: transform 420ms var(--gd-curva);
}
/* a vaga cheia é <a>: o ladrilho inteiro é o alvo, e o cursor diz isso */
a.gd-mosaico__celula {
  display: block;
  text-decoration: none;
  color: var(--gd-fundo);
}

/*
  O "?" de vaga vazia, desenhado em CSS.

  mosaico-ascii.js troca isto por um canvas com o mesmo "?" girando, e marca a seção
  com .esta-em-ascii para esconder o estático. Quem está sem JS não fica com 24
  caixas pretas vazias: fica com o mesmo símbolo, parado. O efeito degrada para o
  conteúdo, não para o nada.
*/
.gd-mosaico__vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--gd-sistema);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 56px);
  line-height: 1;
  color: color-mix(in srgb, var(--gd-fundo) 34%, transparent);
}
.esta-em-ascii .gd-mosaico__vazio {
  display: none;
}
.gd-mosaico__ascii {
  display: block;
  width: 100%;
  height: 100%;
}

.gd-mosaico__id {
  position: absolute;
  top: 7px;
  left: 8px;
  font-family: var(--gd-sistema);
  font-size: calc(7px * var(--gd-escala-sistema));
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--gd-fundo) 62%, transparent);
  pointer-events: none;
}
/*
  A ficha do ladrilho: hoje "Reservado", amanhã o nome do cliente e a disciplina.
  Escondida em repouso de propósito — 24 fichas visíveis ao mesmo tempo viram ruído,
  e a grade em repouso precisa ler como arquivo, não como legenda.
*/
.gd-mosaico__meta {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  font-family: var(--gd-sistema);
  font-size: calc(7px * var(--gd-escala-sistema));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gd-fundo);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms var(--gd-curva), transform 260ms var(--gd-curva);
  pointer-events: none;
}

/*
  Holofote de grade. O ladrilho sob o ponteiro acende e os outros recuam — é a mesma
  regra que as linhas de serviço já seguem, e o comentário de lá vale aqui: holofote
  que acende em vinte e quatro lugares não é holofote. Em 136px isso é legível; nos
  105px de antes não seria.
*/
@media (hover: hover) {
  .gd-mosaico:hover .gd-mosaico__celula {
    opacity: 0.34;
  }
  .gd-mosaico .gd-mosaico__celula:hover {
    opacity: 1;
  }
  .gd-mosaico__celula:hover .gd-foto {
    transform: scale(var(--gd-mosaico-zoom));
  }
}
.gd-mosaico__celula:hover .gd-mosaico__meta,
.gd-mosaico__celula:focus-visible .gd-mosaico__meta {
  opacity: 1;
  transform: none;
}
/* teclado vê o mesmo que o ponteiro: acende o alvo mesmo com a grade em hover */
.gd-mosaico:hover .gd-mosaico__celula:focus-visible,
.gd-mosaico__celula:focus-visible {
  opacity: 1;
}

/* --- faq ----------------------------------------------------------------- */

.gd-faq .gd-regua-secao {
  border-bottom: 0;
  padding-bottom: clamp(28px, 4vw, 52px);
}
.gd-faq__titulo {
  margin: 0 0 clamp(34px, 5vw, 64px);
  font-family: var(--gd-display);
  font-size: calc(clamp(30px, 5.6vw, 90px) * var(--gd-escala-display));
  font-weight: var(--gd-peso-display);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  max-width: 900px;
}
.gd-contorno {
  -webkit-text-stroke: 1.5px var(--gd-tinta);
  color: transparent;
}
.gd-faq__lista {
  border-top: 1px solid var(--gd-tinta);
}
.gd-faq__item {
  border-bottom: 1px solid var(--gd-linha-clara);
}
.gd-faq__botao {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: clamp(18px, 2.4vw, 30px) 0;
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2.5vw, 34px);
  color: var(--gd-tinta);
  font-family: inherit;
}
.gd-faq__n {
  font-family: var(--gd-sistema);
  font-size: calc(10px * var(--gd-escala-sistema));
  letter-spacing: 0.16em;
  color: var(--gd-sinal-leitura);
  flex-shrink: 0;
  width: 30px;
}
.gd-faq__q {
  flex: 1;
  font-family: var(--gd-display);
  font-size: clamp(17px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.gd-faq__sinal {
  font-family: var(--gd-sistema);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--gd-grafite-claro);
}
/* grid-template-rows no lugar do teto de 400px: anima altura arbitrária sem cortar */
.gd-faq__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--gd-curva);
}
.gd-faq__item.esta-aberta .gd-faq__corpo {
  grid-template-rows: 1fr;
}
.gd-faq__interno {
  overflow: hidden;
}
.gd-faq__conteudo {
  padding: 0 0 clamp(20px, 2.6vw, 32px) clamp(44px, 5vw, 64px);
  max-width: 680px;
}
.gd-faq__a {
  margin: 0 0 12px;
  font-family: var(--gd-sistema);
  font-size: calc(11px * var(--gd-escala-sistema));
  line-height: 1.85;
  letter-spacing: 0.03em;
}
.gd-faq__en {
  margin: 0;
  font-family: var(--gd-editorial);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gd-grafite-claro);
}

/* --- contato ------------------------------------------------------------- */

.gd-contato {
  position: relative;
  background-color: var(--sec-fundo, var(--gd-sinal));
  color: var(--sec-tinta, var(--gd-branco));
  overflow: hidden;
  padding: clamp(56px, 8vw, 120px) var(--gd-goteira);
}
.gd-contato__sangria {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(34vw, 460px);
  opacity: 0.34;
  mix-blend-mode: luminosity;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) contrast(150%);
}
.gd-contato__conteudo {
  position: relative;
  z-index: 2;
  max-width: 1000px;
}
.gd-contato__sobrancelha {
  font-family: var(--gd-sistema);
  font-size: calc(9px * var(--gd-escala-sistema));
  letter-spacing: 0.24em;
  margin-bottom: 22px;
  /*
    Tinta escura e opacidade cheia. Duas coisas derrubavam este rótulo para 3.89:1
    sobre o laranja: a tinta branca herdada da faixa e o véu de 0.85, que mistura o
    próprio fundo de volta no texto. A mesma tinta que o manifesto já usa como Sinal
    invertido resolve as duas — 5.36:1 — e o título gigante logo abaixo segue branco,
    onde a régua de texto grande (3:1) o aprova com folga.
  */
  color: #010104;
}
.gd-contato__titulo {
  margin: 0 0 clamp(26px, 4vw, 48px);
  font-family: var(--gd-display);
  font-size: calc(clamp(38px, 9vw, 150px) * var(--gd-escala-display));
  font-weight: var(--gd-peso-display);
  line-height: 0.82;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.gd-contato__editorial {
  margin: 0 0 clamp(28px, 4vw, 44px);
  font-family: var(--gd-sistema);
  font-size: 24px;
  line-height: 1.28;
  max-width: 620px;
}
.gd-paineis {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: color-mix(in srgb, var(--gd-branco) 45%, transparent);
  max-width: 760px;
}
.gd-painel {
  flex: 1;
  min-width: min(100%, 220px);
  padding: clamp(20px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: background 260ms var(--gd-curva), color 260ms var(--gd-curva);
}
.gd-painel--a {
  background: var(--gd-tinta);
  color: var(--gd-fundo);
}
.gd-painel--a:active {
  background: var(--gd-fundo);
  color: var(--gd-tinta);
}
@media (hover: hover) {
  .gd-painel--a:hover {
    background: var(--gd-fundo);
    color: var(--gd-tinta);
  }
}
.gd-painel--b {
  background: var(--gd-branco);
  color: var(--gd-tinta);
}
.gd-painel--b:active {
  background: var(--gd-tinta);
  color: var(--gd-fundo);
}
@media (hover: hover) {
  .gd-painel--b:hover {
    background: var(--gd-tinta);
    color: var(--gd-fundo);
  }
}
.gd-painel__rotulo {
  font-family: var(--gd-sistema);
  font-size: calc(9px * var(--gd-escala-sistema));
  letter-spacing: 0.2em;
  opacity: 0.7;
}
.gd-painel--b .gd-painel__rotulo {
  color: var(--gd-grafite-claro);
  opacity: 1;
}
.gd-painel__valor {
  font-family: var(--gd-display);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.gd-painel--b .gd-painel__valor {
  font-family: var(--gd-sistema);
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.04em;
  font-weight: 400;
  text-transform: none;
}

/* --- rodapé -------------------------------------------------------------- */

.gd-rodape {
  background-color: var(--sec-fundo, var(--gd-tinta));
  color: var(--sec-tinta, var(--gd-grafite-escuro));
  padding: clamp(34px, 4.5vw, 60px) var(--gd-goteira);
}
.gd-rodape__topo {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 60px);
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: clamp(26px, 3.5vw, 46px);
  border-bottom: 1px solid var(--gd-linha-escura);
}
.gd-rodape__wordmark {
  font-family: var(--gd-display);
  font-size: calc(clamp(24px, 3.4vw, 46px) * var(--gd-escala-display));
  font-weight: var(--gd-peso-display);
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--gd-fundo);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.gd-rodape__reg {
  font-size: 12px;
  vertical-align: super;
}
.gd-rodape__blurb {
  margin: 0;
  font-family: var(--gd-sistema);
  font-size: calc(10px * var(--gd-escala-sistema));
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.gd-rodape__colunas {
  display: flex;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
  font-family: var(--gd-sistema);
  font-size: calc(10px * var(--gd-escala-sistema));
  letter-spacing: 0.14em;
  line-height: 2.1;
}
.gd-rodape__titulo-coluna {
  color: var(--gd-sinal);
  margin-bottom: 8px;
}
.gd-rodape__colunas a {
  color: var(--gd-grafite-escuro);
}
.gd-rodape__base {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-family: var(--gd-sistema);
  font-size: calc(8px * var(--gd-escala-sistema));
  letter-spacing: 0.18em;
}
.gd-rodape__base span:nth-child(2) {
  color: var(--gd-fundo);
}

/* --- movimento desligado ------------------------------------------------- */

[data-motion="OFF"] *,
[data-motion="OFF"] *::before,
[data-motion="OFF"] *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/*
  Link de pular navegação. Invisível em repouso (mesma técnica do .so-leitor);
  ao receber foco de TECLADO vira um bloco no canto superior esquerdo, na voz
  Sistema e nas cores da marca. Quem navega com mouse nunca o vê — o desenho
  em repouso não muda.
*/
.gd-pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  font-family: var(--gd-sistema);
  font-size: calc(10px * var(--gd-escala-sistema));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--gd-tinta);
  color: var(--gd-fundo);
  padding: 12px 18px;
}
/* :focus, e não :focus-visible, de propósito: um link fora da tela só é alcançável
   por teclado, então todo foco nele É foco de teclado — e :focus-visible depende de
   heurística do navegador que falha em foco programático. */
.gd-pular:focus {
  left: 0;
  color: var(--gd-fundo);
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   v6 — ESCOPO POR ELEMENTO

   Cada peça tipográfica lê primeiro a variável do PRÓPRIO elemento e só cai no valor
   global quando ela não existe. Os nomes carregam o id do elemento de propósito: custom
   property herda, e um nome genérico vazaria do pai para o filho, fazendo um ajuste na
   manchete mexer em coisa que ninguém pediu.

   Este bloco vem depois das regras de origem para vencer por ordem, sem especificidade
   inflada e sem !important.
   ========================================================================== */

.gd-manchete {
  font-size: calc(clamp(44px, 16cqw, 220px) * var(--el-manchete-escala, var(--gd-escala-display)));
  font-weight: var(--el-manchete-peso, var(--gd-peso-display));
  line-height: var(--el-manchete-entrelinha, 0.82);
  letter-spacing: var(--el-manchete-entreletra, var(--gd-entreletra-display));
  text-transform: var(--el-manchete-caixa, uppercase);
  font-style: var(--el-manchete-estilo, normal);
  color: var(--el-manchete-cor, inherit);
  mix-blend-mode: var(--el-manchete-mistura, normal);
  opacity: var(--el-manchete-opacidade, 1);
  -webkit-text-stroke: var(--el-manchete-contorno, 0px) currentColor;
  transform: rotate(var(--el-manchete-rotacao, 0deg)) skewX(var(--el-manchete-inclinacao, 0deg))
    translate(var(--el-manchete-dx, 0px), var(--el-manchete-dy, 0px));
}

.gd-lede-editorial {
  font-size: calc(clamp(20px, 2.6vw, 36px) * var(--el-ledeEditorial-escala, 1));
  font-weight: var(--el-ledeEditorial-peso, 400);
  line-height: var(--el-ledeEditorial-entrelinha, 1.12);
  letter-spacing: var(--el-ledeEditorial-entreletra, 0em);
  text-transform: var(--el-ledeEditorial-caixa, none);
  font-style: var(--el-ledeEditorial-estilo, italic);
  color: var(--el-ledeEditorial-cor, inherit);
  mix-blend-mode: var(--el-ledeEditorial-mistura, normal);
  opacity: var(--el-ledeEditorial-opacidade, 1);
  -webkit-text-stroke: var(--el-ledeEditorial-contorno, 0px) currentColor;
  transform: rotate(var(--el-ledeEditorial-rotacao, 0deg)) skewX(var(--el-ledeEditorial-inclinacao, 0deg))
    translate(var(--el-ledeEditorial-dx, 0px), var(--el-ledeEditorial-dy, 0px));
}

.gd-lede-sistema {
  font-size: calc(11px * var(--gd-escala-sistema) * var(--el-ledeMono-escala, 1));
  font-weight: var(--el-ledeMono-peso, 400);
  line-height: var(--el-ledeMono-entrelinha, 1.75);
  letter-spacing: var(--el-ledeMono-entreletra, 0.04em);
  text-transform: var(--el-ledeMono-caixa, none);
  font-style: var(--el-ledeMono-estilo, normal);
  color: var(--el-ledeMono-cor, inherit);
  mix-blend-mode: var(--el-ledeMono-mistura, normal);
  opacity: var(--el-ledeMono-opacidade, 1);
}

.gd-regua-alvo {
  font-size: calc(8px * var(--gd-escala-sistema) * var(--el-regua-escala, 1));
  font-weight: var(--el-regua-peso, 400);
  letter-spacing: var(--el-regua-entreletra, 0.18em);
  text-transform: var(--el-regua-caixa, uppercase);
  color: var(--el-regua-cor, inherit);
  opacity: var(--el-regua-opacidade, 1);
}

.gd-marquee__copia {
  font-size: calc(11px * var(--gd-escala-sistema) * var(--el-marqueeTexto-escala, 1));
  font-weight: var(--el-marqueeTexto-peso, 400);
  letter-spacing: var(--el-marqueeTexto-entreletra, 0.26em);
  text-transform: var(--el-marqueeTexto-caixa, uppercase);
  font-style: var(--el-marqueeTexto-estilo, normal);
  color: var(--el-marqueeTexto-cor, var(--gd-fundo));
  opacity: var(--el-marqueeTexto-opacidade, 1);
  -webkit-text-stroke: var(--el-marqueeTexto-contorno, 0px) currentColor;
}

.gd-titulo {
  font-size: calc(clamp(30px, 4.6vw, 74px) * var(--el-tituloSecao-escala, var(--gd-escala-display)));
  font-weight: var(--el-tituloSecao-peso, 800);
  line-height: var(--el-tituloSecao-entrelinha, 0.92);
  letter-spacing: var(--el-tituloSecao-entreletra, -0.035em);
  text-transform: var(--el-tituloSecao-caixa, uppercase);
  font-style: var(--el-tituloSecao-estilo, normal);
  color: var(--el-tituloSecao-cor, inherit);
  mix-blend-mode: var(--el-tituloSecao-mistura, normal);
  opacity: var(--el-tituloSecao-opacidade, 1);
  -webkit-text-stroke: var(--el-tituloSecao-contorno, 0px) currentColor;
  transform: rotate(var(--el-tituloSecao-rotacao, 0deg)) skewX(var(--el-tituloSecao-inclinacao, 0deg))
    translate(var(--el-tituloSecao-dx, 0px), var(--el-tituloSecao-dy, 0px));
}

.gd-corpo-editorial {
  font-size: calc(clamp(18px, 1.8vw, 24px) * var(--el-corpoEditorial-escala, 1));
  font-weight: var(--el-corpoEditorial-peso, 400);
  line-height: var(--el-corpoEditorial-entrelinha, 1.38);
  letter-spacing: var(--el-corpoEditorial-entreletra, 0em);
  text-transform: var(--el-corpoEditorial-caixa, none);
  font-style: var(--el-corpoEditorial-estilo, normal);
  color: var(--el-corpoEditorial-cor, inherit);
  opacity: var(--el-corpoEditorial-opacidade, 1);
}

.gd-corpo-sistema {
  font-size: calc(11px * var(--gd-escala-sistema) * var(--el-corpoMono-escala, 1));
  font-weight: var(--el-corpoMono-peso, 400);
  line-height: var(--el-corpoMono-entrelinha, 1.85);
  letter-spacing: var(--el-corpoMono-entreletra, 0.03em);
  text-transform: var(--el-corpoMono-caixa, none);
  font-style: var(--el-corpoMono-estilo, normal);
  color: var(--el-corpoMono-cor, inherit);
  opacity: var(--el-corpoMono-opacidade, 1);
}

.gd-crenca__en {
  font-size: calc(clamp(17px, 1.7vw, 23px) * var(--el-crencaTitulo-escala, 1));
  font-weight: var(--el-crencaTitulo-peso, 700);
  line-height: var(--el-crencaTitulo-entrelinha, 1.14);
  letter-spacing: var(--el-crencaTitulo-entreletra, -0.02em);
  text-transform: var(--el-crencaTitulo-caixa, uppercase);
  font-style: var(--el-crencaTitulo-estilo, normal);
  color: var(--el-crencaTitulo-cor, inherit);
  opacity: var(--el-crencaTitulo-opacidade, 1);
  -webkit-text-stroke: var(--el-crencaTitulo-contorno, 0px) currentColor;
}

.gd-servico__titulo {
  font-size: calc(clamp(26px, 4.4vw, 68px) * var(--el-servicoTitulo-escala, var(--gd-escala-display)));
  font-weight: var(--el-servicoTitulo-peso, 800);
  line-height: var(--el-servicoTitulo-entrelinha, 0.94);
  letter-spacing: var(--el-servicoTitulo-entreletra, -0.035em);
  text-transform: var(--el-servicoTitulo-caixa, uppercase);
  font-style: var(--el-servicoTitulo-estilo, normal);
  color: var(--el-servicoTitulo-cor, inherit);
  mix-blend-mode: var(--el-servicoTitulo-mistura, normal);
  opacity: var(--el-servicoTitulo-opacidade, 1);
  -webkit-text-stroke: var(--el-servicoTitulo-contorno, 0px) currentColor;
  transform: rotate(var(--el-servicoTitulo-rotacao, 0deg)) skewX(var(--el-servicoTitulo-inclinacao, 0deg))
    translate(var(--el-servicoTitulo-dx, 0px), var(--el-servicoTitulo-dy, 0px));
}

.gd-servico__desc {
  font-size: calc(10px * var(--gd-escala-sistema) * var(--el-servicoDesc-escala, 1));
  font-weight: var(--el-servicoDesc-peso, 400);
  line-height: var(--el-servicoDesc-entrelinha, 1.7);
  letter-spacing: var(--el-servicoDesc-entreletra, 0.1em);
  text-transform: var(--el-servicoDesc-caixa, none);
  color: var(--el-servicoDesc-cor, inherit);
  opacity: var(--el-servicoDesc-opacidade, 0.72);
}

.gd-faq__q {
  font-size: calc(clamp(17px, 2.2vw, 30px) * var(--el-faqPergunta-escala, 1));
  font-weight: var(--el-faqPergunta-peso, 700);
  line-height: var(--el-faqPergunta-entrelinha, 1.14);
  letter-spacing: var(--el-faqPergunta-entreletra, -0.02em);
  text-transform: var(--el-faqPergunta-caixa, none);
  font-style: var(--el-faqPergunta-estilo, normal);
  color: var(--el-faqPergunta-cor, inherit);
  opacity: var(--el-faqPergunta-opacidade, 1);
  -webkit-text-stroke: var(--el-faqPergunta-contorno, 0px) currentColor;
}

.gd-faq__a {
  font-size: calc(11px * var(--gd-escala-sistema) * var(--el-faqResposta-escala, 1));
  font-weight: var(--el-faqResposta-peso, 400);
  line-height: var(--el-faqResposta-entrelinha, 1.85);
  letter-spacing: var(--el-faqResposta-entreletra, 0.03em);
  text-transform: var(--el-faqResposta-caixa, none);
  color: var(--el-faqResposta-cor, inherit);
  opacity: var(--el-faqResposta-opacidade, 1);
}

.gd-contato__titulo {
  font-size: calc(clamp(38px, 9vw, 150px) * var(--el-contatoTitulo-escala, var(--gd-escala-display)));
  font-weight: var(--el-contatoTitulo-peso, var(--gd-peso-display));
  line-height: var(--el-contatoTitulo-entrelinha, 0.82);
  letter-spacing: var(--el-contatoTitulo-entreletra, -0.05em);
  text-transform: var(--el-contatoTitulo-caixa, uppercase);
  font-style: var(--el-contatoTitulo-estilo, normal);
  color: var(--el-contatoTitulo-cor, inherit);
  mix-blend-mode: var(--el-contatoTitulo-mistura, normal);
  opacity: var(--el-contatoTitulo-opacidade, 1);
  -webkit-text-stroke: var(--el-contatoTitulo-contorno, 0px) currentColor;
  transform: rotate(var(--el-contatoTitulo-rotacao, 0deg)) skewX(var(--el-contatoTitulo-inclinacao, 0deg))
    translate(var(--el-contatoTitulo-dx, 0px), var(--el-contatoTitulo-dy, 0px));
}

.gd-rodape__wordmark {
  font-size: calc(clamp(24px, 3.4vw, 46px) * var(--el-rodapeWordmark-escala, var(--gd-escala-display)));
  font-weight: var(--el-rodapeWordmark-peso, var(--gd-peso-display));
  line-height: var(--el-rodapeWordmark-entrelinha, 0.88);
  letter-spacing: var(--el-rodapeWordmark-entreletra, -0.035em);
  text-transform: var(--el-rodapeWordmark-caixa, uppercase);
  color: var(--el-rodapeWordmark-cor, var(--gd-fundo));
  opacity: var(--el-rodapeWordmark-opacidade, 1);
  -webkit-text-stroke: var(--el-rodapeWordmark-contorno, 0px) currentColor;
}

/* ==========================================================================
   v6 — EFEITOS
   ========================================================================== */

/*
  Duotone: a foto deixa de ser cinza e passa a ser mapeada entre duas cores. Feito por
  camada de mistura e não por filtro SVG, porque filtro SVG derruba a composição em GPU e
  a rolagem trava quando há dezenas de fotos na mesma página.
*/
[data-duotone="on"] .gd-foto {
  filter: var(--gd-foto) saturate(0);
}
[data-duotone="on"] .gd-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--gd-duo-escuro, #0a0a12), var(--gd-duo-claro, #f2f0ea));
  mix-blend-mode: color;
  pointer-events: none;
}

/* Vinheta global, para fechar as bordas da página */
.gd-vinheta {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: var(--gd-vinheta, 0);
  background: radial-gradient(ellipse at center, transparent 45%, #000 130%);
}

/* Espessura de fieira controlável */
.gd-secao,
.gd-servicos,
.gd-mosaico,
.gd-marquee,
.gd-heroi {
  border-bottom-width: var(--gd-fieira, 1px);
}

/* Inversão por seção */
[data-inverter="on"] {
  filter: invert(1) hue-rotate(180deg);
}

/* ==========================================================================
   v6 — GRADE POR SEÇÃO

   Cada faixa pode desenhar a própria grade no fundo. Ela é pintada como
   `background-image` da própria seção, e não como elemento ou pseudo-elemento, por um
   motivo concreto: o mosaico é um container de grid, e tanto um filho extra quanto um
   ::before virariam célula da grade dele, quebrando o layout.

   Como camada de fundo, ela fica automaticamente atrás de todo o conteúdo, aceita
   background-blend-mode contra a cor de fundo da faixa, e não custa nenhum nó novo.
   ========================================================================== */

.gd-heroi,
.gd-marquee,
.gd-secao,
.gd-servicos,
.gd-arquivo,
.gd-contato,
.gd-rodape {
  background-image: var(--sec-grade, none);
  background-size: var(--sec-grade-tam, auto);
  background-position: var(--sec-grade-pos, 0 0);
  background-repeat: repeat;
  background-blend-mode: var(--sec-grade-mistura, normal);
}

/* ==========================================================================
   v6 — GRADE GLOBAL

   A sobreposição fixa. Agora ela também tem modo, cor, espessura, deslocamento e escolha
   entre ficar presa ao viewport ou rolar com a página.
   ========================================================================== */

.gd-grade {
  position: var(--gd-grade-posicao, fixed);
  inset: 0;
  pointer-events: none;
  z-index: var(--gd-grade-z, 3);
  opacity: var(--gd-grade-opacidade, 0.32);
  mix-blend-mode: var(--gd-grade-mistura, multiply);
  background-image: var(--gd-grade-img, none);
  background-size: var(--gd-grade-tam, auto);
  background-position: var(--gd-grade-pos, 0 0);
  background-repeat: repeat;
}

/*
  Quando a grade rola com a página ela precisa cobrir o documento inteiro, não a janela.
  `position: absolute` num container de altura total resolve; o corpo já é o container.
*/
.gd-grade[data-rola="sim"] {
  position: absolute;
  height: 100%;
  min-height: 100vh;
}

/* ==========================================================================
   MOVIMENTO

   A página já tem uma tese sobre atenção, e ela está no herói: um círculo de luz
   percorrendo um arquivo apagado. O movimento continua essa mesma frase em vez de
   abrir outra — a atenção chega, e o conteúdo sobe para dentro dela.

   Um momento autoral (a linha de serviços), continuidade na revelação por rolagem, e
   o resto é feedback. Nada aqui anima largura, altura, top ou left: só transform,
   opacity, color e clip-path, que o compositor resolve sem refazer layout.
   ========================================================================== */

/* --- serviços: o momento autoral ----------------------------------------- */

/*
  A linha é agarrada. Quatro partes num gesto só, e a ordem é a frase:

    a fieira do topo acende no Sinal        onde
    o campo de tinta troca para osso        a luz
    o bloco de texto dá um passo à frente   o tipo entra nela
    a foto do arquivo abre pela direita     a imagem chega atrás

  O número não acompanha o passo do texto. Ele é o índice: fica parado enquanto o
  conteúdo se move, e é essa diferença que faz o movimento ser lido como movimento.

  E o número também não vira Sinal. Sinal sobre osso mede 3,4:1 e reprovaria num
  mono de 12px — a única intervenção de Sinal do gesto é a fieira, que não é texto.
*/

/*
  A linha carregava quatro propriedades numa lista só porque era revelada por rolagem
  E respondia a ponteiro, e transition é shorthand: a regra da revelação, mais adiante
  na folha, apagava em silêncio o fundo e a cor daqui. Com a revelação fora (2026-08-26)
  sobra o gesto — e o gesto nunca teve atraso, porque escalonar a resposta ao ponteiro
  faria a quinta linha esperar antes de reagir, que é a definição de travamento.
*/
.gd-servico {
  transition: background 260ms var(--gd-curva), color 260ms var(--gd-curva);
}
.gd-servico.esta-sobre {
  transition: background 420ms var(--gd-curva), color 420ms var(--gd-curva);
}

.gd-servico::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gd-sinal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--gd-curva);
}
.gd-servico.esta-sobre::before {
  transform: scaleX(1);
  transition-duration: 520ms;
}

.gd-servico__corpo {
  transition: transform 260ms var(--gd-curva);
}
.gd-servico.esta-sobre .gd-servico__corpo {
  transform: translateX(14px);
  transition-duration: 420ms;
}

/* a foto assenta de 1,08 enquanto o recorte abre: chega e pousa, em vez de surgir */
.gd-servico__foto .gd-foto {
  transform: scale(1.08);
  transition: transform 260ms var(--gd-curva);
}
.gd-servico.esta-sobre .gd-servico__foto .gd-foto {
  transform: scale(1);
  transition-duration: 620ms;
}

/*
  A fieira do link já é Sinal e faz parte do estado parado. O hover não a substitui:
  desenha uma segunda por cima, em osso — a mesma luz da linha acima, aplicada ao
  único controle da faixa.
*/
.gd-servicos__link {
  position: relative;
}
.gd-servicos__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gd-fundo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--gd-curva);
}
.gd-servicos__link:active::after {
  transform: scaleX(1);
}
@media (hover: hover) {
  .gd-servicos__link:hover::after {
    transform: scaleX(1);
    transition-duration: 420ms;
  }
}

/* --- faq: a resposta chega ----------------------------------------------- */

/*
  Antes o corpo era apenas destampado: o texto já estava em tamanho final e ia sendo
  descoberto de baixo para cima. Agora ele chega, com atraso curto, depois que a linha
  terminou de abrir — que é a ordem em que a pessoa lê. Ao fechar não há atraso: sair
  é mais rápido que entrar.
*/
.gd-faq__conteudo {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms var(--gd-curva), transform 200ms var(--gd-curva);
}
.gd-faq__item.esta-aberta .gd-faq__conteudo {
  opacity: 1;
  transform: none;
  transition-duration: 340ms;
  transition-delay: 140ms;
}

/* tinta cheia no item aberto — e não Sinal, que aqui seria contraste pior */
.gd-faq__sinal {
  transition: color 220ms var(--gd-curva);
}
.gd-faq__item.esta-aberta .gd-faq__sinal {
  color: var(--gd-tinta);
}

/* --- feedback de ligação -------------------------------------------------- */

/* o salto de cor sem transição era a última coisa "linear" que sobrava na página */
a {
  transition: color 180ms var(--gd-curva);
}

/* ==========================================================================
   ADAPTAÇÃO MÓVEL

   A composição é a mesma. O que muda é a escala, e só onde a medida era fixa.

   Três coisas quebravam abaixo de 900px, e nenhuma delas era tipografia — todo corpo de
   texto já sai de clamp() e chega ao piso sozinho:

     1. A goteira é fixa em px (198 global, 250 no manifesto, 300 em serviços). Numa tela
        de 375 ela sozinha consumia mais que a largura do aparelho, e o conteúdo saía pela
        direita: 600px de documento dentro de uma janela de 375.
     2. Herói e mosaico contam colunas fixas — 6 e 12. Na mesma tela isso dá lascas de
        62px e ladrilhos de 31px, menores que a própria etiqueta que carregam.
     3. A sobreposição de 12 colunas fica com passo de 31px. Deixa de ser grade de
        referência e vira textura listrada por cima da página inteira.

   As faixas seguem sangrando de ponta a ponta, a fieira segue fechando cada seção, e a
   ordem, a cor, a cópia e a hierarquia não mudam em lugar nenhum.
   ========================================================================== */

/* --- ≤900px: a goteira volta a ser proporcional --------------------------- */

@media (max-width: 900px) {
  :root,
  .gd-heroi,
  .gd-marquee,
  .gd-secao,
  .gd-servicos,
  .gd-mosaico,
  .gd-contato,
  .gd-rodape {
    --gd-goteira: clamp(20px, 4.5vw, 48px);
  }
  /* manifesto e serviços guardam a folga que têm no desktop contra a goteira global
     (250 e 300 contra 198) — mantida como razão, não como pixel */
  #manifesto {
    --gd-goteira: clamp(24px, 5.7vw, 60px);
  }
  .gd-servicos {
    --gd-goteira: clamp(26px, 6.8vw, 72px);
  }

  /* o cabeçalho no mobile voltou a ser uma faixa só (o menu virou suspenso, não mais
     uma segunda linha) — nada aqui precisa mais dobrar contra --gd-cabecalho-h.
     svh no lugar de vh: com vh o herói fica alto demais e a régua nasce fora da tela,
     porque o navegador móvel mede a janela sem a própria barra. */
  .gd-heroi {
    height: calc(var(--gd-heroi-altura, 100) * 1svh - var(--gd-cabecalho-h));
    /* o piso de 620px é medida de desktop. Num telefone baixo ele estica o herói para
       além da janela e a régua nasce fora da tela; aqui quem manda é a altura real. */
    min-height: 0;
  }

  /*
    O painel da foto da linha de serviços.

    No desktop ele mora em espaço vazio: a descrição tem max-width de 520px e termina
    311px antes dele, então nada precisa ceder. No telefone o texto ocupa a largura
    inteira — 287px de corpo contra um painel que começa 94px antes do fim — e revelar
    a foto passaria por cima da descrição.

    Por isso a reserva é PERMANENTE, e não só enquanto a linha está acesa: espaço que
    aparece no toque empurraria o texto e faria a linha saltar. O preço é o estado
    parado ficar com a coluna mais estreita; a troca é não ter salto nenhum.

    O painel sangra até a borda da faixa, por cima da goteira — como no desktop. O texto
    só reserva o que sobra dela para dentro, mais um respiro de 12px.
  */
  .gd-servico {
    --gd-servico-foto: clamp(88px, 26vw, 150px);
    --gd-servico-passo: 8px;
  }
  .gd-servico__foto {
    width: var(--gd-servico-foto);
  }
  /*
    A reserva conta o passo do texto, não só o respiro. Sem isso o translateX do gesto
    come a folga inteira e o título encosta no painel no exato momento em que a foto
    aparece — 12px de respiro menos 14px de passo dá 2px de invasão.
  */
  .gd-servico__corpo {
    padding-right: max(0px, calc(var(--gd-servico-foto) - var(--gd-goteira) + var(--gd-servico-passo) + 12px));
  }

  /*
    O passo encolhe junto. 14px sobre a coluna de 748px do desktop é 1,9% da medida;
    sobre os ~195px daqui seria 7% — solavanco, não passo. 8px devolve a proporção, e
    sai do mesmo token que a reserva acima consulta, para os dois não saírem de sincronia.
  */
  .gd-servico.esta-sobre .gd-servico__corpo {
    transform: translateX(var(--gd-servico-passo));
  }


  /* Reescreve o passo da sobreposição, não a imagem: a grade global e a do manifesto são
     as duas de modo "colunas" nesta versão, e nas duas o passo é fração da largura. */
  .gd-grade,
  #manifesto {
    background-size: calc(100% / 6) 100%;
  }
}

/* --- ≤600px: telefone ----------------------------------------------------- */

@media (max-width: 600px) {
  /* 6×3 dá células de 62×206 — lascas verticais. 3×6 mantém as mesmas 18 fotos, preenche
     a grade exata e devolve à célula a proporção que ela tem no desktop. */
  .gd-heroi__grade {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }


  .gd-grade,
  #manifesto {
    background-size: calc(100% / 4) 100%;
  }

  /* a régua do herói tem três campos numa linha só, e o primeiro instrui um cursor que
     não existe aqui. Ficam a coordenada e a direção da rolagem. */
  .gd-heroi__regua > :first-child {
    display: none;
  }

  /* o índice de serviços aperta a coluna do número para devolver medida ao título */
  .gd-servico {
    gap: 12px;
  }
  .gd-servico__n {
    width: 24px;
  }

  /*
    Uma palavra por linha. Em 375px de janela a manchete mede ~54px, e "THE VISION"
    numa linha só consome a largura inteira sem folga nenhuma — o bloco fica denso e
    a segunda linha corre até a borda. Em três linhas cada palavra respira, e a
    escadinha GRAB / THE / VISION lê como composição, que é o que a Display pede.
  */
  .gd-manchete__palavra {
    display: block;
  }

  /* 1,5px de traço é fio nos 78px do desktop e vira massa nos 29px daqui */
  .gd-contorno {
    -webkit-text-stroke: 1px var(--gd-tinta);
  }
}

/* --- herói em tela baixa (telefone deitado) ------------------------------- */

@media (max-height: 620px) and (max-width: 900px) {
  /* janela baixa demais para o bloco de tipo inteiro — deitado, ou telefone pequeno.
     Um piso devolve o ar, e o resto do herói fica a uma rolagem curta. */
  .gd-heroi {
    min-height: 420px;
  }
}

/* --- entrada por toque ---------------------------------------------------- */

@media (pointer: coarse) {
  /*
    Alvo de toque. Aumentar a entrelinha não resolveria: ela cresce a caixa de LINHA, e o
    que recebe o toque é a caixa do elemento — 15px de altura de fonte. Padding vertical
    num inline entra nessa caixa e não mexe no layout, porque a entrelinha de 25px já
    reservava o espaço.
  */
  .gd-rodape__colunas a {
    padding-block: 5px;
  }
  .gd-rodape__colunas a:active {
    color: var(--gd-sinal);
  }
  /* item de flex: o padding conta na altura, e só o de cima, para não mover a fieira */
  .gd-servicos__link {
    padding-top: 5px;
  }
}