.section-heading {
  text-align: center;
  font-family: var(--font-menu);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 32px);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 clamp(40px, 5vw, 72px);
}

/* --- efeito de revelar no scroll --- */
.reveal, .about-press {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* colunas do manifesto: entram dos lados e se juntam no centro, só quando
   a seção entra na tela pelo scroll (classe "in" no wrap, não em cada coluna) */
.manifesto-col {
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.19,1,.22,1), transform 1.1s cubic-bezier(.19,1,.22,1);
}
.manifesto-col:first-child { transform: translateX(-14vw); }
.manifesto-col:last-child { transform: translateX(14vw); transition-delay: .12s; }
.manifesto-col.in,
.about-manifesto-wrap.in .manifesto-col { opacity: 1; transform: translateX(0); }

/* quadrados de fundo do manifesto: aparecem junto com o texto, com leve atraso escalonado */
.manifesto-bg-block {
  opacity: 0;
  transform: scale(.88);
  transition: opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);
}
.manifesto-bg-block--a { transition-delay: .05s; }
.manifesto-bg-block--b { transition-delay: .15s; }
.manifesto-bg-block--c { transition-delay: .25s; }
.manifesto-bg-block--d { transition-delay: .35s; }
.manifesto-bg-block.in,
.about-manifesto-wrap.in .manifesto-bg-block { opacity: 0.3; transform: scale(1); }

/* --- hero --- */
.about-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}
.about-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.19,1,.22,1);
}
.about-hero-photo.is-visible { opacity: .85; }
.about-hero-photo img,
.about-hero-photo video {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
  transition: transform .6s cubic-bezier(.19,1,.22,1);
}
.about-hero-photo.is-held img { transform: scale(1.08); }

/* logo fixo: começa um pouco descolado do topo (posição do hero) e, ao
   rolar a página, sobe e gruda no topo (mesma posição usada nas outras
   páginas para o cabeçalho) */
.site-logo-fixed {
  position: fixed;
  left: 50%;
  top: clamp(60px, 8.5vh, 110px);
  transform: translateX(-50%);
  width: clamp(110px, 8.5vw, 165px);
  z-index: 150;
  transition: top .4s cubic-bezier(.19,1,.22,1);
  pointer-events: none;
}
.site-logo-fixed.is-docked {
  top: clamp(16px, 2.5vh, 28px);
  width: clamp(90px, 6.8vw, 130px);
}
.site-logo-fixed a { display: block; pointer-events: auto; }
.site-logo-fixed img { width: 100%; height: auto; display: block; }

.click-hold {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* sobre o vídeo do hero (não uma seção de fundo sólido) — mesmo
     tratamento do logo/colchete do hero da home (".hero-logo-mark"/
     ".hero-logo-bracket" em style.css, que também ficam sobre vídeo e
     mudam de cor com o tema): "--fg", não "--menu-bg" nem fixo em branco.
     ".speaker-icon" (SVG inline, fill="currentColor") e o anel de
     progresso (stroke, ver ".hold-progress-fill"/"-track" abaixo) herdam
     essa cor automaticamente */
  color: var(--fg);
  opacity: .85;
}
.click-hold:hover { opacity: 1; }
.click-hold.is-active { opacity: 1; }
/* seta indicando "role pra baixo" — só existe no layout mobile (ver
   .hero-scroll-hint na media query lá embaixo); escondida aqui por padrão
   pra nunca aparecer no desktop, mesmo que o elemento exista no HTML */
.hero-scroll-hint { display: none; }
/* anel de progresso ao redor do ícone de som — enche em 2s enquanto o
   botão fica pressionado (ver startHold/holdTick em about.js); solto antes
   de completar, esvazia de novo (setHoldProgress(0), sem `transition` aqui
   de propósito — o preenchimento já é animado quadro a quadro via JS
   (requestAnimationFrame), uma transition CSS por cima brigaria com isso) */
.hold-progress {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}
.hold-progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* começa no topo do círculo, não nos 3h */
}
.hold-progress-track {
  fill: none;
  stroke: rgba(var(--fg-rgb), .25);
  stroke-width: 2;
}
.hold-progress-fill {
  fill: none;
  stroke: var(--fg);
  stroke-width: 2;
  stroke-linecap: round;
  /* circunferência de um círculo r=17 (2×π×17 ≈ 106.81) — dasharray fixo,
     o dashoffset (0 a esse valor) é quem varia via JS pra "desenhar" o
     progresso */
  stroke-dasharray: 106.81;
  stroke-dashoffset: 106.81;
}
.speaker-icon {
  position: relative;
  width: 18px;
  height: 18px;
  transition: transform .2s ease;
}
/* pulso rápido no ícone assim que o áudio é ativado OU desativado —
   feedback de "completou" o hold de 2s, sem depender de mudar o texto do
   botão. Classe separada de "is-active" (que fica ligada enquanto o áudio
   estiver ativo) porque precisa disparar nas DUAS transições (ligar E
   desligar), não só quando ativa — ver toggleAudio() em about.js */
