/* ==========================================================================
   Marcelo Marconi — folha base
   --------------------------------------------------------------------------
   As classes .broca-a / .broca-b vêm de dentro dos SVGs das marcas (papel e
   tinta). O resto é do site. Os estados do menu (aceso / atual / paleta) são
   variáveis escritas pelo menu.js no próprio contêiner, então dá pra ter mais
   de um menu na página sem conflito.
   ========================================================================== */

@font-face{
  font-family:'Akzidenz Grotesk';
  src:url('../fonts/Berthold Akzidenz Grotesk Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
/* a Medium entra como peso 500 da mesma família: é a dos contatos na moeda
   da FALA CMG. Onde o site pedir font-weight:500, é ela que aparece. */
@font-face{
  font-family:'Akzidenz Grotesk';
  src:url('../fonts/Akzidenz Grotesk Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}

:root{
  --azul:      #001aff;
  --amarelo:   #ffff08;
  --verde:     #47ce00;
  /* Era um verde PRÓPRIO, mais elétrico que o das marcas. Agora é o
     mesmo tom: o cursor e o controle da grade acompanham a paleta. */
  --verde-cursor: #47ce00;
  /* a bolinha do cursor. Sai do azul da marca, não do verde: sobre as thumbs
     ela some menos, e o verde já é a cor do controle da grade. */
  --cor-cursor: #001aff;
  /* tamanho das bolinhas verdes (botão do controle, setas e X do painel).
     Sai do SVG do controle: 38,38 de diâmetro vezes esta escala. */
  --esc: .62;
  /* a escala BASE, de onde sai o traço: fica fixa mesmo quando os botões
     crescem (no desktop --esc sobe 10%, o traço não) */
  --esc-base: .62;
  /* A ESPESSURA DE TRAÇO do site: relógio, contorno das marcas do cabeçalho
     e aro/desenho dos botões (X, +, olho) saem todos daqui. Definido no
     :root de propósito — o var(--esc) é resolvido AQUI, com o .62 da raiz,
     então um botão que cresce (--esc maior na página de projeto) fica maior
     sem engrossar o traço. Pixel inteiro (round) pra bater com a borda do
     corrimão do controle, que o navegador arredonda. */
  --traco: calc(4px * var(--esc-base));
  --papel:     #ffffff;
  --grafite:   #111111;

  --fonte: 'Akzidenz Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --marca-h:   60px;   /* altura da corrente dentro da barra */
  --menu-h:    var(--marca-h);   /* as marcas do menu; no desktop crescem 10% a mais */
  /* altura dos CONTROLES da direita (relógio, chave de idioma): um pouco
     menores que as marcas — 0,87 delas, a proporção do layout de referência */
  --controle-h: calc(var(--marca-h) * .87);
  --topo-h: calc(var(--pad-x) + var(--menu-h));  /* respiro de cima = o das
                          laterais, então tudo fica no mesmo ritmo de 15px */
  --pad-x:     15px;   /* margem do site, igual em tudo */
  --gap:       6px;
  /* Altura da linha de legenda que fica embaixo de cada thumb. Mora aqui
     porque o grade.js TAMBÉM precisa dela: ele calcula a altura de cada
     cartão pela proporção da imagem, sem medir o DOM, e sem somar a legenda
     os cartões do mural se sobreporiam. Um número, dois leitores. */
  /* Altura da caixa da legenda. Ela é justa de propósito: o que sobra aqui
     vira espaço morto entre uma thumb e a de baixo, e some com o aperto do
     mural. No celular o corpo é menor, então a caixa encolhe junto.

     Px puro, não clamp(): o grade.js lê este valor com getComputedStyle pra
     somar na altura do cartão, e propriedade personalizada não é resolvida
     na leitura — clamp() voltaria como texto e a conta erraria. */
  --legenda-h: 21px;    /* a legenda tem UMA linha, sempre */
  /* o vão entre as imagens DENTRO de um projeto — mais largo que o do
     mural, porque ali as peças são poucas e grandes e precisam respirar */
  --vao-projeto: 20px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--papel); color:var(--grafite);
  font-family:var(--fonte); font-weight:400;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* ---------------------------------------------------------------- topo -- */
.topo{
  position:relative; height:var(--topo-h); z-index:100;
  display:flex; align-items:flex-start; justify-content:center;
  padding:var(--pad-x) var(--pad-x) 0;
  /* a barra em si não pega clique — só as peças dentro dela. Na EU o índice
     sobe até a altura das marcas e ficava POR BAIXO da barra: o clique no
     PROJETOS morria nela. */
  pointer-events:none;
}
.topo > *{pointer-events:auto}
/* A BARRA sobe junto com a página ao rolar — nome, relógio e controle de grade
   vão embora com ela. Só as MARCAS ficam presas no canto esquerdo: elas saem
   do fluxo, mas a barra continua ocupando a altura dela, então o conteúdo
   abaixo não se mexe. */
/* 700px e não 900: no TABLET as marcas já ficam à esquerda, como no desktop.
   Centradas, elas só fazem sentido no celular, onde a barra é estreita e não
   há mais nada na linha. Daí pra cima sobra tabuleiro dos dois lados e o
   menu centrado fica solto no meio do nada.
   700 é a mesma quebra que o controle de colunas usa pra aparecer e que o
   grade.js usa pra sair das 2 colunas fixas — a barra inteira muda de
   comportamento no mesmo ponto, em vez de cada peça no seu. */
@media (min-width:700px){
  .topo{justify-content:flex-start}
  .topo .mm{position:fixed;left:var(--pad-x);top:var(--pad-x);z-index:101}

  /* O CONTÊINER já estava colado na margem — quem saía do lugar era o desenho
     dentro dele. O menu.js centra a corrente no contêiner (left:50% com meia
     largura de margem negativa) e depois a ENCOLHE pra caber. Como a redução
     parte do centro, a sobra fica metade de cada lado: no tablet isso jogava
     as marcas uns 50px pra dentro.

     Aqui a corrente passa a nascer na borda esquerda e a encolher PRA DENTRO,
     em vez de pro meio. Os !important não são preguiça: o menu.js reescreve
     left e margin-left direto no elemento a cada recálculo, e regra de folha
     só ganha de estilo inline sendo important. O transform-origin não precisa
     — esse ele não escreve.

     Só daqui pra cima: no celular a corrente é centrada de propósito. */
  .topo .mm .mm-board{
    left:0 !important; margin-left:0 !important;
    transform-origin:left center;
  }
}

/* --- DESKTOP: marcas e controles menores ---------------------------------
   As marcas do menu (--menu-h) e os controles que saem delas (relógio, chave
   de idioma, --marca-h) ficam em 54px; as bolinhas (--esc: X, olho, +,
   setas, botão da grade) na medida base. O traço não muda (--esc-base). */
@media (min-width:900px){
  :root{--marca-h:54px;--menu-h:54px;--esc:.62}
}

/* --- guarda das imagens (ver guarda.js) --------------------------------
   Sem arrastar e sem selecionar as peças; o texto continua livre. */
img,video,picture{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}

/* --- o título no meio da barra: só no desktop ------------------------- */
/* Uma linha, caixa alta, CENTRADA NA TELA (não no vão): posição absoluta
   no meio da barra, na altura do centro das marcas. Sem overflow:hidden e
   com entrelinha folgada — com line-height 1 e o corte, os acentos do
   GRÁFICO e do ILUSTRAÇÃO perdiam um filete em cima. Some em tela onde
   encostaria nas marcas ou nos controles. */
.topo-titulo{display:none;position:absolute;left:50%;top:calc(var(--pad-x) + var(--menu-h) / 2);
  transform:translate(-50%,-50%);margin:0;padding:0 .2em;
  font-size:clamp(13px,1.1vw,22px);line-height:1.3;text-transform:uppercase;
  letter-spacing:.01em;color:var(--verde);white-space:nowrap;pointer-events:none}
/* abaixo de 1400px ele encostaria nas marcas: some */
@media (min-width:1400px){ .topo-titulo{display:block} }

/* --- nome do estúdio e relógio: só no desktop ------------------------- */
/* --- relógio analógico ---------------------------------------------------
   Só aparece no desktop (o display:block vem no bloco de 900px lá embaixo),
   mas a APARÊNCIA fica aqui fora de propósito: presa ao media query, ela
   sumia em qualquer outro contexto e o traço caía pro 1px padrão do SVG. */
.topo-relogio{display:none;cursor:pointer}   /* o clique abre o bilhar */
.topo-relogio svg{display:block;width:100%;height:100%;overflow:visible}
.topo-relogio circle,.topo-relogio line{
  stroke:currentColor; fill:none;
  /* Mesma espessura do corrimão do controle da grade, pela MESMA conta —
     não é número copiado à mão.

     Duas declarações: a primeira é a conta crua; a segunda arredonda pra
     pixel inteiro, porque é o que o navegador faz com a BORDA do corrimão e
     não faz com traço de SVG. Sem ela o corrimão pintava 2,086px e o relógio
     2,48px, uns 20% mais gordo. Onde round() não existir vale a primeira.

     O non-scaling-stroke conta a espessura em pixels de tela, não em unidades
     do desenho: sem ele o viewBox de 100 esticado pra 60px afinaria o traço
     em 40%. */
  stroke-width:var(--traco);
  stroke-linecap:round;
  vector-effect:non-scaling-stroke}
@media (min-width:900px){
  /* Sem moldura: só o número. Sem caixa em volta, não há o que centrar
     opticamente — o alinhamento passa a ser com os vizinhos da barra. */
  /* margin-left:auto joga o relógio pra direita nas páginas SEM o controle de
     grade (EU, contato). Onde o controle existe, é ele que empurra tudo pra
     direita e o relógio só encosta do lado — senão o espaço livre se divide
     entre os dois e eles se separam no meio da barra. */
  /* RELÓGIO ANALÓGICO. Quadrado do mesmo tamanho do rostinho do menu (60px)
     — assim ele pesa igual às marcas do outro canto da barra.

     Nada de largura travada aqui: o problema antigo era do relógio digital,
     cujo número mudava de largura a cada segundo e empurrava o controle da
     grade 1px pra cá e pra lá. Um desenho não muda de tamanho. */
  .topo-relogio{display:block;align-self:center;flex:0 0 auto;
    width:var(--controle-h);height:var(--controle-h);
    /* colado: o controle da grade termina 2px depois do trilho (padding 12,
       margem -10), então 8 aqui dá 10px de vão visual */
    margin-left:8px;padding:0;border:0;color:var(--verde)}

  /* o relógio fica na PONTA direita; quem se empurra é o controle, e o
     relógio vem depois dele. Nas páginas sem controle (EU, contato) é o
     próprio relógio que se empurra. */
  .topo:not(:has(.grade-controle)) .topo-relogio{margin-left:auto}
}
/* --- TESTE da correnteza: as MARCAS rolam embora depois da 2ª fila -------
   Sem transparência e sem animação própria: passando da segunda fila de
   projetos, elas passam a subir JUNTO COM O SCROLL, um pixel por pixel, até
   encaixarem fora da tela. Voltando, descem do mesmo jeito. Quem escreve o
   deslocamento é o correnteza.js, a cada rolagem.

   Não há transition aqui de propósito: o movimento já é o do dedo. Uma
   transition faria a marca chegar atrasada em relação à rolagem.

   ATENÇÃO ao que já quebrou aqui: NÃO ponha transform (nem will-change:
   transform) no .topo. As marcas são `position:fixed` no desktop, e um
   ancestral transformado deixa de ser a janela pra elas — elas param de
   ficar presas na tela e rolam embora logo no primeiro scroll, que foi
   exatamente o defeito que apareceu. O movimento mora nas marcas.

   Apagar este bloco desfaz só o clique-através; o resto está no JS. */
body.correnteza-solta .topo .mm{pointer-events:none}

/* ---------------------------------------------------- chave de idioma -- */
/* Pílula em pé com uma bolinha que sobe e desce, e a sigla no extremo oposto.
   Deitada: a sigla de um lado e a bolinha do outro, trocando de lado quando
   muda a língua. Ela mora junto do texto, não na barra — ver o idioma.js. */
/* A CHAVE DE IDIOMA: a arte "Chave idioma graphioc" — globo e círculo com
   losango, colados — como DUAS peças, cada uma um botão (globo = inglês,
   losango = português). Cada uma acende e balança sozinha, como as marcas do
   menu; a da língua atual fica acesa. Na altura do M do menu (0,717 do
   rostinho, que mede --marca-h). Traço do site (.ic-traco, --traco). */
/* o vão entre as duas peças é o mesmo que separa as marcas do menu: 3px
   entre um desenho e o outro (medido no cabeçalho) */
/* na altura do M do menu (0,717 do rostinho, que mede --marca-h), sempre */
.idioma{--chave:var(--verde);
  display:flex;align-items:center;gap:3px;height:calc(var(--menu-h) * .717)}
.chave-casa{display:block;height:100%;width:auto;padding:0;border:0;
  background:none;cursor:pointer;color:var(--chave);-webkit-appearance:none;
  transform-origin:50% 50%;will-change:transform}
.chave-casa svg{display:block;height:100%;width:auto;overflow:visible}
.chave-casa .ic-traco{fill:none;stroke:var(--chave);transition:stroke 130ms ease}
.chave-casa .chave-fundo{fill:var(--papel);transition:fill 130ms ease,stroke 130ms ease}
/* ACESA = exatamente como a marca do menu acesa (a da página atual e a que
   está sob o mouse): papel amarelo e tinta AZUL — traço e miolo. */
.chave-casa.atual .chave-fundo,
.chave-casa:hover .chave-fundo{fill:var(--amarelo)}
.chave-casa.atual .ic-traco,
.chave-casa:hover .ic-traco{stroke:#001aff}
.chave-casa:focus-visible{outline:2px solid var(--azul);outline-offset:4px}
/* No celular a chave NÃO aparece: a língua vem do aparelho (idioma.js) e
   a barra é curta demais pra mais uma peça. */
@media (max-width:899px){ .topo-idioma{display:none} }
/* A chave mora na BARRA, no canto direito, em toda página (antes ficava em
   cima do texto de cada uma). Sozinha, ela é quem se empurra pra direita
   (margin-left:auto); com o controle da grade na frente, quem empurra é ele
   e ela só encosta ao lado. No celular ela some (a língua vem do aparelho). */
.topo-idioma{align-self:center;flex:0 0 auto;margin-left:auto;
  color:var(--verde)}
.topo-relogio ~ .topo-idioma{margin-left:10px}

.topo-contato{
  flex:0 1 auto; min-width:0;
  text-align:right; font-size:13px; line-height:1.5; color:var(--verde);
}
.topo-contato a{text-decoration:none}
.topo-contato a:hover{text-decoration:underline}
.topo-contato .nome{background:var(--amarelo);color:var(--grafite);padding:0 .25em}

/* a galeria encosta no menu na mesma medida da margem lateral */
/* a barra ocupa lugar no fluxo (não é fixa), então aqui basta a margem */
.conteudo{padding-top:var(--pad-x)}
@media (min-width:900px){

}

/* ---------------------------------------------------------------- menu -- */
/* O contêiner NÃO corta: puxar uma marca faz ela sair da barra. */
.mm{position:relative;height:100%;overflow:visible;touch-action:none;
    user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.mm-board{position:absolute;top:50%;transform-origin:50% 50%}

.mm-peca{position:absolute;display:block;pointer-events:none;
         text-decoration:none;will-change:transform;
         --p-tinta:var(--mm-tinta);--p-papel:var(--mm-papel)}
.mm-peca.atual{--p-tinta:var(--mm-tinta-atual);--p-papel:var(--mm-papel-atual)}
.mm-peca svg{width:100%;height:100%;overflow:visible}

.mm-peca svg *{pointer-events:auto}

.broca-a{fill:var(--p-papel)}
.broca-b{fill:var(--p-tinta)}
/* .broca-c é CONTORNO de traço (os anéis, a moldura da carta, o S): nas
   marcas do cabeçalho o contorno era um preenchimento de 4px, e virou traço
   pra ter a MESMA espessura do relógio — a mesma conta de lá, em pixels de
   tela, seja qual for o tamanho da marca. */
/* Dividido por --mm-escala: o menu.js encolhe o tabuleiro inteiro com um
   scale() de CSS pra caber na barra, e o non-scaling-stroke NÃO desconta
   transform de HTML — sem a divisão o traço saía 30% mais fino que o do
   relógio (medido: 1,43px contra 2px). */
.broca-c{fill:none;stroke:var(--p-tinta);
  stroke-width:calc(var(--traco) / var(--mm-escala, 1));
  vector-effect:non-scaling-stroke}
.mm-peca .broca-a,.mm-peca .broca-b{transition:fill 130ms ease}
.mm-peca .broca-c{transition:stroke 130ms ease}
.mm-alvo{fill:transparent}

/* pilha: acende virando uma cor só */
.mm.solido  .mm-peca.aceso .broca-a{fill:var(--p-tinta)}
/* topo: acende trocando pra paleta de destaque, igual à marca da página atual */
.mm.destaque .mm-peca.aceso{--p-tinta:var(--mm-tinta-atual);--p-papel:var(--mm-papel-atual)}
/* botões de contato: acende INVERTENDO. Virar uma cor só apagaria o rótulo,
   que aqui é desenho e não texto. */
.mm.inverte .mm-peca.aceso{--p-tinta:var(--mm-papel);--p-papel:var(--mm-tinta)}

/* o yin-yang azul tem metade vazada; o véu fecha a elipse só quando acesa */
.mm-veu{fill:transparent}
.mm.solido .mm-peca.aceso .mm-veu{fill:var(--p-tinta)}

/* nome dentro da marca: caixa em unidades do desenho, corpo ajustado por JS */
.mm-nome{position:absolute;display:grid;place-items:center;overflow:hidden;
  color:var(--p-papel);
  transform:translate(-50%,-50%) scale(.86);transform-origin:50% 50%;
  opacity:0;pointer-events:none;
  transition:opacity 130ms ease, transform 280ms cubic-bezier(.2,1.5,.35,1)}
.mm-nome > span{display:block;width:100%;text-align:center;
  line-height:1.02;letter-spacing:.01em;text-transform:uppercase;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.mm-peca.aceso .mm-nome{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* no destaque a marca acesa fica amarela: o nome tem que ser a tinta */
.mm.destaque .mm-nome{color:var(--p-tinta)}
.mm.sem-nome .mm-nome{display:none}

/* foco de teclado visível (a peça é um <a> de verdade) */
.mm-peca:focus-visible{outline:3px solid var(--azul);outline-offset:4px;border-radius:4px}

@keyframes mm-entra{from{opacity:0;transform:translateY(-26px) scale(.94)}
                    to{opacity:1;transform:none}}
.mm-peca svg{animation:mm-entra 520ms cubic-bezier(.2,1.25,.4,1) both}
@media (prefers-reduced-motion:reduce){
  .mm-peca svg{animation-duration:1ms}
  .mm-nome{transition:opacity 80ms}
}

/* ------------------------------------------------------- menu do topo -- */
/* flex:0 0 auto é obrigatório: como item flex o menu encolheria junto com a
   janela e chegaria a zero de largura, e aí ele não monta (o motor precisa de
   um tamanho pra calcular a escala). */
.topo .mm{flex:0 0 auto;width:min(340px,72vw);height:var(--menu-h)}
/* o rosto abre o menu grandão: cursor de clique mesmo sendo <a> com href */
.topo-menu .mm-peca{cursor:pointer}

/* --------------------------------------------- entrada: o menu grandão -- */
/* O site abre nele, ocupando a tela toda. Não é camada nem tem fechar. */
body.entrada{overflow:hidden}
.mm.tela{position:fixed;inset:0;width:100%;height:100%}

/* ------------------------------------------------------------ filtros -- */
/* Uma linha só que rola pro lado, como o Pinterest, alinhada à esquerda
   rente à galeria. A barra de rolagem some — quem indica que há mais é o
   conteúdo cortado na borda. */
.filtros{display:flex;flex-wrap:nowrap;gap:0 18px;
  width:100%;justify-content:flex-start;
  overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-snap-type:x proximity;
  padding:34px var(--pad-x) 22px;font-size:22px;line-height:1.3}
.filtros::-webkit-scrollbar{display:none}
.filtro{flex:0 0 auto;white-space:nowrap;scroll-snap-align:center;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--verde);text-transform:none}
/* o destaque é a cor (azul), sem sublinhado */
.filtro.ativo{color:var(--azul)}

/* --------------------------------------------------------------- feed -- */
/* colunas de altura variável, estilo mural. As alturas vêm do --h de cada
   cartão (proporção da imagem do projeto quando o CSV entrar). */
/* As colunas são montadas pelo site.js (ver "Mural"). O column-count ficou
   de reserva: se o script não rodar, o mural ainda sai em coluna. */
/* O cartão virou DUAS peças: o quadro da imagem e a legenda embaixo. Antes
   o próprio cartão era o quadro — a proporção e o corte moravam nele. Foi
   preciso separar pra a legenda ficar FORA da área cortada. */
.cartao{position:relative;display:block;text-decoration:none}
.cartao-quadro{position:relative;display:block;
  /* a proporção vem do arquivo; o gerador escreve --ar em cada cartão */
  aspect-ratio:var(--ar,3/2);
  background:#f1f1f1;overflow:hidden}
/* base e hover ocupam o mesmo lugar; o de cima só aparece no hover */
.cartao-midia{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border:0}
.cartao-hover{opacity:0;transition:opacity .15s linear}
.cartao:hover .cartao-hover{opacity:1}
@media (max-width:560px){
  .filtros{font-size:17px;gap:0 12px;padding:24px var(--pad-x) 16px}
}

/* ---------------------------------------------------------- texto -- */
.texto{max-width:62ch;margin-inline:auto;padding:40px var(--pad-x) 80px;
       font-size:20px;line-height:1.5}
.texto p{margin-bottom:.7em}
.texto a{color:var(--azul)}

/* ============================================================= sobre -- */
/* Um layout só pros dois tamanhos. No celular a assinatura ocupa a largura
   toda e os dois textos empilham com um filete entre eles; no desktop a
   assinatura vai pra coluna da direita e os textos viram duas colunas. */
/* A página EU se apoia na BASE da tela: a coluna ocupa a altura toda e empurra
   o conteúdo pra baixo. O respiro em cima é o que sobra, não uma margem fixa. */
/* A EU cabe na tela, sem rolagem: o body vira coluna e a barra do topo fica
   com a altura dela, então o `flex:1` aqui pega EXATAMENTE o que sobra. Com
   min-height:100svh a página somava a barra e estourava a tela — o fim do
   texto ficava embaixo da dobra. */
body:has(.sobre){display:flex;flex-direction:column;min-height:100svh}
.sobre{--col:minmax(0,1fr);--calha:48px;--encaixe:1;color:var(--verde);
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  /* a margem de baixo é a mesma de cima e das laterais */
  padding:0 var(--pad-x) var(--pad-x)}

/* --- a legenda ----------------------------------------------------------
   Nome à esquerda, categoria e [ano] à direita, na largura da thumb.

   Altura TRAVADA em --legenda-h, e o nome corta com reticências em vez de
   quebrar linha: se ela pudesse crescer, um nome comprido numa coluna
   estreita empurraria o cartão pra baixo e a conta da grade — que não mede o
   DOM — erraria a posição do vizinho. */
.cartao-legenda{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  height:var(--legenda-h);
  padding-top:3px;
  /* acompanha a tela: 8px no celular, 11px do desktop pra cima */
  font-size:clamp(8px, .95vw, 11px);
  /* 1.4 e não 1: com line-height:1 a caixa da linha fica com a altura exata
     do corpo da letra, e as letras passam um pouco dela. Como o nome tem
     overflow:hidden pra cortar com reticências — e esse corte vale nos DOIS
     eixos —, o topo das letras era raspado. Foi o que apareceu no celular,
     onde o corpo é menor e a sobra proporcional é maior. */
  line-height:1.4;letter-spacing:.02em;
  text-transform:uppercase;color:var(--grafite)}
.cartao-nome{flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartao-ficha{flex:0 0 auto;white-space:nowrap}

/* --- a ficha: categoria + ano ------------------------------------------ */
.cartao-ficha{display:flex;gap:.45em;white-space:nowrap}

/* --- cartão estreito: cai a categoria, fica o ano ----------------------
   No celular a categoria ("IDENTIDADE VISUAL") é quase tão larga quanto o
   cartão inteiro, e espremia o nome do projeto até sobrar uma letra.

   Some a categoria e ficam nome + [ano] — que é a informação que cabe e a
   que mais serve. A legenda continua com UMA linha: quebrar em duas
   empurraria o cartão pra baixo e a conta da grade, que não mede o DOM,
   erraria a posição do vizinho.

   Quem decide é o grade.js, que sabe a largura da coluna. Assim o corte não
   depende do tamanho da JANELA e sim do cartão — que encolhe também quando
   se mexe no número de colunas. */
.feed-cosmos.legenda-curta .cartao-categoria{display:none}

/* --- em processo / blur (ligados no editor) ---------------------------- */
/* EM PROCESSO: a etiqueta entra no lugar da categoria e do ano, e o cartão
   é mudo (não abre) — o gerador já o escreve sem link. */
.cartao[data-processo]{cursor:default}
/* BLUR: embaça a mídia, não a moldura. O scale esconde a borda clara que o
   desfoque deixa nas bordas; o overflow:hidden do quadro corta a sobra. */
.cartao[data-blur] .cartao-midia{filter:blur(7px);transform:scale(1.08)}
.cartao[data-blur][data-hover-zoom]:hover .cartao-midia{transform:scale(1.08)}


/* As duas assinaturas ficam na MESMA grade dos dois parágrafos — mesma
   quantidade de colunas, mesma calha. É o que faz ARQUIVO CRIATIVO cair
   exatamente sobre o texto da esquerda e MARCELO MARCONI sobre o da direita
   sem largura calculada na mão: mexer na calha move as duas juntas.
   Quem dá o respiro até os parágrafos é esta caixa, não cada assinatura. */
/* No CELULAR as duas empilham e viram um bloco de duas linhas, então o vão
   até o texto encolhe. Duas razões, e as duas importam: a página EU cabe na
   tela SEM ROLAGEM (com o 12vh de antes, de quando havia uma assinatura só,
   ela passava por 1px num aparelho de 667px), e a coluna é ancorada embaixo
   — o respiro entre o MENU e os títulos é o que sobra aqui em cima. Apertar
   este vão é o que devolve ar lá pro topo.
   Entre os títulos e o texto ainda entra a chave de idioma, com margem
   própria, então a separação de fato é bem maior que este valor. */
.assinaturas{display:grid;grid-template-columns:var(--col);
  gap:calc(1.2vh * var(--encaixe));
  margin:0 0 calc(4vh * var(--encaixe))}

/* O PISO do clamp é o que importa aqui, mais que o teto. Com 34px de mínimo,
   abaixo de ~370px de tela o corpo parava de encolher e "MARCELO MARCONI"
   (que pede 337px a 34px) estourava a coluna. E conteúdo que estoura um flex
   com space-between não tem folga pra distribuir — por isso as palavras
   deixavam de encostar nas bordas e a última saía cortada.
   Com 24px de piso e 8,2vw, a linha mais longa cabe com folga em qualquer
   aparelho: a 375px pede 305 numa coluna de 345; a 320px, 260 numa de 290. */
.assinatura{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0;
  font-weight:400;font-size:calc(clamp(24px,8.2vw,58px) * var(--encaixe));line-height:1;
  text-transform:uppercase;letter-spacing:-.005em}

/* O corpo e o vão do CELULAR saem de uma conta de espaço, não de gosto: a
   página tem que caber na tela (ver acima) e ainda sobrar um respiro entre o
   MENU e os títulos. Com a segunda assinatura (ARQUIVO CRIATIVO) o texto
   passou a disputar essa altura, e 5,8vw não deixava respiro nenhum — os
   títulos encostavam nas marcas. 5,5vw devolve 35px de ar num aparelho de
   667px, com uma diferença de corpo que não se percebe (21,7 -> 20,6px).
   No desktop nada disto vale: a regra de 900px logo abaixo troca os dois. */
.colunas{display:grid;grid-template-columns:var(--col);gap:18px;
  font-size:calc(clamp(19px,5.5vw,27px) * var(--encaixe));
  line-height:1.06;letter-spacing:-.012em;text-wrap:pretty}
/* sem filete entre os parágrafos: o vão do grid já separa os dois */

/* A EU vira "desktop" já no TABLET (700px, o mesmo corte da galeria):
   duas colunas, índice em cima, página na altura da tela. */
@media (min-width:700px){
  .sobre{--col:repeat(2,minmax(0,1fr))}
  /* No desktop as duas assinaturas ficam LADO A LADO, uma sobre cada coluna:
     a própria grade alinha, então aqui é só a calha e o corpo da letra. */
  .assinaturas{gap:0 var(--calha);margin-bottom:calc(14vh * var(--encaixe))}
  .assinatura{font-size:calc(clamp(30px,3.3vw,64px) * var(--encaixe))}
  .colunas{gap:0 var(--calha);
           font-size:calc(clamp(24px,2.1vw,30px) * var(--encaixe));
           line-height:1.06;letter-spacing:-.012em}
}

/* ------------------------------------------------------ índice da EU -- */
/* A área do índice toma o que sobra ACIMA do texto (que fica ancorado
   embaixo, como sempre); dentro dela, o índice mora na coluna da direita —
   a mesma grade dos parágrafos, coluna 2. Começa lá em cima, na altura das
   marcas: a margem negativa desconta a barra do topo. Só no desktop. */
/* No CELULAR o índice vai pra BAIXO do texto, e a ordem vira: ARQUIVO
   CRIATIVO, seu texto, MARCELO MARCONI, seu texto, o índice. As duas caixas
   (assinaturas e colunas) se dissolvem (display:contents) pra as peças
   entrarem numa fila só, ordenadas. A página passa a rolar: o índice abre
   pra baixo, na altura que precisar. */
@media (max-width:699px){
  /* o mesmo vão (--vao-eu) em todo lugar: da barra do topo ao primeiro
     título, do texto 1 ao filete, do texto 2 ao índice. E entre um filete e
     o título logo abaixo dele, o mesmo respiro que os títulos do índice têm
     do filete de cima (.54em) — assim filete/título é sempre igual. */
  .sobre{justify-content:flex-start;padding-top:var(--vao-eu)}
  .assinaturas,.colunas{display:contents}
  /* escrito normal, sem as duas palavras abertas nas pontas da linha; um
     respiro maior entre o título e o texto dele */
  .assinatura{margin-bottom:.55em;justify-content:flex-start;gap:.28em}
  /* o MESMO vão separa: texto 1 -> filete -> título 2, e texto 2 -> índice */
  /* --vao-eu é só o ar entre a barra e o primeiro título. Do parágrafo até
     o filete de baixo vale o MESMO respiro que vai do filete ao título
     (.54 do corpo do título): sem buraco entre os blocos. */
  .sobre{--vao-eu:7vh;--respiro-filete:calc(.61 * clamp(24px,8.2vw,58px) * var(--encaixe))}   /* .61 e não .54: o parágrafo termina 2px antes da caixa dele */
  .assinaturas .assinatura:first-child{order:1}
  .colunas p:first-child{order:2;margin-bottom:var(--respiro-filete)}
  /* um filete divide o primeiro bloco do segundo */
  .assinaturas .assinatura:last-child{order:3;border-top:var(--traco) solid currentColor;
    padding-top:.54em}
  .colunas p:last-child{order:4;margin-bottom:var(--respiro-filete)}
  .indice-area{order:5}
  /* texto um pouco menor no celular */
  .colunas{font-size:calc(clamp(17px,4.6vw,22px) * var(--encaixe));line-height:1.18}
  .indice-cab{font-size:calc(clamp(24px,8.2vw,58px) * var(--encaixe))}
  .indice-tabela{font-size:calc(clamp(14px,4.2vw,20px) * var(--encaixe));line-height:1.5}
  /* no celular a tabela NÃO rola por dentro — a página rola. O overflow:auto
     com overscroll-behavior:contain (do desktop) fazia o dedo em cima da
     lista não passar a rolagem pra página: descia e não voltava. */
  /* (a regra geral da tabela vem DEPOIS no arquivo; o seletor mais forte
     garante que no celular vale esta) */
  .indice-area .indice-tabela{overflow:visible;overscroll-behavior:auto;flex:none}
  .indice-linha{grid-template-columns:44fr 16fr 40fr}
  .indice-linha .ind-cat{display:none}      /* três colunas cabem; quatro não */
}
@media (min-width:700px){
  /* a página tem a ALTURA da tela (não só o mínimo): é isso que segura a
     tabela do índice dentro do espaço dela em vez de empurrar o texto pra
     baixo da dobra. No celular fica o min-height, com o encaixe.js. */
  body:has(.sobre){height:100svh}
  .indice-area{display:grid;grid-template-columns:var(--col);
    grid-template-rows:minmax(0,1fr);gap:0 var(--calha);
    /* flex-basis ZERO: a altura da área é só o que sobra na tela, e o
       conteúdo (a tabela comprida) não entra na conta — senão ele
       estourava pra cima, porque a coluna se alinha por baixo */
    flex:1 1 0px;min-height:0;overflow:hidden;
    margin-top:calc(var(--pad-x) - var(--topo-h));margin-bottom:3vh}
  .indice{grid-column:2;display:flex;flex-direction:column;min-height:0}
  /* o vídeo só na JANELA da esquerda: vira um item da grade (célula 1), em
     vez de cobrir a tela. Cabe na célula com `cover`; sem a rotação do
     vídeo em pé, que era pra tela inteira. */
  .indice-area > .fundo-video{position:relative;inset:auto;grid-column:1;
    min-height:0;overflow:hidden;z-index:auto;isolation:auto}
  /* POR ENQUANTO sem o vídeo na janela (pedido de 20/09): a célula fica
     vazia e o índice continua na coluna da direita. Pra voltar, apague. */
  .indice-area > .fundo-video{display:none}
  /* 2% maior que a janela: o quadro do vídeo passa da borda e o corte come
     a sobra — sem isso ficava um filete claro na borda (subpixel do cover +
     espelhamento) */
  .indice-area > .fundo-video video{transform:scaleX(-1) scale(1.02)}
  .indice-area > .fundo-video video.em-pe{position:static;width:100%;height:100%;
    transform:scaleX(-1) scale(1.02)}
}
/* cada título entre dois filetes; o de baixo é o de cima do próximo */
.indice-cab{display:flex;align-items:center;justify-content:space-between;
  /* mais folga em cima que embaixo de propósito: com line-height 1 as
     maiúsculas ficam altas na caixa (sobra o espaço do descendente embaixo),
     e o título parecia colado no filete de cima. Assim as letras ficam no
     meio dos dois filetes. */
  width:100%;margin:0;padding:.54em 0 .30em;border:0;border-top:var(--traco) solid currentColor;
  background:none;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;
  font:inherit;font-weight:400;text-transform:uppercase;letter-spacing:-.005em;
  font-size:calc(clamp(30px,3.3vw,64px) * var(--encaixe));line-height:1}
.indice-cab:last-child{border-bottom:var(--traco) solid currentColor}
.indice-cab-aberto{position:relative;border-bottom:var(--traco) solid currentColor;cursor:default}
/* o X no centro exato da faixa — o padding do título é desigual de
   propósito (ver acima), então ele não pode depender do alinhamento do
   flex; fica ancorado no meio da faixa */
.indice-cab-aberto .indice-fechar{position:absolute;right:0;top:50%;transform:translateY(-50%)}
/* aberto, o título é botão também: clicar nele fecha, igual ao X */
.indice-titulo{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;
  text-transform:inherit;letter-spacing:inherit;cursor:pointer;-webkit-appearance:none}
.indice-cab-aberto .indice-fechar{flex:0 0 auto}
/* a tabela: quatro colunas na proporção do layout de referência
   (36 / 18 / 25 / 21), rolando dentro do que sobra */
.indice-tabela{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-top:.5em;
  font-size:calc(clamp(14px,1.25vw,24px) * var(--encaixe));line-height:1.67;
  letter-spacing:-.005em}
.indice-linha{display:grid;grid-template-columns:36fr 18fr 25fr 21fr;gap:0 1em;
  color:inherit;text-decoration:none}
/* No hover a LINHA inteira acende — mas o amarelo fica só atrás do texto,
   não na caixa da coluna: cada célula encolhe pro próprio conteúdo
   (justify-self:start) e o fundo vai nela. O mesmo gesto dos links do site. */
a.indice-linha:hover span{background:var(--amarelo)}
.indice-linha span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  justify-self:start;max-width:100%}
/* SERVIÇOS: cada um numa linha, no MESMO corpo dos títulos do índice */
.indice-tabela-grande{padding-top:.2em;line-height:1.25}
.indice-servico{display:block;color:inherit;text-decoration:none;
  font-size:calc(clamp(30px,3.3vw,64px) * var(--encaixe));text-transform:uppercase;letter-spacing:-.005em}
.indice-servico:hover{background:var(--amarelo)}
/* a seta do serviço: traço do site, na altura da letra, ANTES do nome */
.indice-servico .ind-seta{display:inline-block;width:.62em;height:.62em;margin-right:.28em;
  vertical-align:baseline;overflow:visible;fill:none;stroke:currentColor}
.indice-servico .ind-seta .ic-traco{stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter}
@media (max-width:699px){ .indice-servico{font-size:calc(clamp(24px,8.2vw,58px) * var(--encaixe))} }

/* ------------------------------------------------ botões de contato -- */
/* no celular a pilha é o conteúdo da página, então ocupa quase tudo */
.botoes{width:100%;height:min(78vh,700px);margin-top:3vh}
@media (min-width:900px){ .botoes{height:min(62vh,560px);margin-top:6vh} }

/* ============================================================ cursor -- */
/* Só existe em ponteiro fino: a classe é posta pelo cursor.js, que nem roda
   em tela de toque. Sem a classe, o cursor do sistema fica normal. */
.tem-cursor, .tem-cursor *{cursor:none !important}

#cursor-custom{
  position:fixed;top:0;left:0;z-index:9999;
  width:20px;height:20px;border-radius:50%;
  /* TESTE: a bolinha é PRETA fora dos projetos. Sobre eles ela vira negativo
     (regra mais abaixo). Continua saindo de uma variável própria pra ser um
     lugar só de troca — o --verde-cursor segue valendo pro controle da
     grade, que não mudou de cor. */
  background:var(--cor-cursor, #000);
  pointer-events:none;opacity:0;
  transform:translate3d(-50%,-50%,0);will-change:transform;
  transition:opacity .2s ease, width .25s ease, height .25s ease;
}
/* sobre qualquer clicável: cresce */
#cursor-custom.cursor-hover{width:40px;height:40px}
/* Sobre a imagem do carrossel a bolinha vira a seta do lado pra onde o
   clique leva. O ícone já traz o disco branco de aro verde, então o fundo
   verde da bolinha some pra não aparecer por trás dele. */
#cursor-custom[data-seta="esq"],
#cursor-custom[data-seta="dir"]{
  width:38px;height:38px;background:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
#cursor-custom svg{display:block;width:100%;height:100%}

/* --- TESTE: negativo sobre os projetos ----------------------------------
   Branco + difference dá o negativo fotográfico exato do que estiver por
   baixo: o resultado é |fundo − branco|, que é o fundo invertido. Sobre área
   clara a bolinha fica escura, sobre a imagem ela inverte a imagem.

   O verde some aqui porque com difference ele não inverteria, misturaria —
   e o que se quer é a imagem virada do avesso, não uma cor por cima. */
/* NO CAMPO AZUL a bolinha vira amarela. Ela é do mesmo azul da FALA CMG —
   azul sobre azul é bolinha invisível, e o visitante fica sem cursor nenhum,
   porque o cursor do sistema também está escondido nessa página.

   Sai do token, não de um valor solto: se um dia outra página ganhar o fundo
   azul, é só pôr a classe .fala-azul nela e o cursor acompanha. */
body.fala-azul #cursor-custom{background:var(--azul)}
/* GRUDADA num botão pelo ímã, a bolinha vira um disco chapado cobrindo o
   botão do tamanho exato — os dois viram uma coisa só, como sempre foi. O
   que ela NÃO faz mais é negativar: em modo negativo ela invertia o próprio
   botão (o "bugzinho" do X aparecendo em amarelo e escuro). A regra vem
   DEPOIS da .cursor-negativo de propósito, pra ganhar dela — e na FALA CMG
   a regra da página, mais específica, continua mandando na cor. */
#cursor-custom.cursor-negativo{
  /* Sobre um projeto a bolinha vira NEGATIVO do que está atrás.

     É mix-blend-mode e NÃO backdrop-filter: os dois dão a mesma imagem
     (branco em "difference" = inverter), mas o backdrop-filter obriga o
     navegador a fotografar o fundo e filtrar a cada quadro — com a bolinha
     correndo atrás do mouse sobre imagens grandes, era isso que engasgava o
     cursor (sentido no Safari sobretudo). O blend é composto na GPU.

     NÃO use url(#filtro) aqui: o Chrome aceita a sintaxe, não desenha nada, e
     como o fundo é transparente a bolinha SOME — e, por aceitar a sintaxe,
     ele ainda descarta a regra de reserva que vier antes. */
  background:#fff;
  mix-blend-mode:difference;
  backdrop-filter:none;-webkit-backdrop-filter:none}
#cursor-custom.cursor-grudado{
  background:var(--cor-cursor, #000);
  mix-blend-mode:normal;
  backdrop-filter:none;-webkit-backdrop-filter:none}
/* Vestida de SETA sobre o carrossel, a bolinha não negativa: o ícone já é
   um disco inteiro (aro + fundo), e o negativo por baixo aparecia como um
   halo em volta dele — "o cursor lá atrás". Vem depois da .cursor-negativo
   de propósito, pra ganhar dela. */
#cursor-custom[data-seta="esq"].cursor-negativo,
#cursor-custom[data-seta="dir"].cursor-negativo{
  background:none;mix-blend-mode:normal;
  backdrop-filter:none;-webkit-backdrop-filter:none}
/* Grudada num ímã, quem manda no tamanho é o JS: ele põe na bolinha o
   diâmetro exato do botão, e as duas viram um círculo só, do mesmo verde.
   Por isso não há regra de tamanho aqui — inline sempre ganha. */


@media (prefers-reduced-motion:reduce){ #cursor-custom{transition:opacity .2s ease} }

/* ========================================================== projeto -- */
/* Celular: galeria primeiro, texto depois. Desktop: texto numa coluna fixa
   à esquerda que acompanha a rolagem, galeria à direita. */
/* No CELULAR a barra do topo continua ocupando o lugar dela e a galeria
   começa depois do respiro de sempre — mexer nisso deixava as imagens
   grudadas no menu. Quem encosta na margem do site é só o desktop, onde as
   marcas são fixas e a barra pode ser zerada (ver mais abaixo). */
.projeto{display:grid;gap:34px var(--pad-x);
  padding:var(--pad-x) var(--pad-x)}
.projeto-galeria{order:1}
.projeto-texto{order:2}

.projeto-texto{color:var(--verde);font-size:15px;line-height:1.24;max-width:62ch}
/* nome e ano na MESMA linha, ano encostado na direita da coluna */
.projeto-texto h1{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;font-size:24px;font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.05;margin:0}
.projeto-texto h1 .pj-ano{font-size:.86em;flex:0 0 auto}

/* O filete é o que separa os dados, no mesmo verde do texto. O `color:inherit`
   não é enfeite: o navegador dá cor PRÓPRIA ao <hr> (cinza), então um
   currentColor sem isso pegava o cinza dele em vez do verde herdado daqui. */
.projeto-texto hr{border:0;color:inherit;
  border-top:1.5px solid currentColor;
  /* As margens são DESIGUAIS de propósito, e é o que centra o texto entre os
     filetes. Embaixo da linha de base sobra o vão do descendente, que estas
     linhas não usam (nome, categoria e rótulos são todos em caixa alta): com
     .7em dos dois lados, medi 13,2px de respiro em cima e 15,8px embaixo. A
     diferença de 2,6px foi dividida entre as duas margens — o filete de baixo
     sobe, o de cima desce, e o desenho fica no meio.
     Empurrar o TEXTO com padding não resolvia: ele leva o filete junto. */
  margin:.613em 0 .787em}
/* Os vizinhos do filete NÃO têm margem vertical: quem dá o respiro é só o
   filete, com o mesmo valor em cima e embaixo. Antes cada bloco trazia a sua
   própria margem, que somava com a do filete só de um lado e deixava o vão de
   baixo maior que o de cima. */
.projeto-texto p{margin:0}
.projeto-texto .pj-descricao{margin:0}

/* --- texto comprido: corta e abre no + --------------------------------- */
/* Um projeto com muito texto empurrava a ficha técnica pra fora da tela e
   subia por cima do menu. Passando do limite, o bloco é cortado e o resto
   abre no botão. O corte não é uma régua: as últimas linhas se apagam, que é
   o que avisa que continua. */
/* Cortado, fica o PRIMEIRO PARÁGRAFO e mais nada — o resto abre no +.
   Cortar por altura partia a frase no meio de uma linha; o parágrafo é a
   divisão que o texto já tem, e é por ela que se corta. */
.pj-descricao.cortado > * + *{display:none}
/* flex:0 0 auto em tudo que mora na coluna. A coluna é um flex de altura
   fechada, e um filho com overflow:hidden pode ser encolhido até sumir: foi
   assim que o texto inteiro desapareceu e sobrou só o botão na tela. */
.projeto-texto > *{flex:0 0 auto}
.pj-mais{margin-top:.5em;align-self:flex-start}
/* o respiro entre parágrafos vem da LINHA EM BRANCO do texto, não do fato
   de haver dois parágrafos: quebra de linha simples continua colada, como
   sempre esteve */
.projeto-texto .pj-descricao p.salto{margin-top:.9em}
/* antes da ficha técnica o respiro é maior de propósito: ali muda de assunto */
.projeto-texto .pj-rotulo{text-transform:uppercase;margin:1.9em 0 0}
.projeto-texto .creditos{margin-bottom:0}

/* --- as duas sanfonas: "O que eu fiz" e "Ficha técnica" ------------------
   Mesma coluna, PÁGINA ou POPUP: por isso os seletores levam os dois donos.

   O título mora ENTRE DOIS FILETES — exatamente como a categoria do projeto
   ali em cima. É a moldura que conta que ali se clica, e por isso não há mais
   "+" nenhum ao lado: o desenho já diz. O corpo entra por baixo do segundo
   filete quando abre, e abrir uma fecha a outra (site.js/ligarSecoes).

   O cabeçalho NÃO leva data-ima: o ímã do cursor põe na bolinha o diâmetro do
   elemento em que ela gruda, e aqui o elemento ocupa a coluna inteira — dava
   uma bolinha gigante em cima do texto. Ímã é pra alvo redondo e pequeno. */
.projeto-texto .pj-secao,.painel-lado .pj-secao{margin:0}
.pj-secao-cabecalho{all:unset;box-sizing:border-box;display:block;width:100%;
  font:inherit;color:inherit;text-transform:uppercase;cursor:pointer}
.pj-secao-cabecalho:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.pj-secao-corpo{display:none}
.pj-secao.aberto .pj-secao-corpo{display:block}
/* o filete debaixo do cabeçalho é FIXO — está sempre lá, aberto ou fechado.
   Só o de dentro do corpo (entre rótulo e valor da ficha, ou entre um
   parágrafo e outro) some junto quando a sanfona fecha. */
.projeto-texto .pj-secao-corpo .pj-rotulo,
.painel-lado .pj-secao-corpo .pj-rotulo{margin-top:1.3em}
.projeto-texto .pj-secao-corpo > .pj-rotulo:first-child,
.painel-lado .pj-secao-corpo > .pj-rotulo:first-child{margin-top:0}
.projeto-texto .pj-secao-corpo p.salto,
.painel-lado .pj-secao-corpo p.salto{margin-top:.9em}

/* A grade é de SEIS colunas. Seis é o número que divide certo por 1, 2, 3 e 6
   — então dá pra ter uma imagem cheia, duas de metade ou três de um terço, e
   as três combinações fecham simétricas. Com 3 colunas, duas imagens lado a
   lado nunca fechavam.
   Cada moldura escolhe quantas colunas ocupa e a sua proporção; a imagem
   preenche a moldura e é cortada pelo `cover`. Quem manda no layout é a
   moldura, não o arquivo. */
.projeto-galeria{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
                 gap:var(--vao-projeto)}
.projeto-galeria figure{margin:0;background:#f1f1f1;
                        aspect-ratio:var(--ar,3/2);overflow:hidden}
.projeto-galeria figure img,
.projeto-galeria figure video{width:100%;height:100%;object-fit:cover;display:block}
.projeto-galeria [data-col="1"]{grid-column:span 1}
.projeto-galeria [data-col="2"]{grid-column:span 2}
.projeto-galeria [data-col="3"]{grid-column:span 3}
.projeto-galeria [data-col="4"]{grid-column:span 4}
.projeto-galeria [data-col="5"]{grid-column:span 5}
.projeto-galeria [data-col="6"]{grid-column:span 6}
/* no celular a grade some: é uma imagem por vez, largura cheia. Duas peças
   lado a lado numa tela dessas não se lê — vira miniatura. A moldura mantém a
   proporção que foi escolhida no montador. */
@media (max-width:699px){
  .projeto-galeria{grid-template-columns:minmax(0,1fr)}
  .projeto-galeria [data-col]{grid-column:span 1}
}

@media (min-width:900px){
  /* No desktop as marcas saem do fluxo (position:fixed), então a barra do
     topo não precisa reservar altura nenhuma aqui: sem isso a galeria começava
     75px abaixo, e a página do projeto abria com um vão que nenhuma outra
     tem. Zerada a barra, a primeira imagem encosta na margem do site. */
  body:has(.projeto) .topo{height:0;padding-block:0}
  /* A PÁGINA não rola: quem rola são as duas colunas, cada uma por si. O
     texto anda dentro dele mesmo e a galeria dentro dela — nenhum dos dois
     empurra o outro. É por isso que a altura aqui é fechada em 100svh: sem
     isso a coluna não teria contra o que rolar. */
  body:has(.projeto){overflow:hidden}
  /* A coluna do texto tem a MESMA largura da corrente do menu: as quatro
     marcas a 54px de altura medem 214px de ponta a ponta (do M ao envelope),
     e o envelope termina rente à borda direita do texto. */
  .projeto{grid-template-columns:214px minmax(0,1fr);gap:0 40px;
           height:100svh}
  /* min-height:0 é obrigatório: sem ele um filho de grid se recusa a encolher
     abaixo do próprio conteúdo, a coluna cresce e a rolagem nunca aparece */
  .projeto-texto{order:0;min-height:0;overflow-y:auto;
                 display:flex;flex-direction:column;justify-content:flex-end;
                 /* Aqui em cima moram as marcas, que são fixas e ficam POR
                    CIMA desta coluna. O respiro reserva o lugar delas, e a
                    máscara apaga o que passar por ali: como a máscara vale
                    pra caixa e o conteúdo rola por baixo dela, o texto se
                    dissolve ao chegar no menu em vez de embaralhar com ele. */
                 padding-top:calc(var(--menu-h) + var(--pad-x));
                 -webkit-mask-image:linear-gradient(transparent 0,
                     #000 calc(var(--menu-h) + var(--pad-x)));
                         mask-image:linear-gradient(transparent 0,
                     #000 calc(var(--menu-h) + var(--pad-x)))}
  /* posta pelo site.js quando o texto não cabe na coluna. Não é enfeite:
     conteúdo que estoura um flex com justify-content:flex-end fica com o topo
     inalcançável — a rolagem existe mas não chega lá. */
  .projeto-texto.solta{justify-content:flex-start}
  .projeto-texto h1{font-size:26px}
  /* Estas duas linhas não são enfeite. Com altura FECHADA, um grid reparte
     as linhas dentro dela: as molduras, que têm altura própria pela
     proporção, estouravam a linha e ficavam empilhadas umas sobre as outras
     — 13.585px de imagem espremidos em 1.550, doze delas sobrepostas.
     max-content devolve a cada linha a altura da moldura, e o start empilha
     de cima pra baixo em vez de espalhar pela caixa. */
  .projeto-galeria{order:0;min-height:0;overflow-y:auto;
                   align-content:start;grid-auto-rows:max-content}
  /* sem barra de rolagem nas colunas: são duas, e duas barras no meio do
     layout sujam tudo. Quem conta que há mais texto é o degradê e o + */
  .projeto-texto,.projeto-galeria{scrollbar-width:none}
  .projeto-texto::-webkit-scrollbar,
  .projeto-galeria::-webkit-scrollbar{width:0;height:0}

  /* --- TELA CHEIA: só a obra na tela --------------------------------------
     Some a coluna da esquerda inteira e a galeria toma as duas. Só existe no
     desktop: no celular as duas colunas já são uma só, e esconder o texto não
     devolveria largura nenhuma pra imagem. */
  body.projeto-cheio .projeto{grid-template-columns:1fr}
}
/* a coluna de texto e A BARRA DO TOPO (onde moram as marcas do menu, fixas
   naquele canto) somem juntas: em tela cheia não fica nada em volta da obra */
body.projeto-cheio .projeto-texto{display:none}
body.projeto-cheio .topo{display:none}
/* O botão fica FORA da barra que ele mesmo esconde, senão sumiria junto e
   não haveria caminho de volta.

   Ele respira mais que o resto: dois passos de margem (30px) em vez de um,
   pra não encostar na quina da tela. E é 10% maior que as outras bolinhas —
   feito pelo --esc, que é a escala de onde TODAS elas saem, então continua
   sendo a mesma peça, só num corpo maior. */
/* Duas bolinhas empilhadas na mesma coluna: o X em cima (sai do projeto) e
   o olho embaixo (esconde o texto). O passo entre elas é o MESMO do popup —
   um diâmetro mais 10px — pra as duas pilhas do site terem o mesmo ritmo. */
.pj-sair,.pj-texto-abre,.pj-som{position:fixed;z-index:102;
  --esc:calc(var(--esc-base) * 1.1);
  right:calc(var(--pad-x) * 2)}
.pj-sair{top:calc(var(--pad-x) * 2)}
.pj-texto-abre{top:calc(var(--pad-x) * 2 + 38.38px * var(--esc) + 10px)}
/* a orelha (som no hover) é a terceira da pilha, no mesmo passo */
.pj-som{top:calc(var(--pad-x) * 2 + (38.38px * var(--esc) + 10px) * 2)}
/* só faz sentido onde há vídeo com faixa de som */
body:not(:has(video[data-som])) .pj-som{display:none}
/* No celular ele não existe: lá as colunas já são uma só e não há tela cheia
   pra ganhar — ver o bloco de 900px acima.
   As DUAS classes no seletor não são enfeite: `.bolinha` também declara
   display, mora mais abaixo nesta folha e, com a mesma especificidade, ganhava
   por ordem — o botão continuava aparecendo no celular. */
@media (max-width:899px){
  .pj-texto-abre.bolinha,.pj-som.bolinha{display:none}
  /* o X FICA: ele é saída, não tela cheia. Sem ele, no celular, a única volta
     pra galeria é a marca do menu. Mas NÃO junto do menu: ele se alinha com a
     PRIMEIRA IMAGEM — que começa logo abaixo da barra (topo-h) mais o respiro
     da página (pad-x) — e entra uma margem (pad-x) pra dentro dela, no canto
     superior direito. Rolando, ele SOBE JUNTO com a página até encostar na
     margem de cima (pad-x) e ali para — quem faz isso é o site.js, que
     reescreve o top a cada rolagem; este valor é o ponto de partida. */
  .pj-sair{top:calc(var(--topo-h) + var(--pad-x) * 2)}
}

/* ============================================== vídeo: sem controles -- */
/* O BOTÃO DE PLAY.
   Quando o navegador não libera o autoplay — modo de baixo consumo, a opção
   de autoplay desligada pro site, uma aba que abriu em segundo plano — o
   WebKit desenha um botão de play GIGANTE por cima do vídeo. Ele não vem de
   `controls`: é uma peça interna do próprio navegador, e por isso nenhuma
   quantidade de JS conseguia tirá-lo. Só dá pra alcançá-lo por estes
   pseudo-elementos.
   Com isto, na pior das hipóteses o vídeo fica parado no primeiro quadro e
   começa no primeiro gesto — mas botão nenhum aparece. */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button{
  display:none !important;-webkit-appearance:none;opacity:0 !important}

/* ==================================================== vídeo de fundo -- */
/* Cobre a tela inteira, atrás de tudo. `multiply` faz o branco do papel
   sumir e só o traço ficar; `scaleX(-1)` espelha. */
.fundo-video{position:fixed;inset:0;z-index:0;overflow:hidden;
             pointer-events:none;mix-blend-mode:multiply}
/* SEM véu de opacidade aqui. Um <video> sem dados carregados não pinta pixel
   nenhum — não há quadro velho pra esconder, então a proteção não protegia de
   nada. E ela custava caro: navegador não dá autoplay em elemento invisível, e
   com opacity:0 o vídeo ficava esperando aparecer pra tocar e esperando tocar
   pra aparecer. O respiro pra leitura vem de outro lugar: o elemento só nasce
   1,8s depois de a página abrir. */
.fundo-video video{width:100%;height:100%;object-fit:cover;
                   transform:scaleX(-1);display:block}
/* No desktop o vídeo filmado EM PÉ gira pra deitar: as medidas trocam de lugar
   e o rotate devolve a caixa ao tamanho da tela. Sem isso, um vertical em tela
   larga seria cortado quase todo pelo `cover`.
   A classe vem do JS, que mede o vídeo depois de carregar: com clipes de
   orientações diferentes no sorteio, girar todos deitaria os que já estavam
   deitados. */
@media (min-width:900px){
  .fundo-video video.em-pe{position:absolute;top:50%;left:50%;
    width:100vh;height:100vw;
    transform:translate(-50%,-50%) rotate(90deg) scaleX(-1)}
}
/* SEM z-index aqui: ele criava um contexto de empilhamento próprio, e o
   multiply do vídeo (que hoje mora dentro da .sobre, na janela da esquerda)
   passava a misturar com o "nada" desse contexto em vez de com o papel da
   página — o vídeo aparecia chapado, sem o efeito. */
.sobre{position:relative}

/* ====================================== galeria — o mural -- */
/* Feed denso, sem legenda, com um controle de colunas no topo à direita:
   2 a 5, padrão 3. No celular a grade trava em 2 e o controle some. */
/* Aqui o mural é posicionado à mão, no absoluto — não em colunas de flex.
   É o que permite RESERVAR um buraco pro painel do projeto e deixar a grade
   continuar em volta dele, com as thumbs do lado ainda clicáveis.
   margin em vez de padding: assim o left:0 dos filhos bate com a margem. */
/* O VÃO entre as peças. No celular ele encolhe: 26px numa coluna de 160px é
   quase um sexto da peça, e o mural fica mais buraco que imagem.

   Valor em px puro, e não clamp(): o grade.js lê este número com
   getComputedStyle pra posicionar os cartões, e propriedade personalizada
   não é resolvida na leitura — um clamp() voltaria como texto e a conta
   cairia no valor de reserva. Media query devolve "12px" limpo. */
.feed-cosmos{--vao:26px;position:relative;display:block;
  margin:0 var(--pad-x);padding:0 0 40px}
/* Escondido até o grade.js posicionar (classe .posicionado): os cartões
   nascem todos em top:0/left:0 e, no celular, ficavam segundos empilhados
   com as legendas amontoadas até o JS chegar. A animação é a rede: se o JS
   não rodar, em 3s o feed aparece mesmo assim. */
.feed-cosmos:not(.posicionado){visibility:hidden;animation:feed-revelar 0s 3s forwards}
@keyframes feed-revelar{to{visibility:visible}}
.feed-cosmos > .cartao,
.feed-cosmos > .painel-palco,
.feed-cosmos > .painel-lado{position:absolute;top:0;left:0}

/* --- o controle ------------------------------------------------------- */
/* Medidas tiradas dos SVGs: trilho 211,46 x 22,86 com traço de 4 e raio de
   9,43; botão 38,38 de diâmetro, verde com contorno branco de 5 (é esse
   branco que recorta o trilho por baixo do botão). */
/* align-self porque o .topo alinha tudo pelo topo (flex-start) e o controle
   é bem mais baixo que as marcas — sem isso ele fica pendurado lá em cima */
/* --esc é o único número pra mexer no tamanho do controle inteiro: as
   medidas todas saem dos SVGs multiplicadas por ele, então a proporção
   entre trilho, botão e contorno branco nunca sai do lugar. */
/* O padding com margem negativa igual cresce a ÁREA DE CLIQUE sem mexer no
   desenho: o alvo passa de 14px de altura pra 50, e o ponteiro de verdade
   acerta mesmo quando o ímã puxou a bolinha do cursor pro lado. */
.grade-controle{margin-left:auto;align-self:center;display:none;
  align-items:center;flex:0 0 auto;
  padding:18px 12px;margin-top:-18px;margin-bottom:-18px;
  margin-right:-10px;cursor:pointer;touch-action:none}
/* 700px é o mesmo limite que o grade.js usa pra sair das 2 colunas fixas do
   celular. Se o controle só aparecesse em 900, entre 700 e 899 a grade mudaria
   de coluna sem ter como mexer nela. */
@media (min-width:700px){ .grade-controle{display:flex} }

/* TESTE: trilho mais curto — 130 em vez dos 211,46 do SVG original */
.grade-trilho{position:relative;
  width:calc(130px * var(--esc));height:calc(22.86px * var(--esc));
  border:var(--traco) solid var(--verde-cursor);
  border-radius:calc(11.43px * var(--esc));box-sizing:border-box;
  cursor:pointer;touch-action:none}
/* .bolinha é a peça compartilhada: mesmo diâmetro no botão do controle e nas
   setas e no X do painel. Todas levam data-ima, então o cursor gruda em todas
   — com cursor de bolinha, acertar alvo pequeno sem ímã é sofrido. */
/* O ícone JÁ É o botão: o círculo branco de contorno verde faz parte do
   desenho. Por isso aqui não há fundo nem borda — só o tamanho e o corte. */
.bolinha{width:calc(38.38px * var(--esc));height:calc(38.38px * var(--esc));
  background:none;border:0;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.bolinha svg{display:block;width:100%;height:100%;overflow:visible}
/* o aro e os traços dos ícones (X, +, sobrancelha do olho) na espessura do
   relógio — a mesma conta, em pixels de tela */
svg .ic-traco{stroke-width:var(--traco);vector-effect:non-scaling-stroke}

.grade-botao{position:absolute;top:50%;left:0;
  width:calc(38.38px * var(--esc));height:calc(38.38px * var(--esc));
  margin-top:calc(-19.19px * var(--esc));border-radius:50%;box-sizing:border-box;
  /* sem aro: é a MESMA bolinha do cursor, e quando os dois se grudam viram
     um círculo só. O aro branco cortava o verde ao meio nessa hora. */
  background:var(--verde-cursor);
  cursor:grab;touch-action:none;
  transition:left .16s cubic-bezier(.2,.8,.3,1)}
.grade-trilho:active .grade-botao,.grade-botao:active{cursor:grabbing}
.grade-trilho.arrastando .grade-botao,
.grade-controle.arrastando .grade-botao{transition:none}
.grade-controle.arrastando{cursor:grabbing}
.grade-trilho:focus-visible{outline:2px solid var(--azul);outline-offset:6px}

/* o número mora DENTRO do botão: assim ele anda junto, sem cálculo nenhum.
   E fica DENTRO do círculo mesmo — centrado, vazado em branco no verde, não
   pendurado embaixo. Pendurado ele brigava com o cartão de baixo e sumia
   quando a bolinha do cursor grudava. */
.grade-numero{position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(21px * var(--esc));font-weight:500;line-height:1;
  color:var(--papel);font-variant-numeric:tabular-nums;pointer-events:none}
/* Centrar a CAIXA do texto não centra o DESENHO do algarismo. Peso 500 é a
   Medium de verdade (600 virava negrito falso, deslocado). Com as métricas
   da Medium, numa linha de 13,02px a linha de base cai 5px abaixo do centro
   e a tinta dos algarismos (2 a 5, medidos um a um) fica 0,5 a 0,65px
   abaixo do centro da bolinha — este empurrão sobe isso. No eixo X o desvio
   é de no máximo 0,14px (o "4"), que não vale corrigir.
   (A chave de idioma tinha a mesma conta; hoje ela é um SVG.) */
.grade-numero{transform:translateY(-.046em)}

/* ------------------------------------------------ galeria em linhas -- */
/* Linhas alinhadas, com respiro: quem posiciona é o grid, e o grade.js só
   passa o número de colunas e o vão. align-items:start é o que deixa a folga
   embaixo das imagens mais baixas, em vez de esticá-las.
   NADA de `dense` aqui: o preenchimento normal já ocupa as células que
   sobram ao lado do painel, porque o cursor de posicionamento continua na
   mesma linha depois dele. Com `dense`, a LEGENDA voltava pra um buraco de
   uma linha anterior e se separava da imagem. */
/* overflow-anchor:none: quando o painel entra no COMEÇO da grade, ele empurra
   tudo pra baixo — e o navegador "ajuda" rolando junto, pra manter o que você
   estava vendo. Essa ajuda desfazia a subida até o topo. */
/* O arranjo em LINHAS é só do DESKTOP. No celular, com duas colunas, cada
   fila toma a altura da peça mais alta e sobra um vão enorme embaixo das
   baixas — o mural, onde cada peça cai na coluna mais curta, não deixa
   buraco nenhum.

   O grade.js usa a MESMA largura de corte (700px). Se mudar aqui, mude lá:
   com os dois discordando, o CSS montaria a grade enquanto o JS posicionaria
   à mão, e as peças se empilhariam umas sobre as outras. */
@media (max-width:699px){
  .feed-cosmos{--vao:4px}   /* metade do que era (9): thumbs quase coladas */
  /* e a margem lateral do feed é o MESMO vão das colunas: a borda da tela
     vale como mais uma coluna (o resto da página segue com os 15px) */
  .feed-cosmos{margin-left:var(--vao);margin-right:var(--vao)}
  :root{--legenda-h:16px}
}

@media (min-width:700px){
  .feed-linhas{overflow-anchor:none;display:grid;height:auto !important;
    grid-template-columns:repeat(var(--colunas,3),minmax(0,1fr));
    gap:var(--vao,26px);align-items:start}
  /* RELATIVE, nunca static: a imagem dentro do cartão é absoluta e precisa de um
     pai posicionado. Com static todas escapavam pra fora dos cartões. */
  .feed-linhas > .cartao{position:relative;top:auto;left:auto;overflow-anchor:none}

  /* --- o painel encaixado nas colunas ------------------------------------ */
  /* Ele ocupa um BLOCO de células — colunas e linhas — e as thumbs seguintes
     preenchem o que sobra ao lado e continuam embaixo. É o encaixe do mural
     denso, agora dentro da grade alinhada. */
  /* start, nunca stretch: esticado, a altura vinha da LINHA e não da peça — a
     imagem crescia até preencher e saía cortada. Assim a altura é a da imagem,
     e a peça encosta no topo da linha, junto com as thumbs do lado. */
  .feed-linhas > .painel-palco,
  .feed-linhas > .painel-lado{position:relative;top:auto;left:auto;
    width:auto !important;margin:0;align-self:start}
  .feed-linhas > .painel-palco{overflow:hidden}
  .feed-linhas > .painel-palco .painel-quadro{width:100%;max-width:100%;
    aspect-ratio:auto;overflow:hidden}
  .feed-linhas > .painel-palco .painel-trilho{height:auto}
  /* teto de altura pra imagem não virar parede numa tela baixa */
  .feed-linhas > .painel-palco .painel-quadro img,
  .feed-linhas > .painel-palco .painel-quadro video{width:100%;height:auto;
    max-height:78svh;object-fit:contain;margin-inline:auto}

  /* COM MÁSCARA quem manda é a proporção escolhida no montador: a moldura toma
     esse formato, preenche a largura inteira das colunas e o que sobra é
     cortado. Sem isto a peça entrava com `contain` e sobravam faixas brancas
     dos lados — a edição feita no sisteminha não aparecia. */
  .feed-linhas > .painel-palco .painel-quadro[data-mascara]{
    aspect-ratio:var(--ar-peca);height:auto}
  .feed-linhas > .painel-palco .painel-quadro[data-mascara] .painel-trilho,
  .feed-linhas > .painel-palco .painel-quadro[data-mascara] .painel-slide{height:100%}
  .feed-linhas > .painel-palco .painel-quadro[data-mascara] img,
  .feed-linhas > .painel-palco .painel-quadro[data-mascara] video{
    height:100%;max-height:none;object-fit:cover}
}

/* ================================ painel do projeto -- */
/* O projeto abre DENTRO do mural: ocupa as colunas menos uma, e as thumbs
   continuam ao lado e embaixo, clicáveis. A coluna de texto é estreita de
   propósito — é legenda, não página. */
/* As duas peças são elementos SOLTOS no mural, posicionados um a um pelo
   grade.js. Não são um bloco só de propósito: assim a coluna de texto tem a
   altura do texto e libera o espaço embaixo dela pras thumbs. */
/* scroll-margin: quando o painel se traz pra tela (scrollIntoView, no mural
   do celular), encosta com a margem do site, não colado na borda */
.painel-palco{background:var(--papel);overflow:hidden;line-height:0;
  scroll-margin-top:var(--pad-x)}
/* O quadro é a imagem: mesma largura, mesma altura. O limite de altura vira
   limite de LARGURA pela proporção da peça — assim a imagem encolhe inteira,
   sem faixa vazia dos lados, e as setas e o X ficam sempre sobre ela.
   Antes o limite era max-height com object-fit:contain: a caixa continuava
   larga, a foto ficava no meio, e os botões, presos na caixa, do lado de fora. */
/* Encostado na ESQUERDA, não centralizado: a borda esquerda da imagem é a
   mesma margem do grid, e ela alinha com as thumbs de baixo. Centralizado,
   sobrava um vão à esquerda que não batia com coluna nenhuma. */
/* cursor do sistema (a bolinha está desligada): a mãozinha diz que a imagem
   passa no clique; com uma peça só (data-solo) não há o que passar */
.painel-quadro{position:relative;line-height:0;margin-inline:0 auto;
  width:100%;max-width:calc(85svh * var(--ar-peca,1.5));cursor:pointer}
.painel-palco[data-solo] .painel-quadro{cursor:default}
.painel-quadro img,.painel-quadro video{display:block;width:100%;height:auto;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
/* --- a tira do carrossel ------------------------------------------------ */
/* Três peças lado a lado — anterior, atual, próxima — com a do meio à vista.
   É o que permite a imagem acompanhar o dedo em vez de trocar de estalo. */
.painel-trilho{display:flex;width:300%;transform:translateX(-33.3333%);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
  touch-action:pan-y}
.painel-trilho.arrastando,
.painel-trilho.quieto{transition:none}
.painel-slide{flex:0 0 33.3333%;width:33.3333%;line-height:0}
/* Com máscara, a moldura tem a proporção escolhida no editor e a imagem
   preenche — o que sobra é cortado, sempre pelo centro. Igual à página de
   projeto: lá também é a moldura que manda, não o arquivo. */
.painel-quadro[data-mascara]{aspect-ratio:var(--ar-peca);overflow:hidden}
.painel-quadro[data-mascara] .painel-trilho,
.painel-quadro[data-mascara] .painel-slide{height:100%}
.painel-quadro[data-mascara] img,
.painel-quadro[data-mascara] video{height:100%;object-fit:cover}

/* --- o + que revela a legenda (só no desktop) -------------------------- */
/* Logo abaixo do X, na mesma coluna: mesmo tamanho de bolinha, mesmo respiro
   entre as duas que o X tem da borda. */
/* Os dois botões perto um do outro. O ímã do cursor gruda no [data-ima] mais
   próximo, então mirar o centro de cada um continua sem ambiguidade — só o
   ponto exatamente no meio dos dois é indeciso. */
.painel-texto-abre{position:absolute;right:14px;
  top:calc(14px + 38.38px * var(--esc) + 10px);z-index:2}
@media (max-width:899px){ .painel-texto-abre{display:none} }
/* fechada, a legenda não ocupa lugar nenhum — a grade recalcula sem ela */
.feed-cosmos.painel-sem-texto > .painel-lado{display:none}

/* A coluna do popup é a MESMA da página de projeto — mesmos filetes, mesmo
   ritmo. Ler um projeto no popup ou na página tem que dar na mesma. */
.painel-lado{display:flex;flex-direction:column;min-width:0;
  color:var(--verde);font-size:15px;line-height:1.24}
.painel-nome{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0;font-size:22px;font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.05}
.painel-nome .pj-ano{font-size:.86em;flex:0 0 auto}
.painel-lado hr{border:0;color:inherit;
  border-top:1.5px solid currentColor;margin:.7em 0}
.painel-lado p{margin:0}
.painel-lado .pj-descricao{margin:0}
.painel-lado .pj-descricao p.salto{margin-top:.9em}
.painel-lado .pj-rotulo{text-transform:uppercase;margin:1.9em 0 0}
.painel-conta{margin-top:1.2em;font-size:14px;
  font-variant-numeric:tabular-nums}

/* as bolinhas moram por cima da imagem */
.painel-fechar{position:absolute;top:14px;right:14px;z-index:2}
/* o olho fica abaixo do + , na mesma coluna do X: três alvos empilhados.
   O passo (um diâmetro + 10px) vira uma medida só, porque em tela cheia a
   pilha encolhe e o olho precisa subir exatamente um passo. */
.painel-palco{--passo:calc(38.38px * var(--esc) + 10px)}
.painel-cheio{position:absolute;right:14px;
  top:calc(14px + var(--passo) * 2);z-index:2;
  transition:top .18s cubic-bezier(.2,.8,.3,1)}
@media (max-width:899px){ .painel-cheio{display:none} }

/* EM TELA CHEIA o + sai de cena. Ali a legenda está escondida por CSS, então
   o botão trocava de ícone e devolvia 213px de coluna invisível — mexia no
   tamanho da imagem e não mostrava nada. Sem ele, o olho sobe um passo e
   fecha a fila: dois botões colados, sem buraco no meio. */
body.painel-cheio .painel-texto-abre{display:none}
/* button. de novo: a classe painel-cheio serve ao body E ao botão */
body.painel-cheio button.painel-cheio{top:calc(14px + var(--passo))}

/* ---------------------------- o popup em TELA CHEIA -------------------- */
/* O olho do popup faz o que o da página de projeto faz: some tudo em volta e
   fica só a obra. Some a barra do topo, somem as thumbs do mural e some a
   legenda; o palco passa a ocupar a janela inteira.

   Os !important não são preguiça. O grade.js escreve left/top/width INLINE no
   palco a cada recálculo do mural (é ele quem reserva o retângulo do painel
   entre as thumbs), e estilo inline ganha de qualquer seletor. Sem eles, a
   tela cheia durava até o primeiro refazer() — que acontece na mesma hora,
   porque virarCheio() chama justamente isso. */
body.painel-cheio .topo{display:none}
body.painel-cheio .grade-controle{display:none}
body.painel-cheio .feed-cosmos > .cartao,
body.painel-cheio .feed-cosmos > .cartao-mudo,
body.painel-cheio .feed-cosmos > .painel-lado{visibility:hidden}
body.painel-cheio .feed-cosmos > .painel-palco{
  position:fixed !important;
  left:0 !important; top:0 !important;
  width:100vw !important; height:100svh !important;
  z-index:200;
  background:var(--papel);padding:var(--pad-x)}
/* O quadro tem que CABER na janela, não ser centrado por fora dela. Ele vem
   do mural com altura calculada pra lá (medi 878px numa janela que só tinha
   770 de útil) e, com máscara, ainda traz um aspect-ratio próprio — os dois
   precisam ceder aqui, senão a peça sai pela borda de cima.
   O palco também não vira flex: o carrossel por dentro é uma tira de três
   lâminas deslocada em translateX(-33,33%), e a conta dela sai da largura do
   quadro; virar flex desalinha a tira. */
body.painel-cheio .painel-quadro{
  width:100% !important; max-width:100% !important;
  height:calc(100svh - var(--pad-x) * 2) !important;
  aspect-ratio:auto !important;
  margin-inline:auto}
body.painel-cheio .painel-trilho,
body.painel-cheio .painel-slide{height:100%}
body.painel-cheio .painel-quadro img,
body.painel-cheio .painel-quadro video{
  width:100%;height:100%;max-height:none;
  object-fit:contain !important}
/* --- o popup no CELULAR: lightbox por cima da página ------------------ */
/* Abaixo de 700px o painel NÃO entra no mural. Ele vira uma camada fixa
   por cima da galeria — imagem em cima, texto embaixo, rolagem própria — e
   a página fica exatamente onde estava: fechar devolve pro mesmo lugar.
   Encaixado no mural, ele abria no lugar da thumb, e com o mural se
   remontando a cada imagem que chegava a pessoa tinha que sair procurando
   onde ele tinha ido parar. É o painel.js que decide (função movel()). */
.painel-movel{position:fixed;inset:0;z-index:200;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--papel);padding:var(--pad-x) var(--pad-x) calc(var(--pad-x) * 3)}
.painel-movel > .painel-palco,
.painel-movel > .painel-lado{position:relative;top:auto;left:auto;width:100% !important}
.painel-movel > .painel-lado{margin-top:var(--pad-x)}
/* A página atrás não rola — o dedo rola a camada. A trava é feita no
   painel.js (body em position:fixed, com top negativo igual à rolagem), e
   não com overflow:hidden: aqui o body tem overflow:auto propagado pro
   viewport, e mexer no overflow trocava quem rola — a posição da página
   ia pra zero na hora (medido) e fechar devolvia a pessoa pro topo. */
body.painel-movel{position:fixed;left:0;right:0;width:100%}

/* --- os pontinhos do carrossel ----------------------------------------- */
/* No PÉ da imagem, centrados nela. Brancos e chapados: as setas antigas eram
   bolinhas grandes no meio da arte e sujavam o trabalho, que é o que a página
   tem pra mostrar. Sem data-ima de propósito — são muitos alvos colados, e o
   ímã do cursor ficaria pulando de um pro outro. */
.painel-pontos{position:absolute;left:0;right:0;bottom:16px;z-index:2;
  display:flex;justify-content:center;align-items:center;gap:9px;line-height:0}
.painel-ponto{width:9px;height:9px;padding:0;border:0;border-radius:50%;
  cursor:pointer;background:#fff;opacity:.5;transition:opacity .15s ease}
.painel-ponto.aqui{opacity:1}
.painel-ponto:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
/* uma imagem só não é carrossel */
.painel-palco[data-solo] .painel-pontos{display:none}



/* ================================================== joguinho de bilhar -- */
/* Abre por cima de tudo quando você clica na bola 8 do menu. A mesa é a tela
   inteira menos a margem; as tabelas são barras azuis interrompidas nas seis
   caçapas — quatro cantos e o meio das duas laterais compridas. Tudo em px
   calculados no JS, porque a física precisa das mesmas medidas. */
/* --pano é o feltro e --barra é a tabela. Encaçapar o yin-yang troca os dois
   de lugar: o jogo inteiro vira do avesso com uma classe só. */
/* MESA BRANCA (19/09/2026): o pano é o papel do site e a tabela é uma LINHA
   na cor da tinta, na espessura do traço (--traco). As bolas são desenhos de
   linha, cinza, sem preenchimento além do papel; só a branca — o rostinho —
   é amarela com o desenho azul, pra saltar aos olhos. */
.jogo{--pano:var(--papel);--barra:var(--grafite);
  position:fixed;inset:0;z-index:300;background:var(--pano);
  opacity:0;pointer-events:none;transition:opacity .2s linear;
  touch-action:none;overflow:hidden}
.jogo.aberto{opacity:1;pointer-events:auto}
.jogo.invertido{--pano:var(--azul);--barra:var(--verde)}

.jogo-mesa{position:absolute;z-index:1}
/* o vídeo de fundo dentro do jogo: absoluto na caixa do jogo (a regra geral
   .fundo-video é fixed e z-index 0, que aqui vale igual: fica atrás da
   mesa, que é z-index 1). A opacidade é a mesma da EU. */
.jogo .jogo-fundo{position:absolute;inset:0;z-index:0;pointer-events:none}
/* as tabelas: quatro barras, cada uma interrompida no meio pela caçapa */
.jogo-tabela{position:absolute;background:var(--barra)}

.jogo-bola{position:absolute;left:0;top:0;will-change:transform;
  pointer-events:none}
.jogo-bola svg{display:block;width:100%;height:100%;overflow:visible}
/* No pano verde a bola numerada é verde de aro azul e número branco. O aro
   está declarado aqui de propósito: o traço vem como atributo no SVG, e
   atributo de apresentação perde pra folha de estilo — deixar no atributo
   funcionava por acaso, pelo valor de reserva. A branca é o rostinho, que
   continua amarelo e azul: é ela que tem que saltar aos olhos. */
/* O traço vem como ATRIBUTO no SVG, e atributo de apresentação perde pra
   folha de estilo — por isso o stroke daqui manda. Sem ele o anel ficava
   azul, que é o valor de reserva de quando a peça está fora do menu. */
/* TODAS AS BOLAS IGUAIS: mesmo amarelo, mesma tinta, mesmo contorno. Antes
   cada tipo tinha a sua paleta (numerada amarela, yin branco, M e carta de
   papel) e cada arte trazia a espessura de traço do arquivo original.

   A espessura precisa ser normalizada por ARTE, não por um número só: cada
   marca tem o seu viewBox (a numerada 165,37; o M 150,8; o rostinho 648,21;
   o yin 68,52) e todas são desenhadas no mesmo diâmetro na tela. Então o que
   iguala o traço na TELA é a mesma FRAÇÃO do viewBox — 11,5%, que é o
   19/165,37 da bola numerada, a referência. */
/* TODAS as bolas com miolo de papel, opaco (o .broca-a de cada arte é a
   forma cheia): com o vídeo passando atrás da mesa, forma vazada mostraria
   o vídeo por dentro */
.jogo-bola .broca-a{fill:var(--pano);stroke:var(--barra)}
.jogo-bola .broca-b{fill:var(--barra)}
.jogo-bola .broca-c{fill:none;stroke:var(--barra)}
/* a espessura vem do token do site, em pixels de tela: o non-scaling-stroke
   ignora o viewBox de cada arte E o giro/escala da bola — todas iguais ao
   relógio e aos botões */
.jogo-bola .broca-a,.jogo-bola .broca-c{stroke-width:var(--traco);vector-effect:non-scaling-stroke}
/* a branca é o rostinho: amarelo com o desenho azul */
.jogo-bola[data-tipo="branca"] .broca-a{fill:var(--amarelo);stroke:#001aff}
.jogo-bola[data-tipo="branca"] .broca-b{fill:#001aff}
.jogo-bola[data-tipo="branca"] .broca-c{stroke:#001aff}
/* a bola-relógio: aro e ponteiros iguais ao relógio da barra, miolo de papel */
.jogo-bola[data-tipo="relogio"] circle,
.jogo-bola[data-tipo="relogio"] line{stroke:var(--barra);fill:none;
  stroke-width:var(--traco);stroke-linecap:round;vector-effect:non-scaling-stroke}
.jogo-bola[data-tipo="relogio"] circle{fill:var(--pano)}
/* A CARTA fica de fora desta conta: o envelope dela é desenhado com
   PREENCHIMENTO, não com traço — o contorno é a própria geometria do
   arquivo. Igualar a espessura dela pede redesenhar a arte, não CSS. */

/* o taco: retângulo bem horizontal que vai enchendo de azul ao carregar */
.jogo-taco{position:absolute;left:0;top:0;transform-origin:0 50%;
  pointer-events:none;display:none}
.jogo-taco.mirando{display:block}
.jogo-taco .corpo{position:absolute;inset:0;background:var(--pano);
  border:var(--traco) solid var(--barra);box-sizing:border-box}
.jogo-taco .carga{position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--barra)}

/* no pano verde o X e o contorno acompanham a cor da tabela */
.jogo-sair{position:absolute;top:var(--pad-x);right:var(--pad-x);z-index:3;
  --ic-traco:var(--barra)}
/* o cursor fica como está: a mesa é branca, a bolinha continua na cor dela */


/* trava a página atrás do jogo sem deixar ela pular pro topo */
.trava-rolagem{overflow:hidden}

/* ====================================== a vitória do bilhar -- */
/* Limpou os números: o rostinho cresce até tomar a tela e vira o menu. Ele
   sai da mesa (z-index acima das tabelas) e o resto do jogo se apaga por
   baixo enquanto ele cresce. */
.jogo-bola.jogo-vitoria{z-index:4;transform-origin:50% 50%}
.jogo.vencendo .jogo-mesa,
.jogo.vencendo .jogo-taco,
.jogo.vencendo .jogo-sair{opacity:0;transition:opacity .5s linear;pointer-events:none}
.jogo-menu{position:absolute;inset:0;z-index:5;display:flex;
  align-items:center;justify-content:center;
  opacity:0;transition:opacity .55s ease}
.jogo-menu.dentro{opacity:1}
.jogo-menu .mm{width:100%;height:100%}
/* o menu da vitória é o MESMO da entrada: tinta azul e papel amarelo,
   inteiro na tela. Sem isto ele herdava o cinza do site e o tamanho da
   barra. */
/* (o seletor é pesado de propósito: precisa ganhar do body:not(.entrada)
   .mm do teste azul->cinza, lá embaixo) */
.jogo .jogo-menu .mm.mm{--mm-tinta:#001aff !important;--mm-tinta-atual:#001aff !important;
  --mm-papel:var(--amarelo) !important;--mm-papel-atual:var(--amarelo) !important}


@supports (width: round(1px, 1px)){ :root{--traco: round(calc(4px * var(--esc-base)), 1px)} }

/* ============================== o site do avesso (encaçapou o yin) -- */
/* Troca de TOKEN, não filtro de inversão: filtro viraria as imagens dos
   projetos junto, e é justamente elas que têm que ficar como são. Cada cor
   aqui é a oposta da de cima (255 menos cada canal), e o papel vira preto. */
html.site-avesso{
  --papel:   #000000;
  --grafite: #eeeeee;
  /* azul e amarelo TROCAM DE LUGAR — um vira o outro, não a cor oposta de
     cada um. É a inversão que se lê na tela: o que era azul fica amarelo. */
  --azul:    #ffff08;
  --amarelo: #001aff;
  --verde:   #a306ff;
  --verde-cursor: #a306ff;
}
/* o pano do jogo acompanha, senão a mesa fica de fora da brincadeira */
html.site-avesso .jogo{--pano:var(--verde);--barra:var(--azul)}



/* ====================================== tipo "hover" -- */
/* A apresentação É o movimento: o cartão não abre nada e não leva a lugar
   nenhum, só amplia a própria thumb enquanto o mouse está em cima. O corte
   fica no cartão (que já é overflow:hidden), então a imagem cresce POR DENTRO
   da moldura — o mural não se mexe e nenhuma vizinha sai do lugar. */
.cartao[data-hover-zoom] .cartao-midia{
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.cartao[data-hover-zoom]:hover .cartao-midia{transform:scale(1.12)}
/* em tela de toque não existe hover: lá a imagem fica parada, e tudo bem —
   o cartão nunca prometeu clique nenhum */
@media (hover:none){
  .cartao[data-hover-zoom]:hover .cartao-midia{transform:none}
}

/* ====================================== tipo "zoom" -- */
/* Visor de uma imagem só, por cima da galeria — pro projeto de peça única
   que não pede página nem carrossel. Fecha no clique, fora da imagem ou na
   própria, e no Esc (site.js). */
/* 110 e não 60: as marcas do menu são fixas em 101 e os botões da página de
   projeto em 102 — no 60 elas apareciam por cima da imagem ampliada. */
/* o visor abre sobre o PAPEL do site, liso — não é um pano escuro nem a
   galeria apagada por trás: é como se a página tivesse virado só a imagem */
.zoom-caixa{position:fixed;inset:0;z-index:110;display:flex;
  align-items:center;justify-content:center;padding:var(--pad-x);
  background:var(--papel);cursor:zoom-out;
  opacity:0;transition:opacity .18s linear}
.zoom-caixa.aberta{opacity:1}
.zoom-palco{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-height:0}
.zoom-caixa img,.zoom-caixa video{max-width:100%;max-height:100%;object-fit:contain;
  transform:scale(.97);transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.zoom-caixa.aberta img,.zoom-caixa.aberta video{transform:scale(1)}
/* com série: a imagem é o comando (clique passa), o pano é a saída */
.zoom-caixa.zoom-serie{cursor:default}
.zoom-caixa.zoom-serie img,.zoom-caixa.zoom-serie video{cursor:pointer;user-select:none}
/* o contador, discreto, no pé — o mesmo corpo da legenda dos cartões */
.zoom-caixa.zoom-serie::after{content:attr(data-conta);position:fixed;left:50%;
  bottom:calc(var(--pad-x) * 1.2);transform:translateX(-50%);
  font-size:clamp(9px,.95vw,11px);letter-spacing:.06em;color:var(--grafite);
  font-variant-numeric:tabular-nums;pointer-events:none}
/* subir o z-index não bastava: com 90% de preto por cima, as marcas ficavam
   fantasmas atrás do pano. Aqui elas somem de vez. */
body.zoom-aberto .topo{display:none}
/* mesmo canto, mesma medida e mesma escala do X da página de projeto */
.zoom-sair{position:fixed;z-index:2;
  --esc:calc(var(--esc-base) * 1.1);
  top:calc(var(--pad-x) * 2);right:calc(var(--pad-x) * 2)}

/* ============================================== FALA CMG (contato) -- */
/* A página é o cartão, sobre um campo azul inteiro. Duas peças e nada mais:
   o cartão no meio da TELA e a linha de contatos boiando no vão de baixo. */
/* TESTE: fundo BRANCO (a classe ainda se chama fala-azul, de quando era
   azul; se ficar, renomear). No branco o menu não precisa de override —
   fica como nas outras páginas. */
body.fala-azul{background:var(--papel)}
.fala{
  /* a MOEDA manda no tamanho (--cartao é o diâmetro dela). Três limites: um
     teto fixo, a largura que sobra na tela e a altura — este último garante
     que sempre reste vão embaixo pra linha de contatos morar. */
  --cartao: min(680px, calc(100vw - var(--pad-x) * 4), 70svh);

  min-height:calc(100svh - var(--topo-h));
  display:flex; align-items:center; justify-content:center;
  /* o respiro de baixo leva a altura da barra do topo: sem ele o cartão
     centraria no espaço ABAIXO da barra, e não no meio da tela. */
  padding:0 var(--pad-x) var(--topo-h);
}
.fala .c3d-palco{--larg:var(--cartao)}

/* --- os canais ----------------------------------------------------------
   Uma linha só, discreta, presa à JANELA e não ao conteúdo: ela começa onde
   o cartão termina (metade da tela mais meia altura de cartão) e vai até a
   borda de baixo. Centrada nesse vão — que é exatamente o que foi pedido. */
.fala-canais{
  position:fixed; left:0; right:0;
  top:calc(50% + var(--cartao) / 2);
  bottom:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--azul);
  font-size:max(11px, calc(var(--cartao) * .023));
  letter-spacing:.06em;
  text-transform:uppercase;
  pointer-events:none;      /* o vão inteiro não intercepta clique... */
}
.fala-canais a{
  pointer-events:auto;      /* ...só as palavras */
  text-decoration:none; color:inherit;
  transition:color .15s linear;
}
/* hover em amarelo, não em verde: o verde pode virar azul num teste de
   paleta (e já virou), e azul sobre o fundo azul da página é link sumido */
/* no branco o hover não pode ser amarelo no texto (sumiria): o amarelo vai
   pro FUNDO da palavra, que é o mesmo gesto do nome do estúdio no topo */
.fala-canais a:hover,
.fala-canais a:focus-visible{background:var(--amarelo)}

/* O risco entre as palavras. Mora dentro do link, mas não acompanha o hover
   (cor própria) e não recebe clique — senão a barrinha entre dois nomes
   acenderia um deles sem querer. */
.fala-canais a:not(:last-child)::after{
  content:"|";
  margin:0 .8em;
  color:var(--azul);
  pointer-events:none;
}

/* ================================================ TESTE: verde e preto -> azul -- */
/* BLOCO TEMPORÁRIO. Apagar daqui até o fim do arquivo desfaz o teste inteiro.

   Duas cores viram uma. O VERDE entra por três portas e o PRETO por uma:

   1. os tokens --verde e --verde-cursor (texto, aros, controle da grade);
   2. a tinta do MENU, que o menu.js escreve direto no elemento como estilo
      inline — daí o !important, único jeito de uma folha ganhar de inline.
      Só a tinta comum muda: a da seção ATUAL já é azul sobre amarelo;
   3. o traço dos ÍCONES, que trazem o verde embutido como reserva dentro do
      SVG (ver icones.js). Definir --ic-traco desarma essa reserva;
   4. o --grafite, que é o preto do texto corrido e das legendas.

   Não mexe nas máscaras de degradê que usam #000 — ali a cor é só alfa. */
:root{
  --verde:        #001aff;
  --verde-cursor: #001aff;
  --ic-traco:     #001aff;
  --grafite:      #001aff;
}
.mm{--mm-tinta:#001aff !important}

/* Os discos dos ícones (X, setas) ganham miolo amarelo. O relógio, o
   trilho da grade e a pílula de idioma NÃO: ficam vazados, só o contorno.
   Os botões de ESTADO — o olho (tela cheia) e o + (texto aberto), na página
   de projeto e no popup — são brancos parados e amarelos enquanto estão
   ligados. O desenho não muda (olho continua olho, + continua +): o amarelo
   é o "aceso". */
:root{--ic-fundo:var(--amarelo)}
.pj-texto-abre,button.painel-cheio,.pj-mais,.painel-texto-abre,.pj-som{--ic-fundo:var(--papel)}
.pj-som[aria-pressed="true"],
body.projeto-cheio .pj-texto-abre,
body.painel-cheio button.painel-cheio,
.pj-mais[aria-expanded="true"],
.painel-texto-abre[aria-expanded="true"]{--ic-fundo:var(--amarelo)}

/* ===== TESTE: azul -> cinza 50% ----------------------------------------- */
/* Em todo o site MENOS na entrada (o menu grandão) e na FALA CMG (a moeda),
   que ficam no azul. Por isso vai no body com as duas classes negadas, e não
   no :root: a variável desce pra tudo que está dentro da página. O menu
   gerado escreve a tinta dele inline (menu.js), daí o !important. */
body:not(.entrada):not(.fala-azul){
  --azul:#808080; --verde:#808080; --verde-cursor:#808080;
  --ic-traco:#808080; --grafite:#808080; --cor-cursor:#808080}
/* a marca ACESA (página atual e hover) fica amarela com contorno e miolo em
   AZUL — traço, olhos, letras, tudo; só as apagadas ficam cinza */
/* (as marcas da barra ficam cinza também na FALA CMG — só o menu grandão da
   entrada segue todo azul; o resto da página de contato continua azul) */
body:not(.entrada) .mm{
  --mm-tinta:#808080 !important; --mm-tinta-atual:#001aff !important}

/* ===== EU — vídeo de fundo a 60% ---------------------------------------- */
/* Opacidade 0,6 não atrapalha o autoplay — o problema (ver .fundo-video)
   era só o 0. O texto da EU é cinza, como o resto do site. */
.fundo-video{opacity:.6}
@media (max-width:699px){ .fundo-video{display:none} }   /* o JS também não cria o vídeo */

/* ===== TESTE: off-white indo pro creme, no site todo -------------------- */
/* Troca só o token --papel: fundo, palco do popup, lightbox do celular,
   FALA CMG e a entrada acompanham. As marcas do menu trazem o branco delas
   do menu.js gerado, daí o override; se ficar, isso vai pro gerador. Bem
   leve — #faf7f0 é quase branco, só puxando pro quente. */
:root{--papel:#faf7f0}
.topo .mm{--mm-papel:var(--papel) !important}

/* ============================ o site no escuro (encaçapou o yin) ------- */
/* O jogo.js põe a classe papel-preto no <html> e escreve --papel:#000 inline.
   Junto com o preto, o AZUL padrão (#001aff) vira um rosa vivíssimo — em
   todo lugar onde o azul está escrito na mão: marca acesa do menu, chave de
   idioma, rostinho do bilhar, menu grandão, cursor. O cinza do site fica
   cinza: só o que era azul muda. Os seletores triplos (.mm.mm.mm) são pra
   ganhar dos !important do teste azul->cinza acima. */
:root{--rosa-vivo:#ff1ad9}
html.papel-preto{--azul:var(--rosa-vivo);--cor-cursor:var(--rosa-vivo);
  --verde:var(--rosa-vivo);--verde-cursor:var(--rosa-vivo);--ic-traco:var(--rosa-vivo);
  --grafite:var(--rosa-vivo)}
html.papel-preto .mm.mm.mm{--mm-tinta-atual:var(--rosa-vivo) !important}
html.papel-preto body.entrada .mm.mm.mm,
html.papel-preto .jogo .jogo-menu .mm.mm.mm{--mm-tinta:var(--rosa-vivo) !important}
html.papel-preto .chave-casa:hover .ic-traco,
html.papel-preto .chave-casa.atual .ic-traco{stroke:var(--rosa-vivo)}
html.papel-preto .jogo-bola[data-tipo="branca"] .broca-a{stroke:var(--rosa-vivo)}
html.papel-preto .jogo-bola[data-tipo="branca"] .broca-b{fill:var(--rosa-vivo)}
html.papel-preto .jogo-bola[data-tipo="branca"] .broca-c{stroke:var(--rosa-vivo)}