/* ══════════════════════════════════════════════════════════════════════════
   .ais — site provisório da produtora
   ══════════════════════════════════════════════════════════════════════════
   Os tokens, a tipografia, a receita do logo, a faixa do topo, o menu lateral
   e os componentes foram COPIADOS do design system, e não reescritos a partir
   da regra em texto: design-system/design-system-ais-e-ais-lab-ref.html.
   Reimplementar de memória é como a peça sai parecida em vez de idêntica.

   O acento é o ÂMBAR, e isso não é escolha de gosto: o sistema define âmbar
   para produção e azul para software. Esta é a produtora.

   O que é DAQUI e não existe no design system: a grade de vídeos com capa e
   player sob demanda (`.vid`), e os fundos em vídeo (`.fundo-video`). O resto
   é o sistema aplicado.

   Arquivo separado, e não CSS embutido no HTML, porque isto é SITE e não
   documento — a regra do arquivo único vale só para peça que se manda por
   e-mail e abre com duplo-clique. */

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── TOKENS ─── */
:root {
  --preto:      #0B0B0C;
  --off-white:  #EDEFE8;
  --ambar:      #FBD24E;
  --azul:       #63BEFF;
  --acento:     var(--ambar);
  --grafite:    #1A1A1D;
  --cinza:      #6E6E73;
  --linha:      #D5D8CE;

  --font-titulo: 'Funnel Display', 'Instrument Sans', ui-sans-serif, sans-serif;
  --font-texto:  'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:   'Space Mono', ui-monospace, monospace;

  --space-1: 8px;   --space-2: 16px;  --space-3: 24px;  --space-4: 32px;
  --space-5: 48px;  --space-6: 64px;  --space-7: 96px;  --space-8: 128px;

  --nav-h: 92px;
  --largura: 1100px;

  --fundo:      var(--off-white);
  --fundo-topo: var(--off-white);
  --superficie: #FFFFFF;
  --tinta:      var(--preto);
}
:root[data-tema="escuro"] {
  --fundo:      #0B0B0C;
  --fundo-topo: #0B0B0C;
  --superficie: #141417;
  --tinta:      var(--off-white);
  --linha:      #26262A;
  --cinza:      #8B8B91;
}

html { overflow-x: hidden; overflow-x: clip; scroll-behavior: auto; }
body {
  font-family: var(--font-texto);
  background: var(--fundo); color: var(--tinta);
  font-size: 16px; line-height: 1.6;
  overflow-x: hidden; overflow-x: clip;
}
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--acento); }
::selection { background: var(--acento); color: var(--preto); }

img { max-width: 100%; display: block; }

/* ─── TIPOGRAFIA ─── */
h1 { font-family: var(--font-titulo); font-size: clamp(44px, 6vw, 96px); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
h2 { font-family: var(--font-titulo); font-size: clamp(30px, 3.5vw, 56px); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; }
h3 { font-family: var(--font-titulo); font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; letter-spacing: -.02em; }
p  { font-size: 17px; line-height: 1.7; color: var(--cinza); }
strong { font-weight: 600; color: var(--tinta); }

/* MINÚSCULO, não caixa alta: a marca se escreve ".ais", nunca ".AIS", e o
   eyebrow precisa poder carregar o nome sem ser desmentido pelo CSS.
   Vale para todos os eyebrows, para não ficar um de cada jeito (11/09). */
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  text-transform: lowercase; letter-spacing: .12em; color: var(--cinza);
  display: block; margin-bottom: var(--space-3);
}
.lead { font-size: 21px; line-height: 1.6; color: var(--cinza); max-width: 74ch; }

/* ─── MARCA ───────────────────────────────────────────────────────────────
   O ponto é FORMA, não caractere: um bloco desenhado em CSS. Por isso não
   herda peso nem tracking, e não vira bolinha em fonte nenhuma.
   As medidas em `em` são as da trava 1 do design system, já convertidas em
   proporção — aqui não existe a bancada que as recalcula em pixel, e a
   diferença é menor que um pixel no corpo em que o logo aparece. */
.marca {
  font-family: var(--font-titulo); font-weight: 600; letter-spacing: -.03em;
  line-height: 1; color: currentColor; white-space: nowrap;
}
.marca::before {
  content: ''; display: inline-block; vertical-align: baseline;
  width: .1252em; height: .1252em;
  background: var(--acento);
  margin-right: .10em;
}

/* ─── FAIXA FIXA DO TOPO ─────────────────────────────────────────────────
   `backdrop-filter` está proibido de propósito: em elemento fixo ele trava a
   renderização no Chromium do Android — a página borra e aparecem faixas em
   branco. Fundo sólido resolve e não custa nada. */
