/* ==========================================================================
   persa. — componentes e seções
   Depende de base.css. Toda cor vem dos tokens, nunca literal.
   ========================================================================== */

/* ==========================================================================
   1. CABEÇALHO
   ========================================================================== */
.topo{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gutter);
  padding:1.25rem var(--gutter);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             padding var(--dur) var(--ease),transform var(--dur) var(--ease),
             opacity var(--dur) var(--ease),visibility var(--dur) var(--ease);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
/* sobre o hero o cabeçalho é transparente. ao rolar ganha fundo sólido */
.topo.rolado{
  background:var(--preto-video);
  border-bottom-color:var(--linha);
  padding-block:.9rem;
}
/* Na home o cabeçalho não existe enquanto o hero está na tela: a animação
   da marca fica sozinha na primeira dobra. Ele desliza de cima para baixo
   quando o hero termina, e volta a sair se o visitante subir de novo.
   `visibility:hidden` tira o menu do foco por teclado enquanto está fora,
   coisa que só opacidade não faria. */
.topo.oculto{
  transform:translateY(-100%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .topo{transition:none}
}
/* páginas internas já começam com fundo, porque não têm hero de vídeo */
.topo.fixo{background:var(--tinta);border-bottom-color:var(--linha)}

.marca{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.marca img{width:clamp(72px,7vw,104px);height:auto}
.marca-texto{
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cinza-texto);
  line-height:1.3;
  /* As três linhas vêm de <br> no HTML, não de largura: com `max-width`
     em ch a palavra mais longa transbordava a caixa e a centralização
     passava a mentir, deixando o "e" fora do eixo das duas palavras.
     `max-content` faz a caixa medir exatamente a linha mais larga, e aí
     o "e" cai no meio de verdade. */
  width:max-content;
  text-align:center;
}
@media (max-width:900px){.marca-texto{display:none}}

.menu{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.25rem)}
.menu a{
  font-size:var(--t-sm);
  font-weight:500;
  letter-spacing:.01em;
  padding-block:.35em;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.menu a:hover,.menu a:focus-visible{background-size:100% 1px}
.menu a.ativo{background-size:100% 1px}

.hamburguer{
  display:none;
  width:44px;height:44px;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:6px;
  margin-right:-10px;
}
.hamburguer span{
  display:block;height:1px;background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),width var(--dur) var(--ease);
}
.hamburguer span:nth-child(1){width:26px}
.hamburguer span:nth-child(2){width:18px}
.hamburguer span:nth-child(3){width:26px}
.hamburguer[aria-expanded="true"] span:nth-child(1){width:26px;transform:translateY(7px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){width:26px;transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .hamburguer{display:flex}
  .menu{
    position:fixed;
    inset:0;
    background:var(--tinta);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:.5rem;
    padding:6rem var(--gutter) var(--gutter);
    transform:translateX(100%);
    transition:transform .55s var(--ease);
    overflow-y:auto;
  }
  .menu.aberto{transform:none}
  .menu a{font-size:var(--t-lg);text-transform:lowercase;letter-spacing:-.03em;font-weight:600;padding-block:.25em}
}

/* ==========================================================================
   2. HERO
   ========================================================================== */
/* Coluna flex em vez de vídeo absoluto com texto por cima: o vídeo ocupa
   a sobra e o texto vem depois, no fluxo. Assim a animação e o texto nunca
   colidem, em nenhuma proporção de tela, sem depender de inset chutado. */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  /* preto puro, casando com o fundo do vídeo da marca */
  background:var(--preto-video);
  /* o cabeçalho é fixo e transparente sobre o hero: reservar a altura real
     dele, que é o logo mais o padding, senão a animação corre por baixo */
  padding-top:calc(clamp(72px,7vw,104px) + 3.5rem);
}
/* O hero exibe a animação da marca: peixe branco sobre preto que termina
   no wordmark. Ela já é a paleta do site, então nada de filtro nem de véu
   por cima: escurecer transformaria o branco puro em cinza e mataria o
   contraste que a peça foi feita para ter.

   `contain` em vez de `cover` porque a composição é centralizada e o
   wordmark seria cortado nas laterais em tela estreita. O fundo do vídeo
   e o do hero são o mesmo preto, então a caixa preta em volta é
   invisível: a peça encaixa em qualquer proporção sem corte. */
/* base 0, não auto: com base auto o item parte do tamanho intrínseco do
   vídeo e empurra os botões para fora da primeira dobra. Com base 0 ele
   fica exatamente com a sobra, e o texto sempre cabe na tela. */
.hero-midia{
  position:relative;
  flex:1 1 0;
  /* piso para a animação não virar um selo em tela baixa, e teto para
     ela não empurrar os botões da primeira dobra em tela alta */
  min-height:min(34svh,52vw);
  width:100%;
}
.hero-midia img,.hero-midia video{
  width:100%;height:100%;
  object-fit:contain;
  /* A marca vem centrada dentro do quadro do vídeo. Encostando o quadro
     à direita da caixa, ela passa a cair no terço direito da tela, que é
     onde a direção pediu. No celular o quadro já ocupa a largura toda,
     então não sobra espaço para deslocar e a marca segue centrada. */
  object-position:var(--hero-pos,100%) center;
}
.hero-conteudo{
  position:relative;z-index:1;width:100%;
  padding-block:clamp(1.5rem,4vh,3.25rem);
  display:flex;flex-direction:column;gap:1rem;
}
/* A animação termina exibindo o wordmark, então repetir o nome em corpo
   gigante seria dizer a mesma coisa duas vezes na mesma tela. O h1 existe
   para leitor de tela e para busca; quem enxerga lê a marca no vídeo. */
.hero-marca{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hero-sub{
  font-size:var(--t-xs);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--creme);
  opacity:.75;
}
.hero-frase{
  font-size:var(--t-lg);
  font-weight:400;
  letter-spacing:-.02em;
  max-width:22ch;
  line-height:1.15;
}
.hero-acoes{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem}

/* ---------- hero em tela larga ----------
   No celular a coluna empilhada funciona: vídeo em cima, texto embaixo.
   A partir do tablet, com a marca deslocada para a direita, a metade
   esquerda fica vazia. Então texto e vídeo passam a ocupar a MESMA célula
   de grid, os dois centrados na vertical: a headline sobe e encontra a
   altura da marca, em vez de ficar largada no rodapé da dobra. */
