/* ============================================================
   GALERIA — o desenho das páginas de portfólio (18/09/2026)

   Clone de flyingstudio.com.br/imagens-3d vestido com o DS da casa.
   A nota completa -- o que veio de lá, o que é nosso, os números
   medidos -- está no topo do imagens.html.

   Um arquivo só para OITO páginas, que têm o mesmo desenho e mudam
   só o conteúdo:
     imagens.html               \  uma por card da servicos.html
     filmes.html                 | (Imagens 3D, Filmes, Tour 360º,
     tour-360.html               | Aplicativos); imagens.html com 37
     aplicativos.html           /  renders, as outras com 15 placeholders
     filme-de-lancamento.html   \
     fly-through.html            | uma por card do baralho de filmes
     filme-de-obra.html          | do index.html (#videos), ligadas
     teaser-de-stand.html       /  pelo "Assistir" de cada card
   O comportamento mora em galeria.js. Os tokens vêm do tokens.css,
   carregado antes deste. A navbar (barra flutuante, 18/09/2026) está
   em navbar.css + navbar.js, carregados por todas estas páginas.
   Desde 18/09 mais duas páginas usam este arquivo SEM a galeria --
   contato.html e sobre-nos.html --, só pelo topo com foto, pelo botão,
   pelo fecho e pelo rodapé; a navbar e o tema delas também vêm de
   navbar.css + navbar.js.
   ============================================================ */

/* ============================================================
   RÉGUA, TEMPO E RESET
   ============================================================ */
:root {
  /* Cópia literal do :root do index.html. Estes tokens não estão em
     tokens.css; se mudarem lá, mudam aqui. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --col-imagem: 1440px;

  /* ALTURA DA FILEIRA. Lá é 440px cravado de 800 a 1440 -- a 800 isso
     deixa fotos de 150px de largura em pé ao lado de outras de 440 de
     altura. Aqui ela acompanha a tela: 446px a 1440 (o número de lá,
     arredondado para cima pela conta), 397 a 1280, 317 a 1024, e para
     de encolher em 280. */
  --fileira: clamp(280px, 31vw, 460px);
  --vao: 12px;                         /* lá: gap-3 */
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, p, figure { margin: 0; }

.regua {
  width: min(var(--col-imagem), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

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

/* O conteúdo passa na frente das linhas do fundo. */
.pagina, .rodape { position: relative; z-index: 1; }

/* ============================================================
   AS LINHAS DO FUNDO

   Lá é um <canvas> fixo de tela inteira, atrás de tudo, com fios finos
   que fluem devagar -- quase todos apagados, dois ou três acesos na cor
   de destaque. Aqui os fios são terracota: a cor da marca como traço,
   que é como o design-system.md §2.4 diz que ela aparece ("quase sempre
   um filete"). Só se veem onde a página não tem fundo próprio -- a foto
   do topo, as fotos da grade e o rodapé cobrem.
   ============================================================ */
.linhas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   SELETOR DE TEMA — o mesmo controle da politica-de-privacidade.html
   ============================================================ */
.tema {
  position: fixed;
  top: clamp(16px, 3vh, 28px);
  right: clamp(16px, 3vw, 28px);
  z-index: 50;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.tema:hover { background: hsl(var(--orange)); color: hsl(var(--tinta)); }
.tema svg { display: block; }
.tema .lua { display: none; }
[data-tema="dark"] .tema .sol { display: none; }
[data-tema="dark"] .tema .lua { display: block; }

/* A cópia literal da NAVBAR do index.html que ficava aqui saiu em
   18/09/2026: a barra virou flutuante e mora em navbar.css, um arquivo
   só para as onze páginas. */

/* ============================================================
   TOPO — a faixa de foto com o título

   Lá: altura clamp(240px, 34vh, 360px), foto em cover com o centro a
   40% da altura, véu preto de baixo para cima (.82 -> .45 -> .05 ->
   nada, nos pontos 0/38/72/100%), trilha e título no pé, e a foto entra
   encolhendo de 1,16 para 1. Base arredondada (clamp 24-44px).

   Aqui: a mesma altura mais 20px, porque a navbar da casa é uma barra
   de 64px de ponta a ponta, não a pílula flutuante de lá, e come o topo
   da faixa. O véu é TINTA, não preto (o preto puro saiu do sistema, e a
   exceção dele vale só para a abertura do index). Base reta.
   ============================================================ */
.topo {
  position: relative;
  height: clamp(260px, 36vh, 380px);
  overflow: hidden;
  background: hsl(var(--tinta));
}
.topo__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  animation: topo-foto 1.8s var(--ease) both;
}
@keyframes topo-foto { from { transform: scale(1.12); } to { transform: none; } }

/* O véu de lá (.82 / .45 / .05 nos pontos 0 / 38 / 72%) não bastou aqui:
   a trilha fica a ~45% da altura, onde ele já está em .4, e nos dois
   topos com céu claro (o pôr do sol do imagens.html, os prédios do
   filme de lançamento) o terracota claro dela sumia no print. Mais
   denso e mais alto, mesma forma. */
.topo__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    hsl(var(--tinta) / .88) 0%,
    hsl(var(--tinta) / .62) 45%,
    hsl(var(--tinta) / .12) 80%,
    transparent 100%);
}
/* CELULAR: o mesmo remédio, mais uma vez (20/09/2026).
   O véu já tinha sido adensado uma vez, pelo motivo escrito acima. No
   celular ele volta a não segurar: a faixa tem 304px de altura (contra
   380 no desktop), a trilha fica a 33% do pé dela -- onde o véu está em
   .69 -- e por baixo passa foto clara. MEDIDO a 390, no pior pixel de
   cada faixa, contra o degrau ativo da trilha (--terracota-light,
   #E7926A, 11px: precisa de 4,5:1): sobre-nos 2,80:1 com 80% da faixa
   reprovando, mapas-3d 2,71, tour-360 2,99, aplicativos 3,58, filmes e
   contato 3,73, imagens 3,15. O creme do título passava folgado em
   todas (7,2 a 10,1) -- quem sumia era o terracota claro.
   Aqui o véu fecha embaixo e abre mais cedo em cima: na altura da
   trilha ele vai a ~.86, e a tinta é quase preta (#1A1512), então o
   pior pixel branco vira ~54 de cinza. Acima de 75% da faixa o céu da
   foto continua como estava. */
@media (max-width: 767px) {
  .topo__veu {
    background: linear-gradient(to top,
      hsl(var(--tinta) / .96) 0%,
      hsl(var(--tinta) / .84) 40%,
      hsl(var(--tinta) / .34) 75%,
      transparent 100%);
  }
}

.topo__miolo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding-bottom: clamp(26px, 4vh, 44px);
}