#siteTop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) calc(var(--space-4) + 140px) 0 var(--space-4);
  background: var(--fundo-topo); backdrop-filter: none;
  border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; justify-content: space-between;
}
#siteTop .topo-marca { font-size: 24px; cursor: pointer; text-decoration: none; color: inherit; }
#siteTop .topo-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cinza);
}

/* ─── MENU DE LINHA (desktop) ─────────────────────────────────────────────
   Os cinco links na própria faixa, no lugar do texto "produtora de vídeo".
   Só existe em tela larga; abaixo de 1024px some e o hambúrguer assume.
   Sublinhado em âmbar no hover e no link da seção atual — a mesma linha
   que o e-mail do contato usa. */
#siteTop .topo-nav { display: none; gap: var(--space-4); }
#siteTop .topo-nav a {
  font-family: var(--font-texto); font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  color: var(--tinta); text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent; transition: border-color .15s, color .15s;
}
#siteTop .topo-nav a:hover, #siteTop .topo-nav a.atual { border-bottom-color: var(--acento); }
@media (min-width: 1024px) {
  #siteTop .topo-nav { display: flex; }
  #siteTop .topo-meta { display: none; }
  /* sem hambúrguer, a faixa só precisa reservar o botão de tema */
  #siteTop { padding-right: calc(var(--space-4) + 60px); }
  body #hamburger { display: none; } /* "body" só para vencer a regra base abaixo, que vem depois no arquivo */
  body #btnTema { right: var(--space-4); }
}

/* ─── HAMBÚRGUER E BOTÃO DE TEMA ─── */
#hamburger, #btnTema {
  position: fixed; top: calc(24px + env(safe-area-inset-top, 0px));
  z-index: 100; width: 44px; height: 44px; border: none; padding: 0; cursor: pointer;
}
#hamburger {
  right: var(--space-4); background: var(--acento);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
#hamburger span { display: block; width: 20px; height: 2px; background: var(--preto); transition: transform .3s ease, opacity .2s; }
#hamburger.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger.aberto span:nth-child(2) { opacity: 0; }
#hamburger.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#btnTema {
  right: calc(var(--space-4) + 56px);
  background: transparent; border: 1px solid var(--linha); color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
}
#btnTema:hover { border-color: var(--acento); }
/* Com o menu aberto o botão de tema some: ele fica acima do painel (para o X
   continuar clicável) e, sobre o fundo âmbar, restava só a borda fantasma
   ao lado do X — visto no celular em 12/09. */
#btnTema:has(~ #navOverlay.aberto) { opacity: 0; pointer-events: none; }
/* O QUADRADO, não a bolinha: o ponto da marca é quadrado, e o botão de tema
   repete a forma. O quadrado mostra o tema EM QUE SE ESTÁ, não o destino:
   o quadrado é ÂMBAR nos dois temas, sem borda — exatamente o ponto da
   marca. Fechado assim em 11/09 pelo fundador, depois de três voltas. */
#btnTema::before { content: ''; width: 12px; height: 12px; background: var(--acento); }

/* ─── MENU LATERAL ────────────────────────────────────────────────────────
   Entra pelo lado de onde foi chamado — o hambúrguer está no canto direito,
   então o painel vem da direita e volta para lá. Painel, e não cortina de
   tela cheia: o documento continua visível atrás e quem navega não perde a
   referência de onde estava. */
#navOverlay {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; background: var(--acento);
  width: min(420px, 86vw);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: var(--space-7) var(--space-5); gap: 2px;
  transform: translateX(100%); transition: transform .38s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
#navOverlay.aberto { transform: translateX(0); pointer-events: auto; }
#navOverlay a {
  font-family: var(--font-texto); font-size: clamp(20px, 2.2vw, 28px); font-weight: 600;
  letter-spacing: -.03em; color: var(--preto); text-decoration: none; line-height: 1.5;
}
#navOverlay a:hover { opacity: .55; }
/* A cortina atrás do painel. Invisível de propósito (o documento continua à
   vista), mas cobre a tela inteira: qualquer clique fora do menu cai nela e
   fecha o menu. Fica abaixo do painel e acima do resto. */
#navFundo { position: fixed; inset: 0; z-index: 94; background: transparent; cursor: default; }
#navFundo[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #navOverlay { transition: none; } }

/* ─── PLAYER SOBREPOSTO ───────────────────────────────────────────────────
   A caixa é 16:9 e cresce até o que couber: 92% da largura OU o que a altura
   permitir (90vh menos a barra), o que apertar primeiro. Numa tela larga e
   baixa é a altura que manda; no celular em pé é a largura. A cortina é
   quase opaca para o vídeo não brigar com a página atrás. */