@media (min-width:901px){
  .hero{
    display:grid;
    /* coluna explícita: sem isto o grid cria uma coluna `auto`, medida
       pelo max-content do texto, e o bloco fica solto no meio da tela */
    grid-template-columns:minmax(0,1fr);
    align-items:center;        /* o texto sobe e centraliza na dobra */
    padding-bottom:clamp(2rem,7vh,5.5rem);
  }

  /* O vídeo ocupa só a metade direita, sangrando até a borda da tela.
     Confinar a caixa é o que mantém a marca no terço direito: se ela
     usasse a largura toda, o quadro cresceria e a marca voltaria para o
     centro, por cima do texto. E o texto segue no .env, alinhado à mesma
     grade de 1440px do resto do site. */
  .hero-midia{
    position:absolute;
    inset:calc(clamp(72px,7vw,104px) + 3.5rem) 0 0 50%;
    /* a regra base define width:100%, que numa caixa absoluta vence o
       `right:0` e faria o vídeo vazar meia tela para fora */
    width:auto;
    min-height:0;
  }
  .hero-conteudo{
    position:relative;
    z-index:1;
    /* .env traz margin-inline:auto, que no grid cancela o stretch e
       centraliza o bloco. width:100% devolve o alinhamento à esquerda */
    width:100%;
    padding-block:0;
    gap:1.25rem;
  }
  /* teto só nos botões: a headline já tem o seu próprio limite de 22ch,
     e uma regra genérica nos filhos o sobrescreveria */
  .hero-acoes{max-width:min(46%,38rem)}
}

/* indicador de rolagem */
.hero-rolar{
  position:absolute;right:var(--gutter);bottom:calc(var(--gutter) * 1.6);z-index:1;
  display:flex;align-items:center;gap:.75rem;
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--creme);
  opacity:.6;
}
.hero-rolar::after{
  content:'';width:1px;height:56px;background:currentColor;
  transform-origin:top;animation:rolar 2.4s var(--ease) infinite;
}
@keyframes rolar{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px){.hero-rolar{display:none}}

/* ==========================================================================
   3. TERRITÓRIOS
   ========================================================================== */
.territorios{border-top:1px solid var(--linha)}

/* cabeça mais curta: aqui a etiqueta e o título abrem uma grade de atalhos,
   não um bloco de leitura, então não precisa do respiro cheio da seção */
.cabeca-territorios{gap:.9rem;margin-bottom:calc(var(--gutter) * .75)}

/* cada território é um atalho para a página da frente correspondente.
   Antes eram cartões mortos com altura mínima alta, o que abria um vazio
   grande entre o verbo e a linha de baixo. */
.territorio{
  display:flex;flex-direction:column;gap:.6rem;
  padding:calc(var(--gutter) * .55) 0;
  border-bottom:1px solid var(--linha);
  position:relative;
  color:inherit;text-decoration:none;
  transition:color var(--dur) var(--ease);
}
@media (max-width:640px){
  .territorio:last-child{border-bottom:none}
}
@media (min-width:641px){
  .territorios .grade{gap:0}
  .territorio{
    padding:calc(var(--gutter) * .6) calc(var(--gutter) * .7);
    border-right:1px solid var(--linha);
    border-bottom:none;
  }
}
/* em duas colunas a borda e o recuo seguem a posição na linha, não a ordem
   no HTML: sem isso o terceiro território entrava recuado e a coluna da
   direita ficava com uma borda solta na margem */
@media (min-width:641px) and (max-width:1024px){
  .territorio:nth-child(odd){padding-left:0}
  .territorio:nth-child(even){padding-right:0;border-right:none}
  .territorio:nth-child(-n+2){border-bottom:1px solid var(--linha)}
}
@media (min-width:1025px){
  .territorio:first-child{padding-left:0}
  .territorio:last-child{border-right:none;padding-right:0}
}
.territorio-indice{
  font-size:var(--t-xs);
  letter-spacing:.2em;
  color:var(--cinza-texto);
  transition:color var(--dur) var(--ease);
}
.territorio-verbo{
  font-size:clamp(1.35rem,2.6vw,2.125rem);
  font-weight:600;
  letter-spacing:-.03em;
  text-transform:lowercase;
  line-height:1.05;
  /* sublinhado que cresce, o mesmo gesto de .link */
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size var(--dur) var(--ease);
}
.territorio p{
  color:var(--cinza-texto);
  font-size:var(--t-sm);
  max-width:26ch;
  transition:color var(--dur) var(--ease);
}
/* o atalho fica no rodapé do bloco, alinhado entre as quatro colunas */
.territorio-ir{
  margin-top:auto;
  padding-top:1.25rem;
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cinza-texto);
  display:flex;align-items:center;gap:.5em;
  transition:color var(--dur) var(--ease);
}
.territorio-ir .seta{transition:transform var(--dur) var(--ease)}

a.territorio:hover .territorio-verbo,
a.territorio:focus-visible .territorio-verbo{background-size:100% 1px}
a.territorio:hover .territorio-ir,
a.territorio:focus-visible .territorio-ir,
a.territorio:hover .territorio-indice,
a.territorio:focus-visible .territorio-indice,
a.territorio:hover p,
a.territorio:focus-visible p{color:var(--creme)}
.inv a.territorio:hover .territorio-ir,
.inv a.territorio:hover .territorio-indice,
.inv a.territorio:hover p{color:var(--tinta)}
a.territorio:hover .territorio-ir .seta,
a.territorio:focus-visible .territorio-ir .seta{transform:translateX(.35em)}
@media (hover:none){
  .territorio .territorio-verbo{background-size:100% 1px}
}

/* ==========================================================================
   4. MANIFESTO
   ========================================================================== */
.manifesto p{
  font-size:var(--t-xl);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.1;
  text-transform:lowercase;
  max-width:20ch;
}
.manifesto p span{color:var(--cinza-texto)}

/* ==========================================================================
   5. CARTÃO DE PROJETO
   ========================================================================== */
.projeto-cartao{display:flex;flex-direction:column;gap:1.1rem}
.projeto-cartao .figura{border:1px solid var(--linha)}
.projeto-cartao h3{font-size:var(--t-md);font-weight:600}
.projeto-cartao .linha-fina{font-size:var(--t-sm)}
.projeto-meta{
  display:flex;flex-wrap:wrap;gap:.5rem;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-texto);
}
.projeto-meta span::after{content:'  /';margin-left:.5rem;opacity:.5}
.projeto-meta span:last-child::after{content:''}

/* estado vazio quando o filtro não devolve nada */
.vazio{
  border:1px dashed var(--linha-forte);
  padding:calc(var(--gutter) * .9);
  text-align:center;
  color:var(--cinza-texto);
  grid-column:1/-1;
}

/* ==========================================================================
   6. FILTRO DE CATEGORIAS
   ========================================================================== */