/* Trilha: lá é "Home › Serviço" em 13-16px, o último degrau na cor de
   destaque. Aqui é a letra pequena da casa (Cinzel 11px, tracking de
   rótulo) e o destaque é o terracota claro, que é o que passa sobre o
   véu escuro. */
.trilha {
  display: flex;
  align-items: center;
  gap: .9em;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: hsl(var(--creme-base));
  animation: subir .9s var(--ease) .2s both;
}
.trilha a {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
.trilha a:hover, .trilha a:focus-visible { opacity: .7; outline: none; }
/* Celular: o degrau da trilha tem 19px de altura e o dedo pede 44 -- o
   padding cresce só o alvo e a margem negativa devolve a caixa, então a
   trilha não empurra o título (20/09/2026, como no rodapé). */
@media (max-width: 767px) {
  .trilha a { padding-block: 12px; margin-block: -12px; }
}
.trilha [aria-current],
.trilha__atual { color: hsl(var(--terracota-light)); }   /* o degrau de destaque: "Serviços" */

/* Título: a letra do site inteiro (Cinzel caixa alta, .1em). O corpo
   é o de lá, clamp(2rem, 4.8vw, 3.6rem), com 4px a mais no teto porque
   a Cinzel em caixa alta tem olho menor que a sans de lá. */
.topo__titulo {
  margin-top: clamp(.5rem, 1.5vh, 1rem);
  font-family: var(--font-accent);
  font-size: clamp(32px, 4.8vw, 62px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(var(--creme-base));
  animation: subir .9s var(--ease) .3s both;
}
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ============================================================
   FILTRO

   Lá: as abas e a nota dividem uma linha que quebra; a aba ativa tem
   34px e peso 600 na cor de destaque, as outras 22px apagadas, e a troca
   anima o próprio corpo da letra (.5s). No celular 24 / 17px.
   Aqui a letra das abas é a Garamond -- é a família dos títulos e dos
   números grandes, a que aguenta 34px com elegância. Ativa em
   --terracota-texto (o terracota que passa em texto sobre o creme),
   apagadas em --grey.
   ============================================================ */
.galeria { padding-block: clamp(1.75rem, 4vh, 3rem) clamp(56px, 9vh, 88px); }

.filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: clamp(16px, 2.2vw, 30px);
  row-gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid hsl(var(--border));
}
.filtro__abas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(16px, 2.2vw, 30px);
  row-gap: 8px;
}
.filtro__aba {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: hsl(var(--grey));
  transition: font-size .5s var(--ease), color .3s ease;
}
.filtro__aba:hover { color: hsl(var(--foreground)); }
.filtro__aba[aria-pressed="true"],
.filtro__aba[aria-current="page"] {
  font-size: 34px;
  color: hsl(var(--terracota-texto));
  cursor: default;
}
/* Nas páginas dos filmes as abas são LINKS entre as quatro páginas, não
   filtro: mesma letra, e a aba ativa é a página em que se está. */
a.filtro__aba { text-decoration: none; }
.filtro__aba:focus-visible {
  outline: 1px solid hsl(var(--terracota));
  outline-offset: 5px;
}
.filtro__nota {
  max-width: 58ch;                     /* lá: max-w-[58ch] */
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  text-align: right;
  color: hsl(var(--grey));
}
/* Com ?projeto= (galeria.js) a nota ganha "Ver todos os projetos". */
.filtro__nota a {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}
.filtro__nota a:hover, .filtro__nota a:focus-visible { opacity: .7; }
@media (max-width: 767px) {
  .filtro__aba { font-size: 17px; }
  .filtro__aba[aria-pressed="true"],
  .filtro__aba[aria-current="page"] { font-size: 24px; }
  .filtro__nota { font-size: 14px; }
  /* CELULAR (20/09/2026). Três coisas que só quebram aqui:
     1. a aba media 20px de altura -- um alvo de dedo tem 44. O
        padding-block cresce a área de toque sem mexer na letra nem na
        linha de base em que as abas e a nota se alinham; o row-gap
        encolhe porque o padding já separa as duas linhas quando elas
        quebram.
     2. a nota vinha encostada à DIREITA (margin-left:auto + text-align
        :right, que no desktop a joga para a outra ponta da linha). A
        390 ela quebra em duas e deixa "do corretor." sozinho num canto,
        debaixo de abas alinhadas à esquerda. Aqui ela é uma legenda das
        abas: mesma margem de todo o resto, à esquerda.
     3. o respiro sob as abas vem do padding delas, não do row-gap. */
  .filtro { row-gap: 2px; padding-bottom: 16px; }
  .filtro__abas { row-gap: 0; column-gap: 18px; }
  /* Os 9px de padding davam 38px de alvo, não os 44 prometidos acima
     (medido a 390 e a 360: aba apagada 38 de altura, a ativa 46, e
     "Stand" com 38 de largura). 12px fecham a conta na altura; nos
     lados o padding cresce o alvo e a margem negativa devolve os 18px
     de column-gap, então na tela a linha das abas continua a mesma e
     entre dois alvos ainda sobram 8px de vão. */
  .filtro__aba { padding-block: 12px; padding-inline: 5px; margin-inline: -5px; }
  .filtro__nota {
    max-width: none;
    margin-left: 0;
    text-align: left;
  }
}

/* ============================================================
   GALERIA — fileiras justificadas

   Quem monta as fileiras é o script (fim da página): ele lê a largura
   da grade e a altura da fileira e vai enchendo cada uma até a soma das
   larguras naturais passar de 125% da largura disponível. Por isso a
   foto em repouso mostra ~80% da largura dela, e o hover tem para onde
   abrir. Os números estão no script.

   Três tipos de fileira, e o hover abre nas três:
     .fileira--abre   soma >= 100% da largura: a foto abre até a natural
     .fileira--cheia  70-100% (a última, às vezes): em repouso já está
                      esticada além da natural
     .fileira--solta  < 70% (categoria com poucas fotos): cada foto no
                      tamanho natural, alinhadas à esquerda
   Abrir "até a natural" não basta sempre: numa fileira que fechou com
   soma perto de 100% a foto já está quase na natural e abria 1% (visto
   na 2ª fileira, 18/09); numa --cheia seria até ENCOLHER. Por isso o
   script põe em cada fileira --abre, o quanto a natural é multiplicada
   no hover para a foto ganhar pelo menos ABRE_MIN (22%) sobre o repouso.
   Onde a natural já dá mais que isso, --abre é 1 e o gesto é o de antes.
   ============================================================ */