#player { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
#player[hidden] { display: none; }
#player .player-fundo { position: absolute; inset: 0; background: rgba(11,11,12,.92); }
#player .player-caixa {
  position: relative; z-index: 1;
  width: min(92vw, calc((90vh - 44px) * 16 / 9));
  background: var(--preto); border: 1px solid rgba(237,239,232,.14);
}
#player .player-barra {
  display: flex; align-items: center; gap: var(--space-1); height: 44px; padding: 0 0 0 var(--space-2);
  color: var(--off-white);
}
#player .player-titulo {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(237,239,232,.6);
}
#player .player-barra button {
  width: 44px; height: 44px; border: none; padding: 0; cursor: pointer;
  background: transparent; color: var(--off-white);
  display: flex; align-items: center; justify-content: center;
}
#player .player-barra button:hover { background: rgba(237,239,232,.1); }
#player .player-fechar { font-size: 26px; line-height: 1; }
#player .player-fechar:hover { background: var(--acento) !important; color: var(--preto); }
/* tela cheia: um quadrado vazado com os quatro cantos — desenhado, sem ícone redondo */
#player .player-cheia::before {
  content: ''; width: 14px; height: 14px; border: 2px solid currentColor;
}
#player .player-tela { position: relative; aspect-ratio: 16 / 9; background: #000; }
#player .player-tela video, #player .player-tela iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000;
}
body.player-aberto { overflow: hidden; }
@media (max-width: 480px) { #player { padding: var(--space-1); } #player .player-caixa { width: 100%; } }

/* ─── SEÇÕES ─── */
section { padding: var(--space-8) var(--space-7); }
section.claro { max-width: calc(var(--largura) + var(--space-7) * 2); margin: 0 auto; }
.dark { background: var(--preto); color: var(--off-white); padding: var(--space-8) 0; }
.dark .inner { max-width: var(--largura); margin: 0 auto; padding: 0 var(--space-7); }
.dark p { color: rgba(237,239,232,.62); }
.dark .eyebrow { color: rgba(237,239,232,.45); }
.dark { --superficie: rgba(237,239,232,.05); --linha: rgba(237,239,232,.14); --tinta: var(--off-white); --cinza: #9DA0A6; }
.campo { background: var(--acento); color: var(--preto); padding: var(--space-8) 0; }
.campo .inner { max-width: var(--largura); margin: 0 auto; padding: 0 var(--space-7); }
.campo p { color: rgba(11,11,12,.72); }
.campo .eyebrow { color: rgba(11,11,12,.55); }
/* Duas seções claras seguidas (Pelo mundo → Filme arte) não tinham divisa:
   mesmo fundo, e a peça do primeiro plano parecia mudar de seção sem motivo.
   A linha é a mesma do .dv, na largura do conteúdo (11/09). */
section.claro { position: relative; }
section.claro + section.claro::before {
  content: ''; position: absolute; top: 0; left: var(--space-7); right: var(--space-7);
  height: 1px; background: var(--linha);
}
@media (max-width: 1024px) { section.claro + section.claro::before { left: var(--space-5); right: var(--space-5); } }
@media (max-width: 768px)  { section.claro + section.claro::before { left: var(--space-4); right: var(--space-4); } }
.sec-head { margin-bottom: var(--space-6); }
.sec-head h2 { margin-bottom: var(--space-3); }

/* ─── FUNDO EM VÍDEO ──────────────────────────────────────────────────────
   O vídeo é DECORAÇÃO: entra atrás do conteúdo, sem som, em loop, e o texto
   por cima tem de continuar legível — daí a cortina escura por cima dele.

   No celular ele NÃO CARREGA. O `src` chega por JavaScript, e só em tela
   larga: 13 MB de vídeo de fundo no 4G de quem está na rua é conta de dados
   do visitante gasta em enfeite. Lá, o pôster em WebP (~140 KB) faz o mesmo
   trabalho e ninguém percebe a diferença. */
.fundo-video { position: relative; overflow: hidden; }
.fundo-video > video,
.fundo-video > .fundo-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.fundo-video > .cortina {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,12,.78) 0%, rgba(11,11,12,.62) 50%, rgba(11,11,12,.86) 100%);
}
.fundo-video > .inner, .fundo-video > .capa-conteudo { position: relative; z-index: 2; }
/* o rodapé da capa vive fora do bloco de conteúdo, então precisa subir a
   camada por conta própria — senão fica atrás da cortina e some */
#capa > .capa-rodape { z-index: 2; }