.filtros{
  display:flex;flex-wrap:wrap;gap:.5rem;
  padding-block:1.5rem;
  border-block:1px solid var(--linha);
  margin-bottom:calc(var(--gutter) * 1.2);
}
.filtro{
  padding:.6em 1.2em;
  font-size:var(--t-sm);
  font-weight:500;
  text-transform:lowercase;
  border:1px solid var(--linha-forte);
  color:var(--cinza-texto);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.filtro:hover{color:var(--creme);border-color:currentColor}
.inv .filtro:hover{color:var(--tinta)}
.filtro[aria-pressed="true"]{background:var(--creme);color:var(--tinta);border-color:var(--creme)}
.inv .filtro[aria-pressed="true"]{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.filtro-contagem{
  margin-left:auto;align-self:center;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-texto);
}

/* ==========================================================================
   7. CASE PRINCIPAL E SEQUÊNCIA ANTES, PROCESSO, DEPOIS
   ========================================================================== */
.case{border-top:1px solid var(--linha)}
.case-titulo{font-size:var(--t-xl);margin-bottom:.75rem}

.sequencia{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha)}
@media (max-width:768px){.sequencia{grid-template-columns:1fr}}
.sequencia-passo{background:var(--tinta);padding:0;display:flex;flex-direction:column}
.inv .sequencia-passo{background:var(--creme)}
.sequencia-passo .figura{aspect-ratio:4/3}
.sequencia-passo-texto{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.sequencia-passo-texto strong{
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;
}

/* ==========================================================================
   8. SLIDER ANTES E DEPOIS
   Lógica portada de casamodelo/assets/js/app.js
   ========================================================================== */
.comparador{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  border:1px solid var(--linha);
  cursor:ew-resize;
  user-select:none;
  touch-action:none;          /* o arraste horizontal é nosso, não do scroll */
  background:var(--tinta);
}
/* Quando há um par só, o comparador não vai a grade de duas colunas e
   esticava para a largura inteira: 1281x854 na tela cheia, alto demais
   para arrastar sem perder o quadro de vista. Precisa de espaço para
   comparar detalhe, mas não da dobra inteira. */
.grade:not(.g2) > figure{max-width:min(100%,54rem)}
.comparador img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  pointer-events:none;
}
/* a camada "depois" é recortada pela largura, revelando a de baixo */
.comparador-depois{
  clip-path:inset(0 0 0 0);
  width:100%;
}
.comparador-alca{
  position:absolute;top:0;bottom:0;left:50%;
  width:1px;background:var(--creme);
  transform:translateX(-.5px);
  pointer-events:none;
}
.comparador-alca::before{
  content:'';
  position:absolute;top:50%;left:50%;
  width:48px;height:48px;
  transform:translate(-50%,-50%);
  border:1px solid var(--creme);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
}
.comparador-alca::after{
  content:'\003C\00A0\00A0\003E';
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:var(--t-xs);
  color:var(--creme);
  letter-spacing:.05em;
}
.comparador-rotulo{
  position:absolute;bottom:1rem;z-index:2;
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--creme);
  background:rgba(0,0,0,.65);
  padding:.4em .8em;
  pointer-events:none;
}
.comparador-rotulo.esq{left:1rem}
.comparador-rotulo.dir{right:1rem}

/* ==========================================================================
   9. ETAPAS NUMERADAS DO PROJETO
   ========================================================================== */
/* As seis etapas são um menu: fechadas, cada uma é uma linha com número,
   título e o sinal de abrir. O clique no <summary> abre o texto e a foto.
   <details> nativo: teclado, leitor de tela e sem JS funcionam de graça. */
.etapa{
  border-top:1px solid var(--linha);
}
.etapa:last-child{border-bottom:1px solid var(--linha)}
.etapa-cabeca{
  display:grid;
  grid-template-columns:6rem 1fr auto;
  gap:var(--gutter);
  align-items:center;
  padding-block:calc(var(--gutter) * .5);
  cursor:pointer;
  list-style:none;
}
.etapa-cabeca::-webkit-details-marker{display:none}
.etapa-cabeca:focus-visible{outline:2px solid var(--creme);outline-offset:4px}
@media (max-width:768px){
  .etapa-cabeca{grid-template-columns:3rem 1fr auto;gap:1rem}
}
.etapa-n{
  font-size:var(--t-lg);
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--cinza-texto);
  line-height:1;
  transition:color var(--dur) var(--ease);
}
.etapa-cabeca h3{
  font-size:var(--t-md);
  /* sublinhado que cresce, o mesmo gesto de .link */
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  justify-self:start;
  transition:background-size var(--dur) var(--ease);
}
.etapa-cabeca:hover h3{background-size:100% 1px}
.etapa-cabeca:hover .etapa-n,
.etapa[open] .etapa-n{color:var(--creme)}

/* o sinal de mais vira menos quando a etapa abre */
.etapa-sinal{
  position:relative;
  width:1.1rem;height:1.1rem;
  flex:none;
}
.etapa-sinal::before,
.etapa-sinal::after{
  content:'';
  position:absolute;
  left:0;top:50%;
  width:100%;height:1px;
  background:currentColor;
  transition:transform var(--dur) var(--ease);
}
.etapa-sinal::after{transform:rotate(90deg)}
.etapa[open] .etapa-sinal::after{transform:rotate(0)}

.etapa-corpo{
  display:flex;flex-direction:column;gap:.9rem;
  /* alinhado com o título, não com o número */
  padding:0 0 calc(var(--gutter) * .75) calc(6rem + var(--gutter));
}
@media (max-width:768px){
  .etapa-corpo{padding-left:0}
}
.etapa[open] .etapa-corpo{animation:etapa-abrir var(--dur) var(--ease)}
@keyframes etapa-abrir{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
.etapa-texto{display:flex;flex-direction:column;gap:.9rem}
/* empilhada, a foto ainda ganha um teto: no tablet ela chegava a 676px
   de largura e dominava a etapa */
.etapa-figura{max-width:min(100%,30rem)}

/* No desktop a foto da etapa vai para o lado do texto. */
@media (min-width:901px){
  .etapa-corpo{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,22rem);
    gap:var(--gutter);
    align-items:start;
  }
}
@media (prefers-reduced-motion:reduce){
  .etapa[open] .etapa-corpo{animation:none}
}

/* ==========================================================================
   9b. CARROSSEL DA GALERIA DE PROJETO
   Uma moldura, os renders passando em fila infinita (ver iniciarCarrosseis).
   ========================================================================== */