.click-hold.is-toggled .speaker-icon { animation: hold-complete-pulse .4s ease; }
@keyframes hold-complete-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* --- manifesto de texto --- */
.about-manifesto-wrap {
  position: relative;
  background: var(--menu-bg);
  /* herdado por todo o texto do poema (".manifesto-col p", sem "color"
     próprio) — combina com o fundo em qualquer tema */
  color: var(--menu-fg);
  overflow: hidden;
}
.manifesto-bg-block {
  position: absolute;
  /* cor de fundo enquanto a foto carrega — mesmo #20262d que era usado como
     placeholder antes de virarem fotos de verdade (ver Figma
     20260812-papaki-site-imagens, node 1:8) */
  background: #20262d;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* posições recalculadas a partir do Figma
   (20260812-papaki-site-imagens, node 12:2 — "Group 6"/mask groups),
   relativas ao frame de referência 1920×1080 */
.manifesto-bg-block--a { left: 0%;     width: 32.08%; top: 21.53%; height: 58.98%; }
.manifesto-bg-block--b { left: 34.53%; width: 32.08%; top: 34.26%; height: 31.39%; }
.manifesto-bg-block--c { left: 69.06%; width: 18.85%; top: 27.41%; height: 47.04%; }
.manifesto-bg-block--d { left: 90.36%; width: 18.85%; top: 12.04%; height: 76.02%; }

/* wrapper NOVO em volta de --a/--b, só usado pelo mobile (ver comentário no
   HTML) — "display:contents" no desktop faz ele não gerar nenhuma caixa
   própria, então as 2 imagens dentro continuam resolvendo
   "position:absolute" contra ".about-manifesto-wrap" (mais próximo
   ancestral "position:relative" de verdade) exatamente como se este
   wrapper não existisse — zero efeito no desktop. Só vira um container de
   verdade dentro da media query mobile lá embaixo. */
.manifesto-mobile-photos { display: contents; }

.about-manifesto {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 120px);
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(80px, 12vw, 160px) var(--edge);
  /* mesmo tamanho de fonte do poema (ver .manifesto-col p) — precisa estar
     aqui também pra "em" ter uma referência certa (ver margin-top da
     coluna da direita, mais abaixo) */
  font-size: clamp(14px, 1.146vw, 22px);
}
/* a coluna da direita começa na altura da 6ª linha da coluna da esquerda
   (6 linhas × line-height 1.8em = 10.8em) — mesmo espaçamento do Figma
   (node 12:2), onde as 2 colunas não começam alinhadas no topo */
.manifesto-col:last-child { margin-top: 10.8em; }
.manifesto-col p {
  margin: 0 0 1.8em;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.146vw, 22px);
  line-height: 1.8;
  text-align: right;
  opacity: .85;
}
.manifesto-col:first-child p { text-align: right; }
.manifesto-col:last-child p { text-align: left; }
.manifesto-signoff { font-weight: 700; opacity: 1 !important; }

/* --- festivals & awards: 2 quadrados simétricos ao fundo, texto centralizado --- */
.about-festivals {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(60px, 9vw, 120px) var(--edge);
  background: var(--menu-bg);
  /* herdado pelo heading ("Festivais e Prêmios") — os logos em si
     (".festivals-list img") são <img>, não seguem "color", continuam
     usando "filter:invert(1)" (ver about.css mais abaixo) */
  color: var(--menu-fg);
  overflow: hidden;
}
.festivals-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
}
.festivals-content .section-heading { margin-bottom: clamp(80px, 10vw, 140px); }
/* logos dos prêmios (era uma lista de texto) — várias linhas, uma
   "<ul>.festivals-list" por linha (ver FESTIVALS_ROWS/fillFestivalsList em
   about.js), CADA UMA com seu próprio número de colunas via
   "grid-template-columns" definido ali por JS (não mais uma classe fixa
   tipo "--top"/"--bottom") — assim cada linha divide a MESMA largura total
   do container pelo seu próprio número de itens, e todas terminam com a
   mesma largura de ponta a ponta (um grid único pra tudo faria linhas com
   menos itens ficarem visivelmente mais curtas). Cada célula centraliza o
   logo numa mesma "altura de linha", apesar das proporções bem diferentes
   entre eles. */