/* ─── CAPA ─── */
#capa {
  min-height: 100svh; max-width: none;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  /* A margem lateral aqui é estreita de propósito, e menor que a das outras
     seções: a arte da capa é de ponta a ponta, e um respiro de 96px de cada
     lado encolheria justamente o que faz ela funcionar. */
  text-align: center; padding: calc(var(--nav-h) + var(--space-4)) var(--space-4) var(--space-6);
  background: var(--preto); color: var(--off-white);
}
/* AS TRÊS LINHAS — a réplica da capa do site antigo.
   `9.2vw` é o que faz o bloco acompanhar a largura da tela em vez de ter um
   corpo fixo: a arte original ocupa a tela de ponta a ponta, e é disso que
   ela vive. O teto de 132px impede que num monitor largo as letras fiquem
   maiores que a própria tela. */
#capa .capa-titulo {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-titulo); font-weight: 800;
  /* O CORPO É CALCULADO PARA A LINHA MAIS LONGA — "IMAGEM.AIS", dez
     caracteres — encostar nas bordas. É disso que a arte original vive: o
     texto ocupando a tela de ponta a ponta, não um título centralizado com ar
     dos dois lados. A conta: dez caracteres em caixa alta nesta fonte medem
     cerca de 6em, então 1em ≈ 13,5vw põe a linha perto da borda sem encostar.
     As outras duas ficam mais curtas naturalmente, como no original.

     O `min()` com `vh` é o que impede o problema oposto, e ele é o mais
     traiçoeiro: numa tela baixa e larga — notebook em 16:9, que é a maioria —
     a conta pela largura devolve um corpo alto demais, as três linhas passam
     da altura da janela e a capa nasce com barra de rolagem. Prendendo a
     escala aos DOIS eixos, manda o que estiver mais apertado.

     REDUZIDO EM 2026-09-11 de 13,5vw para 11vw (e 20vh para 17vh, na mesma
     proporção), a pedido do fundador ao ver a capa montada: 'ficou muito bom,
     só diminuir um pouco'. A linha mais longa deixa de quase encostar na
     borda e ganha uma margem de respiro dos dois lados — o texto continua
     dominando a tela, mas sem parecer que não coube. */
  font-size: clamp(32px, min(9.5vw, 15vh), 200px);  /* ajuste fino 11/09: 11vw -> 9.5vw, segundo pedido do fundador */
  line-height: .92; letter-spacing: -.03em;
  color: var(--acento);
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
  max-width: none;
}
/* A TARJA. Fundo preto chapado com o texto vazado em off-white, mono e bem
   espaçado — o contraponto de peso às três linhas. `display:inline-block`
   para a tarja terminar onde o texto termina, e não atravessar a tela. */
#capa .capa-tarja {
  display: inline-block;
  background: var(--preto); color: var(--off-white);
  font-family: var(--font-mono); font-size: clamp(11px, 1.5vw, 16px);
  font-weight: 700; text-transform: uppercase; letter-spacing: .22em;
  padding: 12px clamp(16px, 3vw, 34px);
  margin: 0;
}
#capa .capa-rodape {
  position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(237,239,232,.45); white-space: nowrap;
}

/* ─── COMPONENTES ─── */
.grid { display: grid; gap: var(--space-3); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--superficie); border: 1px solid var(--linha); padding: var(--space-4); }
.card h3 { margin-bottom: var(--space-1); }
.card p { font-size: 15px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-texto); font-size: 15px; font-weight: 600;
  padding: 14px 28px; border: 1px solid transparent; cursor: pointer;
  background: var(--acento); color: var(--preto); text-decoration: none;
  transition: transform .18s ease;
}
/* O HOVER É DESLOCAMENTO, NÃO COR: sobe 3px e volta, em todo botão. Trocar
   a cor no hover sempre dá errado num dos dois temas; o movimento funciona
   nos dois. É o mesmo comportamento do Qura, a pedido do fundador (11/09). */
.btn:hover { transform: translateY(-3px); }
.btn-sec { background: transparent; border-color: var(--linha); color: var(--tinta); }
.dark .btn-sec { border-color: rgba(255,255,255,.35); color: var(--off-white); }
/* O BOTÃO AZUL: preto chapado com borda no azul da .aislab, texto off-white.
   Pedido do fundador em 11/09 para os botões secundários sobre vídeo
   ("quebrar um pouco o amarelo"). Preto, e não vazado, porque vazado
   depende do vídeo que estiver atrás. Registro: o design system diz que
   âmbar e azul não dividem a mesma peça; aqui o azul entra só como borda,
   por decisão dele — e fica anotado como exceção, não como regra nova. */