.carrossel-janela{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--tom-2);
}
.carrossel-trilho{
  display:flex;
  height:100%;
  transition:transform .8s var(--ease);
  will-change:transform;
}
.carrossel-slide{
  flex:0 0 100%;
  height:100%;
}
.carrossel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.carrossel-seta{
  position:absolute;top:50%;
  z-index:3;
  transform:translateY(-50%);
  width:3rem;height:3rem;
  border:1px solid var(--linha-forte);
  background:rgba(22,20,19,.55);
  color:var(--creme);
  font-size:1.1rem;
  cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.carrossel-seta:hover,
.carrossel-seta:focus-visible{background:var(--tinta)}
.carrossel-seta.ant{left:1rem}
.carrossel-seta.prox{right:1rem}
@media (max-width:600px){
  .carrossel-janela{aspect-ratio:4/3}
  .carrossel-seta{width:2.5rem;height:2.5rem}
}
.carrossel-legenda{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:.9rem;
}
.carrossel-contador{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ==========================================================================
   10. DIÁRIO
   ========================================================================== */
.diario-entrada{
  display:grid;
  grid-template-columns:minmax(9rem,12rem) 1fr;
  gap:var(--gutter);
  padding-block:calc(var(--gutter) * .8);
  border-top:1px solid var(--linha);
  align-items:start;
}
@media (max-width:768px){
  .diario-entrada{grid-template-columns:1fr;gap:1rem}
}
.diario-carimbo{display:flex;flex-direction:column;gap:.35rem}
.diario-dia{font-size:var(--t-lg);font-weight:600;letter-spacing:-.03em;line-height:1}
.diario-data,.diario-projeto{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-texto);
}
.diario-corpo{display:flex;flex-direction:column;gap:1rem}
.diario-corpo h3{font-size:var(--t-md)}
.diario-midia{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
.diario-midia.m2{grid-template-columns:repeat(2,1fr)}
.diario-midia.m3{grid-template-columns:repeat(3,1fr)}
/* Entrada com uma foto só cai em coluna única e a imagem ia a 1015px,
   dominando a entrada inteira. Com duas ou três a grade já divide o
   espaço; com uma, o teto tem que ser explícito. */
.diario-midia:not(.m2):not(.m3){max-width:min(100%,34rem)}
@media (max-width:640px){.diario-midia.m2,.diario-midia.m3{grid-template-columns:1fr}}
.diario-midia .figura{aspect-ratio:4/3}

/* ==========================================================================
   11. FAIXA HORIZONTAL DE ACERVO
   ========================================================================== */
.faixa{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(240px,30vw,400px);
  gap:1px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  background:var(--linha);
  border-block:1px solid var(--linha);
  scrollbar-width:thin;
}
.faixa .figura{scroll-snap-align:start;aspect-ratio:3/4;background:var(--tinta)}
.faixa-dica{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinza-texto);margin-top:1rem;
}

/* ==========================================================================
   12. FORMULÁRIOS
   ========================================================================== */
.form{display:flex;flex-direction:column;gap:1.5rem;max-width:46rem}
.form-linha{display:grid;gap:1.5rem}
@media (min-width:641px){.form-linha.dupla{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:.5rem}
.campo label{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-texto);
}
.campo input,.campo textarea,.campo select{
  width:100%;
  padding:.9rem 0;
  border-bottom:1px solid var(--linha-forte);
  color:inherit;
  font-size:var(--t-base);
  transition:border-color var(--dur) var(--ease);
}
.campo select{padding-right:1.5rem;cursor:pointer}
/* o select nativo herda o fundo do sistema, então forçamos as opções */
.campo select option{background:var(--tinta);color:var(--creme)}
.inv .campo select option{background:var(--creme);color:var(--tinta)}
.campo textarea{resize:vertical;min-height:7rem}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-bottom-color:currentColor}
.campo input::placeholder,.campo textarea::placeholder{color:var(--cinza-texto);opacity:1}
.campo.erro input,.campo.erro textarea,.campo.erro select{border-bottom-color:currentColor}
.campo-erro{font-size:var(--t-xs);color:var(--creme);letter-spacing:.02em}
.inv .campo-erro{color:var(--tinta)}
.campo-erro:empty{display:none}

.btn-enviar{position:relative;align-self:flex-start}
.btn-enviar[disabled]{opacity:.5;cursor:progress}
.btn-enviar .girando{
  width:12px;height:12px;
  border:1px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;              /* exceção deliberada: é um indicador de carga, não um card */
  animation:girar .7s linear infinite;
  display:none;
}
.btn-enviar.carregando .girando{display:block}
@keyframes girar{to{transform:rotate(360deg)}}

.retorno{
  border:1px solid var(--linha-forte);
  padding:calc(var(--gutter) * .7);
  display:flex;flex-direction:column;gap:1rem;
}
.retorno[hidden]{display:none}
.retorno h3{font-size:var(--t-md)}

.aviso-form{
  font-size:var(--t-xs);
  color:var(--cinza-texto);
  max-width:var(--leitura);
}

/* ==========================================================================
   13. ACESSO EXCLUSIVO
   ========================================================================== */
.exclusivo{border:1px solid var(--linha-forte);padding:calc(var(--gutter) * .9)}
.exclusivo h2{margin-bottom:1rem}

/* ==========================================================================
   14. RODAPÉ
   ========================================================================== */
.rodape{border-top:1px solid var(--linha);padding-block:calc(var(--secao) * .5)}
.rodape-grade{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--gutter);
  align-items:start;
}
@media (max-width:1024px){.rodape-grade{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rodape-grade{grid-template-columns:1fr}}
.rodape h4{
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza-texto);font-weight:500;margin-bottom:1.1rem;
}
.rodape li+li{margin-top:.6rem}
.rodape li a{font-size:var(--t-sm)}
.rodape li a:hover{text-decoration:underline;text-underline-offset:.25em}
.rodape-marca img{width:120px;margin-bottom:1rem}
.rodape-base{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:calc(var(--gutter) * 1.2);
  padding-top:1.5rem;
  border-top:1px solid var(--linha);
  font-size:var(--t-xs);
  color:var(--cinza-texto);
  letter-spacing:.02em;
}

/* ==========================================================================
   15. MODAL
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:var(--gutter);
}
.modal.ativa{display:flex}
.modal-fundo{position:absolute;inset:0;background:rgba(0,0,0,.85)}
.modal-caixa{
  position:relative;
  background:var(--tinta);
  border:1px solid var(--linha-forte);
  max-width:44rem;width:100%;
  max-height:82vh;overflow-y:auto;
  padding:calc(var(--gutter) * .9);
}
.modal-caixa h2{margin-bottom:1.25rem}
.modal-caixa p+p{margin-top:1em}
.modal-fechar{
  position:absolute;top:1rem;right:1rem;
  width:40px;height:40px;
  border:1px solid var(--linha-forte);
  font-size:1.1rem;line-height:1;
}
.modal-fechar:hover{background:var(--creme);color:var(--tinta)}

/* ==========================================================================
   16. CABEÇALHO DE PÁGINA INTERNA
   ========================================================================== */