.grade-caixa {
  position: relative;
  margin-top: 24px;                    /* lá: mt-6 */
  --h: var(--fileira);
}
.grade__sonda {                        /* o script lê a altura da fileira aqui */
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: var(--h);
  visibility: hidden;
  pointer-events: none;
}

.grade {
  display: flex;
  flex-direction: column;
  gap: var(--vao);
  transition: opacity .25s ease;
}
.grade.trocando { opacity: 0; }
.js .grade:not(.montada) { visibility: hidden; }
/* Sem isto cada foto do topo baixava DUAS vezes (medido 19/09/2026): o
   navegador pinta a grade enquanto o navbar.js/galeria.js ainda chegam e o
   loading="lazy" busca com o sizes provisório do HTML (30vw); o montar()
   troca o sizes e vem a outra largura. imagens.html: 16 fotos, 3,0 MB de
   5,5 MB jogados fora. Imagem lazy com display:none não é buscada; aqui a
   grade já está invisível, então nada muda na tela. */
.js .grade:not(.montada) .peca img { display: none; }

.fileira {
  display: flex;
  gap: var(--vao);
  height: var(--h);
}
.fileira--solta { justify-content: flex-start; }

.peca {
  --atraso: calc(var(--i, 0) * 70ms);
  position: relative;
  display: block;
  flex: var(--r) 1 0px;                /* lá: flex: <razão x 10> 1 0px */
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: hsl(var(--dark-2));
  cursor: zoom-in;
  outline: none;
  /* Entrada: cada foto sobe 24px e acende, em cascata dentro da fileira,
     quando a fileira entra na tela (uma vez). O flex não espera ninguém:
     é o hover. */
  opacity: 0;
  transform: translateY(24px);
  transition:
    flex .8s var(--ease) 0s,
    opacity .7s ease var(--atraso),
    transform .9s var(--ease) var(--atraso);
}
.fileira.visivel .peca { opacity: 1; transform: none; }
.fileira--solta .peca { flex: 0 0 calc(var(--h) * var(--r)); }

/* O GESTO. A largura natural é a altura da fileira vezes a razão da
   foto -- a mesma conta que o script usou para montar a fileira. Lá o
   movimento é uma mola do framer-motion, medida: ~95% do caminho em
   500ms e assentado em 800. O --ease da casa faz a mesma curva. */
@media (hover: hover) {
  .fileira--abre .peca:hover,
  .fileira--cheia .peca:hover,
  .fileira--solta .peca:hover { flex: 0 0 calc(var(--h) * var(--r) * var(--abre, 1)); }
}
.fileira--abre .peca:focus-visible,
.fileira--cheia .peca:focus-visible,
.fileira--solta .peca:focus-visible { flex: 0 0 calc(var(--h) * var(--r) * var(--abre, 1)); }

.peca img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}
/* A foto acende quando chega (lá: transition-opacity duration-500). */
.js .peca img { opacity: 0; transition: opacity .5s ease; }
.js .peca img.carregou { opacity: 1; }

/* Foco de teclado: filete terracota por dentro, a moldura não mexe. */
.peca::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  box-shadow: inset 0 0 0 2px hsl(var(--terracota));
  opacity: 0;
  pointer-events: none;
}
.peca:focus-visible::after { opacity: 1; }

/* Legenda: lá é uma faixa de 72px com degradê preto (.5 -> .2 -> nada),
   texto de 12px branco a 75%, que sobe 16px e acende no hover. Aqui é o
   rótulo da casa -- Cinzel 11px, tracking 3px -- sobre tinta. */
.peca__legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: 72px;
  display: flex;
  align-items: flex-end;
  padding: 0 20px 16px;
  background: linear-gradient(to top, hsl(var(--tinta) / .6), hsl(var(--tinta) / .22) 55%, transparent);
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: hsl(var(--creme-base) / .92);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.peca:hover .peca__legenda,
.peca:focus-visible .peca__legenda { opacity: 1; transform: none; }

/* FILME NA GRADE. Peça com data-video é filme: o pôster no lugar da foto
   e, no canto de cima, um selo que diz que é filme e quanto dura -- o
   quadrado terracota com o play em tinta (o par do botão primário, 5,24:1)
   e a duração no rótulo da casa, Cinzel 11px, sobre tinta. Canto vivo,
   sem pílula. Fica aceso em repouso (é o que separa filme de foto); no
   hover o quadrado do play abre um pouco. A lupa toca o filme (galeria.js). */
.peca[data-video] { cursor: pointer; }
.peca__selo {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: flex;
  height: 28px;
  background: hsl(var(--tinta) / .62);
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  color: hsl(var(--creme-base) / .92);
  pointer-events: none;
}
.peca__selo-play {
  display: grid;
  place-items: center;
  width: 28px;
  background: hsl(var(--terracota));
  color: hsl(var(--tinta));
  transition: width .5s var(--ease);
}
.peca__selo-play svg { display: block; width: 8px; height: 10px; margin-left: 2px; }
.peca__selo-tempo { display: flex; align-items: center; padding: 0 8px 0 10px; }
@media (hover: hover) {
  .peca[data-video]:hover .peca__selo-play { width: 38px; }
}
.peca[data-video]:focus-visible .peca__selo-play { width: 38px; }

/* PLACEHOLDERS SEM NADA (18/09/2026, pedido do cliente: "deixa
   placeholder sem nada se nao tiver video"). .peca--vazia é o lugar de
   um vídeo que ainda não existe, dentro da grade (galeria.js); o
   .placeholder-grande é a página inteira de Mapas 3D e de Tour 360º
   ("vai ser um so, deixa um placeholder grandao"). Nenhum dos dois tem
   imagem nem texto: um véu da cor da letra e um filete, que funcionam
   nos dois temas. A peça vazia não abre no hover nem vira link. */
.peca--vazia,
.placeholder-grande {
  background: hsl(var(--foreground) / .06);
  box-shadow: inset 0 0 0 1px hsl(var(--border));
}
.peca--vazia { cursor: default; }
@media (hover: hover) {
  .fileira--abre .peca--vazia:hover,
  .fileira--cheia .peca--vazia:hover { flex: var(--r) 1 0px; }
  .fileira--solta .peca--vazia:hover { flex: 0 0 calc(var(--h) * var(--r)); }
}
.placeholder-grande {
  margin-top: 24px;
  width: 100%;
  aspect-ratio: 16 / 9;
}
@media (max-width: 767px) {
  .placeholder-grande { aspect-ratio: 4 / 5; }
}

