/* =========================================================================
   Diamond Phoenix Entertainment
   Sistema de design, arquivo unico

   01  Variaveis
   02  Base e tipografia
   03  Fundo atmosferico
   04  Cursor
   05  Navegacao
   06  Botoes, selos e formularios
   07  Abertura
   08  Trilhos e cartoes
   09  Filtros
   10  Faixas institucionais
   11  Pagina de producao
   12  Editorial e listas
   13  Rodape
   14  Revelacao ao rolar
   15  Tablet
   16  Celular
   17  Movimento reduzido e impressao
   18  Cartaz lateral da abertura
   19  Pagina institucional
   ========================================================================= */

/* ---- 01  Variaveis ---------------------------------------------------- */
:root{
  /* profundidade */
  --abismo:      #01020A;
  --noite:       #03061A;
  --painel:      #070B2B;
  --painel-alto: #0A103D;

  /* Azul da fenix, ancorado na propria logo.
     O simbolo vive entre 232 e 236 graus de matiz, com brilho entre 0.33 e
     0.53: azul profundo, quase ultramarino. A escala antiga vivia perto de
     218 graus e chegava a brilho maximo, o azul de interface de aplicativo.
     A escala abaixo nunca passa de 0.91 de brilho, e o tom de acao fica no
     meio dela, para o botao ler como cinema e nao como banner. */
  --azul-950: #01072F;
  --azul-900: #020D5E;
  --azul-800: #030F72;
  --azul-700: #041490;
  --azul-600: #0618A6;
  --azul-500: #081CBA;
  --azul-400: #1B2FCC;
  --azul-300: #7B87E8;
  --azul-200: #A9B1F2;
  --brilho:   rgba(27,47,204,.55);

  /* metais */
  --prata:    #EAECFA;
  --prata-2:  #B3B7D8;
  --grafite:  #767BA0;
  --ouro:     #C9A54E;

  --linha:      rgba(143,156,247,.16);
  --linha-forte:rgba(143,156,247,.34);

  --sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --serif: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  /* Fonte exclusiva da navegacao. Avaliei tres candidatas para o menu:
     Jost, de desenho geometrico proximo da Futura, muito cinematografica
     mas com caixa alta pequena de leitura dura; Inter, legibilidade
     excelente e nenhuma personalidade; e Manrope, que tem terminacoes
     levemente cortadas e caixa alta aberta, o que sustenta o espacamento
     largo do menu sem borrar em corpo pequeno. Ficou a Manrope, e ela nao
     encosta em nenhum outro texto do site. */
  --menu: "Manrope", "Poppins", "Helvetica Neue", Arial, sans-serif;

  --margem: clamp(20px, 4.6vw, 76px);
  --topo: 96px;

  --curva: cubic-bezier(.22,.61,.36,1);
}

/* ---- 02  Base e tipografia -------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
/* O atributo hidden vale menos que qualquer classe que declare display, e
   quase todo componente daqui declara. Sem esta linha, esconder um elemento
   pelo atributo nao surte efeito nenhum: o botao de limpar a busca aparecia
   com o campo vazio, e a lista filtrada continuava mostrando tudo. */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  background:var(--abismo);
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--prata-2);
  background:var(--abismo);
  overflow-x:hidden;
  line-height:1.6;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }

h1,h2,h3,h4,h5{ margin:0; color:#fff; font-weight:600; letter-spacing:-.02em; line-height:1.05; }

/* Tres degraus de titulo, e cada um sabe o seu lugar. O corpo grande fica
   so na abertura, onde e a producao em destaque que fala. Titulo de fileira
   e uma etiqueta de prateleira: precisa nomear a lista, nao roubar a cena
   dos cartazes que vem logo abaixo. */
.display{ font-size:clamp(38px,5.6vw,80px); }
/* Em tela muito estreita o titulo desce abaixo do piso do intervalo acima. O
   motivo e o nome da marca: ele viaja com espaco inseparavel, para nunca
   quebrar em duas linhas, e por isso conta como uma unica palavra de trinta
   caracteres. A trinta e oito pixels essa palavra mede mais que a largura de
   um telefone de trezentos e vinte pixels, e a pagina ganhava rolagem
   lateral. Encolher o titulo mantem a regra da marca de pe e devolve a
   pagina inteira para dentro da tela. */
@media (max-width:400px){
  .display{ font-size:clamp(27px,8.4vw,38px); }
}
.titulo{ font-size:clamp(24px,2.5vw,34px); }
.titulo--faixa{ font-size:clamp(18px,1.45vw,22px); letter-spacing:-.005em; }
.subtitulo{ font-size:clamp(19px,1.9vw,25px); letter-spacing:-.01em; }

.rotulo{
  font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:#8D96D5; display:inline-flex; align-items:center; gap:14px;
}
.rotulo::before{
  content:""; width:28px; height:1px; background:var(--azul-400);
}

.lide{ font-size:clamp(16px,1.28vw,19px); line-height:1.62; color:#C4C8E8; }
.texto{ font-size:15.5px; line-height:1.75; color:#979CC0; }
.mini{ font-size:13px; line-height:1.62; color:var(--grafite); }

.centro{ width:min(100% - var(--margem)*2, 1560px); margin-inline:auto; }
.estreito{ width:min(100% - var(--margem)*2, 900px); margin-inline:auto; }

.oculto-visual{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.pular{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--azul-500); color:#fff; padding:14px 22px;
}
.pular:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--azul-300); outline-offset:3px; }

/* nome da marca nunca quebra */
.marca-nome{ white-space:nowrap; }

/* ---- 03  Fundo atmosferico -------------------------------------------- */
/* As auroras sao camadas fixas de degrade. Nao animam: um degrade em tela
   cheia que se move obriga o navegador a repintar a pagina inteira. */
/* Profundidade em camadas, do quase preto azulado no rodape ate o azul
   medio no alto. As manchas perderam forca e ganharam alcance: antes eram
   tres focos fortes que lavavam a tela de azul, agora sao degrades longos
   que dao sensacao de profundidade sem chapar a cor. */
.aurora{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(132% 88% at 76% 6%,   rgba(6,24,166,.42) 0%, rgba(6,24,166,.12) 42%, rgba(6,24,166,0) 66%),
    radial-gradient(110% 78% at 14% 36%,  rgba(3,15,114,.44) 0%, rgba(3,15,114,.10) 46%, rgba(3,15,114,0) 70%),
    radial-gradient(84% 64% at 56% 100%,  rgba(27,47,204,.16) 0%, rgba(27,47,204,0) 62%),
    linear-gradient(170deg, #071046 0%, #040A2C 34%, #020517 64%, #01020A 100%);
}
.aurora::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(52% 34% at 70% 20%, rgba(123,135,232,.16), rgba(123,135,232,0) 72%),
    radial-gradient(42% 30% at 20% 62%, rgba(6,24,166,.20), rgba(6,24,166,0) 74%);
  filter:blur(3px);
}
/* granulado sutil, tira o aspecto de degrade de banco de imagem */
.grao{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23r)' opacity='.6'/></svg>");
}

.secao{ padding:clamp(64px,7vw,116px) 0; position:relative; }
.secao--curta{ padding:clamp(46px,4.4vw,72px) 0; }
/* Fileira de catalogo respira menos que secao de texto, de proposito. Uma
   biblioteca se le em sequencia: o vao grande entre uma fileira e a
   seguinte quebrava a leitura e deixava buraco no meio da pagina. */
.secao--faixa{ padding:clamp(18px,1.8vw,26px) 0; position:relative; }
.secao--faixa:first-of-type{ padding-top:clamp(26px,2.6vw,38px); }
.secao--faixa .secao-topo{ margin-bottom:clamp(12px,1.2vw,18px); }

/* Capa curta, para pagina de catalogo. A capa cheia empurrava a primeira
   fileira para fora da tela na abertura. */
.capa--curta{ padding-bottom:clamp(18px,2vw,30px); }

.secao-topo{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  margin-bottom:clamp(18px,1.8vw,28px);
}
.secao-topo h2{ display:flex; align-items:center; gap:16px; }
.secao-topo h2::before{
  content:""; width:4px; height:1.05em; border-radius:3px; flex:none;
  background:linear-gradient(180deg, var(--ouro), rgba(201,165,78,.12));
}
.secao-topo .acessorio{ margin-left:auto; }

.link-seta{
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:#8D96D5; display:inline-flex; align-items:center; gap:10px;
  transition:color .3s var(--curva), gap .3s var(--curva);
}
.link-seta:hover{ color:#fff; gap:16px; }

/* ---- 04  Cursor ------------------------------------------------------- */
/* Chama azul da fenix. O laco dorme quando o ponteiro para, senao o
   navegador desenha 60 quadros por segundo para nada. */
#chama{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  display:none; mix-blend-mode:normal;
}
body.tem-chama{ cursor:none; }
body.tem-chama a,
body.tem-chama button,
body.tem-chama input,
body.tem-chama textarea,
body.tem-chama select,
body.tem-chama [role="button"]{ cursor:none; }
body.tem-chama #chama{ display:block; }

/* ---- 05  Navegacao ---------------------------------------------------- */
.topo{
  position:fixed; top:0; left:0; right:0; z-index:120;
  height:var(--topo);
  /* A assinatura empurra tudo o mais para a direita. O menu de paginas e as
     ferramentas viajam juntos, encostados na margem direita, e a sobra de
     largura vira respiro entre o nome da marca e a primeira palavra do
     menu. Antes os dois grupos se espalhavam pela faixa inteira e o
     cabecalho lia como uma parede de texto. */
  display:flex; align-items:center;
  padding-inline:var(--margem);
  background:linear-gradient(180deg, rgba(1,3,18,.52) 0%, rgba(1,3,18,.16) 62%, rgba(1,3,18,0) 100%);
  transition:background .45s var(--curva), height .45s var(--curva), box-shadow .45s var(--curva);
}
.topo.rolado{
  height:78px;
  background:rgba(2,5,22,.86);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(143,156,247,.12);
}

.assinatura{ display:flex; align-items:center; gap:15px; flex:none; margin-right:auto; }
.assinatura .simbolo{
  width:46px; height:62px; margin-top:6px; flex:none;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(27,47,204,.45));
  transition:height .45s var(--curva), filter .45s var(--curva);
}
.topo.rolado .assinatura .simbolo{ height:52px; }