/* terceira volta (11/09): fundo off-white — o mesmo das seções claras — com
   texto preto. Azul sobre off-white não passa de 2:1 de contraste, por isso
   o texto ficou preto; o off-white sozinho já quebra o amarelo. */
/* Sem borda nenhuma: a faixa azul é sombra interna, não borda — borda de
   8px encontrando a de 1px fazia um bisel no canto, que ele viu. */
.btn-azul { background: var(--off-white); color: var(--preto); border: 0; padding: 15px 29px 15px 37px; box-shadow: inset 8px 0 0 var(--azul); }
/* quarta volta: a faixinha azul na esquerda é o que ancora o azul sem
   texto, fundo nem borda inteira — o teste que sobrou de pé */

.lista { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.lista li { display: flex; gap: var(--space-2); font-size: 16px; color: var(--cinza); line-height: 1.55; }
.lista li::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--acento); margin-top: .5em; }
.dark .lista li { color: rgba(237,239,232,.66); }

.chip {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 10px; background: var(--grafite); color: var(--off-white);
}
.chip-acento { background: var(--acento); color: var(--preto); }
.dv { height: 1px; background: var(--linha); margin: var(--space-6) 0; }

/* ─── GRADE DE VÍDEOS ─────────────────────────────────────────────────────
   O card é a capa + o título. O player do YouTube só existe depois do
   clique — antes disso não há iframe nenhum no documento.

   `aspect-ratio` em vez de altura fixa: a moldura acompanha a largura da
   coluna em qualquer tela, e o 16:9 nunca deforma. Sem isso, o card salta de
   altura no instante em que a imagem carrega. */
.vids { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }
.vid { display: flex; flex-direction: column; gap: var(--space-2); }
.vid-tela {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--grafite); border: 1px solid var(--linha);
  cursor: pointer; padding: 0; width: 100%; display: block;
}
.vid-tela img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s; }
.vid-tela:hover img { transform: scale(1.04); opacity: .82; }
.vid-tela iframe,
.vid-tela video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

/* O selo de demonstração fica no canto oposto ao da duração, para os dois não
   brigarem pelo mesmo espaço. Ele existe para que ninguém confunda o vídeo de
   teste com trabalho entregue. */
.vid-selo-demo {
  position: absolute; left: var(--space-1); top: var(--space-1);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--off-white); color: var(--preto); padding: 4px 8px;
}

/* O PLAY é um quadrado com um triângulo dentro — não um círculo. O sistema
   não tem canto redondo em lugar nenhum, e o botão de play não é exceção. */
.vid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; background: var(--acento);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease;
}
.vid-tela:hover .vid-play { transform: translate(-50%, -50%) scale(1.09); }
.vid-play::before {
  content: ''; width: 0; height: 0;
  border-left: 17px solid var(--preto);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  margin-left: 4px;
}
.vid-tempo {
  position: absolute; right: var(--space-1); bottom: var(--space-1);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  background: var(--preto); color: var(--off-white); padding: 4px 8px;
}
/* Card sem vídeo no YouTube ainda: capa apagada, selo no lugar do play, e
   sem cursor de clique — porque não há o que clicar. */
.vid-tela.sem-video { cursor: default; }
.vid-tela.sem-video img { opacity: .38; }
.vid-tela.sem-video:hover img { transform: none; opacity: .38; }
.vid-breve {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--acento); color: var(--preto); padding: 8px 14px; white-space: nowrap;
}
.vid h3 { line-height: 1.25; }
/* a descrição encosta mais no título do que o resto do card: os dois são
   uma coisa só (pedido do fundador em 11/09 — "junta um pouquinho") */
.vid p { font-size: 14px; line-height: 1.5; margin-top: -10px; }

/* ─── CONTATO ─── */
.contato-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: start; }
.contato-item { margin-bottom: var(--space-4); }
.contato-item .rot, .rodape-col .rot {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--cinza);
  display: block; margin-bottom: 6px;
}
.contato-item a { color: inherit; text-decoration: none; } /* sem sublinhado, a pedido do fundador em 11/09 */
.contato-item a:hover { color: var(--acento); }
.acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); margin-bottom: var(--space-5); }
/* O "Chamar no WhatsApp" ocupa a mesma largura do formulário acima (nome,
   número + botão): as três linhas fecham um retângulo — pedido em 12/09. */
#contato .acoes { max-width: 442px; margin-top: var(--space-1); }
#contato .acoes #btnZap { flex: 1 1 auto; justify-content: center; }