/* Celular: lá a grade vira uma coluna e cada foto aparece INTEIRA, na
   proporção dela, sem recorte e sem hover. */
@media (max-width: 767px) {
  .fileira { display: block; height: auto; }
  .peca { width: 100%; height: auto; aspect-ratio: var(--r); }
  /* A LEGENDA FICA ACESA (20/09/2026). Ela só aparecia no :hover, e no
     celular não há hover: o nome da foto -- que mora num lugar só, a
     legenda -- nunca era lido. Pior, depois de um toque o navegador
     deixa o hover grudado e o nome acendia numa foto sorteada, no meio
     da rolagem (visto nos prints de 390 e 360). Sem hover para esperar,
     ela entra junto com a fileira, como a lupa faz com o mesmo nome.
     E QUEBRA EM DUAS LINHAS: acesa, o nowrap do desktop cortava com
     reticências 1 de cada 3 legendas a 360 ("Cielmere · Cobertura em Luz
     Dourada" pede 393px e a foto tem 320). A faixa de 72px do degradê
     cabe duas linhas de 11px sem crescer. */
  .peca__legenda {
    opacity: 1;
    transform: none;
    white-space: normal;
    text-overflow: clip;
  }
}

/* Sem JS: grade simples, todas as fotos, cada link abre o arquivo. */
.grade:not(.montada) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.grade:not(.montada) .peca { aspect-ratio: 4 / 5; opacity: 1; transform: none; }

/* ============================================================
   VER MAIS

   Lá: uma camada de 200px presa ao pé da grade, com degradê da cor do
   fundo (cheia -> 72% -> nada), apagando a última fileira, e o botão a
   32px do pé. O botão lá é pílula; aqui é o secundário da casa, de
   contorno (design-system.md §5.1), com canto vivo.
   ============================================================ */
.grade__mais {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32px;
  background: linear-gradient(to top,
    hsl(var(--background)) 0%,
    hsl(var(--background) / .72) 45%,
    hsl(var(--background) / 0) 100%);
  pointer-events: none;
}
.grade__mais[hidden] { display: none; }

.botao-contorno {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border: 1px solid hsl(var(--foreground) / .2);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 16px 40px -24px hsl(var(--tinta) / .5);
  transition: border-color .3s ease, color .3s ease;
}
.botao-contorno:hover,
.botao-contorno:focus-visible {
  border-color: hsl(var(--terracota));
  color: hsl(var(--terracota-texto));
  outline: none;
}

/* CELULAR: o véu sai da frente da foto (20/09/2026).
   A camada de 200px foi medida para a fileira do desktop, que tem 280 a
   460px de altura: ela apaga a fileira inteira e o botão pousa no fim
   dela. No celular a grade é uma coluna e a última foto tem 570-620px de
   altura -- o véu clareia só o terço de baixo e o botão, que é claro,
   cai NO MEIO da foto (medido: sobrava 32px de foto abaixo dele; visto
   nos prints antes-imagens-390-3 e antes-aplicativos-360-3). Aqui ele
   deixa de flutuar: a foto termina inteira e o botão vem depois dela,
   no ar da página, como qualquer outro botão da casa. */
@media (max-width: 767px) {
  .grade__mais {
    position: static;
    height: auto;
    padding: 28px 0 0;
    background: none;
  }
}

/* ============================================================
   FECHO — frase + botão, e a linha dos filmes

   Lá: fio de cabelo em cima, frase de 17-24px e o botão de destaque com
   brilho da cor embaixo; depois, fora da seção, "A emoção cresce em
   movimento. Conheça os Filmes ->".
   Aqui a frase é Garamond (a voz dos títulos, em caixa mista) e o botão
   é o primário da casa: terracota com letra TINTA (5,24:1 medido no
   tokens.css; creme sobre terracota dá 3,02 e reprova), o brilho do
   design-system.md §5.1, e a seta que abre no hover.
   ============================================================ */
.fechamento {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: clamp(1.75rem, 4vh, 2.75rem);
  border-top: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.fechamento__frase {
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
  color: hsl(var(--foreground));
}

.botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: hsl(var(--terracota));
  color: hsl(var(--tinta));
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 18px 44px -14px hsl(var(--terracota) / .45);
  transition: background-color .3s ease, gap .3s ease, transform .2s ease;
}
.botao:hover,
.botao:focus-visible {
  background: hsl(var(--terracota) / .9);
  gap: 16px;
  transform: translateY(-2px);          /* lá: hover:-translate-y-[2px] */
  outline: none;
}
.botao svg, .filmes__link svg { display: block; flex: none; }

.filmes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 10px;
  padding-bottom: clamp(40px, 7vh, 64px);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 18px);
  text-align: center;
}
.filmes p { color: hsl(var(--grey)); }
.filmes__link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-weight: 700;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: color .2s ease, gap .3s var(--ease);
}
.filmes__link:hover,
.filmes__link:focus-visible { color: hsl(var(--terracota-texto)); gap: 11px; outline: none; }
/* Celular: 26px de altura viram 44 de alvo, sem mexer na linha (o vizinho
   dele nessa linha é a frase, que não é link). */
@media (max-width: 767px) {
  .filmes__link { padding-block: 9px; margin-block: -9px; }
}