.assinatura .nome{
  font-family:var(--serif);
  /* Dezenove pixels a partir de 1440, que e o desenho aprovado. Abaixo
     disso encolhe de forma quase imperceptivel, so para o menu continuar
     cabendo na mesma faixa sem encostar no nome. */
  font-size:clamp(17px,1.32vw,19px); font-weight:600; letter-spacing:.10em;
  line-height:1;
  background:linear-gradient(180deg,#FFFFFF 8%,#CBCFEC 52%,#878CB2 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding-block:4px;
  /* A sombra fica atras do texto, nao nele: preenchimento transparente com
     recorte de fundo ignora text-shadow. Sem isso o nome some sobre a foto
     clara da abertura. */
  filter:drop-shadow(0 1px 14px rgba(0,2,14,.9));
}
/* Marca registrada legivel.
   A 0,42 do corpo, sobre um nome de dezenove pixels, o simbolo saia com oito
   pixels: nesse tamanho o R dentro do circulo vira um ponto e ninguem le o
   que esta escrito ali. Subiu para 0,56, que da onze pixels, e desceu um
   pouco na altura, saindo de encostado no topo das maiusculas. Continua
   discreto, e agora se le. A cor e declarada aqui porque o nome pinta as
   letras por recorte de fundo, e nas bordas do recorte o simbolo pegava o
   tom mais claro do degrade e se dissolvia nele. */
.assinatura .nome sup{
  font-size:.56em; letter-spacing:0; top:-.66em;
  -webkit-text-fill-color:#C8CDEA; color:#C8CDEA;
}

/* Assinatura empilhada, usada so no rodape. O simbolo fica centralizado
   sobre a palavra Phoenix, e nao a esquerda da primeira letra.

   Isso e uma grade de tres colunas, uma por palavra, com o simbolo ocupando
   a coluna do meio na linha de cima. E o unico jeito de centralizar sobre uma
   palavra especifica sem medir largura de fonte no JavaScript, que quebraria
   assim que a fonte mudasse de corpo, de peso ou de idioma.

   Como cada palavra e um item de grade, elas nunca caem em linhas
   diferentes: a protecao do nome da marca continua valendo, agora pela
   propria estrutura. */
/* O seletor carrega a coluna do rodape de proposito. A regra generica
   .rodape__coluna a marca todo link da coluna como bloco, e por ter peso
   maior ela vencia a grade desta assinatura: as tres partes voltavam a ser
   texto corrido, o simbolo perdia a centralizacao e o conjunto quebrava
   onde sobrasse espaco. Era essa a origem da assinatura torta, e nao a
   estrutura em si.

   A mesma regra generica dava margem embaixo e deslocava o link cinco
   pixels para a direita na passagem do ponteiro. Numa lista de links isso e
   o efeito desejado; num logotipo, e a marca saindo do lugar. */
.rodape__coluna a.assinatura-empilhada{
  display:grid; grid-template-columns:max-content;
  justify-content:start; margin-bottom:0;
  /* Sem vao de grade entre as linhas. As duas linhas do nome sao um bloco
     so, como em qualquer logotipo empilhado, e o unico respiro que fica
     entre elas e o proprio da caixa da letra. O afastamento do simbolo vem
     por margem propria dele.

     Medido contra a referencia: na arte oficial o vao entre as duas linhas
     vale 0,66 da altura da letra. Sem vao nenhum de grade o site ficava em
     0,48, apertado demais; com dois pixels bate em 0,64. */
  row-gap:2px;
}
.rodape__coluna a.assinatura-empilhada:hover{ padding-left:0; }
.assinatura-empilhada img{
  justify-self:center; margin-bottom:13px;
  width:46px; height:62px; object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(27,47,204,.45));
}
.assinatura-empilhada__nome,
.assinatura-empilhada__base{
  font-family:var(--serif);
  font-size:clamp(16px,1.24vw,19px); font-weight:600; line-height:1;
  background:linear-gradient(180deg,#FFFFFF 8%,#CBCFEC 52%,#878CB2 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding-block:1px;
  filter:drop-shadow(0 1px 14px rgba(0,2,14,.9));
}
.assinatura-empilhada__nome{ letter-spacing:.10em; white-space:nowrap; }

/* A linha de baixo distribui as proprias letras na largura da linha de
   cima. Espacar por espaco entre itens, e nao por espacamento de letra
   escrito a mao, e o que faz o E cair exatamente sob o D e o T final sob o
   X em qualquer corpo de fonte. O espacamento herdado precisa ser zerado
   aqui, senao ele soma ao vao e a palavra passa da linha de cima. */
.assinatura-empilhada__base{
  position:relative;
  display:flex; justify-content:space-between;
  letter-spacing:0;
  /* Largura zero com largura minima de cem por cento: e o que faz esta linha
     ocupar toda a coluna sem participar da medida dela. Sem isso a coluna
     passaria a valer o que a palavra Entertainment mede sozinha, que e mais
     do que Diamond Phoenix, e a base ficaria maior do que a linha de cima em
     vez de terminar junto com ela. */
  width:0; min-width:100%;
}
.assinatura-empilhada__base b{ font-weight:inherit; }

/* O simbolo de marca registrada fica fora da distribuicao, encostado no
   fim da palavra. Dentro dela, ele contaria como mais um item e empurraria
   o T final para dentro, desalinhando a base inteira. */
.assinatura-empilhada__base sup{
  position:absolute; left:100%; top:-.02em;
  font-size:.56em; letter-spacing:0;
  -webkit-text-fill-color:#C2C7E6; color:#C2C7E6;
}

.menu{
  display:flex; align-items:center;
  gap:clamp(17px,1.85vw,30px);
}
.menu > li{ display:flex; align-items:center; gap:8px; }
.menu > li > a{
  position:relative; display:block; padding:12px 2px;
  font-family:var(--menu);
  font-size:clamp(11.5px,.92vw,13.5px); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:#D6D9F2;
  text-shadow:0 1px 12px rgba(0,2,14,.75);
  transition:color .3s var(--curva);
}
.menu > li > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:2px;
  background:linear-gradient(90deg,var(--azul-400),rgba(27,47,204,0));
  transition:right .38s var(--curva);
}
.menu > li > a:hover{ color:#fff; }
.menu > li > a:hover::after,
.menu > li > a[aria-current="page"]::after{ right:0; }

.ferramentas{
  display:flex; align-items:center; gap:14px; flex:none;
  margin-left:clamp(26px,2.4vw,40px);
}

/* Seletor de idioma em submenu. As tres siglas soltas lado a lado somavam
   quase noventa pixels de largura no cabecalho e competiam com o menu de
   paginas. Aqui aparece so o idioma corrente, e a lista abre ao clique. */
.idiomas{ position:relative; }
.idiomas__atual{
  display:flex; align-items:center; gap:7px;
  height:40px; padding:0 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linha-forte); background:rgba(3,6,26,.42);
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.16em;
  color:#D6D9F2;
  transition:border-color .3s var(--curva), background .3s var(--curva), color .3s var(--curva);
}
.idiomas__atual:hover{ border-color:var(--azul-400); background:rgba(8,28,186,.24); color:#fff; }
.idiomas__atual svg{ transition:transform .3s var(--curva); }
.idiomas__atual[aria-expanded="true"] svg{ transform:rotate(180deg); }
.idiomas__atual[aria-expanded="true"]{ border-color:var(--azul-400); color:#fff; }

.idiomas__lista{
  position:absolute; top:calc(100% + 10px); right:0; z-index:10;
  min-width:172px; margin:0; padding:7px; list-style:none;
  border:1px solid var(--linha-forte); border-radius:16px;
  background:rgba(5,8,34,.97); backdrop-filter:blur(18px);
  box-shadow:0 22px 54px rgba(0,1,12,.7);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .26s var(--curva), transform .26s var(--curva), visibility .26s;
}
.idiomas__lista.aberta{ opacity:1; visibility:visible; transform:none; }
.idiomas__lista button{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; padding:10px 14px; border:0; border-radius:999px; cursor:pointer;
  background:none; color:#B3B7D8;
  font-family:var(--sans); font-size:13px; font-weight:400; letter-spacing:.02em; text-align:left;
  transition:background .24s var(--curva), color .24s var(--curva);
}
.idiomas__lista button i{
  font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.18em; color:#676C94;
}
.idiomas__lista button:hover{ background:rgba(8,28,186,.28); color:#fff; }
.idiomas__lista button[aria-pressed="true"]{ color:#fff; background:rgba(8,28,186,.18); }
.idiomas__lista button[aria-pressed="true"] i{ color:var(--azul-300); }

.redondo{
  width:40px; height:40px; border-radius:50%; flex:none;
  border:1px solid var(--linha-forte); background:rgba(3,6,26,.42);
  display:flex; align-items:center; justify-content:center;
  color:#D6D9F2; cursor:pointer;
  transition:border-color .3s var(--curva), background .3s var(--curva), color .3s var(--curva);
}
.redondo:hover{ border-color:var(--azul-400); background:rgba(8,28,186,.24); color:#fff; }

.abre-menu{ display:none; }

/* painel de navegacao em tela cheia, celular e tablet */
/* Painel de tela cheia do celular. O anterior era uma lista de palavras
   brancas sobre preto: funcionava e nao dizia nada. Aqui cada pagina vira
   uma linha numerada, com regua fina entre uma e outra, seta que anda no
   toque e entrada em cascata de cima para baixo. O fundo repete o mesmo
   desenho de brasa e azul das paginas de texto, e o simbolo da marca fica
   marca d'agua no canto: e o painel que apresenta a casa, nao um indice.

   O item de Contato aparece uma vez so. Ele estava tambem no rodape do
   painel, como atalho, e a mesma palavra duas vezes na mesma tela faz a
   pessoa duvidar de qual das duas e a certa. O rodape ficou com o que nao
   se repete: idioma, redes e o endereco de e-mail. */
.painel-menu{
  position:fixed; inset:0; z-index:130;
  background:
    radial-gradient(58% 40% at 96% 2%,  rgba(198,26,62,.34) 0%, rgba(150,18,50,0) 68%),
    radial-gradient(76% 52% at 6% 100%, rgba(36,72,236,.34) 0%, rgba(20,40,150,0) 72%),
    linear-gradient(168deg,#050B34 0%,#02061F 52%,#000210 100%);
  display:flex; flex-direction:column;
  padding:calc(var(--topo) + 6px) var(--margem) 26px;
  /* Corte na horizontal, rolagem so na vertical. A marca d'agua do canto
     passa de proposito para fora da caixa, e sem este corte ela alargava a
     area rolavel da pagina inteira. */
  overflow:hidden auto;
  /* Entrada do painel.
     A versao anterior descia a folha inteira de uma vez, como uma caixa
     empurrada de cima. Aqui o painel ganha altura em vez de posicao: ele
     abre a partir da borda de cima, com o conteudo ja no lugar, e so
     revela mais area conforme cresce. E o mesmo gesto de uma cortina, e nao
     o de um bloco caindo.

     A saida e mais curta que a entrada de proposito: abrir e um convite,
     fechar e um comando, e comando lento incomoda. */
  transform-origin:top center;
  clip-path:inset(0 0 100% 0);
  opacity:0;
  visibility:hidden;
  transition:clip-path .18s cubic-bezier(.4,0,.2,1),
             opacity .14s ease,
             visibility .18s;
}
.painel-menu.aberto{
  clip-path:inset(0 0 0 0);
  opacity:1;
  visibility:visible;
  transition:clip-path .26s cubic-bezier(.22,.9,.24,1),
             opacity .16s ease,
             visibility .26s;
}

/* Sai na hora, sem animacao nenhuma, quando o toque no item ja e uma
   navegacao. Animar a saida nesse caso e tempo cobrado de graca: a pessoa
   ja pediu outra pagina e continua olhando o menu que ela mandou fechar. */
.painel-menu.saindo,
.painel-menu.saindo nav li,
.painel-menu.saindo .painel-menu__pe,
.painel-menu.saindo .idiomas,
.painel-menu.saindo .painel-menu__marca{ transition:none; animation:none; }

/* Os itens entram atras da cortina, um depois do outro. O atraso cresce por
   posicao e para no oitavo.

   Estes tempos valem para a saida e como reserva. Quem manda na entrada e a
   animacao menu-entra, declarada mais abaixo, que por ter preenchimento nos
   dois lados vence a transicao. Os dois foram encurtados juntos para o
   conjunto assentar antes de 360 ms. */
.painel-menu nav li{
  opacity:0; transform:translateY(10px);
  transition:opacity .18s ease, transform .18s cubic-bezier(.22,.9,.24,1);
}
.painel-menu.aberto nav li{ opacity:1; transform:none; }
.painel-menu.aberto nav li:nth-child(1){ transition-delay:.02s; }
.painel-menu.aberto nav li:nth-child(2){ transition-delay:.04s; }
.painel-menu.aberto nav li:nth-child(3){ transition-delay:.06s; }
.painel-menu.aberto nav li:nth-child(4){ transition-delay:.08s; }
.painel-menu.aberto nav li:nth-child(5){ transition-delay:.10s; }
.painel-menu.aberto nav li:nth-child(6){ transition-delay:.12s; }
.painel-menu.aberto nav li:nth-child(7){ transition-delay:.14s; }
.painel-menu.aberto nav li:nth-child(n+8){ transition-delay:.16s; }

/* O rodape do painel, com idiomas e redes, fecha a sequencia. */
.painel-menu__pe,
.painel-menu .idiomas,
.painel-menu__marca{
  opacity:0; transition:opacity .2s ease;
}
.painel-menu.aberto .painel-menu__pe,
.painel-menu.aberto .idiomas,
.painel-menu.aberto .painel-menu__marca{ opacity:1; transition-delay:.14s; }

/* Fechando, tudo volta junto e sem espera: ninguem quer ver uma sequencia
   coreografada quando ja decidiu sair. */
.painel-menu:not(.aberto) nav li,
.painel-menu:not(.aberto) .painel-menu__pe,
.painel-menu:not(.aberto) .idiomas,
.painel-menu:not(.aberto) .painel-menu__marca{ transition-delay:0s; }

@media (prefers-reduced-motion: reduce){
  .painel-menu,
  .painel-menu.aberto{ transition-duration:.01ms; }
  .painel-menu nav li,
  .painel-menu.aberto nav li{ transition:none; opacity:1; transform:none; }
  .painel-menu__pe, .painel-menu .idiomas, .painel-menu__marca{ opacity:1; transition:none; }
}

/* Simbolo em marca d'agua. Fica atras de tudo, sem area de toque e sem
   entrar na leitura de tela. E uma imagem no HTML, e nao um fundo escrito no
   CSS: o endereco de um fundo de CSS e relativo a folha de estilo, e a copia
   de conferencia junta tudo num arquivo so, onde esse caminho deixa de
   existir. Como imagem, ela viaja junto. */
.painel-menu__marca{
  position:absolute; right:-14%; bottom:-6%;
  width:min(78vw, 460px); height:auto;
  opacity:.05; pointer-events:none; filter:blur(.4px);
}

/* Tudo daqui para baixo vale so para a lista de paginas. Sem o nav no
   seletor, a mesma regra pegava tambem os botoes de idioma e os icones de
   rede que moram no rodape do painel, e os tres viravam linhas gigantes
   empilhadas uma sobre a outra. */
.painel-menu nav{ margin-block:auto; position:relative; z-index:1; }
.painel-menu nav ul{ display:flex; flex-direction:column; gap:0; }
.painel-menu nav li{ display:block; border-top:1px solid rgba(123,135,232,.16); }
.painel-menu nav li:last-child{ border-bottom:1px solid rgba(123,135,232,.16); }
.painel-menu nav a{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(12px,3vw,18px);
  padding-block:clamp(11px,2vh,18px);
  font-family:var(--menu);
  font-size:min(7.2vw, 5.4vh, 34px);
  font-weight:600; color:#fff; letter-spacing:-.02em;
  transition:color .3s var(--curva);
}
.painel-menu nav a[aria-current]{ color:#A9B1F2; }
.painel-menu__conta{
  font-family:var(--menu); font-style:normal;
  font-size:11px; font-weight:700; letter-spacing:.2em;
  color:#6D7DF2; font-variant-numeric:tabular-nums;
  /* alinhado pelo topo da palavra, e nao pelo meio: numero centralizado ao
     lado de um tipo desse tamanho parece ter escorregado para baixo */
  align-self:start; padding-top:.72em;
}
.painel-menu__seta{
  color:#5C6690;
  transition:transform .32s var(--curva), color .32s var(--curva);
}
.painel-menu nav a:hover .painel-menu__seta,
.painel-menu nav a:focus-visible .painel-menu__seta{ color:#A9B1F2; transform:translateX(5px); }

/* Entrada em cascata. Cada linha entra logo depois da anterior, o que da ao
   painel a sensacao de abrir e nao de aparecer pronto.

   Esta e a regra que de fato governa a entrada dos itens: sendo animacao com
   preenchimento nos dois lados, ela vence a transicao declarada mais acima.
   Medido no tempo antigo, de meio segundo com atraso de 0,16 s mais 0,055 s
   por posicao: o segundo item so ficava legivel aos 441 ms e completo aos
   641 ms, e o ultimo da lista fechava perto de 935 ms. Num menu de celular
   isso nao le como cascata, le como toque que nao respondeu, e a pessoa toca
   de novo.

   Nos tempos atuais a lista inteira assenta antes de 360 ms, e a cascata
   continua visivel. */
.painel-menu.aberto nav li{
  animation:menu-entra .22s var(--curva) both;
  animation-delay:calc(.03s + var(--ordem, 0) * .022s);
}
@keyframes menu-entra{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Rodape do painel em duas linhas: idiomas em cima, redes e e-mail embaixo.
   Numa linha so as tres pilulas de idioma mais cinco icones nao cabem na
   largura de um telefone, e a ultima pilula saia da tela. */
.painel-menu .rodape-menu{
  position:relative; z-index:1; flex:none;
  display:flex; flex-direction:column; gap:15px;
  padding-top:18px; margin-top:18px; border-top:1px solid rgba(123,135,232,.16);
}
.rodape-menu__baixo{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.rodape-menu__redes{ list-style:none; margin:0; padding:0; display:flex; gap:7px; flex-wrap:wrap; }
.rodape-menu__redes a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--linha); color:#A1A6C9;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--curva), color .3s var(--curva), background .3s var(--curva);
}
.rodape-menu__redes a:hover{ border-color:var(--azul-400); color:#fff; background:rgba(27,47,204,.24); }
.rodape-menu__redes svg{ width:16px; height:16px; }
.rodape-menu__email{
  font-size:13px; letter-spacing:.02em; color:#A9B1F2; overflow-wrap:anywhere;
}
.rodape-menu__email:hover{ color:#fff; }

@media (prefers-reduced-motion:reduce){
  .painel-menu.aberto nav li{ animation:none; }
}
.painel-menu .idiomas__lista{
  position:static; opacity:1; visibility:visible; transform:none;
  min-width:0; background:none; border:0; box-shadow:none; padding:0;
  display:flex; gap:7px; flex-wrap:wrap;
}
.painel-menu .idiomas__atual{ display:none; }
.painel-menu .idiomas__lista button{
  width:auto; padding:7px 12px; font-size:12.5px;
  border:1px solid var(--linha); border-radius:999px;
}
.fecha-menu{
  position:absolute; top:20px; right:var(--margem); z-index:2;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--linha-forte); background:rgba(4,8,32,.6); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--curva), background .3s var(--curva), transform .3s var(--curva);
}
.fecha-menu:hover{ border-color:var(--azul-400); background:rgba(27,47,204,.3); transform:rotate(90deg); }

/* Etiqueta ao lado de um item do menu, como a da Loja que ainda vai abrir.
   Fica fora do link de proposito: anuncia o estado sem virar area
   clicavel, e sem alargar a area de toque do proprio item. */
.menu__etiqueta{
  flex:none; padding:3px 7px; border-radius:2px;
  font-family:var(--menu); font-size:8.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:#E3C879; border:1px solid rgba(201,165,78,.52); background:rgba(201,165,78,.1);
  white-space:nowrap;
}
.painel-menu .menu__etiqueta{ font-size:11px; padding:5px 10px; }

/* Painel de busca de producao, preso abaixo do cabecalho. Ele desce sobre a
   pagina em vez de empurrar o conteudo: empurrar faria a pagina inteira
   pular para baixo a cada abertura, e quem esta no meio de uma leitura
   perde o ponto onde estava. A lista ja vem escrita no HTML, o roteiro so
   mostra e esconde linha, entao ela continua util sem JavaScript. */
.busca{
  position:fixed; left:0; right:0; top:var(--topo); z-index:118;
  padding:0 var(--margem);
  background:linear-gradient(180deg, #04081F 0%, #01030F 100%);
  border-bottom:1px solid rgba(123,135,232,.22);
  box-shadow:0 30px 70px rgba(0,1,10,.6);
  opacity:0; transform:translateY(-14px);
  transition:opacity .32s var(--curva), transform .32s var(--curva);
}
.busca.aberta{ opacity:1; transform:translateY(0); }
.busca > .centro{ padding-block:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px); }

.busca__barra{
  display:flex; align-items:center; gap:12px;
  padding:0 6px 0 16px; height:56px;
  border:1px solid var(--linha-forte); border-radius:4px;
  background:rgba(5,9,38,.6);
  transition:border-color .3s var(--curva), background .3s var(--curva);
}
.busca__barra:focus-within{ border-color:var(--azul-400); background:rgba(8,14,58,.7); }
.busca__barra > svg{ flex:none; color:#7B87E8; }
.busca__campo{
  flex:1; min-width:0; height:100%;
  border:0; background:none; outline:none;
  font-family:var(--sans); font-size:16px; font-weight:300; color:#fff;
}
.busca__campo::placeholder{ color:#585D83; }
/* o botao de limpar que o navegador desenha sozinho briga com o nosso */
.busca__campo::-webkit-search-cancel-button{ display:none; }
.busca__fecha{
  flex:none; width:42px; height:42px; border-radius:3px;
  border:0; background:none; color:#8A90BC; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .3s var(--curva), background .3s var(--curva);
}
.busca__fecha:hover{ color:#fff; background:rgba(123,135,232,.14); }
.busca__dica{
  margin:12px 0 0; font-size:12px; letter-spacing:.04em; color:#797FA9;
}

.busca__lista{
  list-style:none; margin:14px 0 0; padding:0;
  max-height:min(52vh, 430px); overflow-y:auto;
  display:grid; gap:2px;
}
.busca__item a{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px;
  padding:9px 12px 9px 9px; border-radius:4px;
  border:1px solid transparent;
  transition:background .28s var(--curva), border-color .28s var(--curva);
}
.busca__item a:hover,
.busca__item a:focus-visible{
  background:rgba(27,47,204,.16); border-color:rgba(123,135,232,.34);
}
/* A moldura do cartaz precisa ser um bloco posicionado. A arte provisoria,
   que entra quando a obra ainda nao tem cartaz, e absoluta com inset zero:
   sem posicao aqui ela procurava o ancestral posicionado mais proximo, que
   era o painel de busca inteiro, e se esticava por cima de tudo. O painel
   abria como uma mancha azul, sem campo e sem lista, embora os dois
   estivessem montados e no lugar certo o tempo todo. */
.busca__arte{
  display:block; position:relative;
  aspect-ratio:5/7; border-radius:2px; overflow:hidden;
  background:linear-gradient(160deg,#0A1046,#03061C);
}
.busca__arte img{ width:100%; height:100%; object-fit:cover; }
.busca__arte .arte-vazia{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.busca__arte .arte-vazia img{ width:20px; height:auto; object-fit:contain; }
.busca__texto{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.busca__texto strong{
  font-size:15.5px; font-weight:500; color:#fff; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.busca__texto span{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#797FA9;
}
.busca__seta{ color:#5C6690; transition:color .28s var(--curva), transform .28s var(--curva); }
.busca__item a:hover .busca__seta{ color:#A9B1F2; transform:translateX(3px); }
.busca__vazio{
  margin:16px 0 4px; font-size:14px; color:#A3ABDD;
}

@media (max-width:760px){
  .busca__barra{ height:50px; padding-left:13px; }
  .busca__campo{ font-size:16px; }
  .busca__lista{ max-height:56vh; }
  .busca__item a{ grid-template-columns:38px 1fr auto; gap:12px; }
}

/* ---- 06  Botoes, selos e formularios ---------------------------------- */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:54px; padding:0 32px; border:0; border-radius:3px;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
  transition:transform .3s var(--curva), box-shadow .3s var(--curva), background .3s var(--curva);
}
/* Degrade profundo, do quase ultramarino ao azul medio. Tres paradas e nao
   duas: com duas, a peca lia como um bloco chapado de azul de aplicativo. */
.botao--chama{
  color:#fff;
  background:linear-gradient(132deg,var(--azul-900) 0%,var(--azul-700) 42%,var(--azul-500) 78%,var(--azul-400) 100%);
  box-shadow:0 14px 38px rgba(4,20,144,.5), inset 0 1px 0 rgba(169,177,242,.22);
}
.botao--chama:hover{
  transform:translateY(-2px);
  background:linear-gradient(132deg,var(--azul-800) 0%,var(--azul-600) 42%,var(--azul-400) 82%,#2739DE 100%);
  box-shadow:0 20px 52px rgba(6,24,166,.62), inset 0 1px 0 rgba(169,177,242,.3);
}
.botao--vidro{
  color:#EAECFA; border:1px solid rgba(191,197,239,.44);
  background:rgba(5,8,34,.36);
}
.botao--vidro:hover{ border-color:#fff; background:rgba(8,28,186,.22); transform:translateY(-2px); }
.botao--curto{ min-height:46px; padding:0 24px; font-size:12px; }
.botao--largo{ width:100%; }

.selo{
  display:inline-flex; align-items:center; gap:9px;
  min-height:30px; padding:0 14px; border-radius:2px;
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--linha-forte); color:#C6CAEA; background:rgba(4,7,30,.6);
}
.selo--ouro{ border-color:rgba(201,165,78,.62); color:#E3C879; }
.selo--azul{ border-color:rgba(27,47,204,.68); color:#96A2F7; }

.dados{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#9398BE;
}
.dados i{ font-style:normal; opacity:.36; }

.campo{ display:block; margin-bottom:20px; }
.campo > span{
  display:block; margin-bottom:9px;
  font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#858AB2;
}
.campo input, .campo textarea, .campo select{
  width:100%; min-height:54px; padding:15px 18px;
  font-family:var(--sans); font-size:15px; font-weight:300; color:#fff;
  background:rgba(5,8,34,.5); border:1px solid var(--linha-forte); border-radius:3px;
  transition:border-color .3s var(--curva), background .3s var(--curva);
}
.campo textarea{ min-height:132px; resize:vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus{
  outline:none; border-color:var(--azul-400); background:rgba(8,14,58,.66);
}
.campo input::placeholder, .campo textarea::placeholder{ color:#585D83; }

/* Endereco de e-mail e uma palavra unica, sem espaco onde o navegador possa
   quebrar. Em coluna estreita ele empurrava o bloco inteiro para fora da
   tela e a pagina ganhava rolagem lateral no celular. Aqui ele pode quebrar
   dentro da propria palavra, que e o unico ponto de quebra que existe. */
a[data-email]{ overflow-wrap:anywhere; }

.caixa{
  border:1px solid var(--linha); border-radius:6px; padding:clamp(22px,2.2vw,32px);
  background:linear-gradient(158deg, rgba(10,16,61,.72), rgba(3,6,26,.72));
}
.caixa--destaque{
  border-color:rgba(27,47,204,.42);
  background:linear-gradient(140deg, rgba(8,28,186,.20), rgba(3,6,26,.78));
}
.caixa h3{ margin-bottom:12px; font-size:21px; }
.caixa h4{
  margin-bottom:16px; font-size:12px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:#96A2F7;
}

.lista li{
  position:relative; padding-left:20px; margin-bottom:11px;
  font-size:14.5px; line-height:1.6; color:#A1A6C9;
}
.lista li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--azul-400);
  box-shadow:0 0 10px var(--brilho);
}
.lista--ouro li::before{ background:var(--ouro); box-shadow:0 0 10px rgba(201,165,78,.5); }

.malha{ display:grid; gap:clamp(20px,2vw,30px); }
/* Um item de grade nao encolhe abaixo da largura minima do proprio conteudo
   se nada mandar, e campo de formulario tem largura minima herdada do
   navegador. No celular era isso que fazia a coluna crescer alem do bloco
   que a contem e a pagina ganhar rolagem lateral. */
.malha > *{ min-width:0; }
.malha--2{ grid-template-columns:repeat(2,1fr); }
/* Par de colunas assimetricas: texto de um lado, apoio do outro. A proporcao
   chega pela propriedade --dupla escrita no proprio bloco, porque ela muda
   de secao para secao. Antes a largura das colunas era escrita direto no
   atributo de estilo, e estilo no atributo vence qualquer media query: no
   celular as duas colunas nunca colapsavam, a segunda saia para fora da
   tela e a pagina ganhava rolagem lateral. */
.malha--dupla{ grid-template-columns:var(--dupla); }
.malha--3{ grid-template-columns:repeat(3,1fr); }
.malha--4{ grid-template-columns:repeat(4,1fr); }

/* ---- 07  Abertura ----------------------------------------------------- */
.abertura{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden;
}
.abertura__palco{ position:absolute; inset:0; }
.abertura__palco img,
.abertura__palco video{
  width:100%; height:100%; object-fit:cover; object-position:center 34%;
}
.abertura__veu{
  position:absolute; inset:0;
  background:
    linear-gradient(94deg, rgba(0,2,14,.90) 0%, rgba(0,2,14,.62) 34%, rgba(0,2,14,.06) 64%, rgba(0,2,14,.26) 100%),
    linear-gradient(0deg, rgba(0,2,14,.90) 0%, rgba(0,2,14,.04) 52%, rgba(0,2,14,.30) 100%);
}
.abertura__conteudo{
  position:relative; z-index:3;
  padding-block:0 clamp(88px,10vh,150px);
  width:min(100% - var(--margem)*2, 720px);
  margin-inline:var(--margem);
}
.abertura__conteudo h1,
.abertura__conteudo .titulo-lamina{
  margin:22px 0 20px; text-transform:uppercase;
  font-size:clamp(38px,5.2vw,76px);
  font-weight:600; letter-spacing:-.02em; line-height:1.05; color:#fff;
  text-shadow:0 10px 50px rgba(0,0,0,.6);
}
.abertura__acoes{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }

.abertura__pontos{
  position:absolute; left:50%; transform:translateX(-50%); bottom:44px; z-index:4;
  display:flex; gap:11px;
}
.abertura__pontos button{
  width:10px; height:10px; padding:0; border:0; border-radius:50%;
  background:rgba(234,236,250,.34); cursor:pointer;
  transition:background .3s var(--curva), box-shadow .3s var(--curva);
}
.abertura__pontos button[aria-selected="true"]{
  background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.15);
}
.abertura__lado{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:56px; height:98px; border:0; background:rgba(1,3,18,.34);
  color:#EAECFA; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--curva);
}
.abertura__lado:hover{ background:rgba(8,28,186,.42); }
.abertura__lado--esq{ left:0; } .abertura__lado--dir{ right:0; }

/* cabecalho das paginas internas */
.capa{
  position:relative; padding-top:calc(var(--topo) + clamp(48px,5vw,84px));
  padding-bottom:clamp(30px,3.4vw,52px);
}
.capa__fundo{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
}
.capa__fundo img{ width:100%; height:100%; object-fit:cover; opacity:.30; }
.capa__fundo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,2,14,.72) 0%, rgba(0,2,14,.92) 62%, var(--abismo) 100%);
}
.capa h1{ margin:18px 0 0; }
.capa + .secao--curta{ padding-top:clamp(24px,2.4vw,38px); }
.capa .lide{ margin-top:20px; max-width:760px; }

.migalhas{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:#797FA9;
  display:flex; gap:10px; flex-wrap:wrap;
}
.migalhas [aria-current]{ color:#EAECFA; }

/* ---- 08  Trilhos e cartoes -------------------------------------------- */
.trilho-caixa{ position:relative; }
.trilho{
  display:flex; gap:clamp(14px,1.3vw,20px); overflow-x:auto;
  /* Folga vertical suficiente para o cartaz subir e crescer na passagem do
     mouse sem ser cortado pela borda da fileira, que rola e portanto corta. */
  padding-inline:var(--margem); padding-block:18px 10px;
  /* Sem encaixe magnetico. Com ele o navegador alinhava a borda do primeiro
     cartao ao inicio da area util, ignorando o recuo lateral, e a fileira
     ja abria deslocada com o primeiro cartaz cortado pela margem. */
  scroll-padding-inline:var(--margem);
  scrollbar-width:none;
  /* O cursor conta o que a faixa faz antes de a pessoa tentar. Durante o
     arrasto ele fecha, como quem segurou a fileira. */
  cursor:grab;
}
.trilho.arrastando{ cursor:grabbing; }
.trilho.arrastando *{ pointer-events:none; }
.trilho::-webkit-scrollbar{ display:none; }
.trilho:focus-visible{ outline:2px solid var(--azul-400); outline-offset:4px; }
/* O texto nao pode ser selecionado durante o arrasto, senao a fileira
   inteira fica realcada em azul no meio do movimento. */
.trilho img, .trilho h3, .trilho p, .trilho span{ user-select:none; }
.trilho img, .trilho a{ -webkit-user-drag:none; }

.trilho-seta{
  position:absolute; top:0; height:100%; width:96px; border:0; cursor:pointer;
  display:flex; align-items:center; color:#fff;
  opacity:0; transition:opacity .35s var(--curva);
}
.trilho-caixa:hover .trilho-seta{ opacity:1; }
/* Seta que nao leva a lugar nenhum some: no comeco da fileira nao ha o que
   revelar a esquerda, e no fim nao ha o que revelar a direita. */
.trilho-caixa.no-inicio .trilho-seta--esq,
.trilho-caixa.no-fim .trilho-seta--dir,
.trilho-caixa.sem-rolagem .trilho-seta{ opacity:0 !important; pointer-events:none; }
.trilho-seta--dir{
  right:0; justify-content:flex-end; padding-right:18px;
  background:linear-gradient(90deg, rgba(0,2,14,0), rgba(0,2,14,.86) 62%, rgba(0,2,14,.96));
}
.trilho-seta--esq{
  left:0; justify-content:flex-start; padding-left:18px;
  background:linear-gradient(270deg, rgba(0,2,14,0), rgba(0,2,14,.86) 62%, rgba(0,2,14,.96));
}

/* Largura de cartaz na fileira, na medida das vitrines de plataforma: por
   volta de sete titulos visiveis numa tela de computador comum. Cartaz
   grande demais transforma a fileira em galeria e some com a sensacao de
   acervo. */
.obra{ width:clamp(168px,12.2vw,190px); flex:none; }
.obra__arte{
  /* Bloco de proposito. O elemento e um span dentro do link do cartao e,
     como caixa em linha, ignorava a proporcao declarada: cada cartaz ficava
     com a altura do arquivo original, as fichas desalinhavam entre si e
     sobrava o espaco da linha de base embaixo da imagem. */
  display:block;
  position:relative; aspect-ratio:5/7; border-radius:5px; overflow:hidden;
  background:var(--painel);
  box-shadow:0 18px 44px rgba(0,2,16,.6);
  transition:transform .45s var(--curva), box-shadow .45s var(--curva);
}
.obra__arte img{ width:100%; height:100%; object-fit:cover; }
.obra__arte::after{
  content:""; position:absolute; inset:0; border-radius:5px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(191,197,239,.14);
}
.obra__toque{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(0deg, rgba(1,4,24,.82), rgba(1,4,24,.12));
  opacity:0; transition:opacity .4s var(--curva);
}
.obra__toque span{
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(234,236,250,.68); background:rgba(3,6,26,.5);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
/* Passagem do mouse: o cartaz sobe e cresce um pouco, ganha um fio de luz
   azul em volta e um brilho que atravessa a arte na diagonal. O movimento e
   curto de proposito, para parecer atencao e nao efeito. */
.obra__arte::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(114deg, rgba(169,177,242,0) 34%, rgba(169,177,242,.24) 50%, rgba(169,177,242,0) 66%);
  transform:translateX(-120%);
  transition:transform .85s var(--curva);
}
.obra:hover .obra__arte,
.obra:focus-visible .obra__arte{
  transform:translateY(-10px) scale(1.045);
  box-shadow:0 30px 64px rgba(0,2,14,.8), 0 0 0 2px rgba(27,47,204,.9), 0 0 34px rgba(6,24,166,.5);
}
.obra:hover .obra__arte::before,
.obra:focus-visible .obra__arte::before{ transform:translateX(120%); }
.obra:hover .obra__toque,
.obra:focus-visible .obra__toque{ opacity:1; }
.obra:hover h3{ color:#fff; }
.obra:hover .obra__situacao{ border-color:rgba(27,47,204,.9); color:#fff; }
.obra h3, .obra__situacao{ transition:color .35s var(--curva), border-color .35s var(--curva); }

/* Cartao de formato ainda sem arte de divulgacao. Mesma silhueta em pe dos
   demais, para a fileira nao ter duas linguagens ao mesmo tempo. */
.obra--conceito{ cursor:default; }
.obra--conceito .obra__arte{ box-shadow:0 14px 34px rgba(0,4,16,.5); }
.obra--conceito:hover .obra__arte{ transform:none; box-shadow:0 14px 34px rgba(0,4,16,.5); }
.obra--conceito .obra__arte::before{ display:none; }

/* Situacao de producao em linha propria, acima do titulo. Fora do cartaz
   de proposito: parte das artes ja traz a situacao impressa e os dois
   textos se sobrepunham. */
.obra__situacao{
  display:block; width:fit-content; margin:12px 0 0;
  padding:3px 8px; border-radius:2px;
  font-size:8.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#C6CAEA; border:1px solid var(--linha-forte); background:rgba(5,8,34,.5);
}
.obra__situacao.selo--ouro{ border-color:rgba(201,165,78,.62); color:#E3C879; }
.obra__situacao.selo--azul{ border-color:rgba(27,47,204,.68); color:#96A2F7; }

.obra h3{ margin:9px 0 0; font-size:14.5px; font-weight:500; letter-spacing:-.005em; line-height:1.25; }
/* Linha de dados com separador proprio, e nao duas pontas empurradas para
   as bordas. Rotulo longo encostava no ano quando o cartao era estreito. */
.obra__ficha{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin:6px 0 0;
  font-size:12.5px; color:#797FA9;
}
.obra__ponto{ width:3px; height:3px; border-radius:50%; background:#474C74; flex:none; }

/* arte provisoria, enquanto nao ha material de divulgacao */
.arte-vazia{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:
    radial-gradient(80% 60% at 50% 22%, rgba(8,28,186,.42), rgba(8,28,186,0) 68%),
    linear-gradient(158deg, #080E38 0%, #03061F 100%);
  text-align:center; padding:22px;
}
.arte-vazia::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(135deg, rgba(143,156,247,.05) 0 12px, rgba(143,156,247,0) 12px 24px);
}
.arte-vazia img{
  position:relative;   /* o hachurado e absoluto e cruzaria o simbolo por cima */
  width:34px; height:auto; opacity:.9; filter:drop-shadow(0 0 16px var(--brilho));
}
.arte-vazia span{
  position:relative; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:#797FA9;
}

/* Linha de controle do acervo: campo de busca de um lado, temas do outro.
   Sao duas maneiras de chegar ao mesmo texto, e por isso moram juntas. A
   busca daqui procura assunto dentro das analises e nao tem relacao com a
   lupa do cabecalho, que procura producao: dois acervos distintos, dois
   campos distintos. */
.acervo-controles{
  display:flex; align-items:center; gap:clamp(14px,1.6vw,24px); flex-wrap:wrap;
  margin-bottom:clamp(22px,2.4vw,34px);
}
.busca-acervo{
  flex:1 1 300px; min-width:0; order:-1;
  display:flex; align-items:center; gap:11px;
  height:46px; padding:0 6px 0 15px;
  border:1px solid var(--linha-forte); border-radius:999px;
  background:rgba(5,9,38,.42);
  transition:border-color .3s var(--curva), background .3s var(--curva), box-shadow .3s var(--curva);
}
.busca-acervo:focus-within{
  border-color:var(--azul-300); background:rgba(8,14,58,.6);
  box-shadow:0 0 0 3px rgba(123,135,232,.14);
}
.busca-acervo > svg{ flex:none; color:#7B87E8; }
.busca-acervo input{
  flex:1; min-width:0; height:100%;
  border:0; background:none; outline:none;
  font-family:var(--sans); font-size:14.5px; font-weight:300; color:#fff;
}
.busca-acervo input::placeholder{ color:#6B7099; }
.busca-acervo input::-webkit-search-cancel-button{ display:none; }
.busca-acervo__limpa{
  flex:none; width:34px; height:34px; border-radius:50%;
  border:0; background:none; color:#8A90BC; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .3s var(--curva), background .3s var(--curva);
}
.busca-acervo__limpa:hover{ color:#fff; background:rgba(123,135,232,.16); }
.acervo-controles .filtros{ margin:0; flex:0 1 auto; }

@media (max-width:860px){
  .acervo-controles{ gap:16px; }
  .busca-acervo{ flex-basis:100%; }
}

/* aviso de lista vazia, quando o filtro nao encontra nada */
.acervo-vazio{
  padding:56px 0; text-align:center; color:var(--grafite);
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
}

/* ---- 09  Filtros --------------------------------------------- */
.filtros{ display:flex; gap:10px; flex-wrap:wrap; }
.filtros button{
  min-height:40px; padding:0 20px; cursor:pointer;
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:#8D96D5;
  background:rgba(4,7,30,.4); border:1px solid var(--linha); border-radius:2px;
  transition:color .3s var(--curva), border-color .3s var(--curva), background .3s var(--curva);
}
.filtros button:hover{ color:#fff; border-color:var(--linha-forte); }
.filtros button[aria-pressed="true"]{
  color:#fff; border-color:rgba(27,47,204,.82); background:rgba(8,28,186,.22);
}

/* faixa de aviso, no lugar de cartoes vazios repetidos */
.aviso-linha{
  display:flex; align-items:center; gap:clamp(24px,3vw,48px); flex-wrap:wrap;
  margin-top:clamp(24px,2.4vw,34px);
  padding:clamp(26px,2.8vw,38px) clamp(26px,3vw,42px);
  border:1px solid var(--linha); border-radius:6px;
  background:linear-gradient(120deg, rgba(8,14,56,.72), rgba(3,6,26,.52));
}
.aviso-linha__acoes{ margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; }


/* ---- 10  Faixas institucionais ---------------------------------------- */
.faixa{ position:relative; overflow:hidden; }
.faixa__fundo{ position:absolute; inset:0; }
.faixa__fundo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.55) brightness(.66); }
.faixa__fundo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(92deg, rgba(0,2,14,.97) 0%, rgba(0,2,14,.86) 42%, rgba(0,2,14,.40) 100%);
}
.faixa__conteudo{ position:relative; z-index:2; padding-block:clamp(60px,6.6vw,104px); }

.numeros{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
}
.numeros div{ padding:26px 32px; border-left:1px solid var(--linha); }
.numeros div:first-child{ border-left:0; padding-left:0; }
.numeros strong{
  display:block; font-size:clamp(28px,2.6vw,38px); font-weight:600; color:#fff; letter-spacing:-.02em;
}
.numeros span{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:#797FA9; }

.chamada{
  display:flex; align-items:center; gap:34px; flex-wrap:wrap;
  border:1px solid var(--linha); border-radius:6px;
  padding:clamp(24px,2.6vw,34px) clamp(26px,3vw,40px);
  background:linear-gradient(120deg, rgba(8,28,186,.22), rgba(3,6,26,.62));
}
.chamada .acoes{ margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; }

/* Colunas que se ajustam ao numero de itens. Com quatro colunas fixas, o
   quinto titulo do slate caia sozinho numa linha nova e desalinhado. */
.linha-tempo{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); }
.linha-tempo div{ padding:0 30px; border-left:1px solid var(--linha); }
.linha-tempo div:first-child{ border-left:0; padding-left:0; }
.linha-tempo b{
  display:block; font-size:13px; letter-spacing:.2em; color:#8D96D5;
  font-variant-numeric:tabular-nums; font-weight:600;
}
.linha-tempo p{ margin:8px 0 0; font-size:17px; color:#fff; font-weight:500; line-height:1.3; }

/* ---- 11  Pagina de producao ------------------------------------------- */
.palco{
  position:relative; padding-top:calc(var(--topo) + 24px); padding-bottom:clamp(30px,3vw,48px);
}
.palco__fundo{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.palco__fundo img{
  width:100%; height:100%; object-fit:cover;
  filter:blur(30px) saturate(.55) brightness(.42); transform:scale(1.12);
}
.palco__fundo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,2,14,.88), rgba(0,2,14,.97));
}
.palco__cabecalho{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  margin:14px 0 24px;
}
.palco__cabecalho h1{ font-size:clamp(30px,3.4vw,46px); }
.palco__cabecalho .dados{ margin-left:auto; }

/* O trailer ocupa a largura inteira da tela, como a abertura da pagina
   inicial. Numa pagina de obra o trailer e a peca principal, e caixa
   centralizada com margem dos dois lados o rebaixava a ilustracao de apoio.
   O teto de altura existe para o video nunca passar da tela em monitor
   largo: quando o quadro fica mais largo que dezesseis por nove, o proprio
   reprodutor devolve a tarja preta em cima e embaixo. */
/* O limite de altura entra pela largura, e nao por max-height.
   Com max-height a caixa deixava de ser 16 por 9 e virava uma faixa mais
   larga: medido em tela de 1920 por 1080, ela ficava 1920 por 860, que e
   2,23 de proporcao. O recorte de "cover" entao comia 25,6 por cento da
   altura da fotografia, metade em cima, e era isso que cortava a cabeca das
   atrizes na capa de As Telemarketing. Em 1440 por 900 o corte extra era de
   7,2 por cento.

   Limitando a largura, a caixa continua exatamente 16 por 9 em qualquer
   tela, so fica mais estreita e centralizada quando a janela e baixa. O
   enquadramento passa a ser o do arquivo, e nada mais. Vale tambem para o
   quadro do YouTube, que assim nunca ganha tarja preta por dentro. */
.tela{
  position:relative; aspect-ratio:16/9;
  width:min(100%, calc(min(84vh, 860px) * 16 / 9));
  margin:clamp(16px,2vw,28px) auto 0; overflow:hidden; background:#000;
  border-block:1px solid rgba(191,197,239,.13);
  box-shadow:0 44px 110px rgba(0,1,12,.7);
}
.tela iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.tela__capa{
  position:absolute; inset:0; width:100%; height:100%; cursor:pointer;
  border:0; padding:0; background:none;
}
.tela__capa img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.tela__capa::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.04) 56%);
}
.tela__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:104px; height:74px; border-radius:16px; background:#E60F0F;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  transition:transform .35s var(--curva), background .35s var(--curva);
}
.tela__capa:hover .tela__play{ transform:translate(-50%,-50%) scale(1.06); background:#FF1414; }
.tela__aviso{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:16px 24px; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#B3B7D8; text-align:center;
}

/* ---- fachada do tocador ------------------------------------------------
   A capa do teaser com o titulo e o botao, no lugar do quadro do YouTube.
   O quadro so nasce quando alguem clica: ate la a pagina nao carrega o
   script de terceiro, que e a parte mais pesada de uma pagina de obra. */
/* O fundo fica declarado atras da capa. A capa vem do servidor de imagens do
   YouTube, e rede corporativa que bloqueie aquele dominio deixaria um
   retangulo vazio no lugar do teaser. Com o fundo desenhado, o titulo e o
   botao continuam legiveis mesmo sem a fotografia chegar. */
.tela__fachada{
  position:absolute; inset:0;
  background:linear-gradient(160deg,#0A1046 0%,#050B26 45%,#02040F 100%);
}

/* Obra sem teaser publicado. Mesma capa e mesmo peso visual da fachada, sem
   o botao vermelho: nao ha para onde ir, e um botao que nao leva a lugar
   nenhum custa mais confianca do que a ausencia dele. */
.tela__espera{ position:absolute; inset:0; }
.tela__espera::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(0,2,12,.82) 0%, rgba(0,2,12,.14) 52%, rgba(0,2,12,.36) 100%);
}
.tela__play--espera{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:74px; height:52px; border-radius:13px;
  background:rgba(8,14,40,.62); border:1px solid rgba(214,232,255,.3);
  color:#D6E2FF; box-shadow:none;
}
.tela__capa-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--curva), filter .5s ease;
}
.tela__fachada::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(0,2,12,.78) 0%, rgba(0,2,12,.06) 46%, rgba(0,2,12,.42) 100%);
}
.tela__fachada:hover .tela__capa-video{ transform:scale(1.03); }

.tela__reproduzir{
  position:absolute; inset:0; z-index:3; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color:#fff; cursor:pointer;
}
.tela__reproduzir .tela__play{
  position:static; transform:none;
  width:88px; height:62px; border-radius:14px;
}
.tela__fachada:hover .tela__play{ background:#FF1414; transform:scale(1.06); }
.tela__legenda{
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,2,12,.9);
}

/* Titulo oficial do video, do jeito que ele aparece no canal. Fica acima do
   botao para dizer o que se vai assistir antes de o dedo decidir. */
.tela__nome{
  position:absolute; left:0; right:0; top:clamp(20px,10%,72px); z-index:2;
  padding-inline:clamp(20px,8vw,120px);
  font-size:clamp(15px,1.5vw,21px); line-height:1.34; text-align:center;
  color:#fff; text-shadow:0 2px 18px rgba(0,2,12,.92);
  pointer-events:none;
}

/* Sinal de que o video mora no YouTube, e caminho para quem prefere assistir
   la. Fica no canto para nao disputar com o botao de reproduzir. */
.tela__canal{
  position:absolute; right:clamp(12px,1.6vw,22px); bottom:clamp(12px,1.6vw,22px);
  z-index:4; display:grid; place-items:center;
  width:44px; height:44px; border-radius:10px;
  color:#fff; background:rgba(4,8,26,.55);
  border:1px solid rgba(214,232,255,.28);
  transition:background .3s ease, border-color .3s ease, transform .3s var(--curva);
}
.tela__canal:hover{ background:#E60F0F; border-color:#E60F0F; transform:scale(1.06); }
.tela__canal:focus-visible{ outline:2px solid #B8CCFF; outline-offset:3px; }

@media (max-width:760px){
  .tela__reproduzir .tela__play{ width:70px; height:50px; }
  .tela__canal{ width:38px; height:38px; }
}
@media (prefers-reduced-motion: reduce){
  .tela__capa-video, .tela__canal, .tela__play{ transition:none; }
  .tela__fachada:hover .tela__capa-video{ transform:none; }
}

/* Faixa Onde assistir. A referencia de mercado empilha logotipo grande e o
   bloco toma a pagina inteira. Aqui a etiqueta tem altura fixa e texto
   pequeno em caixa alta, numa fileira que quebra sozinha: a informacao
   aparece sem competir com o cartaz nem com a sinopse logo acima. */
.disponivel{
  border:1px solid var(--linha); border-radius:6px;
  padding:clamp(20px,2vw,30px) clamp(20px,2.2vw,32px);
  background:linear-gradient(158deg, rgba(10,16,61,.6), rgba(3,6,26,.6));
}
.disponivel__topo{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.disponivel__perfil{
  margin-left:auto; display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--linha-forte); color:#C6CAEA;
  font-size:13px; letter-spacing:.02em;
  transition:border-color .3s var(--curva), color .3s var(--curva), background .3s var(--curva);
}
.disponivel__perfil:hover{ border-color:var(--azul-400); color:#fff; background:rgba(27,47,204,.2); }
.disponivel__perfil svg{ flex:none; }
.disponivel__aviso{ margin:14px 0 0; font-size:14px; color:#A1A6C9; }

.plataformas{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px; }
.plataforma{
  display:inline-flex; align-items:center; height:38px; padding:0 16px;
  border:1px solid var(--linha-forte); border-radius:3px;
  background:rgba(5,10,34,.55);
  font-family:var(--menu); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#C6CAEA;
  white-space:nowrap;
}

.ficha{ width:100%; border-collapse:collapse; }
.ficha td{
  padding:12px 0; border-bottom:1px solid var(--linha);
  font-size:14.5px; color:#A1A6C9; vertical-align:top;
}
.ficha td:first-child{
  width:190px; padding-top:15px; color:#797FA9;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
}
/* Valor longo, como uma lista de dezesseis nomes de elenco, nao pode empurrar
   a tabela para fora da coluna. */
.ficha td:last-child{ overflow-wrap:break-word; }

@media (max-width:860px){
  /* Em coluna estreita a tabela vira lista: rotulo em cima, valor embaixo.
     Duas colunas com rotulo de cento e noventa pixels fixos nao cabem, e a
     tabela empurrava a pagina para o lado. */
  .ficha, .ficha tbody, .ficha tr, .ficha td{ display:block; width:auto; }
  .ficha tr{ padding:13px 0; border-bottom:1px solid var(--linha); }
  .ficha td{ padding:0; border-bottom:0; }
  .ficha td:first-child{ width:auto; padding-top:0; margin-bottom:5px; }
}

.galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.galeria figure{ margin:0; position:relative; aspect-ratio:16/9; border-radius:5px; overflow:hidden; }
.galeria img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--curva); }
.galeria figure:hover img{ transform:scale(1.06); }

/* ---- 12  Editorial e listas ------------------------------------------- */
.artigo-destaque{
  position:relative; display:block; aspect-ratio:16/8; border-radius:6px; overflow:hidden;
}
.artigo-destaque img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--curva); }
.artigo-destaque:hover img{ transform:scale(1.04); }
.artigo-destaque__texto{
  position:absolute; inset:auto 0 0 0; padding:clamp(22px,2.4vw,34px);
  background:linear-gradient(0deg, rgba(0,2,14,.96), rgba(0,2,14,.06));
}
.artigo-destaque h3{ font-size:clamp(21px,2.2vw,30px); font-weight:500; margin-top:10px; line-height:1.2; }

.data-tema{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:#8D96D5;
}
.lista-artigos li{ border-top:1px solid var(--linha); }
.lista-artigos li:last-child{ border-bottom:1px solid var(--linha); }
.lista-artigos a{ display:block; padding:17px 0; transition:padding-left .35s var(--curva); }
.lista-artigos a:hover{ padding-left:10px; }
.lista-artigos h3{ font-size:18px; font-weight:500; margin-top:6px; line-height:1.32; }

.vaga{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:24px 0; border-top:1px solid var(--linha);
}
.vaga:last-of-type{ border-bottom:1px solid var(--linha); }
.vaga h3{ font-size:20px; font-weight:500; }
.vaga .dados{ font-size:12px; }
.vaga .botao{ margin-left:auto; }

/* ---- 13  Rodape ------------------------------------------------------- */
.rodape{
  position:relative;
  border-top:1px solid var(--linha);
  background:linear-gradient(180deg, rgba(3,6,28,.86), rgba(1,2,10,1));
  padding-top:clamp(44px,4.6vw,68px);
}
.rodape__malha{
  display:grid; grid-template-columns:1.6fr repeat(4, 1fr); gap:clamp(26px,3vw,48px);
}
.rodape h5{
  margin:0 0 18px; font-size:11px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:#6A6F97;
}
.rodape__coluna a{
  display:block; margin-bottom:11px; font-size:13.5px; color:#A1A6C9;
  transition:color .3s var(--curva), padding-left .3s var(--curva);
}
.rodape__coluna a:hover{ color:#fff; padding-left:5px; }

.rodape__legal{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:clamp(34px,3.4vw,48px); padding:26px 0 34px;
  border-top:1px solid var(--linha);
}
.rodape__legal .simbolo{ width:46px; flex:none; filter:drop-shadow(0 0 14px rgba(27,47,204,.4)); }
.rodape__legal p{ margin:0; font-size:14px; line-height:1.5; color:#A1A6C9; }
.canais{ margin-left:auto; text-align:right; }
.canais > span{ display:block; margin-bottom:10px; font-size:15px; color:#EAECFA; }
.canais ul{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.canais a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--linha-forte); display:flex; align-items:center; justify-content:center;
  color:#B3B7D8;
  transition:border-color .3s var(--curva), color .3s var(--curva), background .3s var(--curva);
}
.canais a:hover{ border-color:var(--azul-400); color:#fff; background:rgba(8,28,186,.28); }
.canais svg{ width:17px; height:17px; }

/* ---- 14  Revelacao ao rolar ------------------------------------------- */
/* Limiar zero de proposito: limiar em porcentagem exige aquela fracao da
   area visivel de uma vez, o que nunca acontece em bloco muito alto. */
.revela{ opacity:0; transform:translateY(24px); }
.revela.visivel{
  opacity:1; transform:none;
  transition:opacity .8s var(--curva), transform .8s var(--curva);
}

/* ---- 15  Tablet ------------------------------------------------------- */
/* Limite subiu de 1180 para 1340: abaixo disso o menu de sete itens e a
   assinatura da marca dividiam a mesma faixa sem folga, e o cabecalho
   virava uma parede de texto. O painel de tela cheia resolve melhor. */
@media (max-width:1340px){
  :root{ --topo:82px; }
  .menu, .idiomas{ display:none; }
  .abre-menu{ display:flex; }
  /* Duas colunas sem o vao do menu. Com tres colunas e o espacamento do
     computador, a assinatura empurrava a busca e o botao do menu para fora
     da tela em aparelho estreito, e o menu ficava sem como abrir. */
  .topo{ column-gap:16px; }
  /* O seletor de idioma some do topo, nao do site: ele continua no rodape
     do painel de tela cheia, que e por onde se navega neste tamanho. */
  .painel-menu .idiomas{ display:flex; }
  .topo > nav[aria-label="Principal"]{ display:none; }
  .assinatura{ min-width:0; flex:1 1 auto; }
  /* Cinco faixas em tres trilhos deixam a segunda fileira com dois grupos e
     um buraco do lado. Com a marca ocupando a fileira inteira, os quatro
     grupos voltam a ficar lado a lado, na mesma largura que tem na tela
     cheia, e some a fileira torta. */
  .rodape__malha{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .rodape__coluna--marca{ grid-column:1 / -1; }
  .malha--4{ grid-template-columns:repeat(2,1fr); }
  .numeros, .linha-tempo{ grid-template-columns:repeat(2,1fr); }
  .numeros div:nth-child(3){ border-left:0; padding-left:0; }
  .linha-tempo div{ padding:18px 0 18px 26px; }
  .linha-tempo div:nth-child(odd){ border-left:0; padding-left:0; }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .abertura__lado{ display:none; }
}

/* ---- 16  Celular ------------------------------------------------------ */
@media (max-width:760px){
  :root{ --topo:74px; }
  /* Em tela estreita fica so o simbolo. O nome por extenso nao cabe ao lado
     da busca e do menu, e nao pode quebrar em duas linhas. O link continua
     anunciando o nome completo para leitor de tela. */
  .assinatura .nome{ display:none; }
  .assinatura .simbolo{ width:40px; height:54px; margin-top:4px; }
  .ferramentas{ gap:12px; }
  /* Ritmo vertical em vh inverte em tela estreita: a altura continua grande
     e o conteudo vira coluna unica. Por isso passa a pixel fixo aqui. */
  .secao{ padding:52px 0; }
  .secao--curta{ padding:38px 0; }
  .abertura{ min-height:92svh; }
  .abertura__conteudo{ padding-bottom:96px; width:100%; }
  .abertura__conteudo h1,
.abertura__conteudo .titulo-lamina{ font-size:clamp(30px,9vw,44px); }
  .abertura__acoes{ flex-direction:column; }
  .abertura__acoes .botao{ width:100%; }
  .malha--2, .malha--3, .malha--4, .malha--dupla{ grid-template-columns:1fr; }
  .rodape__malha{ grid-template-columns:1fr 1fr; }
  .rodape__coluna--marca{ grid-column:1 / -1; }
  .numeros, .linha-tempo{ grid-template-columns:1fr; }
  .numeros div{ border-left:0; padding:20px 0; border-top:1px solid var(--linha); }
  .numeros div:first-child{ border-top:0; padding-top:0; }
  .linha-tempo div{ border-left:0; padding:16px 0; border-top:1px solid var(--linha); }
  .linha-tempo div:first-child{ border-top:0; }
  .galeria{ grid-template-columns:1fr; }
  .obra{ width:200px; }
  .aviso-linha__acoes{ margin-left:0; width:100%; }
  .aviso-linha__acoes .botao{ width:100%; }
  .faixa-obra{ width:284px; }
  .ficha td:first-child{ width:132px; letter-spacing:.14em; }
  .chamada .acoes{ margin-left:0; width:100%; }
  .chamada .acoes .botao{ flex:1; }
  .canais{ margin-left:0; text-align:left; width:100%; }
  .canais ul{ justify-content:flex-start; }
  .vaga .botao{ margin-left:0; width:100%; }
  body.tem-chama{ cursor:auto; }
  #chama{ display:none !important; }
}

/* ---- 17  Movimento reduzido e impressao ------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
  .revela{ opacity:1; transform:none; }
  #chama{ display:none !important; }
  body.tem-chama{ cursor:auto; }
}

@media print{
  .topo, .painel-menu, #chama, .abertura__lado, .trilho-seta{ display:none !important; }
  body{ background:#fff; color:#000; }
  .aurora, .grao{ display:none; }
}

/* ---- 18  Laminas da abertura ------------------------------------------
   O cartaz provisorio que ficava a direita do destaque saiu junto com a
   chegada das fotos oficiais de cada obra. Ele servia para dar rosto ao
   filme enquanto nao havia fotografia dele. Nas fileiras do catalogo o
   cartaz continua. */
.abertura__lamina{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  transition:opacity .9s var(--curva);
}
.abertura__lamina .abertura__conteudo{ width:min(100% - var(--margem)*2, 720px); }

/* ---- 19  Pagina institucional ----------------------------------------- */
/* Par de indicadores, usado quando ha dois numeros e nao quatro. A regra
   geral divide a faixa em quatro colunas e dois valores ficariam perdidos
   em metade da largura. */
.numeros--par{ grid-template-columns:repeat(2,1fr); }

/* Perfil do fundador. Sem retrato ate existir foto oficial: o simbolo da
   marca ocupa a coluna da esquerda em vez de uma imagem de banco. */
.perfil{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3vw,48px);
  align-items:start;
  border:1px solid var(--linha); border-radius:6px;
  padding:clamp(26px,3vw,46px) clamp(26px,3.2vw,52px);
  background:linear-gradient(140deg, rgba(10,16,61,.66), rgba(3,6,26,.78));
}
.perfil__marca{
  width:clamp(84px,8vw,120px); aspect-ratio:1; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--linha-forte); border-radius:6px;
  background:radial-gradient(70% 60% at 50% 30%, rgba(8,28,186,.34), rgba(3,6,26,0) 70%);
}
.perfil__marca img{ width:clamp(44px,4.2vw,64px); height:auto; filter:drop-shadow(0 0 18px var(--brilho)); }
.perfil__texto{ max-width:74ch; }

@media (max-width:760px){
  .perfil{ grid-template-columns:1fr; }
  .numeros--par div:nth-child(2){ border-left:0; padding-left:0; }
}

/* Lista de titulos em destaque. Formato deitado de proposito: o cartaz em
   tamanho de vitrine roubava a leitura do texto, que aqui e o conteudo
   principal. */
.movimentos{ display:grid; gap:14px; }
.movimento{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(20px,2.4vw,34px);
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border:1px solid var(--linha); border-radius:6px;
  background:linear-gradient(120deg, rgba(10,16,61,.5), rgba(3,6,26,.5));
  transition:border-color .35s var(--curva), background .35s var(--curva), transform .35s var(--curva);
}
.movimento:hover{
  border-color:rgba(27,47,204,.6);
  background:linear-gradient(120deg, rgba(8,28,186,.22), rgba(3,6,26,.62));
  transform:translateX(4px);
}
.movimento__arte{
  display:block; width:clamp(84px,7.4vw,116px); aspect-ratio:5/7; flex:none;
  border-radius:4px; overflow:hidden; box-shadow:0 12px 30px rgba(0,2,16,.55);
}
.movimento__arte img{ width:100%; height:100%; object-fit:cover; }
.movimento__texto .obra__situacao{ margin:0 0 10px; }
.movimento__texto h3{ font-size:clamp(19px,1.7vw,23px); font-weight:500; letter-spacing:-.01em; }
.movimento__texto p{ margin:8px 0 0; max-width:74ch; color:var(--prata-2); line-height:1.62; }
.movimento__seta{
  width:42px; height:42px; border-radius:50%; flex:none;
  border:1px solid var(--linha-forte); color:#D6D9F2;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .35s var(--curva), background .35s var(--curva);
}
.movimento:hover .movimento__seta{ border-color:var(--azul-400); background:rgba(8,28,186,.28); color:#fff; }

@media (max-width:760px){
  .movimento{ grid-template-columns:auto 1fr; gap:16px; }
  .movimento__seta{ display:none; }
}

/* ---- 20  Formularios especializados ----------------------------------- */
/* Escolha de caminho no topo do formulario. Vem antes de qualquer dado de
   contato de proposito: e ela que decide para qual time a proposta vai, e
   perguntar isso depois de dez campos preenchidos e perguntar tarde. */
.escolha{ border:0; margin:0 0 22px; padding:0; }
.escolha legend{
  padding:0; margin-bottom:12px;
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#96A2F7;
}
.escolha__linha{ display:flex; gap:12px; flex-wrap:wrap; }
.escolha__item{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:13px 20px; border-radius:3px;
  border:1px solid var(--linha); background:rgba(5,12,30,.4);
  font-size:13.5px; color:#B3B7D8;
  transition:border-color .3s var(--curva), background .3s var(--curva), color .3s var(--curva);
}
.escolha__item:hover{ border-color:var(--linha-forte); color:#fff; }
.escolha__item input{ accent-color:var(--azul-400); width:16px; height:16px; margin:0; }
.escolha__item:has(input:checked){
  border-color:var(--azul-400); background:rgba(8,28,186,.26); color:#fff;
}
.escolha__item:focus-within{ outline:2px solid var(--azul-300); outline-offset:3px; }

.formulario .malha--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){
  .formulario .malha--3{ grid-template-columns:1fr; }
  .escolha__item{ width:100%; }
}

/* ---- 21  Tema de leitura -----------------------------------------------
   Vale so em pagina de texto longo, marcada com a classe leitura no corpo.
   O site inteiro vive num quase preto azulado, que e o certo para vitrine
   de cartaz mas cansa em texto de cinco minutos. Aqui o fundo abre num
   degrade de azul e vermelho, e o texto continua claro por cima.

   Sao dois desenhos distintos, um por pagina: Insights recebe um foco
   radial, com a luz azul nascendo do rodape e a brasa vermelha no alto, e
   Sobre recebe uma varredura diagonal, que sai do carmim e termina no azul
   quase preto. Duas paginas longas de texto seguidas com o mesmo fundo
   viram a mesma pagina na memoria de quem navega. O vermelho vem da ave do
   simbolo e entra sempre em camada de baixa opacidade, para nunca disputar
   com a coluna de texto.

   Fundo branco foi testado antes e nao serviu: a assinatura da marca, que e
   um degrade de branco para prata, sumia no cabecalho, e a pagina trocava de
   identidade no meio do caminho.

   O que nao muda: cabecalho, rodape, botoes e cursor continuam exatamente
   como estao no resto do site. */
/* O corpo fica transparente aqui. O html e o body do site inteiro tem cor
   solida, e como o html ja pinta o fundo da tela, a cor do body virava uma
   folha opaca desenhada por cima da camada de degrade, que fica em plano
   de fundo negativo. Era por isso que estas paginas apareciam como um azul
   chapado: o degrade existia e nunca chegava a ser visto. Tirando a cor do
   corpo so nas paginas de texto, a camada de degrade aparece e o resto do
   site continua exatamente como esta. */
body.leitura{ background:transparent; }
body.leitura .grao{ opacity:.045; }

/* A capa destas paginas nao pode terminar numa faixa de cor solida. O veu
   da capa fecha em cor cheia no pe, o que servia quando o resto da pagina
   era da mesma cor e aqui virava um corte reto no meio da tela. A mascara
   dissolve a capa inteira, foto e veu juntos, antes do fim do bloco, e o
   degrade assume sem emenda. A foto tambem perde peso: aqui quem conduz a
   pagina e o degrade, e a imagem fica so como textura. */
body.leitura .capa__fundo{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,0) 100%);
}
body.leitura .capa__fundo img{ opacity:.15; }

/* ---- 21b  Fundo das paginas de texto -----------------------------------
   Um degrade radial e nada mais: azul vivo no centro, escurecendo em todas
   as direcoes ate o azul-marinho das bordas, sem nunca chegar ao preto. Sem
   estrela, sem particula, sem textura, sem granulado.

   As cores vieram da referencia, valor por valor: 0033fc no centro, 0134fd e
   0227d8 no meio do caminho, 0112a0 e 010f96 nas beiras.

   Sobre a costura entre os tons. Degrade largo em tela de oito bits por
   canal mostra as faixas de cor quando so tem duas paradas: a conta cai numa
   escada de degraus visiveis. A defesa aqui e o numero de paradas, e nao
   ruido por cima. Onze paradas encurtam cada degrau a ponto de a escada
   deixar de ser vista, e um segundo degrade radial, mais largo e de pouca
   opacidade, quebra o que ainda restar. Nenhum dos dois acrescenta textura:
   continua tudo liso.

   Vale para Insights, para Sobre e para as analises, que sao a mesma familia
   de pagina. */
body.leitura{ background:transparent; }
/* nao ha granulado nestas paginas, e essa e a instrucao */
body.leitura .grao{ display:none; }

body.leitura .aurora{
  background:
    /* Veu do topo. A faixa onde moram a logo, o nome da produtora e o menu
       precisa de fundo escuro para eles serem lidos: sobre o azul cheio a
       assinatura em degrade de branco para prata perde definicao e o menu
       compete com o fundo. O veu comeca em quase preto, desce em nove
       paradas e chega a transparente antes da metade da tela, de modo que o
       azul continua sendo o azul aprovado dali para baixo.

       Ele mora nesta camada, que e fixa na tela, e nao no cabecalho: preso
       ao cabecalho, ele seria uma barra com fim visivel, e o que se quer e
       uma abertura, do escuro para o azul, sem nenhuma linha no meio. */
    linear-gradient(180deg,
      #01030E          0%,
      #01030E          7%,
      rgba(1, 5, 26, .94)   14%,
      rgba(1, 8, 46, .82)   22%,
      rgba(1, 11, 68, .64)  31%,
      rgba(1, 14, 92, .46)  40%,
      rgba(1, 17, 116, .29) 50%,
      rgba(1, 20, 138, .15) 60%,
      rgba(1, 23, 156, .05) 70%,
      rgba(1, 26, 172, 0)   80%),
    /* camada de suavizacao: larga, fraca e sem parada intermediaria, so
       para diluir qualquer degrau que sobre da camada de baixo */
    radial-gradient(ellipse 118% 118% at 50% 50%,
      rgba(0, 68, 255, .34) 0%,
      rgba(1, 20, 150, 0)  72%),
    radial-gradient(ellipse 62% 62% at 50% 50%,
      #0033fc  0%,
      #0134fd  9%,
      #0132f6 18%,
      #032ff0 27%,
      #032ce6 36%,
      #0227d8 46%,
      #0224c9 56%,
      #0220bc 65%,
      #021bb2 76%,
      #0112a0 90%,
      #010f96 100%);
  background-color:#010f96;
}

/* A capa destas paginas nao carrega foto. Foto embaixo de um degrade liso
   volta a ser textura, que e justamente o que sai de cena aqui. */
body.leitura .capa__fundo{ display:none; }



/* Painel de leitura. A faixa de texto ganha um fundo um degrau mais escuro
   que o fundo da pagina, para a coluna de leitura ter borda definida em vez
   de flutuar solta sobre o degrade. */
.secao--leitura{ position:relative; }
body.leitura .secao--leitura .texto,
body.leitura .secao--leitura .lide{ color:#DDE1F6; }
body.leitura .secao--leitura .mini{ color:#B6BCE4; }
body.leitura .secao--leitura .data-tema{ color:#A3ABDD; }
body.leitura .secao--leitura .rotulo{ color:#A9B1F2; }
body.leitura .secao--leitura .link-seta{ color:#A9B1F2; }
body.leitura .secao--leitura .link-seta:hover{ color:#fff; }
body.leitura .secao--leitura .lista-artigos li{ border-top-color:rgba(169,177,242,.24); }
body.leitura .secao--leitura .lista-artigos li:last-child{ border-bottom-color:rgba(169,177,242,.24); }

/* caixa continua azul, um degrau abaixo do fundo, para nao sumir nele */
body.leitura .secao--leitura .caixa{
  border-color:rgba(169,177,242,.24);
  background:linear-gradient(158deg, rgba(7,14,74,.86), rgba(4,8,46,.92));
}
body.leitura .secao--leitura .caixa--destaque{
  border-color:rgba(123,135,232,.5);
  background:linear-gradient(140deg, rgba(11,30,150,.6), rgba(4,8,46,.92));
}
body.leitura .secao--leitura .caixa h4{ color:#A9B1F2; }

/* filtro de tema no fundo azul */
body.leitura .secao--leitura .filtros button{
  color:#C6CAEA; border-color:rgba(169,177,242,.3); background:rgba(5,10,52,.5);
}
body.leitura .secao--leitura .filtros button:hover{ color:#fff; border-color:rgba(169,177,242,.6); }
body.leitura .secao--leitura .filtros button[aria-pressed="true"]{
  color:#fff; border-color:var(--azul-300); background:rgba(27,47,204,.55);
}
body.leitura .secao--leitura .acervo-vazio{ color:#A3ABDD; }
body.leitura .secao--leitura .numeros{ border-color:rgba(169,177,242,.24); }
body.leitura .secao--leitura .numeros div{ border-left-color:rgba(169,177,242,.24); }
body.leitura .secao--leitura .movimento{
  border-color:rgba(169,177,242,.22);
  background:linear-gradient(120deg, rgba(9,20,96,.7), rgba(4,8,46,.72));
}
body.leitura .secao--leitura .movimento:hover{
  border-color:var(--azul-300);
  background:linear-gradient(120deg, rgba(20,38,150,.8), rgba(5,10,56,.8));
}
body.leitura .secao--leitura .perfil{
  border-color:rgba(169,177,242,.24);
  background:linear-gradient(140deg, rgba(9,20,96,.78), rgba(4,8,46,.9));
}
body.leitura .secao--leitura .tempo__marco b{ color:#A9B1F2; }
body.leitura .secao--leitura .lista li{ color:#C6CAEA; }
body.leitura .secao--leitura .chamada{
  border-color:rgba(169,177,242,.26);
  background:linear-gradient(120deg, rgba(22,87,232,.22), rgba(4,8,46,.7));
}

/* Grade das analises. Tres colunas no computador, para o cartao ter altura
   de leitura e nao virar tijolo de texto. */
.grade-textos{
  display:grid; gap:clamp(26px,2.6vw,40px) clamp(20px,2vw,30px);
  grid-template-columns:1fr;
  margin-top:clamp(24px,2.6vw,34px);
}
@media (min-width:640px){ .grade-textos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .grade-textos{ grid-template-columns:repeat(3,1fr); } }

/* ---- 22  Cartao editorial ---------------------------------------------
   Usado na lista de analises e nas chamadas da pagina inicial. Imagem em
   cima, tema, titulo e chamada embaixo: a mesma peca serve a fundo claro e
   a fundo escuro so trocando as cores herdadas. */
.cartao-texto{ display:block; height:100%; }
.cartao-texto__arte{
  display:block; aspect-ratio:16/10; border-radius:6px; overflow:hidden;
  background:var(--painel); box-shadow:0 14px 34px rgba(0,3,12,.4);
}
.cartao-texto__arte img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--curva);
}
.cartao-texto:hover .cartao-texto__arte img{ transform:scale(1.05); }
.cartao-texto .data-tema{ display:block; margin:16px 0 8px; }
/* No hover o titulo acende em branco com halo, em vez de trocar para o azul
   da paleta. O azul escrito perdia contraste contra o proprio fundo, tanto
   no quase preto do catalogo quanto no degrade das paginas de texto, e o
   efeito de passar o mouse apagava o titulo em vez de destaca-lo. */
.cartao-texto h3{
  font-size:clamp(17px,1.35vw,20px); font-weight:500; line-height:1.28; letter-spacing:-.01em;
  transition:color .35s var(--curva), text-shadow .35s var(--curva);
}
.cartao-texto p{ margin:10px 0 0; font-size:14px; line-height:1.6; }
.cartao-texto:hover h3{
  color:#fff;
  text-shadow:0 0 14px rgba(200,216,255,.85), 0 0 34px rgba(74,116,255,.5);
}

/* Nas paginas de texto o titulo ja nasce branco com halo azul claro. Sobre
   um fundo em degrade ele precisa de contorno proprio, senao briga com a
   mancha de luz que passa atras dele. */
body.leitura .cartao-texto h3{
  color:#fff;
  text-shadow:0 0 20px rgba(138,166,255,.42), 0 1px 3px rgba(1,4,20,.65);
}
body.leitura .cartao-texto:hover h3{
  text-shadow:0 0 14px rgba(200,216,255,.9), 0 0 34px rgba(74,116,255,.6), 0 1px 3px rgba(1,4,20,.65);
}

/* destaque editorial, imagem grande com o texto ao lado */
.destaque-editorial{
  display:grid; grid-template-columns:1.15fr 1fr; align-items:center;
  gap:clamp(24px,3vw,48px);
  border-radius:8px; overflow:hidden;
}
/* A sombra e a mesma dos cartoes de texto logo abaixo nesta pagina. A
   anterior era mais alta e mais opaca, e sobre o azul claro do fundo da
   secao ela nao se dissolvia: aparecia como um bloco quadrado escuro
   acompanhando a saida da imagem, em vez de um apoio. O fundo de painel
   entra pelo mesmo motivo dos outros, para a caixa ter cor propria
   enquanto a fotografia nao chegou. */
.destaque-editorial__arte{
  display:block; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  background:var(--painel); box-shadow:0 14px 34px rgba(0,3,12,.4);
}
.destaque-editorial__arte img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--curva);
}
.destaque-editorial:hover .destaque-editorial__arte img{ transform:scale(1.04); }
.destaque-editorial h3{
  font-size:clamp(21px,2vw,30px); font-weight:500; line-height:1.2; margin-top:12px;
  transition:color .35s var(--curva), text-shadow .35s var(--curva);
}
.destaque-editorial:hover h3{
  color:#fff;
  text-shadow:0 0 16px rgba(200,216,255,.85), 0 0 40px rgba(74,116,255,.5);
}
body.leitura .destaque-editorial h3{
  color:#fff;
  text-shadow:0 0 24px rgba(138,166,255,.44), 0 1px 3px rgba(1,4,20,.65);
}
body.leitura .destaque-editorial:hover h3{
  text-shadow:0 0 16px rgba(200,216,255,.9), 0 0 40px rgba(74,116,255,.6), 0 1px 3px rgba(1,4,20,.65);
}

@media (max-width:860px){
  .destaque-editorial{ grid-template-columns:1fr; }
}

/* ---- 23  Linha do tempo -----------------------------------------------
   Trilho continuo com marco em cada periodo. A versao anterior era uma
   fileira de blocos separados por barra vertical: nada ligava um ano ao
   seguinte, e a leitura nao tinha direcao. */
.tempo{ position:relative; display:grid; gap:0; }
.tempo::before{
  content:""; position:absolute; left:0; right:0; top:9px; height:1px;
  background:linear-gradient(90deg, rgba(27,47,204,0), var(--azul-400) 12%, var(--azul-400) 88%, rgba(27,47,204,0));
}
.tempo__lista{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,30px);
  position:relative;
}
.tempo__marco{ position:relative; padding-top:34px; }
/* Cada marco e um diamante, e nao um disco. O losango vem de um recorte em
   quatro pontas sobre um degrade que sai do branco e desce ao azul da marca.
   O brilho vem de duas sombras projetadas: uma curta e forte, que faz o
   nucleo, e uma larga e fraca, que faz o halo. Sombra projetada acompanha o
   recorte do elemento, entao o brilho sai com a forma do diamante em vez de
   sair redondo, e e isso que faz ele parecer pedra e nao bolinha acesa. */
.tempo__marco::before{
  content:""; position:absolute; top:2px; left:0;
  width:15px; height:15px;
  background:linear-gradient(135deg, #F2F7FF 0%, #B9D3FF 34%, #3A6DFF 62%, #0B2ED6 100%);
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter:drop-shadow(0 0 5px rgba(168,204,255,.95)) drop-shadow(0 0 16px rgba(58,109,255,.75));
  animation:marco-diamante 4.4s ease-in-out infinite;
}
/* O facho de lente, em cruz. Vive num elemento proprio para crescer e apagar
   no proprio tempo, sem mexer no desenho do diamante. */
.tempo__marco::after{
  content:""; position:absolute; top:-10px; left:-17px;
  width:49px; height:35px; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(176,210,255,.5), rgba(176,210,255,0) 72%),
    linear-gradient(90deg, rgba(198,222,255,0) 0%, rgba(214,232,255,.9) 50%, rgba(198,222,255,0) 100%) center/100% 1px no-repeat,
    linear-gradient(0deg,  rgba(198,222,255,0) 0%, rgba(214,232,255,.7) 50%, rgba(198,222,255,0) 100%) center/1px 100% no-repeat;
  animation:marco-facho 4.4s ease-in-out infinite;
}
/* O pulso sai defasado de um marco para o outro, entao a fileira respira em
   onda em vez de piscar toda junta. */
.tempo__marco:nth-child(2)::before,
.tempo__marco:nth-child(2)::after{ animation-delay:.6s; }
.tempo__marco:nth-child(3)::before,
.tempo__marco:nth-child(3)::after{ animation-delay:1.2s; }
.tempo__marco:nth-child(4)::before,
.tempo__marco:nth-child(4)::after{ animation-delay:1.8s; }
.tempo__marco:nth-child(5)::before,
.tempo__marco:nth-child(5)::after{ animation-delay:2.4s; }

@keyframes marco-diamante{
  0%, 100%{
    filter:drop-shadow(0 0 5px rgba(168,204,255,.95)) drop-shadow(0 0 16px rgba(58,109,255,.75));
    transform:scale(1);
  }
  50%{
    filter:drop-shadow(0 0 9px rgba(226,240,255,1)) drop-shadow(0 0 30px rgba(78,132,255,.95));
    transform:scale(1.12);
  }
}
@keyframes marco-facho{
  0%, 100%{ opacity:.34; transform:scale(.72); }
  50%     { opacity:1;   transform:scale(1); }
}

/* Faisca que corre de um marco ao seguinte. E a mesma ideia do rastro do
   cursor: a linha do tempo deixa de ser uma regua parada e passa a ter
   direcao, da fundacao para o ano mais recente. O movimento vive num
   elemento proprio para nunca interferir na linha de base, que continua
   desenhada mesmo se a animacao for desligada. */
.tempo__faisca{
  position:absolute; left:0; right:0; top:7px; height:5px;
  pointer-events:none; overflow:hidden;
}
.tempo__faisca::before{
  content:""; position:absolute; top:2px; left:0; width:34%; height:1px;
  background:linear-gradient(90deg,
    rgba(190,214,255,0) 0%, rgba(214,230,255,.9) 50%, rgba(190,214,255,0) 100%);
  filter:blur(.3px);
  box-shadow:0 0 12px 2px rgba(120,160,255,.55);
  animation:tempo-faisca 6.5s ease-in-out infinite;
}
@keyframes tempo-faisca{
  0%       { transform:translateX(-40%); opacity:0; }
  12%      { opacity:1; }
  88%      { opacity:1; }
  100%     { transform:translateX(300%); opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .tempo__marco::before,
  .tempo__marco::after{ animation:none; }
  .tempo__faisca{ display:none; }
}
.tempo__marco b{
  display:block; font-size:13px; font-weight:600; letter-spacing:.2em;
  color:#96A2F7; font-variant-numeric:tabular-nums;
}
.tempo__marco p{ margin:8px 0 0; font-size:clamp(15px,1.2vw,17px); line-height:1.34; color:#fff; font-weight:500; }
/* Na pagina de texto o fundo e mais claro que o do catalogo, entao o trilho
   e o ponto de cada marco sobem um degrau de tom para continuar visiveis. */
body.leitura .secao--leitura .tempo::before{
  background:linear-gradient(90deg, rgba(123,135,232,0), var(--azul-300) 12%, var(--azul-300) 88%, rgba(123,135,232,0));
}
/* O diamante nao muda de desenho na pagina de texto: ele ja nasce claro o
   bastante para o fundo azul. So o halo abre um pouco mais, porque ali ele
   compete com um fundo mais aceso. */
body.leitura .secao--leitura .tempo__marco::before{
  filter:drop-shadow(0 0 6px rgba(226,240,255,1)) drop-shadow(0 0 20px rgba(120,170,255,.9));
}

@media (max-width:860px){
  .tempo::before{ left:6px; right:auto; top:0; bottom:0; width:1px; height:auto;
    background:linear-gradient(180deg, rgba(27,47,204,0), var(--azul-400) 10%, var(--azul-400) 90%, rgba(27,47,204,0)); }
  /* o trilho vira vertical no celular, entao a versao de leitura tambem
     precisa girar: herdada na horizontal ela sumia dentro de um filete de
     um pixel de largura */
  body.leitura .secao--leitura .tempo::before{
    background:linear-gradient(180deg, rgba(123,135,232,0), var(--azul-300) 10%, var(--azul-300) 90%, rgba(123,135,232,0)); }
  .tempo__lista{ grid-template-columns:1fr; gap:26px; }
  .tempo__marco{ padding:0 0 0 32px; }
  .tempo__marco::before{ top:5px; }
  /* no celular o trilho e vertical, entao a faisca desce em vez de correr */
  .tempo__faisca{ left:4px; right:auto; top:0; bottom:0; width:5px; height:auto; }
  .tempo__faisca::before{
    top:0; left:2px; width:1px; height:26%;
    background:linear-gradient(180deg,
      rgba(190,214,255,0) 0%, rgba(214,230,255,.9) 50%, rgba(190,214,255,0) 100%);
    animation-name:tempo-faisca-vertical;
  }
  @keyframes tempo-faisca-vertical{
    0%   { transform:translateY(-40%); opacity:0; }
    12%  { opacity:1; }
    88%  { opacity:1; }
    100% { transform:translateY(400%); opacity:0; }
  }
}

/* Pecas que existem tanto no catalogo quanto nas paginas de texto. O fundo
   daqui e mais claro que o do catalogo, entao cada tom de apoio sobe um
   degrau; nenhuma delas troca de forma, so de valor. */
body.leitura .secao--leitura .numeros strong{ color:#fff; }
body.leitura .secao--leitura .numeros span{ color:#A3ABDD; }

body.leitura .secao--leitura .movimento__texto h3{ color:#fff; }
body.leitura .secao--leitura .movimento__texto p{ color:#B6BCE4; }
body.leitura .secao--leitura .movimento__seta{ border-color:rgba(169,177,242,.34); color:#A9B1F2; }
body.leitura .secao--leitura .movimento .obra__situacao{
  color:#C6CAEA; border-color:rgba(169,177,242,.38); background:rgba(27,47,204,.26);
}

body.leitura .secao--leitura .perfil .rotulo{ color:#A9B1F2; }
body.leitura .secao--leitura .perfil .rotulo::before{ background:var(--azul-300); }

body.leitura .secao--leitura .botao--vidro{
  color:#EAECFA; border-color:rgba(198,216,246,.42); background:rgba(6,14,34,.4);
}
body.leitura .secao--leitura .botao--vidro:hover{
  color:#fff; border-color:var(--azul-300); background:rgba(27,47,204,.34);
}

body.leitura .secao--leitura .migalhas,
body.leitura .secao--leitura .migalhas a{ color:#A3ABDD; }
body.leitura .secao--leitura .migalhas a:hover{ color:#fff; }
body.leitura .secao--leitura .migalhas [aria-current]{ color:#EAECFA; }
body.leitura .secao--leitura figure{ box-shadow:0 18px 44px rgba(0,3,12,.5); }
body.leitura .secao--leitura .selo{
  color:#DDE1F6; border-color:rgba(169,177,242,.32); background:rgba(5,10,52,.5);
}

/* Escala de texto propria destas paginas.
   O fundo aqui e claro, e nao o quase preto do resto do site: no centro do
   degrade ele chega a azul cheio. Toda a escala de cinza e prata que serve
   sobre fundo escuro perde contraste sobre esse azul, e medindo a pagina
   inteira eram cento e quarenta blocos de texto abaixo do minimo de leitura.

   A solucao nao e escurecer o fundo, que e o desenho aprovado: e subir o
   texto. Cada tom abaixo foi escolhido por medicao contra o ponto mais claro
   do degrade, com folga sobre o minimo, e nao a olho. O corpo do texto vem
   quase branco, os rotulos vem em azul claro e nada fica em cinza. */
body.leitura .texto,
body.leitura .lide,
body.leitura .secao--leitura .texto,
body.leitura .secao--leitura .lide{ color:#F2F5FF; }
body.leitura .mini,
body.leitura .secao--leitura .mini{ color:#E2E8FB; }
body.leitura .data-tema,
body.leitura .secao--leitura .data-tema{ color:#E0E7FF; }
body.leitura .rotulo,
body.leitura .secao--leitura .rotulo,
body.leitura .secao--leitura .perfil .rotulo{ color:#E4EAFF; }
body.leitura .migalhas,
body.leitura .migalhas a,
body.leitura .secao--leitura .migalhas,
body.leitura .secao--leitura .migalhas a{ color:#DEE4FA; }
body.leitura .migalhas a:hover,
body.leitura .migalhas [aria-current]{ color:#fff; }
body.leitura .link-seta,
body.leitura .secao--leitura .link-seta{ color:#E4EAFF; }
body.leitura .lista li,
body.leitura .secao--leitura .lista li{ color:#EBEFFF; }
body.leitura .numeros span,
body.leitura .secao--leitura .numeros span{ color:#E2E8FB; }
body.leitura .movimento__texto p,
body.leitura .secao--leitura .movimento__texto p{ color:#E2E8FB; }
body.leitura .movimento__seta,
body.leitura .secao--leitura .movimento__seta{ color:#E4EAFF; border-color:rgba(232,238,255,.5); }
body.leitura .cartao-texto,
body.leitura .cartao-texto p,
body.leitura .destaque-editorial p{ color:#E6EBFC; }
body.leitura .acervo-vazio,
body.leitura .secao--leitura .acervo-vazio{ color:#E2E8FB; }
body.leitura .assinatura-texto,
body.leitura .figura-artigo figcaption{ color:#E2E8FB; }
body.leitura .assinatura-texto i,
body.leitura .figura-artigo figcaption i{ color:#C3D2FF; }
body.leitura .tempo__marco b,
body.leitura .secao--leitura .tempo__marco b{ color:#E0E7FF; }
body.leitura .selo,
body.leitura .secao--leitura .selo{ color:#EDF1FF; border-color:rgba(232,238,255,.55); background:rgba(1,18,120,.42); }
body.leitura .filtros button,
body.leitura .secao--leitura .filtros button{
  color:#EDF1FF; border-color:rgba(232,238,255,.5); background:rgba(1,18,120,.34);
}
body.leitura .filtros button:hover,
body.leitura .secao--leitura .filtros button:hover{ color:#fff; border-color:rgba(255,255,255,.8); }
body.leitura .filtros button[aria-pressed="true"],
body.leitura .secao--leitura .filtros button[aria-pressed="true"]{
  color:#0A1240; border-color:#fff; background:#fff;
}
body.leitura .busca-acervo{ border-color:rgba(232,238,255,.5); background:rgba(1,18,120,.34); }
body.leitura .busca-acervo > svg{ color:#C3D2FF; }
body.leitura .busca-acervo input{ color:#fff; }
body.leitura .busca-acervo input::placeholder{ color:#C8D2F2; }
body.leitura .busca-acervo__limpa{ color:#DEE4FA; }
body.leitura .caixa,
body.leitura .secao--leitura .caixa{
  border-color:rgba(232,238,255,.28); background:rgba(1,20,132,.42);
}
body.leitura .caixa h4,
body.leitura .secao--leitura .caixa h4{ color:#E4EAFF; }
body.leitura .caixa .lista li,
body.leitura .secao--leitura .caixa .lista li{ color:#EBEFFF; }
body.leitura .numeros,
body.leitura .secao--leitura .numeros{ border-color:rgba(232,238,255,.3); }
body.leitura .secao--leitura .numeros div{ border-left-color:rgba(232,238,255,.3); }
body.leitura .lista-artigos li{ border-top-color:rgba(232,238,255,.3); }
body.leitura .lista-artigos li:last-child{ border-bottom-color:rgba(232,238,255,.3); }
body.leitura .movimento,
body.leitura .secao--leitura .movimento{
  border-color:rgba(232,238,255,.26); background:rgba(1,20,132,.4);
}
body.leitura .botao--vidro,
body.leitura .secao--leitura .botao--vidro{
  color:#fff; border-color:rgba(232,238,255,.6); background:rgba(1,18,120,.42);
}
body.leitura .nota-artigo,
body.leitura .assinatura-texto{ border-top-color:rgba(232,238,255,.32); }

/* Formulario sobre o fundo claro. O campo em si continua escuro, que e o que
   diz onde se escreve, mas o rotulo acima dele e o aviso abaixo estavam num
   cinza pensado para fundo escuro e sumiam. */
body.leitura .campo > span{ color:#DDE4FA; }
body.leitura .campo input,
body.leitura .campo textarea,
body.leitura .campo select{
  color:#fff; background:rgba(1,10,58,.62); border-color:rgba(232,238,255,.42);
}
body.leitura .campo input::placeholder,
body.leitura .campo textarea::placeholder{ color:#B9C4EA; }
body.leitura .campo input:focus,
body.leitura .campo textarea:focus,
body.leitura .campo select:focus{
  border-color:#fff; background:rgba(1,10,58,.78);
}
body.leitura .escolha legend{ color:#E4EAFF; }
body.leitura .escolha__item{
  color:#EDF1FF; border-color:rgba(232,238,255,.42); background:rgba(1,10,58,.5);
}
body.leitura .escolha__item:hover{ border-color:rgba(255,255,255,.85); color:#fff; }
body.leitura .escolha__item:has(input:checked){
  border-color:#fff; background:rgba(1,14,86,.72); color:#fff;
}
body.leitura .ficha td{ color:#E6EBFC; border-bottom-color:rgba(232,238,255,.26); }
body.leitura .ficha td:first-child{ color:#DDE4FA; }

/* Linha de dados curtos, o Area · Local · Tipo das vagas e o Filme · Genero ·
   Ano das obras. O tom original foi feito para o quase preto do resto do site
   e sobre o azul cheio ficava em 3,9 de contraste, abaixo do minimo de leitura
   para texto pequeno. O separador vinha com trinta e seis por cento de
   opacidade, que sobre este fundo apagava o ponto por completo. */
body.leitura .dados{ color:#DFE5FB; }
body.leitura .dados i{ opacity:.62; }

/* ---- 24  Pagina de analise --------------------------------------------
   Ritmo de leitura: capa, texto, imagem com legenda, trecho em destaque,
   resto do texto. O que separa os blocos e o proprio espaco, sem regua nem
   caixa em volta, para a coluna de texto continuar sendo o assunto. */
.artigo-capa{ padding-bottom:clamp(10px,1.2vw,18px); }
.artigo-capa .capa__fundo img{ filter:saturate(.7) brightness(.42); }
.artigo-capa .capa__fundo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,8,46,.5) 0%, rgba(10,18,70,.86) 100%);
}

.assinatura-texto{
  margin-top:26px; padding-top:20px;
  border-top:1px solid rgba(169,177,242,.24);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12.5px; letter-spacing:.06em; color:#A3ABDD;
}
.assinatura-texto i{ font-style:normal; color:#6D7DF2; }

.figura-artigo{ margin:0; }
.figura-artigo img{
  width:100%; height:auto; border-radius:6px;
  box-shadow:0 22px 54px rgba(0,3,12,.5);
}
/* A legenda encostava na borda esquerda da imagem e no bloco seguinte. O
   recuo nos quatro lados devolve o respiro que faltava. */
.figura-artigo figcaption{
  margin-top:8px; padding:10px 12px;
  font-size:12.5px; letter-spacing:.04em; color:#A3ABDD;
}
.figura-artigo figcaption i{ font-style:normal; color:#6D7DF2; margin-inline:4px; }

/* Trecho em destaque. Sem aspas desenhadas: o corpo maior e a barra a
   esquerda ja avisam que aquilo e um realce, e aspas grandes competiriam
   com o titulo da propria pagina. */
.destaque-frase{
  margin:0; padding:4px 0 4px clamp(20px,2.4vw,32px);
  border-left:3px solid var(--azul-300);
  font-size:clamp(19px,1.9vw,26px); line-height:1.42; font-weight:400;
  color:#fff; letter-spacing:-.01em;
}

.nota-artigo{
  margin-top:34px; padding-top:22px;
  border-top:1px solid rgba(169,177,242,.24);
}

@media (max-width:760px){
  .assinatura-texto{ font-size:11.5px; gap:7px; }
}

/* ---- 26  Paginas institucionais novas ----------------------------------
   Marcas, Liderança, Sustentabilidade, História e Negócios. Todas herdam o
   fundo azul das paginas de leitura e o tipo ja definido: aqui so entram as
   formas que essas cinco paginas trouxeram e que ainda nao existiam. */

/* Ancora nunca encosta embaixo do cabecalho.
   O cabecalho e fixo e cobre o topo da tela. Sem esta reserva, clicar em
   Filmes no menu levava a secao para y zero, ou seja, para debaixo da barra:
   o titulo da secao sumia e a leitura comecava no meio do primeiro bloco.
   O valor acompanha a altura do cabecalho em cada faixa de tela. */
:where([id]){ scroll-margin-top:calc(var(--topo) + 14px); }

/* O painel do menu, fechado, nao pode receber toque.
   Ele continua ocupando a tela inteira em posicao fixa, so que deslocado
   para cima. Em navegador de celular, elemento fixo sem esta linha ainda
   captura o gesto de arrastar em parte da area, e a pagina de baixo parava
   de rolar depois de fechar o menu. */
.painel-menu{ pointer-events:none; }
.painel-menu.aberto{ pointer-events:auto; }

/* ---- mural de marcas ---------------------------------------------------
   Os cartoes anteriores eram quadrados grandes, com arte, titulo e paragrafo
   dentro da mesma caixa: seis blocos altos que empurravam a pagina para
   baixo e faziam a marca competir com o proprio texto. Agora o banner e uma
   faixa larga e baixa, so com a arte sobre o azul da casa, e o nome em caixa
   alta e a linha de apoio ficam embaixo, fora da arte. E mais perto do que
   se ve em pagina de marcas de estudio grande, e ocupa menos da metade da
   altura. */
/* Tres colunas de cartao quadrado, juntas e centralizadas.
   A largura maxima existe para o cartao nao esticar: numa tela larga, tres
   colunas soltas na largura inteira dariam quadrados de quase quinhentos
   pixels de lado, e a fileira viraria uma parede em vez de um conjunto. Com
   o teto, cada cartao fica em torno de trezentos pixels e as seis marcas
   sao lidas de uma vez, que e o que ele pediu. */
.mural-marcas{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px; margin-top:22px;
  max-width:960px; margin-inline:auto;
}
.azulejo{
  display:block; min-width:0; text-decoration:none; color:inherit;
  transition:transform .5s var(--curva);
}
.azulejo:hover,
.azulejo:focus-visible{ transform:translateY(-6px); }

/* A arte de cada empresa ocupa o cartao inteiro, no quadrado em que ela foi
   entregue. O fundo em cor da casa fica atras dela como cor de espera, para
   a caixa nunca aparecer vazia enquanto a imagem nao chegou. */
.azulejo__banner{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:1; border-radius:5px;
  border:1px solid rgba(169,177,242,.26);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(58,109,255,.42) 0%, rgba(4,10,64,0) 70%),
    linear-gradient(158deg, #0A1E9E 0%, #061470 40%, #030A46 100%);
  background-color:#05125F;
  transition:border-color .45s ease, box-shadow .45s ease;
}
.azulejo__banner img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--curva);
}
.azulejo:hover .azulejo__banner img,
.azulejo:focus-visible .azulejo__banner img{ transform:scale(1.045); }

/* Brilho que atravessa o banner. Fica parado fora da area e so entra no
   hover: e um unico elemento deslocado por transformacao, sem leitura do
   fundo, entao nao custa quadro nenhum enquanto o ponteiro nao chega. */
.azulejo__banner::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-60%; width:42%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%,
    rgba(214,232,255,.16) 46%, rgba(255,255,255,.3) 52%,
    rgba(214,232,255,.16) 58%, rgba(255,255,255,0) 100%);
  transform:skewX(-16deg) translateX(0);
  opacity:0; pointer-events:none;
}
.azulejo:hover .azulejo__banner::after,
.azulejo:focus-visible .azulejo__banner::after{
  animation:marca-brilho 1.05s var(--curva) forwards;
}
@keyframes marca-brilho{
  0%{ opacity:0; transform:skewX(-16deg) translateX(0); }
  14%{ opacity:1; }
  100%{ opacity:0; transform:skewX(-16deg) translateX(380%); }
}

/* Respiracao lenta da borda, com atraso proprio por posicao, para o mural
   nao ficar parado. Anima so opacidade de uma camada, sem mexer no arranjo
   da pagina. */
.azulejo__banner::before{
  content:""; position:absolute; inset:0; border-radius:4px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(190,214,255,.5), 0 0 24px rgba(58,109,255,.28);
  opacity:.2;
  animation:marca-respiro 7s ease-in-out infinite;
  animation-delay:var(--atraso, 0s);
}
@keyframes marca-respiro{
  0%, 100%{ opacity:.16; }
  50%{ opacity:.5; }
}
.azulejo:hover .azulejo__banner,
.azulejo:focus-visible .azulejo__banner{
  border-color:rgba(214,232,255,.72);
  box-shadow:0 20px 46px rgba(0,3,12,.5), 0 0 30px rgba(90,140,255,.3);
}

/* Nome da empresa em caixa alta, e logo abaixo a linha que explica o que ela
   faz. O nome sai da arte e vem para ca: assim o banner fica com desenho e o
   texto fica com texto, cada um no seu lugar. */
.azulejo__pe{ display:block; padding:13px 2px 0; }
.azulejo__nome{
  display:block; font-family:var(--titulo); font-weight:600;
  font-size:clamp(13px, 1.05vw, 15px); letter-spacing:.13em;
  text-transform:uppercase; color:#fff; line-height:1.3;
}
.azulejo__texto{
  display:block; margin-top:6px;
  font-size:12.5px; line-height:1.58; color:#CBD5F6;
}
.azulejo__selo{
  display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#A9BEF2;
  transition:color .35s ease;
}
.azulejo__selo svg{ width:11px; height:11px; }
.azulejo:hover .azulejo__selo{ color:#fff; }

/* Quem prefere menos movimento nao recebe nem a respiracao nem o brilho. */
@media (prefers-reduced-motion: reduce){
  .azulejo__banner::before{ animation:none; opacity:.28; }
  .azulejo:hover .azulejo__banner::after{ animation:none; }
}

/* ---- liderança --------------------------------------------------------- */
.perfil-ceo{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(22px, 3vw, 46px); align-items:start; margin-top:32px;
}
.perfil-ceo__retrato{
  position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden;
  border:1px solid rgba(169,177,242,.24);
  background:linear-gradient(160deg,#0A1046,#02040F);
  display:grid; place-items:center;
}
.perfil-ceo__retrato img{ width:100%; height:100%; object-fit:cover; display:block; }
.perfil-ceo__retrato .simbolo-vazio{ width:44%; height:auto; opacity:.5; }

.grid-lideranca{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(14px, 1.6vw, 22px); margin-top:28px;
}
.cartao-executivo{
  min-width:0; border:1px solid rgba(169,177,242,.2); border-radius:5px;
  background:rgba(1,10,58,.42); overflow:hidden;
  transition:transform .4s var(--curva), border-color .4s ease, box-shadow .4s ease;
}
.cartao-executivo:hover{
  transform:translateY(-6px);
  border-color:rgba(214,228,255,.56);
  box-shadow:0 20px 46px rgba(0,3,12,.5);
}
.cartao-executivo__retrato{
  aspect-ratio:1/1; display:grid; place-items:center;
  background:linear-gradient(160deg,#0A1046,#02040F);
  border-bottom:1px solid rgba(169,177,242,.16);
}
.cartao-executivo__retrato img{ width:100%; height:100%; object-fit:cover; }
.cartao-executivo__retrato .simbolo-vazio{ width:38%; height:auto; opacity:.42; }
.cartao-executivo__corpo{ padding:14px 15px 17px; }
.cartao-executivo__corpo h3{
  font-family:var(--titulo); font-size:15.5px; letter-spacing:.02em; color:#fff;
}
.cartao-executivo__corpo p{
  margin-top:6px; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:#BFC9EE;
}

/* ---- pilares do plano ambiental, social e de governanca ---------------- */
.grid-pilares{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(14px, 1.6vw, 22px); margin-top:32px;
}
.card-pilar{
  position:relative; min-width:0; overflow:hidden;
  padding:24px 22px 26px;
  border:1px solid rgba(169,177,242,.22); border-radius:6px;
  background:rgba(1,10,58,.45);
}
/* O numero e marca d'agua: fica atras do texto, sem area de toque e fora da
   leitura de tela, porque repetir um a quatro em voz alta nao ajuda ninguem. */
.card-pilar__numero{
  position:absolute; top:-.18em; right:.06em;
  font-family:var(--titulo); font-weight:700; font-size:clamp(88px,9vw,132px);
  line-height:1; color:rgba(255,255,255,.04);
  pointer-events:none; user-select:none;
}
.card-pilar h3{
  position:relative; font-family:var(--titulo);
  font-size:clamp(17px,1.5vw,20px); letter-spacing:.03em; color:#fff;
}
.card-pilar p{
  position:relative; margin-top:12px;
  font-size:13.5px; line-height:1.66; color:#E2E8FB;
}

/* ---- compromissos publicos e carta oficial ----------------------------- */
.pilha-compromissos{ display:grid; gap:16px; margin-top:30px; }
.compromisso{
  padding:22px 24px; border:1px solid rgba(169,177,242,.22);
  border-radius:6px; background:rgba(1,10,58,.45);
}
.compromisso h3{
  font-family:var(--titulo); font-size:clamp(16px,1.4vw,19px);
  letter-spacing:.03em; color:#fff;
}
.compromisso p{ margin-top:10px; font-size:13.5px; line-height:1.66; color:#E2E8FB; }

.compromisso--dobra{ padding:0; }
.compromisso--dobra > summary{
  list-style:none; cursor:pointer; padding:22px 24px;
  transition:background .3s ease;
}
.compromisso--dobra > summary::-webkit-details-marker{ display:none; }
.compromisso--dobra > summary:hover{ background:rgba(6,20,96,.34); }
.compromisso__cabeca{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
}
.compromisso__sinal{
  flex:none; width:26px; height:26px; margin-top:2px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(214,228,255,.44); color:#DDE4FA;
  transition:transform .4s var(--curva), border-color .3s ease;
}
.compromisso--dobra[open] .compromisso__sinal{
  transform:rotate(180deg); border-color:#fff;
}
.compromisso__sinal svg{ width:12px; height:12px; }

/* A carta tem aparencia de documento: fundo mais claro que o cartao, coluna
   estreita e a assinatura separada por um fio. */
.carta-oficial{
  margin:0 24px 24px; padding:clamp(22px,3vw,34px);
  border:1px solid rgba(214,228,255,.26); border-radius:4px;
  background:rgba(233,238,252,.07);
}
.carta-oficial p{
  font-size:13.5px; line-height:1.78; color:#EEF2FF;
}
.carta-oficial p + p{ margin-top:14px; }
.carta-oficial .carta-endereco{ white-space:pre-line; color:#DDE4FA; }
.carta-oficial ul{ margin-top:14px; display:grid; gap:11px; padding-left:20px; }
.carta-oficial li{ font-size:13.5px; line-height:1.72; color:#EEF2FF; }
.carta-oficial .carta-assina{
  margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(214,228,255,.24);
  font-weight:600; color:#fff;
}
.carta-oficial .carta-registro{
  margin-top:16px; font-size:11.5px; letter-spacing:.05em; color:#C3D2FF;
}

/* ---- galeria de eventos e trilha de conquistas ------------------------- */
.grade-eventos{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 1.8vw, 24px); margin-top:32px;
}
.evento-cartao{
  min-width:0; padding:22px 22px 24px;
  border:1px solid rgba(169,177,242,.22); border-radius:6px;
  background:rgba(1,10,58,.45);
  transition:transform .4s var(--curva), border-color .4s ease;
}
.evento-cartao:hover{ transform:translateY(-6px); border-color:rgba(214,228,255,.5); }
.evento-cartao__ano{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#C3D2FF;
}
.evento-cartao h3{
  margin-top:10px; font-family:var(--titulo);
  font-size:clamp(16px,1.4vw,19px); letter-spacing:.02em; color:#fff;
}
.evento-cartao p{ margin-top:10px; font-size:13.5px; line-height:1.64; color:#E2E8FB; }

/* Aviso honesto de secao que ainda nao tem material. Nunca imagem generica
   para preencher espaco: quadro vazio, com o motivo escrito. */
.aviso-acervo{
  margin-top:30px; padding:clamp(24px,3vw,38px);
  border:1px dashed rgba(169,177,242,.34); border-radius:6px;
  background:rgba(1,10,58,.3); text-align:center;
}
.aviso-acervo img{ width:52px; height:auto; opacity:.5; }
.aviso-acervo p{ margin-top:14px; font-size:13.5px; line-height:1.66; color:#DDE4FA; }

/* ---- faixa de atalhos institucionais na pagina Sobre ------------------- */
.atalhos-institucionais{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;
}

/* ---- respiro em telas menores ------------------------------------------ */
@media (max-width:1024px){
  .mural-marcas{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:640px; }
  .grid-lideranca{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .grid-pilares{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grade-eventos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .perfil-ceo{ grid-template-columns:minmax(0,1fr); }
  .perfil-ceo__retrato{ max-width:280px; }
  .grid-lideranca{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .carta-oficial{ margin:0 16px 16px; }
  .compromisso--dobra > summary{ padding:20px 18px; }
}
@media (max-width:520px){
  /* Duas colunas tambem no celular. Cartao quadrado em coluna unica ocuparia
     a largura inteira da tela e cada marca empurraria a proxima para fora do
     campo de visao: seriam seis rolagens para ver seis marcas. */
  .mural-marcas{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .azulejo__nome{ font-size:12px; letter-spacing:.1em; }
  .azulejo__texto{ font-size:11.5px; line-height:1.5; }
  .azulejo__selo{ font-size:9.5px; letter-spacing:.12em; margin-top:7px; }

  .grid-pilares{ grid-template-columns:minmax(0, 1fr); }
  .grade-eventos{ grid-template-columns:minmax(0, 1fr); }
  .atalhos-institucionais .botao{ width:100%; justify-content:center; }
}

/* O cargo do fundador traz o nome da empresa por extenso, e nome de marca nao
   pode quebrar no fim da linha. Em maiuscula com espacamento largo isso vira
   uma palavra unica de trinta caracteres, mais larga que a tela de 320px, e a
   pagina inteira ganhava rolagem lateral. Aqui o tipo encolhe em vez de a
   marca partir. */
@media (max-width:420px){
  .perfil-ceo .rotulo{ font-size:10.5px; letter-spacing:.07em; }
}


/* O rotulo repetido saiu de cima do titulo destes cartoes: dizer
   "frente de atuacao" seis vezes seguidas nao informa, so ocupa linha. Sem
   ele, o titulo passa a ser o primeiro elemento e nao precisa mais do recuo
   que existia para afasta-lo do rotulo. */
.evento-cartao h3:first-child{ margin-top:0; }

/* Os tres botoes do bloco Sobre nos cabem lado a lado em tela cheia. O que
   os empurrava para a linha de baixo era o respiro interno do botao, pensado
   para peca isolada. Aqui, e so neste bloco, o respiro encolhe o suficiente
   para os tres caberem, sem mexer em nenhum outro botao do site. */
@media (min-width:1100px){
  #sobre-nos .abertura__acoes{ flex-wrap:nowrap; gap:11px; }
  #sobre-nos .abertura__acoes .botao{ padding:0 20px; white-space:nowrap; }
}

/* ---- 27  Rodape em tela estreita ---------------------------------------
   A malha de cinco colunas comprimida ate caber deixa cada coluna com cento
   e vinte e oito pixels, e ai quase todo link quebra em duas linhas: um
   nome de pagina partido no meio nao le como nome de pagina, le como erro.

   A escada abaixo respeita a estrutura aprovada, que continua sendo a marca
   mais quatro grupos com os mesmos quatro titulos. O que muda e quantos
   grupos cabem lado a lado. A parte de baixo do rodape nao e tocada. */
@media (max-width:900px){
  .rodape__malha{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .rodape__coluna--marca{ grid-column:1 / -1; }
}
@media (max-width:480px){
  /* Uma coluna so. Cada link passa a ter a largura inteira da tela e volta
     a caber numa linha, que era o problema real aqui. */
  .rodape__malha{ grid-template-columns:minmax(0, 1fr); gap:clamp(22px,6vw,30px); }
  /* O espacamento entre letras do titulo foi desenhado para tela larga.
     Em trezentos e vinte pixels ele sozinho partia Midia e parceiros em
     duas linhas. */
  .rodape h5{ margin-bottom:14px; letter-spacing:.2em; }
  .rodape__coluna a{ margin-bottom:13px; }
}

/* ---- 28  Endereço de e-mail em tela estreita ---------------------------
   Vale so no celular. No desktop nada muda: la o endereço cabe inteiro numa
   linha e continua exatamente como foi aprovado.

   O problema era a regra que permitia quebrar em qualquer letra. Ela existe
   para o endereço nunca estourar a caixa, mas o preço era um "r" sozinho na
   linha de baixo, que lê como erro de digitação. Agora a quebra so acontece
   nos dois pontos que o script marca, a arroba e o ponto do domínio, e o
   corpo do texto encolhe o suficiente para caber na maioria das larguras
   sem precisar quebrar nada. */
@media (max-width:640px){
  a[data-email]{ overflow-wrap:normal; word-break:normal; hyphens:none; }
  .caixa a[data-email]{ font-size:14.5px; letter-spacing:0; }
}
@media (max-width:380px){
  .caixa a[data-email]{ font-size:13.5px; }
}

/* =========================================================================
   29  Acertos de celular
   Tudo aqui vive dentro de consulta de largura. Acima de 760px nada muda:
   a versão de tela larga está aprovada e não pode mover um pixel.
   ========================================================================= */

@media (max-width:760px){

  /* ---- banner da inicial ------------------------------------------------
     Na tela do celular o cartaz aparece atrás do texto, e ficha técnica mais
     sinopse cobriam justamente a parte da imagem que faz a pessoa querer
     clicar. Ficam o rótulo, o título e os dois botões. O texto não some do
     site: ele continua inteiro na página da obra, que é onde se lê. */
  .abertura__conteudo .dados,
  .abertura__conteudo .lide{ display:none; }
  .abertura__conteudo .abertura__acoes{ margin-top:26px; }

  /* ---- botões do banner -------------------------------------------------
     Ocupavam a largura inteira. Com legenda curta, sobrava um deserto de
     azul dos dois lados e o botão lia como caixa vazia. Agora ele mede o
     que a legenda precisa, mais um respiro generoso nas laterais. A altura
     não muda: são 54px, que é o alvo confortável para o dedo. */
  .abertura__acoes{ flex-direction:column; align-items:flex-start; gap:12px; }
  .abertura__acoes .botao{ width:auto; padding-inline:26px; }

  /* ---- rótulo do banner -------------------------------------------------
     A linha é uma caixa flexível com três partes: o traço, o nome da faixa e
     a etapa da produção. No corpo de 12px com espaçamento de letra largo ela
     não cabe na largura do celular, e as duas partes de texto quebravam cada
     uma por dentro, deixando um vão no meio da linha. Corpo e espaçamento
     menores fazem a linha inteira caber de uma vez. */
  .abertura__conteudo .rotulo{ font-size:10px; letter-spacing:.15em; gap:9px; }
  .abertura__conteudo .rotulo::before{ width:20px; }
}

@media (max-width:560px){
  /* A regra antiga esticava o botão até a borda. Ela vinha depois desta na
     folha, então precisa ser desfeita aqui também. */
  .abertura__acoes .botao{ width:auto; }
}

@media (max-width:760px){
  /* ---- botão isolado dentro de cartão ----------------------------------
     Mesmo caso do banner: esticado, com a legenda perdida no meio. Encosta
     na borda esquerda do cartão e mede o que precisa. */
  /* O botao de uma vaga ocupava a largura inteira do cartao, com a legenda
     curta perdida no meio de um campo vazio. Encostado na esquerda e medindo
     o que a legenda precisa, ele volta a parecer botao. A regra que o
     esticava mora antes desta na folha e precisa ser desfeita pelo nome
     exato, senao vence pela especificidade. */
  .vaga .botao,
  .vaga .botao--curto{ margin-left:0; width:auto; align-self:flex-start; }

  /* ---- par de indicadores ----------------------------------------------
     A regra que empilha os indicadores em coluna única convivia com a que
     mantém o par lado a lado, e a segunda vencia por vir depois na folha.
     Sobrava o recuo de cima só na segunda célula: o número da direita
     descia vinte pixels e lia como desalinhamento. Aqui as duas células
     ganham o mesmo respiro, e o texto para de encostar na borda. */
  .numeros--par{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .numeros--par div,
  .numeros--par div:first-child{
    padding:22px 14px; border-top:0; border-left:0;
  }
  .numeros--par div:first-child{ padding-left:0; }
  .numeros--par div + div{ border-left:1px solid var(--linha); }
  body.leitura .numeros--par div + div{ border-left-color:rgba(232,238,255,.3); }
}

@media (max-width:760px){
  /* ---- rodapé, parte de baixo -------------------------------------------
     Ordem pedida, de cima para baixo: canais oficiais, depois a linha de
     marca e direitos, que é a última coisa do rodapé.

     Os oito ícones em fileira única não cabem na largura do celular: sobrava
     um sozinho na segunda linha, que lê como erro. Em grade de quatro
     colunas eles ficam quatro e quatro, centralizados, sempre simétricos.

     O símbolo e o texto de direitos continuam lado a lado, como na tela
     larga: é assim que a assinatura foi aprovada. */
  .rodape__legal{
    display:grid; grid-template-columns:auto 1fr;
    align-items:center; gap:20px 16px;
  }
  .canais{
    grid-column:1 / -1; order:-1;
    margin-left:0; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:12px;
  }
  .canais > span{ margin-bottom:0; }
  .canais ul{
    display:grid; grid-template-columns:repeat(4, auto);
    justify-content:center; gap:12px;
  }
  .rodape__legal .simbolo{ grid-column:1; }
  .rodape__legal p{ grid-column:2; }
}

@media (max-width:560px){
  /* ---- assinatura do rodapé --------------------------------------------
     Em coluna única ela ficava encostada na esquerda, com o símbolo de um
     lado e o nome do outro. Centralizada, o símbolo pousa no eixo do nome e
     o conjunto lê como assinatura, e não como dois elementos soltos. */
  .rodape__coluna a.assinatura-empilhada{ justify-content:center; justify-items:center; }
  .assinatura-empilhada img{ justify-self:center; }
  .rodape__coluna--marca{ display:flex; justify-content:center; }
}

@media (max-width:760px){
  /* ---- fundo estável durante a rolagem ---------------------------------
     A camada de fundo é fixa na tela. No celular, a barra de endereço do
     navegador recolhe assim que a pessoa rola, e a altura visível cresce de
     uma vez: a camada é redimensionada no meio do movimento e o degradê
     salta, que é a quebra que aparece na rolagem.

     Amarrando a altura à medida da tela sem a barra, o recolhimento deixa de
     mudar o tamanho da camada e o degradê fica parado. A largura continua
     acompanhando a tela. */
  .aurora{ inset:0 0 auto 0; height:100lvh; min-height:100svh; }
  .grao{ inset:0 0 auto 0; height:100lvh; min-height:100svh; }

  /* A linha de marca e direitos cabe em duas linhas, como na referência.
     Com o corpo de tela larga ela partia em três e o ano ficava sozinho. */
  .rodape__legal p{ font-size:13px; }
}

@media (max-width:760px){
  /* ---- fileiras que rolam de lado -------------------------------------
     A rolagem suave global faz o navegador animar todo deslocamento. Num
     arrasto de dedo, isso vira atraso: o conteudo persegue o gesto em vez
     de acompanhá-lo. Dentro da fileira o movimento passa a ser direto.

     O contorno também evita que o gesto na fileira empurre a página inteira
     quando ela chega ao fim, que é o solavanco que dá sensação de travar. */
  .trilho{
    scroll-behavior:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================================================================
   30  Acertos finais de celular
   ========================================================================= */

@media (max-width:760px){
  /* ---- linha de marca e direitos ---------------------------------------
     Formato da referência: duas linhas, a primeira inteira. No corpo de tela
     larga ela partia em três e o ano ficava sozinho, o que lê como erro. O
     corpo encolhe até a primeira linha caber inteira, e só por isso. */
  .rodape__legal p{ font-size:12px; line-height:1.55; }

  /* ---- etiqueta do menu -------------------------------------------------
     Ela mede o próprio texto e nada além disso. Solta dentro da linha, a
     caixa esticava e virava um retângulo vazio ao lado da palavra. */
  .painel-menu .menu__etiqueta{
    font-size:9.5px; padding:4px 8px; letter-spacing:.12em;
    width:max-content; max-width:max-content;
    justify-self:start; align-self:center;
  }

  /* ---- endereços de e-mail dentro de cartão ----------------------------
     Os dois em uma linha só, com o mesmo corpo. O endereço mais longo é quem
     define o tamanho: se ele cabe, o outro também cabe, e manter os dois
     iguais é o que faz a dupla ler como dupla. */
  .caixa a[data-email]{ font-size:13px; letter-spacing:-.01em; }
}

@media (max-width:380px){
  .caixa a[data-email]{ font-size:12px; }
}

/* ---- 31  Bastidores em slide -------------------------------------------
   A fileira continua com as mesmas tres caixas, no mesmo tamanho e na mesma
   posicao de antes. O que mudou e o conteudo de cada uma: em vez de uma
   fotografia fixa, cada caixa percorre a sua parte do acervo da producao.
   Nenhuma regra de .galeria acima foi tocada, para que a grade, o raio de
   canto e a proporcao 16/9 permanecam identicos ao que ja estava aprovado.

   As fotos ficam empilhadas no mesmo lugar e trocam por opacidade. Nao ha
   deslocamento de caixa nem mudanca de altura durante a troca, entao o
   navegador nao precisa recalcular o arranjo da pagina a cada foto. */
.galeria__caixa{ isolation:isolate; }
.galeria__caixa img{
  position:absolute; inset:0; opacity:0;
  transition:opacity .75s var(--curva), transform .6s var(--curva);
}
.galeria__caixa img.ativa{ opacity:1; }

/* O escurecimento so existe atras dos controles, no rodape da caixa, e nao
   sobre a fotografia inteira: e o suficiente para a seta e o contador terem
   contraste sem apagar a imagem. */
.galeria__caixa::after{
  content:""; position:absolute; inset:auto 0 0 0; height:44%;
  background:linear-gradient(to top, rgba(2,5,20,.72) 0%, rgba(2,5,20,0) 100%);
  opacity:0; transition:opacity .4s ease; pointer-events:none; z-index:1;
}
.galeria__caixa:hover::after,
.galeria__caixa:focus-within::after{ opacity:1; }

.galeria__seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; padding:0; z-index:2;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(214,232,255,.42); border-radius:50%;
  background:rgba(4,8,26,.6); color:#EAECFA;
  opacity:0; transition:opacity .3s ease, background .3s ease, border-color .3s ease;
}
.galeria__seta--esq{ left:9px; }
.galeria__seta--dir{ right:9px; }
.galeria__caixa:hover .galeria__seta,
.galeria__caixa:focus-within .galeria__seta{ opacity:1; }
.galeria__seta:hover{ background:rgba(10,30,158,.85); border-color:rgba(214,232,255,.8); }
.galeria__seta:focus-visible{ opacity:1; outline:2px solid #B8CCFF; outline-offset:2px; }

.galeria__conta{
  position:absolute; right:11px; bottom:9px; z-index:2;
  font-size:10.5px; letter-spacing:.1em; color:#EAECFA;
  opacity:0; transition:opacity .3s ease;
}
.galeria__conta b{ font-weight:600; }
.galeria__caixa:hover .galeria__conta,
.galeria__caixa:focus-within .galeria__conta{ opacity:1; }

/* Em tela de toque nao existe passagem de ponteiro: sem isto os controles
   nunca apareceriam no celular, e a caixa pareceria uma foto parada. */
@media (hover: none){
  .galeria__seta, .galeria__conta{ opacity:1; }
  .galeria__caixa::after{ opacity:1; }
}

/* Quem pede menos movimento recebe a troca instantanea e sem passagem
   automatica; as setas continuam funcionando. */
@media (prefers-reduced-motion: reduce){
  .galeria__caixa img{ transition:none; }
}

/* --- painel de marca da pagina Sobre -------------------------------------
   O bloco ao lado do texto de abertura trazia uma fotografia de litoral que
   nao tinha relacao com o assunto da secao. No lugar dela entra a propria
   marca, na mesma construcao empilhada do rodape: o simbolo sobre o nome, e
   a palavra de baixo distribuida na largura da de cima.

   O corpo da letra e declarado aqui, e nao herdado do rodape, porque ali o
   logotipo e um item de navegacao de canto e aqui e a imagem principal do
   bloco. A proporcao 16/10 e a mesma da fotografia que saiu, de modo que a
   coluna vizinha nao muda de altura.

   A leitura de tela recebe o nome pelo rotulo do proprio painel: a linha de
   baixo e uma letra por elemento e seria soletrada. */
.marca-painel{
  margin:0; display:grid; place-content:center; justify-items:center;
  aspect-ratio:16/10; border-radius:6px; overflow:hidden;
  background:radial-gradient(120% 116% at 50% 0%, #101A6B 0%, #060B2E 48%, #02040F 100%);
  border:1px solid rgba(169,177,242,.22);
}
.marca-painel img{
  width:clamp(58px,6.4vw,88px); height:auto; object-fit:contain;
  margin-bottom:clamp(14px,1.6vw,22px);
  filter:drop-shadow(0 0 18px rgba(27,47,204,.45));
}
.marca-painel__nome,
.marca-painel__base{
  font-family:var(--serif);
  font-size:clamp(19px,2vw,28px); font-weight:600; line-height:1;
  background:linear-gradient(180deg,#FFFFFF 8%,#CBCFEC 52%,#878CB2 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding-block:1px;
  filter:drop-shadow(0 1px 14px rgba(0,2,14,.9));
}
.marca-painel__nome{ letter-spacing:.10em; white-space:nowrap; }

/* Mesma marca ocupando a caixa do teaser, que e 16 por 9 e nao 16 por 10.
   Obra sem arte propria mostra a marca no lugar onde as outras mostram a
   capa, e nao uma fotografia de banco de imagem sem relacao com o filme. */
.marca-painel--tela{
  position:absolute; inset:0; aspect-ratio:auto;
  border:0; border-radius:0;
}

/* Mesma solucao da assinatura do rodape: a largura zero com largura minima
   de cem por cento faz a linha ocupar exatamente a largura da linha de cima
   sem opinar sobre o tamanho dela. Assim o E cai sob o D e o T final sob o
   X em qualquer corpo de fonte. */
.marca-painel__base{
  position:relative; display:flex; justify-content:space-between;
  letter-spacing:0; width:0; min-width:100%; margin-top:3px;
}
.marca-painel__base sup{
  position:absolute; right:-1.1em; top:-.06em;
  font-size:.52em; -webkit-text-fill-color:#C2C7E6; color:#C2C7E6;
}