.pagina-topo{
  padding-top:calc(var(--secao) * .85 + 4rem);
  padding-bottom:calc(var(--secao) * .5);
  border-bottom:1px solid var(--linha);
}
.pagina-topo h1{font-size:var(--t-mega);line-height:.9;margin-block:.75rem}
.migalha{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-texto);
  display:flex;gap:.6rem;flex-wrap:wrap;
}
.migalha a:hover{color:var(--creme);text-decoration:underline;text-underline-offset:.25em}
.inv .migalha a:hover{color:var(--tinta)}

/* impressão: o site vira documento em preto sobre branco */
@media print{
  .topo,.hero-rolar,.hamburguer,.filtros,.modal{display:none !important}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   17. SUBMENU DE PATRIMÔNIO
   ========================================================================== */
.menu-item{position:relative}
.menu-item > a{display:inline-flex;align-items:center;gap:.4em}
.menu-seta{
  width:0;height:0;
  border-left:3px solid transparent;
  border-right:3px solid transparent;
  border-top:4px solid currentColor;
  transition:transform var(--dur) var(--ease);
}
.menu-item:hover .menu-seta,
.menu-item:focus-within .menu-seta{transform:rotate(180deg)}

.submenu{
  position:absolute;
  top:100%;left:0;
  min-width:14rem;
  background:var(--tinta);
  border:1px solid var(--linha-forte);
  padding:.5rem 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.menu-item:hover .submenu,
.menu-item:focus-within .submenu{opacity:1;visibility:visible;transform:none}
.submenu a{
  display:block;
  padding:.55rem 1.1rem;
  font-size:var(--t-sm);
  background-image:none;
  white-space:nowrap;
}
.submenu a:hover,.submenu a:focus-visible{background:var(--creme);color:var(--tinta)}
.submenu .em-breve{color:var(--cinza-texto);cursor:default}
.submenu .em-breve:hover{background:none;color:var(--cinza-texto)}
.submenu .em-breve::after{content:' em breve';font-size:var(--t-xs);opacity:.7}

/* no celular o submenu vira lista aberta, sem hover */
@media (max-width:860px){
  .menu-item{width:100%}
  .menu-seta{display:none}
  .submenu{
    position:static;
    opacity:1;visibility:visible;transform:none;
    border:0;background:none;
    padding:.25rem 0 .75rem 1.25rem;
    min-width:0;
  }
  .submenu a{
    font-size:var(--t-md);
    text-transform:lowercase;
    color:var(--cinza-texto);
    padding:.3rem 0;
  }
  .submenu a:hover{background:none;color:var(--creme)}
}

/* ==========================================================================
   18. SELO DE SITUAÇÃO DA OBRA
   ========================================================================== */
.selo{
  display:inline-block;
  border:1px solid currentColor;
  padding:.35em .8em;
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  white-space:nowrap;
}
.selo-executado{background:var(--creme);color:var(--tinta);border-color:var(--creme)}
.inv .selo-executado{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.selo-projeto,.selo-emExecucao{color:var(--creme)}
.inv .selo-projeto,.inv .selo-emExecucao{color:var(--tinta)}
.selo-emBreve{color:var(--cinza-texto);border-style:dashed}

/* ==========================================================================
   19. FICHA TÉCNICA
   O que faz um órgão público confiar: identificação, objeto, fundamento
   legal e prazo. Sem valor, sem CNPJ, sem nome de servidor.
   ========================================================================== */
.ficha{
  border-top:1px solid var(--linha);
  width:100%;
}
.ficha tr{border-bottom:1px solid var(--linha)}
.ficha th,.ficha td{
  text-align:left;
  vertical-align:top;
  padding:1rem 1.25rem 1rem 0;
  font-weight:400;
}
.ficha th{
  width:15rem;
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cinza-texto);
  white-space:nowrap;
}
.ficha td{font-size:var(--t-sm)}
@media (max-width:640px){
  .ficha th,.ficha td{display:block;width:auto;padding-right:0}
  .ficha th{padding-bottom:.25rem}
  .ficha td{padding-top:0;padding-bottom:1rem}
}

/* ==========================================================================
   20. RESSALVA DE IMAGEM DE PROJETO
   Aparece sempre que um render estiver na tela. É o que separa este site
   de um portfólio que vende render como obra pronta.
   ========================================================================== */
.ressalva{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  border:1px solid var(--linha-forte);
  border-left-width:4px;
  padding:1rem 1.25rem;
  font-size:var(--t-sm);
  color:var(--cinza-texto);
  max-width:var(--leitura);
}
.ressalva strong{
  display:block;
  color:var(--creme);
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:.35rem;
}
.inv .ressalva strong{color:var(--tinta)}

/* etiqueta fixada sobre a própria imagem de projeto */
.marca-projeto{position:relative}
.marca-projeto::after{
  content:'imagem de projeto';
  position:absolute;
  left:0;bottom:0;
  z-index:2;
  background:var(--tinta);
  color:var(--creme);
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.4em .8em;
  pointer-events:none;
}

/* ==========================================================================
   21. VÍDEO
   Regra: a interface é monocromática, mas o filme é a obra e toca em cor.
   Só o vídeo de fundo do hero entra dessaturado, porque ali ele é textura.
   ========================================================================== */
.video-abertura{
  position:relative;
  background:var(--tinta);
  border:1px solid var(--linha);
}
.video-abertura video{width:100%;height:auto;display:block}

.video-cartao{display:flex;flex-direction:column;gap:1rem}
.video-cartao .video-moldura{border-color:var(--linha)}
.video-cartao video{width:100%;height:100%;object-fit:cover}

.galeria-video{display:grid;gap:var(--gutter)}
@media (min-width:769px){.galeria-video{grid-template-columns:repeat(2,1fr)}}

/* seção de vídeo em destaque na home, logo abaixo do hero */
.vitrine-video{border-bottom:1px solid var(--linha)}
.vitrine-video .video-moldura{border-width:1px}

/* ==========================================================================
   22. PORTFÓLIO EM VÍDEO
   Um bloco por projeto, alternando preto e branco, cada um com os filmes
   daquela obra. É a área onde quem avalia assiste antes de ler.
   ========================================================================== */
.portfolio-bloco{
  padding-block:var(--secao);
  border-top:1px solid var(--linha);
}
.portfolio-bloco.inv{border-top-color:var(--linha-inv)}

.portfolio-cabeca{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gutter);
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:calc(var(--gutter) * 1.1);
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--linha);
}
.portfolio-cabeca h2{
  font-size:var(--t-xl);
  margin-block:.5rem .6rem;
}
.portfolio-acoes{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

/* uma coluna quando há um filme só, duas a partir de dois */
.lista-videos{display:grid;gap:var(--gutter)}
@media (min-width:769px){
  .lista-videos:has(> :nth-child(2)){grid-template-columns:repeat(2,1fr)}
}
.lista-videos .video-cartao h3{font-size:var(--t-md);font-weight:600}
.lista-videos .ressalva{font-size:var(--t-xs)}

/* crédito de produção de terceiro */
.credito{
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cinza-texto);
}
.credito strong{color:inherit;font-weight:600}