/* ---- COPIA LITERAL DO index.html (18/09/2026). Se mudar la, muda aqui. ---- */
/* ============================================================
   ATO 3 - RODAPE - CLONE DE flyingstudio.com.br  (17/09/2026)

   Pedido do cliente: "substitui o rodape pelo do flyingstudio, copia
   fiel da forma, so deixa as informacoes em placeholder".

   MEDIDO no Chromium sobre a copia salva em ../flying studio/ (mesmo
   HTML/CSS do ar; o dominio respondeu 200 na conferencia). A referencia
   desenha a pagina inteira num palco fixo de 1920px e o encolhe com
   `transform: scale(viewport/1920)` - medido no DOM: scale(0.75) a 1440,
   0,5333 a 1024, 0,2031 a 390. Por isso o rodape dela RENDERIZA a
   99 / 70,4 / 26,81px de altura nessas tres larguras: e a MESMA barra,
   encolhida. Os numeros abaixo sao os AUTORADOS (escala 1), que e como
   ela aparece a 1920 - o nosso site nao tem esse palco e reproduzir o
   scale so no rodape deixaria icone de 4,06px a 390.
   Para casar pixel a pixel com a referencia renderizada a 1440,
   multiplique por 0,75: barra 66, texto 12, icone 15, gap 18, pe 33.

   REFERENCIA (escala 1)            AQUI
   barra              88px          88px  (min-height)
   fundo    #f1f1f1 / #272727       idem, tokens --fs-rodape-*
   texto        16px / 1.2 / 500    idem
   cor texto #202020 / #ffffff      idem
   logo           198 x 24          marca de 24px + nome em Cinzel
   icones   20px (be 29x18,         idem
                  yt 28x20)
   gap dos icones     24px          24px
   pe                 44px          44px
   credito/pe   11px, 0.04em        idem
   "BY" e descritor  10px,          idem
        0.18em e 0.1em, caixa
        alta, #9a9a9a
   privacidade  11px, #7d7d7d       idem
   inset lateral     180px          A REGUA DA CASA (ver abaixo)

   A UNICA COISA QUE NAO VEIO DE LA E O EIXO HORIZONTAL. La e
   `px-[180px]` cravado dentro do palco de 1920. Aqui as duas linhas
   medem pela regua unica do site - .rodape__miolo, que a regra com
   !important la em cima ja poe em
   `min(var(--col-imagem), 100% - var(--gutter) * 2)`, SEM padding
   lateral. A barra sangra de ponta a ponta; o conteudo dela nasce no
   eixo das outras dobras. Ja custou caro hoje: com o gutter no <footer>
   E no miolo o rodape nascia no DOBRO (144px contra 72px a 1440).

   TIPOGRAFIA: a familia e --font-body, a da casa. So os NUMEROS de
   corpo, peso, entrelinha e tracking vieram da referencia; trocar a
   familia trocaria a marca, nao a forma.

   ABAIXO DE 1024px: a referencia NAO FAZ NADA - nao empilha, nao esconde
   nada, nao vira duas linhas; ela so encolhe tudo junto (medido: a 390 a
   barra tem 26,81px de altura e os icones 4,06px). Como isso aqui seria
   ilegivel, daqui para baixo o desenho e NOSSO e esta declarado:
     >=1280px  uma linha so, como a referencia
     <=1279px  a linha centraliza e quebra (wrap); o pe vira coluna
     <=767px   tudo empilha em coluna, centralizado
   POR QUE 1280 E NAO 1024: medido. O conteudo da barra soma 1008,6px
   (logo 178,59 + tel 109,44 + e-mail 190,44 + endereco 273,16 + redes
   257) mais 4 vaos de 24 = 1104,6px minimos. A regua da casa da 1152px
   de conteudo a 1280 (cabe, com 35,85px de vao) e so 921,6px a 1024
   (nao cabe: os icones caiam para a segunda linha encostados na
   esquerda). A referencia nunca passa por isso porque o palco dela tem
   1560px de conteudo fixos, em qualquer viewport.
   ============================================================ */

/* ---- DIVIDA CONHECIDA DE CONTRASTE (nao corrigida de proposito) ----
   A copia e fiel e a segunda linha da referencia REPROVA em AA. Medido
   no pixel, nos dois temas, texto abaixo de 18,66px (precisa de 4,5:1):

     item          corpo  cor       tinta   creme
     copyright      11px  #7d7d7d   3,63 X  3,64 X
     "BY"           10px  #9a9a9a   5,31 ok 2,49 X
     assinatura     11px  #7d7d7d   3,63 X  3,64 X
     descritor      10px  #9a9a9a   5,31 ok 2,49 X
     privacidade    11px  #7d7d7d   3,63 X  3,64 X

   A PRIMEIRA linha passa folgada nos dois temas: 14,94:1 no tinta
   (#ffffff sobre #272727) e 14,43:1 no creme (#202020 sobre #f1f1f1).
   Antes desta troca o rodape era o unico lugar da pagina com zero
   reprovas (pior caso 4,58:1). Sao 8 reprovas novas, todas na segunda
   linha e todas herdadas da referencia. Para zerar de novo sem mexer na
   forma, basta trocar --fs-rodape-fraco e --fs-rodape-fraco2 por
   hsl(var(--grey)) e hsl(var(--grey-light)) nos dois temas — uma linha
   cada. Fica a decisao do cliente: forma fiel ou AA.

   ---- tokens vindos do flyingstudio.com.br, a pedido do cliente em
        17/09/2026. Medidos no CSS da referencia
        (--theme-footer-bg / --theme-text-body) e conferidos no pixel.
        Se um dia o cliente quiser o rodape de volta na paleta da casa,
        troque so estes cinco: fundo -> hsl(var(--dark)), texto ->
        hsl(var(--foreground)), icone -> hsl(var(--foreground)),
        fraco -> hsl(var(--grey)), fraco2 -> hsl(var(--grey-light)). */
:root {
  /* 17/09/2026: o fundo da barra deixou de ser o cinza da referencia e
     passou a ser o MESMO fundo do resto do site, a pedido do cliente.
     Era #f1f1f1 no claro e #272727 no escuro -- um degrau acima do corpo,
     como o flyingstudio faz. Agora e --background, que e --creme-base no
     tema creme e --tinta no tema tinta. Uma so cor da dobra ao rodape. */
  --fs-rodape-fundo:  hsl(var(--background));
  --fs-rodape-texto:  #202020;
  --fs-rodape-icone:  #000000;   /* la e filter: brightness(0)           */
  --fs-rodape-fraco:  #9a9a9a;   /* "BY" e o descritor                   */
  --fs-rodape-fraco2: #7d7d7d;   /* assinatura e Politica de Privacidade */
}
[data-tema="dark"] {
  --fs-rodape-fundo:  hsl(var(--background));
  --fs-rodape-texto:  #ffffff;
  --fs-rodape-icone:  #ffffff;   /* la e brightness(0) invert()          */
  --fs-rodape-fraco:  #9a9a9a;
  --fs-rodape-fraco2: #7d7d7d;
}

.rodape {
  width: 100%;
  background: var(--fs-rodape-fundo);
  /* O fio de cima segue separando o laranja do #contato do rodape. */
  border-top: 1px solid hsl(var(--border));
  color: var(--fs-rodape-texto);
}
/* Sem padding lateral aqui: quem mede a regua e o .rodape__miolo. */
.rodape__barra, .rodape__pe { width: 100%; }