.festivals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  column-gap: clamp(24px, 3.5vw, 48px);
  opacity: .9;
}
/* espaço entre linhas — qualquer linha depois da primeira, não importa
   quantas existam */
.festivals-list + .festivals-list { margin-top: clamp(40px, 5.5vw, 72px); }
.festivals-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(48px, 5.5vw, 76px);
}
.festivals-list li > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
}
/* alguns prêmios (Clio, PPA) vêm em mais de uma peça (ícone + palavra, por
   exemplo, extraídas separadas do Figma) — empilhadas em coluna ou em linha
   dentro da mesma "altura de linha" dos logos de peça única, cada peça com
   a altura proporcional ao tamanho que tinha no design original */
.festival-logo-pieces {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.festival-logo-pieces.stack-column { flex-direction: column; gap: 8%; }
.festival-logo-pieces.stack-row { flex-direction: row; gap: 3%; }
.festival-logo-pieces img { display: block; width: auto; }

:root[data-theme="light"] .festivals-list img { filter: invert(1); }

/* sem override de grid pro mobile aqui de propósito: conferido contra o
   Figma mobile (node 14057:3969, "awards") — a divisão 4 colunas em cima /
   3 embaixo dos 7 logos originais é EXATAMENTE a mesma no mobile, só os
   logos ficam menores (via clamp() já existente); um "chute" de uma tarefa
   anterior tinha forçado 2 colunas aqui, sem essa referência ainda —
   removido. As linhas novas (ver FESTIVALS_ROWS em about.js) usam o mesmo
   número de colunas em qualquer largura de tela, pelo mesmo motivo. */

/* --- vídeo "esteira" em full screen, no lugar de onde antes ficava a
   galeria de estatísticas com troca automática a cada 3s (ver
   PROJECT_NOTES.md — pedido do usuário pra substituir o slide inteiro pelo
   vídeo, não sobrepor os dois) --- */
.about-reel {
  position: relative;
  height: 100vh;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.about-reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- press: mural em tela cheia, 2 faixas em loop infinito --- */
.about-press {
  position: relative;
  width: 100%;
  padding: clamp(60px, 9vw, 120px) 0;
  overflow: hidden;
}
.about-press .section-heading { padding: 0 var(--edge); }

.press-row {
  width: 100%;
  overflow: hidden;
  margin: clamp(14px, 2vw, 28px) 0;
  will-change: transform;
}
.press-row-track {
  display: flex;
  width: max-content;
  gap: clamp(10px, 1.2vw, 20px);
  animation: marquee-left 60s linear infinite;
}
.press-row--reverse .press-row-track {
  animation-name: marquee-right;
  /* mesma largura/duração-base da faixa de cima, mas moto em direção oposta
     "parece" mais rápido pro olho — um pouco mais lento aqui compensa */
  animation-duration: 68s;
}
.press-box {
  flex: 0 0 auto;
  width: clamp(140px, 16vw, 240px);
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: block;
}
.press-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.75);
  transition: filter .3s ease, transform .5s cubic-bezier(.19,1,.22,1);
}
.press-box:hover img { filter: brightness(.95); transform: scale(1.06); }
.press-box-info {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.press-box-title {
  font-family: var(--font-menu);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.press-box-producer {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

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

@media (prefers-reduced-motion: reduce) {
  .press-row-track { animation: none; }
}

@media (max-width: 720px) {
  /* logo fixo: no Figma mobile (node 14057:4098, "header") fica sempre
     encostado no canto superior esquerdo (0,0) — sem o efeito de "começa
     mais abaixo/maior no hero e sobe ao rolar" do desktop (".site-logo-
     fixed"/".is-docked" logo abaixo, valores base). Mesmo tratamento
     "colado" já usado no cabeçalho fixo das outras páginas mobile
     (contact.html/work.html/services.html). ".is-docked" continua
     existindo (about.js só alterna a classe no scroll) e ainda ganha o
     fundo/padding pra legibilidade (ver regra logo abaixo) — só a
     posição/tamanho param de mudar entre os 2 estados. */
  .site-logo-fixed,
  .site-logo-fixed.is-docked {
    left: 0;
    top: 0;
    transform: none;
    width: clamp(110px, 33.27vw, 148px);
  }

  .about-manifesto { grid-template-columns: 1fr; }
  /* padding horizontal do poema: era só "var(--edge)" (16px/~4.3% da tela
     — pensado pro resto do site, onde o conteúdo já é mais compacto),
     ficou "colado" na borda direita nas linhas mais compridas (usuário
     reportou com print de referência). Medido via pixel-scan em cima do
     print: a linha mais comprida de todo o poema chega a ~10-11% de
     margem de cada lado — bem mais folgado. */
  .about-manifesto { padding-left: 22%; padding-right: 10%; }
  .manifesto-col:first-child p, .manifesto-col:last-child p { text-align: left; }
  /* o deslocamento de 6 linhas da coluna da direita (ver .manifesto-col:
     last-child acima) só faz sentido no layout lado a lado — empilhado
     (1 coluna só), viraria um vão gigante entre as 2 estrofes */
  .manifesto-col:last-child { margin-top: 0; }
  /* blocos de foto decorativos do manifesto: posicionados em % relativas
     ao frame desktop (1920×1080, ver comentário lá em cima) — no layout
     empilhado de 1 coluna essas posições não fazem sentido nenhum (foto
     picada/espalhada meio aleatória). --c/--d escondidos de vez; --a/--b
     reaproveitados como um par de fotos "de verdade" logo abaixo (ver
     .manifesto-mobile-photos mais abaixo, print de referência do
     usuário). */
  .manifesto-bg-block--c, .manifesto-bg-block--d { display: none; }
  /* bracket (Figma, node 14057:3967 "tela-aberta" — é um SVG de verdade no
     Figma, não só um border: um retângulo de 312×143 com um recorte por
     dentro, aberto embaixo, que ocupa 100% da LARGURA DO FRAME do
     manifesto) em volta só do 1º parágrafo do 2º bloco de texto ("Vamos
     muito além do cinema...novos negócios", id "manifesto3").
     Virou um "::before" (pedido do usuário) em vez de border direto no
     parágrafo — porque o texto do poema tem um recuo ASSIMÉTRICO de
     verdade (medido no Figma: ~61px à esquerda contra só ~3px à direita
     dentro do frame de 312px, daí o "padding-left:22%" bem maior que o
     "padding-right:10%" do ".about-manifesto" acima), mas a BRACKET no
     Figma ignora esse recuo do texto e ocupa o frame inteiro, mais larga
     que o texto — com border direto no parágrafo isso é impossível (a
     borda nunca pode ser mais larga que o próprio elemento). O "::before"
     absoluto escapa do próprio box de "#manifesto3" com "left" negativo
     (-12vw = 10vw de margem alvo, igual à do resto da página, menos os
     22vw do recuo do parágrafo em si) — "right:0" já bate certo (o texto
     já termina perto dos 10vw da direita, sem precisar escapar por ali) */
  #manifesto3 {
    position: relative;
    padding: 48px 40px 28px 0;
  }
  #manifesto3::before {
    content: "";
    position: absolute;
    left: -12vw;
    right: 0;
    top: 0;
    bottom: 0;
    border: 18px solid var(--menu-fg);
    border-bottom: none;
    pointer-events: none;
  }

  /* par de fotos "de verdade" entre o poema e Festivals & Awards (pedido
     do usuário, print de referência) — vira um container real só aqui
     (ver ".manifesto-mobile-photos{display:contents}" na regra base, que
     mantém o desktop intocado) */
  .manifesto-mobile-photos {
    display: flex;
    gap: 12px;
    padding: 0 var(--edge) clamp(40px, 9vw, 64px);
  }
  .manifesto-mobile-photos .manifesto-bg-block {
    position: static;
    flex: 1 1 0;
    width: auto;
    height: clamp(130px, 36vw, 200px);
    object-fit: cover;
    opacity: 1;
    border-radius: 0;
    /* a regra base (".manifesto-bg-block", fora da media query) põe um
       fundo placeholder mais escuro (#20262d, pensado pro desktop — cor
       visível só enquanto a foto de verdade carrega). Aqui as fotos
       carregam normalmente, mas qualquer fresta de sub-pixel no
       arredondamento acabava deixando esse placeholder mais escuro
       "vazar" como uma linha fina embaixo das fotos (reportado pelo
       usuário como "uma borda" entre o poema e o festivals) — igualado à
       cor de fundo real da seção (".about-manifesto-wrap"/".about-
       festivals", ambas "var(--menu-bg)") pra essa fresta, se existir,
       ficar invisível. "border-radius" removido também (era só 2px, sem
       necessidade real, e simplifica o clipping) */
    background: var(--menu-bg);
  }
  /* vence a opacidade .3 que ".about-manifesto-wrap.in .manifesto-bg-block"
     aplicaria (pensada pro efeito "atrás do texto" do desktop) — aqui as
     fotos são conteúdo em primeiro plano, precisam ficar 100% visíveis */
  .about-manifesto-wrap.in .manifesto-mobile-photos .manifesto-bg-block { opacity: 1; }

  /* usuário pediu pra manter o MESMO logo "pelado" (sem fundo) de sempre,
     mesmo depois de grudar no topo ao rolar — o backdrop escuro
     (".is-docked") que existia aqui foi removido de propósito; sem regra
     nenhuma aqui, ".is-docked" (que about.js continua alternando no
     scroll) não muda mais a aparência visual no mobile, só a posição/
     tamanho (ver bloco ".site-logo-fixed,.site-logo-fixed.is-docked" lá
     em cima, que já unifica os 2 estados) */

  /* botão de áudio do hero: no Figma mobile vira um círculo grande
     centralizado no meio da tela (era uma pílula perto do rodapé do hero
     no desktop) — ~93px de diâmetro num frame de 393px (93/393=23.7vw),
     igual ao ícone "play" do node 14057:4098. Continua a MESMA interação
     de segurar 2s pra ativar o áudio (about.js não muda nada, só alterna
     classes) — só reposicionado/redimensionado; o texto "Click and hold"
     some (Figma só mostra o ícone dentro do círculo), o aria-label do
     botão já cobre acessibilidade. Mantido o ícone de alto-falante em vez
     de trocar pro triângulo de "play" do Figma — trocar o ícone mudaria o
     que ele comunica (a ação real é ativar SOM, não dar play no vídeo, que
     já toca sozinho) sem trazer nenhum ganho visual que valha esse risco. */
  .click-hold {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: clamp(72px, 23.7vw, 93px);
    height: clamp(72px, 23.7vw, 93px);
    justify-content: center;
    gap: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
  }
  .click-hold > span:first-child { display: none; }

  /* seta de "role pra baixo" (ver comentário/CSS base acima) — posição
     tirada do Figma (node 14057:4098, ícone "close" perto do rodapé do
     hero: centralizado, ~2.4% acima do fim da tela) */
  .hero-scroll-hint {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 2.5%;
    transform: translateX(-50%);
    z-index: 5;
    color: var(--fg);
    opacity: .8;
    animation: hero-scroll-hint-bounce 1.8s ease-in-out infinite;
  }

  /* vídeo "esteira": no mobile, sem cortar (pedido explícito do usuário) —
     em vez de preencher 100vh com object-fit:cover (que cropa as bordas
     dependendo da proporção da tela x do vídeo), vira um bloco normal de
     largura 100% com altura automática, mostrando o vídeo inteiro. */
  .about-reel { height: auto; }
  .about-reel-video {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* press: só 1 faixa de marquee no mobile (pedido do usuário) — a 2ª
     faixa (sentido contrário, ".press-row--reverse") some de vez */
  .press-row--reverse { display: none; }
  /* fundo cinza (pedido do usuário) — a mesma cor do INÍCIO do degradê do
     rodapé (".mobile-footer", "var(--menu-bg)" 0%→"var(--bg)" 100%),
     pra fazer uma transição visual mais suave até o rodapé mais escuro
     logo depois */
  /* só o heading ("PRESS") herda — ".press-box-title"/"-producer" têm
     "color" próprio (ficam brancos sempre, de propósito: são legenda sobre
     foto, com um gradiente escuro por trás só pra isso — precisam de
     contraste contra a FOTO, não contra o tema do site, mesma lógica de
     ".press-box img{filter:brightness(.75)}" logo abaixo, que também não
     muda com o tema) */
  .about-press { background: var(--menu-bg); color: var(--menu-fg); }

  /* festivals & awards: sem "min-height:100vh" no mobile (pedido do
     usuário) — no desktop isso centraliza o conteúdo numa seção do
     tamanho da tela toda; no mobile a seção passa a ter só a altura que
     o próprio conteúdo (heading + 2 linhas de logos) precisa, via
     padding (já existente na regra base) */
  .about-festivals { min-height: 0; }
}

@keyframes hero-scroll-hint-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}