/* a capa do CNX é um quadro do filme, em 16x9. O recorte 4x3 do cartão
   cortaria as laterais e comeria a marca do projeto, então aqui o quadro
   aparece inteiro, sobre o fundo do próprio cartão. */
.projeto-cartao .figura.r-4x3 img[src$="cnx-capa.webp"]{object-fit:contain}

/* ==========================================================================
   PRÉVIA DE PÁGINA EXTERNA
   Uma página da obra que vive fora deste site, mostrada dentro da moldura
   de um notebook. O iframe é renderizado na largura de desktop declarada
   em LARGURA_PREVIA e reduzido por --escala, que o JS calcula a partir da
   largura real da tela: sem isso o site embutido cairia no layout de
   celular dentro de um notebook.
   ========================================================================== */
.previa-site{
  display:grid;
  gap:var(--gutter);
  align-items:center;
  margin-top:var(--gutter);
}
@media (min-width:900px){
  .previa-site{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
}

/* ---------- a máquina ---------- */
.mac{--escala:1;min-width:0}

.mac-tampa{
  position:relative;
  background:var(--tinta);
  border:1px solid var(--linha-forte);
  border-radius:14px 14px 4px 4px;
  padding:1.15rem .75rem .75rem;
  box-shadow:0 24px 48px rgba(0,0,0,.34);
}

/* a câmera do topo, do tamanho que ela tem: um ponto */
.mac-camera{
  position:absolute;top:.5rem;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--linha-forte);
}

.mac-tela{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--creme);
  border-radius:2px;
}

/* a página embutida, reduzida a partir do canto superior esquerdo */
.mac-quadro{
  position:absolute;top:0;left:0;
  /* o JS escreve --largura a partir de LARGURA_PREVIA; o 1440 aqui é
     só o valor de socorro se o script não rodar */
  width:var(--largura,1440px);
  height:calc(var(--largura,1440px) * 10 / 16);
  border:0;
  transform-origin:top left;
  transform:scale(var(--escala));
}

/* ---------- o primeiro clique ----------
   Enquanto o escudo está por cima, a rolagem da página passa reto e o
   iframe não a captura. Um clique libera a navegação de verdade. */
.mac-escudo{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:1.5rem;
  background:transparent;
  border:0;
  cursor:pointer;
  transition:background .4s var(--ease);
}
.mac-escudo:hover{background:rgba(22,20,19,.18)}

.mac-escudo-selo{
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--creme);
  background:rgba(22,20,19,.82);
  border:1px solid var(--linha-forte);
  padding:.6rem 1.15rem;
  transition:opacity .4s var(--ease);
}
.mac-escudo:focus-visible{outline:2px solid var(--creme);outline-offset:3px}

/* liberado: o escudo sai da frente de vez */
.mac-ativo .mac-escudo{display:none}

/* ---------- a base ---------- */
.mac-base{
  position:relative;
  width:112%;
  margin-left:-6%;
  height:13px;
  background:var(--tom-3);
  border:1px solid var(--linha-forte);
  border-top:0;
  border-radius:0 0 12px 12px;
}
/* o entalhe onde o dedo abre a tampa */
.mac-entalhe{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:14%;height:4px;
  background:var(--tinta);
  border-radius:0 0 6px 6px;
}

/* ---------- o texto ao lado ---------- */
.previa-url{
  font-size:var(--t-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cinza-texto);
  margin-top:1rem;
}
.previa-texto .hero-acoes{margin-top:1.5rem}

/* telas estreitas: a moldura perde a sombra pesada e o desenho da base,
   que a essa largura viram sujeira em vez de referência */
@media (max-width:600px){
  .mac-tampa{padding:.9rem .5rem .5rem;box-shadow:none}
  .mac-base{width:100%;margin-left:0;height:9px}
}

/* quem pediu menos movimento não ganha a transição do escudo */
@media (prefers-reduced-motion:reduce){
  .mac-escudo,.mac-escudo-selo{transition:none}
}

/* ==========================================================================
   24. PÁGINA DE PATRIMÔNIO (redesenho de 29/09/2026)
   Painel de situação, índice fixo, uma dobra por obra e janela de filmes.
   ========================================================================== */

/* ---- painel: o que cada selo quer dizer ---- */
.situacoes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  border-top:1px solid var(--linha);
}
.situacao{
  display:flex;flex-direction:column;gap:1rem;
  padding:calc(var(--gutter) * .55) calc(var(--gutter) * .6) calc(var(--gutter) * .55) 0;
  border-bottom:1px solid var(--linha);
}
@media (min-width:700px){
  .situacao + .situacao{border-left:1px solid var(--linha);padding-left:calc(var(--gutter) * .6)}
}
.situacao-cabeca{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.situacao-n{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-texto)}
.situacao .selo{font-size:var(--t-sm);padding:.5em 1em}
.situacao .texto{font-size:var(--t-base);color:var(--creme);opacity:.82}
.situacao-obras{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:auto}
.situacao-obras .link{font-size:var(--t-sm)}

/* ---- índice fixo ---- */
.indice-obras{
  position:sticky;
  top:var(--topo-h,0px);
  z-index:50;
  background:rgba(22,20,19,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-block:1px solid var(--linha);
}
.indice-obras-trilho{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  overflow-x:auto;scrollbar-width:none;
  padding-block:.9rem;
}
.indice-obras-trilho::-webkit-scrollbar{display:none}
.indice-rotulo{
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza-texto);white-space:nowrap;
}
.indice-obras a{
  display:inline-flex;align-items:baseline;gap:.55em;white-space:nowrap;
  font-size:var(--t-sm);font-weight:500;color:var(--cinza-texto);
  padding-bottom:.2em;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:color var(--dur) var(--ease),background-size var(--dur) var(--ease);
}
.indice-obras a:hover,.indice-obras a.ativo{color:var(--creme);background-size:100% 1px}
.indice-n{font-size:var(--t-xs);letter-spacing:.14em;color:var(--cinza-texto)}

/* a âncora para abaixo do cabeçalho e do índice, não debaixo deles */
.obra{scroll-margin-top:calc(var(--topo-h,0px) + 3.5rem)}