/* ---------- linha 1: a barra ---------- */
.rodape__linha {
  display: flex;
  flex-wrap: wrap;            /* segura 1024-1279, onde o conteudo nao cabe */
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 14px;
  min-height: 88px;           /* la: h-[88px] */
}

.rodape__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 24px;               /* la: h-[24px] w-[198px] */
  text-decoration: none;
  /* 21/09/2026, pedido do cliente: "no rodape deixa a logo laranja, escrita
     tambem" -- e "so da arquiteteia". Era --fs-rodape-texto (creme). A marca
     e o nome herdam daqui (a marca e currentColor), entao os dois viram
     terracota de uma vez; o resto do rodape -- navegacao, contatos, redes,
     copyright -- continua creme. Terracota claro porque o rodape e escuro
     nos dois temas. */
  color: hsl(var(--terracota-light));
  transition: opacity .2s ease;
}
.rodape__logo:hover, .rodape__logo:focus-visible { opacity: .7; outline: none; }
/* A marca e a da Arquiteteia, nao a deles: o mesmo desenho de
   media/favicon.svg, sem o quadrado de fundo e em currentColor. */
.rodape__marca { flex: none; height: 24px; width: 24px; display: block; }
.rodape__nome {
  font-family: var(--font-accent);
  font-size: 13px;  /* 17/09: -2px, a pedido */
  font-weight: 500;
  letter-spacing: 4px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Telefone, e-mail e endereco: la sao tres <a> irmaos, 16px/1.2/500,
   whitespace-nowrap, e o respiro entre eles e so o space-between. */
.rodape__info {
  flex: none;
  font-size: 14px;  /* 17/09: -2px, a pedido */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
  text-decoration: none;
  color: var(--fs-rodape-texto);
  transition: opacity .2s ease;
}
a.rodape__info:hover, a.rodape__info:focus-visible { opacity: .7; outline: none; }

/* ---------- os icones de rede ---------- */
.rodape__redes {
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;                  /* la: gap-[24px] */
  padding-block: 8px;         /* la: py-[8px]   */
  color: var(--fs-rodape-icone);
}
.rodape__rede {
  display: block;
  flex: none;
  line-height: 0;
  color: inherit;
  transition: opacity .2s ease;
}
a.rodape__rede:hover, a.rodape__rede:focus-visible { opacity: .7; outline: none; }
/* Os tamanhos sao os da referencia, um a um: 20x20 nos quadrados,
   29x18 no Behance e 28x20 no YouTube. */
.rodape__icone { display: block; height: 20px; width: 20px; }
/* ---------- linha 2: o pe ---------- */
.rodape__pe-linha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;    /* la: justify-center */
  min-height: 44px;           /* la: h-[44px] */
}
.rodape__credito {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 10px;  /* 17/09: -1px */
  line-height: 1;             /* la: leading-none */
  letter-spacing: .04em;
  color: var(--fs-rodape-fraco2);
}
.rodape__credito b { font-weight: 600; }
.rodape__credito-by,
.rodape__credito-desc {
  font-size: 9px;  /* 17/09: -1px */
  text-transform: uppercase;
  color: var(--fs-rodape-fraco);
}
.rodape__credito-by   { letter-spacing: .18em; }
.rodape__credito-desc { letter-spacing: .1em; }
.rodape__credito-barra { color: var(--fs-rodape-fraco); }

/* A referencia tem o credito no centro e a privacidade na direita, e o
   lado esquerdo do pe fica VAZIO. Nosso copyright e conteudo real que
   ela nao tem onde por, entao ocupa esse vazio - mesmo corpo e mesma
   cor da privacidade, espelhado. */
.rodape__copy {
  position: absolute;
  left: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--fs-rodape-fraco2);
}
.rodape__privacidade {
  position: absolute;         /* la: absolute right-[180px] */
  right: 0;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--fs-rodape-fraco2);
  transition: color .2s ease;
}
.rodape__privacidade:hover,
.rodape__privacidade:focus-visible { color: hsl(var(--terracota-texto)); outline: none; }

/* ---------- abaixo de 1280px: desenho NOSSO (ver nota no topo) ---------- */
@media (max-width: 1279px) {
  .rodape__linha {
    justify-content: center;
    column-gap: 32px;
    row-gap: 14px;
    min-height: 0;
    padding-block: 20px;
  }
  .rodape__pe-linha {
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding-block: 14px;
  }
  .rodape__copy, .rodape__privacidade { position: static; }
  .rodape__copy { order: 3; }
}
@media (max-width: 767px) {
  .rodape__linha {
    flex-direction: column;
    row-gap: 16px;
    padding-block: 24px;
  }
  .rodape__info { font-size: 15px; white-space: normal; text-align: center; }
  .rodape__redes { gap: 22px; }
  /* ÁREA DE TOQUE (20/09/2026). Os alvos do rodapé são os da referência
     -- ícone de 20x20, telefone de 96x18, "Política de Privacidade" de
     121x11 -- e um dedo pede 44. Em todos, o padding cresce SÓ a área
     de toque e a margem negativa devolve o tamanho de antes: a caixa
     que a página mede continua igual, o rodapé não cresce um pixel e na
     tela nada muda. Medido depois: ícone 40x40, contato 96x34 (o vão de
     16px entre telefone e e-mail não deixa passar de 34 sem os dois
     alvos se encostarem) e privacidade 161x43 -- este pode crescer à
     vontade porque o vizinho, o copyright, é texto, não link. */
  .rodape__rede { padding: 10px; margin: -10px; }
  .rodape__info { padding-block: 8px; margin-block: -8px; }
  /* A marca tem height: 24px cravado, então aqui o alvo cresce pela
     própria altura (o conteúdo continua centrado nela) e a margem
     negativa devolve os 24 à linha do rodapé. */
  .rodape__logo { height: 38px; margin-block: -7px; }
  .rodape__privacidade { padding: 16px 20px; margin: -16px -20px; }
}
/* ============================================================
   ATO 3 - RODAPE - A FAIXA DE FOTO QUE SANGRA  (17/09/2026)

   O cliente apontou que faltava isto: na referencia, ABAIXO da barra de
   informacoes vem uma faixa de foto do escritorio deles, sangrando de
   ponta a ponta. A barra acima NAO MUDOU - ela continua no eixo da casa.

   MEDIDO no Chromium sobre ../flying studio/ (o palco de 1920px +
   `--design-scale = min(innerWidth/1920, 1.25)`, o mesmo mecanismo ja
   descrito no bloco da barra):

     viewport   --design-scale   altura da faixa la
       1920         1.0             400.00px   (o valor autorado)
       1440         0.75            300.00px
        390         0.203125         81.25px
      >=2400        1.25 (teto)      500.00px

   Ou seja, la a altura e exatamente `min(0.208333 * vw, 500px)`. E o que
   o clamp abaixo escreve. De 864px para cima a nossa faixa tem a MESMA
   altura da dela em qualquer largura, incluindo o teto de 500.

   O PISO DE 180px E NOSSO, e pela mesma razao que o desenho da barra
   abaixo de 1280 e nosso: a 390 a referencia deixa a foto com 81,25px de
   altura - uma tira em que nao se le mais um escritorio, so uma textura.
   Aqui ela para de encolher em 180px (21% de uma tela de 844). Efeito
   colateral, de proposito: de 864 para cima a janela tem sempre 4,8:1 e
   o enquadramento e identico ao dela; abaixo disso a janela engorda
   (2,17:1 a 390) e aparece MAIS altura da foto, em vez de menos.

   SEM TRATAMENTO: medido no DOM da referencia - `filter: none`,
   `opacity: 1`, nenhum veu, gradiente ou overlay sobre a foto, e nenhum
   fio entre a barra e ela. A emenda e seca nos dois temas, igual la.
   (Unica coisa que ela tem e nos nao: um parallax de scroll, que troca
   o translateY do envelope da foto enquanto a pagina rola. Nao veio -
   custa JS e peso, e nao e o que o cliente apontou.)

   O FUNDO da faixa e o mesmo da barra: com `loading="lazy"` a foto so
   chega depois, e ate la o rodape parece so continuar.

   A FAIXA E A EXCECAO A REGUA. Tudo mais no rodape mede por
   .rodape__miolo; ela nao, porque e fundo, nao conteudo - como na
   referencia, onde a `<section>` e `w-full`.
   ============================================================ */