/* "Deixe o seu WhatsApp": campo + botão numa linha; a chamada em cima. */
.deixe-zap label { display: block; font-size: 17px; line-height: 1.5; color: var(--off-white); margin-bottom: var(--space-2); max-width: 46ch; }
.deixe-zap-linha { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.deixe-zap #campoNome { display: block; width: 100%; max-width: 442px; margin-bottom: var(--space-1); }
.deixe-zap input {
  flex: 1 1 220px; min-width: 0; height: 54px; padding: 0 var(--space-2);
  font-family: var(--font-texto); font-size: 16px; color: var(--off-white);
  background: rgba(237,239,232,.06); border: 1px solid rgba(237,239,232,.25); border-radius: 0;
  outline: none;
}
.deixe-zap input::placeholder { color: rgba(237,239,232,.35); }
.deixe-zap input:focus { border-color: var(--acento); }
.deixe-zap input.erro { border-color: #E5484D; }
.deixe-zap .btn { height: 54px; }

/* o e-mail com o botão de copiar ao lado */
.copiavel { display: inline-flex; align-items: center; gap: 10px; }
.btn-copiar {
  position: relative; width: 28px; height: 28px; border: 1px solid rgba(237,239,232,.3);
  background: transparent; color: var(--off-white); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s;
}
.btn-copiar:hover { border-color: var(--acento); color: var(--acento); }
.btn-copiar .copiado {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--acento); color: var(--preto); padding: 3px 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.btn-copiar .copiado.on { opacity: 1; }

/* ─── RODAPÉ ─── */
footer { background: var(--preto); color: rgba(237,239,232,.6); padding: var(--space-7) var(--space-7) var(--space-4); border-top: 1px solid rgba(237,239,232,.1); }
footer .inner { max-width: var(--largura); margin: 0 auto; }
.rodape-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr .8fr; gap: var(--space-5); align-items: start; }
.rodape-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rodape-col .rot { color: rgba(237,239,232,.4); margin-bottom: 4px; }
.rodape-col p { font-size: 14px; line-height: 1.6; color: rgba(237,239,232,.55); margin-top: 10px; }
.rodape-col a { color: rgba(237,239,232,.8); text-decoration: none; font-size: 15px; line-height: 1.7; transition: color .15s; }
.rodape-col a:hover { color: var(--acento); }
.rodape-nav { display: flex; flex-direction: column; }
.rodape-end { font-size: 14px; line-height: 1.6; color: rgba(237,239,232,.5); margin-top: 6px; }
footer .marca { font-size: 22px; color: var(--off-white); }
/* "footer" na frente para vencer o "footer .inner" acima, que zera a margem */
footer .rodape-fim { margin-top: var(--space-6); padding-top: var(--space-3); } /* sem a linha: parecia parede da peça (11/09) */
footer small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: lowercase; color: rgba(237,239,232,.4); } /* minúsculo: carrega ".ais" */
/* Ícones em off-white — a cor do texto do rodapé, e não a azul do link. */
.social { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.social a { display: inline-flex; align-items: center; gap: 10px; color: var(--off-white) !important; opacity: .85; transition: opacity .2s; }
.social a:hover { opacity: 1; color: var(--acento) !important; }
.social svg { flex: none; }

/* ─── BOTÃO TOPO ─── */
#btnTopo {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 80;
  width: 44px; height: 44px; border: none; cursor: pointer;
  background: var(--acento); color: var(--preto); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
#btnTopo.on { opacity: 1; pointer-events: auto; }

/* ─── RESPONSIVO ──────────────────────────────────────────────────────────
   Três degraus, e cada um resolve um problema diferente:
   1024px  — a grade de três vídeos aperta antes de o menu apertar;
   768px   — a faixa do topo perde o meta e a capa reencaixa;
   480px   — tudo vira coluna única. */
@media (max-width: 1024px) {
  .vids { grid-template-columns: repeat(2, 1fr); }
  .contato-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  section { padding: var(--space-7) var(--space-5); }
  .dark .inner, .campo .inner { padding: 0 var(--space-5); }
}
@media (max-width: 768px) {
  section { padding: var(--space-6) var(--space-4); }
  .dark .inner, .campo .inner { padding: 0 var(--space-4); }
  #capa { padding: calc(var(--nav-h) + var(--space-5) + env(safe-area-inset-top,0px)) var(--space-4) var(--space-6); }
  #siteTop .topo-meta { display: none; }
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .lead { font-size: 18px; }
  footer { padding: var(--space-6) var(--space-4) var(--space-3); }
  .rodape-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
}
@media (max-width: 480px) {
  .vids { grid-template-columns: 1fr; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  #capa .capa-meta { gap: var(--space-2); flex-direction: column; }
  .vid-play { width: 52px; height: 52px; }
  .rodape-grid { grid-template-columns: 1fr; }
}

/* ─── ENTRADA AO ROLAR ────────────────────────────────────────────────────
   A classe `pre-anim` só é aplicada pelo JavaScript. Escrita direto no CSS,
   ela esconderia a seção para sempre em quem tem o JavaScript bloqueado — e
   o site seria uma página em branco por causa de um enfeite. */
.pre-anim { opacity: 0; transform: translateY(24px); }
.anim .sec-head, .anim .card, .anim .vid, .anim .lista, .anim .dv, .anim .grid > * {
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1);
}
.visivel { opacity: 1; transform: none; }

/* ─── MOVIMENTO ACESSÍVEL ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ─── HOVER ÚNICO: o deslocamento de 3px nos botões EXPRESSIVOS ───────
   Os miúdos (copiar, os do player) ficam parados: o deslocamento é para
   botão que se vê, não para ícone de 28px — palavra do fundador em 11/09. */
#btnTema, #hamburger, #btnTopo { transition: transform .18s ease; }
#btnTema:hover, #hamburger:hover, #btnTopo:hover { transform: translateY(-3px); }
#btnTema:hover { border-color: var(--linha); }
.btn-copiar:hover { border-color: rgba(237,239,232,.3); color: var(--off-white); }
#player .player-barra button:hover { background: transparent; }
#player .player-fechar:hover { background: transparent !important; color: var(--off-white); }

/* O "Me chamem" está colado no campo: subir 3px desalinharia a linha. Ele
   desloca para a DIREITA, para longe do campo. */
.deixe-zap .btn:hover { transform: translateX(3px); }

/* ─── O QUADRADO QUE PASSA (hover dos cards) ──────────────────────────────
   Pedido do fundador em 11/09: no card, em vez de subir, um quadrado azul
   entra da esquerda para a direita e para ao lado do chip; ao tirar o
   cursor, continua para a direita e some. Ele nasce na borda direita do
   chip — nunca passa por cima dele. Três estados, trocados pelo site.js:
   `.q-pre` (posição de largada, sem transição), `.q-on` (parado ao lado),
   `.q-sai` (indo embora). */
.card { position: relative; }
.card::after {
  /* PARA NA BORDA DIREITA DO CARD, à mesma distância que o chip tem da
     esquerda (o padding do card) — o par que ele desenhou. Mesma altura do
     chip (11px × 1.6 de entrelinha + 5px de cada lado). Nasce a meio
     caminho, nunca colado no chip, e some seguindo para a direita. */
  --pc: var(--tinta);
  content: ''; position: absolute; top: var(--space-4); right: var(--space-4);
  height: calc(11px * 1.6 + 10px); aspect-ratio: 1 / 1; background: var(--pc);
  opacity: 0; transform: translateX(-12px); /* o deslocamento curto de antes; só o ponto de parada mudou */
  transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
  pointer-events: none;
}
.card.q-pre::after { transition: none; opacity: 0; transform: translateX(-12px); }
.card.q-on::after  { opacity: 1; transform: translateX(0); }
.card.q-sai::after { opacity: 0; transform: translateX(18px); }

/* As variações do módulo 2×2 (5.3), escritas uma vez para o card e para o
   primeiro plano; a cor vem da variável --pc de quem usa. conic-gradient:
   0° é o topo, horário — TR 0–90, BR 90–180, BL 180–270, TL 270–360. */
.card[data-ico="diagonal"]::after { background: conic-gradient(transparent 0 90deg, var(--pc) 90deg 180deg, transparent 180deg 270deg, var(--pc) 270deg 360deg); }
.card[data-ico="contra"]::after { background: conic-gradient(var(--pc) 0 90deg, transparent 90deg 180deg, var(--pc) 180deg 270deg, transparent 270deg 360deg); }
.card[data-ico="tres"]::after { background: conic-gradient(var(--pc) 0 90deg, transparent 90deg 180deg, var(--pc) 180deg 360deg); }
.card[data-ico="superior"]::after { background: conic-gradient(var(--pc) 0 90deg, transparent 90deg 270deg, var(--pc) 270deg 360deg); }
.card[data-ico="inferior"]::after { background: conic-gradient(transparent 0 90deg, var(--pc) 90deg 270deg, transparent 270deg 360deg); }
.card[data-ico="esquerda"]::after { background: conic-gradient(transparent 0 180deg, var(--pc) 180deg 360deg); }
.card[data-ico="direita"]::after { background: conic-gradient(var(--pc) 0 180deg, transparent 180deg 360deg); }

/* ─── PRIMEIRO PLANO ──────────────────────────────────────────────────────
   A camada cobre o documento inteiro (o body é o referencial) e fica acima
   das seções e abaixo da faixa do topo, dos menus e do player. Cada peça é
   um módulo 2×2 sólido em off-white, desfocado como quem está perto demais
   da lente. O deslocamento vem do site.js: rolagem × profundidade (a peça
   sobe mais rápido que a página) mais um pouco de mouse. Sem clique: a
   camada é só visual. No celular some — não há mouse, e a tela é estreita
   demais para uma forma de 400px passar sem tapar texto. */
body { position: relative; }
/* Sem z-index na camada (ficou do teste com blend; não atrapalha): o z-index
   vai em cada peça.
   */
#primeiro-plano { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pp {
  /* AS CORES SÃO AS DA MARCA, SEM CONTA DE INVERSÃO. O site.js pinta a peça
     faixa a faixa, pela seção que está atrás de cada pedaço dela:
     sobre seção clara → azul da Lab; sobre seção escura → âmbar (peça
     nascida no escuro) ou o complementar do azul, #9C4100 (peça nascida no
     claro, que ali "inverte"). O difference saiu de vez: o inverso do
     âmbar nunca seria o azul da marca. */
  position: absolute; z-index: 60; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  /* difference: o vídeo e a imagem aparecem por dentro da peça. A cor de
     cada faixa é escolhida no site.js já contando com isso. */
  mix-blend-mode: difference;
  filter: none; /* sem desfoque (11/09: testou 7, 14, e ficou em zero) */
  will-change: transform;
}
/* o miolo carrega a forma (máscara) e a cor; o pai só desloca e desfoca */
.pp > b { position: absolute; inset: 0; display: block; background: var(--azul); }
/* No primeiro plano a forma é MÁSCARA, não fundo: o fundo da peça é o
   gradiente de cores que o site.js monta por seção. */