/* ---- a obra ---- */
.obra{padding-block:calc(var(--secao) * .75);border-top:1px solid var(--linha)}
.obra-grade{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:calc(var(--gutter) * 1.1);
  align-items:start;
}
/* obras alternam o lado da imagem, para o olho não ler três blocos iguais */
.obra:nth-child(even) .obra-midia{order:2}
@media (max-width:960px){
  .obra-grade{grid-template-columns:1fr}
  .obra:nth-child(even) .obra-midia{order:0}
}
.obra-midia{margin:0;position:sticky;top:calc(var(--topo-h,0px) + 5rem)}
@media (max-width:960px){ .obra-midia{position:static} }
.obra-midia .legenda{margin-top:.8rem}
.obra-capa{border:1px solid var(--linha)}
.obra-video{aspect-ratio:16/9;background:var(--tinta);border:1px solid var(--linha);overflow:hidden}
.obra-video video{width:100%;height:100%;object-fit:cover;display:block}
.obra-capa-contida img{object-fit:contain}

.obra-texto{display:flex;flex-direction:column;gap:1.25rem}
.obra-cabeca{display:flex;align-items:center;gap:1rem}
.obra-n{font-size:var(--t-sm);letter-spacing:.14em;color:var(--cinza-texto)}
.obra-texto h2{font-size:var(--t-xl);line-height:.95}
.obra-texto .linha-fina{margin-top:-.4rem}
.obra-texto .credito{margin:0}
/* a regra do hero da home limita .hero-acoes a 46% em tela larga; aqui não */
.obra-texto .hero-acoes{gap:.75rem;max-width:none}
.obra-texto .btn{padding:.95em 1.5em}

.obra-fatos{border-top:1px solid var(--linha);margin-top:.25rem}
.obra-fatos > div{
  display:grid;grid-template-columns:7rem 1fr;gap:1rem;
  padding-block:.7rem;border-bottom:1px solid var(--linha);
}
.obra-fatos dt{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinza-texto);padding-top:.15em;
}
.obra-fatos dd{font-size:var(--t-sm)}

.obra-conteudo{display:flex;flex-direction:column;gap:.7rem}
.obra-conteudo ul{display:flex;flex-wrap:wrap;gap:.5rem}
.obra-conteudo li{
  font-size:var(--t-xs);letter-spacing:.04em;
  border:1px solid var(--linha-forte);
  padding:.35em .75em;
  color:var(--cinza-texto);
}

/* ícone de play desenhado em CSS, herda a cor do botão */
.play{
  width:0;height:0;
  border-block:.38em solid transparent;
  border-left:.62em solid currentColor;
}

/* fechamento da página */
.fecho-patrimonio{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gutter);flex-wrap:wrap;
}

/* ---- janela dos filmes ---- */
.cinema{
  border:none;padding:0;background:transparent;color:var(--creme);
  width:min(100% - 2rem,70rem);max-height:calc(100dvh - 2rem);
  margin:auto;overflow:visible;
}
.cinema::backdrop{background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cinema[open]{animation:cinema-entra .35s var(--ease)}
@keyframes cinema-entra{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
.cinema-caixa{
  background:var(--tinta);border:1px solid var(--linha);
  padding:clamp(1rem,2.5vw,1.75rem);
  display:flex;flex-direction:column;gap:1rem;
  max-height:calc(100dvh - 2rem);overflow:auto;
}
.cinema-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.cinema-topo h2{font-size:var(--t-md);margin-top:.35rem}
.cinema-fechar{
  width:2.75rem;height:2.75rem;flex:none;
  border:1px solid var(--linha-forte);font-size:1.5rem;line-height:1;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.cinema-fechar:hover,.cinema-fechar:focus-visible{background:var(--creme);color:var(--tinta)}
.cinema-info{display:flex;flex-direction:column;gap:.6rem}
.cinema-info .texto{font-size:var(--t-sm)}
.cinema-lista{display:flex;flex-wrap:wrap;gap:.5rem;border-top:1px solid var(--linha);padding-top:1rem}
.cinema-lista:empty{display:none}
.cinema-lista button{
  display:inline-flex;align-items:baseline;gap:.55em;
  border:1px solid var(--linha-forte);padding:.6em 1em;
  font-size:var(--t-sm);color:var(--cinza-texto);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.cinema-lista button:hover{color:var(--creme)}
.cinema-lista button[aria-selected="true"]{background:var(--creme);color:var(--tinta);border-color:var(--creme)}
.cinema-lista button[aria-selected="true"] .indice-n{color:var(--tinta)}

@media (prefers-reduced-motion:reduce){
  .cinema[open]{animation:none}
}

/* ==========================================================================
   25. PÁGINA DE AUDIOVISUAL (redesenho de 29/09/2026)
   ========================================================================== */

/* capa de filme: é um botão, com o play por cima */
.filme-capa{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;overflow:hidden;
  background:var(--tom-3);border:1px solid var(--linha);
  cursor:pointer;
}
.filme-capa img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter var(--dur) var(--ease);
}
.filme-capa:hover img,.filme-capa:focus-visible img{transform:scale(1.04);filter:brightness(.8)}
.filme-play{
  position:absolute;left:50%;top:50%;
  width:4.25rem;height:4.25rem;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,20,19,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--linha-forte);
  color:var(--creme);font-size:1.25rem;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.filme-play .play{margin-left:.2em}
.filme-capa:hover .filme-play,.filme-capa:focus-visible .filme-play{
  background:var(--creme);color:var(--tinta);transform:translate(-50%,-50%) scale(1.06);
}
.filme-capa-grande .filme-play{width:6rem;height:6rem;font-size:1.75rem}
.filme-aviso{
  position:absolute;left:0;bottom:0;
  background:var(--tinta);color:var(--creme);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  padding:.4em .8em;
}

/* destaque */
.filme-destaque{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:calc(var(--gutter) * 1.1);align-items:center;
}
@media (max-width:960px){ .filme-destaque{grid-template-columns:1fr} }
.filme-destaque-texto{display:flex;flex-direction:column;gap:1.1rem}
.filme-destaque-texto h2{font-size:var(--t-xl);line-height:.95}
.filme-destaque-texto .hero-acoes{max-width:none;gap:.75rem}
.filme-destaque-texto .btn{padding:.95em 1.5em}

/* grade de filmes */
#filtros-filmes{margin-bottom:calc(var(--gutter) * .8)}
.filtro-n{opacity:.6;margin-left:.3em;font-variant-numeric:tabular-nums}
.grade-filmes{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));
  gap:calc(var(--gutter) * .8) var(--gutter);
}
.filme{display:flex;flex-direction:column;gap:.8rem}
.filme h3{font-size:var(--t-md)}
.filme .texto{font-size:var(--t-sm)}
.filme .credito{margin:0}
.filme-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.2rem}
.filme-obra{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-texto);
  transition:color var(--dur) var(--ease);
}
.filme-obra:hover{color:var(--creme)}
.filme-meta .selo{font-size:.625rem}