.rodape__foto {
  position: relative;
  width: 100%;                       /* sangra: de ponta a ponta       */
  height: clamp(180px, 20.8333vw, 500px);
  overflow: hidden;
  line-height: 0;                    /* mata o vao do inline do <img>  */
  background: var(--fs-rodape-fundo);
}
.rodape__foto-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 55% (18/09/2026). Era 45%, medido para a foto de banco de imagem
     que morava aqui. O cliente pediu um render do estudio no lugar
     dela ("escolher uma imagem de um escritorio que os creators
     fizeram") e entrou o Salao de Conferencias do Emerald - o porque
     e os arquivos estao no comentario da faixa, no HTML. Remedido no
     navegador em 35/45/55/65, a 1440 e a 1920: a 55% o tampo da mesa
     cabe INTEIRO na janela, com o notebook, o celular e a xicara
     folgados da borda, e ainda sobra a cidade na janela e a base da
     tela na parede. Em 45% a xicara encosta na borda de baixo e a
     quina da mesa e cortada; em 35% a xicara sai pela metade; em 65%
     a tela some e entra piso. Abaixo de 864px o Y nem entra na conta:
     a janela fica mais baixa que 2,4:1 e o render aparece inteiro na
     altura (mesa, cadeiras, cidade e ceu). */
  object-position: 50% 55%;
}
/* ---- fim da copia do RODAPE ---- */

/* O .rodape__miolo mede pela régua. No index.html isso vem de uma regra
   de grupo lá em cima (com !important); aqui é a mesma conta, direto. */