.pp[data-ico="diagonal"] { -webkit-mask: conic-gradient(transparent 0 90deg, #000 90deg 180deg, transparent 180deg 270deg, #000 270deg 360deg); mask: conic-gradient(transparent 0 90deg, #000 90deg 180deg, transparent 180deg 270deg, #000 270deg 360deg); }
.pp[data-ico="contra"] { -webkit-mask: conic-gradient(#000 0 90deg, transparent 90deg 180deg, #000 180deg 270deg, transparent 270deg 360deg); mask: conic-gradient(#000 0 90deg, transparent 90deg 180deg, #000 180deg 270deg, transparent 270deg 360deg); }
.pp[data-ico="tres"] { -webkit-mask: conic-gradient(#000 0 90deg, transparent 90deg 180deg, #000 180deg 360deg); mask: conic-gradient(#000 0 90deg, transparent 90deg 180deg, #000 180deg 360deg); }
.pp[data-ico="superior"] { -webkit-mask: conic-gradient(#000 0 90deg, transparent 90deg 270deg, #000 270deg 360deg); mask: conic-gradient(#000 0 90deg, transparent 90deg 270deg, #000 270deg 360deg); }
.pp[data-ico="inferior"] { -webkit-mask: conic-gradient(transparent 0 90deg, #000 90deg 270deg, transparent 270deg 360deg); mask: conic-gradient(transparent 0 90deg, #000 90deg 270deg, transparent 270deg 360deg); }
.pp[data-ico="esquerda"] { -webkit-mask: conic-gradient(transparent 0 180deg, #000 180deg 360deg); mask: conic-gradient(transparent 0 180deg, #000 180deg 360deg); }
.pp[data-ico="direita"] { -webkit-mask: conic-gradient(#000 0 180deg, transparent 180deg 360deg); mask: conic-gradient(#000 0 180deg, transparent 180deg 360deg); }
@media (max-width: 1024px) { #primeiro-plano { display: none; } }
@media (prefers-reduced-motion: reduce) { .pp { transform: none !important; } }

/* Retorno do "me chamem": só existe quando tem texto. */
.deixe-zap-retorno { margin: 10px 0 0; font-size: 14px; opacity: .8; }
.deixe-zap-retorno:empty { display: none; }

/* Celular: botão que ganhou linha própria vai de fora a fora — "Falar com a
   gente" / "Ver os trabalhos" e o "Me chamem" (que no mobile já quebra para
   baixo do número). Pedido em 12/09, olhando o site no celular. */
@media (max-width: 640px) {
  .acoes .btn { flex: 1 1 100%; justify-content: center; }
  .deixe-zap-linha input, .deixe-zap-linha .btn { flex: 1 1 100%; }
  .deixe-zap-linha .btn { justify-content: center; }
}