/* quatro frentes, numeradas */
.frentes-av{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linha);
}
.frentes-av li{
  display:flex;flex-direction:column;gap:.9rem;
  padding:calc(var(--gutter) * .55) calc(var(--gutter) * .5) 0 0;
}
.frentes-av li + li{border-left:1px solid var(--linha);padding-left:calc(var(--gutter) * .5)}
.frente-n{font-size:var(--t-xs);letter-spacing:.2em;color:var(--cinza-texto)}
.frentes-av h3{font-size:var(--t-md)}
.frentes-av .texto{font-size:var(--t-sm)}
@media (max-width:1024px){
  .frentes-av{grid-template-columns:repeat(2,1fr)}
  .frentes-av li:nth-child(3){border-left:none;padding-left:0}
  .frentes-av li{padding-bottom:calc(var(--gutter) * .5)}
}
@media (max-width:640px){
  .frentes-av{grid-template-columns:1fr}
  .frentes-av li + li{border-left:none;padding-left:0;border-top:1px solid var(--linha)}
}

/* nome próprio dentro de botão flex vira item à parte e abre vão; e em
   rótulo de caixa alta ele precisa acompanhar a caixa alta */
.cinema-lista button .nome-proprio,
.indice-obras a .nome-proprio{display:contents}
.etiqueta .nome-proprio,
.filme-obra .nome-proprio{text-transform:uppercase}

/* ==========================================================================
   26. PÁGINA DE OBRA: UX (29/09/2026)
   Resumo no cabeçalho, mapa da página, antes e depois em destaque,
   filmes enxutos e próxima obra.
   ========================================================================== */
.obra-intro{max-width:var(--leitura);font-size:var(--t-md);margin-top:calc(var(--gutter) * .6)}
.resumo-obra{
  display:flex;flex-wrap:wrap;gap:1.25rem clamp(1.5rem,4vw,3.5rem);
  margin-top:calc(var(--gutter) * .6);
}
.resumo-obra li{display:flex;flex-direction:column;gap:.35rem}
.resumo-n{font-size:var(--t-lg);font-weight:600;letter-spacing:-.03em;line-height:1}
.resumo-rotulo{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-texto)}

/* o mapa usa o mesmo desenho do índice de obras do patrimônio */
section[data-nav]{scroll-margin-top:calc(var(--topo-h,0px) + 3.5rem)}
.indice-secoes a{text-transform:lowercase}

/* antes e depois em destaque: um comparador grande e os pontos ao lado */
.ad-destaque{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);
  gap:calc(var(--gutter) * .6);align-items:start;
}
.ad-destaque.ad-unico{grid-template-columns:minmax(0,1fr)}
.ad-palco{margin:0}
.ad-palco .comparador{aspect-ratio:16/10}
.ad-palco .legenda{margin-top:.8rem}
.ad-pontos{display:flex;flex-direction:column;gap:.6rem}
.ad-ponto{
  display:grid;grid-template-columns:5.5rem 1fr;gap:.9rem;align-items:center;
  text-align:left;padding:.45rem;
  border:1px solid var(--linha);
  color:var(--cinza-texto);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.ad-ponto:hover{border-color:var(--linha-forte);color:var(--tinta)}
.ad-ponto[aria-selected="true"]{border-color:var(--tinta);color:var(--tinta);background:rgba(22,20,19,.05)}
.ad-miniatura{display:block;aspect-ratio:4/3;overflow:hidden}
.ad-miniatura img{width:100%;height:100%;object-fit:cover}
.ad-ponto-texto{display:flex;flex-direction:column;gap:.2rem;font-size:var(--t-sm);font-weight:500;line-height:1.3}
.ad-ponto .indice-n{color:inherit;opacity:.7}
@media (max-width:900px){
  .ad-destaque{grid-template-columns:minmax(0,1fr)}
  .ad-pontos{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem}
  .ad-pontos::-webkit-scrollbar{display:none}
  .ad-ponto{flex:0 0 13.5rem}
}

/* filmes além do primeiro, como capas */
.mais-filmes{display:flex;flex-direction:column;gap:1.25rem;margin-top:calc(var(--gutter) * 1.1)}

/* fim da página: ações e próxima obra */
.fim-obra{display:flex;flex-direction:column;gap:calc(var(--gutter) * .9)}
.proxima-obra{
  display:grid;grid-template-columns:minmax(0,16rem) 1fr;gap:calc(var(--gutter) * .6);
  align-items:center;padding-top:calc(var(--gutter) * .8);border-top:1px solid var(--linha);
}
.proxima-obra .figura{border:1px solid var(--linha)}
.proxima-texto{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.proxima-titulo{
  font-size:var(--t-xl);font-weight:600;letter-spacing:-.03em;line-height:1;text-transform:lowercase;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur) var(--ease);padding-bottom:.1em;
}
.proxima-obra:hover .proxima-titulo{background-size:100% 2px}
.proxima-obra .seta{display:inline-block;transition:transform var(--dur) var(--ease)}
.proxima-obra:hover .seta{transform:translateX(.3em)}
@media (max-width:640px){ .proxima-obra{grid-template-columns:1fr} }

/* faixa de fotos em loop infinito (acervo do audiovisual) */
.acervo-av{overflow:hidden}
.faixa-loop{
  --vao-loop:clamp(.75rem,1.6vw,1.25rem);
  overflow:hidden;
  /* as pontas somem em degradê, para a faixa entrar e sair da tela */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.faixa-loop-trilho{
  display:flex;gap:var(--vao-loop);width:max-content;
  animation:faixa-rolar var(--duracao-loop,42s) linear infinite;
}
/* pausa para olhar, e para quem navega por teclado */
.faixa-loop:hover .faixa-loop-trilho,
.faixa-loop:focus-within .faixa-loop-trilho{animation-play-state:paused}
/* anda metade do trilho (o original) mais meio vão, e recomeça no clone */
@keyframes faixa-rolar{
  to{transform:translateX(calc(-50% - var(--vao-loop) / 2))}
}
.faixa-loop-item{flex:0 0 auto;width:clamp(15rem,28vw,27rem);margin:0;display:flex;flex-direction:column;gap:.7rem}
.faixa-loop-item .figura{aspect-ratio:3/2}
.faixa-loop-item .legenda{margin:0}
/* quem pediu menos movimento: faixa parada, rolagem com o dedo, sem clones */
@media (prefers-reduced-motion:reduce){
  .faixa-loop{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .faixa-loop-trilho{animation:none;padding-inline:var(--gutter)}
  .faixa-loop-clone{display:none}
}

/* fotos que ampliam */
[data-visor] .figura{cursor:zoom-in}
[data-visor] .figura:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* visor de fotos, dentro da mesma janela da de cinema */
.visor-quadro{position:relative;background:#000;display:flex;align-items:center;justify-content:center}
.visor-quadro img{max-width:100%;max-height:calc(100dvh - 11rem);width:auto;height:auto;object-fit:contain}
.visor .cinema-topo{align-items:center}