.rodape__miolo {
  width: min(var(--col-imagem), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ============================================================
   LUPA — o lightbox

   Lá: tela inteira, preto a 70% com desfoque no desktop (85% sem
   desfoque no celular), a foto em contain até 92vw x 86vh com sombra
   funda, legenda a 20px do pé, e três botões redondos de 44px -- setas
   no meio das laterais, fechar no canto. Teclado: setas e Esc.
   Aqui: tinta no lugar do preto, botões QUADRADOS (raio zero), a
   legenda no rótulo da casa, e um contador "04 / 37" que lá não tem --
   numa série de 37 fotos, saber onde se está vale a linha.
   É um <dialog> nativo: foco preso, Esc e o resto da página inerte vêm
   do navegador.
   ============================================================ */
.lupa {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: hsl(var(--tinta) / .92);
  color: hsl(var(--creme-base));
  opacity: 0;
  transition: opacity .28s ease;
}
.lupa::backdrop { background: transparent; }
.lupa.aberta { opacity: 1; }
@media (min-width: 1024px) {
  .lupa {
    background: hsl(var(--tinta) / .78);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }
}
html.lupa-aberta { overflow: hidden; }

.lupa__palco {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 12px 64px;
}
.lupa__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 24px 80px hsl(var(--tinta) / .6);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .2s ease, transform .35s var(--ease);
}
.lupa__img.trocando { opacity: 0; transform: scale(.985); }

/* O FILME NA LUPA. O <video> é criado pelo galeria.js só quando um filme
   abre. Mesma caixa da foto (92vw x 86vh, sombra funda), mas com a
   proporção travada pelo --r da peça: com preload="none" o vídeo não sabe
   o próprio tamanho antes de tocar e nasceria com 300x150. Entra com o
   mesmo gesto da foto (apaga -> acende, 98,5% -> 100%).
   [hidden] precisa de regra: o display:block daqui ganha do navegador. */
.lupa__video {
  display: block;
  width: min(92vw, 86vh * var(--r, 1.7778));
  height: auto;
  aspect-ratio: var(--r, 1.7778);
  object-fit: contain;
  background: hsl(var(--tinta));
  box-shadow: 0 24px 80px hsl(var(--tinta) / .6);
  animation: lupa-filme .35s var(--ease) both;
}
@keyframes lupa-filme { from { opacity: 0; transform: scale(.985); } }
.lupa__img[hidden], .lupa__video[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lupa__video { animation: none; }
  .peca__selo-play { transition: none; }
}

.lupa__pe {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 16px;
  padding-inline: 64px;
  font-family: var(--font-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: hsl(var(--creme-base) / .82);
  pointer-events: none;
}
.lupa__conta { color: hsl(var(--terracota-light)); letter-spacing: 2px; white-space: nowrap; }

.lupa__botao {
  position: absolute;
  z-index: 2;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid hsl(var(--creme-base) / .16);
  background: hsl(var(--creme-base) / .06);
  color: hsl(var(--creme-base) / .85);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lupa__botao:hover {
  background: hsl(var(--terracota) / .22);
  border-color: hsl(var(--terracota));
  color: hsl(var(--creme-base));
}
.lupa__botao:focus-visible { outline: 2px solid hsl(var(--terracota-light)); outline-offset: 2px; }
.lupa__botao svg { display: block; }
/* [hidden] precisa de regra: o display:grid daqui ganha do navegador.
   Quem esconde as setas é o galeria.js, quando a série tem uma foto só. */
.lupa__botao[hidden] { display: none; }
.lupa__ant  { left:  clamp(12px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.lupa__prox { right: clamp(12px, 2vw, 24px); top: 50%; transform: translateY(-50%); }
.lupa__fechar { right: clamp(12px, 2vw, 24px); top: clamp(12px, 2vw, 24px); }

/* CELULAR: a lupa desmonta a faixa lateral (20/09/2026).
   Medido a 390 e a 360: a foto ocupa 92vw (359px de 390) e as setas, de
   44px, ficam a 12px das bordas -- ou seja, DENTRO da foto, uma em cada
   lado, cobrindo-a (sobreAFoto: true nas duas, em toda foto). E o pé,
   que no desktop é uma linha só, quebrava em duas com o contador
   pendurado no alto da direita ("CIELMERE · HORA AZUL" em duas linhas +
   "01 / 103"), porque ele reserva 64px de cada lado para as setas.
   Aqui a lateral fica livre: as setas descem para o rodapé da lupa, o
   nome e o contador empilham centrados acima delas, e o palco abre
   espaço embaixo para os dois. A foto encolhe de 86vh para 68vh -- o
   que sobra é o lugar dessa faixa, e o arrasto de dedo, que é como se
   troca de foto aqui, continua o mesmo. */
@media (max-width: 767px) {
  .lupa__palco { padding: 56px 12px 128px; }
  .lupa__img { max-height: 68vh; }
  .lupa__video { width: min(92vw, 68vh * var(--r, 1.7778)); }
  .lupa__pe {
    bottom: 74px;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-inline: 20px;
    text-align: center;
  }
  .lupa__ant, .lupa__prox { top: auto; bottom: 16px; transform: none; }
  /* Os três botões a 16px da borda, não a 12: é a margem mínima da casa
     no celular, e num aparelho com a tela curvada os 12 caem na dobra. */
  .lupa__ant { left: 16px; }
  .lupa__prox { right: 16px; }
  .lupa__fechar { top: 16px; right: 16px; }
}

/* O ARRASTO NO DEDO (20/09/2026). O galeria.js troca de foto no
   pointerup, mas ele NUNCA chegava: com touch-action solto o navegador
   toma o gesto horizontal para si (um pan da página) já no primeiro
   milímetro e manda pointercancel. Medido a 390: três arrastos sobre a
   foto e nos vãos de cima e de baixo, e o contador parado em 01 / 103
   nos três -- ou seja, o único jeito de trocar de foto no celular era
   acertar a seta de 44px. Com pan-y o horizontal volta a ser nosso e o
   pointerup chega (01 -> 02 -> 03 -> 04 nos mesmos três arrastos).
   O filme fica de fora: lá o dedo arrasta a barra de tempo, e o
   galeria.js já ignora o arrasto que começa nele.
   Só no dedo: com mouse o touch-action não tem efeito nenhum. */
@media (pointer: coarse) {
  .lupa__palco, .lupa__img { touch-action: pan-y; }
  .lupa__video { touch-action: auto; }
}

/* CELULAR DEITADO (20/09/2026). Em pé o bloco de cima resolve; deitado
   a conta não fechava, e nenhum dos dois blocos pegava a tela (844 de
   largura passa longe dos 767). MEDIDO a 844x390: a foto pede 86vh =
   335px e o palco só tem 390 - 56 - 64 = 270 para ela, então ela
   TRANSBORDAVA o vão -- topo em 23px, e o pé com o nome e o contador
   pousando sobre os últimos 7px dela (print dedo/...-3-deitada.png).
   Numa foto deitada é pior: 92vw dão 776px de largura e as setas e o
   fechar, que aqui continuam nas laterais, caem DENTRO da foto.
   Aqui a foto mede pela altura que sobra de verdade e pela largura que
   sobra entre as setas, e as bordas do palco encolhem -- numa tela de
   390 de altura elas não podem custar os 120px do retrato. */
@media (max-height: 500px) and (max-width: 1024px) and (pointer: coarse) {
  .lupa__palco { padding: 44px 68px 40px; }
  .lupa__img {
    max-height: calc(100vh - 84px);
    max-width: calc(100vw - 136px);
  }
  .lupa__video { width: min(100vw - 136px, (100vh - 84px) * var(--r, 1.7778)); }
  .lupa__pe { bottom: 10px; padding-inline: 76px; }
}

/* E o dedo continua sendo um dedo quando o aparelho deita. Os alvos de
   toque da trilha, do filtro, do rodapé e da linha dos filmes moram
   todos em @media (max-width: 767px), e a 844x390 nenhum deles vale:
   medido, a trilha volta a 19px de altura, a aba do filtro a 25, o
   ícone de rede a 20x20, o telefone a 17 e a "Política de Privacidade"
   a 11. São as mesmas regras de lá, repetidas para a tela deitada --
   padding que cresce só o alvo e margem negativa que devolve a caixa,
   então nada muda na tela. */
@media (max-height: 500px) and (max-width: 1024px) and (pointer: coarse) {
  .trilha a { padding-block: 12px; margin-block: -12px; }
  .filtro__aba { padding-block: 10px; padding-inline: 5px; margin-inline: -5px; }
  .filmes__link { padding-block: 9px; margin-block: -9px; }
  .rodape__rede { padding: 10px; margin: -10px; }
  .rodape__info { padding-block: 8px; margin-block: -8px; }
  .rodape__logo { height: 38px; margin-block: -7px; }
  .rodape__privacidade { padding: 16px 20px; margin: -16px -20px; }
}

/* ============================================================
   MOVIMENTO REDUZIDO — nada entra, nada abre, nada flui
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .topo__foto, .trilha, .topo__titulo { animation: none; }
  .peca { opacity: 1; transform: none; transition: none; }
  .fileira--abre .peca:hover, .fileira--abre .peca:focus-visible,
  .fileira--cheia .peca:hover, .fileira--cheia .peca:focus-visible { flex: var(--r) 1 0px; }
  .fileira--solta .peca:hover, .fileira--solta .peca:focus-visible { flex: 0 0 calc(var(--h) * var(--r)); }
  .peca__legenda, .grade, .filtro__aba, .lupa, .lupa__img,
  .botao, .botao-contorno, .filmes__link, .tema { transition: none; }
}